CINXE.COM

<!doctype html><html lang="en"> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport"> <title>CSS Masking Module Level 1</title> <meta content="CRD" name="w3c-status"> <meta content="Bikeshed version d5d58a306, updated Fri Jan 26 16:12:28 2024 -0800" name="generator"> <link href="https://www.w3.org/TR/css-masking-1/" rel="canonical"> <meta content="f5f1c4a4fa1b31d50dc161f20718405348c688a5" name="revision"> <style type="text/css"> a[data-link-type=element]::before,span[data-link-type=element]::before { content: '<'; } a[data-link-type=element]::after,span[data-link-type=element]::after { content: '>'; } </style> <style>/* Boilerplate: style-autolinks */ .css.css, .property.property, .descriptor.descriptor { color: var(--a-normal-text); font-size: inherit; font-family: inherit; } .css::before, .property::before, .descriptor::before { content: "‘"; } .css::after, .property::after, .descriptor::after { content: "’"; } .property, .descriptor { /* Don't wrap property and descriptor names */ white-space: nowrap; } .type { /* CSS value <type> */ font-style: italic; } pre .property::before, pre .property::after { content: ""; } [data-link-type="property"]::before, [data-link-type="propdesc"]::before, [data-link-type="descriptor"]::before, [data-link-type="value"]::before, [data-link-type="function"]::before, [data-link-type="at-rule"]::before, [data-link-type="selector"]::before, [data-link-type="maybe"]::before { content: "‘"; } [data-link-type="property"]::after, [data-link-type="propdesc"]::after, [data-link-type="descriptor"]::after, [data-link-type="value"]::after, [data-link-type="function"]::after, [data-link-type="at-rule"]::after, [data-link-type="selector"]::after, [data-link-type="maybe"]::after { content: "’"; } [data-link-type].production::before, [data-link-type].production::after, .prod [data-link-type]::before, .prod [data-link-type]::after { content: ""; } [data-link-type=element], [data-link-type=element-attr] { font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace; font-size: .9em; } [data-link-type=element]::before { content: "<" } [data-link-type=element]::after { content: ">" } [data-link-type=biblio] { white-space: pre; } @media (prefers-color-scheme: dark) { :root { --selflink-text: black; --selflink-bg: silver; --selflink-hover-text: white; } } </style> <style>/* Boilerplate: style-colors */ /* Any --*-text not paired with a --*-bg is assumed to have a transparent bg */ :root { color-scheme: light dark; --text: black; --bg: white; --unofficial-watermark: url(https://www.w3.org/StyleSheets/TR/2016/logos/UD-watermark); --logo-bg: #1a5e9a; --logo-active-bg: #c00; --logo-text: white; --tocnav-normal-text: #707070; --tocnav-normal-bg: var(--bg); --tocnav-hover-text: var(--tocnav-normal-text); --tocnav-hover-bg: #f8f8f8; --tocnav-active-text: #c00; --tocnav-active-bg: var(--tocnav-normal-bg); --tocsidebar-text: var(--text); --tocsidebar-bg: #f7f8f9; --tocsidebar-shadow: rgba(0,0,0,.1); --tocsidebar-heading-text: hsla(203,20%,40%,.7); --toclink-text: var(--text); --toclink-underline: #3980b5; --toclink-visited-text: var(--toclink-text); --toclink-visited-underline: #054572; --heading-text: #005a9c; --hr-text: var(--text); --algo-border: #def; --del-text: red; --del-bg: transparent; --ins-text: #080; --ins-bg: transparent; --a-normal-text: #034575; --a-normal-underline: #bbb; --a-visited-text: var(--a-normal-text); --a-visited-underline: #707070; --a-hover-bg: rgba(75%, 75%, 75%, .25); --a-active-text: #c00; --a-active-underline: #c00; --blockquote-border: silver; --blockquote-bg: transparent; --blockquote-text: currentcolor; --issue-border: #e05252; --issue-bg: #fbe9e9; --issue-text: var(--text); --issueheading-text: #831616; --example-border: #e0cb52; --example-bg: #fcfaee; --example-text: var(--text); --exampleheading-text: #574b0f; --note-border: #52e052; --note-bg: #e9fbe9; --note-text: var(--text); --noteheading-text: hsl(120, 70%, 30%); --notesummary-underline: silver; --assertion-border: #aaa; --assertion-bg: #eee; --assertion-text: black; --advisement-border: orange; --advisement-bg: #fec; --advisement-text: var(--text); --advisementheading-text: #b35f00; --warning-border: red; --warning-bg: hsla(40,100%,50%,0.95); --warning-text: var(--text); --amendment-border: #330099; --amendment-bg: #F5F0FF; --amendment-text: var(--text); --amendmentheading-text: #220066; --def-border: #8ccbf2; --def-bg: #def; --def-text: var(--text); --defrow-border: #bbd7e9; --datacell-border: silver; --indexinfo-text: #707070; --indextable-hover-text: black; --indextable-hover-bg: #f7f8f9; --outdatedspec-bg: rgba(0, 0, 0, .5); --outdatedspec-text: black; --outdated-bg: maroon; --outdated-text: white; --outdated-shadow: red; --editedrec-bg: darkorange; } @media (prefers-color-scheme: dark) { :root { --text: #ddd; --bg: black; --unofficial-watermark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cg fill='%23100808' transform='translate(200 200) rotate(-45) translate(-200 -200)' stroke='%23100808' stroke-width='3'%3E%3Ctext x='50%25' y='220' style='font: bold 70px sans-serif; text-anchor: middle; letter-spacing: 6px;'%3EUNOFFICIAL%3C/text%3E%3Ctext x='50%25' y='305' style='font: bold 70px sans-serif; text-anchor: middle; letter-spacing: 6px;'%3EDRAFT%3C/text%3E%3C/g%3E%3C/svg%3E"); --logo-bg: #1a5e9a; --logo-active-bg: #c00; --logo-text: white; --tocnav-normal-text: #999; --tocnav-normal-bg: var(--bg); --tocnav-hover-text: var(--tocnav-normal-text); --tocnav-hover-bg: #080808; --tocnav-active-text: #f44; --tocnav-active-bg: var(--tocnav-normal-bg); --tocsidebar-text: var(--text); --tocsidebar-bg: #080808; --tocsidebar-shadow: rgba(255,255,255,.1); --tocsidebar-heading-text: hsla(203,20%,40%,.7); --toclink-text: var(--text); --toclink-underline: #6af; --toclink-visited-text: var(--toclink-text); --toclink-visited-underline: #054572; --heading-text: #8af; --hr-text: var(--text); --algo-border: #456; --del-text: #f44; --del-bg: transparent; --ins-text: #4a4; --ins-bg: transparent; --a-normal-text: #6af; --a-normal-underline: #555; --a-visited-text: var(--a-normal-text); --a-visited-underline: var(--a-normal-underline); --a-hover-bg: rgba(25%, 25%, 25%, .2); --a-active-text: #f44; --a-active-underline: var(--a-active-text); --borderedblock-bg: rgba(255, 255, 255, .05); --blockquote-border: silver; --blockquote-bg: var(--borderedblock-bg); --blockquote-text: currentcolor; --issue-border: #e05252; --issue-bg: var(--borderedblock-bg); --issue-text: var(--text); --issueheading-text: hsl(0deg, 70%, 70%); --example-border: hsl(50deg, 90%, 60%); --example-bg: var(--borderedblock-bg); --example-text: var(--text); --exampleheading-text: hsl(50deg, 70%, 70%); --note-border: hsl(120deg, 100%, 35%); --note-bg: var(--borderedblock-bg); --note-text: var(--text); --noteheading-text: hsl(120, 70%, 70%); --notesummary-underline: silver; --assertion-border: #444; --assertion-bg: var(--borderedblock-bg); --assertion-text: var(--text); --advisement-border: orange; --advisement-bg: #222218; --advisement-text: var(--text); --advisementheading-text: #f84; --warning-border: red; --warning-bg: hsla(40,100%,20%,0.95); --warning-text: var(--text); --amendment-border: #330099; --amendment-bg: #080010; --amendment-text: var(--text); --amendmentheading-text: #cc00ff; --def-border: #8ccbf2; --def-bg: #080818; --def-text: var(--text); --defrow-border: #136; --datacell-border: silver; --indexinfo-text: #aaa; --indextable-hover-text: var(--text); --indextable-hover-bg: #181818; --outdatedspec-bg: rgba(255, 255, 255, .5); --outdatedspec-text: black; --outdated-bg: maroon; --outdated-text: white; --outdated-shadow: red; --editedrec-bg: darkorange; } /* In case a transparent-bg image doesn't expect to be on a dark bg, which is quite common in practice... */ img { background: white; } } </style> <style>/* Boilerplate: style-counters */ body { counter-reset: example figure issue; } .issue { counter-increment: issue; } .issue:not(.no-marker)::before { content: "Issue " counter(issue); } .example { counter-increment: example; } .example:not(.no-marker)::before { content: "Example " counter(example); } .invalid.example:not(.no-marker)::before, .illegal.example:not(.no-marker)::before { content: "Invalid Example" counter(example); } figcaption { counter-increment: figure; } figcaption:not(.no-marker)::before { content: "Figure " counter(figure) " "; } </style> <style>/* Boilerplate: style-dfn-panel */ :root { --dfnpanel-bg: #ddd; --dfnpanel-text: var(--text); --dfnpanel-target-bg: #ffc; --dfnpanel-target-outline: orange; } @media (prefers-color-scheme: dark) { :root { --dfnpanel-bg: #222; --dfnpanel-text: var(--text); --dfnpanel-target-bg: #333; --dfnpanel-target-outline: silver; } } .dfn-panel { position: absolute; z-index: 35; width: 20em; width: 300px; height: auto; max-height: 500px; overflow: auto; padding: 0.5em 0.75em; font: small Helvetica Neue, sans-serif, Droid Sans Fallback; background: var(--dfnpanel-bg); color: var(--dfnpanel-text); border: outset 0.2em; white-space: normal; /* in case it's moved into a pre */ } .dfn-panel:not(.on) { display: none; } .dfn-panel * { margin: 0; padding: 0; text-indent: 0; } .dfn-panel > b { display: block; } .dfn-panel a { color: var(--dfnpanel-text); } .dfn-panel a:not(:hover) { text-decoration: none !important; border-bottom: none !important; } .dfn-panel a:focus { outline: 5px auto Highlight; outline: 5px auto -webkit-focus-ring-color; } .dfn-panel > b + b { margin-top: 0.25em; } .dfn-panel ul { padding: 0 0 0 1em; list-style: none; } .dfn-panel li a { max-width: calc(300px - 1.5em - 1em); overflow: hidden; text-overflow: ellipsis; } .dfn-panel.activated { display: inline-block; position: fixed; left: 8px; bottom: 2em; margin: 0 auto; max-width: calc(100vw - 1.5em - .4em - .5em); max-height: 30vh; transition: left 1s ease-out, bottom 1s ease-out; } .dfn-panel .link-item:hover { text-decoration: underline; } .dfn-panel .link-item .copy-icon { opacity: 0; } .dfn-panel .link-item:hover .copy-icon, .dfn-panel .link-item .copy-icon:focus { opacity: 1; } .dfn-panel .copy-icon { display: inline-block; margin-right: 0.5em; width: 0.85em; height: 1em; border-radius: 3px; background-color: #ccc; cursor: pointer; } .dfn-panel .copy-icon .icon { width: 100%; height: 100%; background-color: #fff; display: flex; justify-content: center; align-items: center; position: relative; } .dfn-panel .copy-icon .icon::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 1px solid black; background-color: #ccc; opacity: 0.25; transform: translate(3px, -3px); } .dfn-panel .copy-icon:active .icon::before { opacity: 1; } .dfn-paneled[role="button"] { cursor: help; } .highlighted { animation: target-fade 3s; } @keyframes target-fade { from { background-color: var(--dfnpanel-target-bg); outline: 5px solid var(--dfnpanel-target-outline); } to { color: var(--a-normal-text); background-color: transparent; outline: transparent; } } </style> <style>/* Boilerplate: style-idl-highlighting */ pre.idl.highlight { background: var(--borderedblock-bg, var(--def-bg)); } </style> <style>/* Boilerplate: style-issues */ a[href].issue-return { float: right; float: inline-end; color: var(--issueheading-text); font-weight: bold; text-decoration: none; } </style> <style>/* Boilerplate: style-md-lists */ /* This is a weird hack for me not yet following the commonmark spec regarding paragraph and lists. */ [data-md] > :first-child { margin-top: 0; } [data-md] > :last-child { margin-bottom: 0; } </style> <style>/* Boilerplate: style-ref-hints */ :root { --ref-hint-bg: #ddd; --ref-hint-text: var(--text); } @media (prefers-color-scheme: dark) { :root { --ref-hint-bg: #222; --ref-hint-text: var(--text); } } .ref-hint { display: inline-block; position: absolute; z-index: 35; width: 20em; width: 300px; height: auto; max-height: 500px; overflow: auto; padding: 0.5em 0.5em; font: small Helvetica Neue, sans-serif, Droid Sans Fallback; background: var(--ref-hint-bg); color: var(--ref-hint-text); border: outset 0.2em; white-space: normal; /* in case it's moved into a pre */ } .ref-hint * { margin: 0; padding: 0; text-indent: 0; } .ref-hint ul { padding: 0 0 0 1em; list-style: none; } </style> <style>/* Boilerplate: style-selflinks */ :root { --selflink-text: white; --selflink-bg: gray; --selflink-hover-text: black; } .heading, .issue, .note, .example, li, dt { position: relative; } a.self-link { position: absolute; top: 0; left: calc(-1 * (3.5rem - 26px)); width: calc(3.5rem - 26px); height: 2em; text-align: center; border: none; transition: opacity .2s; opacity: .5; } a.self-link:hover { opacity: 1; } .heading > a.self-link { font-size: 83%; } .example > a.self-link, .note > a.self-link, .issue > a.self-link { /* These blocks are overflow:auto, so positioning outside doesn't work. */ left: auto; right: 0; } li > a.self-link { left: calc(-1 * (3.5rem - 26px) - 2em); } dfn > a.self-link { top: auto; left: auto; opacity: 0; width: 1.5em; height: 1.5em; background: var(--selflink-bg); color: var(--selflink-text); font-style: normal; transition: opacity .2s, background-color .2s, color .2s; } dfn:hover > a.self-link { opacity: 1; } dfn > a.self-link:hover { color: var(--selflink-hover-text); } a.self-link::before { content: "¶"; } .heading > a.self-link::before { content: "§"; } dfn > a.self-link::before { content: "#"; } </style> <style>/* Boilerplate: style-syntax-highlighting */ code.highlight { padding: .1em; border-radius: .3em; } pre.highlight, pre > code.highlight { display: block; padding: 1em; margin: .5em 0; overflow: auto; border-radius: 0; } .highlight:not(.idl) { background: rgba(0, 0, 0, .03); } c-[a] { color: #990055 } /* Keyword.Declaration */ c-[b] { color: #990055 } /* Keyword.Type */ c-[c] { color: #708090 } /* Comment */ c-[d] { color: #708090 } /* Comment.Multiline */ c-[e] { color: #0077aa } /* Name.Attribute */ c-[f] { color: #669900 } /* Name.Tag */ c-[g] { color: #222222 } /* Name.Variable */ c-[k] { color: #990055 } /* Keyword */ c-[l] { color: #000000 } /* Literal */ c-[m] { color: #000000 } /* Literal.Number */ c-[n] { color: #0077aa } /* Name */ c-[o] { color: #999999 } /* Operator */ c-[p] { color: #999999 } /* Punctuation */ c-[s] { color: #a67f59 } /* Literal.String */ c-[t] { color: #a67f59 } /* Literal.String.Single */ c-[u] { color: #a67f59 } /* Literal.String.Double */ c-[cp] { color: #708090 } /* Comment.Preproc */ c-[c1] { color: #708090 } /* Comment.Single */ c-[cs] { color: #708090 } /* Comment.Special */ c-[kc] { color: #990055 } /* Keyword.Constant */ c-[kn] { color: #990055 } /* Keyword.Namespace */ c-[kp] { color: #990055 } /* Keyword.Pseudo */ c-[kr] { color: #990055 } /* Keyword.Reserved */ c-[ld] { color: #000000 } /* Literal.Date */ c-[nc] { color: #0077aa } /* Name.Class */ c-[no] { color: #0077aa } /* Name.Constant */ c-[nd] { color: #0077aa } /* Name.Decorator */ c-[ni] { color: #0077aa } /* Name.Entity */ c-[ne] { color: #0077aa } /* Name.Exception */ c-[nf] { color: #0077aa } /* Name.Function */ c-[nl] { color: #0077aa } /* Name.Label */ c-[nn] { color: #0077aa } /* Name.Namespace */ c-[py] { color: #0077aa } /* Name.Property */ c-[ow] { color: #999999 } /* Operator.Word */ c-[mb] { color: #000000 } /* Literal.Number.Bin */ c-[mf] { color: #000000 } /* Literal.Number.Float */ c-[mh] { color: #000000 } /* Literal.Number.Hex */ c-[mi] { color: #000000 } /* Literal.Number.Integer */ c-[mo] { color: #000000 } /* Literal.Number.Oct */ c-[sb] { color: #a67f59 } /* Literal.String.Backtick */ c-[sc] { color: #a67f59 } /* Literal.String.Char */ c-[sd] { color: #a67f59 } /* Literal.String.Doc */ c-[se] { color: #a67f59 } /* Literal.String.Escape */ c-[sh] { color: #a67f59 } /* Literal.String.Heredoc */ c-[si] { color: #a67f59 } /* Literal.String.Interpol */ c-[sx] { color: #a67f59 } /* Literal.String.Other */ c-[sr] { color: #a67f59 } /* Literal.String.Regex */ c-[ss] { color: #a67f59 } /* Literal.String.Symbol */ c-[vc] { color: #0077aa } /* Name.Variable.Class */ c-[vg] { color: #0077aa } /* Name.Variable.Global */ c-[vi] { color: #0077aa } /* Name.Variable.Instance */ c-[il] { color: #000000 } /* Literal.Number.Integer.Long */ @media (prefers-color-scheme: dark) { .highlight:not(.idl) { background: rgba(255, 255, 255, .05); } c-[a] { color: #d33682 } /* Keyword.Declaration */ c-[b] { color: #d33682 } /* Keyword.Type */ c-[c] { color: #2aa198 } /* Comment */ c-[d] { color: #2aa198 } /* Comment.Multiline */ c-[e] { color: #268bd2 } /* Name.Attribute */ c-[f] { color: #b58900 } /* Name.Tag */ c-[g] { color: #cb4b16 } /* Name.Variable */ c-[k] { color: #d33682 } /* Keyword */ c-[l] { color: #657b83 } /* Literal */ c-[m] { color: #657b83 } /* Literal.Number */ c-[n] { color: #268bd2 } /* Name */ c-[o] { color: #657b83 } /* Operator */ c-[p] { color: #657b83 } /* Punctuation */ c-[s] { color: #6c71c4 } /* Literal.String */ c-[t] { color: #6c71c4 } /* Literal.String.Single */ c-[u] { color: #6c71c4 } /* Literal.String.Double */ c-[ch] { color: #2aa198 } /* Comment.Hashbang */ c-[cp] { color: #2aa198 } /* Comment.Preproc */ c-[cpf] { color: #2aa198 } /* Comment.PreprocFile */ c-[c1] { color: #2aa198 } /* Comment.Single */ c-[cs] { color: #2aa198 } /* Comment.Special */ c-[kc] { color: #d33682 } /* Keyword.Constant */ c-[kn] { color: #d33682 } /* Keyword.Namespace */ c-[kp] { color: #d33682 } /* Keyword.Pseudo */ c-[kr] { color: #d33682 } /* Keyword.Reserved */ c-[ld] { color: #657b83 } /* Literal.Date */ c-[nc] { color: #268bd2 } /* Name.Class */ c-[no] { color: #268bd2 } /* Name.Constant */ c-[nd] { color: #268bd2 } /* Name.Decorator */ c-[ni] { color: #268bd2 } /* Name.Entity */ c-[ne] { color: #268bd2 } /* Name.Exception */ c-[nf] { color: #268bd2 } /* Name.Function */ c-[nl] { color: #268bd2 } /* Name.Label */ c-[nn] { color: #268bd2 } /* Name.Namespace */ c-[py] { color: #268bd2 } /* Name.Property */ c-[ow] { color: #657b83 } /* Operator.Word */ c-[mb] { color: #657b83 } /* Literal.Number.Bin */ c-[mf] { color: #657b83 } /* Literal.Number.Float */ c-[mh] { color: #657b83 } /* Literal.Number.Hex */ c-[mi] { color: #657b83 } /* Literal.Number.Integer */ c-[mo] { color: #657b83 } /* Literal.Number.Oct */ c-[sa] { color: #6c71c4 } /* Literal.String.Affix */ c-[sb] { color: #6c71c4 } /* Literal.String.Backtick */ c-[sc] { color: #6c71c4 } /* Literal.String.Char */ c-[dl] { color: #6c71c4 } /* Literal.String.Delimiter */ c-[sd] { color: #6c71c4 } /* Literal.String.Doc */ c-[se] { color: #6c71c4 } /* Literal.String.Escape */ c-[sh] { color: #6c71c4 } /* Literal.String.Heredoc */ c-[si] { color: #6c71c4 } /* Literal.String.Interpol */ c-[sx] { color: #6c71c4 } /* Literal.String.Other */ c-[sr] { color: #6c71c4 } /* Literal.String.Regex */ c-[ss] { color: #6c71c4 } /* Literal.String.Symbol */ c-[fm] { color: #268bd2 } /* Name.Function.Magic */ c-[vc] { color: #cb4b16 } /* Name.Variable.Class */ c-[vg] { color: #cb4b16 } /* Name.Variable.Global */ c-[vi] { color: #cb4b16 } /* Name.Variable.Instance */ c-[vm] { color: #cb4b16 } /* Name.Variable.Magic */ c-[il] { color: #657b83 } /* Literal.Number.Integer.Long */ } </style> <link href="https://www.w3.org/StyleSheets/TR/2021/W3C-CRD" rel="stylesheet"> <body class="h-entry"> <div class="head"> <a class="logo" href="https://www.w3.org/"> <img alt="W3C" height="48" src="https://www.w3.org/StyleSheets/TR/2021/logos/W3C" width="72"> </a> <h1 class="p-name no-ref" id="title">CSS Masking Module Level 1</h1> <a href="https://www.w3.org/standards/types#CRD">W3C Candidate Recommendation Draft</a>, <time class="dt-updated" datetime="2024-03-08">8 March 2024</time> <details open> <summary>More details about this document</summary> <div data-fill-with="spec-metadata"> <dl> <dt>This version: <dd><a class="u-url" href="https://www.w3.org/TR/2024/CRD-css-masking-1-20240308/">https://www.w3.org/TR/2024/CRD-css-masking-1-20240308/</a> <dt>Latest published version: <dd><a href="https://www.w3.org/TR/css-masking-1/">https://www.w3.org/TR/css-masking-1/</a> <dt>Editor's Draft: <dd><a href="https://drafts.fxtf.org/css-masking-1/">https://drafts.fxtf.org/css-masking-1/</a> <dt>Previous Versions: <dd><a href="https://www.w3.org/TR/2021/CRD-css-masking-1-20210805/" rel="prev">https://www.w3.org/TR/2021/CRD-css-masking-1-20210805/</a> <dt>History: <dd><a class="u-url" href="https://www.w3.org/standards/history/css-masking-1/">https://www.w3.org/standards/history/css-masking-1/</a> <dt>Implementation Report: <dd><a href="https://test.csswg.org/harness/results/css-masking-1_dev/grouped/">https://test.csswg.org/harness/results/css-masking-1_dev/grouped/</a> <dt>Test Suite: <dd><a href="https://test.csswg.org/suites/css-masking/nightly-unstable/">https://test.csswg.org/suites/css-masking/nightly-unstable/</a> <dt>Feedback: <dd><a href="https://github.com/w3c/fxtf-drafts/labels/css-masking-1">GitHub</a> <dd><a href="#issues-index">Inline In Spec</a> <dt class="editor">Editors: <dd class="editor p-author h-card vcard" data-editor-id="51803"><a class="p-name fn u-email email" href="mailto:dschulze@adobe.com">Dirk Schulze</a> (Adobe Inc.) <dd class="editor p-author h-card vcard" data-editor-id="43194"><a class="p-name fn u-email email" href="mailto:bbirtles@mozilla.com">Brian Birtles</a> (Mozilla Japan) <dd class="editor p-author h-card vcard" data-editor-id="42199"><a class="p-name fn u-url url" href="https://www.xanthir.com/contact/">Tab Atkins Jr.</a> (Google) <dt>Issue Tracking: <dd><a href="https://github.com/w3c/fxtf-drafts/labels/css-masking-1">GitHub Issues</a> <dt>Suggest an Edit for this Spec: <dd><a href="https://github.com/w3c/fxtf-drafts/blob/main/css-masking-1/Overview.bs">GitHub Editor</a> </dl> </div> </details> <div data-fill-with="warning"></div> <a href="https://www.w3.org/policies/#copyright">Copyright</a> © 2024 <a href="https://www.w3.org/">World Wide Web Consortium</a>. <abbr title="World Wide Web Consortium">W3C</abbr>® <a href="https://www.w3.org/policies/#Legal_Disclaimer">liability</a>, <a href="https://www.w3.org/policies/#W3C_Trademarks">trademark</a> and <a href="https://www.w3.org/copyright/software-license/" rel="license" title="W3C Software and Document License">permissive document license</a> rules apply. <hr title="Separator for header"> </div> <div class="p-summary" data-fill-with="abstract"> <h2 class="no-num no-toc no-ref heading settled" id="abstract">Abstract</h2> CSS Masking provides two means for partially or fully hiding portions of visual elements: masking and clipping. Masking describes how to use another graphical element or image as a luminance or alpha mask. Typically, rendering an element via CSS or SVG can conceptually be described as if the element, including its children, are drawn into a buffer and then that buffer is composited into the element’s parent. Luminance and alpha masks influence the transparency of this buffer before the compositing stage. Clipping describes the visible region of visual elements. The region can be described by using certain SVG graphics elements or basic shapes. Anything outside of this region is not rendered. </div> <h2 class="no-num no-toc no-ref heading settled" id="sotd">Status of this document</h2> <div data-fill-with="status"> </div> <div data-fill-with="at-risk"></div> <nav data-fill-with="table-of-contents" id="toc"> <h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2> <ol class="toc" role="directory"> <li> <a href="#intro">1 Introduction</a> <ol class="toc"> <li><a href="#clipping">1.1 Clipping</a> <li><a href="#masking">1.2 Masking</a> </ol> <li><a href="#placement">2 Module interactions</a> <li><a href="#values">3 Values</a> <li><a href="#terminology">4 Terminology</a> <li> <a href="#clipping-paths">5 Clipping Paths</a> <ol class="toc"> <li><a href="#the-clip-path">5.1 Clipping Shape: the clip-path property</a> </ol> <li> <a href="#svg-clipping-paths">6 SVG Clipping Path Sources</a> <ol class="toc"> <li><a href="#ClipPathElement">6.1 The clipPath element</a> <li><a href="#the-clip-rule">6.2 Winding Rules: the clip-rule property</a> </ol> <li> <a href="#positioned-masks">7 Positioned Masks</a> <ol class="toc"> <li><a href="#the-mask-image">7.1 Mask Image Source: the mask-image property</a> <li><a href="#the-mask-mode">7.2 Mask Image Interpretation: the mask-mode property</a> <li><a href="#the-mask-repeat">7.3 Tiling Mask Images: the mask-repeat property</a> <li><a href="#the-mask-position">7.4 Positioning Mask Images: the mask-position property</a> <li><a href="#the-mask-clip">7.5 Masking Area: the mask-clip property</a> <li><a href="#the-mask-origin">7.6 Positioning Area: the mask-origin property</a> <li><a href="#the-mask-size">7.7 Sizing Mask Images: the mask-size property</a> <li><a href="#the-mask-composite">7.8 Compositing mask layers: the mask-composite property</a> <li><a href="#the-mask">7.9 Mask Shorthand: the mask property</a> <li> <a href="#the-mask-image-rendering-model">7.10 The Mask Image Rendering Model</a> <ol class="toc"> <li><a href="#MaskValues">7.10.1 Mask processing</a> <li><a href="#layering">7.10.2 Layering Multiple Mask Images</a> </ol> </ol> <li> <a href="#mask-borders">8 Border-Box Mask</a> <ol class="toc"> <li><a href="#the-mask-border-source">8.1 Mask Border Image Source: the mask-border-source property</a> <li><a href="#the-mask-border-mode">8.2 Mask Border Image Interpretation: the mask-border-mode property</a> <li><a href="#the-mask-border-slice">8.3 Mask Border Image Slicing: the mask-border-slice property</a> <li><a href="#the-mask-border-width">8.4 Masking Areas: the mask-border-width property</a> <li><a href="#the-mask-border-outset">8.5 Edge Overhang: the mask-border-outset property</a> <li><a href="#the-mask-border-repeat">8.6 Mask Border Image Tiling: the mask-border-repeat property</a> <li><a href="#the-mask-border">8.7 Mask Border Image Shorthand: the mask-border property</a> <li><a href="#masking-with-the-mask-border-image">8.8 Masking with the mask border image</a> </ol> <li> <a href="#svg-masks">9 SVG Mask Sources</a> <ol class="toc"> <li><a href="#MaskElement">9.1 The mask element</a> <li><a href="#the-mask-type">9.2 Mask Source Interpretation: the mask-type property</a> </ol> <li><a href="#priv">10 Privacy Considerations</a> <li><a href="#sec">11 Security Considerations</a> <li><a href="#clip-property"> Appendix A: The deprecated clip property</a> <li><a href="#compute-stroke-bounding-box"> Appendix B: Compute stroke bounding box</a> <li> <a href="#DOMInterfaces"> Appendix C: DOM interfaces</a> <ol class="toc"> <li><a href="#InterfaceSVGClipPathElement"> Interface SVGClipPathElement</a> <li><a href="#InterfaceSVGMaskElement"> Interface SVGMaskElement</a> </ol> <li><a href="#changes"> Changes since last publication</a> <li><a href="#acknowledgments"> Acknowledgments</a> <li> <a href="#w3c-conformance"> Conformance</a> <ol class="toc"> <li><a href="#w3c-conventions"> Document conventions</a> <li><a href="#w3c-conformance-classes"> Conformance classes</a> <li> <a href="#w3c-partial"> Partial implementations</a> <ol class="toc"> <li><a href="#w3c-conform-future-proofing"> Implementations of Unstable and Proprietary Features</a> </ol> <li><a href="#w3c-testing"> Non-experimental implementations</a> <li><a href="#w3c-cr-exit-criteria"> CR exit criteria</a> </ol> <li> <a href="#index"> Index</a> <ol class="toc"> <li><a href="#index-defined-here"> Terms defined by this specification</a> <li><a href="#index-defined-elsewhere"> Terms defined by reference</a> </ol> <li> <a href="#references"> References</a> <ol class="toc"> <li><a href="#normative"> Normative References</a> <li><a href="#informative"> Informative References</a> </ol> <li><a href="#property-index"> Property Index</a> <li><a href="#idl-index"> IDL Index</a> <li><a href="#issues-index"> Issues Index</a> </ol> </nav> <main> <h2 class="heading settled" data-level="1" id="intro">1. Introduction<a class="self-link" href="#intro"></a></h2> This section is not normative. This specification defines two different graphical operations which both fully or partly hide portions of an object: clipping and masking. <h3 class="heading settled" data-level="1.1" id="clipping">1.1. Clipping<a class="self-link" href="#clipping"></a></h3> A closed vector path, shape or polygon defines a so called <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="clipping-path">clipping path</dfn>. This clipping path is a region (in the absence of anti-aliasing) where everything on the “inside” of this region is allowed to show through but everything on the outside is “clipped out” and does not appear on the canvas. <div class="example" id="example-8d45bf9b"> <a class="self-link" href="#example-8d45bf9b"></a> <div class="figure"> <img alt="Example Mask" height="260" src="images/clipping-path.svg" width="655"> A clipping path (middle) is applied on a polygon shaded with different colors (left). This results in a “clipped out” shape (right). </div> </div> The <a class="property css" data-link-type="property" href="#propdef-clip-path" id="ref-for-propdef-clip-path">clip-path</a> property can use specified basic shapes as clipping path or reference an <a data-link-type="element" href="#elementdef-clippath" id="ref-for-elementdef-clippath">clipPath</a> element with <a data-link-type="dfn" href="https://www.w3.org/TR/SVG2/struct.html#graphics-element" id="ref-for-graphics-element">graphics elements</a> to be used as clipping path. <h3 class="heading settled" data-level="1.2" id="masking">1.2. Masking<a class="self-link" href="#masking"></a></h3> The effect of applying a mask to a graphical object is as if the graphical object will be painted onto the background through a mask, thus completely or partially masking out parts of the graphical object. <div class="example" id="example-c9ae2e2a"> <a class="self-link" href="#example-c9ae2e2a"></a> <div class="figure"> <img alt="Example Mask" height="260" src="images/luminance-mask.svg" width="655"> A luminance mask (middle) is applied on a shape filled with a gradient (left). This results in a masked shape (right). </div> </div> Masks are applied using the <a class="property css" data-link-type="property" href="#propdef-mask-image" id="ref-for-propdef-mask-image">mask-image</a> or <a class="property css" data-link-type="property" href="#propdef-mask-border-source" id="ref-for-propdef-mask-border-source">mask-border-source</a> properties. The <a class="property css" data-link-type="property" href="#propdef-mask-image" id="ref-for-propdef-mask-image①">mask-image</a> property may reference a <a data-link-type="element" href="#elementdef-mask" id="ref-for-elementdef-mask">mask</a> element. The content of the mask element serves as the mask. Alternatively, for many simple uses, the <a class="property css" data-link-type="property" href="#propdef-mask-image" id="ref-for-propdef-mask-image②">mask-image</a> property may refer directly to images to be used as mask, forgoing the need for an explicit <a data-link-type="element" href="#elementdef-mask" id="ref-for-elementdef-mask②">mask</a> element. This mask can then be sized and positioned just like CSS background images using the <a class="property css" data-link-type="property" href="#propdef-mask-position" id="ref-for-propdef-mask-position">mask-position</a>, <a class="property css" data-link-type="property" href="#propdef-mask-size" id="ref-for-propdef-mask-size">mask-size</a> and other characterizing properties. The <a class="property css" data-link-type="property" href="#propdef-mask-border-source" id="ref-for-propdef-mask-border-source①">mask-border-source</a> property splits a mask into 9 pieces. The pieces may be sliced, scaled and stretched in various ways to fit the size of the <a data-link-type="dfn" href="#mask-border-image-area" id="ref-for-mask-border-image-area">mask border image area</a>. The <a class="property css" data-link-type="property" href="#propdef-mask-border" id="ref-for-propdef-mask-border">mask-border</a> property serves as a shorthand property for mask-border-source and other characterizing properties. The <a class="property css" data-link-type="property" href="#propdef-mask" id="ref-for-propdef-mask">mask</a> property serves as a shorthand property for all <a class="property css" data-link-type="property" href="#propdef-mask-border" id="ref-for-propdef-mask-border①">mask-border</a> and <a class="property css" data-link-type="property" href="#propdef-mask-image" id="ref-for-propdef-mask-image③">mask-image</a> affiliated properties. Note: While masking gives many possibilities for enhanced graphical effects and in general provides more control over the “visible portions” of the content, clipping paths can perform better and basic shapes are easier to interpolate. <h2 class="heading settled" data-level="2" id="placement">2. Module interactions<a class="self-link" href="#placement"></a></h2> This specification defines a set of CSS properties that affect the visual rendering of elements to which those properties are applied. These effects are applied after elements have been sized and positioned according to the <a href="https://www.w3.org/TR/CSS2/visuren.html" title="Visual formatting model">Visual formatting model</a> from <a data-link-type="biblio" href="#biblio-css21" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS21]</a>. Some values of these properties result in the creation of a <a data-link-type="dfn" href="https://www.w3.org/TR/CSS21/visuren.html#x43" id="ref-for-x43">stacking context</a>. Furthermore, this specification replaces the section <a href="https://www.w3.org/TR/CSS2/visufx.html#clipping">Clipping: the clip property</a> from [CSS21]. The compositing model follows the SVG compositing model <a data-link-type="biblio" href="#biblio-svg11" title="Scalable Vector Graphics (SVG) 1.1 (Second Edition)">[SVG11]</a>: First the element is styled under absence of filter effects, masking, clipping and opacity. Then the element and its descendants are drawn on a temporary canvas. In a last step the following effects are applied to the element in order: filter effects <a data-link-type="biblio" href="#biblio-filter-effects" title="Filter Effects Module Level 1">[FILTER-EFFECTS]</a>, clipping, masking and opacity. This specification allows compositing multiple mask layers with the Porter Duff compositing operators defined in CSS Compositing and Blending <a data-link-type="biblio" href="#biblio-compositing-1" title="Compositing and Blending Level 1">[COMPOSITING-1]</a>. The term <a data-link-type="dfn" href="https://www.w3.org/TR/SVG2/coords.html#TermObjectBoundingBox" id="ref-for-TermObjectBoundingBox">object bounding box</a> follows the definition in SVG 1.1 <a data-link-type="biblio" href="#biblio-svg11" title="Scalable Vector Graphics (SVG) 1.1 (Second Edition)">[SVG11]</a>. <h2 class="heading settled" data-level="3" id="values">3. Values<a class="self-link" href="#values"></a></h2> This specification follows the <a href="https://www.w3.org/TR/CSS21/about.html#property-defs">CSS property definition conventions</a> from <a data-link-type="biblio" href="#biblio-css21" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS21]</a>. Basic shapes are defined in CSS Shapes Module Level 1 <a data-link-type="biblio" href="#biblio-css-shapes" title="CSS Shapes Module Level 1">[CSS-SHAPES]</a>. Value types not defined in these specifications are defined in CSS Values and Units Module Level 3 <a data-link-type="biblio" href="#biblio-css3val" title="CSS Values and Units Module Level 3">[CSS3VAL]</a>. In addition to the property-specific values listed in their definitions, all properties defined in this specification also accept CSS-wide keywords such as <a href="https://www.w3.org/TR/CSS21/cascade.html#value-def-inherit">inherit</a> as their property value <a data-link-type="biblio" href="#biblio-css3val" title="CSS Values and Units Module Level 3">[CSS3VAL]</a>. For readability it has not been repeated explicitly. <h2 class="heading settled" data-level="4" id="terminology">4. Terminology<a class="self-link" href="#terminology"></a></h2> Definitions of CSS properties and values in this specification are analogous to definitions in CSS Backgrounds and Borders <a data-link-type="biblio" href="#biblio-css3bg" title="CSS Backgrounds and Borders Module Level 3">[CSS3BG]</a>. To avoid redundancy, this specification relies on descriptions and definitions of CSS Backgrounds and Borders. The following terms in CSS Backgrounds and Borders have the following meaning in this specification: <table class="data" id="term-matching"> <thead> <tr> <th>Term in CSS Masking <th>Term in <a data-link-type="biblio" href="#biblio-css3bg" title="CSS Backgrounds and Borders Module Level 3">[CSS3BG]</a> <tbody> <tr> <th><a data-link-type="dfn" href="#mask-layer-image" id="ref-for-mask-layer-image">mask layer image</a> <td>background images <tr> <th><a data-link-type="dfn" href="#mask-painting-area" id="ref-for-mask-painting-area">mask painting area</a> <td><a data-link-type="dfn" href="https://www.w3.org/TR/css-backgrounds-3/#background-painting-area" id="ref-for-background-painting-area">background painting area</a> <tr> <th><dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="mask-size">mask-size</dfn> <td>background-size <tr> <th><dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="mask-position">mask-position</dfn> <td>background-position <tr> <th><a data-link-type="dfn" href="#mask-positioning-area" id="ref-for-mask-positioning-area">mask positioning area</a> <td><a data-link-type="dfn" href="https://www.w3.org/TR/css-backgrounds-3/#background-positioning-area" id="ref-for-background-positioning-area">background positioning area</a> <tr> <th><a data-link-type="dfn" href="#mask-border-image" id="ref-for-mask-border-image">mask border image</a> <td>border-image <tr> <th><a data-link-type="dfn" href="#mask-border-image-area" id="ref-for-mask-border-image-area①">mask border image area</a> <td><a data-link-type="dfn" href="https://www.w3.org/TR/css-backgrounds-3/#border-image-area" id="ref-for-border-image-area">border image area</a> </table> <h2 class="heading settled" data-level="5" id="clipping-paths">5. Clipping Paths<a class="self-link" href="#clipping-paths"></a></h2> The clipping path restricts the region to which paint can be applied, the so-called <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="clipping-region">clipping region</dfn>. Conceptually, any parts of the drawing that lie outside of this region are not drawn. This includes any content, background, borders, text decoration, outline and visible scrolling mechanism of the element to which the clipping path is applied, and those of its descendants. An element’s ancestors may also clip portions of their content (e.g., via their own <a class="property css" data-link-type="property" href="#propdef-clip" id="ref-for-propdef-clip">clip</a> or <a class="property css" data-link-type="property" href="#propdef-clip-path" id="ref-for-propdef-clip-path①">clip-path</a> properties and/or if their <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-overflow-3/#propdef-overflow" id="ref-for-propdef-overflow">overflow</a> property is not <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-overflow-3/#valdef-overflow-visible" id="ref-for-valdef-overflow-visible">visible</a>). What is rendered is the cumulative intersection. If the clipping region exceeds the bounds of the UA’s document window, content may be clipped to that window by the native operating environment. A clipping path affects the rendering of an element. It does not affect the element’s inherent geometry. The geometry of a clipped element (i.e. an element which references a <a data-link-type="element" href="#elementdef-clippath" id="ref-for-elementdef-clippath①">clipPath</a> element via a <a class="property css" data-link-type="property" href="#propdef-clip-path" id="ref-for-propdef-clip-path②">clip-path</a> property, or a child of the referencing element) must remain the same as if it were not clipped. <div class="example" id="example-b04372df"> <a class="self-link" href="#example-b04372df"></a> Consider a shape that is clipped by a clipping path applied to an ancestor: <pre><code class="highlight"><c- p><</c-><c- f>g</c-> <c- e>clip-path</c-><c- o>=</c-><c- s>"circle()"</c-><c- p>></c-> <c- p><</c-><c- f>path</c-> <c- e>id</c-><c- o>=</c-><c- s>"shape"</c-> <c- e>d</c-><c- o>=</c-><c- s>"M0,0 L10,10, L 20,0 z"</c-><c- p>/></c-> <c- p></</c-><c- f>g</c-><c- p>></c-> </code></pre> The shape is referenced by a <a data-link-type="element" href="https://www.w3.org/TR/SVG2/struct.html#elementdef-use" id="ref-for-elementdef-use">use</a> element: <pre><code class="highlight"><c- p><</c-><c- f>use</c-> <c- e>xlink:href</c-><c- o>=</c-><c- s>"#shape"</c-><c- p>/></c-> </code></pre> The geometry of the shape is not influenced by the circular clipping path. </div> By default, <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-ui-4/#propdef-pointer-events" id="ref-for-propdef-pointer-events">pointer-events</a> must not be dispatched on the clipped-out (non-visible) regions of a shape. For example, an element with a dimension of 10px to 10px which is clipped to a circle with a radius of 5px will not receive click events outside the <a data-link-type="dfn" href="#clipping-region" id="ref-for-clipping-region">clipping region</a>. <h3 class="heading settled" data-level="5.1" id="the-clip-path">5.1. Clipping Shape: the <a class="property css" data-link-type="property" href="#propdef-clip-path" id="ref-for-propdef-clip-path③">clip-path</a> property<a class="self-link" href="#the-clip-path"></a></h3> <table class="def propdef" data-link-for-hint="clip-path"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-clip-path">clip-path</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod"><a class="production css" data-link-type="type" href="#typedef-clip-source" id="ref-for-typedef-clip-source"><clip-source></a> <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one">|</a> [ <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-shapes-1/#typedef-basic-shape" id="ref-for-typedef-basic-shape"><basic-shape></a> <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-any" id="ref-for-comb-any">||</a> <a class="production css" data-link-type="type" href="#typedef-geometry-box" id="ref-for-typedef-geometry-box"><geometry-box></a> ] | none <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>none <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td>All elements. In SVG, it applies to <a data-link-type="dfn" href="https://www.w3.org/TR/SVG2/struct.html#container-element" id="ref-for-container-element">container elements</a> excluding the <a data-link-type="element" href="https://www.w3.org/TR/SVG2/struct.html#elementdef-defs" id="ref-for-elementdef-defs">defs</a> element, all <a data-link-type="dfn" href="https://www.w3.org/TR/SVG2/struct.html#graphics-element" id="ref-for-graphics-element①">graphics elements</a> and the <a data-link-type="element" href="https://www.w3.org/TR/SVG2/struct.html#elementdef-use" id="ref-for-elementdef-use①">use</a> element <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>no <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>n/a <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>as specified, but with <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#url-value" id="ref-for-url-value"><url></a> values made absolute <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar <tr> <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> <td>by computed value <tr> <th>Media: <td>visual </table> Specifies a basic shape or references a <a data-link-type="element" href="#elementdef-clippath" id="ref-for-elementdef-clippath②">clipPath</a> element to create a <a data-link-type="dfn" href="#clipping-path" id="ref-for-clipping-path">clipping path</a>. <pre class="prod"><dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-clip-source"><clip-source></dfn> = <a class="production" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#url-value" id="ref-for-url-value①"><url></a></pre> <pre class="prod"><dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-geometry-box"><geometry-box></dfn> = <a class="production" data-link-type="type" href="https://www.w3.org/TR/css-shapes-1/#typedef-shape-box" id="ref-for-typedef-shape-box"><shape-box></a> <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one②">|</a> fill-box <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one③">|</a> stroke-box <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one④">|</a> view-box</pre> <div> <dl> <dt data-md><a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-shapes-1/#typedef-basic-shape" id="ref-for-typedef-basic-shape①"><basic-shape></a> <dd data-md> A basic shape function as defined in the CSS Shapes module <a data-link-type="biblio" href="#biblio-css-shapes" title="CSS Shapes Module Level 1">[CSS-SHAPES]</a>. A basic shape makes use of the specified reference box to size and position the basic shape. If no reference box is specified, the <a class="css" data-link-type="maybe" href="#valdef-mask-clip-border-box" id="ref-for-valdef-mask-clip-border-box">border-box</a> will be used as reference box. <dt data-md><a class="production css" data-link-type="type" href="#typedef-geometry-box" id="ref-for-typedef-geometry-box①"><geometry-box></a> <dd data-md> If specified in combination with a <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-shapes-1/#typedef-basic-shape" id="ref-for-typedef-basic-shape②"><basic-shape></a> it provides the reference box for the <basic-shape>. If specified by itself, uses the edges of the specified box, including any corner shaping (e.g. defined by <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-borders-4/#propdef-border-radius" id="ref-for-propdef-border-radius">border-radius</a> <a data-link-type="biblio" href="#biblio-css3bg" title="CSS Backgrounds and Borders Module Level 3">[CSS3BG]</a>), as clipping path. See also <a href="https://www.w3.org/TR/css-shapes/#shapes-from-box-values">“Shapes from box values”</a> <a data-link-type="biblio" href="#biblio-css-shapes" title="CSS Shapes Module Level 1">[CSS-SHAPES]</a>. <dt data-md><dfn class="dfn-paneled css" data-dfn-for="clip-path" data-dfn-type="value" data-export id="valdef-clip-path-fill-box">fill-box</dfn> <dd data-md> Uses the <a data-link-type="dfn" href="https://www.w3.org/TR/SVG2/coords.html#TermObjectBoundingBox" id="ref-for-TermObjectBoundingBox①">object bounding box</a> as reference box. <dt data-md><dfn class="dfn-paneled css" data-dfn-for="clip-path" data-dfn-type="value" data-export id="valdef-clip-path-stroke-box">stroke-box</dfn> <dd data-md> Uses the <a data-link-type="dfn" href="#stroke-bounding-box" id="ref-for-stroke-bounding-box">stroke bounding box</a> as reference box. <dt data-md><dfn class="dfn-paneled css" data-dfn-for="clip-path" data-dfn-type="value" data-export id="valdef-clip-path-view-box">view-box</dfn> <dd data-md> Uses the nearest <a href="https://www.w3.org/TR/SVG11/intro.html#TermSVGViewport">SVG viewport</a> as reference box. If a <a data-link-type="element-attr" href="https://svgwg.org/svg2-draft/coords.html#ViewBoxAttribute" id="ref-for-ViewBoxAttribute">viewBox</a> attribute is specified for the <a href="https://www.w3.org/TR/SVG11/intro.html#TermSVGViewport">SVG viewport</a> creating element: <ul> <li data-md> The reference box is positioned at the origin of the coordinate system established by the <a data-link-type="element-attr" href="https://svgwg.org/svg2-draft/coords.html#ViewBoxAttribute" id="ref-for-ViewBoxAttribute①">viewBox</a> attribute. <li data-md> The dimension of the reference box is set to the width and height values of the <a data-link-type="element-attr" href="https://svgwg.org/svg2-draft/coords.html#ViewBoxAttribute" id="ref-for-ViewBoxAttribute②">viewBox</a> attribute. </ul> <dt data-md>none <dd data-md> No <a data-link-type="dfn" href="#clipping-path" id="ref-for-clipping-path①">clipping path</a> gets created. </dl> </div> For SVG elements without associated CSS layout box, the <a data-link-type="dfn" href="https://www.w3.org/TR/css-cascade-5/#used-value" id="ref-for-used-value">used value</a> for <a class="css" data-link-type="maybe" href="#valdef-mask-clip-content-box" id="ref-for-valdef-mask-clip-content-box">content-box</a> and <a class="css" data-link-type="maybe" href="#valdef-mask-clip-padding-box" id="ref-for-valdef-mask-clip-padding-box">padding-box</a> is <a class="css" data-link-type="maybe" href="#valdef-clip-path-fill-box" id="ref-for-valdef-clip-path-fill-box">fill-box</a> and for <a class="css" data-link-type="maybe" href="#valdef-mask-clip-border-box" id="ref-for-valdef-mask-clip-border-box①">border-box</a> and margin-box is <a class="css" data-link-type="maybe" href="#valdef-clip-path-stroke-box" id="ref-for-valdef-clip-path-stroke-box">stroke-box</a>. For elements with associated CSS layout box, the <a data-link-type="dfn" href="https://www.w3.org/TR/css-cascade-5/#used-value" id="ref-for-used-value①">used value</a> for <a class="css" data-link-type="maybe" href="#valdef-clip-path-fill-box" id="ref-for-valdef-clip-path-fill-box①">fill-box</a> is <a class="css" data-link-type="maybe" href="#valdef-mask-clip-content-box" id="ref-for-valdef-mask-clip-content-box①">content-box</a> and for <a class="css" data-link-type="maybe" href="#valdef-clip-path-stroke-box" id="ref-for-valdef-clip-path-stroke-box①">stroke-box</a> and <a class="css" data-link-type="maybe" href="#valdef-clip-path-view-box" id="ref-for-valdef-clip-path-view-box">view-box</a> is <a class="css" data-link-type="maybe" href="#valdef-mask-clip-border-box" id="ref-for-valdef-mask-clip-border-box②">border-box</a>. A computed value of other than none results in the creation of a <a data-link-type="dfn" href="https://www.w3.org/TR/CSS21/visuren.html#x43" id="ref-for-x43①">stacking context</a> <a data-link-type="biblio" href="#biblio-css21" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS21]</a> the same way that CSS <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-color-4/#propdef-opacity" id="ref-for-propdef-opacity">opacity</a> <a data-link-type="biblio" href="#biblio-css3color" title="CSS Color Module Level 3">[CSS3COLOR]</a> does for values other than 1. If the URI reference is not valid (e.g it points to an object that doesn’t exist or the object is not a <a data-link-type="element" href="#elementdef-clippath" id="ref-for-elementdef-clippath③">clipPath</a> element), no clipping is applied. <div class="example" id="example-b11e2c6d"> <a class="self-link" href="#example-b11e2c6d"></a> This example demonstrates the use of the basic shape <a class="production css" data-link-type="function" href="https://www.w3.org/TR/css-shapes-1/#funcdef-basic-shape-polygon" id="ref-for-funcdef-basic-shape-polygon"><polygon()></a> as clipping path. Each space separated length pair represents one point of the polygon. The visualized clipping path can be seen in the <a href="#clipping">introduction</a>. <pre><code class="highlight"><c- k>clip-path</c-><c- p>:</c-> <c- nf>polygon</c-><c- p>(</c-><c- m>15</c-><c- k>px</c-> <c- m>99</c-><c- k>px</c-><c- p>,</c-> <c- m>30</c-><c- k>px</c-> <c- m>87</c-><c- k>px</c-><c- p>,</c-> <c- m>65</c-><c- k>px</c-> <c- m>99</c-><c- k>px</c-><c- p>,</c-> <c- m>85</c-><c- k>px</c-> <c- m>55</c-><c- k>px</c-><c- p>,</c-> <c- m>122</c-><c- k>px</c-> <c- m>57</c-><c- k>px</c-><c- p>,</c-> <c- m>184</c-><c- k>px</c-> <c- m>73</c-><c- k>px</c-><c- p>,</c-> <c- m>198</c-><c- k>px</c-> <c- m>105</c-><c- k>px</c-><c- p>,</c-> <c- m>199</c-><c- k>px</c-> <c- m>150</c-><c- k>px</c-><c- p>,</c-> <c- m>145</c-><c- k>px</c-> <c- m>159</c-><c- k>px</c-><c- p>,</c-> <c- m>155</c-><c- k>px</c-> <c- m>139</c-><c- k>px</c-><c- p>,</c-> <c- m>126</c-><c- k>px</c-> <c- m>120</c-><c- k>px</c-><c- p>,</c-> <c- m>112</c-><c- k>px</c-> <c- m>138</c-><c- k>px</c-><c- p>,</c-> <c- m>80</c-><c- k>px</c-> <c- m>128</c-><c- k>px</c-><c- p>,</c-> <c- m>39</c-><c- k>px</c-> <c- m>126</c-><c- k>px</c-><c- p>,</c-> <c- m>24</c-><c- k>px</c-> <c- m>104</c-><c- k>px</c-><c- p>);</c-> </code></pre> </div> <div class="example" id="example-32370653"> <a class="self-link" href="#example-32370653"></a> In this example, the <a class="property css" data-link-type="property" href="#propdef-clip-path" id="ref-for-propdef-clip-path④">clip-path</a> property references an SVG <a data-link-type="element" href="#elementdef-clippath" id="ref-for-elementdef-clippath④">clipPath</a> element. Each comma separated length pair represents one point of the polygon. As for the previous example, the visualized clipping path can be seen in the <a href="#clipping">introduction</a>. <pre><code class="highlight"><c- k>clip-path</c-><c- p>:</c-> <c- nf>url</c-><c- p>(</c-><c- s>"#clip1"</c-><c- p>);</c-> </code></pre> <pre><code class="highlight"><c- f><clipPath</c-> <c- e>id=</c-><c- s>"clip1"</c-><c- f>></c-> <c- f><polygon</c-> <c- e>points=</c-><c- s>"15,99 30,87 65,99 85,55 122,57 184,73 198,105</c-> <c- s> 199,150 145,159 155,139 126,120 112,138 80,128 39,126 24,104"</c-><c- f>/></c-> <c- f></clipPath></c-> </code></pre> </div> The <a class="property css" data-link-type="property" href="#propdef-clip-path" id="ref-for-propdef-clip-path⑤">clip-path</a> property is a <a href="https://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermPresentationAttribute">presentation attribute</a> for SVG elements. <h2 class="heading settled" data-level="6" id="svg-clipping-paths">6. SVG Clipping Path Sources<a class="self-link" href="#svg-clipping-paths"></a></h2> <h3 class="heading settled" data-level="6.1" id="ClipPathElement">6.1. The <a data-link-type="element" href="#elementdef-clippath" id="ref-for-elementdef-clippath⑤">clipPath</a> element<a class="self-link" href="#ClipPathElement"></a></h3> <table class="definition-table"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled" data-dfn-type="element" data-export id="elementdef-clippath"><code>clipPath</code></dfn> <tr> <th>Categories: <td><a data-link-type="dfn" href="https://www.w3.org/TR/SVG2/struct.html#container-element" id="ref-for-container-element①">container elements</a>, <a data-link-type="dfn" href="https://svgwg.org/svg2-draft/render.html#TermNeverRenderedElement" id="ref-for-TermNeverRenderedElement">never-rendered element</a> <tr> <th>Content model: <td> Any number of the following elements, in any order: <ul class="no-bullets"> <li><a href="https://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermDescriptiveElement">descriptive</a> — <a data-link-type="element" href="https://www.w3.org/TR/SVG2/struct.html#elementdef-desc" id="ref-for-elementdef-desc">desc</a>, <a data-link-type="element" href="https://www.w3.org/TR/SVG2/struct.html#elementdef-title" id="ref-for-elementdef-title">title</a>, <a data-link-type="element" href="https://www.w3.org/TR/SVG2/struct.html#elementdef-metadata" id="ref-for-elementdef-metadata">metadata</a> <li><a href="https://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermAnimationElement">animation</a> — <a data-link-type="element" href="https://svgwg.org/specs/animations/#elementdef-animate" id="ref-for-elementdef-animate">animate</a>, <a data-link-type="element">animateColor</a>, <a data-link-type="element" href="https://svgwg.org/specs/animations/#elementdef-animateMotion" id="ref-for-elementdef-animateMotion">animateMotion</a>, <a data-link-type="element" href="https://svgwg.org/specs/animations/#elementdef-animateTransform" id="ref-for-elementdef-animateTransform">animateTransform</a>, <a data-link-type="element" href="https://svgwg.org/specs/animations/#elementdef-set" id="ref-for-elementdef-set">set</a> <li><a href="https://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermShapeElement">shape</a> — <a data-link-type="element" href="https://www.w3.org/TR/SVG2/shapes.html#elementdef-circle" id="ref-for-elementdef-circle">circle</a>, <a data-link-type="element" href="https://www.w3.org/TR/SVG2/shapes.html#elementdef-ellipse" id="ref-for-elementdef-ellipse">ellipse</a>, <a data-link-type="element" href="https://www.w3.org/TR/SVG2/shapes.html#elementdef-line" id="ref-for-elementdef-line">line</a>, <a data-link-type="element" href="https://www.w3.org/TR/SVG2/paths.html#elementdef-path" id="ref-for-elementdef-path">path</a>, <a data-link-type="element" href="https://www.w3.org/TR/SVG2/shapes.html#elementdef-polygon" id="ref-for-elementdef-polygon">polygon</a>, <a data-link-type="element" href="https://www.w3.org/TR/SVG2/shapes.html#elementdef-polyline" id="ref-for-elementdef-polyline">polyline</a>, <a data-link-type="element" href="https://www.w3.org/TR/SVG2/shapes.html#elementdef-rect" id="ref-for-elementdef-rect">rect</a> <li><a data-link-type="element" href="https://www.w3.org/TR/SVG2/text.html#elementdef-text" id="ref-for-elementdef-text">text</a> <li><a data-link-type="element" href="https://www.w3.org/TR/SVG2/struct.html#elementdef-use" id="ref-for-elementdef-use②">use</a> <li><a data-link-type="element" href="https://www.w3.org/TR/SVG2/interact.html#elementdef-script" id="ref-for-elementdef-script">script</a> </ul> <tr> <th>Attributes: <td> <ul class="no-bullets"> <li><a href="https://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermConditionalProcessingAttribute">conditional processing attributes</a> — <a href="https://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#RequiredFeaturesAttribute">‘requiredFeatures’</a>, <a href="https://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#RequiredExtensionsAttribute">‘requiredExtensions’</a>, <a href="https://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#SystemLanguageAttribute">‘systemLanguage’</a> <li><a href="https://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermCoreAttributes">core attributes</a> — <a href="https://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#IDAttribute">‘id’</a>, <a href="https://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#XMLBaseAttribute">‘xml:base’</a>, <a href="https://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#XMLLangAttribute">‘xml:lang’</a>, <a href="https://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#XMLSpaceAttribute">‘xml:space’</a> <li><a href="https://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermPresentationAttribute">presentation attributes</a> — <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-inline-3/#propdef-alignment-baseline" id="ref-for-propdef-alignment-baseline">alignment-baseline</a>, <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-inline-3/#propdef-baseline-shift" id="ref-for-propdef-baseline-shift">baseline-shift</a>, <a class="property css" data-link-type="property" href="#propdef-clip" id="ref-for-propdef-clip①">clip</a>, <a class="property css" data-link-type="property" href="#propdef-clip-path" id="ref-for-propdef-clip-path⑥">clip-path</a>, <a class="property css" data-link-type="property" href="#propdef-clip-rule" id="ref-for-propdef-clip-rule">clip-rule</a>, <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-color-4/#propdef-color" id="ref-for-propdef-color">color</a>, <a class="property css" data-link-type="property" href="https://www.w3.org/TR/SVG2/painting.html#ColorInterpolationProperty" id="ref-for-ColorInterpolationProperty">color-interpolation</a>, <a class="property css" data-link-type="property" href="https://www.w3.org/TR/filter-effects-1/#propdef-color-interpolation-filters" id="ref-for-propdef-color-interpolation-filters">color-interpolation-filters</a>, <a class="property css" data-link-type="property">color-profile</a>, <a class="property css" data-link-type="property" href="https://www.w3.org/TR/SVG2/painting.html#ColorRenderingProperty" id="ref-for-ColorRenderingProperty">color-rendering</a>, <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-ui-4/#propdef-cursor" id="ref-for-propdef-cursor">cursor</a>, <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-writing-modes-3/#propdef-direction" id="ref-for-propdef-direction">direction</a>, <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-display-3/#propdef-display" id="ref-for-propdef-display">display</a>, <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-inline-3/#propdef-dominant-baseline" id="ref-for-propdef-dominant-baseline">dominant-baseline</a>, enable-background, <a class="property css" data-link-type="property" href="https://www.w3.org/TR/SVG2/painting.html#FillProperty" id="ref-for-FillProperty">fill</a>, <a class="property css" data-link-type="property" href="https://www.w3.org/TR/SVG2/painting.html#FillOpacityProperty" id="ref-for-FillOpacityProperty">fill-opacity</a>, <a class="property css" data-link-type="property" href="https://www.w3.org/TR/SVG2/painting.html#FillRuleProperty" id="ref-for-FillRuleProperty">fill-rule</a>, <a class="property css" data-link-type="property" href="https://www.w3.org/TR/filter-effects-1/#propdef-filter" id="ref-for-propdef-filter">filter</a>, <a class="property css" data-link-type="property" href="https://www.w3.org/TR/filter-effects-1/#propdef-flood-color" id="ref-for-propdef-flood-color">flood-color</a>, <a class="property css" data-link-type="property" href="https://www.w3.org/TR/filter-effects-1/#propdef-flood-opacity" id="ref-for-propdef-flood-opacity">flood-opacity</a>, <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-fonts-4/#propdef-font" id="ref-for-propdef-font">font</a>, <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-fonts-4/#propdef-font-family" id="ref-for-propdef-font-family">font-family</a>, <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-fonts-4/#propdef-font-size" id="ref-for-propdef-font-size">font-size</a>, <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-fonts-5/#propdef-font-size-adjust" id="ref-for-propdef-font-size-adjust">font-size-adjust</a>, <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-fonts-4/#propdef-font-stretch" id="ref-for-propdef-font-stretch">font-stretch</a>, <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-fonts-4/#propdef-font-style" id="ref-for-propdef-font-style">font-style</a>, <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-fonts-4/#propdef-font-variant" id="ref-for-propdef-font-variant">font-variant</a>, <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-fonts-4/#propdef-font-weight" id="ref-for-propdef-font-weight">font-weight</a>, glyph-orientation-horizontal, <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-writing-modes-4/#propdef-glyph-orientation-vertical" id="ref-for-propdef-glyph-orientation-vertical">glyph-orientation-vertical</a>, <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-images-3/#propdef-image-rendering" id="ref-for-propdef-image-rendering">image-rendering</a>, kerning, <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-text-4/#propdef-letter-spacing" id="ref-for-propdef-letter-spacing">letter-spacing</a>, <a class="property css" data-link-type="property" href="https://www.w3.org/TR/filter-effects-1/#propdef-lighting-color" id="ref-for-propdef-lighting-color">lighting-color</a>, <a class="property css" data-link-type="property" href="https://www.w3.org/TR/SVG2/painting.html#MarkerProperty" id="ref-for-MarkerProperty">marker</a>, <a class="property css" data-link-type="property" href="https://www.w3.org/TR/SVG2/painting.html#MarkerEndProperty" id="ref-for-MarkerEndProperty">marker-end</a>, <a class="property css" data-link-type="property" href="https://www.w3.org/TR/SVG2/painting.html#MarkerMidProperty" id="ref-for-MarkerMidProperty">marker-mid</a>, <a class="property css" data-link-type="property" href="https://www.w3.org/TR/SVG2/painting.html#MarkerStartProperty" id="ref-for-MarkerStartProperty">marker-start</a>, <a class="property css" data-link-type="property" href="#propdef-mask" id="ref-for-propdef-mask①">mask</a>, <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-color-4/#propdef-opacity" id="ref-for-propdef-opacity①">opacity</a>, <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-overflow-3/#propdef-overflow" id="ref-for-propdef-overflow①">overflow</a>, <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-ui-4/#propdef-pointer-events" id="ref-for-propdef-pointer-events①">pointer-events</a>, <a class="property css" data-link-type="property" href="https://www.w3.org/TR/SVG2/painting.html#ShapeRenderingProperty" id="ref-for-ShapeRenderingProperty">shape-rendering</a>, <a class="property css" data-link-type="property" href="https://www.w3.org/TR/SVG2/pservers.html#StopColorProperty" id="ref-for-StopColorProperty">stop-color</a>, <a class="property css" data-link-type="property" href="https://www.w3.org/TR/SVG2/pservers.html#StopOpacityProperty" id="ref-for-StopOpacityProperty">stop-opacity</a>, <a class="property css" data-link-type="property" href="https://www.w3.org/TR/SVG2/painting.html#StrokeProperty" id="ref-for-StrokeProperty">stroke</a>, <a class="property css" data-link-type="property" href="https://www.w3.org/TR/SVG2/painting.html#StrokeDasharrayProperty" id="ref-for-StrokeDasharrayProperty">stroke-dasharray</a>, <a class="property css" data-link-type="property" href="https://www.w3.org/TR/SVG2/painting.html#StrokeDashoffsetProperty" id="ref-for-StrokeDashoffsetProperty">stroke-dashoffset</a>, <a class="property css" data-link-type="property" href="https://www.w3.org/TR/SVG2/painting.html#StrokeLinecapProperty" id="ref-for-StrokeLinecapProperty">stroke-linecap</a>, <a class="property css" data-link-type="property" href="https://www.w3.org/TR/SVG2/painting.html#StrokeLinejoinProperty" id="ref-for-StrokeLinejoinProperty">stroke-linejoin</a>, <a class="property css" data-link-type="property" href="https://www.w3.org/TR/SVG2/painting.html#StrokeMiterlimitProperty" id="ref-for-StrokeMiterlimitProperty">stroke-miterlimit</a>, <a class="property css" data-link-type="property" href="https://www.w3.org/TR/SVG2/painting.html#StrokeOpacityProperty" id="ref-for-StrokeOpacityProperty">stroke-opacity</a>, <a class="property css" data-link-type="property" href="https://www.w3.org/TR/SVG2/painting.html#StrokeWidthProperty" id="ref-for-StrokeWidthProperty">stroke-width</a>, <a class="property css" data-link-type="property" href="https://www.w3.org/TR/SVG2/text.html#TextAnchorProperty" id="ref-for-TextAnchorProperty">text-anchor</a>, <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-text-decor-4/#propdef-text-decoration" id="ref-for-propdef-text-decoration">text-decoration</a>, <a class="property css" data-link-type="property" href="https://www.w3.org/TR/SVG2/painting.html#TextRenderingProperty" id="ref-for-TextRenderingProperty">text-rendering</a>, <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-writing-modes-3/#propdef-unicode-bidi" id="ref-for-propdef-unicode-bidi">unicode-bidi</a>, <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-display-3/#propdef-visibility" id="ref-for-propdef-visibility">visibility</a>, <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-text-4/#propdef-word-spacing" id="ref-for-propdef-word-spacing">word-spacing</a>, <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-writing-modes-4/#propdef-writing-mode" id="ref-for-propdef-writing-mode">writing-mode</a> <li><a href="https://www.w3.org/TR/2011/REC-SVG11-20110816/styling.html#ClassAttribute">‘class’</a> <li><a href="https://www.w3.org/TR/2011/REC-SVG11-20110816/styling.html#StyleAttribute">‘style’</a> <li><a href="https://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#ExternalResourcesRequiredAttribute">‘externalResourcesRequired’</a> <li><a href="https://www.w3.org/TR/2011/REC-SVG11-20110816/coords.html#TransformAttribute">‘transform’</a> <li>‘<a data-link-type="element-attr" href="#element-attrdef-clippath-clippathunits" id="ref-for-element-attrdef-clippath-clippathunits">clipPathUnits</a>’ </ul> <tr> <th>DOM Interfaces: <td><a class="idlinterface" href="#InterfaceSVGClipPathElement">SVGClipPathElement</a> </table> Attribute definitions: <dl> <dt data-md><dfn class="dfn-paneled" data-dfn-for="clipPath" data-dfn-type="element-attr" data-export id="element-attrdef-clippath-clippathunits"><code>clipPathUnits</code></dfn> = "<a class="css" data-link-type="maybe" href="#valdef-clippathunits-userspaceonuse" id="ref-for-valdef-clippathunits-userspaceonuse">userSpaceOnUse</a> | <a class="css" data-link-type="maybe" href="#valdef-clippathunits-objectboundingbox" id="ref-for-valdef-clippathunits-objectboundingbox">objectBoundingBox</a>" <dd data-md> Defines the coordinate system for the contents of the <a data-link-type="element" href="#elementdef-clippath" id="ref-for-elementdef-clippath⑥">clipPath</a>. <dl> <dt data-md><dfn class="dfn-paneled css" data-dfn-for="clipPathUnits" data-dfn-type="value" data-export id="valdef-clippathunits-userspaceonuse">userSpaceOnUse</dfn> <dd data-md> The contents of the <a data-link-type="element" href="#elementdef-clippath" id="ref-for-elementdef-clippath⑦">clipPath</a> represent values in the current <a data-link-type="dfn" href="https://www.w3.org/TR/css-transforms-1/#user-coordinate-system" id="ref-for-user-coordinate-system">user coordinate system</a> in place at the time when the clipPath element is referenced (i.e., the user coordinate system for the element referencing the clipPath element via the <a class="property css" data-link-type="property" href="#propdef-clip-path" id="ref-for-propdef-clip-path⑦">clip-path</a> property). <dt data-md><dfn class="dfn-paneled css" data-dfn-for="clipPathUnits" data-dfn-type="value" data-export id="valdef-clippathunits-objectboundingbox">objectBoundingBox</dfn> <dd data-md> The coordinate system has its origin at the top left corner of the <a data-link-type="dfn" href="https://www.w3.org/TR/SVG2/coords.html#bounding-box" id="ref-for-bounding-box">bounding box</a> of the element to which the clipping path applies to and the same width and height of this bounding box. <a href="https://www.w3.org/TR/SVG/coords.html#Units">User coordinates</a> are sized equivalently to the CSS <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-values-4/#px" id="ref-for-px">px</a> unit. </dl> If attribute <a data-link-type="element-attr" href="#element-attrdef-clippath-clippathunits" id="ref-for-element-attrdef-clippath-clippathunits①">clipPathUnits</a> is not specified, then the effect is as if a value of <a class="css" data-link-type="maybe" href="#valdef-clippathunits-userspaceonuse" id="ref-for-valdef-clippathunits-userspaceonuse①">userSpaceOnUse</a> were specified. Animatable: yes. </dl> CSS properties inherit into the <a data-link-type="element" href="#elementdef-clippath" id="ref-for-elementdef-clippath①⓪">clipPath</a> element from its ancestors; properties do not inherit from the element referencing the clipPath element. <a data-link-type="element" href="#elementdef-clippath" id="ref-for-elementdef-clippath①②">clipPath</a> elements are never rendered directly; their only usage is as something that can be referenced using the <a class="property css" data-link-type="property" href="#propdef-clip-path" id="ref-for-propdef-clip-path⑧">clip-path</a> property. The <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-display-3/#propdef-display" id="ref-for-propdef-display①">display</a> property does not apply to the clipPath element; thus, clipPath elements are not directly rendered even if the display property is set to a value other than <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-display-3/#valdef-display-none" id="ref-for-valdef-display-none">none</a>, and clipPath elements are available for referencing even when the display property on the clipPath element or any of its ancestors is set to none. A <a data-link-type="element" href="#elementdef-clippath" id="ref-for-elementdef-clippath①⑦">clipPath</a> element can contain <a data-link-type="element" href="https://www.w3.org/TR/SVG2/paths.html#elementdef-path" id="ref-for-elementdef-path①">path</a> elements, <a data-link-type="element" href="https://www.w3.org/TR/SVG2/text.html#elementdef-text" id="ref-for-elementdef-text①">text</a> elements, <a data-link-type="dfn" href="https://www.w3.org/TR/SVG2/shapes.html#basic-shape" id="ref-for-basic-shape">basic shapes</a> (such as <a data-link-type="element" href="https://www.w3.org/TR/SVG2/shapes.html#elementdef-circle" id="ref-for-elementdef-circle①">circle</a>) or a <a data-link-type="element" href="https://www.w3.org/TR/SVG2/struct.html#elementdef-use" id="ref-for-elementdef-use③">use</a> element. If a use element is a child of a clipPath element, it must directly reference path, text or basic shapes elements. Indirect references are an error and the clipPath element must be ignored. <a class="self-link" href="#issue-d0c561ed"></a> Firefox disables rendering of elements referencing clipPaths with violated content model. No browser ignores clipPath on use with indirect reference. <a href="https://github.com/w3c/fxtf-drafts/issues/17">[Issue #17]</a> The raw geometry of each child element exclusive of rendering properties such as <a class="property css" data-link-type="property" href="https://www.w3.org/TR/SVG2/painting.html#FillProperty" id="ref-for-FillProperty①">fill</a>, <a class="property css" data-link-type="property" href="https://www.w3.org/TR/SVG2/painting.html#StrokeProperty" id="ref-for-StrokeProperty①">stroke</a>, <a class="property css" data-link-type="property" href="https://www.w3.org/TR/SVG2/painting.html#StrokeWidthProperty" id="ref-for-StrokeWidthProperty①">stroke-width</a> within a <a data-link-type="element" href="#elementdef-clippath" id="ref-for-elementdef-clippath②⓪">clipPath</a> conceptually defines a 1-bit mask (with the possible exception of anti-aliasing along the edge of the geometry) which represents the silhouette of the graphics associated with that element. Anything outside the outline of the object is masked out. If a child element is made invisible by <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-display-3/#propdef-display" id="ref-for-propdef-display④">display</a> or <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-display-3/#propdef-visibility" id="ref-for-propdef-visibility①">visibility</a> it does not contribute to the clipping path. When the clipPath element contains multiple child elements, the silhouettes of the child elements are logically OR’d together to create a single silhouette which is then used to restrict the region onto which paint can be applied. Thus, a point is inside the clipping path if it is inside any of the children of the clipPath. <a class="self-link" href="#issue-1eaffdcc"></a> Define raw geometry with regards to CSS properties that affect it. Especially on text. <a href="https://github.com/w3c/fxtf-drafts/issues/170">[Issue #170]</a> For a given <a data-link-type="dfn" href="https://www.w3.org/TR/SVG2/struct.html#graphics-element" id="ref-for-graphics-element②">graphics element</a>, the actual clipping path used will be the intersection of the clipping path specified by its <a class="property css" data-link-type="property" href="#propdef-clip-path" id="ref-for-propdef-clip-path⑨">clip-path</a> property (if any) with any clipping paths on its ancestors, as specified by the clip-path property on the elements which establish a new viewport. (See <a data-link-type="biblio" href="#biblio-svg11" title="Scalable Vector Graphics (SVG) 1.1 (Second Edition)">[SVG11]</a>) A couple of additions: <ul> <li data-md> The <a data-link-type="element" href="#elementdef-clippath" id="ref-for-elementdef-clippath②③">clipPath</a> element itself and its child elements do not inherit clipping paths from the ancestors of the clipPath element. <li data-md> The <a data-link-type="element" href="#elementdef-clippath" id="ref-for-elementdef-clippath②⑤">clipPath</a> element or any of its children can specify property <a class="property css" data-link-type="property" href="#propdef-clip-path" id="ref-for-propdef-clip-path①①">clip-path</a>. If a valid clip-path reference is placed on a clipPath element, the resulting clipping path is the intersection of the contents of the clipPath element with the referenced clipping path. If a valid clip-path reference is placed on one of the children of a clipPath element, then the given child element is clipped by the referenced clipping path before OR’ing the silhouette of the child element with the silhouettes of the other child elements. <li data-md> An empty clipping path will completely clip away the element that had the <a class="property css" data-link-type="property" href="#propdef-clip-path" id="ref-for-propdef-clip-path①④">clip-path</a> property applied. </ul> <h3 class="heading settled" data-level="6.2" id="the-clip-rule">6.2. Winding Rules: the <a class="property css" data-link-type="property" href="#propdef-clip-rule" id="ref-for-propdef-clip-rule①">clip-rule</a> property<a class="self-link" href="#the-clip-rule"></a></h3> <table class="def propdef" data-link-for-hint="clip-rule"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-clip-rule">clip-rule</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod">nonzero <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one⑤">|</a> evenodd <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>nonzero <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td>Applies to SVG <a data-link-type="dfn" href="https://www.w3.org/TR/SVG2/struct.html#graphics-element" id="ref-for-graphics-element③">graphics elements</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>yes <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>n/a <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>as specified <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar <tr> <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> <td>discrete <tr> <th>Media: <td>visual </table> The <a class="property css" data-link-type="property" href="#propdef-clip-rule" id="ref-for-propdef-clip-rule②">clip-rule</a> property indicates the algorithm which is to be used to determine whether a given point is inside a shape for a <a data-link-type="dfn" href="#clipping-region" id="ref-for-clipping-region①">clipping region</a> created with a <a data-link-type="dfn" href="https://www.w3.org/TR/SVG2/struct.html#graphics-element" id="ref-for-graphics-element④">graphics element</a>. The definition of the algorithms and the clip-rule values follows the definition of the <a class="property css" data-link-type="property" href="https://www.w3.org/TR/SVG2/painting.html#FillRuleProperty" id="ref-for-FillRuleProperty①">fill-rule</a> property. See section <a href="https://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#FillProperties">“Fill Properties”</a> in SVG 1.1 <a data-link-type="biblio" href="#biblio-svg11" title="Scalable Vector Graphics (SVG) 1.1 (Second Edition)">[SVG11]</a>. <dl> <dt data-md><dfn class="dfn-paneled css" data-dfn-for="clip-rule" data-dfn-type="value" data-export id="valdef-clip-rule-nonzero">nonzero</dfn> <dd data-md> See description of <a class="property css" data-link-type="property" href="https://www.w3.org/TR/SVG2/painting.html#FillRuleProperty" id="ref-for-FillRuleProperty②">fill-rule</a> property <a data-link-type="biblio" href="#biblio-svg11" title="Scalable Vector Graphics (SVG) 1.1 (Second Edition)">[SVG11]</a>. <dt data-md><dfn class="dfn-paneled css" data-dfn-for="clip-rule" data-dfn-type="value" data-export id="valdef-clip-rule-evenodd">evenodd</dfn> <dd data-md> See description of <a class="property css" data-link-type="property" href="https://www.w3.org/TR/SVG2/painting.html#FillRuleProperty" id="ref-for-FillRuleProperty③">fill-rule</a> property <a data-link-type="biblio" href="#biblio-svg11" title="Scalable Vector Graphics (SVG) 1.1 (Second Edition)">[SVG11]</a>. </dl> The <a class="property css" data-link-type="property" href="#propdef-clip-rule" id="ref-for-propdef-clip-rule④">clip-rule</a> property only applies to <a data-link-type="dfn" href="https://www.w3.org/TR/SVG2/struct.html#graphics-element" id="ref-for-graphics-element⑤">graphics elements</a> that are contained within a <a data-link-type="element" href="#elementdef-clippath" id="ref-for-elementdef-clippath②⑨">clipPath</a> element. Note: The <a class="property css" data-link-type="property" href="#propdef-clip-rule" id="ref-for-propdef-clip-rule⑤">clip-rule</a> property does not apply to <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-shapes-1/#typedef-basic-shape" id="ref-for-typedef-basic-shape④"><basic-shape></a>s. <div class="example" id="example-3153479a"> <a class="self-link" href="#example-3153479a"></a> The following drawing illustrates the <a class="css" data-link-type="value" href="#valdef-clip-rule-nonzero" id="ref-for-valdef-clip-rule-nonzero">nonzero</a> rule: <div class="figure"> <img alt="Shape with nonzero rule." src="images/cliprule-nonzero.svg" style="border: solid black 1px;" width="450"> Three shapes from left to right: Star with 5 points drawn in one continuous, overlapping line; 2 clockwise drawn circles, one contains the other and both are subpaths of the same shape; 2 circles, one containing the other with the bigger one drawn in a clockwise direction and the smaller one in a counter-clockwise direction and both belonging to the same shape. Only the last shape has a "hole". </div> The following drawing illustrates the <a class="css" data-link-type="value" href="#valdef-clip-rule-evenodd" id="ref-for-valdef-clip-rule-evenodd">evenodd</a> rule: <div class="figure"> <img alt="Shape with even-odd rule." src="images/cliprule-evenodd.svg" style="border: solid black 1px;" width="450"> Three shapes from left to right: Star with 5 points drawn in one continuous, overlapping line; 2 clockwise drawn circles, one contains the other and both are subpaths of the same shape; 2 circles, one containing the other with the bigger one drawn in a clockwise direction and the smaller one in a counter-clockwise direction and both belonging to the same shape. All 3 shapes have a "hole". </div> </div> <div class="example" id="example-4b844436"> <a class="self-link" href="#example-4b844436"></a> The following fragment of code will cause an even-odd clipping rule to be applied to the clipping path because <a class="property css" data-link-type="property" href="#propdef-clip-rule" id="ref-for-propdef-clip-rule⑥">clip-rule</a> is specified on the <a data-link-type="element" href="https://www.w3.org/TR/SVG2/paths.html#elementdef-path" id="ref-for-elementdef-path③">path</a> element that defines the clipping shape: <pre><code class="highlight"><c- p><</c-><c- f>g</c-> <c- e>clip-rule</c-><c- o>=</c-><c- s>"nonzero"</c-><c- p>></c-> <c- p><</c-><c- f>clipPath</c-> <c- e>id</c-><c- o>=</c-><c- s>"MyClip"</c-><c- p>></c-> <c- p><</c-><c- f>path</c-> <c- e>d</c-><c- o>=</c-><c- s>"..."</c-> <c- e>clip-rule</c-><c- o>=</c-><c- s>"evenodd"</c-> <c- p>/></c-> <c- p></</c-><c- f>clipPath</c-><c- p>></c-> <c- p><</c-><c- f>rect</c-> <c- e>clip-path</c-><c- o>=</c-><c- s>"url(#MyClip)"</c-> ... <c- p>/></c-> <c- p></</c-><c- f>g</c-><c- p>></c-> </code></pre> whereas the following fragment of code will not cause an evenodd clipping rule to be applied because the <a class="property css" data-link-type="property" href="#propdef-clip-rule" id="ref-for-propdef-clip-rule⑦">clip-rule</a> is specified on the referencing element, not on the object defining the clipping shape: <pre><code class="highlight"><c- p><</c-><c- f>g</c-> <c- e>clip-rule</c-><c- o>=</c-><c- s>"nonzero"</c-><c- p>></c-> <c- p><</c-><c- f>clipPath</c-> <c- e>id</c-><c- o>=</c-><c- s>"MyClip"</c-><c- p>></c-> <c- p><</c-><c- f>path</c-> <c- e>d</c-><c- o>=</c-><c- s>"..."</c-> <c- p>/></c-> <c- p></</c-><c- f>clipPath</c-><c- p>></c-> <c- p><</c-><c- f>rect</c-> <c- e>clip-path</c-><c- o>=</c-><c- s>"url(#MyClip)"</c-> <c- e>clip-rule</c-><c- o>=</c-><c- s>"evenodd"</c-> ... <c- p>/></c-> <c- p></</c-><c- f>g</c-><c- p>></c-> </code></pre> </div> The <a class="property css" data-link-type="property" href="#propdef-clip-rule" id="ref-for-propdef-clip-rule⑧">clip-rule</a> property is a <a href="https://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermPresentationAttribute">presentation attribute</a> for SVG elements. <h2 class="heading settled" data-level="7" id="positioned-masks">7. Positioned Masks<a class="self-link" href="#positioned-masks"></a></h2> <h3 class="heading settled" data-level="7.1" id="the-mask-image">7.1. Mask Image Source: the <a class="property css" data-link-type="property" href="#propdef-mask-image" id="ref-for-propdef-mask-image④">mask-image</a> property<a class="self-link" href="#the-mask-image"></a></h3> <table class="def propdef" data-link-for-hint="mask-image"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-mask-image">mask-image</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod"><a class="production css" data-link-type="type" href="#typedef-mask-reference" id="ref-for-typedef-mask-reference"><mask-reference></a><a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-comma" id="ref-for-mult-comma">#</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>none <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td>All elements. In SVG, it applies to <a data-link-type="dfn" href="https://www.w3.org/TR/SVG2/struct.html#container-element" id="ref-for-container-element②">container elements</a> excluding the <a data-link-type="element" href="https://www.w3.org/TR/SVG2/struct.html#elementdef-defs" id="ref-for-elementdef-defs①">defs</a> element, all <a data-link-type="dfn" href="https://www.w3.org/TR/SVG2/struct.html#graphics-element" id="ref-for-graphics-element⑥">graphics elements</a> and the <a data-link-type="element" href="https://www.w3.org/TR/SVG2/struct.html#elementdef-use" id="ref-for-elementdef-use⑤">use</a> element <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>no <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>n/a <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>the keyword none, a computed <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-images-3/#typedef-image" id="ref-for-typedef-image"><image></a>, or a computed <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#url-value" id="ref-for-url-value②"><url></a> <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar <tr> <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> <td>discrete <tr> <th>Media: <td>visual </table> This property sets the <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="mask-layer-image">mask layer image</dfn> of an element. Where: <pre class="prod"><dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-mask-reference"><mask-reference></dfn> = none <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one⑥">|</a> <a class="production" data-link-type="type" href="https://www.w3.org/TR/css-images-3/#typedef-image" id="ref-for-typedef-image①"><image></a> <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one⑦">|</a> <a class="production" data-link-type="type" href="#typedef-mask-source" id="ref-for-typedef-mask-source"><mask-source></a></pre> <pre class="prod"><dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-mask-source"><mask-source></dfn> = <a class="production" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#url-value" id="ref-for-url-value③"><url></a></pre> <dl> <dt data-md><dfn class="dfn-paneled css" data-dfn-for="mask-image" data-dfn-type="value" data-export id="valdef-mask-image-url"><url></dfn> <dd data-md> A URL reference to a <a data-link-type="element" href="#elementdef-mask" id="ref-for-elementdef-mask③">mask</a> element (for example url(commonmasks.svg#mask)) or to a CSS image. <dt data-md>none <dd data-md> A value of none counts as a transparent black image layer. </dl> A computed value of other than none results in the creation of a <a data-link-type="dfn" href="https://www.w3.org/TR/CSS21/visuren.html#x43" id="ref-for-x43②">stacking context</a> <a data-link-type="biblio" href="#biblio-css21" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS21]</a> the same way that CSS <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-color-4/#propdef-opacity" id="ref-for-propdef-opacity②">opacity</a> <a data-link-type="biblio" href="#biblio-css3color" title="CSS Color Module Level 3">[CSS3COLOR]</a> does for values other than 1. A mask reference that is an empty image (zero width or zero height), that fails to download, is not a reference to an <a data-link-type="element" href="#elementdef-mask" id="ref-for-elementdef-mask④">mask</a> element, is non-existent, or that cannot be displayed (e.g. because it is not in a supported image format) still counts as an image layer of transparent black. See the section <a href="#MaskValues">“Mask processing”</a> for how to process a <a data-link-type="dfn" href="#mask-layer-image" id="ref-for-mask-layer-image①">mask layer image</a>. Note: A value of none in a list of <a class="production css" data-link-type="type" href="#typedef-mask-reference" id="ref-for-typedef-mask-reference①"><mask-reference></a>s may influence the masking operation depending on the used compositing operator specified by <a class="property css" data-link-type="property" href="#propdef-mask-composite" id="ref-for-propdef-mask-composite">mask-composite</a>. Note: A <a class="production css" data-link-type="type" href="#typedef-mask-source" id="ref-for-typedef-mask-source①"><mask-source></a> counts as mask layer and can be combined in a repeatable <a class="production css" data-link-type="type" href="#typedef-mask-reference" id="ref-for-typedef-mask-reference②"><mask-reference></a> list with <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-images-3/#typedef-image" id="ref-for-typedef-image②"><image></a> or further <mask-source> list items. Note: An element can also be masked with <a class="property css" data-link-type="property" href="#propdef-mask-border-source" id="ref-for-propdef-mask-border-source③">mask-border-source</a>. See mask-border-source for the interaction of that property with <a class="property css" data-link-type="property" href="#propdef-mask-image" id="ref-for-propdef-mask-image⑤">mask-image</a>. <div class="example" id="example-4c7f99bf"> <a class="self-link" href="#example-4c7f99bf"></a> Examples for mask references: <pre><code class="highlight">body <c- p>{</c-> <c- k>mask-image</c-><c- p>:</c-> <c- nf>linear-gradient</c-><c- p>(</c->black <c- m>0</c-><c- k>%</c-><c- p>,</c-> transparent <c- m>100</c-><c- k>%</c-><c- p>)</c-> <c- p>}</c-> p <c- p>{</c-> <c- k>mask-image</c-><c- p>:</c-> none <c- p>}</c-> div <c- p>{</c-> <c- k>mask-image</c-><c- p>:</c-> <c- nf>url</c-><c- p>(</c-><c- s>resources.svg#mask2</c-><c- p>)</c-> <c- p>}</c-> </code></pre> </div> See the section <a href="#layering">“Layering multiple mask layer images”</a> for how <a class="property css" data-link-type="property" href="#propdef-mask-image" id="ref-for-propdef-mask-image⑥">mask-image</a> interacts with other comma-separated mask properties to form each mask layer. <h3 class="heading settled" data-level="7.2" id="the-mask-mode">7.2. Mask Image Interpretation: the <a class="property css" data-link-type="property" href="#propdef-mask-mode" id="ref-for-propdef-mask-mode">mask-mode</a> property<a class="self-link" href="#the-mask-mode"></a></h3> <table class="def propdef" data-link-for-hint="mask-mode"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-mask-mode">mask-mode</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod"><a class="production css" data-link-type="type" href="#typedef-masking-mode" id="ref-for-typedef-masking-mode"><masking-mode></a><a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-comma" id="ref-for-mult-comma①">#</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>match-source <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td>All elements. In SVG, it applies to <a data-link-type="dfn" href="https://www.w3.org/TR/SVG2/struct.html#container-element" id="ref-for-container-element③">container elements</a> excluding the <a data-link-type="element" href="https://www.w3.org/TR/SVG2/struct.html#elementdef-defs" id="ref-for-elementdef-defs②">defs</a> element, all <a data-link-type="dfn" href="https://www.w3.org/TR/SVG2/struct.html#graphics-element" id="ref-for-graphics-element⑦">graphics elements</a> and the <a data-link-type="element" href="https://www.w3.org/TR/SVG2/struct.html#elementdef-use" id="ref-for-elementdef-use⑥">use</a> element <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>no <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>n/a <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>as specified <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar <tr> <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> <td>discrete <tr> <th>Media: <td>visual </table> The <a class="property css" data-link-type="property" href="#propdef-mask-mode" id="ref-for-propdef-mask-mode①">mask-mode</a> property indicates whether the <a class="production css" data-link-type="type" href="#typedef-mask-reference" id="ref-for-typedef-mask-reference③"><mask-reference></a> is treated as luminance mask or alpha mask. (See <a href="#MaskValues">Mask processing</a>.) <pre class="prod"><dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-masking-mode"><masking-mode></dfn> = alpha <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one⑧">|</a> luminance <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one⑨">|</a> match-source</pre> Values have the following meanings: <dl> <dt data-md><dfn class="dfn-paneled css" data-dfn-for="mask-mode" data-dfn-type="value" data-export id="valdef-mask-mode-alpha">alpha</dfn> <dd data-md> A value of <a class="css" data-link-type="maybe" href="#valdef-mask-mode-alpha" id="ref-for-valdef-mask-mode-alpha">alpha</a> indicates that the alpha values of the <a data-link-type="dfn" href="#mask-layer-image" id="ref-for-mask-layer-image②">mask layer image</a> should be used as the mask values. See <a href="#MaskValues">Calculating mask values</a>. <dt data-md><dfn class="dfn-paneled css" data-dfn-for="mask-mode" data-dfn-type="value" data-export id="valdef-mask-mode-luminance">luminance</dfn> <dd data-md> A value of <a class="css" data-link-type="maybe" href="#valdef-mask-mode-luminance" id="ref-for-valdef-mask-mode-luminance">luminance</a> indicates that the luminance values of the <a data-link-type="dfn" href="#mask-layer-image" id="ref-for-mask-layer-image③">mask layer image</a> should be used as the mask values. See <a href="#MaskValues">Calculating mask values</a>. <dt data-md><dfn class="dfn-paneled css" data-dfn-for="mask-mode" data-dfn-type="value" data-export id="valdef-mask-mode-match-source">match-source</dfn> <dd data-md> If the <a class="production css" data-link-type="type" href="#typedef-mask-reference" id="ref-for-typedef-mask-reference④"><mask-reference></a> of the <a class="property css" data-link-type="property" href="#propdef-mask-image" id="ref-for-propdef-mask-image⑦">mask-image</a> property is of type <a class="production css" data-link-type="type" href="#typedef-mask-source" id="ref-for-typedef-mask-source③"><mask-source></a> the value specified by the referenced <a data-link-type="element" href="#elementdef-mask" id="ref-for-elementdef-mask⑤">mask</a> element’s <a class="property css" data-link-type="property" href="#propdef-mask-type" id="ref-for-propdef-mask-type">mask-type</a> property must be used. If the <a class="production css" data-link-type="type" href="#typedef-mask-reference" id="ref-for-typedef-mask-reference⑤"><mask-reference></a> of the <a class="property css" data-link-type="property" href="#propdef-mask-image" id="ref-for-propdef-mask-image⑧">mask-image</a> property is of type <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-images-3/#typedef-image" id="ref-for-typedef-image③"><image></a> the alpha values of the <a data-link-type="dfn" href="#mask-layer-image" id="ref-for-mask-layer-image④">mask layer image</a> should be used as the mask values. </dl> <div class="example" id="example-ec098273"> <a class="self-link" href="#example-ec098273"></a> In the following example, the <a class="property css" data-link-type="property" href="#propdef-mask-type" id="ref-for-propdef-mask-type①">mask-type</a> property sets the mask type value for the <a data-link-type="element" href="#elementdef-mask" id="ref-for-elementdef-mask⑥">mask</a> element to <a class="css" data-link-type="maybe" href="#valdef-mask-type-alpha" id="ref-for-valdef-mask-type-alpha">alpha</a>. The <a class="property css" data-link-type="property" href="#propdef-mask-image" id="ref-for-propdef-mask-image⑨">mask-image</a> property has a reference to this mask element and the <a class="property css" data-link-type="property" href="#propdef-mask-mode" id="ref-for-propdef-mask-mode②">mask-mode</a> property has a value of <a class="css" data-link-type="maybe" href="#valdef-mask-mode-luminance" id="ref-for-valdef-mask-mode-luminance①">luminance</a>. The mask-mode property will override the definition of mask-type to <a class="css" data-link-type="maybe" href="#valdef-mask-type-luminance" id="ref-for-valdef-mask-type-luminance">luminance</a>. The <a class="property css" data-link-type="property" href="#propdef-mask-mode" id="ref-for-propdef-mask-mode④">mask-mode</a> property must not affect the masking mode of <a class="property css" data-link-type="property" href="#propdef-mask-border-source" id="ref-for-propdef-mask-border-source⑤">mask-border-source</a>. <pre><code class="highlight"><c- p><</c-><c- f>mask</c-> <c- e>id</c-><c- o>=</c-><c- s>"SVGMask"</c-> <c- e>mask-type</c-><c- o>=</c-><c- s>"alpha"</c-> <c- e>maskContentUnits</c-><c- o>=</c-><c- s>"objectBoundingBox"</c-><c- p>></c-> <c- p><</c-><c- f>radialGradient</c-> <c- e>id</c-><c- o>=</c-><c- s>"radialFill"</c-><c- p>></c-> <c- p><</c-><c- f>stop</c-> <c- e>stop-color</c-><c- o>=</c-><c- s>"white"</c-> <c- e>offset</c-><c- o>=</c-><c- s>"0"</c-><c- p>/></c-> <c- p><</c-><c- f>stop</c-> <c- e>stop-color</c-><c- o>=</c-><c- s>"black"</c-> <c- e>offset</c-><c- o>=</c-><c- s>"1"</c-><c- p>/></c-> <c- p></</c-><c- f>radialGradient</c-><c- p>></c-> <c- p><</c-><c- f>circle</c-> <c- e>fill</c-><c- o>=</c-><c- s>"url(#radialFill)"</c-> <c- e>cx</c-><c- o>=</c-><c- s>"0.5"</c-> <c- e>cy</c-><c- o>=</c-><c- s>"0.5"</c-> <c- e>r</c-><c- o>=</c-><c- s>"0.5"</c-><c- p>/></c-> <c- p></</c-><c- f>mask</c-><c- p>></c-> <c- p><</c-><c- f>style</c-><c- p>></c-> <c- f>rect</c-> <c- p>{</c-> <c- k>mask-image</c-><c- p>:</c-> url<c- p>(</c-><c- sx>#SVGMask</c-><c- p>);</c-> <c- k>mask-mode</c-><c- p>:</c-> <c- kc>luminance</c-><c- p>;</c-> <c- p>}</c-> <c- p></</c-><c- f>style</c-><c- p>></c-> <c- p><</c-><c- f>rect</c-> <c- e>width</c-><c- o>=</c-><c- s>"200"</c-> <c- e>height</c-><c- o>=</c-><c- s>"200"</c-> <c- e>fill</c-><c- o>=</c-><c- s>"green"</c-><c- p>/></c-> </code></pre> </div> See the section <a href="#layering">“Layering multiple mask layer images”</a> for how <a class="property css" data-link-type="property" href="#propdef-mask-mode" id="ref-for-propdef-mask-mode⑤">mask-mode</a> interacts with other comma-separated mask properties to form each mask layer. <h3 class="heading settled" data-level="7.3" id="the-mask-repeat">7.3. Tiling Mask Images: the <a class="property css" data-link-type="property" href="#propdef-mask-repeat" id="ref-for-propdef-mask-repeat">mask-repeat</a> property<a class="self-link" href="#the-mask-repeat"></a></h3> <table class="def propdef" data-link-for-hint="mask-repeat"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-mask-repeat">mask-repeat</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod"><a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-backgrounds-3/#typedef-repeat-style" id="ref-for-typedef-repeat-style"><repeat-style></a><a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-comma" id="ref-for-mult-comma②">#</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>repeat <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td>All elements. In SVG, it applies to <a data-link-type="dfn" href="https://www.w3.org/TR/SVG2/struct.html#container-element" id="ref-for-container-element④">container elements</a> excluding the <a data-link-type="element" href="https://www.w3.org/TR/SVG2/struct.html#elementdef-defs" id="ref-for-elementdef-defs③">defs</a> element, all <a data-link-type="dfn" href="https://www.w3.org/TR/SVG2/struct.html#graphics-element" id="ref-for-graphics-element⑧">graphics elements</a> and the <a data-link-type="element" href="https://www.w3.org/TR/SVG2/struct.html#elementdef-use" id="ref-for-elementdef-use⑦">use</a> element <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>no <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>n/a <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>Consists of: two keywords, one per dimension <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar <tr> <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> <td>discrete <tr> <th>Media: <td>visual </table> Specifies how <a data-link-type="dfn" href="#mask-layer-image" id="ref-for-mask-layer-image⑤">mask layer images</a> are tiled after they have been <a href="#the-mask-size">sized</a> and <a href="#the-mask-position">positioned</a>. See <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-backgrounds-3/#propdef-background-repeat" id="ref-for-propdef-background-repeat">background-repeat</a> property <a data-link-type="biblio" href="#biblio-css3bg" title="CSS Backgrounds and Borders Module Level 3">[CSS3BG]</a> for the definitions of the property values. <div class="example" id="example-6b3f7f82"> <a class="self-link" href="#example-6b3f7f82"></a> <pre><code class="highlight">body <c- p>{</c-> <c- k>background-color</c-><c- p>:</c-> blue<c- p>;</c-> <c- k>mask-image</c-><c- p>:</c-> <c- nf>url</c-><c- p>(</c-><c- s>dot-mask.png</c-><c- p>)</c-> luminance<c- p>;</c-> <c- k>mask-repeat</c-><c- p>:</c-> space<c- p>;</c-> <c- p>}</c-> </code></pre> <div class="figure"> <img alt="Image of an element with a dotted mask." src="images/mask-repeat.svg" style="border: solid black 1px;" width="240"> The effect of space: the <a data-link-type="dfn" href="#mask-layer-image" id="ref-for-mask-layer-image⑥">mask layer image</a> of a dot is tiled to cover the whole <a data-link-type="dfn" href="#mask-painting-area" id="ref-for-mask-painting-area①">mask painting area</a> and the mask layer images are equally spaced. </div> </div> See the section <a href="#layering">“Layering multiple mask layer images”</a> for how <a class="property css" data-link-type="property" href="#propdef-mask-repeat" id="ref-for-propdef-mask-repeat①">mask-repeat</a> interacts with other comma-separated mask properties to form each mask layer. <h3 class="heading settled" data-level="7.4" id="the-mask-position">7.4. Positioning Mask Images: the <a class="property css" data-link-type="property" href="#propdef-mask-position" id="ref-for-propdef-mask-position①">mask-position</a> property<a class="self-link" href="#the-mask-position"></a></h3> <table class="def propdef" data-link-for-hint="mask-position"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-mask-position">mask-position</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod"><a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#typedef-position" id="ref-for-typedef-position"><position></a><a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-comma" id="ref-for-mult-comma③">#</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>0% 0% <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td>All elements. In SVG, it applies to <a data-link-type="dfn" href="https://www.w3.org/TR/SVG2/struct.html#container-element" id="ref-for-container-element⑤">container elements</a> excluding the <a data-link-type="element" href="https://www.w3.org/TR/SVG2/struct.html#elementdef-defs" id="ref-for-elementdef-defs④">defs</a> element, all <a data-link-type="dfn" href="https://www.w3.org/TR/SVG2/struct.html#graphics-element" id="ref-for-graphics-element⑨">graphics elements</a> and the <a data-link-type="element" href="https://www.w3.org/TR/SVG2/struct.html#elementdef-use" id="ref-for-elementdef-use⑧">use</a> element <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>no <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>refer to size of <a data-link-type="dfn" href="#mask-painting-area" id="ref-for-mask-painting-area②">mask painting area</a> minus size of <a data-link-type="dfn" href="#mask-layer-image" id="ref-for-mask-layer-image⑧">mask layer image</a>; see text <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-backgrounds-3/#propdef-background-position" id="ref-for-propdef-background-position">background-position</a> <a data-link-type="biblio" href="#biblio-css3bg" title="CSS Backgrounds and Borders Module Level 3">[CSS3BG]</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>Consisting of: two keywords representing the origin and two offsets from that origin, each given as an absolute length (if given a <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#length-value" id="ref-for-length-value"><length></a>), otherwise as a percentage. <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar <tr> <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> <td>repeatable list <tr> <th>Media: <td>visual </table> See the <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-backgrounds-3/#propdef-background-position" id="ref-for-propdef-background-position①">background-position</a> property <a data-link-type="biblio" href="#biblio-css3bg" title="CSS Backgrounds and Borders Module Level 3">[CSS3BG]</a> for the definitions of the property values. <div class="example" id="example-80025e44"> <a class="self-link" href="#example-80025e44"></a> In the example below, the (single) image is placed in the lower-right corner of the viewport. <pre><code class="highlight">body <c- p>{</c-> <c- k>mask-image</c-><c- p>:</c-> <c- nf>url</c-><c- p>(</c-><c- s>"logo.png"</c-><c- p>);</c-> <c- k>mask-position</c-><c- p>:</c-> <c- m>100</c-><c- k>%</c-> <c- m>100</c-><c- k>%</c-><c- p>;</c-> <c- k>mask-repeat</c-><c- p>:</c-> no-repeat<c- p>;</c-> <c- p>}</c-> </code></pre> </div> <div class="example" id="example-dc3e5c49"> <a class="self-link" href="#example-dc3e5c49"></a> Mask positions can also be relative to other corners than the top left. E.g., the following puts the background image 10px from the bottom and 3em from the right: <pre><code class="highlight"><c- k>mask-position</c-><c- p>:</c-> right <c- m>3</c-><c- k>em</c-> bottom <c- m>10</c-><c- k>px</c-></code></pre> </div> See the section <a href="#layering">“Layering multiple mask layer images”</a> for how <a class="property css" data-link-type="property" href="#propdef-mask-position" id="ref-for-propdef-mask-position②">mask-position</a> interacts with other comma-separated mask properties to form each mask layer. <h3 class="heading settled" data-level="7.5" id="the-mask-clip">7.5. Masking Area: the <a class="property css" data-link-type="property" href="#propdef-mask-clip" id="ref-for-propdef-mask-clip">mask-clip</a> property<a class="self-link" href="#the-mask-clip"></a></h3> <table class="def propdef" data-link-for-hint="mask-clip"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-mask-clip">mask-clip</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod">[ <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-box-4/#typedef-coord-box" id="ref-for-typedef-coord-box"><coord-box></a> <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one①⓪">|</a> no-clip ]<a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-comma" id="ref-for-mult-comma④">#</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>border-box <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td>All elements. In SVG, it applies to <a data-link-type="dfn" href="https://www.w3.org/TR/SVG2/struct.html#container-element" id="ref-for-container-element⑥">container elements</a> excluding the <a data-link-type="element" href="https://www.w3.org/TR/SVG2/struct.html#elementdef-defs" id="ref-for-elementdef-defs⑤">defs</a> element, all <a data-link-type="dfn" href="https://www.w3.org/TR/SVG2/struct.html#graphics-element" id="ref-for-graphics-element①⓪">graphics elements</a> and the <a data-link-type="element" href="https://www.w3.org/TR/SVG2/struct.html#elementdef-use" id="ref-for-elementdef-use⑨">use</a> element <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>no <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>n/a <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>as specified <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar <tr> <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> <td>discrete <tr> <th>Media: <td>visual </table> For <a data-link-type="dfn" href="#mask-layer-image" id="ref-for-mask-layer-image⑨">mask layer images</a> that do not reference a <a data-link-type="element" href="#elementdef-mask" id="ref-for-elementdef-mask⑧">mask</a> element, <a class="property css" data-link-type="property" href="#propdef-mask-clip" id="ref-for-propdef-mask-clip①">mask-clip</a> determines the <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="mask-painting-area">mask painting area</dfn>, which determines the area that is affected by the mask. The painted content of an element must be restricted to this area. The <a class="property css" data-link-type="property" href="#propdef-mask-clip" id="ref-for-propdef-mask-clip②">mask-clip</a> property has no affect on a <a data-link-type="dfn" href="#mask-layer-image" id="ref-for-mask-layer-image①⓪">mask layer image</a> that references a <a data-link-type="element" href="#elementdef-mask" id="ref-for-elementdef-mask⑨">mask</a> element. The <a data-link-type="element-attr" href="#element-attrdef-mask-x" id="ref-for-element-attrdef-mask-x">x</a>, <a data-link-type="element-attr" href="#element-attrdef-mask-y" id="ref-for-element-attrdef-mask-y">y</a>, <a data-link-type="element-attr" href="#element-attrdef-mask-width" id="ref-for-element-attrdef-mask-width">width</a>, <a data-link-type="element-attr" href="#element-attrdef-mask-height" id="ref-for-element-attrdef-mask-height">height</a> and <a data-link-type="element-attr" href="#element-attrdef-mask-maskunits" id="ref-for-element-attrdef-mask-maskunits">maskUnits</a> attributes on the mask element determine the <a data-link-type="dfn" href="#mask-painting-area" id="ref-for-mask-painting-area③">mask painting area</a> for mask references. Values have the following meanings: <dl> <dt data-md><dfn class="dfn-paneled css" data-dfn-for="mask-clip" data-dfn-type="value" data-export id="valdef-mask-clip-content-box">content-box</dfn> <dd data-md> The painted content is restricted to (clipped to) the content box. <dt data-md><dfn class="dfn-paneled css" data-dfn-for="mask-clip" data-dfn-type="value" data-export id="valdef-mask-clip-padding-box">padding-box</dfn> <dd data-md> The painted content is restricted to (clipped to) the padding box. <dt data-md><dfn class="dfn-paneled css" data-dfn-for="mask-clip" data-dfn-type="value" data-export id="valdef-mask-clip-border-box">border-box</dfn> <dd data-md> The painted content is restricted to (clipped to) the border box. <dt data-md><dfn class="dfn-paneled css" data-dfn-for="mask-clip" data-dfn-type="value" data-export id="valdef-mask-clip-fill-box">fill-box</dfn> <dd data-md> The painted content is restricted to (clipped to) the <a data-link-type="dfn" href="https://www.w3.org/TR/SVG2/coords.html#TermObjectBoundingBox" id="ref-for-TermObjectBoundingBox②">object bounding box</a>. <dt data-md><dfn class="dfn-paneled css" data-dfn-for="mask-clip" data-dfn-type="value" data-export id="valdef-mask-clip-stroke-box">stroke-box</dfn> <dd data-md> The painted content is restricted to (clipped to) the <a data-link-type="dfn" href="#stroke-bounding-box" id="ref-for-stroke-bounding-box①">stroke bounding box</a>. <dt data-md><dfn class="dfn-paneled css" data-dfn-for="mask-clip" data-dfn-type="value" data-export id="valdef-mask-clip-view-box">view-box</dfn> <dd data-md> Uses the nearest <a href="https://www.w3.org/TR/SVG11/intro.html#TermSVGViewport">SVG viewport</a> as reference box. If a <a data-link-type="element-attr" href="https://svgwg.org/svg2-draft/coords.html#ViewBoxAttribute" id="ref-for-ViewBoxAttribute③">viewBox</a> attribute is specified for the <a href="https://www.w3.org/TR/SVG11/intro.html#TermSVGViewport">SVG viewport</a> creating element: <ul> <li data-md> The reference box is positioned at the origin of the coordinate system established by the <a data-link-type="element-attr" href="https://svgwg.org/svg2-draft/coords.html#ViewBoxAttribute" id="ref-for-ViewBoxAttribute④">viewBox</a> attribute. <li data-md> The dimension of the reference box is set to the width and height values of the <a data-link-type="element-attr" href="https://svgwg.org/svg2-draft/coords.html#ViewBoxAttribute" id="ref-for-ViewBoxAttribute⑤">viewBox</a> attribute. </ul> <dt data-md><dfn class="dfn-paneled css" data-dfn-for="mask-clip" data-dfn-type="value" data-export id="valdef-mask-clip-no-clip">no-clip</dfn> <dd data-md> The painted content is not restricted (not clipped). </dl> For SVG elements without associated CSS layout box, the <a data-link-type="dfn" href="https://www.w3.org/TR/css-cascade-5/#used-value" id="ref-for-used-value②">used value</a>s for <a class="css" data-link-type="maybe" href="#valdef-mask-clip-content-box" id="ref-for-valdef-mask-clip-content-box②">content-box</a> and <a class="css" data-link-type="maybe" href="#valdef-mask-clip-padding-box" id="ref-for-valdef-mask-clip-padding-box①">padding-box</a> compute to <a class="css" data-link-type="maybe" href="#valdef-mask-clip-fill-box" id="ref-for-valdef-mask-clip-fill-box">fill-box</a> and for <a class="css" data-link-type="maybe" href="#valdef-mask-clip-border-box" id="ref-for-valdef-mask-clip-border-box③">border-box</a> compute to <a class="css" data-link-type="maybe" href="#valdef-mask-clip-stroke-box" id="ref-for-valdef-mask-clip-stroke-box">stroke-box</a>. For elements with associated CSS layout box, the <a data-link-type="dfn" href="https://www.w3.org/TR/css-cascade-5/#used-value" id="ref-for-used-value③">used value</a>s for <a class="css" data-link-type="maybe" href="#valdef-mask-clip-fill-box" id="ref-for-valdef-mask-clip-fill-box①">fill-box</a> compute to <a class="css" data-link-type="maybe" href="#valdef-mask-clip-content-box" id="ref-for-valdef-mask-clip-content-box③">content-box</a> and for <a class="css" data-link-type="maybe" href="#valdef-mask-clip-stroke-box" id="ref-for-valdef-mask-clip-stroke-box①">stroke-box</a> and <a class="css" data-link-type="maybe" href="#valdef-mask-clip-view-box" id="ref-for-valdef-mask-clip-view-box">view-box</a> compute to <a class="css" data-link-type="maybe" href="#valdef-mask-clip-border-box" id="ref-for-valdef-mask-clip-border-box④">border-box</a>. See the section <a href="#layering">“Layering multiple mask layer images”</a> for how <a class="property css" data-link-type="property" href="#propdef-mask-clip" id="ref-for-propdef-mask-clip③">mask-clip</a> interacts with other comma-separated mask properties to form each mask layer. <h3 class="heading settled" data-level="7.6" id="the-mask-origin">7.6. Positioning Area: the <a class="property css" data-link-type="property" href="#propdef-mask-origin" id="ref-for-propdef-mask-origin">mask-origin</a> property<a class="self-link" href="#the-mask-origin"></a></h3> <table class="def propdef" data-link-for-hint="mask-origin"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-mask-origin">mask-origin</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod"><a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-box-4/#typedef-coord-box" id="ref-for-typedef-coord-box①"><coord-box></a><a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-comma" id="ref-for-mult-comma⑤">#</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>border-box <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td>All elements. In SVG, it applies to <a data-link-type="dfn" href="https://www.w3.org/TR/SVG2/struct.html#container-element" id="ref-for-container-element⑦">container elements</a> excluding the <a data-link-type="element" href="https://www.w3.org/TR/SVG2/struct.html#elementdef-defs" id="ref-for-elementdef-defs⑥">defs</a> element, all <a data-link-type="dfn" href="https://www.w3.org/TR/SVG2/struct.html#graphics-element" id="ref-for-graphics-element①①">graphics elements</a> and the <a data-link-type="element" href="https://www.w3.org/TR/SVG2/struct.html#elementdef-use" id="ref-for-elementdef-use①⓪">use</a> element <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>no <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>n/a <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>as specified <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar <tr> <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> <td>discrete <tr> <th>Media: <td>visual </table> For elements rendered as a single box, specifies the <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="mask-positioning-area">mask positioning area</dfn>. For elements rendered as multiple boxes (e.g., inline boxes on several lines, boxes on several pages) specifies which boxes <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-break-4/#propdef-box-decoration-break" id="ref-for-propdef-box-decoration-break">box-decoration-break</a> operates on to determine the mask positioning area. <div> <dl> <dt data-md><dfn class="dfn-paneled css" data-dfn-for="mask-origin" data-dfn-type="value" data-export id="valdef-mask-origin-content-box">content-box</dfn> <dd data-md> The position is relative to the content box. <dt data-md><dfn class="dfn-paneled css" data-dfn-for="mask-origin" data-dfn-type="value" data-export id="valdef-mask-origin-padding-box">padding-box</dfn> <dd data-md> The position is relative to the padding box. (For single boxes 0 0 is the upper left corner of the padding edge, 100% 100% is the lower right corner.) <dt data-md><dfn class="dfn-paneled css" data-dfn-for="mask-origin" data-dfn-type="value" data-export id="valdef-mask-origin-border-box">border-box</dfn> <dd data-md> The position is relative to the border box. <dt data-md><dfn class="dfn-paneled css" data-dfn-for="mask-origin" data-dfn-type="value" data-export id="valdef-mask-origin-fill-box">fill-box</dfn> <dd data-md> The position is relative to the <a data-link-type="dfn" href="https://www.w3.org/TR/SVG2/coords.html#TermObjectBoundingBox" id="ref-for-TermObjectBoundingBox③">object bounding box</a>. <dt data-md><dfn class="dfn-paneled css" data-dfn-for="mask-origin" data-dfn-type="value" data-export id="valdef-mask-origin-stroke-box">stroke-box</dfn> <dd data-md> The position is relative to the <a data-link-type="dfn" href="#stroke-bounding-box" id="ref-for-stroke-bounding-box②">stroke bounding box</a>. <dt data-md><dfn class="dfn-paneled css" data-dfn-for="mask-origin" data-dfn-type="value" data-export id="valdef-mask-origin-view-box">view-box</dfn> <dd data-md> Uses the nearest <a href="https://www.w3.org/TR/SVG11/intro.html#TermSVGViewport">SVG viewport</a> as reference box. If a <a data-link-type="element-attr" href="https://svgwg.org/svg2-draft/coords.html#ViewBoxAttribute" id="ref-for-ViewBoxAttribute⑥">viewBox</a> attribute is specified for the <a href="https://www.w3.org/TR/SVG11/intro.html#TermSVGViewport">SVG viewport</a> creating element: <ul> <li data-md> The reference box is positioned at the origin of the coordinate system established by the <a data-link-type="element-attr" href="https://svgwg.org/svg2-draft/coords.html#ViewBoxAttribute" id="ref-for-ViewBoxAttribute⑦">viewBox</a> attribute. <li data-md> The dimension of the reference box is set to the width and height values of the <a data-link-type="element-attr" href="https://svgwg.org/svg2-draft/coords.html#ViewBoxAttribute" id="ref-for-ViewBoxAttribute⑧">viewBox</a> attribute. </ul> </dl> </div> For SVG elements without associated CSS layout box, the values <a class="css" data-link-type="maybe" href="#valdef-mask-origin-content-box" id="ref-for-valdef-mask-origin-content-box">content-box</a>, <a class="css" data-link-type="maybe" href="#valdef-mask-origin-padding-box" id="ref-for-valdef-mask-origin-padding-box">padding-box</a> and <a class="css" data-link-type="maybe" href="#valdef-mask-origin-border-box" id="ref-for-valdef-mask-origin-border-box">border-box</a> compute to <a class="css" data-link-type="maybe" href="#valdef-mask-origin-fill-box" id="ref-for-valdef-mask-origin-fill-box">fill-box</a>. For elements with associated CSS layout box, the values <a class="css" data-link-type="maybe" href="#valdef-mask-origin-fill-box" id="ref-for-valdef-mask-origin-fill-box①">fill-box</a>, <a class="css" data-link-type="maybe" href="#valdef-mask-origin-stroke-box" id="ref-for-valdef-mask-origin-stroke-box">stroke-box</a> and <a class="css" data-link-type="maybe" href="#valdef-mask-origin-view-box" id="ref-for-valdef-mask-origin-view-box">view-box</a> compute to the initial value of <a class="property css" data-link-type="property" href="#propdef-mask-origin" id="ref-for-propdef-mask-origin①">mask-origin</a>. Note: The <a class="property css" data-link-type="property" href="#propdef-mask-origin" id="ref-for-propdef-mask-origin②">mask-origin</a> property is similar to the <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-backgrounds-3/#propdef-background-origin" id="ref-for-propdef-background-origin">background-origin</a> property <a data-link-type="biblio" href="#biblio-css3bg" title="CSS Backgrounds and Borders Module Level 3">[CSS3BG]</a>, but it has a different set of values, and a different initial value. Note: If <a class="property css" data-link-type="property" href="#propdef-mask-clip" id="ref-for-propdef-mask-clip④">mask-clip</a> is <a class="css" data-link-type="maybe" href="#valdef-mask-origin-padding-box" id="ref-for-valdef-mask-origin-padding-box①">padding-box</a>, <a class="property css" data-link-type="property" href="#propdef-mask-origin" id="ref-for-propdef-mask-origin③">mask-origin</a> is <a class="css" data-link-type="maybe" href="#valdef-mask-origin-border-box" id="ref-for-valdef-mask-origin-border-box①">border-box</a>, <a class="property css" data-link-type="property" href="#propdef-mask-position" id="ref-for-propdef-mask-position③">mask-position</a> is top left (the initial value), and the element has a non-zero border, then the top and left of the <a data-link-type="dfn" href="#mask-layer-image" id="ref-for-mask-layer-image①①">mask layer image</a> will be clipped. See the section <a href="#layering">“Layering multiple mask layer images”</a> for how <a class="property css" data-link-type="property" href="#propdef-mask-origin" id="ref-for-propdef-mask-origin④">mask-origin</a> interacts with other comma-separated mask properties to form each mask layer. <h3 class="heading settled" data-level="7.7" id="the-mask-size">7.7. Sizing Mask Images: the <a class="property css" data-link-type="property" href="#propdef-mask-size" id="ref-for-propdef-mask-size①">mask-size</a> property<a class="self-link" href="#the-mask-size"></a></h3> <table class="def propdef" data-link-for-hint="mask-size"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-mask-size">mask-size</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod"><a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-backgrounds-3/#typedef-bg-size" id="ref-for-typedef-bg-size"><bg-size></a><a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-comma" id="ref-for-mult-comma⑥">#</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>auto <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td>All elements. In SVG, it applies to <a data-link-type="dfn" href="https://www.w3.org/TR/SVG2/struct.html#container-element" id="ref-for-container-element⑧">container elements</a> excluding the <a data-link-type="element" href="https://www.w3.org/TR/SVG2/struct.html#elementdef-defs" id="ref-for-elementdef-defs⑦">defs</a> element, all <a data-link-type="dfn" href="https://www.w3.org/TR/SVG2/struct.html#graphics-element" id="ref-for-graphics-element①②">graphics elements</a> and the <a data-link-type="element" href="https://www.w3.org/TR/SVG2/struct.html#elementdef-use" id="ref-for-elementdef-use①①">use</a> element <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>no <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>n/a <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>as specified, but with lengths made absolute <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar <tr> <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> <td>repeatable list <tr> <th>Media: <td>visual </table> Specifies the size of the <a data-link-type="dfn" href="#mask-layer-image" id="ref-for-mask-layer-image①②">mask layer images</a>. See <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-backgrounds-3/#propdef-background-size" id="ref-for-propdef-background-size">background-size</a> property <a data-link-type="biblio" href="#biblio-css3bg" title="CSS Backgrounds and Borders Module Level 3">[CSS3BG]</a> for the definitions of the property values. See the section <a href="#layering">“Layering multiple mask layer images”</a> for how <a class="property css" data-link-type="property" href="#propdef-mask-size" id="ref-for-propdef-mask-size②">mask-size</a> interacts with other comma-separated mask properties to form each mask layer. <h3 class="heading settled" data-level="7.8" id="the-mask-composite">7.8. Compositing mask layers: the <a class="property css" data-link-type="property" href="#propdef-mask-composite" id="ref-for-propdef-mask-composite①">mask-composite</a> property<a class="self-link" href="#the-mask-composite"></a></h3> <table class="def propdef" data-link-for-hint="mask-composite"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-mask-composite">mask-composite</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod"><a class="production css" data-link-type="type" href="#typedef-compositing-operator" id="ref-for-typedef-compositing-operator"><compositing-operator></a><a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-comma" id="ref-for-mult-comma⑦">#</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>add <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td>All elements. In SVG, it applies to <a data-link-type="dfn" href="https://www.w3.org/TR/SVG2/struct.html#container-element" id="ref-for-container-element⑨">container elements</a> without the <a data-link-type="element" href="https://www.w3.org/TR/SVG2/struct.html#elementdef-defs" id="ref-for-elementdef-defs⑧">defs</a> element and all <a data-link-type="dfn" href="https://www.w3.org/TR/SVG2/struct.html#graphics-element" id="ref-for-graphics-element①③">graphics elements</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>no <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>n/a <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>as specified <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar <tr> <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> <td>discrete <tr> <th>Media: <td>visual </table> <pre class="prod"><dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-compositing-operator"><compositing-operator></dfn> = add <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one①①">|</a> subtract <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one①②">|</a> intersect <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one①③">|</a> exclude</pre> Each keyword represents a Porter-Duff compositing operator <a data-link-type="biblio" href="#biblio-compositing-1" title="Compositing and Blending Level 1">[COMPOSITING-1]</a> which defines the compositing operation used on the current mask layer with the mask layers below it. In the following, the current mask layer is referred to <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="source">source</dfn>, all mask layers below it (with the corresponding compositing operators applied) are referred to <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="destination">destination</dfn>. <div> <dl> <dt data-md><dfn class="dfn-paneled css" data-dfn-for="mask-composite" data-dfn-type="value" data-export id="valdef-mask-composite-add">add</dfn> <dd data-md> The <a data-link-type="dfn" href="#source" id="ref-for-source">source</a> is placed over the <a data-link-type="dfn" href="#destination" id="ref-for-destination">destination</a>. (See Porter-Duff compositing operator <a href="https://www.w3.org/TR/compositing-1/#porterduffcompositingoperators_srcover">source over</a> for more details.) <dt data-md><dfn class="dfn-paneled css" data-dfn-for="mask-composite" data-dfn-type="value" data-export id="valdef-mask-composite-subtract">subtract</dfn> <dd data-md> The <a data-link-type="dfn" href="#source" id="ref-for-source①">source</a> is placed, where it falls outside of the <a data-link-type="dfn" href="#destination" id="ref-for-destination①">destination</a>. (See Porter-Duff compositing operator <a href="https://www.w3.org/TR/compositing-1/#porterduffcompositingoperators_srcout">source out</a> for more details.) <dt data-md><dfn class="dfn-paneled css" data-dfn-for="mask-composite" data-dfn-type="value" data-export id="valdef-mask-composite-intersect">intersect</dfn> <dd data-md> The parts of <a data-link-type="dfn" href="#source" id="ref-for-source②">source</a> that overlap the <a data-link-type="dfn" href="#destination" id="ref-for-destination②">destination</a>, replace the destination. (See Porter-Duff compositing operator <a href="https://www.w3.org/TR/compositing-1/#porterduffcompositingoperators_srcin">source in</a> .) <dt data-md><dfn class="dfn-paneled css" data-dfn-for="mask-composite" data-dfn-type="value" data-export id="valdef-mask-composite-exclude">exclude</dfn> <dd data-md> The non-overlapping regions of <a data-link-type="dfn" href="#source" id="ref-for-source③">source</a> and <a data-link-type="dfn" href="#destination" id="ref-for-destination④">destination</a> are combined. (See Porter-Duff compositing operator <a href="https://www.w3.org/TR/compositing-1/#porterduffcompositingoperators_xor">XOR</a>.) </dl> </div> If there is no further mask layer, the compositing operator must be ignored. Mask layers must not composite with the element’s content or the content behind the element, instead they must act as if they are rendered into an isolated group. All mask layers below the current mask layer must be composited before applying the compositing operation for the current mask layer. <div class="example" id="example-065f6c44"> <a class="self-link" href="#example-065f6c44"></a> This example uses two <a data-link-type="dfn" href="#mask-layer-image" id="ref-for-mask-layer-image①③">mask layer images</a>: <var>circle.svg</var> and <var>rect.svg</var>. <div class="figure"> <img alt="Example of source-over compositing of mask layers" height="240" src="images/mask-source-destination.svg" width="440"> </div> Both <a data-link-type="dfn" href="#mask-layer-image" id="ref-for-mask-layer-image①④">mask layer images</a> are references with the <a class="property css" data-link-type="property" href="#propdef-mask-image" id="ref-for-propdef-mask-image①⓪">mask-image</a> property: <pre><code class="highlight"><c- k>mask-image</c-><c- p>:</c-> circle.svg<c- p>,</c-> rect.svg<c- p>;</c-> </code></pre> The mask layer with <var>rect.svg</var> is below the mask layer with <var>circle.svg</var>. That means <var>circle.svg</var> is closer to the user than <var>rect.svg</var>. With the property <a class="property css" data-link-type="property" href="#propdef-mask-composite" id="ref-for-propdef-mask-composite②">mask-composite</a> the author may choose different ways to combine multiple mask layers. <ul> <li data-md> <a class="css" data-link-type="maybe" href="#valdef-mask-composite-add" id="ref-for-valdef-mask-composite-add">add</a> paints the <var>circle.svg</var> on top of <var>rect.svg</var>. The behavior is described by the compositing operator <a href="https://www.w3.org/TR/compositing-1/#porterduffcompositingoperators_srcover">source over</a>. <pre><code class="highlight"><c- k>mask-composite</c-><c- p>:</c-> add<c- p>;</c-> </code></pre> <div class="figure"> <img alt="Example of source-over compositing of mask layers" height="220" src="images/mask-composite-add.svg" width="220"> </div> <li data-md> <a class="css" data-link-type="maybe" href="#valdef-mask-composite-subtract" id="ref-for-valdef-mask-composite-subtract">subtract</a> paints portions of <var>circle.svg</var> that do not overlap <var>rect.svg</var>. The behavior is described by the compositing operator <a href="https://www.w3.org/TR/compositing-1/#porterduffcompositingoperators_srcout">source out</a>. <pre><code class="highlight"><c- k>mask-composite</c-><c- p>:</c-> subtract<c- p>;</c-> </code></pre> <div class="figure"> <img alt="Example of source-over compositing of mask layers" height="220" src="images/mask-composite-subtract.svg" width="220"> </div> <li data-md> <a class="css" data-link-type="maybe" href="#valdef-mask-composite-intersect" id="ref-for-valdef-mask-composite-intersect">intersect</a> paints portions of <var>circle.svg</var> that overlap <var>rect.svg</var>. The behavior is described by the compositing operator <a href="https://www.w3.org/TR/compositing-1/#porterduffcompositingoperators_srcin">source in</a>. <pre><code class="highlight"><c- k>mask-composite</c-><c- p>:</c-> intersect<c- p>;</c-> </code></pre> <div class="figure"> <img alt="Example of source-over compositing of mask layers" height="220" src="images/mask-composite-intersect.svg" width="220"> </div> <li data-md> <a class="css" data-link-type="maybe" href="#valdef-mask-composite-exclude" id="ref-for-valdef-mask-composite-exclude">exclude</a> paints portions of <var>circle.svg</var> and <var>rect.svg</var> that do not overlap. The behavior is described by the compositing operator <a href="https://www.w3.org/TR/compositing-1/#porterduffcompositingoperators_xor">XOR</a>. <pre><code class="highlight"><c- k>mask-composite</c-><c- p>:</c-> exclude<c- p>;</c-> </code></pre> <div class="figure"> <img alt="Example of source-over compositing of mask layers" height="220" src="images/mask-composite-exclude.svg" width="220"> </div> </ul> </div> <div class="example" id="example-9bff19b4"> <a class="self-link" href="#example-9bff19b4"></a> The following example specifies two mask layers and two compositing operators. <pre><code class="highlight"><c- k>mask-image</c-><c- p>:</c-> rect.svg<c- p>,</c-> circle.svg<c- p>;</c-> <c- k>mask-composite</c-><c- p>:</c-> add<c- p>,</c-> exclude<c- p>;</c-> </code></pre> <var>rect.svg</var> and <var>circle.svg</var> make use of the <a class="css" data-link-type="maybe" href="#valdef-mask-composite-add" id="ref-for-valdef-mask-composite-add①">add</a> compositing operator. There is no further mask layer to use <a class="css" data-link-type="maybe" href="#valdef-mask-composite-exclude" id="ref-for-valdef-mask-composite-exclude①">exclude</a> and therefore, exclude is ignored. </div> <div class="example" id="example-2266eac2"> <a class="self-link" href="#example-2266eac2"></a> This is an example of 3 mask layers with different compositing operators. <pre><code class="highlight"><c- k>mask-image</c-><c- p>:</c-> trapeze.svg<c- p>,</c-> circle.svg<c- p>,</c-> rect.svg<c- p>;</c-> <c- k>mask-composite</c-><c- p>:</c-> subtract<c- p>,</c-> add<c- p>;</c-> </code></pre> First, <var>circle.svg</var> is “added” to <var>rect.svg</var>. In a second step, only portions of <var>trapeze.svg</var> that are not overlapping the compositing result of the previous two layers is visible. <div class="figure"> <img alt="Example of source-over compositing of mask layers" height="240" src="images/mask-composite-subtract-add.svg" width="440"> </div> </div> See the section <a href="#layering">“Layering multiple mask layer images”</a> for how <a class="property css" data-link-type="property" href="#propdef-mask-composite" id="ref-for-propdef-mask-composite③">mask-composite</a> interacts with other comma-separated mask properties to form each mask layer. <h3 class="heading settled" data-level="7.9" id="the-mask">7.9. Mask Shorthand: the <a class="property css" data-link-type="property" href="#propdef-mask" id="ref-for-propdef-mask②">mask</a> property<a class="self-link" href="#the-mask"></a></h3> <table class="def propdef" data-link-for-hint="mask"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-mask">mask</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod"><a class="production css" data-link-type="type" href="#typedef-mask-layer" id="ref-for-typedef-mask-layer"><mask-layer></a><a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-comma" id="ref-for-mult-comma⑧">#</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>see individual properties <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td>All elements. In SVG, it applies to <a data-link-type="dfn" href="https://www.w3.org/TR/SVG2/struct.html#container-element" id="ref-for-container-element①⓪">container elements</a> excluding the <a data-link-type="element" href="https://www.w3.org/TR/SVG2/struct.html#elementdef-defs" id="ref-for-elementdef-defs⑨">defs</a> element, all <a data-link-type="dfn" href="https://www.w3.org/TR/SVG2/struct.html#graphics-element" id="ref-for-graphics-element①④">graphics elements</a> and the <a data-link-type="element" href="https://www.w3.org/TR/SVG2/struct.html#elementdef-use" id="ref-for-elementdef-use①②">use</a> element <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>no <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>see individual properties <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>see individual properties <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar <tr> <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> <td>see individual properties <tr> <th>Media: <td>visual </table> <pre class="prod"><dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-mask-layer"><mask-layer></dfn> = <a class="production" data-link-type="type" href="#typedef-mask-reference" id="ref-for-typedef-mask-reference⑥"><mask-reference></a> <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-any" id="ref-for-comb-any①">||</a> <a class="production" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#typedef-position" id="ref-for-typedef-position①"><position></a> [ / <a class="production" data-link-type="type" href="https://www.w3.org/TR/css-backgrounds-3/#typedef-bg-size" id="ref-for-typedef-bg-size①"><bg-size></a> ]<a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-opt" id="ref-for-mult-opt">?</a> <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-any" id="ref-for-comb-any②">||</a> <a class="production" data-link-type="type" href="https://www.w3.org/TR/css-backgrounds-3/#typedef-repeat-style" id="ref-for-typedef-repeat-style①"><repeat-style></a> <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-any" id="ref-for-comb-any③">||</a> <a class="production" data-link-type="type" href="#typedef-geometry-box" id="ref-for-typedef-geometry-box②"><geometry-box></a> <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-any" id="ref-for-comb-any④">||</a> [ <a class="production" data-link-type="type" href="#typedef-geometry-box" id="ref-for-typedef-geometry-box③"><geometry-box></a> <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one①④">|</a> no-clip ] <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-any" id="ref-for-comb-any⑤">||</a> <a class="production" data-link-type="type" href="#typedef-compositing-operator" id="ref-for-typedef-compositing-operator①"><compositing-operator></a> <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-any" id="ref-for-comb-any⑥">||</a> <a class="production" data-link-type="type" href="#typedef-masking-mode" id="ref-for-typedef-masking-mode①"><masking-mode></a> </pre> If one <a class="production css" data-link-type="type" href="#typedef-geometry-box" id="ref-for-typedef-geometry-box④"><geometry-box></a> value and the <a class="css" data-link-type="maybe" href="#valdef-mask-clip-no-clip" id="ref-for-valdef-mask-clip-no-clip">no-clip</a> keyword are present then <geometry-box> sets <a class="property css" data-link-type="property" href="#propdef-mask-origin" id="ref-for-propdef-mask-origin⑤">mask-origin</a> and no-clip sets <a class="property css" data-link-type="property" href="#propdef-mask-clip" id="ref-for-propdef-mask-clip⑤">mask-clip</a> to that value. If one <a class="production css" data-link-type="type" href="#typedef-geometry-box" id="ref-for-typedef-geometry-box⑥"><geometry-box></a> value and no <a class="css" data-link-type="maybe" href="#valdef-mask-clip-no-clip" id="ref-for-valdef-mask-clip-no-clip②">no-clip</a> keyword are present then <geometry-box> sets both <a class="property css" data-link-type="property" href="#propdef-mask-origin" id="ref-for-propdef-mask-origin⑥">mask-origin</a> and <a class="property css" data-link-type="property" href="#propdef-mask-clip" id="ref-for-propdef-mask-clip⑥">mask-clip</a> to that value. If two <a class="production css" data-link-type="type" href="#typedef-geometry-box" id="ref-for-typedef-geometry-box⑧"><geometry-box></a> values are present, then the first sets <a class="property css" data-link-type="property" href="#propdef-mask-origin" id="ref-for-propdef-mask-origin⑦">mask-origin</a> and the second <a class="property css" data-link-type="property" href="#propdef-mask-clip" id="ref-for-propdef-mask-clip⑦">mask-clip</a>. The <a data-link-type="dfn" href="https://www.w3.org/TR/css-cascade-5/#used-value" id="ref-for-used-value④">used value</a> of the properties <a class="property css" data-link-type="property" href="#propdef-mask-repeat" id="ref-for-propdef-mask-repeat②">mask-repeat</a>, <a class="property css" data-link-type="property" href="#propdef-mask-position" id="ref-for-propdef-mask-position④">mask-position</a>, <a class="property css" data-link-type="property" href="#propdef-mask-clip" id="ref-for-propdef-mask-clip⑧">mask-clip</a>, <a class="property css" data-link-type="property" href="#propdef-mask-origin" id="ref-for-propdef-mask-origin⑧">mask-origin</a> and <a class="property css" data-link-type="property" href="#propdef-mask-size" id="ref-for-propdef-mask-size③">mask-size</a> must have no effect if <a class="production css" data-link-type="type" href="#typedef-mask-reference" id="ref-for-typedef-mask-reference⑦"><mask-reference></a> references a <a data-link-type="element" href="#elementdef-mask" id="ref-for-elementdef-mask①①">mask</a> element. In this case the element defines position, sizing and clipping of the <a data-link-type="dfn" href="#mask-layer-image" id="ref-for-mask-layer-image①⑤">mask layer image</a>. The <a class="property css" data-link-type="property" href="#propdef-mask" id="ref-for-propdef-mask③">mask</a> shorthand also resets <a class="property css" data-link-type="property" href="#propdef-mask-border" id="ref-for-propdef-mask-border②">mask-border</a> to its initial value. It is therefore recommended that authors use the mask shorthand, rather than other shorthands or the individual properties, to override any mask settings earlier in the cascade. This will ensure that mask-border has also been reset to allow the new styles to take effect. <h3 class="heading settled" data-level="7.10" id="the-mask-image-rendering-model">7.10. The Mask Image Rendering Model<a class="self-link" href="#the-mask-image-rendering-model"></a></h3> The application of the <a class="property css" data-link-type="property" href="#propdef-mask-image" id="ref-for-propdef-mask-image①①">mask-image</a> property with a value other than none to an element formatted with the CSS box model establishes a <a data-link-type="dfn" href="https://www.w3.org/TR/CSS21/visuren.html#x43" id="ref-for-x43③">stacking context</a> in the same way that CSS <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-color-4/#propdef-opacity" id="ref-for-propdef-opacity③">opacity</a> <a data-link-type="biblio" href="#biblio-css3color" title="CSS Color Module Level 3">[CSS3COLOR]</a> does, and all the element’s descendants are rendered together as a group with the masking applied to the group as a whole. The <a class="property css" data-link-type="property" href="#propdef-mask-image" id="ref-for-propdef-mask-image①②">mask-image</a> property has no effect on the geometry or hit-testing of any element’s CSS boxes. The <a class="property css" data-link-type="property" href="#propdef-mask" id="ref-for-propdef-mask⑤">mask</a> property is a <a href="https://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermPresentationAttribute">presentation attribute</a> for SVG elements. <h4 class="heading settled" data-level="7.10.1" id="MaskValues">7.10.1. Mask processing<a class="self-link" href="#MaskValues"></a></h4> In the following section, <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="mask-image">mask image</dfn> refers either to a <a data-link-type="dfn" href="#mask-layer-image" id="ref-for-mask-layer-image①⑥">mask layer image</a> or to a <a data-link-type="dfn" href="#mask-border-image" id="ref-for-mask-border-image①">mask border image</a>. A mask image may be interpreted using one of two different methods with regards to calculating the mask values that will be multiplied with the target alpha values. The first and simplest method of calculating the mask values is to use the alpha channel of the <a data-link-type="dfn" href="#mask-image" id="ref-for-mask-image">mask image</a>. In this case the mask value at a given point is simply the value of the alpha channel at that point. The color channels do not contribute to the mask value. The second method of calculating the mask values is to use the luminance of the mask image. In this case the mask value at a given point is computed from the color channel values and alpha channel value using the following procedure. <ol> <li data-md> Compute a luminance value from the color channel values. <ul> <li data-md> If the computed value of <a class="property css" data-link-type="property" href="https://www.w3.org/TR/SVG2/painting.html#ColorInterpolationProperty" id="ref-for-ColorInterpolationProperty①">color-interpolation</a> on the <a data-link-type="element" href="#elementdef-mask" id="ref-for-elementdef-mask①②">mask</a> element is <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/filter-effects-1/#valdef-color-interpolation-filters-linearrgb" id="ref-for-valdef-color-interpolation-filters-linearrgb">linearRGB</a>, convert the original image color values (potentially in the sRGB color space) to the linearRGB color space. <li data-md> Then, using non-premultiplied RGB color values, apply the luminance-to-alpha coefficients (as defined in the <a data-link-type="element" href="https://www.w3.org/TR/filter-effects-1/#elementdef-fecolormatrix" id="ref-for-elementdef-fecolormatrix">feColorMatrix</a> filter primitive <a data-link-type="biblio" href="#biblio-svg11" title="Scalable Vector Graphics (SVG) 1.1 (Second Edition)">[SVG11]</a>) to convert the RGB color values to luminance values. </ul> <li data-md> Multiply the computed luminance value by the corresponding alpha value to produce the mask value. </ol> Regardless of the method used, the procedure for calculating mask values assumes the content of the mask is a four-channel RGBA graphics object. For other types of graphics objects, special handling is required as follows. For a three-channel RGB graphics object that is used in a mask (e.g., when referencing a three-channel image file), the effect is as if the object were converted into a four-channel RGBA image with the alpha channel uniformly set to 1. For a single-channel image that is used in a mask (e.g., when referencing a single-channel grayscale image file), the effect is as if the object were converted into a four-channel RGBA image, where the single channel from the referenced object is used to compute the three color channels and the alpha channel is uniformly set to 1. Note: When referencing a grayscale image file, the transfer curve relating the encoded grayscale values to linear light values must be taken into account when computing the color channels. Note: SVG <a data-link-type="dfn" href="https://www.w3.org/TR/SVG2/struct.html#graphics-element" id="ref-for-graphics-element①⑤">graphics elements</a> (e.g., <a data-link-type="element" href="https://www.w3.org/TR/SVG2/shapes.html#elementdef-circle" id="ref-for-elementdef-circle②">circle</a> or <a data-link-type="element" href="https://www.w3.org/TR/SVG2/text.html#elementdef-text" id="ref-for-elementdef-text③">text</a>) are all treated as four-channel RGBA images for the purposes of masking operations. The effect of a mask is identical to what would have happened if there were no mask but instead the alpha channel of the given object were multiplied with the mask’s resulting mask values. Regions not covered by a <a data-link-type="dfn" href="#mask-image" id="ref-for-mask-image①">mask image</a> are treated as transparent black. The mask value is 0. Note: Masks with repeating <a data-link-type="dfn" href="#mask-image" id="ref-for-mask-image②">mask image</a> tiles may have an offset to each other. The space between the mask images is treated as a transparent black mask. <h4 class="heading settled" data-level="7.10.2" id="layering">7.10.2. Layering Multiple Mask Images<a class="self-link" href="#layering"></a></h4> The mask of a box can have multiple layers. The number of layers is determined by the number of comma-separated values for the <a class="property css" data-link-type="property" href="#propdef-mask-image" id="ref-for-propdef-mask-image①③">mask-image</a> property. A value of none in a list of values with other <a class="production css" data-link-type="type" href="#typedef-mask-reference" id="ref-for-typedef-mask-reference⑧"><mask-reference></a>s still creates a layer. See <a href="https://www.w3.org/TR/css3-background/#layering">Layering Multiple Background Images</a> <a data-link-type="biblio" href="#biblio-css3bg" title="CSS Backgrounds and Borders Module Level 3">[CSS3BG]</a>. <a class="property css" data-link-type="property" href="#propdef-mask-mode" id="ref-for-propdef-mask-mode⑥">mask-mode</a> and <a class="property css" data-link-type="property" href="#propdef-mask-composite" id="ref-for-propdef-mask-composite④">mask-composite</a> do not have counterparts in CSS Backgrounds and Borders <a data-link-type="biblio" href="#biblio-css3bg" title="CSS Backgrounds and Borders Module Level 3">[CSS3BG]</a>. Just like for the mask properties that do have a counterpart, the list of values are matched up from the first value: excess values at the end are not used. If a property doesn’t have enough comma-separated values to match the number of layers, the UA must calculate its used value by repeating the list of values until there are enough. All <a data-link-type="dfn" href="#mask-layer-image" id="ref-for-mask-layer-image①⑦">mask layer images</a> are transformed to alpha masks (if necessary see <a href="#MaskValues">Mask processing</a>) and combined by compositing taking the compositing operators specified by <a class="property css" data-link-type="property" href="#propdef-mask-composite" id="ref-for-propdef-mask-composite⑤">mask-composite</a> into account. <h2 class="heading settled" data-level="8" id="mask-borders">8. Border-Box Mask<a class="self-link" href="#mask-borders"></a></h2> With <a class="property css" data-link-type="property" href="#propdef-mask-border" id="ref-for-propdef-mask-border④">mask-border</a> an image can be split into nine pieces: four corners, four edges and the middle piece as demonstrated in the figure below. <div class="figure"> <img alt="pieces of a mask border image" src="images/mask-box-image-mask.svg" width="240"> Pieces of a <a data-link-type="dfn" href="#mask-border-image" id="ref-for-mask-border-image②">mask border image</a>. </div> These pieces may be sliced, scaled and stretched in various ways to fit the size of the <a data-link-type="dfn" href="#mask-border-image-area" id="ref-for-mask-border-image-area②">mask border image area</a>. This distorted image is then used as a mask. The syntax of <a class="property css" data-link-type="property" href="#propdef-mask-border" id="ref-for-propdef-mask-border⑤">mask-border</a> corresponds to the <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-backgrounds-3/#propdef-border-image" id="ref-for-propdef-border-image">border-image</a> property of CSS Background and Borders <a data-link-type="biblio" href="#biblio-css3bg" title="CSS Backgrounds and Borders Module Level 3">[CSS3BG]</a>. <div class="example" id="example-f8023813"> <a class="self-link" href="#example-f8023813"></a> The <a data-link-type="dfn" href="#mask-border-image" id="ref-for-mask-border-image③">mask border image</a> in the following example is split into four corners with dimensions of 75 pixels, four edges and the middle piece that is stretched and scaled. <div class="figure"> <img alt="Example for 'mask-border'" height="240" src="images/mask-box-image.svg" width="720"> Example for <a class="property css" data-link-type="property" href="#propdef-mask-border" id="ref-for-propdef-mask-border⑥">mask-border</a>. The object on the left is the object to mask. The second image is the alpha mask and the last image the masked object. </div> <pre><code class="highlight">div <c- p>{</c-> <c- k>background</c-><c- p>:</c-> <c- nf>linear-gradient</c-><c- p>(</c->bottom<c- p>,</c-> #F27BAA <c- m>0</c-><c- k>%</c-><c- p>,</c-> #FCC8AD <c- m>100</c-><c- k>%</c-><c- p>);</c-> <c- k>mask-border-slice</c-><c- p>:</c-> <c- m>25</c-> fill<c- p>;</c-> <c- k>mask-border-repeat</c-><c- p>:</c-> stretch<c- p>;</c-> <c- k>mask-border-source</c-><c- p>:</c-> <c- nf>url</c-><c- p>(</c-><c- s>mask.png</c-><c- p>);</c-> <c- p>}</c-> </code></pre> </div> <h3 class="heading settled" data-level="8.1" id="the-mask-border-source">8.1. Mask Border Image Source: the <a class="property css" data-link-type="property" href="#propdef-mask-border-source" id="ref-for-propdef-mask-border-source⑥">mask-border-source</a> property<a class="self-link" href="#the-mask-border-source"></a></h3> <table class="def propdef" data-link-for-hint="mask-border-source"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-mask-border-source">mask-border-source</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod">none <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one①⑤">|</a> <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-images-3/#typedef-image" id="ref-for-typedef-image④"><image></a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>none <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td>All elements. In SVG, it applies to <a data-link-type="dfn" href="https://www.w3.org/TR/SVG2/struct.html#container-element" id="ref-for-container-element①①">container elements</a> excluding the <a data-link-type="element" href="https://www.w3.org/TR/SVG2/struct.html#elementdef-defs" id="ref-for-elementdef-defs①⓪">defs</a> element, all <a data-link-type="dfn" href="https://www.w3.org/TR/SVG2/struct.html#graphics-element" id="ref-for-graphics-element①⑥">graphics elements</a> and the <a data-link-type="element" href="https://www.w3.org/TR/SVG2/struct.html#elementdef-use" id="ref-for-elementdef-use①③">use</a> element <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>no <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>n/a <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>they keyword none or the computed <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-images-3/#typedef-image" id="ref-for-typedef-image⑤"><image></a> <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar <tr> <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> <td>discrete <tr> <th>Media: <td>visual </table> Specifies an image to be used as <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="mask-border-image">mask border image</dfn>. An image that is an empty image (zero width or zero height), that fails to download, is non-existent, or that cannot be displayed (e.g. because it is not in a supported image format) is ignored. It still counts as an <a data-link-type="dfn" href="#mask-border-image" id="ref-for-mask-border-image④">mask border image</a> but does not mask the element. See “<a href="#MaskValues">Mask processing</a>” on how to process the <a data-link-type="dfn" href="#mask-border-image" id="ref-for-mask-border-image⑤">mask border image</a>. A computed value of other than none results in the creation of a <a data-link-type="dfn" href="https://www.w3.org/TR/CSS21/visuren.html#x43" id="ref-for-x43④">stacking context</a> <a data-link-type="biblio" href="#biblio-css21" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS21]</a> the same way that CSS <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-color-4/#propdef-opacity" id="ref-for-propdef-opacity④">opacity</a> <a data-link-type="biblio" href="#biblio-css3color" title="CSS Color Module Level 3">[CSS3COLOR]</a> does for values other than 1. <a class="property css" data-link-type="property" href="#propdef-mask-border-source" id="ref-for-propdef-mask-border-source⑦">mask-border-source</a> and <a class="property css" data-link-type="property" href="#propdef-mask-image" id="ref-for-propdef-mask-image①④">mask-image</a> can be specified independent of each other. If both properties have a value other than none, the element is masked by both masking operations one after the other. Note: It does not matter if <a class="property css" data-link-type="property" href="#propdef-mask-image" id="ref-for-propdef-mask-image①⑤">mask-image</a> is applied to the element before or after <a class="property css" data-link-type="property" href="#propdef-mask-border-source" id="ref-for-propdef-mask-border-source⑧">mask-border-source</a>. Both operation orders result in the same rendering. <h3 class="heading settled" data-level="8.2" id="the-mask-border-mode">8.2. Mask Border Image Interpretation: the <a class="property css" data-link-type="property" href="#propdef-mask-border-mode" id="ref-for-propdef-mask-border-mode">mask-border-mode</a> property<a class="self-link" href="#the-mask-border-mode"></a></h3> <table class="def propdef" data-link-for-hint="mask-border-mode"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-mask-border-mode">mask-border-mode</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod">luminance <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one①⑥">|</a> alpha <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>alpha <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td>All elements. In SVG, it applies to <a data-link-type="dfn" href="https://www.w3.org/TR/SVG2/struct.html#container-element" id="ref-for-container-element①②">container elements</a> excluding the <a data-link-type="element" href="https://www.w3.org/TR/SVG2/struct.html#elementdef-defs" id="ref-for-elementdef-defs①①">defs</a> element, all <a data-link-type="dfn" href="https://www.w3.org/TR/SVG2/struct.html#graphics-element" id="ref-for-graphics-element①⑦">graphics elements</a> and the <a data-link-type="element" href="https://www.w3.org/TR/SVG2/struct.html#elementdef-use" id="ref-for-elementdef-use①④">use</a> element <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>no <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>n/a <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>as specified <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar <tr> <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> <td>discrete <tr> <th>Media: <td>visual </table> The <a class="property css" data-link-type="property" href="#propdef-mask-border-mode" id="ref-for-propdef-mask-border-mode①">mask-border-mode</a> property indicates whether the <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-images-3/#typedef-image" id="ref-for-typedef-image⑥"><image></a> value for <a class="property css" data-link-type="property" href="#propdef-mask-border-source" id="ref-for-propdef-mask-border-source⑨">mask-border-source</a> is treated as luminance mask or alpha mask. (See <a href="#MaskValues">Mask processing</a>.) Values have the following meanings: <div> <dl> <dt data-md><dfn class="dfn-paneled css" data-dfn-for="mask-border-mode" data-dfn-type="value" data-export id="valdef-mask-border-mode-alpha">alpha</dfn> <dd data-md> A value of <a class="css" data-link-type="maybe" href="#valdef-mask-border-mode-alpha" id="ref-for-valdef-mask-border-mode-alpha">alpha</a> indicates that the alpha values of the <a data-link-type="dfn" href="#mask-border-image" id="ref-for-mask-border-image⑥">mask border image</a> should be used as the mask values. See <a href="#MaskValues">Calculating mask values</a>. <dt data-md><dfn class="dfn-paneled css" data-dfn-for="mask-border-mode" data-dfn-type="value" data-export id="valdef-mask-border-mode-luminance">luminance</dfn> <dd data-md> A value of <a class="css" data-link-type="maybe" href="#valdef-mask-border-mode-luminance" id="ref-for-valdef-mask-border-mode-luminance">luminance</a> indicates that the luminance values of the <a data-link-type="dfn" href="#mask-border-image" id="ref-for-mask-border-image⑦">mask border image</a> should be used as the mask values. See <a href="#MaskValues">Calculating mask values</a>. </dl> </div> The <a class="property css" data-link-type="property" href="#propdef-mask-mode" id="ref-for-propdef-mask-mode⑦">mask-mode</a> and <a class="property css" data-link-type="property" href="#propdef-mask-type" id="ref-for-propdef-mask-type③">mask-type</a> properties must have no affect on the <a data-link-type="dfn" href="#mask-border-image" id="ref-for-mask-border-image⑧">mask border image</a> type. <h3 class="heading settled" data-level="8.3" id="the-mask-border-slice">8.3. Mask Border Image Slicing: the <a class="property css" data-link-type="property" href="#propdef-mask-border-slice" id="ref-for-propdef-mask-border-slice">mask-border-slice</a> property<a class="self-link" href="#the-mask-border-slice"></a></h3> <table class="def propdef" data-link-for-hint="mask-border-slice"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-mask-border-slice">mask-border-slice</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod">[ <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#number-value" id="ref-for-number-value"><number></a> <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one①⑦">|</a> <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#percentage-value" id="ref-for-percentage-value"><percentage></a> ]<a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-num-range" id="ref-for-mult-num-range">{1,4}</a> fill<a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-opt" id="ref-for-mult-opt①">?</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>0 <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td>All elements. In SVG, it applies to <a data-link-type="dfn" href="https://www.w3.org/TR/SVG2/struct.html#container-element" id="ref-for-container-element①③">container elements</a> excluding the <a data-link-type="element" href="https://www.w3.org/TR/SVG2/struct.html#elementdef-defs" id="ref-for-elementdef-defs①②">defs</a> element, all <a data-link-type="dfn" href="https://www.w3.org/TR/SVG2/struct.html#graphics-element" id="ref-for-graphics-element①⑧">graphics elements</a> and the <a data-link-type="element" href="https://www.w3.org/TR/SVG2/struct.html#elementdef-use" id="ref-for-elementdef-use①⑤">use</a> element <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>no <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>refer to size of the <a data-link-type="dfn" href="#mask-border-image" id="ref-for-mask-border-image⑨">mask border image</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>as specified <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar <tr> <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> <td>discrete <tr> <th>Media: <td>visual </table> This property specifies inward offsets from the top, right, bottom, and left edges of the <a data-link-type="dfn" href="#mask-border-image" id="ref-for-mask-border-image①⓪">mask border image</a>, dividing it into nine regions: four corners, four edges and a middle. The middle image part is discarded and treated as fully opaque white (the content covered by the middle part is not masked and shines through) unless the <dfn class="dfn-paneled css" data-dfn-for="mask-border-slice" data-dfn-type="value" data-export id="valdef-mask-border-slice-fill">fill</dfn> keyword is present. See the <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-backgrounds-3/#propdef-border-image-slice" id="ref-for-propdef-border-image-slice">border-image-slice</a> property <a data-link-type="biblio" href="#biblio-css3bg" title="CSS Backgrounds and Borders Module Level 3">[CSS3BG]</a> for the definitions of the property values. <h3 class="heading settled" data-level="8.4" id="the-mask-border-width">8.4. Masking Areas: the <a class="property css" data-link-type="property" href="#propdef-mask-border-width" id="ref-for-propdef-mask-border-width">mask-border-width</a> property<a class="self-link" href="#the-mask-border-width"></a></h3> <table class="def propdef" data-link-for-hint="mask-border-width"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-mask-border-width">mask-border-width</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod">[ <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage"><length-percentage></a> <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one①⑧">|</a> <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#number-value" id="ref-for-number-value①"><number></a> | auto ]<a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-num-range" id="ref-for-mult-num-range①">{1,4}</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>auto <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td>All elements. In SVG, it applies to <a data-link-type="dfn" href="https://www.w3.org/TR/SVG2/struct.html#container-element" id="ref-for-container-element①④">container elements</a> excluding the <a data-link-type="element" href="https://www.w3.org/TR/SVG2/struct.html#elementdef-defs" id="ref-for-elementdef-defs①③">defs</a> element, all <a data-link-type="dfn" href="https://www.w3.org/TR/SVG2/struct.html#graphics-element" id="ref-for-graphics-element①⑨">graphics elements</a> and the <a data-link-type="element" href="https://www.w3.org/TR/SVG2/struct.html#elementdef-use" id="ref-for-elementdef-use①⑥">use</a> element <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>no <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>relative to width/height of the <a data-link-type="dfn" href="#mask-border-image-area" id="ref-for-mask-border-image-area③">mask border image area</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>all <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#length-value" id="ref-for-length-value①"><length></a>s made absolute, otherwise as specified <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar <tr> <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> <td>discrete <tr> <th>Media: <td>visual </table> The <a data-link-type="dfn" href="#mask-border-image" id="ref-for-mask-border-image①①">mask border image</a> is drawn inside an area called the <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="mask-border-image-area">mask border image area</dfn>. This is an area whose boundaries by default correspond to the border box, see <a class="property css" data-link-type="property" href="#propdef-mask-border-outset" id="ref-for-propdef-mask-border-outset">mask-border-outset</a>. See the <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-backgrounds-3/#propdef-border-image-width" id="ref-for-propdef-border-image-width">border-image-width</a> property <a data-link-type="biblio" href="#biblio-css3bg" title="CSS Backgrounds and Borders Module Level 3">[CSS3BG]</a> for the definitions of the property values. Note: For SVG elements without an associated layout box the <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-backgrounds-3/#propdef-border-width" id="ref-for-propdef-border-width">border-width</a> is considered to be 0. <h3 class="heading settled" data-level="8.5" id="the-mask-border-outset">8.5. Edge Overhang: the <a class="property css" data-link-type="property" href="#propdef-mask-border-outset" id="ref-for-propdef-mask-border-outset①">mask-border-outset</a> property<a class="self-link" href="#the-mask-border-outset"></a></h3> <table class="def propdef" data-link-for-hint="mask-border-outset"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-mask-border-outset">mask-border-outset</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod">[ <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#length-value" id="ref-for-length-value②"><length></a> <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one②⓪">|</a> <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#number-value" id="ref-for-number-value②"><number></a> ]<a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-num-range" id="ref-for-mult-num-range②">{1,4}</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>0 <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td>All elements. In SVG, it applies to <a data-link-type="dfn" href="https://www.w3.org/TR/SVG2/struct.html#container-element" id="ref-for-container-element①⑤">container elements</a> excluding the <a data-link-type="element" href="https://www.w3.org/TR/SVG2/struct.html#elementdef-defs" id="ref-for-elementdef-defs①④">defs</a> element, all <a data-link-type="dfn" href="https://www.w3.org/TR/SVG2/struct.html#graphics-element" id="ref-for-graphics-element②⓪">graphics elements</a> and the <a data-link-type="element" href="https://www.w3.org/TR/SVG2/struct.html#elementdef-use" id="ref-for-elementdef-use①⑦">use</a> element <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>no <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>n/a <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>all <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#length-value" id="ref-for-length-value③"><length></a>s made absolute, otherwise as specified <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar <tr> <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> <td>discrete <tr> <th>Media: <td>visual </table> The values specify the amount by which the <a data-link-type="dfn" href="#mask-border-image-area" id="ref-for-mask-border-image-area④">mask border image area</a> extends beyond the border box. If it has four values, they set the outsets on the top, right, bottom and left sides in that order. If the left is missing, it is the same as the right; if the bottom is missing, it is the same as the top; if the right is missing, it is the same as the top. As with <a class="property css" data-link-type="property" href="#propdef-mask-border-width" id="ref-for-propdef-mask-border-width①">mask-border-width</a>, a <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#number-value" id="ref-for-number-value③"><number></a> represents a multiple of the corresponding <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-backgrounds-3/#propdef-border-width" id="ref-for-propdef-border-width①">border-width</a>. Negative values are not allowed for any of the <a class="property css" data-link-type="property" href="#propdef-mask-border-outset" id="ref-for-propdef-mask-border-outset②">mask-border-outset</a> values. Note: For SVG elements without associated layout box the <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-backgrounds-3/#propdef-border-width" id="ref-for-propdef-border-width②">border-width</a> is considered to be 0. <h3 class="heading settled" data-level="8.6" id="the-mask-border-repeat">8.6. Mask Border Image Tiling: the <a class="property css" data-link-type="property" href="#propdef-mask-border-repeat" id="ref-for-propdef-mask-border-repeat">mask-border-repeat</a> property<a class="self-link" href="#the-mask-border-repeat"></a></h3> <table class="def propdef" data-link-for-hint="mask-border-repeat"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-mask-border-repeat">mask-border-repeat</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod">[ stretch <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one②①">|</a> repeat | round | space ]<a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-num-range" id="ref-for-mult-num-range③">{1,2}</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>stretch <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td>All elements. In SVG, it applies to <a data-link-type="dfn" href="https://www.w3.org/TR/SVG2/struct.html#container-element" id="ref-for-container-element①⑥">container elements</a> excluding the <a data-link-type="element" href="https://www.w3.org/TR/SVG2/struct.html#elementdef-defs" id="ref-for-elementdef-defs①⑤">defs</a> element, all <a data-link-type="dfn" href="https://www.w3.org/TR/SVG2/struct.html#graphics-element" id="ref-for-graphics-element②①">graphics elements</a> and the <a data-link-type="element" href="https://www.w3.org/TR/SVG2/struct.html#elementdef-use" id="ref-for-elementdef-use①⑧">use</a> element <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>no <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>n/a <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>as specified <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar <tr> <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> <td>discrete <tr> <th>Media: <td>visual </table> This property specifies how the images for the sides and the middle part of the <a data-link-type="dfn" href="#mask-border-image" id="ref-for-mask-border-image①②">mask border image</a> are scaled and tiled. The first keyword applies to the horizontal sides, the second to the vertical ones. If the second keyword is absent, it is assumed to be the same as the first. See the <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-backgrounds-3/#propdef-border-image-repeat" id="ref-for-propdef-border-image-repeat">border-image-repeat</a> property <a data-link-type="biblio" href="#biblio-css3bg" title="CSS Backgrounds and Borders Module Level 3">[CSS3BG]</a> for the definitions of the property values. The exact process for scaling and tiling the <a data-link-type="dfn" href="#mask-border-image" id="ref-for-mask-border-image①③">mask border image</a> parts is given in the section <a href="#masking-with-the-mask-border-image">Masking with the mask border image</a> <h3 class="heading settled" data-level="8.7" id="the-mask-border">8.7. Mask Border Image Shorthand: the <a class="property css" data-link-type="property" href="#propdef-mask-border" id="ref-for-propdef-mask-border⑦">mask-border</a> property<a class="self-link" href="#the-mask-border"></a></h3> <table class="def propdef" data-link-for-hint="mask-border"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-mask-border">mask-border</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod"><a class="production css" data-link-type="property" href="#propdef-mask-border-source" id="ref-for-propdef-mask-border-source①⓪"><'mask-border-source'></a> <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-any" id="ref-for-comb-any⑦">||</a> <a class="production css" data-link-type="property" href="#propdef-mask-border-slice" id="ref-for-propdef-mask-border-slice①"><'mask-border-slice'></a> [ / <a class="production css" data-link-type="property" href="#propdef-mask-border-width" id="ref-for-propdef-mask-border-width②"><'mask-border-width'></a><a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#mult-opt" id="ref-for-mult-opt②">?</a> [ / <a class="production css" data-link-type="property" href="#propdef-mask-border-outset" id="ref-for-propdef-mask-border-outset③"><'mask-border-outset'></a> ]? ]? || <a class="production css" data-link-type="property" href="#propdef-mask-border-repeat" id="ref-for-propdef-mask-border-repeat①"><'mask-border-repeat'></a> || <a class="production css" data-link-type="property" href="#propdef-mask-border-mode" id="ref-for-propdef-mask-border-mode②"><'mask-border-mode'></a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>See individual properties <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td>See individual properties <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>no <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>n/a <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>See individual properties <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar <tr> <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> <td>See individual properties <tr> <th>Media: <td>visual </table> This is a shorthand property for setting <a class="property css" data-link-type="property" href="#propdef-mask-border-source" id="ref-for-propdef-mask-border-source①①">mask-border-source</a>, <a class="property css" data-link-type="property" href="#propdef-mask-border-slice" id="ref-for-propdef-mask-border-slice②">mask-border-slice</a>, <a class="property css" data-link-type="property" href="#propdef-mask-border-width" id="ref-for-propdef-mask-border-width③">mask-border-width</a>, <a class="property css" data-link-type="property" href="#propdef-mask-border-outset" id="ref-for-propdef-mask-border-outset④">mask-border-outset</a>, <a class="property css" data-link-type="property" href="#propdef-mask-border-repeat" id="ref-for-propdef-mask-border-repeat②">mask-border-repeat</a> and <a class="property css" data-link-type="property" href="#propdef-mask-border-mode" id="ref-for-propdef-mask-border-mode③">mask-border-mode</a>. Omitted values are set to their initial values. Note: The <a class="property css" data-link-type="property" href="#propdef-mask" id="ref-for-propdef-mask⑥">mask</a> shorthand resets the properties <a class="property css" data-link-type="property" href="#propdef-mask-border" id="ref-for-propdef-mask-border⑧">mask-border</a>, <a class="property css" data-link-type="property" href="#propdef-mask-border-source" id="ref-for-propdef-mask-border-source①②">mask-border-source</a>, <a class="property css" data-link-type="property" href="#propdef-mask-border-slice" id="ref-for-propdef-mask-border-slice③">mask-border-slice</a>, <a class="property css" data-link-type="property" href="#propdef-mask-border-width" id="ref-for-propdef-mask-border-width④">mask-border-width</a>, <a class="property css" data-link-type="property" href="#propdef-mask-border-outset" id="ref-for-propdef-mask-border-outset⑤">mask-border-outset</a>, <a class="property css" data-link-type="property" href="#propdef-mask-border-repeat" id="ref-for-propdef-mask-border-repeat③">mask-border-repeat</a> and <a class="property css" data-link-type="property" href="#propdef-mask-border-mode" id="ref-for-propdef-mask-border-mode④">mask-border-mode</a>. <h3 class="heading settled" data-level="8.8" id="masking-with-the-mask-border-image">8.8. Masking with the mask border image<a class="self-link" href="#masking-with-the-mask-border-image"></a></h3> After the <a data-link-type="dfn" href="#mask-border-image" id="ref-for-mask-border-image①④">mask border image</a> given by <a class="property css" data-link-type="property" href="#propdef-mask-border-source" id="ref-for-propdef-mask-border-source①③">mask-border-source</a> is sliced by the <a class="property css" data-link-type="property" href="#propdef-mask-border-slice" id="ref-for-propdef-mask-border-slice④">mask-border-slice</a> values, the resulting nine images are scaled, positioned, and tiled into their corresponding mask border image regions in four steps as described in the section <a href="https://www.w3.org/TR/css3-background/#border-image-process">Drawing the Border Image</a> <a data-link-type="biblio" href="#biblio-css3bg" title="CSS Backgrounds and Borders Module Level 3">[CSS3BG]</a>. The application of the <a class="property css" data-link-type="property" href="#propdef-mask-border-source" id="ref-for-propdef-mask-border-source①④">mask-border-source</a> property to an element formatted with the CSS box model establishes a <a data-link-type="dfn" href="https://www.w3.org/TR/CSS21/visuren.html#x43" id="ref-for-x43⑤">stacking context</a> in the same way that CSS <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-color-4/#propdef-opacity" id="ref-for-propdef-opacity⑤">opacity</a> <a data-link-type="biblio" href="#biblio-css3color" title="CSS Color Module Level 3">[CSS3COLOR]</a> does, and all the element’s descendants are rendered together as a group with the masking applied to the group as a whole. The <a class="property css" data-link-type="property" href="#propdef-mask-border-source" id="ref-for-propdef-mask-border-source①⑤">mask-border-source</a> property has no effect on the geometry or hit-testing of any element’s CSS boxes. <h2 class="heading settled" data-level="9" id="svg-masks">9. SVG Mask Sources<a class="self-link" href="#svg-masks"></a></h2> <h3 class="heading settled" data-level="9.1" id="MaskElement">9.1. The <a data-link-type="element" href="#elementdef-mask" id="ref-for-elementdef-mask①③">mask</a> element<a class="self-link" href="#MaskElement"></a></h3> <table class="definition-table"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled" data-dfn-type="element" data-export id="elementdef-mask"><code>mask</code></dfn> <tr> <th>Categories: <td><a data-link-type="dfn" href="https://www.w3.org/TR/SVG2/struct.html#container-element" id="ref-for-container-element①⑦">container elements</a>, <a data-link-type="dfn" href="https://svgwg.org/svg2-draft/render.html#TermNeverRenderedElement" id="ref-for-TermNeverRenderedElement①">never-rendered element</a> <tr> <th>Content model: <td> Any number of the following elements, in any order: <ul class="no-bullets"> <li><a href="https://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermAnimationElement">animation</a> — <a data-link-type="element" href="https://svgwg.org/specs/animations/#elementdef-animate" id="ref-for-elementdef-animate①">animate</a>, <a data-link-type="element">animateColor</a>, <a data-link-type="element" href="https://svgwg.org/specs/animations/#elementdef-animateMotion" id="ref-for-elementdef-animateMotion①">animateMotion</a>, <a data-link-type="element" href="https://svgwg.org/specs/animations/#elementdef-animateTransform" id="ref-for-elementdef-animateTransform①">animateTransform</a>, <a data-link-type="element" href="https://svgwg.org/specs/animations/#elementdef-set" id="ref-for-elementdef-set①">set</a> <li><a href="https://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermDescriptiveElement">descriptive</a> — <a data-link-type="element" href="https://www.w3.org/TR/SVG2/struct.html#elementdef-desc" id="ref-for-elementdef-desc①">desc</a>, <a data-link-type="element" href="https://www.w3.org/TR/SVG2/struct.html#elementdef-title" id="ref-for-elementdef-title①">title</a>, <a data-link-type="element" href="https://www.w3.org/TR/SVG2/struct.html#elementdef-metadata" id="ref-for-elementdef-metadata①">metadata</a> <li><a href="https://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermShapeElement">shape</a> — <a data-link-type="element" href="https://www.w3.org/TR/SVG2/shapes.html#elementdef-circle" id="ref-for-elementdef-circle③">circle</a>, <a data-link-type="element" href="https://www.w3.org/TR/SVG2/shapes.html#elementdef-ellipse" id="ref-for-elementdef-ellipse①">ellipse</a>, <a data-link-type="element" href="https://www.w3.org/TR/SVG2/shapes.html#elementdef-line" id="ref-for-elementdef-line①">line</a>, <a data-link-type="element" href="https://www.w3.org/TR/SVG2/paths.html#elementdef-path" id="ref-for-elementdef-path④">path</a>, <a data-link-type="element" href="https://www.w3.org/TR/SVG2/shapes.html#elementdef-polygon" id="ref-for-elementdef-polygon①">polygon</a>, <a data-link-type="element" href="https://www.w3.org/TR/SVG2/shapes.html#elementdef-polyline" id="ref-for-elementdef-polyline①">polyline</a>, <a data-link-type="element" href="https://www.w3.org/TR/SVG2/shapes.html#elementdef-rect" id="ref-for-elementdef-rect①">rect</a> <li><a href="https://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermStructuralElement">structural</a> — <a data-link-type="element" href="https://www.w3.org/TR/SVG2/struct.html#elementdef-defs" id="ref-for-elementdef-defs①⑥">defs</a>, <a data-link-type="element" href="https://www.w3.org/TR/SVG2/struct.html#elementdef-g" id="ref-for-elementdef-g">g</a>, <a data-link-type="element" href="https://www.w3.org/TR/SVG2/struct.html#elementdef-svg" id="ref-for-elementdef-svg">svg</a>, <a data-link-type="element" href="https://www.w3.org/TR/SVG2/struct.html#elementdef-symbol" id="ref-for-elementdef-symbol">symbol</a>, <a data-link-type="element" href="https://www.w3.org/TR/SVG2/struct.html#elementdef-use" id="ref-for-elementdef-use①⑨">use</a> <li><a href="https://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermGradientElement">gradient</a> — <a data-link-type="element" href="https://www.w3.org/TR/SVG2/pservers.html#elementdef-linearGradient" id="ref-for-elementdef-linearGradient">linearGradient</a>, <a data-link-type="element" href="https://www.w3.org/TR/SVG2/pservers.html#elementdef-radialGradient" id="ref-for-elementdef-radialGradient">radialGradient</a> <li><a data-link-type="element" href="https://www.w3.org/TR/SVG2/linking.html#elementdef-a" id="ref-for-elementdef-a">a</a> <li><a data-link-type="element" href="#elementdef-clippath" id="ref-for-elementdef-clippath③⓪">clipPath</a> <li><a data-link-type="element">color-profile</a> <li><a data-link-type="element">cursor</a> <li><a data-link-type="element" href="https://www.w3.org/TR/filter-effects-1/#elementdef-filter" id="ref-for-elementdef-filter">filter</a> <li><a data-link-type="element">font</a> <li><a data-link-type="element">font-face</a> <li><a data-link-type="element" href="https://www.w3.org/TR/SVG2/embedded.html#elementdef-foreignObject" id="ref-for-elementdef-foreignObject">foreignObject</a> <li><a data-link-type="element" href="https://www.w3.org/TR/SVG2/embedded.html#elementdef-image" id="ref-for-elementdef-image">image</a> <li><a data-link-type="element" href="https://www.w3.org/TR/SVG2/painting.html#elementdef-marker" id="ref-for-elementdef-marker">marker</a> <li><a data-link-type="element" href="#elementdef-mask" id="ref-for-elementdef-mask①④">mask</a> <li><a data-link-type="element" href="https://www.w3.org/TR/SVG2/pservers.html#elementdef-pattern" id="ref-for-elementdef-pattern">pattern</a> <li><a data-link-type="element" href="https://www.w3.org/TR/SVG2/interact.html#elementdef-script" id="ref-for-elementdef-script①">script</a> <li><a data-link-type="element" href="https://www.w3.org/TR/SVG2/styling.html#elementdef-style" id="ref-for-elementdef-style">style</a> <li><a data-link-type="element" href="https://www.w3.org/TR/SVG2/struct.html#elementdef-switch" id="ref-for-elementdef-switch">switch</a> <li><a data-link-type="element" href="https://www.w3.org/TR/SVG2/linking.html#elementdef-view" id="ref-for-elementdef-view">view</a> <li><a data-link-type="element" href="https://www.w3.org/TR/SVG2/text.html#elementdef-text" id="ref-for-elementdef-text④">text</a> <li><a data-link-type="element">altGlyphDef</a> </ul> <tr> <th>Attributes: <td> <ul class="no-bullets"> <li><a href="https://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermConditionalProcessingAttribute">conditional processing attributes</a> — <a href="https://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#RequiredFeaturesAttribute">‘requiredFeatures’</a>, <a href="https://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#RequiredExtensionsAttribute">‘requiredExtensions’</a>, <a href="https://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#SystemLanguageAttribute">‘systemLanguage’</a> <li><a href="https://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermCoreAttributes">core attributes</a> — <a href="https://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#IDAttribute">‘id’</a>, <a href="https://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#XMLBaseAttribute">‘xml:base’</a>, <a href="https://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#XMLLangAttribute">‘xml:lang’</a>, <a href="https://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#XMLSpaceAttribute">‘xml:space’</a> <li><a href="https://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermPresentationAttribute">presentation attributes</a> — <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-inline-3/#propdef-alignment-baseline" id="ref-for-propdef-alignment-baseline①">alignment-baseline</a>, <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-inline-3/#propdef-baseline-shift" id="ref-for-propdef-baseline-shift①">baseline-shift</a>, <a class="property css" data-link-type="property" href="#propdef-clip" id="ref-for-propdef-clip②">clip</a>, <a class="property css" data-link-type="property" href="#propdef-clip-path" id="ref-for-propdef-clip-path①⑤">clip-path</a>, <a class="property css" data-link-type="property" href="#propdef-clip-rule" id="ref-for-propdef-clip-rule⑨">clip-rule</a>, <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-color-4/#propdef-color" id="ref-for-propdef-color①">color</a>, <a class="property css" data-link-type="property" href="https://www.w3.org/TR/SVG2/painting.html#ColorInterpolationProperty" id="ref-for-ColorInterpolationProperty②">color-interpolation</a>, <a class="property css" data-link-type="property" href="https://www.w3.org/TR/filter-effects-1/#propdef-color-interpolation-filters" id="ref-for-propdef-color-interpolation-filters①">color-interpolation-filters</a>, <a class="property css" data-link-type="property">color-profile</a>, <a class="property css" data-link-type="property" href="https://www.w3.org/TR/SVG2/painting.html#ColorRenderingProperty" id="ref-for-ColorRenderingProperty①">color-rendering</a>, <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-ui-4/#propdef-cursor" id="ref-for-propdef-cursor①">cursor</a>, <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-writing-modes-3/#propdef-direction" id="ref-for-propdef-direction①">direction</a>, <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-display-3/#propdef-display" id="ref-for-propdef-display⑤">display</a>, <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-inline-3/#propdef-dominant-baseline" id="ref-for-propdef-dominant-baseline①">dominant-baseline</a>, enable-background, <a class="property css" data-link-type="property" href="https://www.w3.org/TR/SVG2/painting.html#FillProperty" id="ref-for-FillProperty②">fill</a>, <a class="property css" data-link-type="property" href="https://www.w3.org/TR/SVG2/painting.html#FillOpacityProperty" id="ref-for-FillOpacityProperty①">fill-opacity</a>, <a class="property css" data-link-type="property" href="https://www.w3.org/TR/SVG2/painting.html#FillRuleProperty" id="ref-for-FillRuleProperty④">fill-rule</a>, <a class="property css" data-link-type="property" href="https://www.w3.org/TR/filter-effects-1/#propdef-filter" id="ref-for-propdef-filter①">filter</a>, <a class="property css" data-link-type="property" href="https://www.w3.org/TR/filter-effects-1/#propdef-flood-color" id="ref-for-propdef-flood-color①">flood-color</a>, <a class="property css" data-link-type="property" href="https://www.w3.org/TR/filter-effects-1/#propdef-flood-opacity" id="ref-for-propdef-flood-opacity①">flood-opacity</a>, <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-fonts-4/#propdef-font" id="ref-for-propdef-font①">font</a>, <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-fonts-4/#propdef-font-family" id="ref-for-propdef-font-family①">font-family</a>, <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-fonts-4/#propdef-font-size" id="ref-for-propdef-font-size①">font-size</a>, <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-fonts-5/#propdef-font-size-adjust" id="ref-for-propdef-font-size-adjust①">font-size-adjust</a>, <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-fonts-4/#propdef-font-stretch" id="ref-for-propdef-font-stretch①">font-stretch</a>, <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-fonts-4/#propdef-font-style" id="ref-for-propdef-font-style①">font-style</a>, <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-fonts-4/#propdef-font-variant" id="ref-for-propdef-font-variant①">font-variant</a>, <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-fonts-4/#propdef-font-weight" id="ref-for-propdef-font-weight①">font-weight</a>, glyph-orientation-horizontal, <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-writing-modes-4/#propdef-glyph-orientation-vertical" id="ref-for-propdef-glyph-orientation-vertical①">glyph-orientation-vertical</a>, <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-images-3/#propdef-image-rendering" id="ref-for-propdef-image-rendering①">image-rendering</a>, kerning, <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-text-4/#propdef-letter-spacing" id="ref-for-propdef-letter-spacing①">letter-spacing</a>, <a class="property css" data-link-type="property" href="https://www.w3.org/TR/filter-effects-1/#propdef-lighting-color" id="ref-for-propdef-lighting-color①">lighting-color</a>, <a class="property css" data-link-type="property" href="https://www.w3.org/TR/SVG2/painting.html#MarkerProperty" id="ref-for-MarkerProperty①">marker</a>, <a class="property css" data-link-type="property" href="https://www.w3.org/TR/SVG2/painting.html#MarkerEndProperty" id="ref-for-MarkerEndProperty①">marker-end</a>, <a class="property css" data-link-type="property" href="https://www.w3.org/TR/SVG2/painting.html#MarkerMidProperty" id="ref-for-MarkerMidProperty①">marker-mid</a>, <a class="property css" data-link-type="property" href="https://www.w3.org/TR/SVG2/painting.html#MarkerStartProperty" id="ref-for-MarkerStartProperty①">marker-start</a>, <a class="property css" data-link-type="property" href="#propdef-mask" id="ref-for-propdef-mask⑦">mask</a>, <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-color-4/#propdef-opacity" id="ref-for-propdef-opacity⑥">opacity</a>, <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-overflow-3/#propdef-overflow" id="ref-for-propdef-overflow②">overflow</a>, <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-ui-4/#propdef-pointer-events" id="ref-for-propdef-pointer-events②">pointer-events</a>, <a class="property css" data-link-type="property" href="https://www.w3.org/TR/SVG2/painting.html#ShapeRenderingProperty" id="ref-for-ShapeRenderingProperty①">shape-rendering</a>, <a class="property css" data-link-type="property" href="https://www.w3.org/TR/SVG2/pservers.html#StopColorProperty" id="ref-for-StopColorProperty①">stop-color</a>, <a class="property css" data-link-type="property" href="https://www.w3.org/TR/SVG2/pservers.html#StopOpacityProperty" id="ref-for-StopOpacityProperty①">stop-opacity</a>, <a class="property css" data-link-type="property" href="https://www.w3.org/TR/SVG2/painting.html#StrokeProperty" id="ref-for-StrokeProperty②">stroke</a>, <a class="property css" data-link-type="property" href="https://www.w3.org/TR/SVG2/painting.html#StrokeDasharrayProperty" id="ref-for-StrokeDasharrayProperty①">stroke-dasharray</a>, <a class="property css" data-link-type="property" href="https://www.w3.org/TR/SVG2/painting.html#StrokeDashoffsetProperty" id="ref-for-StrokeDashoffsetProperty①">stroke-dashoffset</a>, <a class="property css" data-link-type="property" href="https://www.w3.org/TR/SVG2/painting.html#StrokeLinecapProperty" id="ref-for-StrokeLinecapProperty①">stroke-linecap</a>, <a class="property css" data-link-type="property" href="https://www.w3.org/TR/SVG2/painting.html#StrokeLinejoinProperty" id="ref-for-StrokeLinejoinProperty①">stroke-linejoin</a>, <a class="property css" data-link-type="property" href="https://www.w3.org/TR/SVG2/painting.html#StrokeMiterlimitProperty" id="ref-for-StrokeMiterlimitProperty①">stroke-miterlimit</a>, <a class="property css" data-link-type="property" href="https://www.w3.org/TR/SVG2/painting.html#StrokeOpacityProperty" id="ref-for-StrokeOpacityProperty①">stroke-opacity</a>, <a class="property css" data-link-type="property" href="https://www.w3.org/TR/SVG2/painting.html#StrokeWidthProperty" id="ref-for-StrokeWidthProperty②">stroke-width</a>, <a class="property css" data-link-type="property" href="https://www.w3.org/TR/SVG2/text.html#TextAnchorProperty" id="ref-for-TextAnchorProperty①">text-anchor</a>, <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-text-decor-4/#propdef-text-decoration" id="ref-for-propdef-text-decoration①">text-decoration</a>, <a class="property css" data-link-type="property" href="https://www.w3.org/TR/SVG2/painting.html#TextRenderingProperty" id="ref-for-TextRenderingProperty①">text-rendering</a>, <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-writing-modes-3/#propdef-unicode-bidi" id="ref-for-propdef-unicode-bidi①">unicode-bidi</a>, <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-display-3/#propdef-visibility" id="ref-for-propdef-visibility②">visibility</a>, <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-text-4/#propdef-word-spacing" id="ref-for-propdef-word-spacing①">word-spacing</a>, <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-writing-modes-4/#propdef-writing-mode" id="ref-for-propdef-writing-mode①">writing-mode</a> <li><a href="https://www.w3.org/TR/2011/REC-SVG11-20110816/styling.html#ClassAttribute">‘class’</a> <li><a href="https://www.w3.org/TR/2011/REC-SVG11-20110816/styling.html#StyleAttribute">‘style’</a> <li>‘<a data-link-type="element-attr" href="#element-attrdef-mask-x" id="ref-for-element-attrdef-mask-x①">x</a>’ <li>‘<a data-link-type="element-attr" href="#element-attrdef-mask-y" id="ref-for-element-attrdef-mask-y①">y</a>’ <li>‘<a data-link-type="element-attr" href="#element-attrdef-mask-width" id="ref-for-element-attrdef-mask-width①">width</a>’ <li>‘<a data-link-type="element-attr" href="#element-attrdef-mask-height" id="ref-for-element-attrdef-mask-height①">height</a>’ <li>‘<a data-link-type="element-attr" href="#element-attrdef-mask-maskunits" id="ref-for-element-attrdef-mask-maskunits①">maskUnits</a>’ <li>‘<a data-link-type="element-attr" href="#element-attrdef-mask-maskcontentunits" id="ref-for-element-attrdef-mask-maskcontentunits">maskContentUnits</a>’ </ul> <tr> <th>DOM Interfaces: <td><a class="idlinterface" href="#InterfaceSVGMaskElement">SVGMaskElement</a> </table> Attribute definitions: <dl> <dt data-md><dfn class="dfn-paneled" data-dfn-for="mask" data-dfn-type="element-attr" data-export id="element-attrdef-mask-maskunits"><code>maskUnits</code></dfn> = "<a class="css" data-link-type="maybe" href="#valdef-maskunits-userspaceonuse" id="ref-for-valdef-maskunits-userspaceonuse">userSpaceOnUse</a> | <a class="css" data-link-type="maybe" href="#valdef-maskunits-objectboundingbox" id="ref-for-valdef-maskunits-objectboundingbox">objectBoundingBox</a>" <dd data-md> Defines the coordinate system for attributes <a data-link-type="element-attr" href="#element-attrdef-mask-x" id="ref-for-element-attrdef-mask-x②">x</a>, <a data-link-type="element-attr" href="#element-attrdef-mask-y" id="ref-for-element-attrdef-mask-y②">y</a>, <a data-link-type="element-attr" href="#element-attrdef-mask-width" id="ref-for-element-attrdef-mask-width②">width</a> and <a data-link-type="element-attr" href="#element-attrdef-mask-height" id="ref-for-element-attrdef-mask-height②">height</a>. <dl> <dt data-md><dfn class="dfn-paneled css" data-dfn-for="maskUnits" data-dfn-type="value" data-export id="valdef-maskunits-userspaceonuse">userSpaceOnUse</dfn> <dd data-md> <a data-link-type="element-attr" href="#element-attrdef-mask-x" id="ref-for-element-attrdef-mask-x③">x</a>, <a data-link-type="element-attr" href="#element-attrdef-mask-y" id="ref-for-element-attrdef-mask-y③">y</a>, <a data-link-type="element-attr" href="#element-attrdef-mask-width" id="ref-for-element-attrdef-mask-width③">width</a> and <a data-link-type="element-attr" href="#element-attrdef-mask-height" id="ref-for-element-attrdef-mask-height③">height</a> represent values in the current <a data-link-type="dfn" href="https://www.w3.org/TR/css-transforms-1/#user-coordinate-system" id="ref-for-user-coordinate-system②">user coordinate system</a> <a data-link-type="biblio" href="#biblio-css3-transforms" title="CSS Transforms Module Level 1">[CSS3-TRANSFORMS]</a> in place at the time when the <a data-link-type="element" href="#elementdef-mask" id="ref-for-elementdef-mask①⑤">mask</a> element is referenced (i.e., the user coordinate system for the element referencing the mask element via the <a class="property css" data-link-type="property" href="#propdef-mask" id="ref-for-propdef-mask⑧">mask</a> property). <dt data-md><dfn class="dfn-paneled css" data-dfn-for="maskUnits" data-dfn-type="value" data-export id="valdef-maskunits-objectboundingbox">objectBoundingBox</dfn> <dd data-md> <a data-link-type="element-attr" href="#element-attrdef-mask-x" id="ref-for-element-attrdef-mask-x④">x</a>, <a data-link-type="element-attr" href="#element-attrdef-mask-y" id="ref-for-element-attrdef-mask-y④">y</a>, <a data-link-type="element-attr" href="#element-attrdef-mask-width" id="ref-for-element-attrdef-mask-width④">width</a> and <a data-link-type="element-attr" href="#element-attrdef-mask-height" id="ref-for-element-attrdef-mask-height④">height</a> represent fractions or percentages of the <a data-link-type="dfn" href="https://www.w3.org/TR/SVG2/coords.html#TermObjectBoundingBox" id="ref-for-TermObjectBoundingBox④">object bounding box</a> of the element to which the mask is applied. <a href="https://www.w3.org/TR/SVG/coords.html#Units">User coordinates</a> are sized equivalently to the CSS <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-values-4/#px" id="ref-for-px①">px</a> unit. </dl> If attribute <a data-link-type="element-attr" href="#element-attrdef-mask-maskunits" id="ref-for-element-attrdef-mask-maskunits②">maskUnits</a> is not specified, then the effect is as if a value of <a class="css" data-link-type="maybe" href="#valdef-maskunits-objectboundingbox" id="ref-for-valdef-maskunits-objectboundingbox①">objectBoundingBox</a> were specified. Animatable: yes. <dt data-md><dfn class="dfn-paneled" data-dfn-for="mask" data-dfn-type="element-attr" data-export id="element-attrdef-mask-maskcontentunits"><code>maskContentUnits</code></dfn> = "<a class="css" data-link-type="maybe" href="#valdef-maskcontentunits-userspaceonuse" id="ref-for-valdef-maskcontentunits-userspaceonuse">userSpaceOnUse</a> | <a class="css" data-link-type="maybe" href="#valdef-maskcontentunits-objectboundingbox" id="ref-for-valdef-maskcontentunits-objectboundingbox">objectBoundingBox</a>" <dd data-md> Defines the coordinate system for the contents of the <a data-link-type="element" href="#elementdef-mask" id="ref-for-elementdef-mask①⑦">mask</a>. <dl> <dt data-md><dfn class="dfn-paneled css" data-dfn-for="maskContentUnits" data-dfn-type="value" data-export id="valdef-maskcontentunits-userspaceonuse">userSpaceOnUse</dfn> <dd data-md> The <a data-link-type="dfn" href="https://www.w3.org/TR/css-transforms-1/#user-coordinate-system" id="ref-for-user-coordinate-system④">user coordinate system</a> for the contents of the <a data-link-type="element" href="#elementdef-mask" id="ref-for-elementdef-mask①⑧">mask</a> element is the current user coordinate system in place at the time when the mask element is referenced (i.e., the user coordinate system for the element referencing the mask element via the <a class="property css" data-link-type="property" href="#propdef-mask" id="ref-for-propdef-mask⑨">mask</a> property). <dt data-md><dfn class="dfn-paneled css" data-dfn-for="maskContentUnits" data-dfn-type="value" data-export id="valdef-maskcontentunits-objectboundingbox">objectBoundingBox</dfn> <dd data-md> The coordinate system has its origin at the top left corner of the <a data-link-type="dfn" href="https://www.w3.org/TR/SVG2/coords.html#bounding-box" id="ref-for-bounding-box②">bounding box</a> of the element to which the clipping path applies to and the same width and height of this bounding box. <a href="https://www.w3.org/TR/SVG/coords.html#Units">User coordinates</a> are sized equivalently to the CSS <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-values-4/#px" id="ref-for-px②">px</a> unit. </dl> If attribute <a data-link-type="element-attr" href="#element-attrdef-mask-maskcontentunits" id="ref-for-element-attrdef-mask-maskcontentunits①">maskContentUnits</a> is not specified, then the effect is as if a value of <a class="css" data-link-type="maybe" href="#valdef-maskcontentunits-userspaceonuse" id="ref-for-valdef-maskcontentunits-userspaceonuse①">userSpaceOnUse</a> were specified. Animatable: yes. <dt data-md><dfn class="dfn-paneled" data-dfn-for="mask" data-dfn-type="element-attr" data-export id="element-attrdef-mask-x"><code>x</code></dfn> = "<a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage①"><length-percentage></a>" <dd data-md> The x-axis coordinate of one corner of the rectangle for the largest possible offscreen buffer. If the attribute is not specified but at least one of the attributes <a data-link-type="element-attr" href="#element-attrdef-mask-y" id="ref-for-element-attrdef-mask-y⑤">y</a>, <a data-link-type="element-attr" href="#element-attrdef-mask-width" id="ref-for-element-attrdef-mask-width⑤">width</a> or <a data-link-type="element-attr" href="#element-attrdef-mask-height" id="ref-for-element-attrdef-mask-height⑤">height</a> are specified, the effect is as if a value of -10% were specified. Animatable: yes. <dt data-md><dfn class="dfn-paneled" data-dfn-for="mask" data-dfn-type="element-attr" data-export id="element-attrdef-mask-y"><code>y</code></dfn> = "<a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage②"><length-percentage></a>" <dd data-md> The y-axis coordinate of one corner of the rectangle for the largest possible offscreen buffer. If the attribute is not specified but at least one of the attributes <a data-link-type="element-attr" href="#element-attrdef-mask-x" id="ref-for-element-attrdef-mask-x⑤">x</a>, <a data-link-type="element-attr" href="#element-attrdef-mask-width" id="ref-for-element-attrdef-mask-width⑥">width</a> or <a data-link-type="element-attr" href="#element-attrdef-mask-height" id="ref-for-element-attrdef-mask-height⑥">height</a> are specified, the effect is as if a value of -10% were specified. Animatable: yes. <dt data-md><dfn class="dfn-paneled" data-dfn-for="mask" data-dfn-type="element-attr" data-export id="element-attrdef-mask-width"><code>width</code></dfn> = "<a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage③"><length-percentage></a>" <dd data-md> The width of the largest possible offscreen buffer. A negative value or a value of zero disables rendering of the element. If the attribute is not specified but at least one of the attributes <a data-link-type="element-attr" href="#element-attrdef-mask-x" id="ref-for-element-attrdef-mask-x⑥">x</a>, <a data-link-type="element-attr" href="#element-attrdef-mask-y" id="ref-for-element-attrdef-mask-y⑥">y</a> or <a data-link-type="element-attr" href="#element-attrdef-mask-height" id="ref-for-element-attrdef-mask-height⑦">height</a> are specified, the effect is as if a value of 120% were specified. Animatable: yes. <dt data-md><dfn class="dfn-paneled" data-dfn-for="mask" data-dfn-type="element-attr" data-export id="element-attrdef-mask-height"><code>height</code></dfn> = "<a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage④"><length-percentage></a>" <dd data-md> The height of the largest possible offscreen buffer. A negative value or a value of zero disables rendering of the element. If the attribute is not specified but at least one of the attributes <a data-link-type="element-attr" href="#element-attrdef-mask-x" id="ref-for-element-attrdef-mask-x⑦">x</a>, <a data-link-type="element-attr" href="#element-attrdef-mask-y" id="ref-for-element-attrdef-mask-y⑦">y</a> or <a data-link-type="element-attr" href="#element-attrdef-mask-width" id="ref-for-element-attrdef-mask-width⑦">width</a> are specified, the effect is as if a value of 120% were specified. Animatable: yes. </dl> If at least one of the attributes <a data-link-type="element-attr" href="#element-attrdef-mask-x" id="ref-for-element-attrdef-mask-x⑧">x</a>, <a data-link-type="element-attr" href="#element-attrdef-mask-y" id="ref-for-element-attrdef-mask-y⑧">y</a>, <a data-link-type="element-attr" href="#element-attrdef-mask-width" id="ref-for-element-attrdef-mask-width⑧">width</a> or <a data-link-type="element-attr" href="#element-attrdef-mask-height" id="ref-for-element-attrdef-mask-height⑧">height</a> are specified, the given object and the rectangle defined by x, y, width and height establish a current clipping path. The rendered content of the mask must be clipped by this current clipping path. CSS properties inherit into the <a data-link-type="element" href="#elementdef-mask" id="ref-for-elementdef-mask②①">mask</a> element from its ancestors; properties do not inherit from the element referencing the mask element. <a data-link-type="element" href="#elementdef-mask" id="ref-for-elementdef-mask②③">mask</a> elements are never rendered directly; their only usage is as something that can be referenced using the <a class="property css" data-link-type="property" href="#propdef-mask" id="ref-for-propdef-mask①⓪">mask</a> property. The <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-color-4/#propdef-opacity" id="ref-for-propdef-opacity⑦">opacity</a>, <a class="property css" data-link-type="property" href="https://www.w3.org/TR/filter-effects-1/#propdef-filter" id="ref-for-propdef-filter②">filter</a> and <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-display-3/#propdef-display" id="ref-for-propdef-display⑥">display</a> properties do not apply to the mask element; thus, mask elements are not directly rendered even if the display property is set to a value other than <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/css-display-3/#valdef-display-none" id="ref-for-valdef-display-none②">none</a>, and mask elements are available for referencing even when the display property on the mask element or any of its ancestors is set to none. <h3 class="heading settled" data-level="9.2" id="the-mask-type">9.2. Mask Source Interpretation: the <a class="property css" data-link-type="property" href="#propdef-mask-type" id="ref-for-propdef-mask-type④">mask-type</a> property<a class="self-link" href="#the-mask-type"></a></h3> <table class="def propdef" data-link-for-hint="mask-type"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-mask-type">mask-type</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod">luminance <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one②④">|</a> alpha <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>luminance <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td><a data-link-type="element" href="#elementdef-mask" id="ref-for-elementdef-mask②⑧">mask</a> elements <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>no <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>n/a <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>as specified <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar <tr> <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> <td>discrete <tr> <th>Media: <td>visual </table> The <a class="property css" data-link-type="property" href="#propdef-mask-type" id="ref-for-propdef-mask-type⑤">mask-type</a> property defines whether the content of the <a data-link-type="element" href="#elementdef-mask" id="ref-for-elementdef-mask②⑨">mask</a> element is treated as as luminance mask or alpha mask, as described in <a href="#MaskValues">Calculating mask values</a>. Values have the following meanings: <dl> <dt data-md><dfn class="dfn-paneled css" data-dfn-for="mask-type" data-dfn-type="value" data-export id="valdef-mask-type-luminance">luminance</dfn> <dd data-md> Indicates that the luminance values of the mask should be used. <dt data-md><dfn class="dfn-paneled css" data-dfn-for="mask-type" data-dfn-type="value" data-export id="valdef-mask-type-alpha">alpha</dfn> <dd data-md> Indicates that the alpha values of the mask should be used. </dl> The <a class="property css" data-link-type="property" href="#propdef-mask-type" id="ref-for-propdef-mask-type⑥">mask-type</a> property allows the author of the <a data-link-type="element" href="#elementdef-mask" id="ref-for-elementdef-mask③⓪">mask</a> element to specify the preferred masking mode. However, the author can override this preference by setting the <a class="property css" data-link-type="property" href="#propdef-mask-mode" id="ref-for-propdef-mask-mode⑧">mask-mode</a> value to something different than <a class="css" data-link-type="maybe" href="#valdef-mask-mode-match-source" id="ref-for-valdef-mask-mode-match-source">match-source</a> on the masked content. <div class="example" id="example-c0f95fbd"> <a class="self-link" href="#example-c0f95fbd"></a> In the following example the computed value of <a class="property css" data-link-type="property" href="#propdef-mask-type" id="ref-for-propdef-mask-type⑦">mask-type</a> is <a class="css" data-link-type="maybe" href="#valdef-mask-type-luminance" id="ref-for-valdef-mask-type-luminance①">luminance</a> and the computed value of <a class="property css" data-link-type="property" href="#propdef-mask-mode" id="ref-for-propdef-mask-mode⑨">mask-mode</a> is <a class="css" data-link-type="maybe" href="#valdef-mask-mode-match-source" id="ref-for-valdef-mask-mode-match-source①">match-source</a>. The UA must follow the preferred masking mode defined on the <a data-link-type="element" href="#elementdef-mask" id="ref-for-elementdef-mask③①">mask</a> element. <pre><code class="highlight"><c- p><</c-><c- f>svg</c-><c- p>></c-> <c- p><</c-><c- f>mask</c-> <c- e>style</c-><c- o>=</c-><c- s>"mask-type: luminance;"</c-> <c- e>id</c-><c- o>=</c-><c- s>"mask"</c-><c- p>></c-> ... <c- p></</c-><c- f>mask</c-><c- p>></c-> <c- p></</c-><c- f>svg</c-><c- p>></c-> <c- p><</c-><c- f>p</c-> <c- e>style</c-><c- o>=</c-><c- s>"mask-image: url(#mask); mask-mode: auto;"</c-><c- p>></c-> This is the masked content. <c- p></</c-><c- f>p</c-><c- p>></c-> </code></pre> In the next example the computed value of <a class="property css" data-link-type="property" href="#propdef-mask-mode" id="ref-for-propdef-mask-mode①⓪">mask-mode</a> is <a class="css" data-link-type="maybe" href="#valdef-mask-mode-alpha" id="ref-for-valdef-mask-mode-alpha①">alpha</a> and overrides the preference on the <a data-link-type="element" href="#elementdef-mask" id="ref-for-elementdef-mask③②">mask</a> element that is computed to <a class="css" data-link-type="maybe" href="#valdef-mask-type-luminance" id="ref-for-valdef-mask-type-luminance②">luminance</a>. The <a data-link-type="dfn" href="#mask-layer-image" id="ref-for-mask-layer-image①⑧">mask layer image</a> is used as an alpha mask. <pre><code class="highlight">lt;svg> <c- p><</c-><c- f>mask</c-> <c- e>style</c-><c- o>=</c-><c- s>"mask-type: luminance;"</c-> <c- e>id</c-><c- o>=</c-><c- s>"mask2"</c-><c- p>></c-> ... <c- p></</c-><c- f>mask</c-><c- p>></c-> lt;/svg> lt;p style="mask-image: url(#mask2); mask-mode: alpha;"> This is the masked content. lt;/p> </code></pre> </div> The <a class="property css" data-link-type="property" href="#propdef-mask-type" id="ref-for-propdef-mask-type⑧">mask-type</a> property is a <a href="https://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermPresentationAttribute">presentation attribute</a> for SVG elements. <h2 class="heading settled" data-level="10" id="priv">10. Privacy Considerations<a class="self-link" href="#priv"></a></h2> It is important that the timing to the masking operations is independent of the source and destination pixel. Masking operations must be implemented in such a way that they always take the same amount of time regardless of the pixel values. If this rule is not followed, an attacker could infer information and mount a timing attack. A timing attack is a method of obtaining information about content that is otherwise protected, based on studying the amount of time it takes for an operation to occur. If, for example, red pixels took longer to draw than green pixels, one might be able to reconstruct a rough image of the element being rendered, without ever having access to the content of the element. While CSS capabilities like those defined in this module can be used to hide content from a site visitor, Web developers should not use these features to hide sensitive content from users or page scripts. Content that is hidden from a user’s display via CSS can still be accessed and read from page scripts or form submissions. Web developers should treat the capabilities in this spec (as with all CSS specs) as cosmetic changes only, and not imposing or defending a privacy boundary. <h2 class="heading settled" data-level="11" id="sec">11. Security Considerations<a class="self-link" href="#sec"></a></h2> <a class="production css" data-link-type="type" href="#typedef-mask-source" id="ref-for-typedef-mask-source④"><mask-source></a>s and <a class="production css" data-link-type="type" href="#typedef-clip-source" id="ref-for-typedef-clip-source①"><clip-source></a>s have special requirements on fetching resources. User agents must use the <a href="https://fetch.spec.whatwg.org/#main-fetch">potentially CORS-enabled fetch</a> method defined by the <a data-link-type="biblio" href="#biblio-fetch" title="Fetch Standard">[FETCH]</a> specification for all <a class="production css" data-link-type="type" href="#typedef-mask-source" id="ref-for-typedef-mask-source⑤"><mask-source></a>, <a class="production css" data-link-type="type" href="#typedef-clip-source" id="ref-for-typedef-clip-source②"><clip-source></a> and <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-images-3/#typedef-image" id="ref-for-typedef-image⑦"><image></a> values on the <a class="property css" data-link-type="property" href="#propdef-mask-image" id="ref-for-propdef-mask-image①⑥">mask-image</a>, <a class="property css" data-link-type="property" href="#propdef-mask-border-source" id="ref-for-propdef-mask-border-source①⑥">mask-border-source</a> and <a class="property css" data-link-type="property" href="#propdef-clip-path" id="ref-for-propdef-clip-path①⑥">clip-path</a> properties. When fetching, user agents must use “Anonymous” mode, set the referrer source to the stylesheet’s URL and set the origin to the URL of the containing document. If this results in network errors, the effect is as if the value none had been specified. <h2 class="no-num heading settled" id="clip-property">Appendix A: The deprecated <a class="property css" data-link-type="property" href="#propdef-clip" id="ref-for-propdef-clip③">clip</a> property<a class="self-link" href="#clip-property"></a></h2> <table class="def propdef" data-link-for-hint="clip"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-clip">clip</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod"><a class="production css" data-link-type="function" href="#funcdef-clip-rect" id="ref-for-funcdef-clip-rect"><rect()></a> <a data-link-type="grammar" href="https://www.w3.org/TR/css-values-4/#comb-one" id="ref-for-comb-one②⑤">|</a> <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css2/#valdef-clip-auto" id="ref-for-valdef-clip-auto">auto</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>auto <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td>Absolutely positioned elements. In SVG, it applies to <a href="https://www.w3.org/TR/SVG/coords.html#EstablishingANewSVGViewport">elements which establish a new viewport</a>, <a data-link-type="element" href="https://www.w3.org/TR/SVG2/pservers.html#elementdef-pattern" id="ref-for-elementdef-pattern①">pattern</a> elements and <a data-link-type="element" href="#elementdef-mask" id="ref-for-elementdef-mask③③">mask</a> elements. <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>no <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>n/a <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>as specified <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar <tr> <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> <td>by <a href="https://drafts.csswg.org/web-animations-1/#animation-type">computed value</a> <tr> <th>Media: <td>visual </table> With this specification the <a class="property css" data-link-type="property" href="#propdef-clip" id="ref-for-propdef-clip④">clip</a> property is deprecated. Authors are encouraged to use the <a class="property css" data-link-type="property" href="#propdef-clip-path" id="ref-for-propdef-clip-path①⑦">clip-path</a> property instead. UAs must support the clip property. The <a class="property css" data-link-type="property" href="#propdef-clip" id="ref-for-propdef-clip⑥">clip</a> property applies only to absolutely positioned elements. In SVG, it applies to <a href="https://www.w3.org/TR/SVG/coords.html#EstablishingANewSVGViewport">elements which establish a new viewport</a>, <a data-link-type="element" href="https://www.w3.org/TR/SVG2/pservers.html#elementdef-pattern" id="ref-for-elementdef-pattern②">pattern</a> elements and <a data-link-type="element" href="#elementdef-mask" id="ref-for-elementdef-mask③④">mask</a> elements. Values have the following meanings: <dl> <dt data-md>auto <dd data-md> The element does not clip. <dt data-md><dfn class="dfn-paneled css" data-dfn-for="clip" data-dfn-type="function" data-export id="funcdef-clip-rect">rect()</dfn> = rect( <a class="production css" data-link-type="type" href="#typedef-clip-top" id="ref-for-typedef-clip-top"><top></a>, <a class="production css" data-link-type="type" href="#typedef-clip-right" id="ref-for-typedef-clip-right"><right></a>, <a class="production css" data-link-type="type" href="#typedef-clip-bottom" id="ref-for-typedef-clip-bottom"><bottom></a>, <a class="production css" data-link-type="type" href="#typedef-clip-left" id="ref-for-typedef-clip-left"><left></a> ) <dd data-md> <a class="production css" data-link-type="type" href="#typedef-clip-top" id="ref-for-typedef-clip-top①"><top></a> and <a class="production css" data-link-type="type" href="#typedef-clip-bottom" id="ref-for-typedef-clip-bottom①"><bottom></a> specify offsets from the top border edge of the box, and <a class="production css" data-link-type="type" href="#typedef-clip-right" id="ref-for-typedef-clip-right①"><right></a>, and <a class="production css" data-link-type="type" href="#typedef-clip-left" id="ref-for-typedef-clip-left①"><left></a> specify offsets from the left border edge of the box. Authors should separate offset values with commas. User agents must support separation with commas, but may also support separation without commas (but not a combination), because a previous revision of this specification was ambiguous in this respect. <dfn class="dfn-paneled css" data-dfn-for="clip" data-dfn-type="type" data-export id="typedef-clip-top"><top></dfn>, <dfn class="dfn-paneled css" data-dfn-for="clip" data-dfn-type="type" data-export id="typedef-clip-right"><right></dfn>, <dfn class="dfn-paneled css" data-dfn-for="clip" data-dfn-type="type" data-export id="typedef-clip-bottom"><bottom></dfn>, and <dfn class="dfn-paneled css" data-dfn-for="clip" data-dfn-type="type" data-export id="typedef-clip-left"><left></dfn> may either have a <a class="production css" data-link-type="type" href="https://www.w3.org/TR/css-values-4/#length-value" id="ref-for-length-value④"><length></a> value or <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css2/#valdef-clip-auto" id="ref-for-valdef-clip-auto①">auto</a>. Negative lengths are permitted. The value auto means that a given edge of the clipping region will be the same as the edge of the element’s generated border box (i.e., auto means the same as 0 for <a class="production css" data-link-type="type" href="#typedef-clip-top" id="ref-for-typedef-clip-top②"><top></a> and <a class="production css" data-link-type="type" href="#typedef-clip-left" id="ref-for-typedef-clip-left②"><left></a>, the same as the <a data-link-type="dfn" href="https://www.w3.org/TR/css-cascade-5/#used-value" id="ref-for-used-value⑤">used value</a> of the height plus the sum of vertical padding and border widths for <a class="production css" data-link-type="type" href="#typedef-clip-bottom" id="ref-for-typedef-clip-bottom②"><bottom></a>, and the same as the used value of the width plus the sum of the horizontal padding and border widths for <a class="production css" data-link-type="type" href="#typedef-clip-right" id="ref-for-typedef-clip-right②"><right></a>, such that four auto values result in the clipping region being the same as the element’s border box). When coordinates are rounded to pixel coordinates, care should be taken that no pixels remain visible when <a class="production css" data-link-type="type" href="#typedef-clip-left" id="ref-for-typedef-clip-left③"><left></a> and <a class="production css" data-link-type="type" href="#typedef-clip-right" id="ref-for-typedef-clip-right③"><right></a> have the same value (or <a class="production css" data-link-type="type" href="#typedef-clip-top" id="ref-for-typedef-clip-top③"><top></a> and <a class="production css" data-link-type="type" href="#typedef-clip-bottom" id="ref-for-typedef-clip-bottom③"><bottom></a> have the same value), and conversely that no pixels within the element’s border box remain hidden when these values are <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css2/#valdef-clip-auto" id="ref-for-valdef-clip-auto⑤">auto</a>. </dl> The <a class="property css" data-link-type="property" href="#propdef-clip" id="ref-for-propdef-clip⑦">clip</a> property is a <a href="https://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermPresentationAttribute">presentation attribute</a> for SVG elements. <div class="example" id="example-550001e5"> <a class="self-link" href="#example-550001e5"></a> Example: The following two rules: <pre><code class="highlight">p#one <c- p>{</c-> <c- k>clip</c-><c- p>:</c-> <c- nf>rect</c-><c- p>(</c-><c- m>5</c-><c- k>px</c-><c- p>,</c-> <c- m>40</c-><c- k>px</c-><c- p>,</c-> <c- m>45</c-><c- k>px</c-><c- p>,</c-> <c- m>5</c-><c- k>px</c-><c- p>);</c-> <c- p>}</c-> p#two <c- p>{</c-> <c- k>clip</c-><c- p>:</c-> <c- nf>rect</c-><c- p>(</c-><c- m>5</c-><c- k>px</c-><c- p>,</c-> <c- m>55</c-><c- k>px</c-><c- p>,</c-> <c- m>45</c-><c- k>px</c-><c- p>,</c-> <c- m>5</c-><c- k>px</c-><c- p>);</c-> <c- p>}</c-> </code></pre> and assuming both Ps are 50 by 55 pixel, will create, respectively, the rectangular clipping regions delimited by the dashed lines in the following illustrations: <div class="figure"> <img alt="Values for rect shape" height="300" src="images/clip.svg" width="580"> This diagram illustrates two block boxes, one next to the other, with rectangular clipping regions of different dimensions. (See <a href="https://www.w3.org/TR/CSS2/images/longdesc/clip-desc.html">long description</a>.) </div> </div> <h2 class="no-num heading settled" id="compute-stroke-bounding-box">Appendix B: Compute stroke bounding box<a class="self-link" href="#compute-stroke-bounding-box"></a></h2> The algorithm to compute the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="stroke-bounding-box">stroke bounding box</dfn> is as follows, depending on the type of <var>element</var>: <dl class="switch"> <dt data-md>a <a data-link-type="dfn" href="https://www.w3.org/TR/SVG2/struct.html#graphics-element" id="ref-for-graphics-element②②">graphics element</a> without <a data-link-type="element" href="https://www.w3.org/TR/SVG2/struct.html#elementdef-use" id="ref-for-elementdef-use②⓪">use</a> or <a data-link-type="element" href="https://www.w3.org/TR/SVG2/embedded.html#elementdef-image" id="ref-for-elementdef-image①">image</a> <dt data-md>an <a data-link-type="element" href="https://www.w3.org/TR/SVG2/linking.html#elementdef-a" id="ref-for-elementdef-a①">a</a> element with a <a data-link-type="dfn" href="https://svgwg.org/svg2-draft/text.html#TermTextContentElement" id="ref-for-TermTextContentElement">text content element</a> <dd data-md> <ol class="algorithm"> <li data-md> Let <var>box</var> be a rectangle initialized to the <a data-link-type="dfn" href="https://www.w3.org/TR/SVG2/coords.html#TermObjectBoundingBox" id="ref-for-TermObjectBoundingBox⑤">object bounding box</a> of <var>element</var>. <li data-md> If the <a data-link-type="dfn" href="https://www.w3.org/TR/css-cascade-5/#used-value" id="ref-for-used-value⑥">used value</a> of <a class="property css" data-link-type="property" href="https://www.w3.org/TR/SVG2/painting.html#StrokeWidthProperty" id="ref-for-StrokeWidthProperty③">stroke-width</a> <= 0 or the used value of <a class="property css" data-link-type="property" href="https://www.w3.org/TR/SVG2/painting.html#StrokeProperty" id="ref-for-StrokeProperty③">stroke</a> is none return <var>box</var>. <li data-md> Let <var>delta</var> be the inflation value initialized to the half of the <a class="property css" data-link-type="property" href="https://www.w3.org/TR/SVG2/painting.html#StrokeWidthProperty" id="ref-for-StrokeWidthProperty④">stroke-width</a>. <li data-md> If <var>element</var> is not <a data-link-type="element" href="https://www.w3.org/TR/SVG2/shapes.html#elementdef-rect" id="ref-for-elementdef-rect②">rect</a>, <a data-link-type="element" href="https://www.w3.org/TR/SVG2/shapes.html#elementdef-ellipse" id="ref-for-elementdef-ellipse②">ellipse</a>, <a data-link-type="element" href="https://www.w3.org/TR/SVG2/shapes.html#elementdef-circle" id="ref-for-elementdef-circle④">circle</a> or <a data-link-type="element" href="https://www.w3.org/TR/SVG2/embedded.html#elementdef-image" id="ref-for-elementdef-image②">image</a> just follow one of the following conditions in the order they apply: <dl class="switch"> <dt data-md>the used value for <a class="property css" data-link-type="property" href="https://www.w3.org/TR/SVG2/painting.html#StrokeLinejoinProperty" id="ref-for-StrokeLinejoinProperty②">stroke-linejoin</a> is <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/fill-stroke-3/#valdef-stroke-linejoin-miter" id="ref-for-valdef-stroke-linejoin-miter">miter</a> <dd data-md> <ol> <li data-md> Let <var>miter</var> be the used value of <a class="property css" data-link-type="property" href="https://www.w3.org/TR/SVG2/painting.html#StrokeMiterlimitProperty" id="ref-for-StrokeMiterlimitProperty②">stroke-miterlimit</a>. <li data-md> If <var>miter</var> is smaller than the square root of 2 and if the used value for <a class="property css" data-link-type="property" href="https://www.w3.org/TR/SVG2/painting.html#StrokeLinecapProperty" id="ref-for-StrokeLinecapProperty②">stroke-linecap</a> is <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/fill-stroke-3/#valdef-stroke-linecap-square" id="ref-for-valdef-stroke-linecap-square">square</a>, multiply <var>delta</var> with the square root of 2. Otherwise, multiply <var>delta</var> with <var>miter</var>. </ol> <dt data-md>the used value for <a class="property css" data-link-type="property" href="https://www.w3.org/TR/SVG2/painting.html#StrokeLinecapProperty" id="ref-for-StrokeLinecapProperty③">stroke-linecap</a> is <a class="css" data-link-type="maybe" href="https://www.w3.org/TR/fill-stroke-3/#valdef-stroke-linecap-square" id="ref-for-valdef-stroke-linecap-square①">square</a> <dd data-md> <ol> <li data-md> Multiply <var>delta</var> with the square root of 2. </ol> </dl> <li data-md> Inflate <var>box</var> with the value of <var>delta</var>. <li data-md> Return <var>box</var>. </ol> Note: The values of the <a class="property css" data-link-type="property" href="https://www.w3.org/TR/SVG2/painting.html#StrokeOpacityProperty" id="ref-for-StrokeOpacityProperty②">stroke-opacity</a>, <a class="property css" data-link-type="property" href="https://www.w3.org/TR/SVG2/painting.html#StrokeDasharrayProperty" id="ref-for-StrokeDasharrayProperty②">stroke-dasharray</a> and <a class="property css" data-link-type="property" href="https://www.w3.org/TR/SVG2/painting.html#StrokeDashoffsetProperty" id="ref-for-StrokeDashoffsetProperty②">stroke-dashoffset</a> do not affect the calculation of the stroke bounding box. <dt data-md>a <a data-link-type="dfn" href="https://www.w3.org/TR/SVG2/struct.html#container-element" id="ref-for-container-element①⑧">container element</a> <dt data-md><a data-link-type="element" href="https://www.w3.org/TR/SVG2/struct.html#elementdef-use" id="ref-for-elementdef-use②①">use</a> <dd data-md> <ol class="algorithm"> <li data-md> Let <var>parent</var> be the <a data-link-type="dfn" href="https://www.w3.org/TR/SVG2/struct.html#container-element" id="ref-for-container-element①⑨">container element</a> if it is one, or the root of the <a data-link-type="element" href="https://www.w3.org/TR/SVG2/struct.html#elementdef-use" id="ref-for-elementdef-use②②">use</a> element’s shadow tree otherwise. <li data-md> For each child <var>child</var> of <var>parent</var> <ol> <li data-md> Invoke the stroke bounding box algorithm with <var>child</var>. <li data-md> Let <var>childBox</var> be the returned box value of the invoked algorithm. <li data-md> Map <var>childBox</var> from the coordinate space of <var>child</var> to the coordinate space of <var>parent</var>. </ol> <li data-md> Let <var>box</var> be the union of all <var>childBox</var>es. <li data-md> Return <var>box</var>. </ol> <dt data-md><a data-link-type="element" href="https://www.w3.org/TR/SVG2/embedded.html#elementdef-image" id="ref-for-elementdef-image③">image</a> <dd data-md> <ol class="algorithm"> <li data-md> Return the <a data-link-type="dfn" href="https://www.w3.org/TR/SVG2/coords.html#TermObjectBoundingBox" id="ref-for-TermObjectBoundingBox⑥">object bounding box</a> of <var>element</var>. </ol> </dl> Note: A future version of the SVG specification may override this section. <h2 class="no-num heading settled" id="DOMInterfaces">Appendix C: DOM interfaces<a class="self-link" href="#DOMInterfaces"></a></h2> <h3 class="heading settled" id="InterfaceSVGClipPathElement">Interface SVGClipPathElement<a class="self-link" href="#InterfaceSVGClipPathElement"></a></h3> The <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="svgclippathelement"><code>SVGClipPathElement</code></dfn> interface corresponds to the <a data-link-type="element" href="#elementdef-clippath" id="ref-for-elementdef-clippath③①">clipPath</a> element. <pre class="idl highlight def">[<a class="idl-code" data-link-type="extended-attribute" href="https://webidl.spec.whatwg.org/#Exposed" id="ref-for-Exposed"><c- g>Exposed</c-></a>=<c- n>Window</c->] <c- b>interface</c-> <a class="idl-code" data-link-type="interface" href="#svgclippathelement" id="ref-for-svgclippathelement"><c- g>SVGClipPathElement</c-></a> : <a data-link-type="idl-name" href="https://www.w3.org/TR/SVG2/types.html#InterfaceSVGElement" id="ref-for-InterfaceSVGElement"><c- n>SVGElement</c-></a> { <c- b>readonly</c-> <c- b>attribute</c-> <a data-link-type="idl-name" href="https://www.w3.org/TR/SVG2/types.html#InterfaceSVGAnimatedEnumeration" id="ref-for-InterfaceSVGAnimatedEnumeration"><c- n>SVGAnimatedEnumeration</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="SVGAnimatedEnumeration" href="#dom-svgclippathelement-clippathunits" id="ref-for-dom-svgclippathelement-clippathunits"><c- g>clipPathUnits</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <a data-link-type="idl-name" href="https://www.w3.org/TR/SVG2/coords.html#InterfaceSVGAnimatedTransformList" id="ref-for-InterfaceSVGAnimatedTransformList"><c- n>SVGAnimatedTransformList</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="SVGAnimatedTransformList" href="#dom-svgclippathelement-transform" id="ref-for-dom-svgclippathelement-transform"><c- g>transform</c-></a>; }; </pre> <div> <dl> <dt data-md>Attributes: <dd data-md> <dl> <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="SVGClipPathElement" data-dfn-type="attribute" data-export id="dom-svgclippathelement-clippathunits"><code>clipPathUnits</code></dfn>, of type <a data-link-type="idl-name" href="https://www.w3.org/TR/SVG2/types.html#InterfaceSVGAnimatedEnumeration" id="ref-for-InterfaceSVGAnimatedEnumeration①">SVGAnimatedEnumeration</a>, readonly <dd data-md> Corresponds to attribute <a data-link-type="element-attr" href="#element-attrdef-clippath-clippathunits" id="ref-for-element-attrdef-clippath-clippathunits②">clipPathUnits</a> on the given <a data-link-type="element" href="#elementdef-clippath" id="ref-for-elementdef-clippath③②">clipPath</a> element. Takes one of the constants defined in <a class="idl-code" data-link-type="interface" href="https://www.w3.org/TR/SVG2/types.html#InterfaceSVGUnitTypes" id="ref-for-InterfaceSVGUnitTypes">SVGUnitTypes</a>. <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="SVGClipPathElement" data-dfn-type="attribute" data-export id="dom-svgclippathelement-transform"><code>transform</code></dfn>, of type <a data-link-type="idl-name" href="https://www.w3.org/TR/SVG2/coords.html#InterfaceSVGAnimatedTransformList" id="ref-for-InterfaceSVGAnimatedTransformList①">SVGAnimatedTransformList</a>, readonly <dd data-md> Corresponds to presentation attribute <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-transforms-1/#propdef-transform" id="ref-for-propdef-transform">transform</a> on the given element. </dl> </dl> </div> <h3 class="heading settled" id="InterfaceSVGMaskElement">Interface SVGMaskElement<a class="self-link" href="#InterfaceSVGMaskElement"></a></h3> The <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="svgmaskelement"><code>SVGMaskElement</code></dfn> interface corresponds to the <a data-link-type="element" href="#elementdef-mask" id="ref-for-elementdef-mask③⑤">mask</a> element. <pre class="idl highlight def">[<a class="idl-code" data-link-type="extended-attribute" href="https://webidl.spec.whatwg.org/#Exposed" id="ref-for-Exposed①"><c- g>Exposed</c-></a>=<c- n>Window</c->] <c- b>interface</c-> <a class="idl-code" data-link-type="interface" href="#svgmaskelement" id="ref-for-svgmaskelement"><c- g>SVGMaskElement</c-></a> : <a data-link-type="idl-name" href="https://www.w3.org/TR/SVG2/types.html#InterfaceSVGElement" id="ref-for-InterfaceSVGElement①"><c- n>SVGElement</c-></a> { <c- b>readonly</c-> <c- b>attribute</c-> <a data-link-type="idl-name" href="https://www.w3.org/TR/SVG2/types.html#InterfaceSVGAnimatedEnumeration" id="ref-for-InterfaceSVGAnimatedEnumeration②"><c- n>SVGAnimatedEnumeration</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="SVGAnimatedEnumeration" href="#dom-svgmaskelement-maskunits" id="ref-for-dom-svgmaskelement-maskunits"><c- g>maskUnits</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <a data-link-type="idl-name" href="https://www.w3.org/TR/SVG2/types.html#InterfaceSVGAnimatedEnumeration" id="ref-for-InterfaceSVGAnimatedEnumeration③"><c- n>SVGAnimatedEnumeration</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="SVGAnimatedEnumeration" href="#dom-svgmaskelement-maskcontentunits" id="ref-for-dom-svgmaskelement-maskcontentunits"><c- g>maskContentUnits</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <a data-link-type="idl-name" href="https://www.w3.org/TR/SVG2/types.html#InterfaceSVGAnimatedLength" id="ref-for-InterfaceSVGAnimatedLength"><c- n>SVGAnimatedLength</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="SVGAnimatedLength" href="#dom-svgmaskelement-x" id="ref-for-dom-svgmaskelement-x"><c- g>x</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <a data-link-type="idl-name" href="https://www.w3.org/TR/SVG2/types.html#InterfaceSVGAnimatedLength" id="ref-for-InterfaceSVGAnimatedLength①"><c- n>SVGAnimatedLength</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="SVGAnimatedLength" href="#dom-svgmaskelement-y" id="ref-for-dom-svgmaskelement-y"><c- g>y</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <a data-link-type="idl-name" href="https://www.w3.org/TR/SVG2/types.html#InterfaceSVGAnimatedLength" id="ref-for-InterfaceSVGAnimatedLength②"><c- n>SVGAnimatedLength</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="SVGAnimatedLength" href="#dom-svgmaskelement-width" id="ref-for-dom-svgmaskelement-width"><c- g>width</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <a data-link-type="idl-name" href="https://www.w3.org/TR/SVG2/types.html#InterfaceSVGAnimatedLength" id="ref-for-InterfaceSVGAnimatedLength③"><c- n>SVGAnimatedLength</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="SVGAnimatedLength" href="#dom-svgmaskelement-height" id="ref-for-dom-svgmaskelement-height"><c- g>height</c-></a>; }; </pre> <div> <dl> <dt data-md>Attributes: <dd data-md> <dl> <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="SVGMaskElement" data-dfn-type="attribute" data-export id="dom-svgmaskelement-maskunits"><code>maskUnits</code></dfn>, of type <a data-link-type="idl-name" href="https://www.w3.org/TR/SVG2/types.html#InterfaceSVGAnimatedEnumeration" id="ref-for-InterfaceSVGAnimatedEnumeration④">SVGAnimatedEnumeration</a>, readonly <dd data-md> Corresponds to attribute <a data-link-type="element-attr" href="#element-attrdef-mask-maskunits" id="ref-for-element-attrdef-mask-maskunits③">maskUnits</a> on the given <a data-link-type="element" href="#elementdef-mask" id="ref-for-elementdef-mask③⑥">mask</a> element. Takes one of the constants defined in <a class="idl-code" data-link-type="interface" href="https://www.w3.org/TR/SVG2/types.html#InterfaceSVGUnitTypes" id="ref-for-InterfaceSVGUnitTypes①">SVGUnitTypes</a>. <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="SVGMaskElement" data-dfn-type="attribute" data-export id="dom-svgmaskelement-maskcontentunits"><code>maskContentUnits</code></dfn>, of type <a data-link-type="idl-name" href="https://www.w3.org/TR/SVG2/types.html#InterfaceSVGAnimatedEnumeration" id="ref-for-InterfaceSVGAnimatedEnumeration⑤">SVGAnimatedEnumeration</a>, readonly <dd data-md> Corresponds to attribute <a data-link-type="element-attr" href="#element-attrdef-mask-maskcontentunits" id="ref-for-element-attrdef-mask-maskcontentunits②">maskContentUnits</a> on the given <a data-link-type="element" href="#elementdef-mask" id="ref-for-elementdef-mask③⑦">mask</a> element. Takes one of the constants defined in <a class="idl-code" data-link-type="interface" href="https://www.w3.org/TR/SVG2/types.html#InterfaceSVGUnitTypes" id="ref-for-InterfaceSVGUnitTypes②">SVGUnitTypes</a>. <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="SVGMaskElement" data-dfn-type="attribute" data-export id="dom-svgmaskelement-x"><code>x</code></dfn>, of type <a data-link-type="idl-name" href="https://www.w3.org/TR/SVG2/types.html#InterfaceSVGAnimatedLength" id="ref-for-InterfaceSVGAnimatedLength④">SVGAnimatedLength</a>, readonly <dd data-md> Corresponds to attribute <a data-link-type="element-attr" href="#element-attrdef-mask-x" id="ref-for-element-attrdef-mask-x①⓪">x</a> on the given <a data-link-type="element" href="#elementdef-mask" id="ref-for-elementdef-mask③⑧">mask</a> element. <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="SVGMaskElement" data-dfn-type="attribute" data-export id="dom-svgmaskelement-y"><code>y</code></dfn>, of type <a data-link-type="idl-name" href="https://www.w3.org/TR/SVG2/types.html#InterfaceSVGAnimatedLength" id="ref-for-InterfaceSVGAnimatedLength⑤">SVGAnimatedLength</a>, readonly <dd data-md> Corresponds to attribute <a data-link-type="element-attr" href="#element-attrdef-mask-y" id="ref-for-element-attrdef-mask-y①⓪">y</a> on the given <a data-link-type="element" href="#elementdef-mask" id="ref-for-elementdef-mask③⑨">mask</a> element. <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="SVGMaskElement" data-dfn-type="attribute" data-export id="dom-svgmaskelement-width"><code>width</code></dfn>, of type <a data-link-type="idl-name" href="https://www.w3.org/TR/SVG2/types.html#InterfaceSVGAnimatedLength" id="ref-for-InterfaceSVGAnimatedLength⑥">SVGAnimatedLength</a>, readonly <dd data-md> Corresponds to attribute <a data-link-type="element-attr" href="#element-attrdef-mask-width" id="ref-for-element-attrdef-mask-width①⓪">width</a> on the given <a data-link-type="element" href="#elementdef-mask" id="ref-for-elementdef-mask④⓪">mask</a> element. <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="SVGMaskElement" data-dfn-type="attribute" data-export id="dom-svgmaskelement-height"><code>height</code></dfn>, of type <a data-link-type="idl-name" href="https://www.w3.org/TR/SVG2/types.html#InterfaceSVGAnimatedLength" id="ref-for-InterfaceSVGAnimatedLength⑦">SVGAnimatedLength</a>, readonly <dd data-md> Corresponds to attribute <a data-link-type="element-attr" href="#element-attrdef-mask-height" id="ref-for-element-attrdef-mask-height①⓪">height</a> on the given <a data-link-type="element" href="#elementdef-mask" id="ref-for-elementdef-mask④①">mask</a> element. </dl> </dl> </div> <h2 class="no-num heading settled" id="changes">Changes since last publication<a class="self-link" href="#changes"></a></h2> The following changes were made since the <a href="https://www.w3.org/TR/2021/CRD-css-masking-1-20210805/">5 August 2021 Candidate Recommendation Draft</a>. <ul> <li data-md> Added a privacy concern regarding hiding sensitive content <li data-md> Separated Security and Privacy sections <li data-md> Minor editorial and markup changes </ul> The following changes were made since the <a href="https://www.w3.org/TR/2014/CR-css-masking-1-20140826/">26 August 2014 Candidate Recommendation</a>. <ul> <li data-md> Allowed the <a class="production css" data-link-type="property" href="#propdef-mask-mode" id="ref-for-propdef-mask-mode①①"><'mask-mode'></a> value in the <a class="property css" data-link-type="property" href="#propdef-mask" id="ref-for-propdef-mask①①">mask</a> shorthand to appear anywhere other than between <a class="production css" data-link-type="property" href="#propdef-mask-position" id="ref-for-propdef-mask-position⑤"><'mask-position'></a> and <a class="production css" data-link-type="property" href="#propdef-mask-size" id="ref-for-propdef-mask-size④"><'mask-size'></a>. <li data-md> Removed Implements SVGUnitTypes on clipPath and mask elements. <li data-md> Apply properties that apply to all graphics elements to the use element as well. <li data-md> Change initial value of <a class="property css" data-link-type="property" href="#propdef-mask-position" id="ref-for-propdef-mask-position⑥">mask-position</a> to 0% 0% and of <a class="property css" data-link-type="property" href="#propdef-mask-repeat" id="ref-for-propdef-mask-repeat③">mask-repeat</a> to repeat. <li data-md> Remove <var>margin-box</var> as possible value from <a class="property css" data-link-type="property" href="#propdef-mask-origin" id="ref-for-propdef-mask-origin⑨">mask-origin</a> and <a class="property css" data-link-type="property" href="#propdef-mask-clip" id="ref-for-propdef-mask-clip⑨">mask-clip</a>. <li data-md> Clarify that <a class="property css" data-link-type="property" href="#propdef-mask-clip" id="ref-for-propdef-mask-clip①⓪">mask-clip</a> has no affect on <a data-link-type="dfn" href="#mask-layer-image" id="ref-for-mask-layer-image①⑨">mask layer image</a>s that reference a <a data-link-type="element" href="#elementdef-mask" id="ref-for-elementdef-mask④②">mask</a> element. <li data-md> Clarify <a class="property css" data-link-type="property" href="#propdef-mask" id="ref-for-propdef-mask①②">mask</a> shorthand behavior on appearance of one <a class="production css" data-link-type="type" href="#typedef-geometry-box" id="ref-for-typedef-geometry-box⑨"><geometry-box></a> and the <a class="css" data-link-type="maybe" href="#valdef-mask-clip-no-clip" id="ref-for-valdef-mask-clip-no-clip③">no-clip</a> keyword. <li data-md> <a class="property css" data-link-type="property" href="#propdef-mask-mode" id="ref-for-propdef-mask-mode①②">mask-mode</a> on a <a data-link-type="dfn" href="#mask-layer-image" id="ref-for-mask-layer-image②⓪">mask layer image</a> that is a reference to a <a data-link-type="element" href="#elementdef-mask" id="ref-for-elementdef-mask④③">mask</a> element with a value of <a class="css" data-link-type="maybe" href="#valdef-mask-mode-match-source" id="ref-for-valdef-mask-mode-match-source②">match-source</a> should take the value of the <a class="property css" data-link-type="property" href="#propdef-mask-type" id="ref-for-propdef-mask-type⑨">mask-type</a> property on this mask element. <li data-md> Mapping of boxes for SVG elements with and without associated CSS layout box changed to match mapping in Fill and Stroke spec. <li data-md> Editorial changes. </ul> The following changes were made since the <a href="https://www.w3.org/TR/2014/WD-css-masking-1-20140522/">22 May 2014 Working Draft</a>. <ul> <li data-md> Change the inital value of <a class="property css" data-link-type="property" href="#propdef-mask-size" id="ref-for-propdef-mask-size⑤">mask-size</a> from border-box to auto. </ul> The following changes were made since the <a href="https://www.w3.org/TR/2014/WD-css-masking-1-20140213/">13 February 2014 Working Draft</a>. <ul> <li data-md> Renamed mask-box* properties and terms to mask-border*. <li data-md> Added support for multiple mask layers. (Similar to multiple background layers for <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-backgrounds-3/#propdef-background" id="ref-for-propdef-background">background</a>.) <li data-md> Added the <a class="property css" data-link-type="property" href="#propdef-mask-composite" id="ref-for-propdef-mask-composite⑥">mask-composite</a> property to control compositing of multiple <a data-link-type="dfn" href="#mask-layer-image" id="ref-for-mask-layer-image②①">mask layer images</a> with the keywords <a class="css" data-link-type="maybe" href="#valdef-mask-composite-add" id="ref-for-valdef-mask-composite-add②">add</a>, <a class="css" data-link-type="maybe" href="#valdef-mask-composite-subtract" id="ref-for-valdef-mask-composite-subtract①">subtract</a>, <a class="css" data-link-type="maybe" href="#valdef-mask-composite-intersect" id="ref-for-valdef-mask-composite-intersect①">intersect</a> and <a class="css" data-link-type="maybe" href="#valdef-mask-composite-exclude" id="ref-for-valdef-mask-composite-exclude③">exclude</a>. <li data-md> <a class="property css" data-link-type="property" href="#propdef-mask-border-slice" id="ref-for-propdef-mask-border-slice⑤">mask-border-slice</a> without keyword <a class="css" data-link-type="maybe" href="#valdef-mask-border-slice-fill" id="ref-for-valdef-mask-border-slice-fill">fill</a> does not clip middle piece of content anymore. Changed initial value from 0 fill to 0. <li data-md> Better description for <a class="property css" data-link-type="property" href="#propdef-clip-rule" id="ref-for-propdef-clip-rule①⓪">clip-rule</a>, <a class="property css" data-link-type="property" href="#propdef-mask-mode" id="ref-for-propdef-mask-mode①③">mask-mode</a> and <a class="property css" data-link-type="property" href="#propdef-mask-type" id="ref-for-propdef-mask-type①⓪">mask-type</a>. <li data-md> Rename <a class="css" data-link-type="maybe" href="#valdef-mask-border-slice-fill" id="ref-for-valdef-mask-border-slice-fill①">fill</a> and stroke keywords to <a class="css" data-link-type="maybe" href="#valdef-clip-path-fill-box" id="ref-for-valdef-clip-path-fill-box②">fill-box</a> and <a class="css" data-link-type="maybe" href="#valdef-clip-path-stroke-box" id="ref-for-valdef-clip-path-stroke-box②">stroke-box</a>. <li data-md> Added definition for <a data-link-type="dfn" href="#stroke-bounding-box" id="ref-for-stroke-bounding-box③">stroke bounding box</a>. <li data-md> Better differentiation between mask images: <a data-link-type="dfn" href="#mask-layer-image" id="ref-for-mask-layer-image②②">mask layer image</a> and <a data-link-type="dfn" href="#mask-border-image" id="ref-for-mask-border-image①⑥">mask border image</a>. </ul> The following changes were made since the <a href="https://www.w3.org/TR/2013/WD-css-masking-1-20131029/">29 October 2013 Last Call Working Draft</a>. <ul> <li data-md> Remove note that a future version of the spec will allow controlling hit testing on clipping. <li data-md> Changed order of sections within the document. <li data-md> Make clear that the <a data-link-type="dfn" href="https://www.w3.org/TR/css-cascade-5/#used-value" id="ref-for-used-value⑦">used value</a> of the properties <a class="property css" data-link-type="property" href="#propdef-mask-image" id="ref-for-propdef-mask-image①⑦">mask-image</a>, <a class="property css" data-link-type="property" href="#propdef-mask-repeat" id="ref-for-propdef-mask-repeat④">mask-repeat</a>, <a class="property css" data-link-type="property" href="#propdef-mask-position" id="ref-for-propdef-mask-position⑦">mask-position</a>, <a class="property css" data-link-type="property" href="#propdef-mask-clip" id="ref-for-propdef-mask-clip①①">mask-clip</a>, <a class="property css" data-link-type="property" href="#propdef-mask-origin" id="ref-for-propdef-mask-origin①⓪">mask-origin</a> and <a class="property css" data-link-type="property" href="#propdef-mask-size" id="ref-for-propdef-mask-size⑥">mask-size</a> must be ignored for <a class="production css" data-link-type="type" href="#typedef-mask-source" id="ref-for-typedef-mask-source⑥"><mask-source></a>, not the properties. <li data-md> "Animatable" section of <a class="property css" data-link-type="property" href="#propdef-mask-size" id="ref-for-propdef-mask-size⑦">mask-size</a>, <a class="property css" data-link-type="property" href="#propdef-mask-position" id="ref-for-propdef-mask-position⑧">mask-position</a> described as repeatable list of lists. Changed to a single list. <li data-md> Computed value of <a class="property css" data-link-type="property" href="#propdef-mask-repeat" id="ref-for-propdef-mask-repeat⑤">mask-repeat</a> and <a class="property css" data-link-type="property" href="#propdef-mask-position" id="ref-for-propdef-mask-position⑨">mask-position</a> was described as list of items. Changed to have just one value. <li data-md> Change link to ED from <a href="https://drafts.fxtf.org/masking/">https://drafts.fxtf.org/masking/</a> to <a href="https://drafts.fxtf.org/css-masking-1/">https://drafts.fxtf.org/css-masking-1/</a> </ul> The following significant changes were made since the <a href="https://www.w3.org/TR/2013/WD-css-masking-20130620/">20 June 2013 Working Draft</a>. <ul> <li data-md> <a class="property css" data-link-type="property" href="#propdef-mask" id="ref-for-propdef-mask①③">mask</a> resets mask-box properties. <li data-md> Initial values for <a class="property css" data-link-type="property" href="#propdef-mask-repeat" id="ref-for-propdef-mask-repeat⑥">mask-repeat</a>, <a class="property css" data-link-type="property" href="#propdef-mask-position" id="ref-for-propdef-mask-position①⓪">mask-position</a> and <a class="property css" data-link-type="property" href="#propdef-mask-origin" id="ref-for-propdef-mask-origin①①">mask-origin</a> changed to no-repeat, center and <a class="css" data-link-type="maybe" href="#valdef-mask-origin-border-box" id="ref-for-valdef-mask-origin-border-box②">border-box</a>. <li data-md> Multiple layers of mask images were deferred to a future level of this specification. <li data-md> Added security model for pixel operations and fetching of masking and clipping resources. <li data-md> Deferred "child" and select() function to next level. </ul> The following significant changes were made since the <a href="https://www.w3.org/TR/2012/WD-css-masking-20121115/">15 November 2012 Working Draft</a>. <ul> <li data-md> Better integration with terms and definitions of CSS Backgrounds and Borders module. <li data-md> Syntax changes on <a class="property css" data-link-type="property" href="#propdef-mask" id="ref-for-propdef-mask①④">mask</a> shorthand property to be conform with <a class="property css" data-link-type="property" href="https://www.w3.org/TR/css-backgrounds-3/#propdef-background" id="ref-for-propdef-background①">background</a> shorthand property. <li data-md> Define how the implementation can differ between an SVG resource (<a data-link-type="element" href="#elementdef-mask" id="ref-for-elementdef-mask④⑤">mask</a>, <a data-link-type="element" href="#elementdef-clippath" id="ref-for-elementdef-clippath③③">clipPath</a>) and an image resource. <li data-md> Added <a class="property css" data-link-type="property" href="#propdef-mask-mode" id="ref-for-propdef-mask-mode①④">mask-mode</a> property to alter between luminance and alpha mask on <a class="property css" data-link-type="property" href="#propdef-mask-image" id="ref-for-propdef-mask-image①⑧">mask-image</a>. <li data-md> Adapt IDL definition of SVGMaskElement and SVGClipPathElement to WebIDL. <li data-md> Further editorial changes. </ul> See detailed list of changes in the <a href="ChangeLog">ChangeLog</a>. <h2 class="no-num heading settled" id="acknowledgments">Acknowledgments<a class="self-link" href="#acknowledgments"></a></h2> Thanks to Elika J. Etemad, Cameron McCormack, Liam R. E. Quin, Björn Höhrmann, Alan Stearns, Jarek Foksa, David Baron, Boris Zbarsky, Markus Stange and Sara Soueidan for their careful reviews, comments, and corrections. Special thanks to CJ Gammon for graphical assets. </main> <h2 class="no-ref no-num heading settled" id="w3c-conformance"> Conformance<a class="self-link" href="#w3c-conformance"></a></h2> <h3 class="no-ref heading settled" id="w3c-conventions"> Document conventions<a class="self-link" href="#w3c-conventions"></a></h3> Conformance requirements are expressed with a combination of descriptive assertions and RFC 2119 terminology. The key words “MUST”, “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this document are to be interpreted as described in RFC 2119. However, for readability, these words do not appear in all uppercase letters in this specification. All of the text of this specification is normative except sections explicitly marked as non-normative, examples, and notes. <a data-link-type="biblio" href="#biblio-rfc2119" title="Key words for use in RFCs to Indicate Requirement Levels">[RFC2119]</a> Examples in this specification are introduced with the words “for example” or are set apart from the normative text with <code>class="example"</code>, like this: <div class="example" id="example-ae2b6bc0"> <a class="self-link" href="#example-ae2b6bc0"></a> This is an example of an informative example. </div> Informative notes begin with the word “Note” and are set apart from the normative text with <code>class="note"</code>, like this: Note, this is an informative note. Advisements are normative sections styled to evoke special attention and are set apart from other normative text with <code></code>, like this: UAs MUST provide an accessible alternative. <h3 class="no-ref heading settled" id="w3c-conformance-classes"> Conformance classes<a class="self-link" href="#w3c-conformance-classes"></a></h3> Conformance to this specification is defined for three conformance classes: <dl> <dt>style sheet <dd>A <a href="https://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS style sheet</a>. <dt>renderer <dd>A <a href="https://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> that interprets the semantics of a style sheet and renders documents that use them. <dt>authoring tool <dd>A <a href="https://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> that writes a style sheet. </dl> A style sheet is conformant to this specification if all of its statements that use syntax defined in this module are valid according to the generic CSS grammar and the individual grammars of each feature defined in this module. A renderer is conformant to this specification if, in addition to interpreting the style sheet as defined by the appropriate specifications, it supports all the features defined by this specification by parsing them correctly and rendering the document accordingly. However, the inability of a UA to correctly render a document due to limitations of the device does not make the UA non-conformant. (For example, a UA is not required to render color on a monochrome monitor.) An authoring tool is conformant to this specification if it writes style sheets that are syntactically correct according to the generic CSS grammar and the individual grammars of each feature in this module, and meet all other conformance requirements of style sheets as described in this module. <h3 class="no-ref heading settled" id="w3c-partial"> Partial implementations<a class="self-link" href="#w3c-partial"></a></h3> So that authors can exploit the forward-compatible parsing rules to assign fallback values, CSS renderers must treat as invalid (and <a href="https://www.w3.org/TR/CSS21/conform.html#ignore">ignore as appropriate</a>) any at-rules, properties, property values, keywords, and other syntactic constructs for which they have no usable level of support. In particular, user agents must not selectively ignore unsupported component values and honor supported values in a single multi-value property declaration: if any value is considered invalid (as unsupported values must be), CSS requires that the entire declaration be ignored. <h4 class="heading settled" id="w3c-conform-future-proofing"> Implementations of Unstable and Proprietary Features<a class="self-link" href="#w3c-conform-future-proofing"></a></h4> To avoid clashes with future stable CSS features, the CSSWG recommends <a href="https://www.w3.org/TR/CSS/#future-proofing">following best practices</a> for the implementation of <a href="https://www.w3.org/TR/CSS/#unstable">unstable</a> features and <a href="https://www.w3.org/TR/CSS/#proprietary-extension">proprietary extensions</a> to CSS. <h3 class="no-ref heading settled" id="w3c-testing"> Non-experimental implementations<a class="self-link" href="#w3c-testing"></a></h3> Once a specification reaches the Candidate Recommendation stage, non-experimental implementations are possible, and implementors should release an unprefixed implementation of any CR-level feature they can demonstrate to be correctly implemented according to spec. To establish and maintain the interoperability of CSS across implementations, the CSS Working Group requests that non-experimental CSS renderers submit an implementation report (and, if necessary, the testcases used for that implementation report) to the W3C before releasing an unprefixed implementation of any CSS features. Testcases submitted to W3C are subject to review and correction by the CSS Working Group. Further information on submitting testcases and implementation reports can be found from on the CSS Working Group’s website at <a href="https://www.w3.org/Style/CSS/Test/">https://www.w3.org/Style/CSS/Test/</a>. Questions should be directed to the <a href="https://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a> mailing list. <h3 class="no-ref heading settled" id="w3c-cr-exit-criteria"> CR exit criteria<a class="self-link" href="#w3c-cr-exit-criteria"></a></h3> For this specification to be advanced to Proposed Recommendation, there must be at least two independent, interoperable implementations of each feature. Each feature may be implemented by a different set of products, there is no requirement that all features be implemented by a single product. For the purposes of this criterion, we define the following terms: <dl> <dt>independent <dd>each implementation must be developed by a different party and cannot share, reuse, or derive from code used by another qualifying implementation. Sections of code that have no bearing on the implementation of this specification are exempt from this requirement. <dt>interoperable <dd>passing the respective test case(s) in the official CSS test suite, or, if the implementation is not a Web browser, an equivalent test. Every relevant test in the test suite should have an equivalent test created if such a user agent (UA) is to be used to claim interoperability. In addition if such a UA is to be used to claim interoperability, then there must one or more additional UAs which can also pass those equivalent tests in the same way for the purpose of interoperability. The equivalent tests must be made publicly available for the purposes of peer review. <dt>implementation <dd> a user agent which: <ol class="inline"> <li>implements the specification. <li>is available to the general public. The implementation may be a shipping product or other publicly available version (i.e., beta version, preview release, or "nightly build"). Non-shipping product releases must have implemented the feature(s) for a period of at least one month in order to demonstrate stability. <li>is not experimental (i.e., a version specifically designed to pass the test suite and is not intended for normal usage going forward). </ol> </dl> The specification will remain Candidate Recommendation for at least six months. <script src="https://www.w3.org/scripts/TR/2021/fixup.js"></script> <h2 class="no-num no-ref heading settled" id="index">Index<a class="self-link" href="#index"></a></h2> <h3 class="no-num no-ref heading settled" id="index-defined-here">Terms defined by this specification<a class="self-link" href="#index-defined-here"></a></h3> <ul class="index"> <li><a href="#valdef-mask-composite-add">add</a>, in § 7.8 <li> alpha <ul> <li><a href="#valdef-mask-border-mode-alpha">value for mask-border-mode</a>, in § 8.2 <li><a href="#valdef-mask-mode-alpha">value for mask-mode</a>, in § 7.2 <li><a href="#valdef-mask-type-alpha">value for mask-type</a>, in § 9.2 </ul> <li> border-box <ul> <li><a href="#valdef-mask-clip-border-box">value for mask-clip</a>, in § 7.5 <li><a href="#valdef-mask-origin-border-box">value for mask-origin</a>, in § 7.6 </ul> <li><a href="#typedef-clip-bottom"><bottom></a>, in § Unnumbered section <li><a href="#propdef-clip">clip</a>, in § Unnumbered section <li><a href="#propdef-clip-path">clip-path</a>, in § 5.1 <li><a href="#elementdef-clippath">clipPath</a>, in § 6.1 <li> clipPathUnits <ul> <li><a href="#dom-svgclippathelement-clippathunits">attribute for SVGClipPathElement</a>, in § Unnumbered section <li><a href="#element-attrdef-clippath-clippathunits">element-attr for clipPath</a>, in § 6.1 </ul> <li><a href="#clipping-path">clipping path</a>, in § 1.1 <li><a href="#clipping-region">clipping region</a>, in § 5 <li><a href="#propdef-clip-rule">clip-rule</a>, in § 6.2 <li><a href="#typedef-clip-source"><clip-source></a>, in § 5.1 <li><a href="#typedef-compositing-operator"><compositing-operator></a>, in § 7.8 <li> content-box <ul> <li><a href="#valdef-mask-clip-content-box">value for mask-clip</a>, in § 7.5 <li><a href="#valdef-mask-origin-content-box">value for mask-origin</a>, in § 7.6 </ul> <li><a href="#destination">destination</a>, in § 7.8 <li><a href="#valdef-clip-rule-evenodd">evenodd</a>, in § 6.2 <li><a href="#valdef-mask-composite-exclude">exclude</a>, in § 7.8 <li><a href="#valdef-mask-border-slice-fill">fill</a>, in § 8.3 <li> fill-box <ul> <li><a href="#valdef-clip-path-fill-box">value for clip-path</a>, in § 5.1 <li><a href="#valdef-mask-clip-fill-box">value for mask-clip</a>, in § 7.5 <li><a href="#valdef-mask-origin-fill-box">value for mask-origin</a>, in § 7.6 </ul> <li><a href="#typedef-geometry-box"><geometry-box></a>, in § 5.1 <li> height <ul> <li><a href="#dom-svgmaskelement-height">attribute for SVGMaskElement</a>, in § Unnumbered section <li><a href="#element-attrdef-mask-height">element-attr for mask</a>, in § 9.1 </ul> <li><a href="#valdef-mask-composite-intersect">intersect</a>, in § 7.8 <li><a href="#typedef-clip-left"><left></a>, in § Unnumbered section <li> luminance <ul> <li><a href="#valdef-mask-border-mode-luminance">value for mask-border-mode</a>, in § 8.2 <li><a href="#valdef-mask-mode-luminance">value for mask-mode</a>, in § 7.2 <li><a href="#valdef-mask-type-luminance">value for mask-type</a>, in § 9.2 </ul> <li> mask <ul> <li><a href="#elementdef-mask">(element)</a>, in § 9.1 <li><a href="#propdef-mask">(property)</a>, in § 7.9 </ul> <li><a href="#propdef-mask-border">mask-border</a>, in § 8.7 <li><a href="#mask-border-image">mask border image</a>, in § 8.1 <li><a href="#mask-border-image-area">mask border image area</a>, in § 8.4 <li><a href="#propdef-mask-border-mode">mask-border-mode</a>, in § 8.2 <li><a href="#propdef-mask-border-outset">mask-border-outset</a>, in § 8.5 <li><a href="#propdef-mask-border-repeat">mask-border-repeat</a>, in § 8.6 <li><a href="#propdef-mask-border-slice">mask-border-slice</a>, in § 8.3 <li><a href="#propdef-mask-border-source">mask-border-source</a>, in § 8.1 <li><a href="#propdef-mask-border-width">mask-border-width</a>, in § 8.4 <li><a href="#propdef-mask-clip">mask-clip</a>, in § 7.5 <li><a href="#propdef-mask-composite">mask-composite</a>, in § 7.8 <li> maskContentUnits <ul> <li><a href="#dom-svgmaskelement-maskcontentunits">attribute for SVGMaskElement</a>, in § Unnumbered section <li><a href="#element-attrdef-mask-maskcontentunits">element-attr for mask</a>, in § 9.1 </ul> <li><a href="#mask-image">mask image</a>, in § 7.10.1 <li><a href="#propdef-mask-image">mask-image</a>, in § 7.1 <li><a href="#typedef-masking-mode"><masking-mode></a>, in § 7.2 <li><a href="#typedef-mask-layer"><mask-layer></a>, in § 7.9 <li><a href="#mask-layer-image">mask layer image</a>, in § 7.1 <li><a href="#propdef-mask-mode">mask-mode</a>, in § 7.2 <li><a href="#propdef-mask-origin">mask-origin</a>, in § 7.6 <li><a href="#mask-painting-area">mask painting area</a>, in § 7.5 <li> mask-position <ul> <li><a href="#propdef-mask-position">(property)</a>, in § 7.4 <li><a href="#mask-position">definition of</a>, in § 4 </ul> <li><a href="#mask-positioning-area">mask positioning area</a>, in § 7.6 <li><a href="#typedef-mask-reference"><mask-reference></a>, in § 7.1 <li><a href="#propdef-mask-repeat">mask-repeat</a>, in § 7.3 <li> mask-size <ul> <li><a href="#propdef-mask-size">(property)</a>, in § 7.7 <li><a href="#mask-size">definition of</a>, in § 4 </ul> <li><a href="#typedef-mask-source"><mask-source></a>, in § 7.1 <li><a href="#propdef-mask-type">mask-type</a>, in § 9.2 <li> maskUnits <ul> <li><a href="#dom-svgmaskelement-maskunits">attribute for SVGMaskElement</a>, in § Unnumbered section <li><a href="#element-attrdef-mask-maskunits">element-attr for mask</a>, in § 9.1 </ul> <li><a href="#valdef-mask-mode-match-source">match-source</a>, in § 7.2 <li><a href="#valdef-mask-clip-no-clip">no-clip</a>, in § 7.5 <li><a href="#valdef-clip-rule-nonzero">nonzero</a>, in § 6.2 <li> objectBoundingBox <ul> <li><a href="#valdef-clippathunits-objectboundingbox">value for clipPathUnits</a>, in § 6.1 <li><a href="#valdef-maskcontentunits-objectboundingbox">value for maskContentUnits</a>, in § 9.1 <li><a href="#valdef-maskunits-objectboundingbox">value for maskUnits</a>, in § 9.1 </ul> <li> padding-box <ul> <li><a href="#valdef-mask-clip-padding-box">value for mask-clip</a>, in § 7.5 <li><a href="#valdef-mask-origin-padding-box">value for mask-origin</a>, in § 7.6 </ul> <li><a href="#funcdef-clip-rect">rect()</a>, in § Unnumbered section <li><a href="#typedef-clip-right"><right></a>, in § Unnumbered section <li><a href="#source">source</a>, in § 7.8 <li><a href="#stroke-bounding-box">stroke bounding box</a>, in § Unnumbered section <li> stroke-box <ul> <li><a href="#valdef-clip-path-stroke-box">value for clip-path</a>, in § 5.1 <li><a href="#valdef-mask-clip-stroke-box">value for mask-clip</a>, in § 7.5 <li><a href="#valdef-mask-origin-stroke-box">value for mask-origin</a>, in § 7.6 </ul> <li><a href="#valdef-mask-composite-subtract">subtract</a>, in § 7.8 <li><a href="#svgclippathelement">SVGClipPathElement</a>, in § Unnumbered section <li><a href="#svgmaskelement">SVGMaskElement</a>, in § Unnumbered section <li><a href="#typedef-clip-top"><top></a>, in § Unnumbered section <li><a href="#dom-svgclippathelement-transform">transform</a>, in § Unnumbered section <li><a href="#valdef-mask-image-url"><url></a>, in § 7.1 <li> userSpaceOnUse <ul> <li><a href="#valdef-clippathunits-userspaceonuse">value for clipPathUnits</a>, in § 6.1 <li><a href="#valdef-maskcontentunits-userspaceonuse">value for maskContentUnits</a>, in § 9.1 <li><a href="#valdef-maskunits-userspaceonuse">value for maskUnits</a>, in § 9.1 </ul> <li> view-box <ul> <li><a href="#valdef-clip-path-view-box">value for clip-path</a>, in § 5.1 <li><a href="#valdef-mask-clip-view-box">value for mask-clip</a>, in § 7.5 <li><a href="#valdef-mask-origin-view-box">value for mask-origin</a>, in § 7.6 </ul> <li> width <ul> <li><a href="#dom-svgmaskelement-width">attribute for SVGMaskElement</a>, in § Unnumbered section <li><a href="#element-attrdef-mask-width">element-attr for mask</a>, in § 9.1 </ul> <li> x <ul> <li><a href="#dom-svgmaskelement-x">attribute for SVGMaskElement</a>, in § Unnumbered section <li><a href="#element-attrdef-mask-x">element-attr for mask</a>, in § 9.1 </ul> <li> y <ul> <li><a href="#dom-svgmaskelement-y">attribute for SVGMaskElement</a>, in § Unnumbered section <li><a href="#element-attrdef-mask-y">element-attr for mask</a>, in § 9.1 </ul> </ul> <h3 class="no-num no-ref heading settled" id="index-defined-elsewhere">Terms defined by reference<a class="self-link" href="#index-defined-elsewhere"></a></h3> <ul class="index"> <li> <a data-link-type="biblio">[CSS-BORDERS-4]</a> defines the following terms: <ul> <li>border-radius </ul> <li> <a data-link-type="biblio">[CSS-BOX-4]</a> defines the following terms: <ul> <li><coord-box> </ul> <li> <a data-link-type="biblio">[CSS-BREAK-4]</a> defines the following terms: <ul> <li>box-decoration-break </ul> <li> <a data-link-type="biblio">[CSS-CASCADE-5]</a> defines the following terms: <ul> <li>used value </ul> <li> <a data-link-type="biblio">[CSS-COLOR-4]</a> defines the following terms: <ul> <li>color <li>opacity </ul> <li> <a data-link-type="biblio">[CSS-DISPLAY-3]</a> defines the following terms: <ul> <li>display <li>none <li>visibility </ul> <li> <a data-link-type="biblio">[CSS-FONTS-4]</a> defines the following terms: <ul> <li>font <li>font-family <li>font-size <li>font-stretch <li>font-style <li>font-variant <li>font-weight </ul> <li> <a data-link-type="biblio">[CSS-FONTS-5]</a> defines the following terms: <ul> <li>font-size-adjust </ul> <li> <a data-link-type="biblio">[CSS-IMAGES-3]</a> defines the following terms: <ul> <li><image> <li>image-rendering </ul> <li> <a data-link-type="biblio">[CSS-INLINE-3]</a> defines the following terms: <ul> <li>alignment-baseline <li>baseline-shift <li>dominant-baseline </ul> <li> <a data-link-type="biblio">[CSS-OVERFLOW-3]</a> defines the following terms: <ul> <li>overflow <li>visible </ul> <li> <a data-link-type="biblio">[CSS-SHAPES]</a> defines the following terms: <ul> <li><basic-shape> <li><shape-box> <li>polygon() </ul> <li> <a data-link-type="biblio">[CSS-TEXT-4]</a> defines the following terms: <ul> <li>letter-spacing <li>word-spacing </ul> <li> <a data-link-type="biblio">[CSS-TEXT-DECOR-4]</a> defines the following terms: <ul> <li>text-decoration </ul> <li> <a data-link-type="biblio">[CSS-UI-4]</a> defines the following terms: <ul> <li>cursor <li>pointer-events </ul> <li> <a data-link-type="biblio">[CSS-VALUES-4]</a> defines the following terms: <ul> <li># <li><length-percentage> <li><length> <li><number> <li><percentage> <li><position> <li><url> <li>? <li>px <li>{a,b} <li>| <li>|| </ul> <li> <a data-link-type="biblio">[CSS-WRITING-MODES-3]</a> defines the following terms: <ul> <li>direction <li>unicode-bidi </ul> <li> <a data-link-type="biblio">[CSS-WRITING-MODES-4]</a> defines the following terms: <ul> <li>glyph-orientation-vertical <li>writing-mode </ul> <li> <a data-link-type="biblio">[CSS21]</a> defines the following terms: <ul> <li>stacking context </ul> <li> <a data-link-type="biblio">[CSS22]</a> defines the following terms: <ul> <li>auto </ul> <li> <a data-link-type="biblio">[CSS3-TRANSFORMS]</a> defines the following terms: <ul> <li>transform <li>user coordinate system </ul> <li> <a data-link-type="biblio">[CSS3BG]</a> defines the following terms: <ul> <li><bg-size> <li><repeat-style> <li>background <li>background painting area <li>background positioning area <li>background-origin <li>background-position <li>background-repeat <li>background-size <li>border image area <li>border-image <li>border-image-repeat <li>border-image-slice <li>border-image-width <li>border-width </ul> <li> <a data-link-type="biblio">[FILL-STROKE-3]</a> defines the following terms: <ul> <li>miter <li>square </ul> <li> <a data-link-type="biblio">[FILTER-EFFECTS]</a> defines the following terms: <ul> <li>color-interpolation-filters <li>fecolormatrix <li>filter <li>flood-color <li>flood-opacity <li>lighting-color <li>linearrgb </ul> <li> <a data-link-type="biblio">[SVG-ANIMATIONS]</a> defines the following terms: <ul> <li>animate <li>animatemotion <li>animatetransform <li>set </ul> <li> <a data-link-type="biblio">[SVG2]</a> defines the following terms: <ul> <li>SVGAnimatedEnumeration <li>SVGAnimatedLength <li>SVGAnimatedTransformList <li>SVGElement <li>SVGUnitTypes <li>a <li>basic shape <li>bounding box <li>circle <li>color-interpolation <li>color-rendering <li>container element <li>defs <li>desc <li>ellipse <li>fill <li>fill-opacity <li>fill-rule <li>foreignobject <li>g <li>graphics element <li>image <li>line <li>lineargradient <li>marker <li>marker-end <li>marker-mid <li>marker-start <li>metadata <li>never-rendered element <li>object bounding box <li>path <li>pattern <li>polygon <li>polyline <li>radialgradient <li>rect <li>script <li>shape-rendering <li>stop-color <li>stop-opacity <li>stroke <li>stroke-dasharray <li>stroke-dashoffset <li>stroke-linecap <li>stroke-linejoin <li>stroke-miterlimit <li>stroke-opacity <li>stroke-width <li>style <li>svg <li>switch <li>symbol <li>text <li>text content element <li>text-anchor <li>text-rendering <li>title <li>use <li>view <li>viewbox </ul> <li> <a data-link-type="biblio">[WEBIDL]</a> defines the following terms: <ul> <li>Exposed </ul> </ul> <h2 class="no-num no-ref heading settled" id="references">References<a class="self-link" href="#references"></a></h2> <h3 class="no-num no-ref heading settled" id="normative">Normative References<a class="self-link" href="#normative"></a></h3> <dl> <dt id="biblio-compositing-1">[COMPOSITING-1] <dd>Rik Cabanier; Nikos Andronikos. <a href="https://www.w3.org/TR/compositing-1/"><cite>Compositing and Blending Level 1</cite></a>. 13 January 2015. CR. URL: <a href="https://www.w3.org/TR/compositing-1/">https://www.w3.org/TR/compositing-1/</a> <dt id="biblio-css-borders-4">[CSS-BORDERS-4] <dd><a href="https://drafts.csswg.org/css-borders-4/"><cite>CSS Borders and Box Decorations Module Level 4</cite></a>. Editor's Draft. URL: <a href="https://drafts.csswg.org/css-borders-4/">https://drafts.csswg.org/css-borders-4/</a> <dt id="biblio-css-box-4">[CSS-BOX-4] <dd>Elika Etemad. <a href="https://www.w3.org/TR/css-box-4/"><cite>CSS Box Model Module Level 4</cite></a>. 3 November 2022. WD. URL: <a href="https://www.w3.org/TR/css-box-4/">https://www.w3.org/TR/css-box-4/</a> <dt id="biblio-css-break-4">[CSS-BREAK-4] <dd>Rossen Atanassov; Elika Etemad. <a href="https://www.w3.org/TR/css-break-4/"><cite>CSS Fragmentation Module Level 4</cite></a>. 18 December 2018. WD. URL: <a href="https://www.w3.org/TR/css-break-4/">https://www.w3.org/TR/css-break-4/</a> <dt id="biblio-css-cascade-5">[CSS-CASCADE-5] <dd>Elika Etemad; Miriam Suzanne; Tab Atkins Jr.. <a href="https://www.w3.org/TR/css-cascade-5/"><cite>CSS Cascading and Inheritance Level 5</cite></a>. 13 January 2022. CR. URL: <a href="https://www.w3.org/TR/css-cascade-5/">https://www.w3.org/TR/css-cascade-5/</a> <dt id="biblio-css-color-4">[CSS-COLOR-4] <dd>Tab Atkins Jr.; Chris Lilley; Lea Verou. <a href="https://www.w3.org/TR/css-color-4/"><cite>CSS Color Module Level 4</cite></a>. 1 November 2022. CR. URL: <a href="https://www.w3.org/TR/css-color-4/">https://www.w3.org/TR/css-color-4/</a> <dt id="biblio-css-display-3">[CSS-DISPLAY-3] <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://www.w3.org/TR/css-display-3/"><cite>CSS Display Module Level 3</cite></a>. 30 March 2023. CR. URL: <a href="https://www.w3.org/TR/css-display-3/">https://www.w3.org/TR/css-display-3/</a> <dt id="biblio-css-fonts-4">[CSS-FONTS-4] <dd>Chris Lilley. <a href="https://www.w3.org/TR/css-fonts-4/"><cite>CSS Fonts Module Level 4</cite></a>. 1 February 2024. WD. URL: <a href="https://www.w3.org/TR/css-fonts-4/">https://www.w3.org/TR/css-fonts-4/</a> <dt id="biblio-css-fonts-5">[CSS-FONTS-5] <dd>Chris Lilley. <a href="https://www.w3.org/TR/css-fonts-5/"><cite>CSS Fonts Module Level 5</cite></a>. 6 February 2024. WD. URL: <a href="https://www.w3.org/TR/css-fonts-5/">https://www.w3.org/TR/css-fonts-5/</a> <dt id="biblio-css-images-3">[CSS-IMAGES-3] <dd>Tab Atkins Jr.; Elika Etemad; Lea Verou. <a href="https://www.w3.org/TR/css-images-3/"><cite>CSS Images Module Level 3</cite></a>. 18 December 2023. CR. URL: <a href="https://www.w3.org/TR/css-images-3/">https://www.w3.org/TR/css-images-3/</a> <dt id="biblio-css-inline-3">[CSS-INLINE-3] <dd>Dave Cramer; Elika Etemad. <a href="https://www.w3.org/TR/css-inline-3/"><cite>CSS Inline Layout Module Level 3</cite></a>. 1 April 2023. WD. URL: <a href="https://www.w3.org/TR/css-inline-3/">https://www.w3.org/TR/css-inline-3/</a> <dt id="biblio-css-overflow-3">[CSS-OVERFLOW-3] <dd>Elika Etemad; Florian Rivoal. <a href="https://www.w3.org/TR/css-overflow-3/"><cite>CSS Overflow Module Level 3</cite></a>. 29 March 2023. WD. URL: <a href="https://www.w3.org/TR/css-overflow-3/">https://www.w3.org/TR/css-overflow-3/</a> <dt id="biblio-css-shapes">[CSS-SHAPES] <dd>Rossen Atanassov; Alan Stearns. <a href="https://www.w3.org/TR/css-shapes-1/"><cite>CSS Shapes Module Level 1</cite></a>. 15 November 2022. CR. URL: <a href="https://www.w3.org/TR/css-shapes-1/">https://www.w3.org/TR/css-shapes-1/</a> <dt id="biblio-css-text-4">[CSS-TEXT-4] <dd>Elika Etemad; et al. <a href="https://www.w3.org/TR/css-text-4/"><cite>CSS Text Module Level 4</cite></a>. 20 October 2023. WD. URL: <a href="https://www.w3.org/TR/css-text-4/">https://www.w3.org/TR/css-text-4/</a> <dt id="biblio-css-text-decor-4">[CSS-TEXT-DECOR-4] <dd>Elika Etemad; Koji Ishii. <a href="https://www.w3.org/TR/css-text-decor-4/"><cite>CSS Text Decoration Module Level 4</cite></a>. 4 May 2022. WD. URL: <a href="https://www.w3.org/TR/css-text-decor-4/">https://www.w3.org/TR/css-text-decor-4/</a> <dt id="biblio-css-ui-4">[CSS-UI-4] <dd>Florian Rivoal. <a href="https://www.w3.org/TR/css-ui-4/"><cite>CSS Basic User Interface Module Level 4</cite></a>. 16 March 2021. WD. URL: <a href="https://www.w3.org/TR/css-ui-4/">https://www.w3.org/TR/css-ui-4/</a> <dt id="biblio-css-values-4">[CSS-VALUES-4] <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://www.w3.org/TR/css-values-4/"><cite>CSS Values and Units Module Level 4</cite></a>. 18 December 2023. WD. URL: <a href="https://www.w3.org/TR/css-values-4/">https://www.w3.org/TR/css-values-4/</a> <dt id="biblio-css-writing-modes-3">[CSS-WRITING-MODES-3] <dd>Elika Etemad; Koji Ishii. <a href="https://www.w3.org/TR/css-writing-modes-3/"><cite>CSS Writing Modes Level 3</cite></a>. 10 December 2019. REC. URL: <a href="https://www.w3.org/TR/css-writing-modes-3/">https://www.w3.org/TR/css-writing-modes-3/</a> <dt id="biblio-css-writing-modes-4">[CSS-WRITING-MODES-4] <dd>Elika Etemad; Koji Ishii. <a href="https://www.w3.org/TR/css-writing-modes-4/"><cite>CSS Writing Modes Level 4</cite></a>. 30 July 2019. CR. URL: <a href="https://www.w3.org/TR/css-writing-modes-4/">https://www.w3.org/TR/css-writing-modes-4/</a> <dt id="biblio-css21">[CSS21] <dd>Bert Bos; et al. <a href="https://www.w3.org/TR/CSS21/"><cite>Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification</cite></a>. 7 June 2011. REC. URL: <a href="https://www.w3.org/TR/CSS21/">https://www.w3.org/TR/CSS21/</a> <dt id="biblio-css22">[CSS22] <dd>Bert Bos. <a href="https://www.w3.org/TR/CSS22/"><cite>Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification</cite></a>. 12 April 2016. WD. URL: <a href="https://www.w3.org/TR/CSS22/">https://www.w3.org/TR/CSS22/</a> <dt id="biblio-css3-transforms">[CSS3-TRANSFORMS] <dd>Simon Fraser; et al. <a href="https://www.w3.org/TR/css-transforms-1/"><cite>CSS Transforms Module Level 1</cite></a>. 14 February 2019. CR. URL: <a href="https://www.w3.org/TR/css-transforms-1/">https://www.w3.org/TR/css-transforms-1/</a> <dt id="biblio-css3bg">[CSS3BG] <dd>Elika Etemad; Brad Kemper. <a href="https://www.w3.org/TR/css-backgrounds-3/"><cite>CSS Backgrounds and Borders Module Level 3</cite></a>. 19 December 2023. CR. URL: <a href="https://www.w3.org/TR/css-backgrounds-3/">https://www.w3.org/TR/css-backgrounds-3/</a> <dt id="biblio-css3val">[CSS3VAL] <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://www.w3.org/TR/css-values-3/"><cite>CSS Values and Units Module Level 3</cite></a>. 1 December 2022. CR. URL: <a href="https://www.w3.org/TR/css-values-3/">https://www.w3.org/TR/css-values-3/</a> <dt id="biblio-fetch">[FETCH] <dd>Anne van Kesteren. <a href="https://fetch.spec.whatwg.org/"><cite>Fetch Standard</cite></a>. Living Standard. URL: <a href="https://fetch.spec.whatwg.org/">https://fetch.spec.whatwg.org/</a> <dt id="biblio-fill-stroke-3">[FILL-STROKE-3] <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://www.w3.org/TR/fill-stroke-3/"><cite>CSS Fill and Stroke Module Level 3</cite></a>. 13 April 2017. WD. URL: <a href="https://www.w3.org/TR/fill-stroke-3/">https://www.w3.org/TR/fill-stroke-3/</a> <dt id="biblio-filter-effects">[FILTER-EFFECTS] <dd>Dirk Schulze; Dean Jackson. <a href="https://www.w3.org/TR/filter-effects-1/"><cite>Filter Effects Module Level 1</cite></a>. 18 December 2018. WD. URL: <a href="https://www.w3.org/TR/filter-effects-1/">https://www.w3.org/TR/filter-effects-1/</a> <dt id="biblio-rfc2119">[RFC2119] <dd>S. Bradner. <a href="https://datatracker.ietf.org/doc/html/rfc2119"><cite>Key words for use in RFCs to Indicate Requirement Levels</cite></a>. March 1997. Best Current Practice. URL: <a href="https://datatracker.ietf.org/doc/html/rfc2119">https://datatracker.ietf.org/doc/html/rfc2119</a> <dt id="biblio-svg-animations">[SVG-ANIMATIONS] <dd><a href="https://svgwg.org/specs/animations/"><cite>SVG Animations Level 2</cite></a>. Editor's Draft. URL: <a href="https://svgwg.org/specs/animations/">https://svgwg.org/specs/animations/</a> <dt id="biblio-svg11">[SVG11] <dd>Erik Dahlström; et al. <a href="https://www.w3.org/TR/SVG11/"><cite>Scalable Vector Graphics (SVG) 1.1 (Second Edition)</cite></a>. 16 August 2011. REC. URL: <a href="https://www.w3.org/TR/SVG11/">https://www.w3.org/TR/SVG11/</a> <dt id="biblio-svg2">[SVG2] <dd>Amelia Bellamy-Royds; et al. <a href="https://www.w3.org/TR/SVG2/"><cite>Scalable Vector Graphics (SVG) 2</cite></a>. 4 October 2018. CR. URL: <a href="https://www.w3.org/TR/SVG2/">https://www.w3.org/TR/SVG2/</a> <dt id="biblio-webidl">[WEBIDL] <dd>Edgar Chen; Timothy Gu. <a href="https://webidl.spec.whatwg.org/"><cite>Web IDL Standard</cite></a>. Living Standard. URL: <a href="https://webidl.spec.whatwg.org/">https://webidl.spec.whatwg.org/</a> </dl> <h3 class="no-num no-ref heading settled" id="informative">Informative References<a class="self-link" href="#informative"></a></h3> <dl> <dt id="biblio-css3color">[CSS3COLOR] <dd>Tantek Çelik; Chris Lilley; David Baron. <a href="https://www.w3.org/TR/css-color-3/"><cite>CSS Color Module Level 3</cite></a>. 18 January 2022. REC. URL: <a href="https://www.w3.org/TR/css-color-3/">https://www.w3.org/TR/css-color-3/</a> </dl> <h2 class="no-num no-ref heading settled" id="property-index">Property Index<a class="self-link" href="#property-index"></a></h2> <div class="big-element-wrapper"> <table class="index"> <thead> <tr> <th scope="col">Name <th scope="col">Value <th scope="col">Initial <th scope="col">Applies to <th scope="col">Inh. <th scope="col">%ages <th scope="col">Animation type <th scope="col">Canonical order <th scope="col">Computed value <th scope="col">Media <tbody> <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-clip" id="ref-for-propdef-clip⑧">clip</a> <td><rect()> | auto <td>auto <td>Absolutely positioned elements. In SVG, it applies to elements which establish a new viewport, pattern elements and mask elements. <td>no <td>n/a <td>by computed value <td>per grammar <td>as specified <td>visual <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-clip-path" id="ref-for-propdef-clip-path①⑧">clip-path</a> <td><clip-source> | [ <basic-shape> || <geometry-box> ] | none <td>none <td>All elements. In SVG, it applies to container elements excluding the defs element, all graphics elements and the use element <td>no <td>n/a <td>by computed value <td>per grammar <td>as specified, but with <url> values made absolute <td>visual <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-clip-rule" id="ref-for-propdef-clip-rule①①">clip-rule</a> <td>nonzero | evenodd <td>nonzero <td>Applies to SVG graphics elements <td>yes <td>n/a <td>discrete <td>per grammar <td>as specified <td>visual <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-mask" id="ref-for-propdef-mask①⑤">mask</a> <td><mask-layer># <td>see individual properties <td>All elements. In SVG, it applies to container elements excluding the defs element, all graphics elements and the use element <td>no <td>see individual properties <td>see individual properties <td>per grammar <td>see individual properties <td>visual <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-mask-border" id="ref-for-propdef-mask-border⑨">mask-border</a> <td><'mask-border-source'> || <'mask-border-slice'> [ / <'mask-border-width'>? [ / <'mask-border-outset'> ]? ]? || <'mask-border-repeat'> || <'mask-border-mode'> <td>See individual properties <td>See individual properties <td>no <td>n/a <td>See individual properties <td>per grammar <td>See individual properties <td>visual <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-mask-border-mode" id="ref-for-propdef-mask-border-mode⑤">mask-border-mode</a> <td>luminance | alpha <td>alpha <td>All elements. In SVG, it applies to container elements excluding the defs element, all graphics elements and the use element <td>no <td>n/a <td>discrete <td>per grammar <td>as specified <td>visual <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-mask-border-outset" id="ref-for-propdef-mask-border-outset⑥">mask-border-outset</a> <td>[ <length> | <number> ]{1,4} <td>0 <td>All elements. In SVG, it applies to container elements excluding the defs element, all graphics elements and the use element <td>no <td>n/a <td>discrete <td>per grammar <td>all <length>s made absolute, otherwise as specified <td>visual <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-mask-border-repeat" id="ref-for-propdef-mask-border-repeat④">mask-border-repeat</a> <td>[ stretch | repeat | round | space ]{1,2} <td>stretch <td>All elements. In SVG, it applies to container elements excluding the defs element, all graphics elements and the use element <td>no <td>n/a <td>discrete <td>per grammar <td>as specified <td>visual <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-mask-border-slice" id="ref-for-propdef-mask-border-slice⑥">mask-border-slice</a> <td>[ <number> | <percentage> ]{1,4} fill? <td>0 <td>All elements. In SVG, it applies to container elements excluding the defs element, all graphics elements and the use element <td>no <td>refer to size of the mask border image <td>discrete <td>per grammar <td>as specified <td>visual <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-mask-border-source" id="ref-for-propdef-mask-border-source①⑦">mask-border-source</a> <td>none | <image> <td>none <td>All elements. In SVG, it applies to container elements excluding the defs element, all graphics elements and the use element <td>no <td>n/a <td>discrete <td>per grammar <td>they keyword none or the computed <image> <td>visual <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-mask-border-width" id="ref-for-propdef-mask-border-width⑤">mask-border-width</a> <td>[ <length-percentage> | <number> | auto ]{1,4} <td>auto <td>All elements. In SVG, it applies to container elements excluding the defs element, all graphics elements and the use element <td>no <td>relative to width/height of the mask border image area <td>discrete <td>per grammar <td>all <length>s made absolute, otherwise as specified <td>visual <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-mask-clip" id="ref-for-propdef-mask-clip①②">mask-clip</a> <td>[ <coord-box> | no-clip ]# <td>border-box <td>All elements. In SVG, it applies to container elements excluding the defs element, all graphics elements and the use element <td>no <td>n/a <td>discrete <td>per grammar <td>as specified <td>visual <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-mask-composite" id="ref-for-propdef-mask-composite⑦">mask-composite</a> <td><compositing-operator># <td>add <td>All elements. In SVG, it applies to container elements without the defs element and all graphics elements <td>no <td>n/a <td>discrete <td>per grammar <td>as specified <td>visual <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-mask-image" id="ref-for-propdef-mask-image①⑨">mask-image</a> <td><mask-reference># <td>none <td>All elements. In SVG, it applies to container elements excluding the defs element, all graphics elements and the use element <td>no <td>n/a <td>discrete <td>per grammar <td>the keyword none, a computed <image>, or a computed <url> <td>visual <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-mask-mode" id="ref-for-propdef-mask-mode①⑤">mask-mode</a> <td><masking-mode># <td>match-source <td>All elements. In SVG, it applies to container elements excluding the defs element, all graphics elements and the use element <td>no <td>n/a <td>discrete <td>per grammar <td>as specified <td>visual <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-mask-origin" id="ref-for-propdef-mask-origin①②">mask-origin</a> <td><coord-box># <td>border-box <td>All elements. In SVG, it applies to container elements excluding the defs element, all graphics elements and the use element <td>no <td>n/a <td>discrete <td>per grammar <td>as specified <td>visual <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-mask-position" id="ref-for-propdef-mask-position①①">mask-position</a> <td><position># <td>0% 0% <td>All elements. In SVG, it applies to container elements excluding the defs element, all graphics elements and the use element <td>no <td>refer to size of mask painting area minus size of mask layer image; see text background-position [CSS3BG] <td>repeatable list <td>per grammar <td>Consisting of: two keywords representing the origin and two offsets from that origin, each given as an absolute length (if given a <length>), otherwise as a percentage. <td>visual <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-mask-repeat" id="ref-for-propdef-mask-repeat⑦">mask-repeat</a> <td><repeat-style># <td>repeat <td>All elements. In SVG, it applies to container elements excluding the defs element, all graphics elements and the use element <td>no <td>n/a <td>discrete <td>per grammar <td>Consists of: two keywords, one per dimension <td>visual <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-mask-size" id="ref-for-propdef-mask-size⑧">mask-size</a> <td><bg-size># <td>auto <td>All elements. In SVG, it applies to container elements excluding the defs element, all graphics elements and the use element <td>no <td>n/a <td>repeatable list <td>per grammar <td>as specified, but with lengths made absolute <td>visual <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-mask-type" id="ref-for-propdef-mask-type①①">mask-type</a> <td>luminance | alpha <td>luminance <td>mask elements <td>no <td>n/a <td>discrete <td>per grammar <td>as specified <td>visual </table> </div> <h2 class="no-num no-ref heading settled" id="idl-index">IDL Index<a class="self-link" href="#idl-index"></a></h2> <pre class="idl highlight def">[<a class="idl-code" data-link-type="extended-attribute" href="https://webidl.spec.whatwg.org/#Exposed"><c- g>Exposed</c-></a>=<c- n>Window</c->] <c- b>interface</c-> <a class="idl-code" data-link-type="interface" href="#svgclippathelement"><c- g>SVGClipPathElement</c-></a> : <a data-link-type="idl-name" href="https://www.w3.org/TR/SVG2/types.html#InterfaceSVGElement"><c- n>SVGElement</c-></a> { <c- b>readonly</c-> <c- b>attribute</c-> <a data-link-type="idl-name" href="https://www.w3.org/TR/SVG2/types.html#InterfaceSVGAnimatedEnumeration"><c- n>SVGAnimatedEnumeration</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="SVGAnimatedEnumeration" href="#dom-svgclippathelement-clippathunits"><c- g>clipPathUnits</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <a data-link-type="idl-name" href="https://www.w3.org/TR/SVG2/coords.html#InterfaceSVGAnimatedTransformList"><c- n>SVGAnimatedTransformList</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="SVGAnimatedTransformList" href="#dom-svgclippathelement-transform"><c- g>transform</c-></a>; }; [<a class="idl-code" data-link-type="extended-attribute" href="https://webidl.spec.whatwg.org/#Exposed"><c- g>Exposed</c-></a>=<c- n>Window</c->] <c- b>interface</c-> <a class="idl-code" data-link-type="interface" href="#svgmaskelement"><c- g>SVGMaskElement</c-></a> : <a data-link-type="idl-name" href="https://www.w3.org/TR/SVG2/types.html#InterfaceSVGElement"><c- n>SVGElement</c-></a> { <c- b>readonly</c-> <c- b>attribute</c-> <a data-link-type="idl-name" href="https://www.w3.org/TR/SVG2/types.html#InterfaceSVGAnimatedEnumeration"><c- n>SVGAnimatedEnumeration</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="SVGAnimatedEnumeration" href="#dom-svgmaskelement-maskunits"><c- g>maskUnits</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <a data-link-type="idl-name" href="https://www.w3.org/TR/SVG2/types.html#InterfaceSVGAnimatedEnumeration"><c- n>SVGAnimatedEnumeration</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="SVGAnimatedEnumeration" href="#dom-svgmaskelement-maskcontentunits"><c- g>maskContentUnits</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <a data-link-type="idl-name" href="https://www.w3.org/TR/SVG2/types.html#InterfaceSVGAnimatedLength"><c- n>SVGAnimatedLength</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="SVGAnimatedLength" href="#dom-svgmaskelement-x"><c- g>x</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <a data-link-type="idl-name" href="https://www.w3.org/TR/SVG2/types.html#InterfaceSVGAnimatedLength"><c- n>SVGAnimatedLength</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="SVGAnimatedLength" href="#dom-svgmaskelement-y"><c- g>y</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <a data-link-type="idl-name" href="https://www.w3.org/TR/SVG2/types.html#InterfaceSVGAnimatedLength"><c- n>SVGAnimatedLength</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="SVGAnimatedLength" href="#dom-svgmaskelement-width"><c- g>width</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <a data-link-type="idl-name" href="https://www.w3.org/TR/SVG2/types.html#InterfaceSVGAnimatedLength"><c- n>SVGAnimatedLength</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="SVGAnimatedLength" href="#dom-svgmaskelement-height"><c- g>height</c-></a>; }; </pre> <h2 class="no-num no-ref heading settled" id="issues-index">Issues Index<a class="self-link" href="#issues-index"></a></h2> <div style="counter-reset:issue"> <div class="issue"> Firefox disables rendering of elements referencing clipPaths with violated content model. No browser ignores clipPath on use with indirect reference. <a href="https://github.com/w3c/fxtf-drafts/issues/17">[Issue #17]</a> <a class="issue-return" href="#issue-d0c561ed" title="Jump to section">↵</a></div> <div class="issue"> Define raw geometry with regards to CSS properties that affect it. Especially on text. <a href="https://github.com/w3c/fxtf-drafts/issues/170">[Issue #170]</a> <a class="issue-return" href="#issue-1eaffdcc" title="Jump to section">↵</a></div> </div> <script>/* Boilerplate: script-dom-helper */ "use strict"; function query(sel) { return document.querySelector(sel); } function queryAll(sel) { return [...document.querySelectorAll(sel)]; } function iter(obj) { if(!obj) return []; var it = obj[Symbol.iterator]; if(it) return it; return Object.entries(obj); } function mk(tagname, attrs, ...children) { const el = document.createElement(tagname); for(const [k,v] of iter(attrs)) { if(k.slice(0,3) == "_on") { const eventName = k.slice(3); el.addEventListener(eventName, v); } else if(k[0] == "_") { // property, not attribute el[k.slice(1)] = v; } else { if(v === false || v == null) { continue; } else if(v === true) { el.setAttribute(k, ""); continue; } else { el.setAttribute(k, v); } } } append(el, children); return el; } /* Create shortcuts for every known HTML element */ [ "a", "abbr", "acronym", "address", "applet", "area", "article", "aside", "audio", "b", "base", "basefont", "bdo", "big", "blockquote", "body", "br", "button", "canvas", "caption", "center", "cite", "code", "col", "colgroup", "datalist", "dd", "del", "details", "dfn", "dialog", "div", "dl", "dt", "em", "embed", "fieldset", "figcaption", "figure", "font", "footer", "form", "frame", "frameset", "head", "header", "h1", "h2", "h3", "h4", "h5", "h6", "hr", "html", "i", "iframe", "img", "input", "ins", "kbd", "label", "legend", "li", "link", "main", "map", "mark", "meta", "meter", "nav", "nobr", "noscript", "object", "ol", "optgroup", "option", "output", "p", "param", "pre", "progress", "q", "s", "samp", "script", "section", "select", "small", "source", "span", "strike", "strong", "style", "sub", "summary", "sup", "table", "tbody", "td", "template", "textarea", "tfoot", "th", "thead", "time", "title", "tr", "u", "ul", "var", "video", "wbr", "xmp", ].forEach(tagname=>{ mk[tagname] = (...args) => mk(tagname, ...args); }); function* nodesFromChildList(children) { for(const child of children.flat(Infinity)) { if(child instanceof Node) { yield child; } else { yield new Text(child); } } } function append(el, ...children) { for(const child of nodesFromChildList(children)) { if(el instanceof Node) el.appendChild(child); else el.push(child); } return el; } function insertAfter(el, ...children) { for(const child of nodesFromChildList(children)) { el.parentNode.insertBefore(child, el.nextSibling); } return el; } function clearContents(el) { el.innerHTML = ""; return el; } function parseHTML(markup) { if(markup.toLowerCase().trim().indexOf('<!doctype') === 0) { const doc = document.implementation.createHTMLDocument(""); doc.documentElement.innerHTML = markup; return doc; } else { const el = mk.template({}); el.innerHTML = markup; return el.content; } }</script> <script>/* Boilerplate: script-dfn-panel */ "use strict"; { let dfnPanelData = { "009e8b9e": {"dfnID":"009e8b9e","dfnText":"font-variant","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-font-variant"}],"title":"6.1. The clipPath element"},{"refs":[{"id":"ref-for-propdef-font-variant\u2460"}],"title":"9.1. The mask element"}],"url":"https://www.w3.org/TR/css-fonts-4/#propdef-font-variant"}, "0246188d": {"dfnID":"0246188d","dfnText":"animate","external":true,"refSections":[{"refs":[{"id":"ref-for-elementdef-animate"}],"title":"6.1. The clipPath element"},{"refs":[{"id":"ref-for-elementdef-animate\u2460"}],"title":"9.1. The mask element"}],"url":"https://svgwg.org/specs/animations/#elementdef-animate"}, "02b0f49f": {"dfnID":"02b0f49f","dfnText":"stroke-width","external":true,"refSections":[{"refs":[{"id":"ref-for-StrokeWidthProperty"},{"id":"ref-for-StrokeWidthProperty\u2460"}],"title":"6.1. The clipPath element"},{"refs":[{"id":"ref-for-StrokeWidthProperty\u2461"}],"title":"9.1. The mask element"},{"refs":[{"id":"ref-for-StrokeWidthProperty\u2462"},{"id":"ref-for-StrokeWidthProperty\u2463"}],"title":"Appendix B: Compute stroke bounding box"}],"url":"https://www.w3.org/TR/SVG2/painting.html#StrokeWidthProperty"}, "02bd7a8b": {"dfnID":"02bd7a8b","dfnText":"letter-spacing","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-letter-spacing"}],"title":"6.1. The clipPath element"},{"refs":[{"id":"ref-for-propdef-letter-spacing\u2460"}],"title":"9.1. The mask element"}],"url":"https://www.w3.org/TR/css-text-4/#propdef-letter-spacing"}, "064303ba": {"dfnID":"064303ba","dfnText":"border-width","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-border-width"}],"title":"8.4. Masking Areas: the mask-border-width property"},{"refs":[{"id":"ref-for-propdef-border-width\u2460"},{"id":"ref-for-propdef-border-width\u2461"}],"title":"8.5. Edge Overhang: the mask-border-outset property"}],"url":"https://www.w3.org/TR/css-backgrounds-3/#propdef-border-width"}, "0e38b48b": {"dfnID":"0e38b48b","dfnText":"text-anchor","external":true,"refSections":[{"refs":[{"id":"ref-for-TextAnchorProperty"}],"title":"6.1. The clipPath element"},{"refs":[{"id":"ref-for-TextAnchorProperty\u2460"}],"title":"9.1. The mask element"}],"url":"https://www.w3.org/TR/SVG2/text.html#TextAnchorProperty"}, "11a985a9": {"dfnID":"11a985a9","dfnText":"font","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-font"}],"title":"6.1. The clipPath element"},{"refs":[{"id":"ref-for-propdef-font\u2460"}],"title":"9.1. The mask element"}],"url":"https://www.w3.org/TR/css-fonts-4/#propdef-font"}, "128295ac": {"dfnID":"128295ac","dfnText":"<percentage>","external":true,"refSections":[{"refs":[{"id":"ref-for-percentage-value"}],"title":"8.3. Mask Border Image Slicing: the mask-border-slice property"}],"url":"https://www.w3.org/TR/css-values-4/#percentage-value"}, "1a017cd1": {"dfnID":"1a017cd1","dfnText":"none","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-display-none"},{"id":"ref-for-valdef-display-none\u2460"}],"title":"6.1. The clipPath element"},{"refs":[{"id":"ref-for-valdef-display-none\u2461"},{"id":"ref-for-valdef-display-none\u2462"}],"title":"9.1. The mask element"}],"url":"https://www.w3.org/TR/css-display-3/#valdef-display-none"}, "1a2b1083": {"dfnID":"1a2b1083","dfnText":"used value","external":true,"refSections":[{"refs":[{"id":"ref-for-used-value"},{"id":"ref-for-used-value\u2460"}],"title":"5.1. Clipping Shape: the clip-path property"},{"refs":[{"id":"ref-for-used-value\u2461"},{"id":"ref-for-used-value\u2462"}],"title":"7.5. Masking Area: the mask-clip property"},{"refs":[{"id":"ref-for-used-value\u2463"}],"title":"7.9. Mask Shorthand: the mask property"},{"refs":[{"id":"ref-for-used-value\u2464"}],"title":"Appendix A: The deprecated clip property"},{"refs":[{"id":"ref-for-used-value\u2465"}],"title":"Appendix B: Compute stroke bounding box"},{"refs":[{"id":"ref-for-used-value\u2466"}],"title":"Changes since last publication"}],"url":"https://www.w3.org/TR/css-cascade-5/#used-value"}, "1d0ba9a1": {"dfnID":"1d0ba9a1","dfnText":"stroke-dashoffset","external":true,"refSections":[{"refs":[{"id":"ref-for-StrokeDashoffsetProperty"}],"title":"6.1. The clipPath element"},{"refs":[{"id":"ref-for-StrokeDashoffsetProperty\u2460"}],"title":"9.1. The mask element"},{"refs":[{"id":"ref-for-StrokeDashoffsetProperty\u2461"}],"title":"Appendix B: Compute stroke bounding box"}],"url":"https://www.w3.org/TR/SVG2/painting.html#StrokeDashoffsetProperty"}, "1d3e3a6a": {"dfnID":"1d3e3a6a","dfnText":"style","external":true,"refSections":[{"refs":[{"id":"ref-for-elementdef-style"}],"title":"9.1. The mask element"}],"url":"https://www.w3.org/TR/SVG2/styling.html#elementdef-style"}, "1d7fc05e": {"dfnID":"1d7fc05e","dfnText":"set","external":true,"refSections":[{"refs":[{"id":"ref-for-elementdef-set"}],"title":"6.1. The clipPath element"},{"refs":[{"id":"ref-for-elementdef-set\u2460"}],"title":"9.1. The mask element"}],"url":"https://svgwg.org/specs/animations/#elementdef-set"}, "20730c34": {"dfnID":"20730c34","dfnText":"px","external":true,"refSections":[{"refs":[{"id":"ref-for-px"}],"title":"6.1. The clipPath element"},{"refs":[{"id":"ref-for-px\u2460"},{"id":"ref-for-px\u2461"}],"title":"9.1. The mask element"}],"url":"https://www.w3.org/TR/css-values-4/#px"}, "225e4b50": {"dfnID":"225e4b50","dfnText":"<coord-box>","external":true,"refSections":[{"refs":[{"id":"ref-for-typedef-coord-box"}],"title":"7.5. Masking Area: the mask-clip property"},{"refs":[{"id":"ref-for-typedef-coord-box\u2460"}],"title":"7.6. Positioning Area: the mask-origin property"}],"url":"https://www.w3.org/TR/css-box-4/#typedef-coord-box"}, "22947a28": {"dfnID":"22947a28","dfnText":"font-stretch","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-font-stretch"}],"title":"6.1. The clipPath element"},{"refs":[{"id":"ref-for-propdef-font-stretch\u2460"}],"title":"9.1. The mask element"}],"url":"https://www.w3.org/TR/css-fonts-4/#propdef-font-stretch"}, "23cd6e75": {"dfnID":"23cd6e75","dfnText":"unicode-bidi","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-unicode-bidi"}],"title":"6.1. The clipPath element"},{"refs":[{"id":"ref-for-propdef-unicode-bidi\u2460"}],"title":"9.1. The mask element"}],"url":"https://www.w3.org/TR/css-writing-modes-3/#propdef-unicode-bidi"}, "23ef8473": {"dfnID":"23ef8473","dfnText":"background positioning area","external":true,"refSections":[{"refs":[{"id":"ref-for-background-positioning-area"}],"title":"4. Terminology"}],"url":"https://www.w3.org/TR/css-backgrounds-3/#background-positioning-area"}, "276ec538": {"dfnID":"276ec538","dfnText":"graphics element","external":true,"refSections":[{"refs":[{"id":"ref-for-graphics-element"}],"title":"1.1. Clipping"},{"refs":[{"id":"ref-for-graphics-element\u2460"}],"title":"5.1. Clipping Shape: the clip-path property"},{"refs":[{"id":"ref-for-graphics-element\u2461"}],"title":"6.1. The clipPath element"},{"refs":[{"id":"ref-for-graphics-element\u2462"},{"id":"ref-for-graphics-element\u2463"},{"id":"ref-for-graphics-element\u2464"}],"title":"6.2. Winding Rules: the clip-rule property"},{"refs":[{"id":"ref-for-graphics-element\u2465"}],"title":"7.1. Mask Image Source: the mask-image property"},{"refs":[{"id":"ref-for-graphics-element\u2466"}],"title":"7.2. Mask Image Interpretation: the mask-mode property"},{"refs":[{"id":"ref-for-graphics-element\u2467"}],"title":"7.3. Tiling Mask Images: the mask-repeat property"},{"refs":[{"id":"ref-for-graphics-element\u2468"}],"title":"7.4. Positioning Mask Images: the mask-position property"},{"refs":[{"id":"ref-for-graphics-element\u2460\u24ea"}],"title":"7.5. Masking Area: the mask-clip property"},{"refs":[{"id":"ref-for-graphics-element\u2460\u2460"}],"title":"7.6. Positioning Area: the mask-origin property"},{"refs":[{"id":"ref-for-graphics-element\u2460\u2461"}],"title":"7.7. Sizing Mask Images: the mask-size property"},{"refs":[{"id":"ref-for-graphics-element\u2460\u2462"}],"title":"7.8. Compositing mask layers: the mask-composite property"},{"refs":[{"id":"ref-for-graphics-element\u2460\u2463"}],"title":"7.9. Mask Shorthand: the mask property"},{"refs":[{"id":"ref-for-graphics-element\u2460\u2464"}],"title":"7.10.1. Mask processing"},{"refs":[{"id":"ref-for-graphics-element\u2460\u2465"}],"title":"8.1. Mask Border Image Source: the mask-border-source property"},{"refs":[{"id":"ref-for-graphics-element\u2460\u2466"}],"title":"8.2. Mask Border Image Interpretation: the mask-border-mode property"},{"refs":[{"id":"ref-for-graphics-element\u2460\u2467"}],"title":"8.3. Mask Border Image Slicing: the mask-border-slice property"},{"refs":[{"id":"ref-for-graphics-element\u2460\u2468"}],"title":"8.4. Masking Areas: the mask-border-width property"},{"refs":[{"id":"ref-for-graphics-element\u2461\u24ea"}],"title":"8.5. Edge Overhang: the mask-border-outset property"},{"refs":[{"id":"ref-for-graphics-element\u2461\u2460"}],"title":"8.6. Mask Border Image Tiling: the mask-border-repeat property"},{"refs":[{"id":"ref-for-graphics-element\u2461\u2461"}],"title":"Appendix B: Compute stroke bounding box"}],"url":"https://www.w3.org/TR/SVG2/struct.html#graphics-element"}, "297dfe3a": {"dfnID":"297dfe3a","dfnText":"font-size","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-font-size"}],"title":"6.1. The clipPath element"},{"refs":[{"id":"ref-for-propdef-font-size\u2460"}],"title":"9.1. The mask element"}],"url":"https://www.w3.org/TR/css-fonts-4/#propdef-font-size"}, "29ec1ba6": {"dfnID":"29ec1ba6","dfnText":"stroke","external":true,"refSections":[{"refs":[{"id":"ref-for-StrokeProperty"},{"id":"ref-for-StrokeProperty\u2460"}],"title":"6.1. The clipPath element"},{"refs":[{"id":"ref-for-StrokeProperty\u2461"}],"title":"9.1. The mask element"},{"refs":[{"id":"ref-for-StrokeProperty\u2462"}],"title":"Appendix B: Compute stroke bounding box"}],"url":"https://www.w3.org/TR/SVG2/painting.html#StrokeProperty"}, "2ccfe434": {"dfnID":"2ccfe434","dfnText":"display","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-display"},{"id":"ref-for-propdef-display\u2460"},{"id":"ref-for-propdef-display\u2461"},{"id":"ref-for-propdef-display\u2462"},{"id":"ref-for-propdef-display\u2463"}],"title":"6.1. The clipPath element"},{"refs":[{"id":"ref-for-propdef-display\u2464"},{"id":"ref-for-propdef-display\u2465"},{"id":"ref-for-propdef-display\u2466"},{"id":"ref-for-propdef-display\u2467"}],"title":"9.1. The mask element"}],"url":"https://www.w3.org/TR/css-display-3/#propdef-display"}, "356d6b6e": {"dfnID":"356d6b6e","dfnText":"use","external":true,"refSections":[{"refs":[{"id":"ref-for-elementdef-use"}],"title":"5. Clipping Paths"},{"refs":[{"id":"ref-for-elementdef-use\u2460"}],"title":"5.1. Clipping Shape: the clip-path property"},{"refs":[{"id":"ref-for-elementdef-use\u2461"},{"id":"ref-for-elementdef-use\u2462"},{"id":"ref-for-elementdef-use\u2463"}],"title":"6.1. The clipPath element"},{"refs":[{"id":"ref-for-elementdef-use\u2464"}],"title":"7.1. Mask Image Source: the mask-image property"},{"refs":[{"id":"ref-for-elementdef-use\u2465"}],"title":"7.2. Mask Image Interpretation: the mask-mode property"},{"refs":[{"id":"ref-for-elementdef-use\u2466"}],"title":"7.3. Tiling Mask Images: the mask-repeat property"},{"refs":[{"id":"ref-for-elementdef-use\u2467"}],"title":"7.4. Positioning Mask Images: the mask-position property"},{"refs":[{"id":"ref-for-elementdef-use\u2468"}],"title":"7.5. Masking Area: the mask-clip property"},{"refs":[{"id":"ref-for-elementdef-use\u2460\u24ea"}],"title":"7.6. Positioning Area: the mask-origin property"},{"refs":[{"id":"ref-for-elementdef-use\u2460\u2460"}],"title":"7.7. Sizing Mask Images: the mask-size property"},{"refs":[{"id":"ref-for-elementdef-use\u2460\u2461"}],"title":"7.9. Mask Shorthand: the mask property"},{"refs":[{"id":"ref-for-elementdef-use\u2460\u2462"}],"title":"8.1. Mask Border Image Source: the mask-border-source property"},{"refs":[{"id":"ref-for-elementdef-use\u2460\u2463"}],"title":"8.2. Mask Border Image Interpretation: the mask-border-mode property"},{"refs":[{"id":"ref-for-elementdef-use\u2460\u2464"}],"title":"8.3. Mask Border Image Slicing: the mask-border-slice property"},{"refs":[{"id":"ref-for-elementdef-use\u2460\u2465"}],"title":"8.4. Masking Areas: the mask-border-width property"},{"refs":[{"id":"ref-for-elementdef-use\u2460\u2466"}],"title":"8.5. Edge Overhang: the mask-border-outset property"},{"refs":[{"id":"ref-for-elementdef-use\u2460\u2467"}],"title":"8.6. Mask Border Image Tiling: the mask-border-repeat property"},{"refs":[{"id":"ref-for-elementdef-use\u2460\u2468"}],"title":"9.1. The mask element"},{"refs":[{"id":"ref-for-elementdef-use\u2461\u24ea"},{"id":"ref-for-elementdef-use\u2461\u2460"},{"id":"ref-for-elementdef-use\u2461\u2461"}],"title":"Appendix B: Compute stroke bounding box"}],"url":"https://www.w3.org/TR/SVG2/struct.html#elementdef-use"}, "35bf32f2": {"dfnID":"35bf32f2","dfnText":"<image>","external":true,"refSections":[{"refs":[{"id":"ref-for-typedef-image"},{"id":"ref-for-typedef-image\u2460"},{"id":"ref-for-typedef-image\u2461"}],"title":"7.1. Mask Image Source: the mask-image property"},{"refs":[{"id":"ref-for-typedef-image\u2462"}],"title":"7.2. Mask Image Interpretation: the mask-mode property"},{"refs":[{"id":"ref-for-typedef-image\u2463"},{"id":"ref-for-typedef-image\u2464"}],"title":"8.1. Mask Border Image Source: the mask-border-source property"},{"refs":[{"id":"ref-for-typedef-image\u2465"}],"title":"8.2. Mask Border Image Interpretation: the mask-border-mode property"},{"refs":[{"id":"ref-for-typedef-image\u2466"}],"title":"11. Security Considerations"}],"url":"https://www.w3.org/TR/css-images-3/#typedef-image"}, "362f2602": {"dfnID":"362f2602","dfnText":"<repeat-style>","external":true,"refSections":[{"refs":[{"id":"ref-for-typedef-repeat-style"}],"title":"7.3. Tiling Mask Images: the mask-repeat property"},{"refs":[{"id":"ref-for-typedef-repeat-style\u2460"}],"title":"7.9. Mask Shorthand: the mask property"}],"url":"https://www.w3.org/TR/css-backgrounds-3/#typedef-repeat-style"}, "37bb38a0": {"dfnID":"37bb38a0","dfnText":"writing-mode","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-writing-mode"}],"title":"6.1. The clipPath element"},{"refs":[{"id":"ref-for-propdef-writing-mode\u2460"}],"title":"9.1. The mask element"}],"url":"https://www.w3.org/TR/css-writing-modes-4/#propdef-writing-mode"}, "38029fae": {"dfnID":"38029fae","dfnText":"SVGAnimatedEnumeration","external":true,"refSections":[{"refs":[{"id":"ref-for-InterfaceSVGAnimatedEnumeration"},{"id":"ref-for-InterfaceSVGAnimatedEnumeration\u2460"}],"title":"Interface SVGClipPathElement"},{"refs":[{"id":"ref-for-InterfaceSVGAnimatedEnumeration\u2461"},{"id":"ref-for-InterfaceSVGAnimatedEnumeration\u2462"},{"id":"ref-for-InterfaceSVGAnimatedEnumeration\u2463"},{"id":"ref-for-InterfaceSVGAnimatedEnumeration\u2464"}],"title":"Interface SVGMaskElement"}],"url":"https://www.w3.org/TR/SVG2/types.html#InterfaceSVGAnimatedEnumeration"}, "39f18ffd": {"dfnID":"39f18ffd","dfnText":"view","external":true,"refSections":[{"refs":[{"id":"ref-for-elementdef-view"}],"title":"9.1. The mask element"}],"url":"https://www.w3.org/TR/SVG2/linking.html#elementdef-view"}, "3b7558dc": {"dfnID":"3b7558dc","dfnText":"opacity","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-opacity"}],"title":"5.1. Clipping Shape: the clip-path property"},{"refs":[{"id":"ref-for-propdef-opacity\u2460"}],"title":"6.1. The clipPath element"},{"refs":[{"id":"ref-for-propdef-opacity\u2461"}],"title":"7.1. Mask Image Source: the mask-image property"},{"refs":[{"id":"ref-for-propdef-opacity\u2462"}],"title":"7.10. The Mask Image Rendering Model"},{"refs":[{"id":"ref-for-propdef-opacity\u2463"}],"title":"8.1. Mask Border Image Source: the mask-border-source property"},{"refs":[{"id":"ref-for-propdef-opacity\u2464"}],"title":"8.8. Masking with the mask border image"},{"refs":[{"id":"ref-for-propdef-opacity\u2465"},{"id":"ref-for-propdef-opacity\u2466"}],"title":"9.1. The mask element"}],"url":"https://www.w3.org/TR/css-color-4/#propdef-opacity"}, "3bafef5e": {"dfnID":"3bafef5e","dfnText":"{a,b}","external":true,"refSections":[{"refs":[{"id":"ref-for-mult-num-range"}],"title":"8.3. Mask Border Image Slicing: the mask-border-slice property"},{"refs":[{"id":"ref-for-mult-num-range\u2460"}],"title":"8.4. Masking Areas: the mask-border-width property"},{"refs":[{"id":"ref-for-mult-num-range\u2461"}],"title":"8.5. Edge Overhang: the mask-border-outset property"},{"refs":[{"id":"ref-for-mult-num-range\u2462"}],"title":"8.6. Mask Border Image Tiling: the mask-border-repeat property"}],"url":"https://www.w3.org/TR/css-values-4/#mult-num-range"}, "3e655cf8": {"dfnID":"3e655cf8","dfnText":"marker-mid","external":true,"refSections":[{"refs":[{"id":"ref-for-MarkerMidProperty"}],"title":"6.1. The clipPath element"},{"refs":[{"id":"ref-for-MarkerMidProperty\u2460"}],"title":"9.1. The mask element"}],"url":"https://www.w3.org/TR/SVG2/painting.html#MarkerMidProperty"}, "400767c5": {"dfnID":"400767c5","dfnText":"polygon","external":true,"refSections":[{"refs":[{"id":"ref-for-elementdef-polygon"}],"title":"6.1. The clipPath element"},{"refs":[{"id":"ref-for-elementdef-polygon\u2460"}],"title":"9.1. The mask element"}],"url":"https://www.w3.org/TR/SVG2/shapes.html#elementdef-polygon"}, "40c6f879": {"dfnID":"40c6f879","dfnText":"<position>","external":true,"refSections":[{"refs":[{"id":"ref-for-typedef-position"}],"title":"7.4. Positioning Mask Images: the mask-position property"},{"refs":[{"id":"ref-for-typedef-position\u2460"}],"title":"7.9. Mask Shorthand: the mask property"}],"url":"https://www.w3.org/TR/css-values-4/#typedef-position"}, "421e97eb": {"dfnID":"421e97eb","dfnText":"ellipse","external":true,"refSections":[{"refs":[{"id":"ref-for-elementdef-ellipse"}],"title":"6.1. The clipPath element"},{"refs":[{"id":"ref-for-elementdef-ellipse\u2460"}],"title":"9.1. The mask element"},{"refs":[{"id":"ref-for-elementdef-ellipse\u2461"}],"title":"Appendix B: Compute stroke bounding box"}],"url":"https://www.w3.org/TR/SVG2/shapes.html#elementdef-ellipse"}, "441d640b": {"dfnID":"441d640b","dfnText":"path","external":true,"refSections":[{"refs":[{"id":"ref-for-elementdef-path"},{"id":"ref-for-elementdef-path\u2460"},{"id":"ref-for-elementdef-path\u2461"}],"title":"6.1. The clipPath element"},{"refs":[{"id":"ref-for-elementdef-path\u2462"}],"title":"6.2. Winding Rules: the clip-rule property"},{"refs":[{"id":"ref-for-elementdef-path\u2463"}],"title":"9.1. The mask element"}],"url":"https://www.w3.org/TR/SVG2/paths.html#elementdef-path"}, "4433b30f": {"dfnID":"4433b30f","dfnText":"background painting area","external":true,"refSections":[{"refs":[{"id":"ref-for-background-painting-area"}],"title":"4. Terminology"}],"url":"https://www.w3.org/TR/css-backgrounds-3/#background-painting-area"}, "45c278c3": {"dfnID":"45c278c3","dfnText":"svg","external":true,"refSections":[{"refs":[{"id":"ref-for-elementdef-svg"}],"title":"9.1. The mask element"}],"url":"https://www.w3.org/TR/SVG2/struct.html#elementdef-svg"}, "4ab170b5": {"dfnID":"4ab170b5","dfnText":"border-image-repeat","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-border-image-repeat"}],"title":"8.6. Mask Border Image Tiling: the mask-border-repeat property"}],"url":"https://www.w3.org/TR/css-backgrounds-3/#propdef-border-image-repeat"}, "4ae7c69e": {"dfnID":"4ae7c69e","dfnText":"desc","external":true,"refSections":[{"refs":[{"id":"ref-for-elementdef-desc"}],"title":"6.1. The clipPath element"},{"refs":[{"id":"ref-for-elementdef-desc\u2460"}],"title":"9.1. The mask element"}],"url":"https://www.w3.org/TR/SVG2/struct.html#elementdef-desc"}, "4bf21ac7": {"dfnID":"4bf21ac7","dfnText":"fill-opacity","external":true,"refSections":[{"refs":[{"id":"ref-for-FillOpacityProperty"}],"title":"6.1. The clipPath element"},{"refs":[{"id":"ref-for-FillOpacityProperty\u2460"}],"title":"9.1. The mask element"}],"url":"https://www.w3.org/TR/SVG2/painting.html#FillOpacityProperty"}, "4d38e4c5": {"dfnID":"4d38e4c5","dfnText":"text-decoration","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-text-decoration"}],"title":"6.1. The clipPath element"},{"refs":[{"id":"ref-for-propdef-text-decoration\u2460"}],"title":"9.1. The mask element"}],"url":"https://www.w3.org/TR/css-text-decor-4/#propdef-text-decoration"}, "4eb9d37e": {"dfnID":"4eb9d37e","dfnText":"|","external":true,"refSections":[{"refs":[{"id":"ref-for-comb-one"},{"id":"ref-for-comb-one\u2460"},{"id":"ref-for-comb-one\u2461"},{"id":"ref-for-comb-one\u2462"},{"id":"ref-for-comb-one\u2463"}],"title":"5.1. Clipping Shape: the clip-path property"},{"refs":[{"id":"ref-for-comb-one\u2464"}],"title":"6.2. Winding Rules: the clip-rule property"},{"refs":[{"id":"ref-for-comb-one\u2465"},{"id":"ref-for-comb-one\u2466"}],"title":"7.1. Mask Image Source: the mask-image property"},{"refs":[{"id":"ref-for-comb-one\u2467"},{"id":"ref-for-comb-one\u2468"}],"title":"7.2. Mask Image Interpretation: the mask-mode property"},{"refs":[{"id":"ref-for-comb-one\u2460\u24ea"}],"title":"7.5. Masking Area: the mask-clip property"},{"refs":[{"id":"ref-for-comb-one\u2460\u2460"},{"id":"ref-for-comb-one\u2460\u2461"},{"id":"ref-for-comb-one\u2460\u2462"}],"title":"7.8. Compositing mask layers: the mask-composite property"},{"refs":[{"id":"ref-for-comb-one\u2460\u2463"}],"title":"7.9. Mask Shorthand: the mask property"},{"refs":[{"id":"ref-for-comb-one\u2460\u2464"}],"title":"8.1. Mask Border Image Source: the mask-border-source property"},{"refs":[{"id":"ref-for-comb-one\u2460\u2465"}],"title":"8.2. Mask Border Image Interpretation: the mask-border-mode property"},{"refs":[{"id":"ref-for-comb-one\u2460\u2466"}],"title":"8.3. Mask Border Image Slicing: the mask-border-slice property"},{"refs":[{"id":"ref-for-comb-one\u2460\u2467"},{"id":"ref-for-comb-one\u2460\u2468"}],"title":"8.4. Masking Areas: the mask-border-width property"},{"refs":[{"id":"ref-for-comb-one\u2461\u24ea"}],"title":"8.5. Edge Overhang: the mask-border-outset property"},{"refs":[{"id":"ref-for-comb-one\u2461\u2460"},{"id":"ref-for-comb-one\u2461\u2461"},{"id":"ref-for-comb-one\u2461\u2462"}],"title":"8.6. Mask Border Image Tiling: the mask-border-repeat property"},{"refs":[{"id":"ref-for-comb-one\u2461\u2463"}],"title":"9.2. Mask Source Interpretation: the mask-type property"},{"refs":[{"id":"ref-for-comb-one\u2461\u2464"}],"title":"Appendix A: The deprecated clip property"}],"url":"https://www.w3.org/TR/css-values-4/#comb-one"}, "4f120b73": {"dfnID":"4f120b73","dfnText":"script","external":true,"refSections":[{"refs":[{"id":"ref-for-elementdef-script"}],"title":"6.1. The clipPath element"},{"refs":[{"id":"ref-for-elementdef-script\u2460"}],"title":"9.1. The mask element"}],"url":"https://www.w3.org/TR/SVG2/interact.html#elementdef-script"}, "4f77d9f4": {"dfnID":"4f77d9f4","dfnText":"font-style","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-font-style"}],"title":"6.1. The clipPath element"},{"refs":[{"id":"ref-for-propdef-font-style\u2460"}],"title":"9.1. The mask element"}],"url":"https://www.w3.org/TR/css-fonts-4/#propdef-font-style"}, "4fd7e54f": {"dfnID":"4fd7e54f","dfnText":"<length-percentage>","external":true,"refSections":[{"refs":[{"id":"ref-for-typedef-length-percentage"}],"title":"8.4. Masking Areas: the mask-border-width property"},{"refs":[{"id":"ref-for-typedef-length-percentage\u2460"},{"id":"ref-for-typedef-length-percentage\u2461"},{"id":"ref-for-typedef-length-percentage\u2462"},{"id":"ref-for-typedef-length-percentage\u2463"}],"title":"9.1. The mask element"}],"url":"https://www.w3.org/TR/css-values-4/#typedef-length-percentage"}, "53053ffa": {"dfnID":"53053ffa","dfnText":"color-interpolation","external":true,"refSections":[{"refs":[{"id":"ref-for-ColorInterpolationProperty"}],"title":"6.1. The clipPath element"},{"refs":[{"id":"ref-for-ColorInterpolationProperty\u2460"}],"title":"7.10.1. Mask processing"},{"refs":[{"id":"ref-for-ColorInterpolationProperty\u2461"}],"title":"9.1. The mask element"}],"url":"https://www.w3.org/TR/SVG2/painting.html#ColorInterpolationProperty"}, "57ea53cb": {"dfnID":"57ea53cb","dfnText":"bounding box","external":true,"refSections":[{"refs":[{"id":"ref-for-bounding-box"},{"id":"ref-for-bounding-box\u2460"}],"title":"6.1. The clipPath element"},{"refs":[{"id":"ref-for-bounding-box\u2461"},{"id":"ref-for-bounding-box\u2462"}],"title":"9.1. The mask element"}],"url":"https://www.w3.org/TR/SVG2/coords.html#bounding-box"}, "58708596": {"dfnID":"58708596","dfnText":"auto","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-clip-auto"},{"id":"ref-for-valdef-clip-auto\u2460"},{"id":"ref-for-valdef-clip-auto\u2461"},{"id":"ref-for-valdef-clip-auto\u2462"},{"id":"ref-for-valdef-clip-auto\u2463"},{"id":"ref-for-valdef-clip-auto\u2464"}],"title":"Appendix A: The deprecated clip property"}],"url":"https://drafts.csswg.org/css2/#valdef-clip-auto"}, "589542db": {"dfnID":"589542db","dfnText":"linearrgb","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-color-interpolation-filters-linearrgb"}],"title":"7.10.1. Mask processing"}],"url":"https://www.w3.org/TR/filter-effects-1/#valdef-color-interpolation-filters-linearrgb"}, "5ac293f4": {"dfnID":"5ac293f4","dfnText":"metadata","external":true,"refSections":[{"refs":[{"id":"ref-for-elementdef-metadata"}],"title":"6.1. The clipPath element"},{"refs":[{"id":"ref-for-elementdef-metadata\u2460"}],"title":"9.1. The mask element"}],"url":"https://www.w3.org/TR/SVG2/struct.html#elementdef-metadata"}, "5b085f76": {"dfnID":"5b085f76","dfnText":"cursor","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-cursor"}],"title":"6.1. The clipPath element"},{"refs":[{"id":"ref-for-propdef-cursor\u2460"}],"title":"9.1. The mask element"}],"url":"https://www.w3.org/TR/css-ui-4/#propdef-cursor"}, "5c8a5162": {"dfnID":"5c8a5162","dfnText":"g","external":true,"refSections":[{"refs":[{"id":"ref-for-elementdef-g"}],"title":"9.1. The mask element"}],"url":"https://www.w3.org/TR/SVG2/struct.html#elementdef-g"}, "61bb5e44": {"dfnID":"61bb5e44","dfnText":"<number>","external":true,"refSections":[{"refs":[{"id":"ref-for-number-value"}],"title":"8.3. Mask Border Image Slicing: the mask-border-slice property"},{"refs":[{"id":"ref-for-number-value\u2460"}],"title":"8.4. Masking Areas: the mask-border-width property"},{"refs":[{"id":"ref-for-number-value\u2461"},{"id":"ref-for-number-value\u2462"}],"title":"8.5. Edge Overhang: the mask-border-outset property"}],"url":"https://www.w3.org/TR/css-values-4/#number-value"}, "62d82683": {"dfnID":"62d82683","dfnText":"fecolormatrix","external":true,"refSections":[{"refs":[{"id":"ref-for-elementdef-fecolormatrix"}],"title":"7.10.1. Mask processing"}],"url":"https://www.w3.org/TR/filter-effects-1/#elementdef-fecolormatrix"}, "6818bc7b": {"dfnID":"6818bc7b","dfnText":"alignment-baseline","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-alignment-baseline"}],"title":"6.1. The clipPath element"},{"refs":[{"id":"ref-for-propdef-alignment-baseline\u2460"}],"title":"9.1. The mask element"}],"url":"https://www.w3.org/TR/css-inline-3/#propdef-alignment-baseline"}, "684341ba": {"dfnID":"684341ba","dfnText":"flood-opacity","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-flood-opacity"}],"title":"6.1. The clipPath element"},{"refs":[{"id":"ref-for-propdef-flood-opacity\u2460"}],"title":"9.1. The mask element"}],"url":"https://www.w3.org/TR/filter-effects-1/#propdef-flood-opacity"}, "6937861c": {"dfnID":"6937861c","dfnText":"rect","external":true,"refSections":[{"refs":[{"id":"ref-for-elementdef-rect"}],"title":"6.1. The clipPath element"},{"refs":[{"id":"ref-for-elementdef-rect\u2460"}],"title":"9.1. The mask element"},{"refs":[{"id":"ref-for-elementdef-rect\u2461"}],"title":"Appendix B: Compute stroke bounding box"}],"url":"https://www.w3.org/TR/SVG2/shapes.html#elementdef-rect"}, "699488a8": {"dfnID":"699488a8","dfnText":"<url>","external":true,"refSections":[{"refs":[{"id":"ref-for-url-value"},{"id":"ref-for-url-value\u2460"}],"title":"5.1. Clipping Shape: the clip-path property"},{"refs":[{"id":"ref-for-url-value\u2461"},{"id":"ref-for-url-value\u2462"}],"title":"7.1. Mask Image Source: the mask-image property"}],"url":"https://www.w3.org/TR/css-values-4/#url-value"}, "6b5848eb": {"dfnID":"6b5848eb","dfnText":"stop-opacity","external":true,"refSections":[{"refs":[{"id":"ref-for-StopOpacityProperty"}],"title":"6.1. The clipPath element"},{"refs":[{"id":"ref-for-StopOpacityProperty\u2460"}],"title":"9.1. The mask element"}],"url":"https://www.w3.org/TR/SVG2/pservers.html#StopOpacityProperty"}, "6bf37c0a": {"dfnID":"6bf37c0a","dfnText":"text-rendering","external":true,"refSections":[{"refs":[{"id":"ref-for-TextRenderingProperty"}],"title":"6.1. The clipPath element"},{"refs":[{"id":"ref-for-TextRenderingProperty\u2460"}],"title":"9.1. The mask element"}],"url":"https://www.w3.org/TR/SVG2/painting.html#TextRenderingProperty"}, "6cae9113": {"dfnID":"6cae9113","dfnText":"radialgradient","external":true,"refSections":[{"refs":[{"id":"ref-for-elementdef-radialGradient"}],"title":"9.1. The mask element"}],"url":"https://www.w3.org/TR/SVG2/pservers.html#elementdef-radialGradient"}, "6cdd1a36": {"dfnID":"6cdd1a36","dfnText":"background-origin","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-background-origin"}],"title":"7.6. Positioning Area: the mask-origin property"}],"url":"https://www.w3.org/TR/css-backgrounds-3/#propdef-background-origin"}, "6dcc51d4": {"dfnID":"6dcc51d4","dfnText":"line","external":true,"refSections":[{"refs":[{"id":"ref-for-elementdef-line"}],"title":"6.1. The clipPath element"},{"refs":[{"id":"ref-for-elementdef-line\u2460"}],"title":"9.1. The mask element"}],"url":"https://www.w3.org/TR/SVG2/shapes.html#elementdef-line"}, "7066562d": {"dfnID":"7066562d","dfnText":"font-family","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-font-family"}],"title":"6.1. The clipPath element"},{"refs":[{"id":"ref-for-propdef-font-family\u2460"}],"title":"9.1. The mask element"}],"url":"https://www.w3.org/TR/css-fonts-4/#propdef-font-family"}, "73bc6606": {"dfnID":"73bc6606","dfnText":"pointer-events","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-pointer-events"}],"title":"5. Clipping Paths"},{"refs":[{"id":"ref-for-propdef-pointer-events\u2460"}],"title":"6.1. The clipPath element"},{"refs":[{"id":"ref-for-propdef-pointer-events\u2461"}],"title":"9.1. The mask element"}],"url":"https://drafts.csswg.org/css-ui-4/#propdef-pointer-events"}, "73c7b281": {"dfnID":"73c7b281","dfnText":"stroke-dasharray","external":true,"refSections":[{"refs":[{"id":"ref-for-StrokeDasharrayProperty"}],"title":"6.1. The clipPath element"},{"refs":[{"id":"ref-for-StrokeDasharrayProperty\u2460"}],"title":"9.1. The mask element"},{"refs":[{"id":"ref-for-StrokeDasharrayProperty\u2461"}],"title":"Appendix B: Compute stroke bounding box"}],"url":"https://www.w3.org/TR/SVG2/painting.html#StrokeDasharrayProperty"}, "73ccab19": {"dfnID":"73ccab19","dfnText":"font-weight","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-font-weight"}],"title":"6.1. The clipPath element"},{"refs":[{"id":"ref-for-propdef-font-weight\u2460"}],"title":"9.1. The mask element"}],"url":"https://www.w3.org/TR/css-fonts-4/#propdef-font-weight"}, "7846d689": {"dfnID":"7846d689","dfnText":"user coordinate system","external":true,"refSections":[{"refs":[{"id":"ref-for-user-coordinate-system"},{"id":"ref-for-user-coordinate-system\u2460"}],"title":"6.1. The clipPath element"},{"refs":[{"id":"ref-for-user-coordinate-system\u2461"},{"id":"ref-for-user-coordinate-system\u2462"},{"id":"ref-for-user-coordinate-system\u2463"},{"id":"ref-for-user-coordinate-system\u2464"},{"id":"ref-for-user-coordinate-system\u2465"}],"title":"9.1. The mask element"}],"url":"https://www.w3.org/TR/css-transforms-1/#user-coordinate-system"}, "7905fba2": {"dfnID":"7905fba2","dfnText":"square","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-stroke-linecap-square"},{"id":"ref-for-valdef-stroke-linecap-square\u2460"}],"title":"Appendix B: Compute stroke bounding box"}],"url":"https://www.w3.org/TR/fill-stroke-3/#valdef-stroke-linecap-square"}, "7d539771": {"dfnID":"7d539771","dfnText":"text content element","external":true,"refSections":[{"refs":[{"id":"ref-for-TermTextContentElement"}],"title":"Appendix B: Compute stroke bounding box"}],"url":"https://svgwg.org/svg2-draft/text.html#TermTextContentElement"}, "7de799b2": {"dfnID":"7de799b2","dfnText":"SVGAnimatedTransformList","external":true,"refSections":[{"refs":[{"id":"ref-for-InterfaceSVGAnimatedTransformList"},{"id":"ref-for-InterfaceSVGAnimatedTransformList\u2460"}],"title":"Interface SVGClipPathElement"}],"url":"https://www.w3.org/TR/SVG2/coords.html#InterfaceSVGAnimatedTransformList"}, "7ed9572e": {"dfnID":"7ed9572e","dfnText":"SVGAnimatedLength","external":true,"refSections":[{"refs":[{"id":"ref-for-InterfaceSVGAnimatedLength"},{"id":"ref-for-InterfaceSVGAnimatedLength\u2460"},{"id":"ref-for-InterfaceSVGAnimatedLength\u2461"},{"id":"ref-for-InterfaceSVGAnimatedLength\u2462"},{"id":"ref-for-InterfaceSVGAnimatedLength\u2463"},{"id":"ref-for-InterfaceSVGAnimatedLength\u2464"},{"id":"ref-for-InterfaceSVGAnimatedLength\u2465"},{"id":"ref-for-InterfaceSVGAnimatedLength\u2466"}],"title":"Interface SVGMaskElement"}],"url":"https://www.w3.org/TR/SVG2/types.html#InterfaceSVGAnimatedLength"}, "82606f2a": {"dfnID":"82606f2a","dfnText":"polyline","external":true,"refSections":[{"refs":[{"id":"ref-for-elementdef-polyline"}],"title":"6.1. The clipPath element"},{"refs":[{"id":"ref-for-elementdef-polyline\u2460"}],"title":"9.1. The mask element"}],"url":"https://www.w3.org/TR/SVG2/shapes.html#elementdef-polyline"}, "82661853": {"dfnID":"82661853","dfnText":"animatemotion","external":true,"refSections":[{"refs":[{"id":"ref-for-elementdef-animateMotion"}],"title":"6.1. The clipPath element"},{"refs":[{"id":"ref-for-elementdef-animateMotion\u2460"}],"title":"9.1. The mask element"}],"url":"https://svgwg.org/specs/animations/#elementdef-animateMotion"}, "82cf4168": {"dfnID":"82cf4168","dfnText":"never-rendered element","external":true,"refSections":[{"refs":[{"id":"ref-for-TermNeverRenderedElement"}],"title":"6.1. The clipPath element"},{"refs":[{"id":"ref-for-TermNeverRenderedElement\u2460"}],"title":"9.1. The mask element"}],"url":"https://svgwg.org/svg2-draft/render.html#TermNeverRenderedElement"}, "838e5b64": {"dfnID":"838e5b64","dfnText":"marker-end","external":true,"refSections":[{"refs":[{"id":"ref-for-MarkerEndProperty"}],"title":"6.1. The clipPath element"},{"refs":[{"id":"ref-for-MarkerEndProperty\u2460"}],"title":"9.1. The mask element"}],"url":"https://www.w3.org/TR/SVG2/painting.html#MarkerEndProperty"}, "855a7562": {"dfnID":"855a7562","dfnText":"visible","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-overflow-visible"}],"title":"5. Clipping Paths"}],"url":"https://www.w3.org/TR/css-overflow-3/#valdef-overflow-visible"}, "856e339f": {"dfnID":"856e339f","dfnText":"SVGUnitTypes","external":true,"refSections":[{"refs":[{"id":"ref-for-InterfaceSVGUnitTypes"}],"title":"Interface SVGClipPathElement"},{"refs":[{"id":"ref-for-InterfaceSVGUnitTypes\u2460"},{"id":"ref-for-InterfaceSVGUnitTypes\u2461"}],"title":"Interface SVGMaskElement"}],"url":"https://www.w3.org/TR/SVG2/types.html#InterfaceSVGUnitTypes"}, "889e932f": {"dfnID":"889e932f","dfnText":"Exposed","external":true,"refSections":[{"refs":[{"id":"ref-for-Exposed"}],"title":"Interface SVGClipPathElement"},{"refs":[{"id":"ref-for-Exposed\u2460"}],"title":"Interface SVGMaskElement"}],"url":"https://webidl.spec.whatwg.org/#Exposed"}, "89a1ce48": {"dfnID":"89a1ce48","dfnText":"color-interpolation-filters","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-color-interpolation-filters"}],"title":"6.1. The clipPath element"},{"refs":[{"id":"ref-for-propdef-color-interpolation-filters\u2460"}],"title":"9.1. The mask element"}],"url":"https://www.w3.org/TR/filter-effects-1/#propdef-color-interpolation-filters"}, "8f035173": {"dfnID":"8f035173","dfnText":"marker-start","external":true,"refSections":[{"refs":[{"id":"ref-for-MarkerStartProperty"}],"title":"6.1. The clipPath element"},{"refs":[{"id":"ref-for-MarkerStartProperty\u2460"}],"title":"9.1. The mask element"}],"url":"https://www.w3.org/TR/SVG2/painting.html#MarkerStartProperty"}, "8fedb34b": {"dfnID":"8fedb34b","dfnText":"circle","external":true,"refSections":[{"refs":[{"id":"ref-for-elementdef-circle"},{"id":"ref-for-elementdef-circle\u2460"}],"title":"6.1. The clipPath element"},{"refs":[{"id":"ref-for-elementdef-circle\u2461"}],"title":"7.10.1. Mask processing"},{"refs":[{"id":"ref-for-elementdef-circle\u2462"}],"title":"9.1. The mask element"},{"refs":[{"id":"ref-for-elementdef-circle\u2463"}],"title":"Appendix B: Compute stroke bounding box"}],"url":"https://www.w3.org/TR/SVG2/shapes.html#elementdef-circle"}, "91a37aa8": {"dfnID":"91a37aa8","dfnText":"text","external":true,"refSections":[{"refs":[{"id":"ref-for-elementdef-text"},{"id":"ref-for-elementdef-text\u2460"},{"id":"ref-for-elementdef-text\u2461"}],"title":"6.1. The clipPath element"},{"refs":[{"id":"ref-for-elementdef-text\u2462"}],"title":"7.10.1. Mask processing"},{"refs":[{"id":"ref-for-elementdef-text\u2463"}],"title":"9.1. The mask element"}],"url":"https://www.w3.org/TR/SVG2/text.html#elementdef-text"}, "95054108": {"dfnID":"95054108","dfnText":"color-rendering","external":true,"refSections":[{"refs":[{"id":"ref-for-ColorRenderingProperty"}],"title":"6.1. The clipPath element"},{"refs":[{"id":"ref-for-ColorRenderingProperty\u2460"}],"title":"9.1. The mask element"}],"url":"https://www.w3.org/TR/SVG2/painting.html#ColorRenderingProperty"}, "95b0fc68": {"dfnID":"95b0fc68","dfnText":"SVGElement","external":true,"refSections":[{"refs":[{"id":"ref-for-InterfaceSVGElement"}],"title":"Interface SVGClipPathElement"},{"refs":[{"id":"ref-for-InterfaceSVGElement\u2460"}],"title":"Interface SVGMaskElement"}],"url":"https://www.w3.org/TR/SVG2/types.html#InterfaceSVGElement"}, "95f8f868": {"dfnID":"95f8f868","dfnText":"viewbox","external":true,"refSections":[{"refs":[{"id":"ref-for-ViewBoxAttribute"},{"id":"ref-for-ViewBoxAttribute\u2460"},{"id":"ref-for-ViewBoxAttribute\u2461"}],"title":"5.1. Clipping Shape: the clip-path property"},{"refs":[{"id":"ref-for-ViewBoxAttribute\u2462"},{"id":"ref-for-ViewBoxAttribute\u2463"},{"id":"ref-for-ViewBoxAttribute\u2464"}],"title":"7.5. Masking Area: the mask-clip property"},{"refs":[{"id":"ref-for-ViewBoxAttribute\u2465"},{"id":"ref-for-ViewBoxAttribute\u2466"},{"id":"ref-for-ViewBoxAttribute\u2467"}],"title":"7.6. Positioning Area: the mask-origin property"}],"url":"https://svgwg.org/svg2-draft/coords.html#ViewBoxAttribute"}, "97458ca9": {"dfnID":"97458ca9","dfnText":"title","external":true,"refSections":[{"refs":[{"id":"ref-for-elementdef-title"}],"title":"6.1. The clipPath element"},{"refs":[{"id":"ref-for-elementdef-title\u2460"}],"title":"9.1. The mask element"}],"url":"https://www.w3.org/TR/SVG2/struct.html#elementdef-title"}, "98ddb9b0": {"dfnID":"98ddb9b0","dfnText":"<length>","external":true,"refSections":[{"refs":[{"id":"ref-for-length-value"}],"title":"7.4. Positioning Mask Images: the mask-position property"},{"refs":[{"id":"ref-for-length-value\u2460"}],"title":"8.4. Masking Areas: the mask-border-width property"},{"refs":[{"id":"ref-for-length-value\u2461"},{"id":"ref-for-length-value\u2462"}],"title":"8.5. Edge Overhang: the mask-border-outset property"},{"refs":[{"id":"ref-for-length-value\u2463"}],"title":"Appendix A: The deprecated clip property"}],"url":"https://www.w3.org/TR/css-values-4/#length-value"}, "9c014d15": {"dfnID":"9c014d15","dfnText":"border-image-width","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-border-image-width"}],"title":"8.4. Masking Areas: the mask-border-width property"}],"url":"https://www.w3.org/TR/css-backgrounds-3/#propdef-border-image-width"}, "9fb26e00": {"dfnID":"9fb26e00","dfnText":"fill","external":true,"refSections":[{"refs":[{"id":"ref-for-FillProperty"},{"id":"ref-for-FillProperty\u2460"}],"title":"6.1. The clipPath element"},{"refs":[{"id":"ref-for-FillProperty\u2461"}],"title":"9.1. The mask element"}],"url":"https://www.w3.org/TR/SVG2/painting.html#FillProperty"}, "a0336d84": {"dfnID":"a0336d84","dfnText":"||","external":true,"refSections":[{"refs":[{"id":"ref-for-comb-any"}],"title":"5.1. Clipping Shape: the clip-path property"},{"refs":[{"id":"ref-for-comb-any\u2460"},{"id":"ref-for-comb-any\u2461"},{"id":"ref-for-comb-any\u2462"},{"id":"ref-for-comb-any\u2463"},{"id":"ref-for-comb-any\u2464"},{"id":"ref-for-comb-any\u2465"}],"title":"7.9. Mask Shorthand: the mask property"},{"refs":[{"id":"ref-for-comb-any\u2466"},{"id":"ref-for-comb-any\u2467"},{"id":"ref-for-comb-any\u2468"}],"title":"8.7. Mask Border Image Shorthand: the mask-border property"}],"url":"https://www.w3.org/TR/css-values-4/#comb-any"}, "a0542bba": {"dfnID":"a0542bba","dfnText":"box-decoration-break","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-box-decoration-break"}],"title":"7.6. Positioning Area: the mask-origin property"}],"url":"https://www.w3.org/TR/css-break-4/#propdef-box-decoration-break"}, "a086f470": {"dfnID":"a086f470","dfnText":"fill-rule","external":true,"refSections":[{"refs":[{"id":"ref-for-FillRuleProperty"}],"title":"6.1. The clipPath element"},{"refs":[{"id":"ref-for-FillRuleProperty\u2460"},{"id":"ref-for-FillRuleProperty\u2461"},{"id":"ref-for-FillRuleProperty\u2462"}],"title":"6.2. Winding Rules: the clip-rule property"},{"refs":[{"id":"ref-for-FillRuleProperty\u2463"}],"title":"9.1. The mask element"}],"url":"https://www.w3.org/TR/SVG2/painting.html#FillRuleProperty"}, "a17bc661": {"dfnID":"a17bc661","dfnText":"pattern","external":true,"refSections":[{"refs":[{"id":"ref-for-elementdef-pattern"}],"title":"9.1. The mask element"},{"refs":[{"id":"ref-for-elementdef-pattern\u2460"},{"id":"ref-for-elementdef-pattern\u2461"}],"title":"Appendix A: The deprecated clip property"}],"url":"https://www.w3.org/TR/SVG2/pservers.html#elementdef-pattern"}, "a22cd86a": {"dfnID":"a22cd86a","dfnText":"word-spacing","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-word-spacing"}],"title":"6.1. The clipPath element"},{"refs":[{"id":"ref-for-propdef-word-spacing\u2460"}],"title":"9.1. The mask element"}],"url":"https://www.w3.org/TR/css-text-4/#propdef-word-spacing"}, "a50c2771": {"dfnID":"a50c2771","dfnText":"stacking context","external":true,"refSections":[{"refs":[{"id":"ref-for-x43"}],"title":"2. Module interactions"},{"refs":[{"id":"ref-for-x43\u2460"}],"title":"5.1. Clipping Shape: the clip-path property"},{"refs":[{"id":"ref-for-x43\u2461"}],"title":"7.1. Mask Image Source: the mask-image property"},{"refs":[{"id":"ref-for-x43\u2462"}],"title":"7.10. The Mask Image Rendering Model"},{"refs":[{"id":"ref-for-x43\u2463"}],"title":"8.1. Mask Border Image Source: the mask-border-source property"},{"refs":[{"id":"ref-for-x43\u2464"}],"title":"8.8. Masking with the mask border image"}],"url":"https://www.w3.org/TR/CSS21/visuren.html#x43"}, "a7b1a9fa": {"dfnID":"a7b1a9fa","dfnText":"object bounding box","external":true,"refSections":[{"refs":[{"id":"ref-for-TermObjectBoundingBox"}],"title":"2. Module interactions"},{"refs":[{"id":"ref-for-TermObjectBoundingBox\u2460"}],"title":"5.1. Clipping Shape: the clip-path property"},{"refs":[{"id":"ref-for-TermObjectBoundingBox\u2461"}],"title":"7.5. Masking Area: the mask-clip property"},{"refs":[{"id":"ref-for-TermObjectBoundingBox\u2462"}],"title":"7.6. Positioning Area: the mask-origin property"},{"refs":[{"id":"ref-for-TermObjectBoundingBox\u2463"}],"title":"9.1. The mask element"},{"refs":[{"id":"ref-for-TermObjectBoundingBox\u2464"},{"id":"ref-for-TermObjectBoundingBox\u2465"}],"title":"Appendix B: Compute stroke bounding box"}],"url":"https://www.w3.org/TR/SVG2/coords.html#TermObjectBoundingBox"}, "a7f9a4cb": {"dfnID":"a7f9a4cb","dfnText":"container element","external":true,"refSections":[{"refs":[{"id":"ref-for-container-element"}],"title":"5.1. Clipping Shape: the clip-path property"},{"refs":[{"id":"ref-for-container-element\u2460"}],"title":"6.1. The clipPath element"},{"refs":[{"id":"ref-for-container-element\u2461"}],"title":"7.1. Mask Image Source: the mask-image property"},{"refs":[{"id":"ref-for-container-element\u2462"}],"title":"7.2. Mask Image Interpretation: the mask-mode property"},{"refs":[{"id":"ref-for-container-element\u2463"}],"title":"7.3. Tiling Mask Images: the mask-repeat property"},{"refs":[{"id":"ref-for-container-element\u2464"}],"title":"7.4. Positioning Mask Images: the mask-position property"},{"refs":[{"id":"ref-for-container-element\u2465"}],"title":"7.5. Masking Area: the mask-clip property"},{"refs":[{"id":"ref-for-container-element\u2466"}],"title":"7.6. Positioning Area: the mask-origin property"},{"refs":[{"id":"ref-for-container-element\u2467"}],"title":"7.7. Sizing Mask Images: the mask-size property"},{"refs":[{"id":"ref-for-container-element\u2468"}],"title":"7.8. Compositing mask layers: the mask-composite property"},{"refs":[{"id":"ref-for-container-element\u2460\u24ea"}],"title":"7.9. Mask Shorthand: the mask property"},{"refs":[{"id":"ref-for-container-element\u2460\u2460"}],"title":"8.1. Mask Border Image Source: the mask-border-source property"},{"refs":[{"id":"ref-for-container-element\u2460\u2461"}],"title":"8.2. Mask Border Image Interpretation: the mask-border-mode property"},{"refs":[{"id":"ref-for-container-element\u2460\u2462"}],"title":"8.3. Mask Border Image Slicing: the mask-border-slice property"},{"refs":[{"id":"ref-for-container-element\u2460\u2463"}],"title":"8.4. Masking Areas: the mask-border-width property"},{"refs":[{"id":"ref-for-container-element\u2460\u2464"}],"title":"8.5. Edge Overhang: the mask-border-outset property"},{"refs":[{"id":"ref-for-container-element\u2460\u2465"}],"title":"8.6. Mask Border Image Tiling: the mask-border-repeat property"},{"refs":[{"id":"ref-for-container-element\u2460\u2466"}],"title":"9.1. The mask element"},{"refs":[{"id":"ref-for-container-element\u2460\u2467"},{"id":"ref-for-container-element\u2460\u2468"}],"title":"Appendix B: Compute stroke bounding box"}],"url":"https://www.w3.org/TR/SVG2/struct.html#container-element"}, "ac3e8a3d": {"dfnID":"ac3e8a3d","dfnText":"image-rendering","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-image-rendering"}],"title":"6.1. The clipPath element"},{"refs":[{"id":"ref-for-propdef-image-rendering\u2460"}],"title":"9.1. The mask element"}],"url":"https://www.w3.org/TR/css-images-3/#propdef-image-rendering"}, "acec364b": {"dfnID":"acec364b","dfnText":"stroke-linejoin","external":true,"refSections":[{"refs":[{"id":"ref-for-StrokeLinejoinProperty"}],"title":"6.1. The clipPath element"},{"refs":[{"id":"ref-for-StrokeLinejoinProperty\u2460"}],"title":"9.1. The mask element"},{"refs":[{"id":"ref-for-StrokeLinejoinProperty\u2461"}],"title":"Appendix B: Compute stroke bounding box"}],"url":"https://www.w3.org/TR/SVG2/painting.html#StrokeLinejoinProperty"}, "acee373b": {"dfnID":"acee373b","dfnText":"stroke-linecap","external":true,"refSections":[{"refs":[{"id":"ref-for-StrokeLinecapProperty"}],"title":"6.1. The clipPath element"},{"refs":[{"id":"ref-for-StrokeLinecapProperty\u2460"}],"title":"9.1. The mask element"},{"refs":[{"id":"ref-for-StrokeLinecapProperty\u2461"},{"id":"ref-for-StrokeLinecapProperty\u2462"}],"title":"Appendix B: Compute stroke bounding box"}],"url":"https://www.w3.org/TR/SVG2/painting.html#StrokeLinecapProperty"}, "ad11923b": {"dfnID":"ad11923b","dfnText":"glyph-orientation-vertical","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-glyph-orientation-vertical"}],"title":"6.1. The clipPath element"},{"refs":[{"id":"ref-for-propdef-glyph-orientation-vertical\u2460"}],"title":"9.1. The mask element"}],"url":"https://www.w3.org/TR/css-writing-modes-4/#propdef-glyph-orientation-vertical"}, "add377f4": {"dfnID":"add377f4","dfnText":"overflow","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-overflow"}],"title":"5. Clipping Paths"},{"refs":[{"id":"ref-for-propdef-overflow\u2460"}],"title":"6.1. The clipPath element"},{"refs":[{"id":"ref-for-propdef-overflow\u2461"}],"title":"9.1. The mask element"}],"url":"https://www.w3.org/TR/css-overflow-3/#propdef-overflow"}, "b68a40b4": {"dfnID":"b68a40b4","dfnText":"polygon()","external":true,"refSections":[{"refs":[{"id":"ref-for-funcdef-basic-shape-polygon"}],"title":"5.1. Clipping Shape: the clip-path property"}],"url":"https://www.w3.org/TR/css-shapes-1/#funcdef-basic-shape-polygon"}, "b6f4f262": {"dfnID":"b6f4f262","dfnText":"<shape-box>","external":true,"refSections":[{"refs":[{"id":"ref-for-typedef-shape-box"}],"title":"5.1. Clipping Shape: the clip-path property"}],"url":"https://www.w3.org/TR/css-shapes-1/#typedef-shape-box"}, "bb293baa": {"dfnID":"bb293baa","dfnText":"a","external":true,"refSections":[{"refs":[{"id":"ref-for-elementdef-a"}],"title":"9.1. The mask element"},{"refs":[{"id":"ref-for-elementdef-a\u2460"}],"title":"Appendix B: Compute stroke bounding box"}],"url":"https://www.w3.org/TR/SVG2/linking.html#elementdef-a"}, "bb65d94f": {"dfnID":"bb65d94f","dfnText":"border-image","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-border-image"}],"title":"8. Border-Box Mask"}],"url":"https://www.w3.org/TR/css-backgrounds-3/#propdef-border-image"}, "bcdf9b19": {"dfnID":"bcdf9b19","dfnText":"color","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-color"}],"title":"6.1. The clipPath element"},{"refs":[{"id":"ref-for-propdef-color\u2460"}],"title":"9.1. The mask element"}],"url":"https://www.w3.org/TR/css-color-4/#propdef-color"}, "beb76956": {"dfnID":"beb76956","dfnText":"defs","external":true,"refSections":[{"refs":[{"id":"ref-for-elementdef-defs"}],"title":"5.1. Clipping Shape: the clip-path property"},{"refs":[{"id":"ref-for-elementdef-defs\u2460"}],"title":"7.1. Mask Image Source: the mask-image property"},{"refs":[{"id":"ref-for-elementdef-defs\u2461"}],"title":"7.2. Mask Image Interpretation: the mask-mode property"},{"refs":[{"id":"ref-for-elementdef-defs\u2462"}],"title":"7.3. Tiling Mask Images: the mask-repeat property"},{"refs":[{"id":"ref-for-elementdef-defs\u2463"}],"title":"7.4. Positioning Mask Images: the mask-position property"},{"refs":[{"id":"ref-for-elementdef-defs\u2464"}],"title":"7.5. Masking Area: the mask-clip property"},{"refs":[{"id":"ref-for-elementdef-defs\u2465"}],"title":"7.6. Positioning Area: the mask-origin property"},{"refs":[{"id":"ref-for-elementdef-defs\u2466"}],"title":"7.7. Sizing Mask Images: the mask-size property"},{"refs":[{"id":"ref-for-elementdef-defs\u2467"}],"title":"7.8. Compositing mask layers: the mask-composite property"},{"refs":[{"id":"ref-for-elementdef-defs\u2468"}],"title":"7.9. Mask Shorthand: the mask property"},{"refs":[{"id":"ref-for-elementdef-defs\u2460\u24ea"}],"title":"8.1. Mask Border Image Source: the mask-border-source property"},{"refs":[{"id":"ref-for-elementdef-defs\u2460\u2460"}],"title":"8.2. Mask Border Image Interpretation: the mask-border-mode property"},{"refs":[{"id":"ref-for-elementdef-defs\u2460\u2461"}],"title":"8.3. Mask Border Image Slicing: the mask-border-slice property"},{"refs":[{"id":"ref-for-elementdef-defs\u2460\u2462"}],"title":"8.4. Masking Areas: the mask-border-width property"},{"refs":[{"id":"ref-for-elementdef-defs\u2460\u2463"}],"title":"8.5. Edge Overhang: the mask-border-outset property"},{"refs":[{"id":"ref-for-elementdef-defs\u2460\u2464"}],"title":"8.6. Mask Border Image Tiling: the mask-border-repeat property"},{"refs":[{"id":"ref-for-elementdef-defs\u2460\u2465"}],"title":"9.1. The mask element"}],"url":"https://www.w3.org/TR/SVG2/struct.html#elementdef-defs"}, "bede0036": {"dfnID":"bede0036","dfnText":"border image area","external":true,"refSections":[{"refs":[{"id":"ref-for-border-image-area"}],"title":"4. Terminology"}],"url":"https://www.w3.org/TR/css-backgrounds-3/#border-image-area"}, "bff39085": {"dfnID":"bff39085","dfnText":"<basic-shape>","external":true,"refSections":[{"refs":[{"id":"ref-for-typedef-basic-shape"},{"id":"ref-for-typedef-basic-shape\u2460"},{"id":"ref-for-typedef-basic-shape\u2461"},{"id":"ref-for-typedef-basic-shape\u2462"}],"title":"5.1. Clipping Shape: the clip-path property"},{"refs":[{"id":"ref-for-typedef-basic-shape\u2463"}],"title":"6.2. Winding Rules: the clip-rule property"}],"url":"https://www.w3.org/TR/css-shapes-1/#typedef-basic-shape"}, "c297b070": {"dfnID":"c297b070","dfnText":"#","external":true,"refSections":[{"refs":[{"id":"ref-for-mult-comma"}],"title":"7.1. Mask Image Source: the mask-image property"},{"refs":[{"id":"ref-for-mult-comma\u2460"}],"title":"7.2. Mask Image Interpretation: the mask-mode property"},{"refs":[{"id":"ref-for-mult-comma\u2461"}],"title":"7.3. Tiling Mask Images: the mask-repeat property"},{"refs":[{"id":"ref-for-mult-comma\u2462"}],"title":"7.4. Positioning Mask Images: the mask-position property"},{"refs":[{"id":"ref-for-mult-comma\u2463"}],"title":"7.5. Masking Area: the mask-clip property"},{"refs":[{"id":"ref-for-mult-comma\u2464"}],"title":"7.6. Positioning Area: the mask-origin property"},{"refs":[{"id":"ref-for-mult-comma\u2465"}],"title":"7.7. Sizing Mask Images: the mask-size property"},{"refs":[{"id":"ref-for-mult-comma\u2466"}],"title":"7.8. Compositing mask layers: the mask-composite property"},{"refs":[{"id":"ref-for-mult-comma\u2467"}],"title":"7.9. Mask Shorthand: the mask property"}],"url":"https://www.w3.org/TR/css-values-4/#mult-comma"}, "c5091c6b": {"dfnID":"c5091c6b","dfnText":"stroke-miterlimit","external":true,"refSections":[{"refs":[{"id":"ref-for-StrokeMiterlimitProperty"}],"title":"6.1. The clipPath element"},{"refs":[{"id":"ref-for-StrokeMiterlimitProperty\u2460"}],"title":"9.1. The mask element"},{"refs":[{"id":"ref-for-StrokeMiterlimitProperty\u2461"}],"title":"Appendix B: Compute stroke bounding box"}],"url":"https://www.w3.org/TR/SVG2/painting.html#StrokeMiterlimitProperty"}, "c6539ab4": {"dfnID":"c6539ab4","dfnText":"stop-color","external":true,"refSections":[{"refs":[{"id":"ref-for-StopColorProperty"}],"title":"6.1. The clipPath element"},{"refs":[{"id":"ref-for-StopColorProperty\u2460"}],"title":"9.1. The mask element"}],"url":"https://www.w3.org/TR/SVG2/pservers.html#StopColorProperty"}, "c7eb6161": {"dfnID":"c7eb6161","dfnText":"miter","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-stroke-linejoin-miter"}],"title":"Appendix B: Compute stroke bounding box"}],"url":"https://www.w3.org/TR/fill-stroke-3/#valdef-stroke-linejoin-miter"}, "ca17d95e": {"dfnID":"ca17d95e","dfnText":"lighting-color","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-lighting-color"}],"title":"6.1. The clipPath element"},{"refs":[{"id":"ref-for-propdef-lighting-color\u2460"}],"title":"9.1. The mask element"}],"url":"https://www.w3.org/TR/filter-effects-1/#propdef-lighting-color"}, "ca30f467": {"dfnID":"ca30f467","dfnText":"baseline-shift","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-baseline-shift"}],"title":"6.1. The clipPath element"},{"refs":[{"id":"ref-for-propdef-baseline-shift\u2460"}],"title":"9.1. The mask element"}],"url":"https://www.w3.org/TR/css-inline-3/#propdef-baseline-shift"}, "cb964126": {"dfnID":"cb964126","dfnText":"flood-color","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-flood-color"}],"title":"6.1. The clipPath element"},{"refs":[{"id":"ref-for-propdef-flood-color\u2460"}],"title":"9.1. The mask element"}],"url":"https://www.w3.org/TR/filter-effects-1/#propdef-flood-color"}, "cd1011a5": {"dfnID":"cd1011a5","dfnText":"symbol","external":true,"refSections":[{"refs":[{"id":"ref-for-elementdef-symbol"}],"title":"9.1. The mask element"}],"url":"https://www.w3.org/TR/SVG2/struct.html#elementdef-symbol"}, "cec2319b": {"dfnID":"cec2319b","dfnText":"switch","external":true,"refSections":[{"refs":[{"id":"ref-for-elementdef-switch"}],"title":"9.1. The mask element"}],"url":"https://www.w3.org/TR/SVG2/struct.html#elementdef-switch"}, "cfdad187": {"dfnID":"cfdad187","dfnText":"shape-rendering","external":true,"refSections":[{"refs":[{"id":"ref-for-ShapeRenderingProperty"}],"title":"6.1. The clipPath element"},{"refs":[{"id":"ref-for-ShapeRenderingProperty\u2460"}],"title":"9.1. The mask element"}],"url":"https://www.w3.org/TR/SVG2/painting.html#ShapeRenderingProperty"}, "clipping-path": {"dfnID":"clipping-path","dfnText":"clipping path","external":false,"refSections":[{"refs":[{"id":"ref-for-clipping-path"},{"id":"ref-for-clipping-path\u2460"}],"title":"5.1. Clipping Shape: the clip-path property"}],"url":"#clipping-path"}, "clipping-region": {"dfnID":"clipping-region","dfnText":"clipping region","external":false,"refSections":[{"refs":[{"id":"ref-for-clipping-region"}],"title":"5. Clipping Paths"},{"refs":[{"id":"ref-for-clipping-region\u2460"}],"title":"6.2. Winding Rules: the clip-rule property"}],"url":"#clipping-region"}, "d3ff9a69": {"dfnID":"d3ff9a69","dfnText":"visibility","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-visibility"},{"id":"ref-for-propdef-visibility\u2460"}],"title":"6.1. The clipPath element"},{"refs":[{"id":"ref-for-propdef-visibility\u2461"}],"title":"9.1. The mask element"}],"url":"https://www.w3.org/TR/css-display-3/#propdef-visibility"}, "d4441b24": {"dfnID":"d4441b24","dfnText":"?","external":true,"refSections":[{"refs":[{"id":"ref-for-mult-opt"}],"title":"7.9. Mask Shorthand: the mask property"},{"refs":[{"id":"ref-for-mult-opt\u2460"}],"title":"8.3. Mask Border Image Slicing: the mask-border-slice property"},{"refs":[{"id":"ref-for-mult-opt\u2461"},{"id":"ref-for-mult-opt\u2462"},{"id":"ref-for-mult-opt\u2463"}],"title":"8.7. Mask Border Image Shorthand: the mask-border property"}],"url":"https://www.w3.org/TR/css-values-4/#mult-opt"}, "db6870d5": {"dfnID":"db6870d5","dfnText":"background","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-background"},{"id":"ref-for-propdef-background\u2460"}],"title":"Changes since last publication"}],"url":"https://www.w3.org/TR/css-backgrounds-3/#propdef-background"}, "dbdacf0d": {"dfnID":"dbdacf0d","dfnText":"background-size","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-background-size"}],"title":"7.7. Sizing Mask Images: the mask-size property"}],"url":"https://www.w3.org/TR/css-backgrounds-3/#propdef-background-size"}, "dd8cbc18": {"dfnID":"dd8cbc18","dfnText":"lineargradient","external":true,"refSections":[{"refs":[{"id":"ref-for-elementdef-linearGradient"}],"title":"9.1. The mask element"}],"url":"https://www.w3.org/TR/SVG2/pservers.html#elementdef-linearGradient"}, "ddd65350": {"dfnID":"ddd65350","dfnText":"font-size-adjust","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-font-size-adjust"}],"title":"6.1. The clipPath element"},{"refs":[{"id":"ref-for-propdef-font-size-adjust\u2460"}],"title":"9.1. The mask element"}],"url":"https://www.w3.org/TR/css-fonts-5/#propdef-font-size-adjust"}, "de226194": {"dfnID":"de226194","dfnText":"marker","external":true,"refSections":[{"refs":[{"id":"ref-for-MarkerProperty"}],"title":"6.1. The clipPath element"},{"refs":[{"id":"ref-for-MarkerProperty\u2460"}],"title":"9.1. The mask element"}],"url":"https://www.w3.org/TR/SVG2/painting.html#MarkerProperty"}, "destination": {"dfnID":"destination","dfnText":"destination","external":false,"refSections":[{"refs":[{"id":"ref-for-destination"},{"id":"ref-for-destination\u2460"},{"id":"ref-for-destination\u2461"},{"id":"ref-for-destination\u2462"},{"id":"ref-for-destination\u2463"}],"title":"7.8. Compositing mask layers: the mask-composite property"}],"url":"#destination"}, "dom-svgclippathelement-clippathunits": {"dfnID":"dom-svgclippathelement-clippathunits","dfnText":"clipPathUnits","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-svgclippathelement-clippathunits"}],"title":"Interface SVGClipPathElement"}],"url":"#dom-svgclippathelement-clippathunits"}, "dom-svgclippathelement-transform": {"dfnID":"dom-svgclippathelement-transform","dfnText":"transform","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-svgclippathelement-transform"}],"title":"Interface SVGClipPathElement"}],"url":"#dom-svgclippathelement-transform"}, "dom-svgmaskelement-height": {"dfnID":"dom-svgmaskelement-height","dfnText":"height","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-svgmaskelement-height"}],"title":"Interface SVGMaskElement"}],"url":"#dom-svgmaskelement-height"}, "dom-svgmaskelement-maskcontentunits": {"dfnID":"dom-svgmaskelement-maskcontentunits","dfnText":"maskContentUnits","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-svgmaskelement-maskcontentunits"}],"title":"Interface SVGMaskElement"}],"url":"#dom-svgmaskelement-maskcontentunits"}, "dom-svgmaskelement-maskunits": {"dfnID":"dom-svgmaskelement-maskunits","dfnText":"maskUnits","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-svgmaskelement-maskunits"}],"title":"Interface SVGMaskElement"}],"url":"#dom-svgmaskelement-maskunits"}, "dom-svgmaskelement-width": {"dfnID":"dom-svgmaskelement-width","dfnText":"width","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-svgmaskelement-width"}],"title":"Interface SVGMaskElement"}],"url":"#dom-svgmaskelement-width"}, "dom-svgmaskelement-x": {"dfnID":"dom-svgmaskelement-x","dfnText":"x","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-svgmaskelement-x"}],"title":"Interface SVGMaskElement"}],"url":"#dom-svgmaskelement-x"}, "dom-svgmaskelement-y": {"dfnID":"dom-svgmaskelement-y","dfnText":"y","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-svgmaskelement-y"}],"title":"Interface SVGMaskElement"}],"url":"#dom-svgmaskelement-y"}, "e06c6241": {"dfnID":"e06c6241","dfnText":"dominant-baseline","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-dominant-baseline"}],"title":"6.1. The clipPath element"},{"refs":[{"id":"ref-for-propdef-dominant-baseline\u2460"}],"title":"9.1. The mask element"}],"url":"https://www.w3.org/TR/css-inline-3/#propdef-dominant-baseline"}, "e316431d": {"dfnID":"e316431d","dfnText":"background-repeat","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-background-repeat"}],"title":"7.3. Tiling Mask Images: the mask-repeat property"}],"url":"https://www.w3.org/TR/css-backgrounds-3/#propdef-background-repeat"}, "e4582856": {"dfnID":"e4582856","dfnText":"animatetransform","external":true,"refSections":[{"refs":[{"id":"ref-for-elementdef-animateTransform"}],"title":"6.1. The clipPath element"},{"refs":[{"id":"ref-for-elementdef-animateTransform\u2460"}],"title":"9.1. The mask element"}],"url":"https://svgwg.org/specs/animations/#elementdef-animateTransform"}, "e583e570": {"dfnID":"e583e570","dfnText":"<bg-size>","external":true,"refSections":[{"refs":[{"id":"ref-for-typedef-bg-size"}],"title":"7.7. Sizing Mask Images: the mask-size property"},{"refs":[{"id":"ref-for-typedef-bg-size\u2460"}],"title":"7.9. Mask Shorthand: the mask property"}],"url":"https://www.w3.org/TR/css-backgrounds-3/#typedef-bg-size"}, "e643c18e": {"dfnID":"e643c18e","dfnText":"stroke-opacity","external":true,"refSections":[{"refs":[{"id":"ref-for-StrokeOpacityProperty"}],"title":"6.1. The clipPath element"},{"refs":[{"id":"ref-for-StrokeOpacityProperty\u2460"}],"title":"9.1. The mask element"},{"refs":[{"id":"ref-for-StrokeOpacityProperty\u2461"}],"title":"Appendix B: Compute stroke bounding box"}],"url":"https://www.w3.org/TR/SVG2/painting.html#StrokeOpacityProperty"}, "e7350483": {"dfnID":"e7350483","dfnText":"foreignobject","external":true,"refSections":[{"refs":[{"id":"ref-for-elementdef-foreignObject"}],"title":"9.1. The mask element"}],"url":"https://www.w3.org/TR/SVG2/embedded.html#elementdef-foreignObject"}, "e75eda74": {"dfnID":"e75eda74","dfnText":"border-image-slice","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-border-image-slice"}],"title":"8.3. Mask Border Image Slicing: the mask-border-slice property"}],"url":"https://www.w3.org/TR/css-backgrounds-3/#propdef-border-image-slice"}, "e7c6bf78": {"dfnID":"e7c6bf78","dfnText":"transform","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-transform"}],"title":"Interface SVGClipPathElement"}],"url":"https://www.w3.org/TR/css-transforms-1/#propdef-transform"}, "e9f6aadb": {"dfnID":"e9f6aadb","dfnText":"filter","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-filter"}],"title":"6.1. The clipPath element"},{"refs":[{"id":"ref-for-propdef-filter\u2460"},{"id":"ref-for-propdef-filter\u2461"}],"title":"9.1. The mask element"}],"url":"https://www.w3.org/TR/filter-effects-1/#propdef-filter"}, "element-attrdef-clippath-clippathunits": {"dfnID":"element-attrdef-clippath-clippathunits","dfnText":"clipPathUnits","external":false,"refSections":[{"refs":[{"id":"ref-for-element-attrdef-clippath-clippathunits"},{"id":"ref-for-element-attrdef-clippath-clippathunits\u2460"}],"title":"6.1. The clipPath element"},{"refs":[{"id":"ref-for-element-attrdef-clippath-clippathunits\u2461"}],"title":"Interface SVGClipPathElement"}],"url":"#element-attrdef-clippath-clippathunits"}, "element-attrdef-mask-height": {"dfnID":"element-attrdef-mask-height","dfnText":"height","external":false,"refSections":[{"refs":[{"id":"ref-for-element-attrdef-mask-height"}],"title":"7.5. Masking Area: the mask-clip property"},{"refs":[{"id":"ref-for-element-attrdef-mask-height\u2460"},{"id":"ref-for-element-attrdef-mask-height\u2461"},{"id":"ref-for-element-attrdef-mask-height\u2462"},{"id":"ref-for-element-attrdef-mask-height\u2463"},{"id":"ref-for-element-attrdef-mask-height\u2464"},{"id":"ref-for-element-attrdef-mask-height\u2465"},{"id":"ref-for-element-attrdef-mask-height\u2466"},{"id":"ref-for-element-attrdef-mask-height\u2467"},{"id":"ref-for-element-attrdef-mask-height\u2468"}],"title":"9.1. The mask element"},{"refs":[{"id":"ref-for-element-attrdef-mask-height\u2460\u24ea"}],"title":"Interface SVGMaskElement"}],"url":"#element-attrdef-mask-height"}, "element-attrdef-mask-maskcontentunits": {"dfnID":"element-attrdef-mask-maskcontentunits","dfnText":"maskContentUnits","external":false,"refSections":[{"refs":[{"id":"ref-for-element-attrdef-mask-maskcontentunits"},{"id":"ref-for-element-attrdef-mask-maskcontentunits\u2460"}],"title":"9.1. The mask element"},{"refs":[{"id":"ref-for-element-attrdef-mask-maskcontentunits\u2461"}],"title":"Interface SVGMaskElement"}],"url":"#element-attrdef-mask-maskcontentunits"}, "element-attrdef-mask-maskunits": {"dfnID":"element-attrdef-mask-maskunits","dfnText":"maskUnits","external":false,"refSections":[{"refs":[{"id":"ref-for-element-attrdef-mask-maskunits"}],"title":"7.5. Masking Area: the mask-clip property"},{"refs":[{"id":"ref-for-element-attrdef-mask-maskunits\u2460"},{"id":"ref-for-element-attrdef-mask-maskunits\u2461"}],"title":"9.1. The mask element"},{"refs":[{"id":"ref-for-element-attrdef-mask-maskunits\u2462"}],"title":"Interface SVGMaskElement"}],"url":"#element-attrdef-mask-maskunits"}, "element-attrdef-mask-width": {"dfnID":"element-attrdef-mask-width","dfnText":"width","external":false,"refSections":[{"refs":[{"id":"ref-for-element-attrdef-mask-width"}],"title":"7.5. Masking Area: the mask-clip property"},{"refs":[{"id":"ref-for-element-attrdef-mask-width\u2460"},{"id":"ref-for-element-attrdef-mask-width\u2461"},{"id":"ref-for-element-attrdef-mask-width\u2462"},{"id":"ref-for-element-attrdef-mask-width\u2463"},{"id":"ref-for-element-attrdef-mask-width\u2464"},{"id":"ref-for-element-attrdef-mask-width\u2465"},{"id":"ref-for-element-attrdef-mask-width\u2466"},{"id":"ref-for-element-attrdef-mask-width\u2467"},{"id":"ref-for-element-attrdef-mask-width\u2468"}],"title":"9.1. The mask element"},{"refs":[{"id":"ref-for-element-attrdef-mask-width\u2460\u24ea"}],"title":"Interface SVGMaskElement"}],"url":"#element-attrdef-mask-width"}, "element-attrdef-mask-x": {"dfnID":"element-attrdef-mask-x","dfnText":"x","external":false,"refSections":[{"refs":[{"id":"ref-for-element-attrdef-mask-x"}],"title":"7.5. Masking Area: the mask-clip property"},{"refs":[{"id":"ref-for-element-attrdef-mask-x\u2460"},{"id":"ref-for-element-attrdef-mask-x\u2461"},{"id":"ref-for-element-attrdef-mask-x\u2462"},{"id":"ref-for-element-attrdef-mask-x\u2463"},{"id":"ref-for-element-attrdef-mask-x\u2464"},{"id":"ref-for-element-attrdef-mask-x\u2465"},{"id":"ref-for-element-attrdef-mask-x\u2466"},{"id":"ref-for-element-attrdef-mask-x\u2467"},{"id":"ref-for-element-attrdef-mask-x\u2468"}],"title":"9.1. The mask element"},{"refs":[{"id":"ref-for-element-attrdef-mask-x\u2460\u24ea"}],"title":"Interface SVGMaskElement"}],"url":"#element-attrdef-mask-x"}, "element-attrdef-mask-y": {"dfnID":"element-attrdef-mask-y","dfnText":"y","external":false,"refSections":[{"refs":[{"id":"ref-for-element-attrdef-mask-y"}],"title":"7.5. Masking Area: the mask-clip property"},{"refs":[{"id":"ref-for-element-attrdef-mask-y\u2460"},{"id":"ref-for-element-attrdef-mask-y\u2461"},{"id":"ref-for-element-attrdef-mask-y\u2462"},{"id":"ref-for-element-attrdef-mask-y\u2463"},{"id":"ref-for-element-attrdef-mask-y\u2464"},{"id":"ref-for-element-attrdef-mask-y\u2465"},{"id":"ref-for-element-attrdef-mask-y\u2466"},{"id":"ref-for-element-attrdef-mask-y\u2467"},{"id":"ref-for-element-attrdef-mask-y\u2468"}],"title":"9.1. The mask element"},{"refs":[{"id":"ref-for-element-attrdef-mask-y\u2460\u24ea"}],"title":"Interface SVGMaskElement"}],"url":"#element-attrdef-mask-y"}, "elementdef-clippath": {"dfnID":"elementdef-clippath","dfnText":"clipPath","external":false,"refSections":[{"refs":[{"id":"ref-for-elementdef-clippath"}],"title":"1.1. Clipping"},{"refs":[{"id":"ref-for-elementdef-clippath\u2460"}],"title":"5. Clipping Paths"},{"refs":[{"id":"ref-for-elementdef-clippath\u2461"},{"id":"ref-for-elementdef-clippath\u2462"},{"id":"ref-for-elementdef-clippath\u2463"}],"title":"5.1. Clipping Shape: the clip-path property"},{"refs":[{"id":"ref-for-elementdef-clippath\u2464"},{"id":"ref-for-elementdef-clippath\u2465"},{"id":"ref-for-elementdef-clippath\u2466"},{"id":"ref-for-elementdef-clippath\u2467"},{"id":"ref-for-elementdef-clippath\u2468"},{"id":"ref-for-elementdef-clippath\u2460\u24ea"},{"id":"ref-for-elementdef-clippath\u2460\u2460"},{"id":"ref-for-elementdef-clippath\u2460\u2461"},{"id":"ref-for-elementdef-clippath\u2460\u2462"},{"id":"ref-for-elementdef-clippath\u2460\u2463"},{"id":"ref-for-elementdef-clippath\u2460\u2464"},{"id":"ref-for-elementdef-clippath\u2460\u2465"},{"id":"ref-for-elementdef-clippath\u2460\u2466"},{"id":"ref-for-elementdef-clippath\u2460\u2467"},{"id":"ref-for-elementdef-clippath\u2460\u2468"},{"id":"ref-for-elementdef-clippath\u2461\u24ea"},{"id":"ref-for-elementdef-clippath\u2461\u2460"},{"id":"ref-for-elementdef-clippath\u2461\u2461"},{"id":"ref-for-elementdef-clippath\u2461\u2462"},{"id":"ref-for-elementdef-clippath\u2461\u2463"},{"id":"ref-for-elementdef-clippath\u2461\u2464"},{"id":"ref-for-elementdef-clippath\u2461\u2465"},{"id":"ref-for-elementdef-clippath\u2461\u2466"},{"id":"ref-for-elementdef-clippath\u2461\u2467"}],"title":"6.1. The clipPath element"},{"refs":[{"id":"ref-for-elementdef-clippath\u2461\u2468"}],"title":"6.2. Winding Rules: the clip-rule property"},{"refs":[{"id":"ref-for-elementdef-clippath\u2462\u24ea"}],"title":"9.1. The mask element"},{"refs":[{"id":"ref-for-elementdef-clippath\u2462\u2460"},{"id":"ref-for-elementdef-clippath\u2462\u2461"}],"title":"Interface SVGClipPathElement"},{"refs":[{"id":"ref-for-elementdef-clippath\u2462\u2462"}],"title":"Changes since last publication"}],"url":"#elementdef-clippath"}, "elementdef-mask": {"dfnID":"elementdef-mask","dfnText":"mask","external":false,"refSections":[{"refs":[{"id":"ref-for-elementdef-mask"},{"id":"ref-for-elementdef-mask\u2460"},{"id":"ref-for-elementdef-mask\u2461"}],"title":"1.2. Masking"},{"refs":[{"id":"ref-for-elementdef-mask\u2462"},{"id":"ref-for-elementdef-mask\u2463"}],"title":"7.1. Mask Image Source: the mask-image property"},{"refs":[{"id":"ref-for-elementdef-mask\u2464"},{"id":"ref-for-elementdef-mask\u2465"},{"id":"ref-for-elementdef-mask\u2466"}],"title":"7.2. Mask Image Interpretation: the mask-mode property"},{"refs":[{"id":"ref-for-elementdef-mask\u2467"},{"id":"ref-for-elementdef-mask\u2468"},{"id":"ref-for-elementdef-mask\u2460\u24ea"}],"title":"7.5. Masking Area: the mask-clip property"},{"refs":[{"id":"ref-for-elementdef-mask\u2460\u2460"}],"title":"7.9. Mask Shorthand: the mask property"},{"refs":[{"id":"ref-for-elementdef-mask\u2460\u2461"}],"title":"7.10.1. Mask processing"},{"refs":[{"id":"ref-for-elementdef-mask\u2460\u2462"},{"id":"ref-for-elementdef-mask\u2460\u2463"},{"id":"ref-for-elementdef-mask\u2460\u2464"},{"id":"ref-for-elementdef-mask\u2460\u2465"},{"id":"ref-for-elementdef-mask\u2460\u2466"},{"id":"ref-for-elementdef-mask\u2460\u2467"},{"id":"ref-for-elementdef-mask\u2460\u2468"},{"id":"ref-for-elementdef-mask\u2461\u24ea"},{"id":"ref-for-elementdef-mask\u2461\u2460"},{"id":"ref-for-elementdef-mask\u2461\u2461"},{"id":"ref-for-elementdef-mask\u2461\u2462"},{"id":"ref-for-elementdef-mask\u2461\u2463"},{"id":"ref-for-elementdef-mask\u2461\u2464"},{"id":"ref-for-elementdef-mask\u2461\u2465"},{"id":"ref-for-elementdef-mask\u2461\u2466"}],"title":"9.1. The mask element"},{"refs":[{"id":"ref-for-elementdef-mask\u2461\u2467"},{"id":"ref-for-elementdef-mask\u2461\u2468"},{"id":"ref-for-elementdef-mask\u2462\u24ea"},{"id":"ref-for-elementdef-mask\u2462\u2460"},{"id":"ref-for-elementdef-mask\u2462\u2461"}],"title":"9.2. Mask Source Interpretation: the mask-type property"},{"refs":[{"id":"ref-for-elementdef-mask\u2462\u2462"},{"id":"ref-for-elementdef-mask\u2462\u2463"}],"title":"Appendix A: The deprecated clip property"},{"refs":[{"id":"ref-for-elementdef-mask\u2462\u2464"},{"id":"ref-for-elementdef-mask\u2462\u2465"},{"id":"ref-for-elementdef-mask\u2462\u2466"},{"id":"ref-for-elementdef-mask\u2462\u2467"},{"id":"ref-for-elementdef-mask\u2462\u2468"},{"id":"ref-for-elementdef-mask\u2463\u24ea"},{"id":"ref-for-elementdef-mask\u2463\u2460"}],"title":"Interface SVGMaskElement"},{"refs":[{"id":"ref-for-elementdef-mask\u2463\u2461"},{"id":"ref-for-elementdef-mask\u2463\u2462"},{"id":"ref-for-elementdef-mask\u2463\u2463"},{"id":"ref-for-elementdef-mask\u2463\u2464"}],"title":"Changes since last publication"}],"url":"#elementdef-mask"}, "f18eaf1b": {"dfnID":"f18eaf1b","dfnText":"basic shape","external":true,"refSections":[{"refs":[{"id":"ref-for-basic-shape"},{"id":"ref-for-basic-shape\u2460"}],"title":"6.1. The clipPath element"}],"url":"https://www.w3.org/TR/SVG2/shapes.html#basic-shape"}, "f2249e38": {"dfnID":"f2249e38","dfnText":"background-position","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-background-position"},{"id":"ref-for-propdef-background-position\u2460"}],"title":"7.4. Positioning Mask Images: the mask-position property"}],"url":"https://www.w3.org/TR/css-backgrounds-3/#propdef-background-position"}, "f24b672a": {"dfnID":"f24b672a","dfnText":"border-radius","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-border-radius"}],"title":"5.1. Clipping Shape: the clip-path property"}],"url":"https://drafts.csswg.org/css-borders-4/#propdef-border-radius"}, "fb61b75a": {"dfnID":"fb61b75a","dfnText":"image","external":true,"refSections":[{"refs":[{"id":"ref-for-elementdef-image"}],"title":"9.1. The mask element"},{"refs":[{"id":"ref-for-elementdef-image\u2460"},{"id":"ref-for-elementdef-image\u2461"},{"id":"ref-for-elementdef-image\u2462"}],"title":"Appendix B: Compute stroke bounding box"}],"url":"https://www.w3.org/TR/SVG2/embedded.html#elementdef-image"}, "fb688f4f": {"dfnID":"fb688f4f","dfnText":"direction","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-direction"}],"title":"6.1. The clipPath element"},{"refs":[{"id":"ref-for-propdef-direction\u2460"}],"title":"9.1. The mask element"}],"url":"https://www.w3.org/TR/css-writing-modes-3/#propdef-direction"}, "funcdef-clip-rect": {"dfnID":"funcdef-clip-rect","dfnText":"rect()","external":false,"refSections":[{"refs":[{"id":"ref-for-funcdef-clip-rect"}],"title":"Appendix A: The deprecated clip property"}],"url":"#funcdef-clip-rect"}, "mask-border-image": {"dfnID":"mask-border-image","dfnText":"mask border image","external":false,"refSections":[{"refs":[{"id":"ref-for-mask-border-image"}],"title":"4. Terminology"},{"refs":[{"id":"ref-for-mask-border-image\u2460"}],"title":"7.10.1. Mask processing"},{"refs":[{"id":"ref-for-mask-border-image\u2461"},{"id":"ref-for-mask-border-image\u2462"}],"title":"8. Border-Box Mask"},{"refs":[{"id":"ref-for-mask-border-image\u2463"},{"id":"ref-for-mask-border-image\u2464"}],"title":"8.1. Mask Border Image Source: the mask-border-source property"},{"refs":[{"id":"ref-for-mask-border-image\u2465"},{"id":"ref-for-mask-border-image\u2466"},{"id":"ref-for-mask-border-image\u2467"}],"title":"8.2. Mask Border Image Interpretation: the mask-border-mode property"},{"refs":[{"id":"ref-for-mask-border-image\u2468"},{"id":"ref-for-mask-border-image\u2460\u24ea"}],"title":"8.3. Mask Border Image Slicing: the mask-border-slice property"},{"refs":[{"id":"ref-for-mask-border-image\u2460\u2460"}],"title":"8.4. Masking Areas: the mask-border-width property"},{"refs":[{"id":"ref-for-mask-border-image\u2460\u2461"},{"id":"ref-for-mask-border-image\u2460\u2462"}],"title":"8.6. Mask Border Image Tiling: the mask-border-repeat property"},{"refs":[{"id":"ref-for-mask-border-image\u2460\u2463"},{"id":"ref-for-mask-border-image\u2460\u2464"}],"title":"8.8. Masking with the mask border image"},{"refs":[{"id":"ref-for-mask-border-image\u2460\u2465"}],"title":"Changes since last publication"}],"url":"#mask-border-image"}, "mask-border-image-area": {"dfnID":"mask-border-image-area","dfnText":"mask border image area","external":false,"refSections":[{"refs":[{"id":"ref-for-mask-border-image-area"}],"title":"1.2. Masking"},{"refs":[{"id":"ref-for-mask-border-image-area\u2460"}],"title":"4. Terminology"},{"refs":[{"id":"ref-for-mask-border-image-area\u2461"}],"title":"8. Border-Box Mask"},{"refs":[{"id":"ref-for-mask-border-image-area\u2462"}],"title":"8.4. Masking Areas: the mask-border-width property"},{"refs":[{"id":"ref-for-mask-border-image-area\u2463"}],"title":"8.5. Edge Overhang: the mask-border-outset property"}],"url":"#mask-border-image-area"}, "mask-image": {"dfnID":"mask-image","dfnText":"mask image","external":false,"refSections":[{"refs":[{"id":"ref-for-mask-image"},{"id":"ref-for-mask-image\u2460"},{"id":"ref-for-mask-image\u2461"},{"id":"ref-for-mask-image\u2462"}],"title":"7.10.1. Mask processing"}],"url":"#mask-image"}, "mask-layer-image": {"dfnID":"mask-layer-image","dfnText":"mask layer image","external":false,"refSections":[{"refs":[{"id":"ref-for-mask-layer-image"}],"title":"4. Terminology"},{"refs":[{"id":"ref-for-mask-layer-image\u2460"}],"title":"7.1. Mask Image Source: the mask-image property"},{"refs":[{"id":"ref-for-mask-layer-image\u2461"},{"id":"ref-for-mask-layer-image\u2462"},{"id":"ref-for-mask-layer-image\u2463"}],"title":"7.2. Mask Image Interpretation: the mask-mode property"},{"refs":[{"id":"ref-for-mask-layer-image\u2464"},{"id":"ref-for-mask-layer-image\u2465"},{"id":"ref-for-mask-layer-image\u2466"}],"title":"7.3. Tiling Mask Images: the mask-repeat property"},{"refs":[{"id":"ref-for-mask-layer-image\u2467"}],"title":"7.4. Positioning Mask Images: the mask-position property"},{"refs":[{"id":"ref-for-mask-layer-image\u2468"},{"id":"ref-for-mask-layer-image\u2460\u24ea"}],"title":"7.5. Masking Area: the mask-clip property"},{"refs":[{"id":"ref-for-mask-layer-image\u2460\u2460"}],"title":"7.6. Positioning Area: the mask-origin property"},{"refs":[{"id":"ref-for-mask-layer-image\u2460\u2461"}],"title":"7.7. Sizing Mask Images: the mask-size property"},{"refs":[{"id":"ref-for-mask-layer-image\u2460\u2462"},{"id":"ref-for-mask-layer-image\u2460\u2463"}],"title":"7.8. Compositing mask layers: the mask-composite property"},{"refs":[{"id":"ref-for-mask-layer-image\u2460\u2464"}],"title":"7.9. Mask Shorthand: the mask property"},{"refs":[{"id":"ref-for-mask-layer-image\u2460\u2465"}],"title":"7.10.1. Mask processing"},{"refs":[{"id":"ref-for-mask-layer-image\u2460\u2466"}],"title":"7.10.2. Layering Multiple Mask Images"},{"refs":[{"id":"ref-for-mask-layer-image\u2460\u2467"}],"title":"9.2. Mask Source Interpretation: the mask-type property"},{"refs":[{"id":"ref-for-mask-layer-image\u2460\u2468"},{"id":"ref-for-mask-layer-image\u2461\u24ea"},{"id":"ref-for-mask-layer-image\u2461\u2460"},{"id":"ref-for-mask-layer-image\u2461\u2461"}],"title":"Changes since last publication"}],"url":"#mask-layer-image"}, "mask-painting-area": {"dfnID":"mask-painting-area","dfnText":"mask painting area","external":false,"refSections":[{"refs":[{"id":"ref-for-mask-painting-area"}],"title":"4. Terminology"},{"refs":[{"id":"ref-for-mask-painting-area\u2460"}],"title":"7.3. Tiling Mask Images: the mask-repeat property"},{"refs":[{"id":"ref-for-mask-painting-area\u2461"}],"title":"7.4. Positioning Mask Images: the mask-position property"},{"refs":[{"id":"ref-for-mask-painting-area\u2462"}],"title":"7.5. Masking Area: the mask-clip property"}],"url":"#mask-painting-area"}, "mask-position": {"dfnID":"mask-position","dfnText":"mask-position","external":false,"refSections":[],"url":"#mask-position"}, "mask-positioning-area": {"dfnID":"mask-positioning-area","dfnText":"mask positioning area","external":false,"refSections":[{"refs":[{"id":"ref-for-mask-positioning-area"}],"title":"4. Terminology"}],"url":"#mask-positioning-area"}, "mask-size": {"dfnID":"mask-size","dfnText":"mask-size","external":false,"refSections":[],"url":"#mask-size"}, "propdef-clip": {"dfnID":"propdef-clip","dfnText":"clip","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-clip"}],"title":"5. Clipping Paths"},{"refs":[{"id":"ref-for-propdef-clip\u2460"}],"title":"6.1. The clipPath element"},{"refs":[{"id":"ref-for-propdef-clip\u2461"}],"title":"9.1. The mask element"},{"refs":[{"id":"ref-for-propdef-clip\u2462"},{"id":"ref-for-propdef-clip\u2463"},{"id":"ref-for-propdef-clip\u2464"},{"id":"ref-for-propdef-clip\u2465"},{"id":"ref-for-propdef-clip\u2466"}],"title":"Appendix A: The deprecated clip property"}],"url":"#propdef-clip"}, "propdef-clip-path": {"dfnID":"propdef-clip-path","dfnText":"clip-path","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-clip-path"}],"title":"1.1. Clipping"},{"refs":[{"id":"ref-for-propdef-clip-path\u2460"},{"id":"ref-for-propdef-clip-path\u2461"}],"title":"5. Clipping Paths"},{"refs":[{"id":"ref-for-propdef-clip-path\u2462"},{"id":"ref-for-propdef-clip-path\u2463"},{"id":"ref-for-propdef-clip-path\u2464"}],"title":"5.1. Clipping Shape: the clip-path property"},{"refs":[{"id":"ref-for-propdef-clip-path\u2465"},{"id":"ref-for-propdef-clip-path\u2466"},{"id":"ref-for-propdef-clip-path\u2467"},{"id":"ref-for-propdef-clip-path\u2468"},{"id":"ref-for-propdef-clip-path\u2460\u24ea"},{"id":"ref-for-propdef-clip-path\u2460\u2460"},{"id":"ref-for-propdef-clip-path\u2460\u2461"},{"id":"ref-for-propdef-clip-path\u2460\u2462"},{"id":"ref-for-propdef-clip-path\u2460\u2463"}],"title":"6.1. The clipPath element"},{"refs":[{"id":"ref-for-propdef-clip-path\u2460\u2464"}],"title":"9.1. The mask element"},{"refs":[{"id":"ref-for-propdef-clip-path\u2460\u2465"}],"title":"11. Security Considerations"},{"refs":[{"id":"ref-for-propdef-clip-path\u2460\u2466"}],"title":"Appendix A: The deprecated clip property"}],"url":"#propdef-clip-path"}, "propdef-clip-rule": {"dfnID":"propdef-clip-rule","dfnText":"clip-rule","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-clip-rule"}],"title":"6.1. The clipPath element"},{"refs":[{"id":"ref-for-propdef-clip-rule\u2460"},{"id":"ref-for-propdef-clip-rule\u2461"},{"id":"ref-for-propdef-clip-rule\u2462"},{"id":"ref-for-propdef-clip-rule\u2463"},{"id":"ref-for-propdef-clip-rule\u2464"},{"id":"ref-for-propdef-clip-rule\u2465"},{"id":"ref-for-propdef-clip-rule\u2466"},{"id":"ref-for-propdef-clip-rule\u2467"}],"title":"6.2. Winding Rules: the clip-rule property"},{"refs":[{"id":"ref-for-propdef-clip-rule\u2468"}],"title":"9.1. The mask element"},{"refs":[{"id":"ref-for-propdef-clip-rule\u2460\u24ea"}],"title":"Changes since last publication"}],"url":"#propdef-clip-rule"}, "propdef-mask": {"dfnID":"propdef-mask","dfnText":"mask","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-mask"}],"title":"1.2. Masking"},{"refs":[{"id":"ref-for-propdef-mask\u2460"}],"title":"6.1. The clipPath element"},{"refs":[{"id":"ref-for-propdef-mask\u2461"},{"id":"ref-for-propdef-mask\u2462"},{"id":"ref-for-propdef-mask\u2463"}],"title":"7.9. Mask Shorthand: the mask property"},{"refs":[{"id":"ref-for-propdef-mask\u2464"}],"title":"7.10. The Mask Image Rendering Model"},{"refs":[{"id":"ref-for-propdef-mask\u2465"}],"title":"8.7. Mask Border Image Shorthand: the mask-border property"},{"refs":[{"id":"ref-for-propdef-mask\u2466"},{"id":"ref-for-propdef-mask\u2467"},{"id":"ref-for-propdef-mask\u2468"},{"id":"ref-for-propdef-mask\u2460\u24ea"}],"title":"9.1. The mask element"},{"refs":[{"id":"ref-for-propdef-mask\u2460\u2460"},{"id":"ref-for-propdef-mask\u2460\u2461"},{"id":"ref-for-propdef-mask\u2460\u2462"},{"id":"ref-for-propdef-mask\u2460\u2463"}],"title":"Changes since last publication"}],"url":"#propdef-mask"}, "propdef-mask-border": {"dfnID":"propdef-mask-border","dfnText":"mask-border","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-mask-border"},{"id":"ref-for-propdef-mask-border\u2460"}],"title":"1.2. Masking"},{"refs":[{"id":"ref-for-propdef-mask-border\u2461"},{"id":"ref-for-propdef-mask-border\u2462"}],"title":"7.9. Mask Shorthand: the mask property"},{"refs":[{"id":"ref-for-propdef-mask-border\u2463"},{"id":"ref-for-propdef-mask-border\u2464"},{"id":"ref-for-propdef-mask-border\u2465"}],"title":"8. Border-Box Mask"},{"refs":[{"id":"ref-for-propdef-mask-border\u2466"},{"id":"ref-for-propdef-mask-border\u2467"}],"title":"8.7. Mask Border Image Shorthand: the mask-border property"}],"url":"#propdef-mask-border"}, "propdef-mask-border-mode": {"dfnID":"propdef-mask-border-mode","dfnText":"mask-border-mode","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-mask-border-mode"},{"id":"ref-for-propdef-mask-border-mode\u2460"}],"title":"8.2. Mask Border Image Interpretation: the mask-border-mode property"},{"refs":[{"id":"ref-for-propdef-mask-border-mode\u2461"},{"id":"ref-for-propdef-mask-border-mode\u2462"},{"id":"ref-for-propdef-mask-border-mode\u2463"}],"title":"8.7. Mask Border Image Shorthand: the mask-border property"}],"url":"#propdef-mask-border-mode"}, "propdef-mask-border-outset": {"dfnID":"propdef-mask-border-outset","dfnText":"mask-border-outset","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-mask-border-outset"}],"title":"8.4. Masking Areas: the mask-border-width property"},{"refs":[{"id":"ref-for-propdef-mask-border-outset\u2460"},{"id":"ref-for-propdef-mask-border-outset\u2461"}],"title":"8.5. Edge Overhang: the mask-border-outset property"},{"refs":[{"id":"ref-for-propdef-mask-border-outset\u2462"},{"id":"ref-for-propdef-mask-border-outset\u2463"},{"id":"ref-for-propdef-mask-border-outset\u2464"}],"title":"8.7. Mask Border Image Shorthand: the mask-border property"}],"url":"#propdef-mask-border-outset"}, "propdef-mask-border-repeat": {"dfnID":"propdef-mask-border-repeat","dfnText":"mask-border-repeat","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-mask-border-repeat"}],"title":"8.6. Mask Border Image Tiling: the mask-border-repeat property"},{"refs":[{"id":"ref-for-propdef-mask-border-repeat\u2460"},{"id":"ref-for-propdef-mask-border-repeat\u2461"},{"id":"ref-for-propdef-mask-border-repeat\u2462"}],"title":"8.7. Mask Border Image Shorthand: the mask-border property"}],"url":"#propdef-mask-border-repeat"}, "propdef-mask-border-slice": {"dfnID":"propdef-mask-border-slice","dfnText":"mask-border-slice","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-mask-border-slice"}],"title":"8.3. Mask Border Image Slicing: the mask-border-slice property"},{"refs":[{"id":"ref-for-propdef-mask-border-slice\u2460"},{"id":"ref-for-propdef-mask-border-slice\u2461"},{"id":"ref-for-propdef-mask-border-slice\u2462"}],"title":"8.7. Mask Border Image Shorthand: the mask-border property"},{"refs":[{"id":"ref-for-propdef-mask-border-slice\u2463"}],"title":"8.8. Masking with the mask border image"},{"refs":[{"id":"ref-for-propdef-mask-border-slice\u2464"}],"title":"Changes since last publication"}],"url":"#propdef-mask-border-slice"}, "propdef-mask-border-source": {"dfnID":"propdef-mask-border-source","dfnText":"mask-border-source","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-mask-border-source"},{"id":"ref-for-propdef-mask-border-source\u2460"},{"id":"ref-for-propdef-mask-border-source\u2461"}],"title":"1.2. Masking"},{"refs":[{"id":"ref-for-propdef-mask-border-source\u2462"},{"id":"ref-for-propdef-mask-border-source\u2463"}],"title":"7.1. Mask Image Source: the mask-image property"},{"refs":[{"id":"ref-for-propdef-mask-border-source\u2464"}],"title":"7.2. Mask Image Interpretation: the mask-mode property"},{"refs":[{"id":"ref-for-propdef-mask-border-source\u2465"},{"id":"ref-for-propdef-mask-border-source\u2466"},{"id":"ref-for-propdef-mask-border-source\u2467"}],"title":"8.1. Mask Border Image Source: the mask-border-source property"},{"refs":[{"id":"ref-for-propdef-mask-border-source\u2468"}],"title":"8.2. Mask Border Image Interpretation: the mask-border-mode property"},{"refs":[{"id":"ref-for-propdef-mask-border-source\u2460\u24ea"},{"id":"ref-for-propdef-mask-border-source\u2460\u2460"},{"id":"ref-for-propdef-mask-border-source\u2460\u2461"}],"title":"8.7. Mask Border Image Shorthand: the mask-border property"},{"refs":[{"id":"ref-for-propdef-mask-border-source\u2460\u2462"},{"id":"ref-for-propdef-mask-border-source\u2460\u2463"},{"id":"ref-for-propdef-mask-border-source\u2460\u2464"}],"title":"8.8. Masking with the mask border image"},{"refs":[{"id":"ref-for-propdef-mask-border-source\u2460\u2465"}],"title":"11. Security Considerations"}],"url":"#propdef-mask-border-source"}, "propdef-mask-border-width": {"dfnID":"propdef-mask-border-width","dfnText":"mask-border-width","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-mask-border-width"}],"title":"8.4. Masking Areas: the mask-border-width property"},{"refs":[{"id":"ref-for-propdef-mask-border-width\u2460"}],"title":"8.5. Edge Overhang: the mask-border-outset property"},{"refs":[{"id":"ref-for-propdef-mask-border-width\u2461"},{"id":"ref-for-propdef-mask-border-width\u2462"},{"id":"ref-for-propdef-mask-border-width\u2463"}],"title":"8.7. Mask Border Image Shorthand: the mask-border property"}],"url":"#propdef-mask-border-width"}, "propdef-mask-clip": {"dfnID":"propdef-mask-clip","dfnText":"mask-clip","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-mask-clip"},{"id":"ref-for-propdef-mask-clip\u2460"},{"id":"ref-for-propdef-mask-clip\u2461"},{"id":"ref-for-propdef-mask-clip\u2462"}],"title":"7.5. Masking Area: the mask-clip property"},{"refs":[{"id":"ref-for-propdef-mask-clip\u2463"}],"title":"7.6. Positioning Area: the mask-origin property"},{"refs":[{"id":"ref-for-propdef-mask-clip\u2464"},{"id":"ref-for-propdef-mask-clip\u2465"},{"id":"ref-for-propdef-mask-clip\u2466"},{"id":"ref-for-propdef-mask-clip\u2467"}],"title":"7.9. Mask Shorthand: the mask property"},{"refs":[{"id":"ref-for-propdef-mask-clip\u2468"},{"id":"ref-for-propdef-mask-clip\u2460\u24ea"},{"id":"ref-for-propdef-mask-clip\u2460\u2460"}],"title":"Changes since last publication"}],"url":"#propdef-mask-clip"}, "propdef-mask-composite": {"dfnID":"propdef-mask-composite","dfnText":"mask-composite","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-mask-composite"}],"title":"7.1. Mask Image Source: the mask-image property"},{"refs":[{"id":"ref-for-propdef-mask-composite\u2460"},{"id":"ref-for-propdef-mask-composite\u2461"},{"id":"ref-for-propdef-mask-composite\u2462"}],"title":"7.8. Compositing mask layers: the mask-composite property"},{"refs":[{"id":"ref-for-propdef-mask-composite\u2463"},{"id":"ref-for-propdef-mask-composite\u2464"}],"title":"7.10.2. Layering Multiple Mask Images"},{"refs":[{"id":"ref-for-propdef-mask-composite\u2465"}],"title":"Changes since last publication"}],"url":"#propdef-mask-composite"}, "propdef-mask-image": {"dfnID":"propdef-mask-image","dfnText":"mask-image","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-mask-image"},{"id":"ref-for-propdef-mask-image\u2460"},{"id":"ref-for-propdef-mask-image\u2461"},{"id":"ref-for-propdef-mask-image\u2462"}],"title":"1.2. Masking"},{"refs":[{"id":"ref-for-propdef-mask-image\u2463"},{"id":"ref-for-propdef-mask-image\u2464"},{"id":"ref-for-propdef-mask-image\u2465"}],"title":"7.1. Mask Image Source: the mask-image property"},{"refs":[{"id":"ref-for-propdef-mask-image\u2466"},{"id":"ref-for-propdef-mask-image\u2467"},{"id":"ref-for-propdef-mask-image\u2468"}],"title":"7.2. Mask Image Interpretation: the mask-mode property"},{"refs":[{"id":"ref-for-propdef-mask-image\u2460\u24ea"}],"title":"7.8. Compositing mask layers: the mask-composite property"},{"refs":[{"id":"ref-for-propdef-mask-image\u2460\u2460"},{"id":"ref-for-propdef-mask-image\u2460\u2461"}],"title":"7.10. The Mask Image Rendering Model"},{"refs":[{"id":"ref-for-propdef-mask-image\u2460\u2462"}],"title":"7.10.2. Layering Multiple Mask Images"},{"refs":[{"id":"ref-for-propdef-mask-image\u2460\u2463"},{"id":"ref-for-propdef-mask-image\u2460\u2464"}],"title":"8.1. Mask Border Image Source: the mask-border-source property"},{"refs":[{"id":"ref-for-propdef-mask-image\u2460\u2465"}],"title":"11. Security Considerations"},{"refs":[{"id":"ref-for-propdef-mask-image\u2460\u2466"},{"id":"ref-for-propdef-mask-image\u2460\u2467"}],"title":"Changes since last publication"}],"url":"#propdef-mask-image"}, "propdef-mask-mode": {"dfnID":"propdef-mask-mode","dfnText":"mask-mode","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-mask-mode"},{"id":"ref-for-propdef-mask-mode\u2460"},{"id":"ref-for-propdef-mask-mode\u2461"},{"id":"ref-for-propdef-mask-mode\u2462"},{"id":"ref-for-propdef-mask-mode\u2463"},{"id":"ref-for-propdef-mask-mode\u2464"}],"title":"7.2. Mask Image Interpretation: the mask-mode property"},{"refs":[{"id":"ref-for-propdef-mask-mode\u2465"}],"title":"7.10.2. Layering Multiple Mask Images"},{"refs":[{"id":"ref-for-propdef-mask-mode\u2466"}],"title":"8.2. Mask Border Image Interpretation: the mask-border-mode property"},{"refs":[{"id":"ref-for-propdef-mask-mode\u2467"},{"id":"ref-for-propdef-mask-mode\u2468"},{"id":"ref-for-propdef-mask-mode\u2460\u24ea"}],"title":"9.2. Mask Source Interpretation: the mask-type property"},{"refs":[{"id":"ref-for-propdef-mask-mode\u2460\u2460"},{"id":"ref-for-propdef-mask-mode\u2460\u2461"},{"id":"ref-for-propdef-mask-mode\u2460\u2462"},{"id":"ref-for-propdef-mask-mode\u2460\u2463"}],"title":"Changes since last publication"}],"url":"#propdef-mask-mode"}, "propdef-mask-origin": {"dfnID":"propdef-mask-origin","dfnText":"mask-origin","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-mask-origin"},{"id":"ref-for-propdef-mask-origin\u2460"},{"id":"ref-for-propdef-mask-origin\u2461"},{"id":"ref-for-propdef-mask-origin\u2462"},{"id":"ref-for-propdef-mask-origin\u2463"}],"title":"7.6. Positioning Area: the mask-origin property"},{"refs":[{"id":"ref-for-propdef-mask-origin\u2464"},{"id":"ref-for-propdef-mask-origin\u2465"},{"id":"ref-for-propdef-mask-origin\u2466"},{"id":"ref-for-propdef-mask-origin\u2467"}],"title":"7.9. Mask Shorthand: the mask property"},{"refs":[{"id":"ref-for-propdef-mask-origin\u2468"},{"id":"ref-for-propdef-mask-origin\u2460\u24ea"},{"id":"ref-for-propdef-mask-origin\u2460\u2460"}],"title":"Changes since last publication"}],"url":"#propdef-mask-origin"}, "propdef-mask-position": {"dfnID":"propdef-mask-position","dfnText":"mask-position","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-mask-position"}],"title":"1.2. Masking"},{"refs":[{"id":"ref-for-propdef-mask-position\u2460"},{"id":"ref-for-propdef-mask-position\u2461"}],"title":"7.4. Positioning Mask Images: the mask-position property"},{"refs":[{"id":"ref-for-propdef-mask-position\u2462"}],"title":"7.6. Positioning Area: the mask-origin property"},{"refs":[{"id":"ref-for-propdef-mask-position\u2463"}],"title":"7.9. Mask Shorthand: the mask property"},{"refs":[{"id":"ref-for-propdef-mask-position\u2464"},{"id":"ref-for-propdef-mask-position\u2465"},{"id":"ref-for-propdef-mask-position\u2466"},{"id":"ref-for-propdef-mask-position\u2467"},{"id":"ref-for-propdef-mask-position\u2468"},{"id":"ref-for-propdef-mask-position\u2460\u24ea"}],"title":"Changes since last publication"}],"url":"#propdef-mask-position"}, "propdef-mask-repeat": {"dfnID":"propdef-mask-repeat","dfnText":"mask-repeat","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-mask-repeat"},{"id":"ref-for-propdef-mask-repeat\u2460"}],"title":"7.3. Tiling Mask Images: the mask-repeat property"},{"refs":[{"id":"ref-for-propdef-mask-repeat\u2461"}],"title":"7.9. Mask Shorthand: the mask property"},{"refs":[{"id":"ref-for-propdef-mask-repeat\u2462"},{"id":"ref-for-propdef-mask-repeat\u2463"},{"id":"ref-for-propdef-mask-repeat\u2464"},{"id":"ref-for-propdef-mask-repeat\u2465"}],"title":"Changes since last publication"}],"url":"#propdef-mask-repeat"}, "propdef-mask-size": {"dfnID":"propdef-mask-size","dfnText":"mask-size","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-mask-size"}],"title":"1.2. Masking"},{"refs":[{"id":"ref-for-propdef-mask-size\u2460"},{"id":"ref-for-propdef-mask-size\u2461"}],"title":"7.7. Sizing Mask Images: the mask-size property"},{"refs":[{"id":"ref-for-propdef-mask-size\u2462"}],"title":"7.9. Mask Shorthand: the mask property"},{"refs":[{"id":"ref-for-propdef-mask-size\u2463"},{"id":"ref-for-propdef-mask-size\u2464"},{"id":"ref-for-propdef-mask-size\u2465"},{"id":"ref-for-propdef-mask-size\u2466"}],"title":"Changes since last publication"}],"url":"#propdef-mask-size"}, "propdef-mask-type": {"dfnID":"propdef-mask-type","dfnText":"mask-type","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-mask-type"},{"id":"ref-for-propdef-mask-type\u2460"},{"id":"ref-for-propdef-mask-type\u2461"}],"title":"7.2. Mask Image Interpretation: the mask-mode property"},{"refs":[{"id":"ref-for-propdef-mask-type\u2462"}],"title":"8.2. Mask Border Image Interpretation: the mask-border-mode property"},{"refs":[{"id":"ref-for-propdef-mask-type\u2463"},{"id":"ref-for-propdef-mask-type\u2464"},{"id":"ref-for-propdef-mask-type\u2465"},{"id":"ref-for-propdef-mask-type\u2466"},{"id":"ref-for-propdef-mask-type\u2467"}],"title":"9.2. Mask Source Interpretation: the mask-type property"},{"refs":[{"id":"ref-for-propdef-mask-type\u2468"},{"id":"ref-for-propdef-mask-type\u2460\u24ea"}],"title":"Changes since last publication"}],"url":"#propdef-mask-type"}, "source": {"dfnID":"source","dfnText":"source","external":false,"refSections":[{"refs":[{"id":"ref-for-source"},{"id":"ref-for-source\u2460"},{"id":"ref-for-source\u2461"},{"id":"ref-for-source\u2462"}],"title":"7.8. Compositing mask layers: the mask-composite property"}],"url":"#source"}, "stroke-bounding-box": {"dfnID":"stroke-bounding-box","dfnText":"stroke bounding box","external":false,"refSections":[{"refs":[{"id":"ref-for-stroke-bounding-box"}],"title":"5.1. Clipping Shape: the clip-path property"},{"refs":[{"id":"ref-for-stroke-bounding-box\u2460"}],"title":"7.5. Masking Area: the mask-clip property"},{"refs":[{"id":"ref-for-stroke-bounding-box\u2461"}],"title":"7.6. Positioning Area: the mask-origin property"},{"refs":[{"id":"ref-for-stroke-bounding-box\u2462"}],"title":"Changes since last publication"}],"url":"#stroke-bounding-box"}, "svgclippathelement": {"dfnID":"svgclippathelement","dfnText":"SVGClipPathElement","external":false,"refSections":[{"refs":[{"id":"ref-for-svgclippathelement"}],"title":"Interface SVGClipPathElement"}],"url":"#svgclippathelement"}, "svgmaskelement": {"dfnID":"svgmaskelement","dfnText":"SVGMaskElement","external":false,"refSections":[{"refs":[{"id":"ref-for-svgmaskelement"}],"title":"Interface SVGMaskElement"}],"url":"#svgmaskelement"}, "typedef-clip-bottom": {"dfnID":"typedef-clip-bottom","dfnText":"<bottom>","external":false,"refSections":[{"refs":[{"id":"ref-for-typedef-clip-bottom"},{"id":"ref-for-typedef-clip-bottom\u2460"},{"id":"ref-for-typedef-clip-bottom\u2461"},{"id":"ref-for-typedef-clip-bottom\u2462"}],"title":"Appendix A: The deprecated clip property"}],"url":"#typedef-clip-bottom"}, "typedef-clip-left": {"dfnID":"typedef-clip-left","dfnText":"<left>","external":false,"refSections":[{"refs":[{"id":"ref-for-typedef-clip-left"},{"id":"ref-for-typedef-clip-left\u2460"},{"id":"ref-for-typedef-clip-left\u2461"},{"id":"ref-for-typedef-clip-left\u2462"}],"title":"Appendix A: The deprecated clip property"}],"url":"#typedef-clip-left"}, "typedef-clip-right": {"dfnID":"typedef-clip-right","dfnText":"<right>","external":false,"refSections":[{"refs":[{"id":"ref-for-typedef-clip-right"},{"id":"ref-for-typedef-clip-right\u2460"},{"id":"ref-for-typedef-clip-right\u2461"},{"id":"ref-for-typedef-clip-right\u2462"}],"title":"Appendix A: The deprecated clip property"}],"url":"#typedef-clip-right"}, "typedef-clip-source": {"dfnID":"typedef-clip-source","dfnText":"<clip-source>","external":false,"refSections":[{"refs":[{"id":"ref-for-typedef-clip-source"}],"title":"5.1. Clipping Shape: the clip-path property"},{"refs":[{"id":"ref-for-typedef-clip-source\u2460"},{"id":"ref-for-typedef-clip-source\u2461"}],"title":"11. Security Considerations"}],"url":"#typedef-clip-source"}, "typedef-clip-top": {"dfnID":"typedef-clip-top","dfnText":"<top>","external":false,"refSections":[{"refs":[{"id":"ref-for-typedef-clip-top"},{"id":"ref-for-typedef-clip-top\u2460"},{"id":"ref-for-typedef-clip-top\u2461"},{"id":"ref-for-typedef-clip-top\u2462"}],"title":"Appendix A: The deprecated clip property"}],"url":"#typedef-clip-top"}, "typedef-compositing-operator": {"dfnID":"typedef-compositing-operator","dfnText":"<compositing-operator>","external":false,"refSections":[{"refs":[{"id":"ref-for-typedef-compositing-operator"}],"title":"7.8. Compositing mask layers: the mask-composite property"},{"refs":[{"id":"ref-for-typedef-compositing-operator\u2460"}],"title":"7.9. Mask Shorthand: the mask property"}],"url":"#typedef-compositing-operator"}, "typedef-geometry-box": {"dfnID":"typedef-geometry-box","dfnText":"<geometry-box>","external":false,"refSections":[{"refs":[{"id":"ref-for-typedef-geometry-box"},{"id":"ref-for-typedef-geometry-box\u2460"}],"title":"5.1. Clipping Shape: the clip-path property"},{"refs":[{"id":"ref-for-typedef-geometry-box\u2461"},{"id":"ref-for-typedef-geometry-box\u2462"},{"id":"ref-for-typedef-geometry-box\u2463"},{"id":"ref-for-typedef-geometry-box\u2464"},{"id":"ref-for-typedef-geometry-box\u2465"},{"id":"ref-for-typedef-geometry-box\u2466"},{"id":"ref-for-typedef-geometry-box\u2467"}],"title":"7.9. Mask Shorthand: the mask property"},{"refs":[{"id":"ref-for-typedef-geometry-box\u2468"}],"title":"Changes since last publication"}],"url":"#typedef-geometry-box"}, "typedef-mask-layer": {"dfnID":"typedef-mask-layer","dfnText":"<mask-layer>","external":false,"refSections":[{"refs":[{"id":"ref-for-typedef-mask-layer"}],"title":"7.9. Mask Shorthand: the mask property"}],"url":"#typedef-mask-layer"}, "typedef-mask-reference": {"dfnID":"typedef-mask-reference","dfnText":"<mask-reference>","external":false,"refSections":[{"refs":[{"id":"ref-for-typedef-mask-reference"},{"id":"ref-for-typedef-mask-reference\u2460"},{"id":"ref-for-typedef-mask-reference\u2461"}],"title":"7.1. Mask Image Source: the mask-image property"},{"refs":[{"id":"ref-for-typedef-mask-reference\u2462"},{"id":"ref-for-typedef-mask-reference\u2463"},{"id":"ref-for-typedef-mask-reference\u2464"}],"title":"7.2. Mask Image Interpretation: the mask-mode property"},{"refs":[{"id":"ref-for-typedef-mask-reference\u2465"},{"id":"ref-for-typedef-mask-reference\u2466"}],"title":"7.9. Mask Shorthand: the mask property"},{"refs":[{"id":"ref-for-typedef-mask-reference\u2467"}],"title":"7.10.2. Layering Multiple Mask Images"}],"url":"#typedef-mask-reference"}, "typedef-mask-source": {"dfnID":"typedef-mask-source","dfnText":"<mask-source>","external":false,"refSections":[{"refs":[{"id":"ref-for-typedef-mask-source"},{"id":"ref-for-typedef-mask-source\u2460"},{"id":"ref-for-typedef-mask-source\u2461"}],"title":"7.1. Mask Image Source: the mask-image property"},{"refs":[{"id":"ref-for-typedef-mask-source\u2462"}],"title":"7.2. Mask Image Interpretation: the mask-mode property"},{"refs":[{"id":"ref-for-typedef-mask-source\u2463"},{"id":"ref-for-typedef-mask-source\u2464"}],"title":"11. Security Considerations"},{"refs":[{"id":"ref-for-typedef-mask-source\u2465"}],"title":"Changes since last publication"}],"url":"#typedef-mask-source"}, "typedef-masking-mode": {"dfnID":"typedef-masking-mode","dfnText":"<masking-mode>","external":false,"refSections":[{"refs":[{"id":"ref-for-typedef-masking-mode"}],"title":"7.2. Mask Image Interpretation: the mask-mode property"},{"refs":[{"id":"ref-for-typedef-masking-mode\u2460"}],"title":"7.9. Mask Shorthand: the mask property"}],"url":"#typedef-masking-mode"}, "valdef-clip-path-fill-box": {"dfnID":"valdef-clip-path-fill-box","dfnText":"fill-box","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-clip-path-fill-box"},{"id":"ref-for-valdef-clip-path-fill-box\u2460"}],"title":"5.1. Clipping Shape: the clip-path property"},{"refs":[{"id":"ref-for-valdef-clip-path-fill-box\u2461"}],"title":"Changes since last publication"}],"url":"#valdef-clip-path-fill-box"}, "valdef-clip-path-stroke-box": {"dfnID":"valdef-clip-path-stroke-box","dfnText":"stroke-box","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-clip-path-stroke-box"},{"id":"ref-for-valdef-clip-path-stroke-box\u2460"}],"title":"5.1. Clipping Shape: the clip-path property"},{"refs":[{"id":"ref-for-valdef-clip-path-stroke-box\u2461"}],"title":"Changes since last publication"}],"url":"#valdef-clip-path-stroke-box"}, "valdef-clip-path-view-box": {"dfnID":"valdef-clip-path-view-box","dfnText":"view-box","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-clip-path-view-box"}],"title":"5.1. Clipping Shape: the clip-path property"}],"url":"#valdef-clip-path-view-box"}, "valdef-clip-rule-evenodd": {"dfnID":"valdef-clip-rule-evenodd","dfnText":"evenodd","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-clip-rule-evenodd"}],"title":"6.2. Winding Rules: the clip-rule property"}],"url":"#valdef-clip-rule-evenodd"}, "valdef-clip-rule-nonzero": {"dfnID":"valdef-clip-rule-nonzero","dfnText":"nonzero","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-clip-rule-nonzero"}],"title":"6.2. Winding Rules: the clip-rule property"}],"url":"#valdef-clip-rule-nonzero"}, "valdef-clippathunits-objectboundingbox": {"dfnID":"valdef-clippathunits-objectboundingbox","dfnText":"objectBoundingBox","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-clippathunits-objectboundingbox"}],"title":"6.1. The clipPath element"}],"url":"#valdef-clippathunits-objectboundingbox"}, "valdef-clippathunits-userspaceonuse": {"dfnID":"valdef-clippathunits-userspaceonuse","dfnText":"userSpaceOnUse","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-clippathunits-userspaceonuse"},{"id":"ref-for-valdef-clippathunits-userspaceonuse\u2460"}],"title":"6.1. The clipPath element"}],"url":"#valdef-clippathunits-userspaceonuse"}, "valdef-mask-border-mode-alpha": {"dfnID":"valdef-mask-border-mode-alpha","dfnText":"alpha","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-mask-border-mode-alpha"}],"title":"8.2. Mask Border Image Interpretation: the mask-border-mode property"}],"url":"#valdef-mask-border-mode-alpha"}, "valdef-mask-border-mode-luminance": {"dfnID":"valdef-mask-border-mode-luminance","dfnText":"luminance","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-mask-border-mode-luminance"}],"title":"8.2. Mask Border Image Interpretation: the mask-border-mode property"}],"url":"#valdef-mask-border-mode-luminance"}, "valdef-mask-border-slice-fill": {"dfnID":"valdef-mask-border-slice-fill","dfnText":"fill","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-mask-border-slice-fill"},{"id":"ref-for-valdef-mask-border-slice-fill\u2460"}],"title":"Changes since last publication"}],"url":"#valdef-mask-border-slice-fill"}, "valdef-mask-clip-border-box": {"dfnID":"valdef-mask-clip-border-box","dfnText":"border-box","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-mask-clip-border-box"},{"id":"ref-for-valdef-mask-clip-border-box\u2460"},{"id":"ref-for-valdef-mask-clip-border-box\u2461"}],"title":"5.1. Clipping Shape: the clip-path property"},{"refs":[{"id":"ref-for-valdef-mask-clip-border-box\u2462"},{"id":"ref-for-valdef-mask-clip-border-box\u2463"}],"title":"7.5. Masking Area: the mask-clip property"}],"url":"#valdef-mask-clip-border-box"}, "valdef-mask-clip-content-box": {"dfnID":"valdef-mask-clip-content-box","dfnText":"content-box","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-mask-clip-content-box"},{"id":"ref-for-valdef-mask-clip-content-box\u2460"}],"title":"5.1. Clipping Shape: the clip-path property"},{"refs":[{"id":"ref-for-valdef-mask-clip-content-box\u2461"},{"id":"ref-for-valdef-mask-clip-content-box\u2462"}],"title":"7.5. Masking Area: the mask-clip property"}],"url":"#valdef-mask-clip-content-box"}, "valdef-mask-clip-fill-box": {"dfnID":"valdef-mask-clip-fill-box","dfnText":"fill-box","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-mask-clip-fill-box"},{"id":"ref-for-valdef-mask-clip-fill-box\u2460"}],"title":"7.5. Masking Area: the mask-clip property"}],"url":"#valdef-mask-clip-fill-box"}, "valdef-mask-clip-no-clip": {"dfnID":"valdef-mask-clip-no-clip","dfnText":"no-clip","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-mask-clip-no-clip"},{"id":"ref-for-valdef-mask-clip-no-clip\u2460"},{"id":"ref-for-valdef-mask-clip-no-clip\u2461"}],"title":"7.9. Mask Shorthand: the mask property"},{"refs":[{"id":"ref-for-valdef-mask-clip-no-clip\u2462"}],"title":"Changes since last publication"}],"url":"#valdef-mask-clip-no-clip"}, "valdef-mask-clip-padding-box": {"dfnID":"valdef-mask-clip-padding-box","dfnText":"padding-box","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-mask-clip-padding-box"}],"title":"5.1. Clipping Shape: the clip-path property"},{"refs":[{"id":"ref-for-valdef-mask-clip-padding-box\u2460"}],"title":"7.5. Masking Area: the mask-clip property"}],"url":"#valdef-mask-clip-padding-box"}, "valdef-mask-clip-stroke-box": {"dfnID":"valdef-mask-clip-stroke-box","dfnText":"stroke-box","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-mask-clip-stroke-box"},{"id":"ref-for-valdef-mask-clip-stroke-box\u2460"}],"title":"7.5. Masking Area: the mask-clip property"}],"url":"#valdef-mask-clip-stroke-box"}, "valdef-mask-clip-view-box": {"dfnID":"valdef-mask-clip-view-box","dfnText":"view-box","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-mask-clip-view-box"}],"title":"7.5. Masking Area: the mask-clip property"}],"url":"#valdef-mask-clip-view-box"}, "valdef-mask-composite-add": {"dfnID":"valdef-mask-composite-add","dfnText":"add","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-mask-composite-add"},{"id":"ref-for-valdef-mask-composite-add\u2460"}],"title":"7.8. Compositing mask layers: the mask-composite property"},{"refs":[{"id":"ref-for-valdef-mask-composite-add\u2461"}],"title":"Changes since last publication"}],"url":"#valdef-mask-composite-add"}, "valdef-mask-composite-exclude": {"dfnID":"valdef-mask-composite-exclude","dfnText":"exclude","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-mask-composite-exclude"},{"id":"ref-for-valdef-mask-composite-exclude\u2460"},{"id":"ref-for-valdef-mask-composite-exclude\u2461"}],"title":"7.8. Compositing mask layers: the mask-composite property"},{"refs":[{"id":"ref-for-valdef-mask-composite-exclude\u2462"}],"title":"Changes since last publication"}],"url":"#valdef-mask-composite-exclude"}, "valdef-mask-composite-intersect": {"dfnID":"valdef-mask-composite-intersect","dfnText":"intersect","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-mask-composite-intersect"}],"title":"7.8. Compositing mask layers: the mask-composite property"},{"refs":[{"id":"ref-for-valdef-mask-composite-intersect\u2460"}],"title":"Changes since last publication"}],"url":"#valdef-mask-composite-intersect"}, "valdef-mask-composite-subtract": {"dfnID":"valdef-mask-composite-subtract","dfnText":"subtract","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-mask-composite-subtract"}],"title":"7.8. Compositing mask layers: the mask-composite property"},{"refs":[{"id":"ref-for-valdef-mask-composite-subtract\u2460"}],"title":"Changes since last publication"}],"url":"#valdef-mask-composite-subtract"}, "valdef-mask-image-url": {"dfnID":"valdef-mask-image-url","dfnText":"<url>","external":false,"refSections":[],"url":"#valdef-mask-image-url"}, "valdef-mask-mode-alpha": {"dfnID":"valdef-mask-mode-alpha","dfnText":"alpha","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-mask-mode-alpha"}],"title":"7.2. Mask Image Interpretation: the mask-mode property"},{"refs":[{"id":"ref-for-valdef-mask-mode-alpha\u2460"}],"title":"9.2. Mask Source Interpretation: the mask-type property"}],"url":"#valdef-mask-mode-alpha"}, "valdef-mask-mode-luminance": {"dfnID":"valdef-mask-mode-luminance","dfnText":"luminance","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-mask-mode-luminance"},{"id":"ref-for-valdef-mask-mode-luminance\u2460"}],"title":"7.2. Mask Image Interpretation: the mask-mode property"}],"url":"#valdef-mask-mode-luminance"}, "valdef-mask-mode-match-source": {"dfnID":"valdef-mask-mode-match-source","dfnText":"match-source","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-mask-mode-match-source"},{"id":"ref-for-valdef-mask-mode-match-source\u2460"}],"title":"9.2. Mask Source Interpretation: the mask-type property"},{"refs":[{"id":"ref-for-valdef-mask-mode-match-source\u2461"}],"title":"Changes since last publication"}],"url":"#valdef-mask-mode-match-source"}, "valdef-mask-origin-border-box": {"dfnID":"valdef-mask-origin-border-box","dfnText":"border-box","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-mask-origin-border-box"},{"id":"ref-for-valdef-mask-origin-border-box\u2460"}],"title":"7.6. Positioning Area: the mask-origin property"},{"refs":[{"id":"ref-for-valdef-mask-origin-border-box\u2461"}],"title":"Changes since last publication"}],"url":"#valdef-mask-origin-border-box"}, "valdef-mask-origin-content-box": {"dfnID":"valdef-mask-origin-content-box","dfnText":"content-box","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-mask-origin-content-box"}],"title":"7.6. Positioning Area: the mask-origin property"}],"url":"#valdef-mask-origin-content-box"}, "valdef-mask-origin-fill-box": {"dfnID":"valdef-mask-origin-fill-box","dfnText":"fill-box","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-mask-origin-fill-box"},{"id":"ref-for-valdef-mask-origin-fill-box\u2460"}],"title":"7.6. Positioning Area: the mask-origin property"}],"url":"#valdef-mask-origin-fill-box"}, "valdef-mask-origin-padding-box": {"dfnID":"valdef-mask-origin-padding-box","dfnText":"padding-box","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-mask-origin-padding-box"},{"id":"ref-for-valdef-mask-origin-padding-box\u2460"}],"title":"7.6. Positioning Area: the mask-origin property"}],"url":"#valdef-mask-origin-padding-box"}, "valdef-mask-origin-stroke-box": {"dfnID":"valdef-mask-origin-stroke-box","dfnText":"stroke-box","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-mask-origin-stroke-box"}],"title":"7.6. Positioning Area: the mask-origin property"}],"url":"#valdef-mask-origin-stroke-box"}, "valdef-mask-origin-view-box": {"dfnID":"valdef-mask-origin-view-box","dfnText":"view-box","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-mask-origin-view-box"}],"title":"7.6. Positioning Area: the mask-origin property"}],"url":"#valdef-mask-origin-view-box"}, "valdef-mask-type-alpha": {"dfnID":"valdef-mask-type-alpha","dfnText":"alpha","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-mask-type-alpha"}],"title":"7.2. Mask Image Interpretation: the mask-mode property"}],"url":"#valdef-mask-type-alpha"}, "valdef-mask-type-luminance": {"dfnID":"valdef-mask-type-luminance","dfnText":"luminance","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-mask-type-luminance"}],"title":"7.2. Mask Image Interpretation: the mask-mode property"},{"refs":[{"id":"ref-for-valdef-mask-type-luminance\u2460"},{"id":"ref-for-valdef-mask-type-luminance\u2461"}],"title":"9.2. Mask Source Interpretation: the mask-type property"}],"url":"#valdef-mask-type-luminance"}, "valdef-maskcontentunits-objectboundingbox": {"dfnID":"valdef-maskcontentunits-objectboundingbox","dfnText":"objectBoundingBox","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-maskcontentunits-objectboundingbox"}],"title":"9.1. The mask element"}],"url":"#valdef-maskcontentunits-objectboundingbox"}, "valdef-maskcontentunits-userspaceonuse": {"dfnID":"valdef-maskcontentunits-userspaceonuse","dfnText":"userSpaceOnUse","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-maskcontentunits-userspaceonuse"},{"id":"ref-for-valdef-maskcontentunits-userspaceonuse\u2460"}],"title":"9.1. The mask element"}],"url":"#valdef-maskcontentunits-userspaceonuse"}, "valdef-maskunits-objectboundingbox": {"dfnID":"valdef-maskunits-objectboundingbox","dfnText":"objectBoundingBox","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-maskunits-objectboundingbox"},{"id":"ref-for-valdef-maskunits-objectboundingbox\u2460"}],"title":"9.1. The mask element"}],"url":"#valdef-maskunits-objectboundingbox"}, "valdef-maskunits-userspaceonuse": {"dfnID":"valdef-maskunits-userspaceonuse","dfnText":"userSpaceOnUse","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-maskunits-userspaceonuse"}],"title":"9.1. The mask element"}],"url":"#valdef-maskunits-userspaceonuse"}, }; document.addEventListener("DOMContentLoaded", ()=>{ genAllDfnPanels(); document.body.addEventListener("click", (e) => { // If not handled already, just hide all dfn panels. hideAllDfnPanels(); }); }); window.addEventListener("resize", () => { // Pin any visible dfn panel queryAll(".dfn-panel.on, .dfn-panel.activated").forEach(el=>positionDfnPanel(el)); }); function genAllDfnPanels() { for(const panelData of Object.values(dfnPanelData)) { const dfnID = panelData.dfnID; const dfn = document.getElementById(dfnID); if(!dfn) { console.log(`Can't find dfn#${dfnID}.`, panelData); continue; } dfn.panelData = panelData; insertDfnPopupAction(dfn); } } function genDfnPanel(dfn, { dfnID, url, dfnText, refSections, external }) { const dfnPanel = mk.aside({ class: "dfn-panel on", id: `infopanel-for-${dfnID}`, "data-for": dfnID, "aria-labelled-by":`infopaneltitle-for-${dfnID}`, }, mk.span({id:`infopaneltitle-for-${dfnID}`, style:"display:none"}, `Info about the '${dfnText}' ${external?"external":""} reference.`), mk.a({href:url, class:"dfn-link"}, url), refSections.length == 0 ? [] : mk.b({}, "Referenced in:"), mk.ul({}, ...refSections.map(section=> mk.li({}, ...section.refs.map((ref, refI)=> [ mk.a({ href: `#${ref.id}` }, (refI == 0) ? section.title : `(${refI + 1})` ), " ", ] ), ), ), ), genLinkingSyntaxes(dfn), ); dfnPanel.addEventListener('click', (event) => { if (event.target.nodeName == 'A') { scrollToTargetAndHighlight(event); pinDfnPanel(dfnPanel); } event.stopPropagation(); refocusOnTarget(event); }); dfnPanel.addEventListener('keydown', (event) => { if(event.keyCode == 27) { // Escape key hideDfnPanel({dfnPanel}); event.stopPropagation(); event.preventDefault(); } }); dfnPanel.dfn = dfn; dfn.dfnPanel = dfnPanel; return dfnPanel; } function hideAllDfnPanels() { // Delete the currently-active dfn panel. queryAll(".dfn-panel").forEach(dfnPanel=>hideDfnPanel({dfnPanel})); } function showDfnPanel(dfn) { hideAllDfnPanels(); // Only display one at a time. dfn.setAttribute("aria-expanded", "true"); const dfnPanel = genDfnPanel(dfn, dfn.panelData); // Give the dfn a unique tabindex, and then // give all the tabbable panel bits successive indexes. let tabIndex = 100; dfn.tabIndex = tabIndex++; const tabbable = dfnPanel.querySelectorAll(":is(a, button)"); for (const el of tabbable) { el.tabIndex = tabIndex++; } append(document.body, dfnPanel); positionDfnPanel(dfnPanel); } function positionDfnPanel(dfnPanel) { const dfn = dfnPanel.dfn; const dfnPos = getBounds(dfn); dfnPanel.style.top = dfnPos.bottom + "px"; dfnPanel.style.left = dfnPos.left + "px"; const panelPos = dfnPanel.getBoundingClientRect(); const panelMargin = 8; const maxRight = document.body.parentNode.clientWidth - panelMargin; if (panelPos.right > maxRight) { const overflowAmount = panelPos.right - maxRight; const newLeft = Math.max(panelMargin, dfnPos.left - overflowAmount); dfnPanel.style.left = newLeft + "px"; } } function pinDfnPanel(dfnPanel) { // Switch it to "activated" state, which pins it. dfnPanel.classList.add("activated"); dfnPanel.style.position = "fixed"; dfnPanel.style.left = null; dfnPanel.style.top = null; } function hideDfnPanel({dfn, dfnPanel}) { if(!dfnPanel) dfnPanel = dfn.dfnPanel; if(!dfn) dfn = dfnPanel.dfn; dfn.dfnPanel = undefined; dfnPanel.dfn = undefined; dfn.setAttribute("aria-expanded", "false"); dfn.tabIndex = undefined; dfnPanel.remove() } function toggleDfnPanel(dfn) { if(dfn.dfnPanel) { hideDfnPanel(dfn); } else { showDfnPanel(dfn); } } function insertDfnPopupAction(dfn) { dfn.setAttribute('role', 'button'); dfn.setAttribute('aria-expanded', 'false') dfn.tabIndex = 0; dfn.classList.add('has-dfn-panel'); dfn.addEventListener('click', (event) => { toggleDfnPanel(dfn); event.stopPropagation(); }); dfn.addEventListener('keypress', (event) => { const kc = event.keyCode; // 32->Space, 13->Enter if(kc == 32 || kc == 13) { toggleDfnPanel(dfn); event.stopPropagation(); event.preventDefault(); } }); } function refocusOnTarget(event) { const target = event.target; setTimeout(() => { // Refocus on the event.target element. // This is needed after browser scrolls to the destination. target.focus(); }); } // TODO: shared util // Returns the root-level absolute position {left and top} of element. function getBounds(el, relativeTo=document.body) { const relativeRect = relativeTo.getBoundingClientRect(); const elRect = el.getBoundingClientRect(); const top = elRect.top - relativeRect.top; const left = elRect.left - relativeRect.left; return { top, left, bottom: top + elRect.height, right: left + elRect.width, } } function scrollToTargetAndHighlight(event) { let hash = event.target.hash; if (hash) { hash = decodeURIComponent(hash.substring(1)); const dest = document.getElementById(hash); if (dest) { dest.classList.add('highlighted'); setTimeout(() => dest.classList.remove('highlighted'), 1000); } } } // Functions, divided by link type, that wrap an autolink's // contents with the appropriate outer syntax. // Alternately, a string naming another type they format // the same as. function needsFor(type) { switch(type) { case "descriptor": case "value": case "element-attr": case "attr-value": case "element-state": case "method": case "constructor": case "argument": case "attribute": case "const": case "dict-member": case "event": case "enum-value": case "stringifier": case "serializer": case "iterator": case "maplike": case "setlike": case "state": case "mode": case "context": case "facet": return true; default: return false; } } function refusesFor(type) { switch(type) { case "property": case "element": case "interface": case "namespace": case "callback": case "dictionary": case "enum": case "exception": case "typedef": case "http-header": case "permission": return true; default: return false; } } function linkFormatterFromType(type) { switch(type) { case 'scheme': case 'permission': case 'dfn': return (text) => `[=${text}=]`; case 'abstract-op': return (text) => `[\$${text}\$]`; case 'function': case 'at-rule': case 'selector': case 'value': return (text) => `''${text}''`; case 'http-header': return (text) => `[:${text}:]`; case 'interface': case 'constructor': case 'method': case 'argument': case 'attribute': case 'callback': case 'dictionary': case 'dict-member': case 'enum': case 'enum-value': case 'exception': case 'const': case 'typedef': case 'stringifier': case 'serializer': case 'iterator': case 'maplike': case 'setlike': case 'extended-attribute': case 'event': case 'idl': return (text) => `{{${text}}}`; case 'element-state': case 'element-attr': case 'attr-value': case 'element': return (element) => `<{${element}}>`; case 'grammar': return (text) => `${text} (within a <pre class=prod>)`; case 'type': return (text)=> `<<${text}>>`; case 'descriptor': case 'property': return (text) => `'${text}'`; default: return; }; }; function genLinkingSyntaxes(dfn) { if(dfn.tagName != "DFN") return; const type = dfn.getAttribute('data-dfn-type'); if(!type) { console.log(`<dfn> doesn't have a data-dfn-type:`, dfn); return []; } // Return a function that wraps link text based on the type const linkFormatter = linkFormatterFromType(type); if(!linkFormatter) { console.log(`<dfn> has an unknown data-dfn-type:`, dfn); return []; } let ltAlts; if(dfn.hasAttribute('data-lt')) { ltAlts = dfn.getAttribute('data-lt') .split("|") .map(x=>x.trim()); } else { ltAlts = [dfn.textContent.trim()]; } if(type == "type") { // lt of "<foo>", but "foo" is the interior; // <<foo/bar>> is how you write it with a for, // not <foo/<bar>> or whatever. for(var i = 0; i < ltAlts.length; i++) { const lt = ltAlts[i]; const match = /<(.*)>/.exec(lt); if(match) { ltAlts[i] = match[1]; } } } let forAlts; if(dfn.hasAttribute('data-dfn-for')) { forAlts = dfn.getAttribute('data-dfn-for') .split(",") .map(x=>x.trim()); } else { forAlts = ['']; } let linkingSyntaxes = []; if(!needsFor(type)) { for(const lt of ltAlts) { linkingSyntaxes.push(linkFormatter(lt)); } } if(!refusesFor(type)) { for(const f of forAlts) { linkingSyntaxes.push(linkFormatter(`${f}/${ltAlts[0]}`)) } } return [ mk.b({}, 'Possible linking syntaxes:'), mk.ul({}, ...linkingSyntaxes.map(link => { const copyLink = async () => await navigator.clipboard.writeText(link); return mk.li({}, mk.div({ class: 'link-item' }, mk.button({ class: 'copy-icon', title: 'Copy', type: 'button', _onclick: copyLink, tabindex: 0, }, mk.span({ class: 'icon' }) ), mk.span({}, link) ) ); }) ) ]; } } </script> <script>/* Boilerplate: script-link-titles */ "use strict"; { let linkTitleData = { "#typedef-geometry-box": "Expands to: border-box | content-box | fill-box | margin-box | padding-box | stroke-box | svg viewport origin box | view-box", "https://www.w3.org/TR/css-box-4/#typedef-coord-box": "Expands to: border-box | content-box | fill-box | padding-box | stroke-box | view-box", "https://www.w3.org/TR/css-shapes-1/#typedef-basic-shape": "Expands to: circle() | ellipse() | equivalent path | inset() | path() | polygon() | rect() | reference box | xywh()", "https://www.w3.org/TR/css-shapes-1/#typedef-shape-box": "Expands to: border-box | content-box | fill-box | margin-box | padding-box | stroke-box | svg viewport origin box | view-box", "https://www.w3.org/TR/css-values-4/#length-value": "Expands to: advance measure | cap | ch | cm | dvb | dvh | dvi | dvmax | dvmin | dvw | em | ex | ic | in | lh | lvb | lvh | lvi | lvmax | lvmin | lvw | mm | pc | pt | px | q | rcap | rch | rem | rex | ric | rlh | svb | svh | svi | svmax | svmin | svw | vb | vh | vi | vmax | vmin | vw", "https://www.w3.org/TR/css-values-4/#url-value": "Expands to: local url flag", }; function setTypeTitles() { for(let el of document.querySelectorAll("a[href]")) { if(el.href in linkTitleData && !el.hasAttribute("title")) { el.setAttribute("title", linkTitleData[el.href]); } } } document.addEventListener("DOMContentLoaded", setTypeTitles); } </script> <script>/* Boilerplate: script-ref-hints */ "use strict"; { let refsData = { "#clipping-path": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"css-masking","spec":"css-masking-1","status":"local","text":"clipping path","type":"dfn","url":"#clipping-path"}, "#clipping-region": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"css-masking","spec":"css-masking-1","status":"local","text":"clipping region","type":"dfn","url":"#clipping-region"}, "#destination": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"css-masking","spec":"css-masking-1","status":"local","text":"destination","type":"dfn","url":"#destination"}, "#dom-svgclippathelement-clippathunits": {"export":true,"for_":["SVGClipPathElement"],"level":"1","normative":true,"shortname":"css-masking","spec":"css-masking-1","status":"local","text":"clipPathUnits","type":"attribute","url":"#dom-svgclippathelement-clippathunits"}, "#dom-svgclippathelement-transform": {"export":true,"for_":["SVGClipPathElement"],"level":"1","normative":true,"shortname":"css-masking","spec":"css-masking-1","status":"local","text":"transform","type":"attribute","url":"#dom-svgclippathelement-transform"}, "#dom-svgmaskelement-height": {"export":true,"for_":["SVGMaskElement"],"level":"1","normative":true,"shortname":"css-masking","spec":"css-masking-1","status":"local","text":"height","type":"attribute","url":"#dom-svgmaskelement-height"}, "#dom-svgmaskelement-maskcontentunits": {"export":true,"for_":["SVGMaskElement"],"level":"1","normative":true,"shortname":"css-masking","spec":"css-masking-1","status":"local","text":"maskContentUnits","type":"attribute","url":"#dom-svgmaskelement-maskcontentunits"}, "#dom-svgmaskelement-maskunits": {"export":true,"for_":["SVGMaskElement"],"level":"1","normative":true,"shortname":"css-masking","spec":"css-masking-1","status":"local","text":"maskUnits","type":"attribute","url":"#dom-svgmaskelement-maskunits"}, "#dom-svgmaskelement-width": {"export":true,"for_":["SVGMaskElement"],"level":"1","normative":true,"shortname":"css-masking","spec":"css-masking-1","status":"local","text":"width","type":"attribute","url":"#dom-svgmaskelement-width"}, "#dom-svgmaskelement-x": {"export":true,"for_":["SVGMaskElement"],"level":"1","normative":true,"shortname":"css-masking","spec":"css-masking-1","status":"local","text":"x","type":"attribute","url":"#dom-svgmaskelement-x"}, "#dom-svgmaskelement-y": {"export":true,"for_":["SVGMaskElement"],"level":"1","normative":true,"shortname":"css-masking","spec":"css-masking-1","status":"local","text":"y","type":"attribute","url":"#dom-svgmaskelement-y"}, "#element-attrdef-clippath-clippathunits": {"export":true,"for_":["clipPath"],"level":"1","normative":true,"shortname":"css-masking","spec":"css-masking-1","status":"local","text":"clippathunits","type":"element-attr","url":"#element-attrdef-clippath-clippathunits"}, "#element-attrdef-mask-height": {"export":true,"for_":["mask"],"level":"1","normative":true,"shortname":"css-masking","spec":"css-masking-1","status":"local","text":"height","type":"element-attr","url":"#element-attrdef-mask-height"}, "#element-attrdef-mask-maskcontentunits": {"export":true,"for_":["mask"],"level":"1","normative":true,"shortname":"css-masking","spec":"css-masking-1","status":"local","text":"maskcontentunits","type":"element-attr","url":"#element-attrdef-mask-maskcontentunits"}, "#element-attrdef-mask-maskunits": {"export":true,"for_":["mask"],"level":"1","normative":true,"shortname":"css-masking","spec":"css-masking-1","status":"local","text":"maskunits","type":"element-attr","url":"#element-attrdef-mask-maskunits"}, "#element-attrdef-mask-width": {"export":true,"for_":["mask"],"level":"1","normative":true,"shortname":"css-masking","spec":"css-masking-1","status":"local","text":"width","type":"element-attr","url":"#element-attrdef-mask-width"}, "#element-attrdef-mask-x": {"export":true,"for_":["mask"],"level":"1","normative":true,"shortname":"css-masking","spec":"css-masking-1","status":"local","text":"x","type":"element-attr","url":"#element-attrdef-mask-x"}, "#element-attrdef-mask-y": {"export":true,"for_":["mask"],"level":"1","normative":true,"shortname":"css-masking","spec":"css-masking-1","status":"local","text":"y","type":"element-attr","url":"#element-attrdef-mask-y"}, "#elementdef-clippath": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"css-masking","spec":"css-masking-1","status":"local","text":"clippath","type":"element","url":"#elementdef-clippath"}, "#elementdef-mask": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"css-masking","spec":"css-masking-1","status":"local","text":"mask","type":"element","url":"#elementdef-mask"}, "#funcdef-clip-rect": {"export":true,"for_":["clip"],"level":"1","normative":true,"shortname":"css-masking","spec":"css-masking-1","status":"local","text":"rect()","type":"function","url":"#funcdef-clip-rect"}, "#mask-border-image": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"css-masking","spec":"css-masking-1","status":"local","text":"mask border image","type":"dfn","url":"#mask-border-image"}, "#mask-border-image-area": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"css-masking","spec":"css-masking-1","status":"local","text":"mask border image area","type":"dfn","url":"#mask-border-image-area"}, "#mask-image": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"css-masking","spec":"css-masking-1","status":"local","text":"mask image","type":"dfn","url":"#mask-image"}, "#mask-layer-image": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"css-masking","spec":"css-masking-1","status":"local","text":"mask layer image","type":"dfn","url":"#mask-layer-image"}, "#mask-painting-area": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"css-masking","spec":"css-masking-1","status":"local","text":"mask painting area","type":"dfn","url":"#mask-painting-area"}, "#mask-positioning-area": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"css-masking","spec":"css-masking-1","status":"local","text":"mask positioning area","type":"dfn","url":"#mask-positioning-area"}, "#propdef-clip": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"css-masking","spec":"css-masking-1","status":"local","text":"clip","type":"property","url":"#propdef-clip"}, "#propdef-clip-path": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"css-masking","spec":"css-masking-1","status":"local","text":"clip-path","type":"property","url":"#propdef-clip-path"}, "#propdef-clip-rule": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"css-masking","spec":"css-masking-1","status":"local","text":"clip-rule","type":"property","url":"#propdef-clip-rule"}, "#propdef-mask": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"css-masking","spec":"css-masking-1","status":"local","text":"mask","type":"property","url":"#propdef-mask"}, "#propdef-mask-border": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"css-masking","spec":"css-masking-1","status":"local","text":"mask-border","type":"property","url":"#propdef-mask-border"}, "#propdef-mask-border-mode": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"css-masking","spec":"css-masking-1","status":"local","text":"mask-border-mode","type":"property","url":"#propdef-mask-border-mode"}, "#propdef-mask-border-outset": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"css-masking","spec":"css-masking-1","status":"local","text":"mask-border-outset","type":"property","url":"#propdef-mask-border-outset"}, "#propdef-mask-border-repeat": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"css-masking","spec":"css-masking-1","status":"local","text":"mask-border-repeat","type":"property","url":"#propdef-mask-border-repeat"}, "#propdef-mask-border-slice": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"css-masking","spec":"css-masking-1","status":"local","text":"mask-border-slice","type":"property","url":"#propdef-mask-border-slice"}, "#propdef-mask-border-source": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"css-masking","spec":"css-masking-1","status":"local","text":"mask-border-source","type":"property","url":"#propdef-mask-border-source"}, "#propdef-mask-border-width": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"css-masking","spec":"css-masking-1","status":"local","text":"mask-border-width","type":"property","url":"#propdef-mask-border-width"}, "#propdef-mask-clip": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"css-masking","spec":"css-masking-1","status":"local","text":"mask-clip","type":"property","url":"#propdef-mask-clip"}, "#propdef-mask-composite": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"css-masking","spec":"css-masking-1","status":"local","text":"mask-composite","type":"property","url":"#propdef-mask-composite"}, "#propdef-mask-image": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"css-masking","spec":"css-masking-1","status":"local","text":"mask-image","type":"property","url":"#propdef-mask-image"}, "#propdef-mask-mode": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"css-masking","spec":"css-masking-1","status":"local","text":"mask-mode","type":"property","url":"#propdef-mask-mode"}, "#propdef-mask-origin": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"css-masking","spec":"css-masking-1","status":"local","text":"mask-origin","type":"property","url":"#propdef-mask-origin"}, "#propdef-mask-position": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"css-masking","spec":"css-masking-1","status":"local","text":"mask-position","type":"property","url":"#propdef-mask-position"}, "#propdef-mask-repeat": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"css-masking","spec":"css-masking-1","status":"local","text":"mask-repeat","type":"property","url":"#propdef-mask-repeat"}, "#propdef-mask-size": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"css-masking","spec":"css-masking-1","status":"local","text":"mask-size","type":"property","url":"#propdef-mask-size"}, "#propdef-mask-type": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"css-masking","spec":"css-masking-1","status":"local","text":"mask-type","type":"property","url":"#propdef-mask-type"}, "#source": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"css-masking","spec":"css-masking-1","status":"local","text":"source","type":"dfn","url":"#source"}, "#stroke-bounding-box": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"css-masking","spec":"css-masking-1","status":"local","text":"stroke bounding box","type":"dfn","url":"#stroke-bounding-box"}, "#svgclippathelement": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"css-masking","spec":"css-masking-1","status":"local","text":"SVGClipPathElement","type":"interface","url":"#svgclippathelement"}, "#svgmaskelement": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"css-masking","spec":"css-masking-1","status":"local","text":"SVGMaskElement","type":"interface","url":"#svgmaskelement"}, "#typedef-clip-bottom": {"export":true,"for_":["clip"],"level":"1","normative":true,"shortname":"css-masking","spec":"css-masking-1","status":"local","text":"<bottom>","type":"type","url":"#typedef-clip-bottom"}, "#typedef-clip-left": {"export":true,"for_":["clip"],"level":"1","normative":true,"shortname":"css-masking","spec":"css-masking-1","status":"local","text":"<left>","type":"type","url":"#typedef-clip-left"}, "#typedef-clip-right": {"export":true,"for_":["clip"],"level":"1","normative":true,"shortname":"css-masking","spec":"css-masking-1","status":"local","text":"<right>","type":"type","url":"#typedef-clip-right"}, "#typedef-clip-source": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"css-masking","spec":"css-masking-1","status":"local","text":"<clip-source>","type":"type","url":"#typedef-clip-source"}, "#typedef-clip-top": {"export":true,"for_":["clip"],"level":"1","normative":true,"shortname":"css-masking","spec":"css-masking-1","status":"local","text":"<top>","type":"type","url":"#typedef-clip-top"}, "#typedef-compositing-operator": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"css-masking","spec":"css-masking-1","status":"local","text":"<compositing-operator>","type":"type","url":"#typedef-compositing-operator"}, "#typedef-geometry-box": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"css-masking","spec":"css-masking-1","status":"local","text":"<geometry-box>","type":"type","url":"#typedef-geometry-box"}, "#typedef-mask-layer": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"css-masking","spec":"css-masking-1","status":"local","text":"<mask-layer>","type":"type","url":"#typedef-mask-layer"}, "#typedef-mask-reference": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"css-masking","spec":"css-masking-1","status":"local","text":"<mask-reference>","type":"type","url":"#typedef-mask-reference"}, "#typedef-mask-source": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"css-masking","spec":"css-masking-1","status":"local","text":"<mask-source>","type":"type","url":"#typedef-mask-source"}, "#typedef-masking-mode": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"css-masking","spec":"css-masking-1","status":"local","text":"<masking-mode>","type":"type","url":"#typedef-masking-mode"}, "#valdef-clip-path-fill-box": {"export":true,"for_":["clip-path"],"level":"1","normative":true,"shortname":"css-masking","spec":"css-masking-1","status":"local","text":"fill-box","type":"value","url":"#valdef-clip-path-fill-box"}, "#valdef-clip-path-stroke-box": {"export":true,"for_":["clip-path"],"level":"1","normative":true,"shortname":"css-masking","spec":"css-masking-1","status":"local","text":"stroke-box","type":"value","url":"#valdef-clip-path-stroke-box"}, "#valdef-clip-path-view-box": {"export":true,"for_":["clip-path"],"level":"1","normative":true,"shortname":"css-masking","spec":"css-masking-1","status":"local","text":"view-box","type":"value","url":"#valdef-clip-path-view-box"}, "#valdef-clip-rule-evenodd": {"export":true,"for_":["clip-rule"],"level":"1","normative":true,"shortname":"css-masking","spec":"css-masking-1","status":"local","text":"evenodd","type":"value","url":"#valdef-clip-rule-evenodd"}, "#valdef-clip-rule-nonzero": {"export":true,"for_":["clip-rule"],"level":"1","normative":true,"shortname":"css-masking","spec":"css-masking-1","status":"local","text":"nonzero","type":"value","url":"#valdef-clip-rule-nonzero"}, "#valdef-clippathunits-objectboundingbox": {"export":true,"for_":["clipPathUnits"],"level":"1","normative":true,"shortname":"css-masking","spec":"css-masking-1","status":"local","text":"objectboundingbox","type":"value","url":"#valdef-clippathunits-objectboundingbox"}, "#valdef-clippathunits-userspaceonuse": {"export":true,"for_":["clipPathUnits"],"level":"1","normative":true,"shortname":"css-masking","spec":"css-masking-1","status":"local","text":"userspaceonuse","type":"value","url":"#valdef-clippathunits-userspaceonuse"}, "#valdef-mask-border-mode-alpha": {"export":true,"for_":["mask-border-mode"],"level":"1","normative":true,"shortname":"css-masking","spec":"css-masking-1","status":"local","text":"alpha","type":"value","url":"#valdef-mask-border-mode-alpha"}, "#valdef-mask-border-mode-luminance": {"export":true,"for_":["mask-border-mode"],"level":"1","normative":true,"shortname":"css-masking","spec":"css-masking-1","status":"local","text":"luminance","type":"value","url":"#valdef-mask-border-mode-luminance"}, "#valdef-mask-border-slice-fill": {"export":true,"for_":["mask-border-slice"],"level":"1","normative":true,"shortname":"css-masking","spec":"css-masking-1","status":"local","text":"fill","type":"value","url":"#valdef-mask-border-slice-fill"}, "#valdef-mask-clip-border-box": {"export":true,"for_":["mask-clip"],"level":"1","normative":true,"shortname":"css-masking","spec":"css-masking-1","status":"local","text":"border-box","type":"value","url":"#valdef-mask-clip-border-box"}, "#valdef-mask-clip-content-box": {"export":true,"for_":["mask-clip"],"level":"1","normative":true,"shortname":"css-masking","spec":"css-masking-1","status":"local","text":"content-box","type":"value","url":"#valdef-mask-clip-content-box"}, "#valdef-mask-clip-fill-box": {"export":true,"for_":["mask-clip"],"level":"1","normative":true,"shortname":"css-masking","spec":"css-masking-1","status":"local","text":"fill-box","type":"value","url":"#valdef-mask-clip-fill-box"}, "#valdef-mask-clip-no-clip": {"export":true,"for_":["mask-clip"],"level":"1","normative":true,"shortname":"css-masking","spec":"css-masking-1","status":"local","text":"no-clip","type":"value","url":"#valdef-mask-clip-no-clip"}, "#valdef-mask-clip-padding-box": {"export":true,"for_":["mask-clip"],"level":"1","normative":true,"shortname":"css-masking","spec":"css-masking-1","status":"local","text":"padding-box","type":"value","url":"#valdef-mask-clip-padding-box"}, "#valdef-mask-clip-stroke-box": {"export":true,"for_":["mask-clip"],"level":"1","normative":true,"shortname":"css-masking","spec":"css-masking-1","status":"local","text":"stroke-box","type":"value","url":"#valdef-mask-clip-stroke-box"}, "#valdef-mask-clip-view-box": {"export":true,"for_":["mask-clip"],"level":"1","normative":true,"shortname":"css-masking","spec":"css-masking-1","status":"local","text":"view-box","type":"value","url":"#valdef-mask-clip-view-box"}, "#valdef-mask-composite-add": {"export":true,"for_":["mask-composite"],"level":"1","normative":true,"shortname":"css-masking","spec":"css-masking-1","status":"local","text":"add","type":"value","url":"#valdef-mask-composite-add"}, "#valdef-mask-composite-exclude": {"export":true,"for_":["mask-composite"],"level":"1","normative":true,"shortname":"css-masking","spec":"css-masking-1","status":"local","text":"exclude","type":"value","url":"#valdef-mask-composite-exclude"}, "#valdef-mask-composite-intersect": {"export":true,"for_":["mask-composite"],"level":"1","normative":true,"shortname":"css-masking","spec":"css-masking-1","status":"local","text":"intersect","type":"value","url":"#valdef-mask-composite-intersect"}, "#valdef-mask-composite-subtract": {"export":true,"for_":["mask-composite"],"level":"1","normative":true,"shortname":"css-masking","spec":"css-masking-1","status":"local","text":"subtract","type":"value","url":"#valdef-mask-composite-subtract"}, "#valdef-mask-mode-alpha": {"export":true,"for_":["mask-mode"],"level":"1","normative":true,"shortname":"css-masking","spec":"css-masking-1","status":"local","text":"alpha","type":"value","url":"#valdef-mask-mode-alpha"}, "#valdef-mask-mode-luminance": {"export":true,"for_":["mask-mode"],"level":"1","normative":true,"shortname":"css-masking","spec":"css-masking-1","status":"local","text":"luminance","type":"value","url":"#valdef-mask-mode-luminance"}, "#valdef-mask-mode-match-source": {"export":true,"for_":["mask-mode"],"level":"1","normative":true,"shortname":"css-masking","spec":"css-masking-1","status":"local","text":"match-source","type":"value","url":"#valdef-mask-mode-match-source"}, "#valdef-mask-origin-border-box": {"export":true,"for_":["mask-origin"],"level":"1","normative":true,"shortname":"css-masking","spec":"css-masking-1","status":"local","text":"border-box","type":"value","url":"#valdef-mask-origin-border-box"}, "#valdef-mask-origin-content-box": {"export":true,"for_":["mask-origin"],"level":"1","normative":true,"shortname":"css-masking","spec":"css-masking-1","status":"local","text":"content-box","type":"value","url":"#valdef-mask-origin-content-box"}, "#valdef-mask-origin-fill-box": {"export":true,"for_":["mask-origin"],"level":"1","normative":true,"shortname":"css-masking","spec":"css-masking-1","status":"local","text":"fill-box","type":"value","url":"#valdef-mask-origin-fill-box"}, "#valdef-mask-origin-padding-box": {"export":true,"for_":["mask-origin"],"level":"1","normative":true,"shortname":"css-masking","spec":"css-masking-1","status":"local","text":"padding-box","type":"value","url":"#valdef-mask-origin-padding-box"}, "#valdef-mask-origin-stroke-box": {"export":true,"for_":["mask-origin"],"level":"1","normative":true,"shortname":"css-masking","spec":"css-masking-1","status":"local","text":"stroke-box","type":"value","url":"#valdef-mask-origin-stroke-box"}, "#valdef-mask-origin-view-box": {"export":true,"for_":["mask-origin"],"level":"1","normative":true,"shortname":"css-masking","spec":"css-masking-1","status":"local","text":"view-box","type":"value","url":"#valdef-mask-origin-view-box"}, "#valdef-mask-type-alpha": {"export":true,"for_":["mask-type"],"level":"1","normative":true,"shortname":"css-masking","spec":"css-masking-1","status":"local","text":"alpha","type":"value","url":"#valdef-mask-type-alpha"}, "#valdef-mask-type-luminance": {"export":true,"for_":["mask-type"],"level":"1","normative":true,"shortname":"css-masking","spec":"css-masking-1","status":"local","text":"luminance","type":"value","url":"#valdef-mask-type-luminance"}, "#valdef-maskcontentunits-objectboundingbox": {"export":true,"for_":["maskContentUnits"],"level":"1","normative":true,"shortname":"css-masking","spec":"css-masking-1","status":"local","text":"objectboundingbox","type":"value","url":"#valdef-maskcontentunits-objectboundingbox"}, "#valdef-maskcontentunits-userspaceonuse": {"export":true,"for_":["maskContentUnits"],"level":"1","normative":true,"shortname":"css-masking","spec":"css-masking-1","status":"local","text":"userspaceonuse","type":"value","url":"#valdef-maskcontentunits-userspaceonuse"}, "#valdef-maskunits-objectboundingbox": {"export":true,"for_":["maskUnits"],"level":"1","normative":true,"shortname":"css-masking","spec":"css-masking-1","status":"local","text":"objectboundingbox","type":"value","url":"#valdef-maskunits-objectboundingbox"}, "#valdef-maskunits-userspaceonuse": {"export":true,"for_":["maskUnits"],"level":"1","normative":true,"shortname":"css-masking","spec":"css-masking-1","status":"local","text":"userspaceonuse","type":"value","url":"#valdef-maskunits-userspaceonuse"}, "https://drafts.csswg.org/css-borders-4/#propdef-border-radius": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-borders","spec":"css-borders-4","status":"current","text":"border-radius","type":"property","url":"https://drafts.csswg.org/css-borders-4/#propdef-border-radius"}, "https://drafts.csswg.org/css-ui-4/#propdef-pointer-events": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-ui","spec":"css-ui-4","status":"current","text":"pointer-events","type":"property","url":"https://drafts.csswg.org/css-ui-4/#propdef-pointer-events"}, "https://drafts.csswg.org/css2/#valdef-clip-auto": {"export":true,"for_":["clip"],"level":"1","normative":true,"shortname":"css","spec":"css22","status":"current","text":"auto","type":"value","url":"https://drafts.csswg.org/css2/#valdef-clip-auto"}, "https://svgwg.org/specs/animations/#elementdef-animate": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"svg-animations","spec":"svg-animations","status":"current","text":"animate","type":"element","url":"https://svgwg.org/specs/animations/#elementdef-animate"}, "https://svgwg.org/specs/animations/#elementdef-animateMotion": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"svg-animations","spec":"svg-animations","status":"current","text":"animatemotion","type":"element","url":"https://svgwg.org/specs/animations/#elementdef-animateMotion"}, "https://svgwg.org/specs/animations/#elementdef-animateTransform": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"svg-animations","spec":"svg-animations","status":"current","text":"animatetransform","type":"element","url":"https://svgwg.org/specs/animations/#elementdef-animateTransform"}, "https://svgwg.org/specs/animations/#elementdef-set": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"svg-animations","spec":"svg-animations","status":"current","text":"set","type":"element","url":"https://svgwg.org/specs/animations/#elementdef-set"}, "https://svgwg.org/svg2-draft/coords.html#ViewBoxAttribute": {"export":true,"for_":["svg"],"level":"","normative":true,"shortname":"svg2","spec":"svg2","status":"anchor-block","text":"viewbox","type":"element-attr","url":"https://svgwg.org/svg2-draft/coords.html#ViewBoxAttribute"}, "https://svgwg.org/svg2-draft/render.html#TermNeverRenderedElement": {"export":true,"for_":[],"level":"","normative":true,"shortname":"svg2","spec":"svg2","status":"anchor-block","text":"never-rendered element","type":"dfn","url":"https://svgwg.org/svg2-draft/render.html#TermNeverRenderedElement"}, "https://svgwg.org/svg2-draft/text.html#TermTextContentElement": {"export":true,"for_":[],"level":"","normative":true,"shortname":"svg2","spec":"svg2","status":"anchor-block","text":"text content element","type":"dfn","url":"https://svgwg.org/svg2-draft/text.html#TermTextContentElement"}, "https://webidl.spec.whatwg.org/#Exposed": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"webidl","spec":"webidl","status":"current","text":"Exposed","type":"extended-attribute","url":"https://webidl.spec.whatwg.org/#Exposed"}, "https://www.w3.org/TR/CSS21/visuren.html#x43": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"css","spec":"css2","status":"snapshot","text":"stacking context","type":"dfn","url":"https://www.w3.org/TR/CSS21/visuren.html#x43"}, "https://www.w3.org/TR/SVG2/coords.html#InterfaceSVGAnimatedTransformList": {"export":true,"for_":[],"level":"2","normative":true,"shortname":"svg","spec":"svg2","status":"snapshot","text":"SVGAnimatedTransformList","type":"interface","url":"https://www.w3.org/TR/SVG2/coords.html#InterfaceSVGAnimatedTransformList"}, "https://www.w3.org/TR/SVG2/coords.html#TermObjectBoundingBox": {"export":true,"for_":[],"level":"2","normative":true,"shortname":"svg","spec":"svg2","status":"snapshot","text":"object bounding box","type":"dfn","url":"https://www.w3.org/TR/SVG2/coords.html#TermObjectBoundingBox"}, "https://www.w3.org/TR/SVG2/coords.html#bounding-box": {"export":true,"for_":[],"level":"2","normative":true,"shortname":"svg","spec":"svg2","status":"snapshot","text":"bounding box","type":"dfn","url":"https://www.w3.org/TR/SVG2/coords.html#bounding-box"}, "https://www.w3.org/TR/SVG2/embedded.html#elementdef-foreignObject": {"export":true,"for_":[],"level":"2","normative":true,"shortname":"svg","spec":"svg2","status":"snapshot","text":"foreignobject","type":"element","url":"https://www.w3.org/TR/SVG2/embedded.html#elementdef-foreignObject"}, "https://www.w3.org/TR/SVG2/embedded.html#elementdef-image": {"export":true,"for_":[],"level":"2","normative":true,"shortname":"svg","spec":"svg2","status":"snapshot","text":"image","type":"element","url":"https://www.w3.org/TR/SVG2/embedded.html#elementdef-image"}, "https://www.w3.org/TR/SVG2/interact.html#elementdef-script": {"export":true,"for_":[],"level":"2","normative":true,"shortname":"svg","spec":"svg2","status":"snapshot","text":"script","type":"element","url":"https://www.w3.org/TR/SVG2/interact.html#elementdef-script"}, "https://www.w3.org/TR/SVG2/linking.html#elementdef-a": {"export":true,"for_":[],"level":"2","normative":true,"shortname":"svg","spec":"svg2","status":"snapshot","text":"a","type":"element","url":"https://www.w3.org/TR/SVG2/linking.html#elementdef-a"}, "https://www.w3.org/TR/SVG2/linking.html#elementdef-view": {"export":true,"for_":[],"level":"2","normative":true,"shortname":"svg","spec":"svg2","status":"snapshot","text":"view","type":"element","url":"https://www.w3.org/TR/SVG2/linking.html#elementdef-view"}, "https://www.w3.org/TR/SVG2/painting.html#ColorInterpolationProperty": {"export":true,"for_":[],"level":"2","normative":true,"shortname":"svg","spec":"svg2","status":"snapshot","text":"color-interpolation","type":"property","url":"https://www.w3.org/TR/SVG2/painting.html#ColorInterpolationProperty"}, "https://www.w3.org/TR/SVG2/painting.html#ColorRenderingProperty": {"export":true,"for_":[],"level":"2","normative":true,"shortname":"svg","spec":"svg2","status":"snapshot","text":"color-rendering","type":"property","url":"https://www.w3.org/TR/SVG2/painting.html#ColorRenderingProperty"}, "https://www.w3.org/TR/SVG2/painting.html#FillOpacityProperty": {"export":true,"for_":[],"level":"2","normative":true,"shortname":"svg","spec":"svg2","status":"snapshot","text":"fill-opacity","type":"property","url":"https://www.w3.org/TR/SVG2/painting.html#FillOpacityProperty"}, "https://www.w3.org/TR/SVG2/painting.html#FillProperty": {"export":true,"for_":[],"level":"2","normative":true,"shortname":"svg","spec":"svg2","status":"snapshot","text":"fill","type":"property","url":"https://www.w3.org/TR/SVG2/painting.html#FillProperty"}, "https://www.w3.org/TR/SVG2/painting.html#FillRuleProperty": {"export":true,"for_":[],"level":"2","normative":true,"shortname":"svg","spec":"svg2","status":"snapshot","text":"fill-rule","type":"property","url":"https://www.w3.org/TR/SVG2/painting.html#FillRuleProperty"}, "https://www.w3.org/TR/SVG2/painting.html#MarkerEndProperty": {"export":true,"for_":[],"level":"2","normative":true,"shortname":"svg","spec":"svg2","status":"snapshot","text":"marker-end","type":"property","url":"https://www.w3.org/TR/SVG2/painting.html#MarkerEndProperty"}, "https://www.w3.org/TR/SVG2/painting.html#MarkerMidProperty": {"export":true,"for_":[],"level":"2","normative":true,"shortname":"svg","spec":"svg2","status":"snapshot","text":"marker-mid","type":"property","url":"https://www.w3.org/TR/SVG2/painting.html#MarkerMidProperty"}, "https://www.w3.org/TR/SVG2/painting.html#MarkerProperty": {"export":true,"for_":[],"level":"2","normative":true,"shortname":"svg","spec":"svg2","status":"snapshot","text":"marker","type":"property","url":"https://www.w3.org/TR/SVG2/painting.html#MarkerProperty"}, "https://www.w3.org/TR/SVG2/painting.html#MarkerStartProperty": {"export":true,"for_":[],"level":"2","normative":true,"shortname":"svg","spec":"svg2","status":"snapshot","text":"marker-start","type":"property","url":"https://www.w3.org/TR/SVG2/painting.html#MarkerStartProperty"}, "https://www.w3.org/TR/SVG2/painting.html#ShapeRenderingProperty": {"export":true,"for_":[],"level":"2","normative":true,"shortname":"svg","spec":"svg2","status":"snapshot","text":"shape-rendering","type":"property","url":"https://www.w3.org/TR/SVG2/painting.html#ShapeRenderingProperty"}, "https://www.w3.org/TR/SVG2/painting.html#StrokeDasharrayProperty": {"export":true,"for_":[],"level":"2","normative":true,"shortname":"svg","spec":"svg2","status":"snapshot","text":"stroke-dasharray","type":"property","url":"https://www.w3.org/TR/SVG2/painting.html#StrokeDasharrayProperty"}, "https://www.w3.org/TR/SVG2/painting.html#StrokeDashoffsetProperty": {"export":true,"for_":[],"level":"2","normative":true,"shortname":"svg","spec":"svg2","status":"snapshot","text":"stroke-dashoffset","type":"property","url":"https://www.w3.org/TR/SVG2/painting.html#StrokeDashoffsetProperty"}, "https://www.w3.org/TR/SVG2/painting.html#StrokeLinecapProperty": {"export":true,"for_":[],"level":"2","normative":true,"shortname":"svg","spec":"svg2","status":"snapshot","text":"stroke-linecap","type":"property","url":"https://www.w3.org/TR/SVG2/painting.html#StrokeLinecapProperty"}, "https://www.w3.org/TR/SVG2/painting.html#StrokeLinejoinProperty": {"export":true,"for_":[],"level":"2","normative":true,"shortname":"svg","spec":"svg2","status":"snapshot","text":"stroke-linejoin","type":"property","url":"https://www.w3.org/TR/SVG2/painting.html#StrokeLinejoinProperty"}, "https://www.w3.org/TR/SVG2/painting.html#StrokeMiterlimitProperty": {"export":true,"for_":[],"level":"2","normative":true,"shortname":"svg","spec":"svg2","status":"snapshot","text":"stroke-miterlimit","type":"property","url":"https://www.w3.org/TR/SVG2/painting.html#StrokeMiterlimitProperty"}, "https://www.w3.org/TR/SVG2/painting.html#StrokeOpacityProperty": {"export":true,"for_":[],"level":"2","normative":true,"shortname":"svg","spec":"svg2","status":"snapshot","text":"stroke-opacity","type":"property","url":"https://www.w3.org/TR/SVG2/painting.html#StrokeOpacityProperty"}, "https://www.w3.org/TR/SVG2/painting.html#StrokeProperty": {"export":true,"for_":[],"level":"2","normative":true,"shortname":"svg","spec":"svg2","status":"snapshot","text":"stroke","type":"property","url":"https://www.w3.org/TR/SVG2/painting.html#StrokeProperty"}, "https://www.w3.org/TR/SVG2/painting.html#StrokeWidthProperty": {"export":true,"for_":[],"level":"2","normative":true,"shortname":"svg","spec":"svg2","status":"snapshot","text":"stroke-width","type":"property","url":"https://www.w3.org/TR/SVG2/painting.html#StrokeWidthProperty"}, "https://www.w3.org/TR/SVG2/painting.html#TextRenderingProperty": {"export":true,"for_":[],"level":"2","normative":true,"shortname":"svg","spec":"svg2","status":"snapshot","text":"text-rendering","type":"property","url":"https://www.w3.org/TR/SVG2/painting.html#TextRenderingProperty"}, "https://www.w3.org/TR/SVG2/painting.html#elementdef-marker": {"export":true,"for_":[],"level":"2","normative":true,"shortname":"svg","spec":"svg2","status":"snapshot","text":"marker","type":"element","url":"https://www.w3.org/TR/SVG2/painting.html#elementdef-marker"}, "https://www.w3.org/TR/SVG2/paths.html#elementdef-path": {"export":true,"for_":[],"level":"2","normative":true,"shortname":"svg","spec":"svg2","status":"snapshot","text":"path","type":"element","url":"https://www.w3.org/TR/SVG2/paths.html#elementdef-path"}, "https://www.w3.org/TR/SVG2/pservers.html#StopColorProperty": {"export":true,"for_":["stop"],"level":"2","normative":true,"shortname":"svg","spec":"svg2","status":"snapshot","text":"stop-color","type":"property","url":"https://www.w3.org/TR/SVG2/pservers.html#StopColorProperty"}, "https://www.w3.org/TR/SVG2/pservers.html#StopOpacityProperty": {"export":true,"for_":["stop"],"level":"2","normative":true,"shortname":"svg","spec":"svg2","status":"snapshot","text":"stop-opacity","type":"property","url":"https://www.w3.org/TR/SVG2/pservers.html#StopOpacityProperty"}, "https://www.w3.org/TR/SVG2/pservers.html#elementdef-linearGradient": {"export":true,"for_":[],"level":"2","normative":true,"shortname":"svg","spec":"svg2","status":"snapshot","text":"lineargradient","type":"element","url":"https://www.w3.org/TR/SVG2/pservers.html#elementdef-linearGradient"}, "https://www.w3.org/TR/SVG2/pservers.html#elementdef-pattern": {"export":true,"for_":[],"level":"2","normative":true,"shortname":"svg","spec":"svg2","status":"snapshot","text":"pattern","type":"element","url":"https://www.w3.org/TR/SVG2/pservers.html#elementdef-pattern"}, "https://www.w3.org/TR/SVG2/pservers.html#elementdef-radialGradient": {"export":true,"for_":[],"level":"2","normative":true,"shortname":"svg","spec":"svg2","status":"snapshot","text":"radialgradient","type":"element","url":"https://www.w3.org/TR/SVG2/pservers.html#elementdef-radialGradient"}, "https://www.w3.org/TR/SVG2/shapes.html#basic-shape": {"export":true,"for_":[],"level":"2","normative":true,"shortname":"svg","spec":"svg2","status":"snapshot","text":"basic shape","type":"dfn","url":"https://www.w3.org/TR/SVG2/shapes.html#basic-shape"}, "https://www.w3.org/TR/SVG2/shapes.html#elementdef-circle": {"export":true,"for_":[],"level":"2","normative":true,"shortname":"svg","spec":"svg2","status":"snapshot","text":"circle","type":"element","url":"https://www.w3.org/TR/SVG2/shapes.html#elementdef-circle"}, "https://www.w3.org/TR/SVG2/shapes.html#elementdef-ellipse": {"export":true,"for_":[],"level":"2","normative":true,"shortname":"svg","spec":"svg2","status":"snapshot","text":"ellipse","type":"element","url":"https://www.w3.org/TR/SVG2/shapes.html#elementdef-ellipse"}, "https://www.w3.org/TR/SVG2/shapes.html#elementdef-line": {"export":true,"for_":[],"level":"2","normative":true,"shortname":"svg","spec":"svg2","status":"snapshot","text":"line","type":"element","url":"https://www.w3.org/TR/SVG2/shapes.html#elementdef-line"}, "https://www.w3.org/TR/SVG2/shapes.html#elementdef-polygon": {"export":true,"for_":[],"level":"2","normative":true,"shortname":"svg","spec":"svg2","status":"snapshot","text":"polygon","type":"element","url":"https://www.w3.org/TR/SVG2/shapes.html#elementdef-polygon"}, "https://www.w3.org/TR/SVG2/shapes.html#elementdef-polyline": {"export":true,"for_":[],"level":"2","normative":true,"shortname":"svg","spec":"svg2","status":"snapshot","text":"polyline","type":"element","url":"https://www.w3.org/TR/SVG2/shapes.html#elementdef-polyline"}, "https://www.w3.org/TR/SVG2/shapes.html#elementdef-rect": {"export":true,"for_":[],"level":"2","normative":true,"shortname":"svg","spec":"svg2","status":"snapshot","text":"rect","type":"element","url":"https://www.w3.org/TR/SVG2/shapes.html#elementdef-rect"}, "https://www.w3.org/TR/SVG2/struct.html#container-element": {"export":true,"for_":[],"level":"2","normative":true,"shortname":"svg","spec":"svg2","status":"snapshot","text":"container element","type":"dfn","url":"https://www.w3.org/TR/SVG2/struct.html#container-element"}, "https://www.w3.org/TR/SVG2/struct.html#elementdef-defs": {"export":true,"for_":[],"level":"2","normative":true,"shortname":"svg","spec":"svg2","status":"snapshot","text":"defs","type":"element","url":"https://www.w3.org/TR/SVG2/struct.html#elementdef-defs"}, "https://www.w3.org/TR/SVG2/struct.html#elementdef-desc": {"export":true,"for_":[],"level":"2","normative":true,"shortname":"svg","spec":"svg2","status":"snapshot","text":"desc","type":"element","url":"https://www.w3.org/TR/SVG2/struct.html#elementdef-desc"}, "https://www.w3.org/TR/SVG2/struct.html#elementdef-g": {"export":true,"for_":[],"level":"2","normative":true,"shortname":"svg","spec":"svg2","status":"snapshot","text":"g","type":"element","url":"https://www.w3.org/TR/SVG2/struct.html#elementdef-g"}, "https://www.w3.org/TR/SVG2/struct.html#elementdef-metadata": {"export":true,"for_":[],"level":"2","normative":true,"shortname":"svg","spec":"svg2","status":"snapshot","text":"metadata","type":"element","url":"https://www.w3.org/TR/SVG2/struct.html#elementdef-metadata"}, "https://www.w3.org/TR/SVG2/struct.html#elementdef-svg": {"export":true,"for_":[],"level":"2","normative":true,"shortname":"svg","spec":"svg2","status":"snapshot","text":"svg","type":"element","url":"https://www.w3.org/TR/SVG2/struct.html#elementdef-svg"}, "https://www.w3.org/TR/SVG2/struct.html#elementdef-switch": {"export":true,"for_":[],"level":"2","normative":true,"shortname":"svg","spec":"svg2","status":"snapshot","text":"switch","type":"element","url":"https://www.w3.org/TR/SVG2/struct.html#elementdef-switch"}, "https://www.w3.org/TR/SVG2/struct.html#elementdef-symbol": {"export":true,"for_":[],"level":"2","normative":true,"shortname":"svg","spec":"svg2","status":"snapshot","text":"symbol","type":"element","url":"https://www.w3.org/TR/SVG2/struct.html#elementdef-symbol"}, "https://www.w3.org/TR/SVG2/struct.html#elementdef-title": {"export":true,"for_":[],"level":"2","normative":true,"shortname":"svg","spec":"svg2","status":"snapshot","text":"title","type":"element","url":"https://www.w3.org/TR/SVG2/struct.html#elementdef-title"}, "https://www.w3.org/TR/SVG2/struct.html#elementdef-use": {"export":true,"for_":[],"level":"2","normative":true,"shortname":"svg","spec":"svg2","status":"snapshot","text":"use","type":"element","url":"https://www.w3.org/TR/SVG2/struct.html#elementdef-use"}, "https://www.w3.org/TR/SVG2/struct.html#graphics-element": {"export":true,"for_":[],"level":"2","normative":true,"shortname":"svg","spec":"svg2","status":"snapshot","text":"graphics element","type":"dfn","url":"https://www.w3.org/TR/SVG2/struct.html#graphics-element"}, "https://www.w3.org/TR/SVG2/styling.html#elementdef-style": {"export":true,"for_":[],"level":"2","normative":true,"shortname":"svg","spec":"svg2","status":"snapshot","text":"style","type":"element","url":"https://www.w3.org/TR/SVG2/styling.html#elementdef-style"}, "https://www.w3.org/TR/SVG2/text.html#TextAnchorProperty": {"export":true,"for_":[],"level":"2","normative":true,"shortname":"svg","spec":"svg2","status":"snapshot","text":"text-anchor","type":"property","url":"https://www.w3.org/TR/SVG2/text.html#TextAnchorProperty"}, "https://www.w3.org/TR/SVG2/text.html#elementdef-text": {"export":true,"for_":[],"level":"2","normative":true,"shortname":"svg","spec":"svg2","status":"snapshot","text":"text","type":"element","url":"https://www.w3.org/TR/SVG2/text.html#elementdef-text"}, "https://www.w3.org/TR/SVG2/types.html#InterfaceSVGAnimatedEnumeration": {"export":true,"for_":[],"level":"2","normative":true,"shortname":"svg","spec":"svg2","status":"snapshot","text":"SVGAnimatedEnumeration","type":"interface","url":"https://www.w3.org/TR/SVG2/types.html#InterfaceSVGAnimatedEnumeration"}, "https://www.w3.org/TR/SVG2/types.html#InterfaceSVGAnimatedLength": {"export":true,"for_":[],"level":"2","normative":true,"shortname":"svg","spec":"svg2","status":"snapshot","text":"SVGAnimatedLength","type":"interface","url":"https://www.w3.org/TR/SVG2/types.html#InterfaceSVGAnimatedLength"}, "https://www.w3.org/TR/SVG2/types.html#InterfaceSVGElement": {"export":true,"for_":[],"level":"2","normative":true,"shortname":"svg","spec":"svg2","status":"snapshot","text":"SVGElement","type":"interface","url":"https://www.w3.org/TR/SVG2/types.html#InterfaceSVGElement"}, "https://www.w3.org/TR/SVG2/types.html#InterfaceSVGUnitTypes": {"export":true,"for_":[],"level":"2","normative":true,"shortname":"svg","spec":"svg2","status":"snapshot","text":"SVGUnitTypes","type":"interface","url":"https://www.w3.org/TR/SVG2/types.html#InterfaceSVGUnitTypes"}, "https://www.w3.org/TR/css-backgrounds-3/#background-painting-area": {"export":false,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"snapshot","text":"background painting area","type":"dfn","url":"https://www.w3.org/TR/css-backgrounds-3/#background-painting-area"}, "https://www.w3.org/TR/css-backgrounds-3/#background-positioning-area": {"export":false,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"snapshot","text":"background positioning area","type":"dfn","url":"https://www.w3.org/TR/css-backgrounds-3/#background-positioning-area"}, "https://www.w3.org/TR/css-backgrounds-3/#border-image-area": {"export":false,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"snapshot","text":"border image area","type":"dfn","url":"https://www.w3.org/TR/css-backgrounds-3/#border-image-area"}, "https://www.w3.org/TR/css-backgrounds-3/#propdef-background": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"snapshot","text":"background","type":"property","url":"https://www.w3.org/TR/css-backgrounds-3/#propdef-background"}, "https://www.w3.org/TR/css-backgrounds-3/#propdef-background-origin": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"snapshot","text":"background-origin","type":"property","url":"https://www.w3.org/TR/css-backgrounds-3/#propdef-background-origin"}, "https://www.w3.org/TR/css-backgrounds-3/#propdef-background-position": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"snapshot","text":"background-position","type":"property","url":"https://www.w3.org/TR/css-backgrounds-3/#propdef-background-position"}, "https://www.w3.org/TR/css-backgrounds-3/#propdef-background-repeat": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"snapshot","text":"background-repeat","type":"property","url":"https://www.w3.org/TR/css-backgrounds-3/#propdef-background-repeat"}, "https://www.w3.org/TR/css-backgrounds-3/#propdef-background-size": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"snapshot","text":"background-size","type":"property","url":"https://www.w3.org/TR/css-backgrounds-3/#propdef-background-size"}, "https://www.w3.org/TR/css-backgrounds-3/#propdef-border-image": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"snapshot","text":"border-image","type":"property","url":"https://www.w3.org/TR/css-backgrounds-3/#propdef-border-image"}, "https://www.w3.org/TR/css-backgrounds-3/#propdef-border-image-repeat": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"snapshot","text":"border-image-repeat","type":"property","url":"https://www.w3.org/TR/css-backgrounds-3/#propdef-border-image-repeat"}, "https://www.w3.org/TR/css-backgrounds-3/#propdef-border-image-slice": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"snapshot","text":"border-image-slice","type":"property","url":"https://www.w3.org/TR/css-backgrounds-3/#propdef-border-image-slice"}, "https://www.w3.org/TR/css-backgrounds-3/#propdef-border-image-width": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"snapshot","text":"border-image-width","type":"property","url":"https://www.w3.org/TR/css-backgrounds-3/#propdef-border-image-width"}, "https://www.w3.org/TR/css-backgrounds-3/#propdef-border-width": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"snapshot","text":"border-width","type":"property","url":"https://www.w3.org/TR/css-backgrounds-3/#propdef-border-width"}, "https://www.w3.org/TR/css-backgrounds-3/#typedef-bg-size": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"snapshot","text":"<bg-size>","type":"type","url":"https://www.w3.org/TR/css-backgrounds-3/#typedef-bg-size"}, "https://www.w3.org/TR/css-backgrounds-3/#typedef-repeat-style": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"snapshot","text":"<repeat-style>","type":"type","url":"https://www.w3.org/TR/css-backgrounds-3/#typedef-repeat-style"}, "https://www.w3.org/TR/css-box-4/#typedef-coord-box": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"snapshot","text":"<coord-box>","type":"type","url":"https://www.w3.org/TR/css-box-4/#typedef-coord-box"}, "https://www.w3.org/TR/css-break-4/#propdef-box-decoration-break": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-break","spec":"css-break-4","status":"snapshot","text":"box-decoration-break","type":"property","url":"https://www.w3.org/TR/css-break-4/#propdef-box-decoration-break"}, "https://www.w3.org/TR/css-cascade-5/#used-value": {"export":true,"for_":[],"level":"5","normative":true,"shortname":"css-cascade","spec":"css-cascade-5","status":"snapshot","text":"used value","type":"dfn","url":"https://www.w3.org/TR/css-cascade-5/#used-value"}, "https://www.w3.org/TR/css-color-4/#propdef-color": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"snapshot","text":"color","type":"property","url":"https://www.w3.org/TR/css-color-4/#propdef-color"}, "https://www.w3.org/TR/css-color-4/#propdef-opacity": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"snapshot","text":"opacity","type":"property","url":"https://www.w3.org/TR/css-color-4/#propdef-opacity"}, "https://www.w3.org/TR/css-display-3/#propdef-display": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-display","spec":"css-display-3","status":"snapshot","text":"display","type":"property","url":"https://www.w3.org/TR/css-display-3/#propdef-display"}, "https://www.w3.org/TR/css-display-3/#propdef-visibility": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-display","spec":"css-display-3","status":"snapshot","text":"visibility","type":"property","url":"https://www.w3.org/TR/css-display-3/#propdef-visibility"}, "https://www.w3.org/TR/css-display-3/#valdef-display-none": {"export":true,"for_":["display","<display-box>"],"level":"3","normative":true,"shortname":"css-display","spec":"css-display-3","status":"snapshot","text":"none","type":"value","url":"https://www.w3.org/TR/css-display-3/#valdef-display-none"}, "https://www.w3.org/TR/css-fonts-4/#propdef-font": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-fonts","spec":"css-fonts-4","status":"snapshot","text":"font","type":"property","url":"https://www.w3.org/TR/css-fonts-4/#propdef-font"}, "https://www.w3.org/TR/css-fonts-4/#propdef-font-family": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-fonts","spec":"css-fonts-4","status":"snapshot","text":"font-family","type":"property","url":"https://www.w3.org/TR/css-fonts-4/#propdef-font-family"}, "https://www.w3.org/TR/css-fonts-4/#propdef-font-size": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-fonts","spec":"css-fonts-4","status":"snapshot","text":"font-size","type":"property","url":"https://www.w3.org/TR/css-fonts-4/#propdef-font-size"}, "https://www.w3.org/TR/css-fonts-4/#propdef-font-stretch": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-fonts","spec":"css-fonts-4","status":"snapshot","text":"font-stretch","type":"property","url":"https://www.w3.org/TR/css-fonts-4/#propdef-font-stretch"}, "https://www.w3.org/TR/css-fonts-4/#propdef-font-style": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-fonts","spec":"css-fonts-4","status":"snapshot","text":"font-style","type":"property","url":"https://www.w3.org/TR/css-fonts-4/#propdef-font-style"}, "https://www.w3.org/TR/css-fonts-4/#propdef-font-variant": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-fonts","spec":"css-fonts-4","status":"snapshot","text":"font-variant","type":"property","url":"https://www.w3.org/TR/css-fonts-4/#propdef-font-variant"}, "https://www.w3.org/TR/css-fonts-4/#propdef-font-weight": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-fonts","spec":"css-fonts-4","status":"snapshot","text":"font-weight","type":"property","url":"https://www.w3.org/TR/css-fonts-4/#propdef-font-weight"}, "https://www.w3.org/TR/css-fonts-5/#propdef-font-size-adjust": {"export":true,"for_":[],"level":"5","normative":true,"shortname":"css-fonts","spec":"css-fonts-5","status":"snapshot","text":"font-size-adjust","type":"property","url":"https://www.w3.org/TR/css-fonts-5/#propdef-font-size-adjust"}, "https://www.w3.org/TR/css-images-3/#propdef-image-rendering": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-images","spec":"css-images-3","status":"snapshot","text":"image-rendering","type":"property","url":"https://www.w3.org/TR/css-images-3/#propdef-image-rendering"}, "https://www.w3.org/TR/css-images-3/#typedef-image": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-images","spec":"css-images-3","status":"snapshot","text":"<image>","type":"type","url":"https://www.w3.org/TR/css-images-3/#typedef-image"}, "https://www.w3.org/TR/css-inline-3/#propdef-alignment-baseline": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-inline","spec":"css-inline-3","status":"snapshot","text":"alignment-baseline","type":"property","url":"https://www.w3.org/TR/css-inline-3/#propdef-alignment-baseline"}, "https://www.w3.org/TR/css-inline-3/#propdef-baseline-shift": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-inline","spec":"css-inline-3","status":"snapshot","text":"baseline-shift","type":"property","url":"https://www.w3.org/TR/css-inline-3/#propdef-baseline-shift"}, "https://www.w3.org/TR/css-inline-3/#propdef-dominant-baseline": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-inline","spec":"css-inline-3","status":"snapshot","text":"dominant-baseline","type":"property","url":"https://www.w3.org/TR/css-inline-3/#propdef-dominant-baseline"}, "https://www.w3.org/TR/css-overflow-3/#propdef-overflow": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-overflow","spec":"css-overflow-3","status":"snapshot","text":"overflow","type":"property","url":"https://www.w3.org/TR/css-overflow-3/#propdef-overflow"}, "https://www.w3.org/TR/css-overflow-3/#valdef-overflow-visible": {"export":true,"for_":["overflow","overflow-x","overflow-y"],"level":"3","normative":true,"shortname":"css-overflow","spec":"css-overflow-3","status":"snapshot","text":"visible","type":"value","url":"https://www.w3.org/TR/css-overflow-3/#valdef-overflow-visible"}, "https://www.w3.org/TR/css-shapes-1/#funcdef-basic-shape-polygon": {"export":true,"for_":["<basic-shape>"],"level":"1","normative":true,"shortname":"css-shapes","spec":"css-shapes-1","status":"snapshot","text":"polygon()","type":"function","url":"https://www.w3.org/TR/css-shapes-1/#funcdef-basic-shape-polygon"}, "https://www.w3.org/TR/css-shapes-1/#typedef-basic-shape": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"css-shapes","spec":"css-shapes-1","status":"snapshot","text":"<basic-shape>","type":"type","url":"https://www.w3.org/TR/css-shapes-1/#typedef-basic-shape"}, "https://www.w3.org/TR/css-shapes-1/#typedef-shape-box": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"css-shapes","spec":"css-shapes-1","status":"snapshot","text":"<shape-box>","type":"type","url":"https://www.w3.org/TR/css-shapes-1/#typedef-shape-box"}, "https://www.w3.org/TR/css-text-4/#propdef-letter-spacing": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-text","spec":"css-text-4","status":"snapshot","text":"letter-spacing","type":"property","url":"https://www.w3.org/TR/css-text-4/#propdef-letter-spacing"}, "https://www.w3.org/TR/css-text-4/#propdef-word-spacing": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-text","spec":"css-text-4","status":"snapshot","text":"word-spacing","type":"property","url":"https://www.w3.org/TR/css-text-4/#propdef-word-spacing"}, "https://www.w3.org/TR/css-text-decor-4/#propdef-text-decoration": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-text-decor","spec":"css-text-decor-4","status":"snapshot","text":"text-decoration","type":"property","url":"https://www.w3.org/TR/css-text-decor-4/#propdef-text-decoration"}, "https://www.w3.org/TR/css-transforms-1/#propdef-transform": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"css-transforms","spec":"css-transforms-1","status":"snapshot","text":"transform","type":"property","url":"https://www.w3.org/TR/css-transforms-1/#propdef-transform"}, "https://www.w3.org/TR/css-transforms-1/#user-coordinate-system": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"css-transforms","spec":"css-transforms-1","status":"snapshot","text":"user coordinate system","type":"dfn","url":"https://www.w3.org/TR/css-transforms-1/#user-coordinate-system"}, "https://www.w3.org/TR/css-ui-4/#propdef-cursor": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-ui","spec":"css-ui-4","status":"snapshot","text":"cursor","type":"property","url":"https://www.w3.org/TR/css-ui-4/#propdef-cursor"}, "https://www.w3.org/TR/css-values-4/#comb-any": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"snapshot","text":"||","type":"grammar","url":"https://www.w3.org/TR/css-values-4/#comb-any"}, "https://www.w3.org/TR/css-values-4/#comb-one": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"snapshot","text":"|","type":"grammar","url":"https://www.w3.org/TR/css-values-4/#comb-one"}, "https://www.w3.org/TR/css-values-4/#length-value": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"snapshot","text":"<length>","type":"type","url":"https://www.w3.org/TR/css-values-4/#length-value"}, "https://www.w3.org/TR/css-values-4/#mult-comma": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"snapshot","text":"#","type":"grammar","url":"https://www.w3.org/TR/css-values-4/#mult-comma"}, "https://www.w3.org/TR/css-values-4/#mult-num-range": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"snapshot","text":"{a,b}","type":"grammar","url":"https://www.w3.org/TR/css-values-4/#mult-num-range"}, "https://www.w3.org/TR/css-values-4/#mult-opt": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"snapshot","text":"?","type":"grammar","url":"https://www.w3.org/TR/css-values-4/#mult-opt"}, "https://www.w3.org/TR/css-values-4/#number-value": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"snapshot","text":"<number>","type":"type","url":"https://www.w3.org/TR/css-values-4/#number-value"}, "https://www.w3.org/TR/css-values-4/#percentage-value": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"snapshot","text":"<percentage>","type":"type","url":"https://www.w3.org/TR/css-values-4/#percentage-value"}, "https://www.w3.org/TR/css-values-4/#px": {"export":true,"for_":["<length>"],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"snapshot","text":"px","type":"value","url":"https://www.w3.org/TR/css-values-4/#px"}, "https://www.w3.org/TR/css-values-4/#typedef-length-percentage": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"snapshot","text":"<length-percentage>","type":"type","url":"https://www.w3.org/TR/css-values-4/#typedef-length-percentage"}, "https://www.w3.org/TR/css-values-4/#typedef-position": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"snapshot","text":"<position>","type":"type","url":"https://www.w3.org/TR/css-values-4/#typedef-position"}, "https://www.w3.org/TR/css-values-4/#url-value": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"snapshot","text":"<url>","type":"type","url":"https://www.w3.org/TR/css-values-4/#url-value"}, "https://www.w3.org/TR/css-writing-modes-3/#propdef-direction": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-3","status":"snapshot","text":"direction","type":"property","url":"https://www.w3.org/TR/css-writing-modes-3/#propdef-direction"}, "https://www.w3.org/TR/css-writing-modes-3/#propdef-unicode-bidi": {"export":true,"for_":[],"level":"3","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-3","status":"snapshot","text":"unicode-bidi","type":"property","url":"https://www.w3.org/TR/css-writing-modes-3/#propdef-unicode-bidi"}, "https://www.w3.org/TR/css-writing-modes-4/#propdef-glyph-orientation-vertical": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-4","status":"snapshot","text":"glyph-orientation-vertical","type":"property","url":"https://www.w3.org/TR/css-writing-modes-4/#propdef-glyph-orientation-vertical"}, "https://www.w3.org/TR/css-writing-modes-4/#propdef-writing-mode": {"export":true,"for_":[],"level":"4","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-4","status":"snapshot","text":"writing-mode","type":"property","url":"https://www.w3.org/TR/css-writing-modes-4/#propdef-writing-mode"}, "https://www.w3.org/TR/fill-stroke-3/#valdef-stroke-linecap-square": {"export":true,"for_":["stroke-linecap"],"level":"3","normative":true,"shortname":"fill-stroke","spec":"fill-stroke-3","status":"snapshot","text":"square","type":"value","url":"https://www.w3.org/TR/fill-stroke-3/#valdef-stroke-linecap-square"}, "https://www.w3.org/TR/fill-stroke-3/#valdef-stroke-linejoin-miter": {"export":true,"for_":["stroke-linejoin"],"level":"3","normative":true,"shortname":"fill-stroke","spec":"fill-stroke-3","status":"snapshot","text":"miter","type":"value","url":"https://www.w3.org/TR/fill-stroke-3/#valdef-stroke-linejoin-miter"}, "https://www.w3.org/TR/filter-effects-1/#elementdef-fecolormatrix": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"filter-effects","spec":"filter-effects-1","status":"snapshot","text":"fecolormatrix","type":"element","url":"https://www.w3.org/TR/filter-effects-1/#elementdef-fecolormatrix"}, "https://www.w3.org/TR/filter-effects-1/#elementdef-filter": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"filter-effects","spec":"filter-effects-1","status":"snapshot","text":"filter","type":"element","url":"https://www.w3.org/TR/filter-effects-1/#elementdef-filter"}, "https://www.w3.org/TR/filter-effects-1/#propdef-color-interpolation-filters": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"filter-effects","spec":"filter-effects-1","status":"snapshot","text":"color-interpolation-filters","type":"property","url":"https://www.w3.org/TR/filter-effects-1/#propdef-color-interpolation-filters"}, "https://www.w3.org/TR/filter-effects-1/#propdef-filter": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"filter-effects","spec":"filter-effects-1","status":"snapshot","text":"filter","type":"property","url":"https://www.w3.org/TR/filter-effects-1/#propdef-filter"}, "https://www.w3.org/TR/filter-effects-1/#propdef-flood-color": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"filter-effects","spec":"filter-effects-1","status":"snapshot","text":"flood-color","type":"property","url":"https://www.w3.org/TR/filter-effects-1/#propdef-flood-color"}, "https://www.w3.org/TR/filter-effects-1/#propdef-flood-opacity": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"filter-effects","spec":"filter-effects-1","status":"snapshot","text":"flood-opacity","type":"property","url":"https://www.w3.org/TR/filter-effects-1/#propdef-flood-opacity"}, "https://www.w3.org/TR/filter-effects-1/#propdef-lighting-color": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"filter-effects","spec":"filter-effects-1","status":"snapshot","text":"lighting-color","type":"property","url":"https://www.w3.org/TR/filter-effects-1/#propdef-lighting-color"}, "https://www.w3.org/TR/filter-effects-1/#valdef-color-interpolation-filters-linearrgb": {"export":true,"for_":["color-interpolation-filters"],"level":"1","normative":true,"shortname":"filter-effects","spec":"filter-effects-1","status":"snapshot","text":"linearrgb","type":"value","url":"https://www.w3.org/TR/filter-effects-1/#valdef-color-interpolation-filters-linearrgb"}, }; function mkRefHint(link, ref) { const linkText = link.textContent; let dfnTextElements = ''; if (ref.text != linkText) { dfnTextElements = mk.li({}, mk.b({}, "Term: "), mk.span({}, ref.text) ); } const forList = ref.for_; let forListElements; if(forList.length == 0) { forListElements = []; } else if(forList.length == 1) { forListElements = mk.li({}, mk.b({}, "For: "), mk.span({}, forList[0]), ); } else { forListElements = mk.li({}, mk.b({}, "For: "), mk.ul({}, ...forList.map(forItem => mk.li({}, mk.span({}, forItem) ), ), ), ); } const url = ref.url; const safeUrl = encodeURIComponent(url); const hintPanel = mk.aside({ class: "ref-hint", id: `ref-hint-for-${safeUrl}`, "data-for": url, "aria-labelled-by": `ref-hint-for-${safeUrl}`, }, mk.ul({}, dfnTextElements, mk.li({}, mk.b({}, "URL: "), mk.a({ href: url, class: "ref" }, url), ), mk.li({}, mk.b({}, "Type: "), mk.span({}, `${ref.type}`), ), mk.li({}, mk.b({}, "Spec: "), mk.span({}, `${ref.spec ? ref.spec : ''}`), ), forListElements ), ); hintPanel.forLink = link; setupRefHintEventListeners(link, hintPanel); return hintPanel; } function hideAllRefHints() { queryAll(".ref-hint").forEach(el=>hideRefHint(el)); } function hideRefHint(refHint) { const link = refHint.forLink; link.setAttribute("aria-expanded", "false"); if(refHint.teardownEventListeners) { refHint.teardownEventListeners(); } refHint.remove(); } function showRefHint(link) { if(link.classList.contains("dfn-link")) return; const url = link.getAttribute("href"); const ref = refsData[url]; if(!ref) return; hideAllRefHints(); // Only display one at this time. const refHint = mkRefHint(link, ref); append(document.body, refHint); link.setAttribute("aria-expanded", "true"); positionRefHint(refHint); } function setupRefHintEventListeners(link, refHint) { if (refHint.teardownEventListeners) return; // Add event handlers to hide the refHint after the user moves away // from both the link and refHint, if not hovering either within one second. let timeout = null; const startHidingRefHint = (event) => { if (timeout) { clearTimeout(timeout); } timeout = setTimeout(() => { hideRefHint(refHint); }, 1000); } const resetHidingRefHint = (event) => { if (timeout) clearTimeout(timeout); timeout = null; }; link.addEventListener("mouseleave", startHidingRefHint); link.addEventListener("mouseenter", resetHidingRefHint); link.addEventListener("blur", startHidingRefHint); link.addEventListener("focus", resetHidingRefHint); refHint.addEventListener("mouseleave", startHidingRefHint); refHint.addEventListener("mouseenter", resetHidingRefHint); refHint.addEventListener("blur", startHidingRefHint); refHint.addEventListener("focus", resetHidingRefHint); refHint.teardownEventListeners = () => { // remove event listeners resetHidingRefHint(); link.removeEventListener("mouseleave", startHidingRefHint); link.removeEventListener("mouseenter", resetHidingRefHint); link.removeEventListener("blur", startHidingRefHint); link.removeEventListener("focus", resetHidingRefHint); refHint.removeEventListener("mouseleave", startHidingRefHint); refHint.removeEventListener("mouseenter", resetHidingRefHint); refHint.removeEventListener("blur", startHidingRefHint); refHint.removeEventListener("focus", resetHidingRefHint); }; } function positionRefHint(refHint) { const link = refHint.forLink; const linkPos = getBounds(link); refHint.style.top = linkPos.bottom + "px"; refHint.style.left = linkPos.left + "px"; const panelPos = refHint.getBoundingClientRect(); const panelMargin = 8; const maxRight = document.body.parentNode.clientWidth - panelMargin; if (panelPos.right > maxRight) { const overflowAmount = panelPos.right - maxRight; const newLeft = Math.max(panelMargin, linkPos.left - overflowAmount); refHint.style.left = newLeft + "px"; } } // TODO: shared util // Returns the root-level absolute position {left and top} of element. function getBounds(el, relativeTo=document.body) { const relativeRect = relativeTo.getBoundingClientRect(); const elRect = el.getBoundingClientRect(); const top = elRect.top - relativeRect.top; const left = elRect.left - relativeRect.left; return { top, left, bottom: top + elRect.height, right: left + elRect.width, } } function showRefHintListener(e) { // If the target isn't in a link (or is a link), // just ignore it. let link = e.target.closest("a"); if(!link) return; // If the target is in a ref-hint panel // (aka a link in the already-open one), // also just ignore it. if(link.closest(".ref-hint")) return; // Otherwise, show the panel for the link. showRefHint(link); } function hideAllHintsListener(e) { // If the click is inside a ref-hint panel, ignore it. if(e.target.closest(".ref-hint")) return; // Otherwise, close all the current panels. hideAllRefHints(); } document.addEventListener("DOMContentLoaded", () => { document.body.addEventListener("mousedown", showRefHintListener); document.body.addEventListener("focus", showRefHintListener); document.body.addEventListener("click", hideAllHintsListener); }); window.addEventListener("resize", () => { // Hide any open ref hint. hideAllRefHints(); }); } </script>