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 Scroll Anchoring Module Level 1</title> <meta content="ED" name="w3c-status"> <link href="https://www.w3.org/StyleSheets/TR/2021/W3C-ED" rel="stylesheet"> <meta content="Bikeshed version 60c422380, updated Thu Feb 20 19:11:22 2025 -0800" name="generator"> <link href="https://www.w3.org/TR/css-scroll-anchoring-1/" rel="canonical"> <link href="https://drafts.csswg.org/csslogo.ico" rel="icon"> <meta content="00a4565adc80e6981e7fdefb92480d41c0f5ffea" name="revision"> <meta content="dark light" name="color-scheme"> <link href="https://www.w3.org/StyleSheets/TR/2021/dark.css" media="(prefers-color-scheme: dark)" rel="stylesheet" type="text/css"> <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-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-mdn-anno */ :root { --mdn-bg: #EEE; --mdn-shadow: #999; --mdn-nosupport-text: #ccc; --mdn-pass: green; --mdn-fail: red; } @media (prefers-color-scheme: dark) { :root { --mdn-bg: #222; --mdn-shadow: #444; --mdn-nosupport-text: #666; --mdn-pass: #690; --mdn-fail: #d22; } } .mdn-anno { background: var(--mdn-bg, #EEE); border-radius: .25em; box-shadow: 0 0 3px var(--mdn-shadow, #999); color: var(--text, black); font: 1em sans-serif; hyphens: none; max-width: min-content; overflow: hidden; padding: 0.2em; position: absolute; right: 0.3em; top: auto; white-space: nowrap; word-wrap: normal; z-index: 8; } .mdn-anno.unpositioned { display: none; } .mdn-anno.overlapping-main { opacity: .2; transition: opacity .1s; } .mdn-anno[open] { opacity: 1; z-index: 9; min-width: 9em; } .mdn-anno:hover { opacity: 1; outline: var(--text, black) 1px solid; } .mdn-anno > summary { font-weight: normal; text-align: right; cursor: pointer; display: block; } .mdn-anno > summary > .less-than-two-engines-flag { color: var(--mdn-fail); padding-right: 2px; } .mdn-anno > summary > .all-engines-flag { color: var(--mdn-pass); padding-right: 2px; } .mdn-anno > summary > span { color: #fff; background-color: #000; font-weight: normal; font-family: zillaslab, Palatino, "Palatino Linotype", serif; padding: 2px 3px 0px 3px; line-height: 1.3em; vertical-align: top; } .mdn-anno > .feature { margin-top: 20px; } .mdn-anno > .feature:not(:first-of-type) { border-top: 1px solid #999; margin-top: 6px; padding-top: 2px; } .mdn-anno > .feature > .less-than-two-engines-text { color: var(--mdn-fail); } .mdn-anno > .feature > .all-engines-text { color: var(--mdn-pass); } .mdn-anno > .feature > p { font-size: .75em; margin-top: 6px; margin-bottom: 0; } .mdn-anno > .feature > p + p { margin-top: 3px; } .mdn-anno > .feature > .support { display: block; font-size: 0.6em; margin: 0; padding: 0; margin-top: 2px; } .mdn-anno > .feature > .support + div { padding-top: 0.5em; } .mdn-anno > .feature > .support > hr { display: block; border: none; border-top: 1px dotted #999; padding: 3px 0px 0px 0px; margin: 2px 3px 0px 3px; } .mdn-anno > .feature > .support > hr::before { content: ""; } .mdn-anno > .feature > .support > span { padding: 0.2em 0; display: block; display: table; } .mdn-anno > .feature > .support > span.no { color: var(--mdn-nosupport-text); filter: grayscale(100%); } .mdn-anno > .feature > .support > span.no::before { opacity: 0.5; } .mdn-anno > .feature > .support > span:first-of-type { padding-top: 0.5em; } .mdn-anno > .feature > .support > span > span { padding: 0 0.5em; display: table-cell; } .mdn-anno > .feature > .support > span > span:first-child { width: 100%; } .mdn-anno > .feature > .support > span > span:last-child { width: 100%; white-space: pre; padding: 0; } .mdn-anno > .feature > .support > span::before { content: ' '; display: table-cell; min-width: 1.5em; height: 1.5em; background: no-repeat center center; background-size: contain; text-align: right; font-size: 0.75em; font-weight: bold; } .mdn-anno > .feature > .support > .chrome_android::before { background-image: url(https://resources.whatwg.org/browser-logos/chrome.svg); } .mdn-anno > .feature > .support > .firefox_android::before { background-image: url(https://resources.whatwg.org/browser-logos/firefox.png); } .mdn-anno > .feature > .support > .chrome::before { background-image: url(https://resources.whatwg.org/browser-logos/chrome.svg); } .mdn-anno > .feature > .support > .edge_blink::before { background-image: url(https://resources.whatwg.org/browser-logos/edge.svg); } .mdn-anno > .feature > .support > .edge::before { background-image: url(https://resources.whatwg.org/browser-logos/edge_legacy.svg); } .mdn-anno > .feature > .support > .firefox::before { background-image: url(https://resources.whatwg.org/browser-logos/firefox.png); } .mdn-anno > .feature > .support > .ie::before { background-image: url(https://resources.whatwg.org/browser-logos/ie.png); } .mdn-anno > .feature > .support > .safari_ios::before { background-image: url(https://resources.whatwg.org/browser-logos/safari-ios.svg); } .mdn-anno > .feature > .support > .nodejs::before { background-image: url(https://nodejs.org/favicon.ico); } .mdn-anno > .feature > .support > .opera_android::before { background-image: url(https://resources.whatwg.org/browser-logos/opera.svg); } .mdn-anno > .feature > .support > .opera::before { background-image: url(https://resources.whatwg.org/browser-logos/opera.svg); } .mdn-anno > .feature > .support > .safari::before { background-image: url(https://resources.whatwg.org/browser-logos/safari.png); } .mdn-anno > .feature > .support > .samsunginternet_android::before { background-image: url(https://resources.whatwg.org/browser-logos/samsung.svg); } .mdn-anno > .feature > .support > .webview_android::before { background-image: url(https://resources.whatwg.org/browser-logos/android-webview.png); } .name-slug-mismatch { color: red; } .caniuse-status:hover { z-index: 9; } /* dt, li, .issue, .note, and .example are "position: relative", so to put annotation at right margin, must move to right of containing block */; .h-entry:not(.status-LS) dt > .mdn-anno, .h-entry:not(.status-LS) li > .mdn-anno, .h-entry:not(.status-LS) .issue > .mdn-anno, .h-entry:not(.status-LS) .note > .mdn-anno, .h-entry:not(.status-LS) .example > .mdn-anno { right: -6.7em; } .h-entry p + .mdn-anno { margin-top: 0; } h2 + .mdn-anno.after { margin: -48px 0 0 0; } h3 + .mdn-anno.after { margin: -46px 0 0 0; } h4 + .mdn-anno.after { margin: -42px 0 0 0; } h5 + .mdn-anno.after { margin: -40px 0 0 0; } h6 + .mdn-anno.after { margin: -40px 0 0 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-var-click-highlighting */ /* Colors were chosen in Lab using https://nixsensor.com/free-color-converter/ D50 2deg illuminant, L in [0,100], a and b in [-128, 128] 0 = lab(85,0,85) 1 = lab(85,80,30) 2 = lab(85,-40,40) 3 = lab(85,-50,0) 4 = lab(85,5,15) 5 = lab(85,-10,-50) 6 = lab(85,35,-15) For darkmode: 0 = oklab(50% 0% 108%) 1 = oklab(50% -51% 51%) 2 = oklab(50% -64% -20%) 3 = oklab(50% 6% 19%) 4 = oklab(50% -12% -64%) 5 = oklab(50% 44% -19%) 6 = oklab(50% 102% 38%) */ [data-algorithm] var { cursor: pointer; } var[data-var-color] { background-color: var(--var-bg); box-shadow: 0 0 0 2px var(--var-bg); } var[data-var-color] { --var-bg: #F4D200; } var[data-var-color="1"] { --var-bg: #FF87A2; } var[data-var-color="2"] { --var-bg: #96E885; } var[data-var-color="3"] { --var-bg: #3EEED2; } var[data-var-color="4"] { --var-bg: #EACFB6; } var[data-var-color="5"] { --var-bg: #82DDFF; } var[data-var-color="6"] { --var-vg: #FFBCF2; } @media (prefers-color-scheme: dark) { var[data-var-color] { --var-bg: #bc1a00; } var[data-var-color="1"] { --var-bg: #007f00; } var[data-var-color="2"] { --var-bg: #008698; } var[data-var-color="3"] { --var-bg: #7f5b2b; } var[data-var-color="4"] { --var-bg: #004df3; } var[data-var-color="5"] { --var-bg: #a1248a; } var[data-var-color="6"] { --var-vg: #ff0000; } } </style> <style>/* Boilerplate: style-wpt */ :root { --wpt-border: hsl(0, 0%, 60%); --wpt-bg: hsl(0, 0%, 95%); --wpt-text: var(--text); --wptheading-text: hsl(0, 0%, 30%); } @media (prefers-color-scheme: dark) { :root { --wpt-border: hsl(0, 0%, 30%); --wpt-bg: var(--borderedblock-bg); --wpt-text: var(--text); --wptheading-text: hsl(0, 0%, 60%); } } .wpt-tests-block { list-style: none; border-left: .5em solid var(--wpt-border); background: var(--wpt-bg); color: var(--wpt-text); margin: 1em auto; padding: .5em; } .wpt-tests-block summary { color: var(--wptheading-text); font-weight: normal; text-transform: uppercase; } .wpt-tests-block summary::marker{ color: var(--wpt-border); } .wpt-tests-block summary:hover::marker{ color: var(--wpt-text); } /* The only content of a wpt test block in its closed state is the <summary>, which contains the word TESTS, and that is absolutely positioned. In that closed state, wpt test blocks are styled to have a top margin whose height is exactly equal to the height of the absolutely positioned <summary>, and no other background/padding/margin/border. The wpt test block elements will therefore allow the maring of the previous/next block elements to collapse through them; if this combined margin would be larger than its own top margin, it stays as is, and therefore the pre-existing vertical rhythm of the document is undisturbed. If that combined margin would be smaller, it is grown to that size. This means that the wpt test block ensures that there's always enough vertical space to insert the summary, without adding more than is needed. */ .wpt-tests-block:not([open]){ padding: 0; border: none; background: none; font-size: 0.75em; line-height: 1; position: relative; margin: 1em 0 0; } .wpt-tests-block:not([open]) summary { position: absolute; right: 0; bottom: 0; } /* It is possible that both the last child of a block element and the block element itself would be annotated with a <wpt> block each. If the block element has a padding or a border, that's fine, but otherwise the bottom margin of the block and of its last child would collapse and both <wpt> elements would overlap, being both placed there. To avoid that, add 1px of padding to the <wpt> element annotating the last child to prevent the bottom margin of the block and of its last child from collapsing (and as much negative margin, as wel only want to prevent margin collapsing, but are not trying to actually take more space). */ .wpt-tests-block:not([open]):last-child { padding-bottom: 1px; margin-bottom: -1px; } /* Exception to the previous rule: don't do that in non-last list items, because it's not necessary, and would therefore consume more space than strictly needed. Lists must have list items as children, not <wpt> elements, so a <wpt> element cannot be a sibling of a list item, and the collision that the previous rule avoids cannot happen. */ li:not(:last-child) > .wpt-tests-block:not([open]):last-child, dd:not(:last-child) > .wpt-tests-block:not([open]):last-child { padding-bottom: 0; margin-bottom: 0; } .wpt-tests-block:not([open]):not(:hover){ opacity: 0.5; } .wpt-tests-list { list-style: none; display: grid; margin: 0; padding: 0; grid-template-columns: 1fr max-content auto auto; grid-column-gap: .5em; } .wpt-tests-block hr:last-child { display: none; } .wpt-test { display: contents; } .wpt-test > a { text-decoration: underline; border: none; } .wpt-test > .wpt-name { grid-column: 1; } .wpt-test > .wpt-results { grid-column: 2; } .wpt-test > .wpt-live { grid-column: 3; } .wpt-test > .wpt-source { grid-column: 4; } .wpt-test > .wpt-results { display: flex; gap: .1em; } .wpt-test .wpt-result { display: inline-block; height: 1em; width: 1em; border-radius: 50%; position: relative; } </style> <body class="h-entry"> <div class="head"> <p data-fill-with="logo"><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> </p> <h1 class="p-name no-ref" id="title">CSS Scroll Anchoring Module Level 1</h1> <p id="w3c-state"><a href="https://www.w3.org/standards/types/#ED">Editor’s Draft</a>, <time class="dt-updated" datetime="2024-12-03">3 December 2024</time></p> <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://drafts.csswg.org/css-scroll-anchoring/">https://drafts.csswg.org/css-scroll-anchoring/</a> <dt>Latest published version: <dd><a href="https://www.w3.org/TR/css-scroll-anchoring-1/">https://www.w3.org/TR/css-scroll-anchoring-1/</a> <dt>Previous Versions: <dd><a href="https://www.w3.org/TR/2020/WD-css-scroll-anchoring-1-20200211/" rel="prev">https://www.w3.org/TR/2020/WD-css-scroll-anchoring-1-20200211/</a> <dt>Feedback: <dd><a href="https://github.com/w3c/csswg-drafts/labels/css-scroll-anchoring-1">CSSWG Issues Repository</a> <dt class="editor">Editors: <dd class="editor p-author h-card vcard"><span class="p-name fn">Steve Kobes</span> (<span class="p-org org">Google</span>) <dd class="editor p-author h-card vcard" data-editor-id="42199"><a class="p-name fn u-url url" href="http://xanthir.com/contact/">Tab Atkins-Bittner</a> (<span class="p-org org">Google</span>) <dt>Suggest an Edit for this Spec: <dd><a href="https://github.com/w3c/csswg-drafts/blob/main/css-scroll-anchoring-1/Overview.bs">GitHub Editor</a> </dl> </div> </details> <div data-fill-with="warning"></div> <p class="copyright" data-fill-with="copyright"><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><sup>®</sup> <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. </p> <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"><span class="content">Abstract</span></h2> <p>Changes in DOM elements above the visible region of a <a data-link-type="dfn" href="https://drafts.csswg.org/cssom-view-1/#scrolling-box" id="ref-for-scrolling-box">scrolling box</a> can result in the page moving while the user is in the middle of consuming the content.</p> <p>This spec proposes a mechanism to mitigate this jarring user experience by keeping track of the position of an anchor node and adjusting the scroll offset accordingly.</p> <p>This spec also proposes an API for web developers to opt-out of this behavior.</p> <a href="https://www.w3.org/TR/CSS/">CSS</a> is a language for describing the rendering of structured documents (such as HTML and XML) on screen, on paper, etc. <script> const githubPrefix = "https://w3c.github.io/csswg-drafts/"; if(location.href.slice(0, githubPrefix.length) == githubPrefix) { const suffix = location.href.slice(githubPrefix.length); const draftUrl = "https://drafts.csswg.org/" + suffix; window.location.replace(draftUrl); } </script> </div> <h2 class="no-num no-toc no-ref heading settled" id="sotd"><span class="content">Status of this document</span></h2> <div data-fill-with="status"> <p> This is a public copy of the editors’ draft. It is provided for discussion only and may change at any moment. Its publication here does not imply endorsement of its contents by W3C. Don’t cite this document other than as work in progress. </p> <p>Please send feedback by <a href="https://github.com/w3c/csswg-drafts/issues">filing issues in GitHub</a> (preferred), including the spec code “css-scroll-anchoring” in the title, like this: “[css-scroll-anchoring] <i>…summary of comment…</i>”. All issues and comments are <a href="https://lists.w3.org/Archives/Public/public-css-archive/">archived</a>. Alternately, feedback can be sent to the (<a href="https://lists.w3.org/Archives/Public/www-style/">archived</a>) public mailing list <a href="mailto:www-style@w3.org?Subject=%5Bcss-scroll-anchoring%5D%20PUT%20SUBJECT%20HERE">www-style@w3.org</a>. </p> <p>This document is governed by the <a href="https://www.w3.org/policies/process/20231103/" id="w3c_process_revision">03 November 2023 W3C Process Document</a>. </p> </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"><span class="secno">1</span> <span class="content"> Introduction</span></a> <ol class="toc"> <li><a href="#values"><span class="secno">1.1</span> <span class="content"> Value Definitions</span></a> </ol> <li> <a href="#description"><span class="secno">2</span> <span class="content"> Description</span></a> <ol class="toc"> <li><a href="#anchor-node-selection"><span class="secno">2.1</span> <span class="content"> Anchor Node Selection</span></a> <li> <a href="#scroll-adjustment"><span class="secno">2.2</span> <span class="content"> Scroll Adjustment</span></a> <ol class="toc"> <li><a href="#suppression-windows"><span class="secno">2.2.1</span> <span class="content"> Suppression Window</span></a> <li><a href="#suppression-triggers"><span class="secno">2.2.2</span> <span class="content"> Suppression Triggers</span></a> </ol> </ol> <li><a href="#exclusion-api"><span class="secno">3</span> <span class="content"> Exclusion API</span></a> <li><a href="#priv-sec"><span class="secno">4</span> <span class="content"> Privacy and Security Considerations</span></a> <li> <a href="#changes"><span class="secno"></span> <span class="content"> Changes</span></a> <ol class="toc"> <li><a href="#changes-20200211"><span class="secno"></span> <span class="content"> Changes Since the Feb 11 2020 Working Draft</span></a> </ol> <li> <a href="#w3c-conformance"><span class="secno"></span> <span class="content"> Conformance</span></a> <ol class="toc"> <li><a href="#w3c-conventions"><span class="secno"></span> <span class="content"> Document conventions</span></a> <li><a href="#w3c-conformance-classes"><span class="secno"></span> <span class="content"> Conformance classes</span></a> <li> <a href="#w3c-partial"><span class="secno"></span> <span class="content"> Partial implementations</span></a> <ol class="toc"> <li><a href="#w3c-conform-future-proofing"><span class="secno"></span> <span class="content"> Implementations of Unstable and Proprietary Features</span></a> </ol> <li><a href="#w3c-testing"><span class="secno"></span> <span class="content"> Non-experimental implementations</span></a> </ol> <li> <a href="#index"><span class="secno"></span> <span class="content">Index</span></a> <ol class="toc"> <li><a href="#index-defined-here"><span class="secno"></span> <span class="content">Terms defined by this specification</span></a> <li><a href="#index-defined-elsewhere"><span class="secno"></span> <span class="content">Terms defined by reference</span></a> </ol> <li> <a href="#references"><span class="secno"></span> <span class="content">References</span></a> <ol class="toc"> <li><a href="#normative"><span class="secno"></span> <span class="content">Normative References</span></a> </ol> <li><a href="#property-index"><span class="secno"></span> <span class="content">Property Index</span></a> </ol> </nav> <main> <h2 class="heading settled" data-level="1" id="intro"><span class="secno">1. </span><span class="content"> Introduction</span><a class="self-link" href="#intro"></a></h2> <p>Today, users of the web are often distracted by content moving around due to changes that occur outside the viewport. Examples include script inserting an iframe containing an ad, or non-sized images loading on a slow network.</p> <p>Historically the browser’s default behavior has been to preserve the absolute scroll position when such changes occur. This means that to avoid shifting content, the webpage can attempt to reserve space on the page for anything that will load later. In practice, few websites do this consistently.</p> <p>Scroll anchoring aims to minimize surprising content shifts. It does this by adjusting the scroll position to compensate for the changes outside the viewport.</p> <p>The <a href="https://github.com/WICG/ScrollAnchoring/blob/master/explainer.md">explainer document</a> gives an informal overview of scroll anchoring.</p> <h3 class="heading settled" data-level="1.1" id="values"><span class="secno">1.1. </span><span class="content"> Value Definitions</span><a class="self-link" href="#values"></a></h3> <p>This specification follows the <a href="https://www.w3.org/TR/CSS2/about.html#property-defs">CSS property definition conventions</a> from <a data-link-type="biblio" href="#biblio-css2" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS2]</a> using the <a href="https://www.w3.org/TR/css-values-3/#value-defs">value definition syntax</a> from <a data-link-type="biblio" href="#biblio-css-values-3" title="CSS Values and Units Module Level 3">[CSS-VALUES-3]</a>. Value types not defined in this specification are defined in CSS Values & Units <span title="CSS Values and Units Module Level 3">[CSS-VALUES-3]</span>. Combination with other CSS modules may expand the definitions of these value types.</p> <p>In addition to the property-specific values listed in their definitions, all properties defined in this specification also accept the <a data-link-type="dfn" href="https://drafts.csswg.org/css-values-4/#css-wide-keywords" id="ref-for-css-wide-keywords">CSS-wide keywords</a> as their property value. For readability they have not been repeated explicitly.</p> <h2 class="heading settled" data-level="2" id="description"><span class="secno">2. </span><span class="content"> Description</span><a class="self-link" href="#description"></a></h2> <p>Scroll anchoring attempts to keep the user’s view of the document stable across layout changes. It works by selecting a DOM node (the <dfn class="dfn-paneled" data-dfn-for="scroll-anchoring" data-dfn-type="dfn" data-export id="scroll-anchoring-anchor-node">anchor node</dfn>) whose movement is used to determine adjustments to the scroll position.</p> <p>However, if the scroll container is currently <a data-link-type="dfn" href="https://drafts.csswg.org/css-scroll-snap-1/#scroll-snap" id="ref-for-scroll-snap">snapped</a> to an element, (see <a data-link-type="biblio" href="#biblio-css-scroll-snap-1" title="CSS Scroll Snap Module Level 1">[CSS-SCROLL-SNAP-1]</a>) scroll anchoring is limited to adjustments that would be allowed by <a data-link-type="dfn" href="https://drafts.csswg.org/css-scroll-snap-1/#re-snap" id="ref-for-re-snap">re-snapping</a>.</p> <h3 class="heading settled" data-level="2.1" id="anchor-node-selection"><span class="secno">2.1. </span><span class="content"> Anchor Node Selection</span><a class="self-link" href="#anchor-node-selection"></a></h3> <p>Each <a data-link-type="dfn" href="https://drafts.csswg.org/cssom-view-1/#scrolling-box" id="ref-for-scrolling-box①">scrolling box</a> aims to select an <a data-link-type="dfn" href="#scroll-anchoring-anchor-node" id="ref-for-scroll-anchoring-anchor-node">anchor node</a> that is deep in the DOM and either should be prioritized as an important DOM node or is close to the block start edge of its <a data-link-type="dfn" href="https://drafts.csswg.org/css-scroll-snap-1/#optimal-viewing-region" id="ref-for-optimal-viewing-region">optimal viewing region</a>.</p> <p class="note" role="note"><span class="marker">Note:</span> If the user agent does not support the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-scroll-snap-1/#propdef-scroll-padding" id="ref-for-propdef-scroll-padding">scroll-padding</a> property, the optimal viewing region of the scrolling box is equivalent to its <a data-link-type="dfn" href="https://drafts.csswg.org/css-box-4/#content-area" id="ref-for-content-area">content area</a>.</p> <p>An anchor node can be any <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#box" id="ref-for-box">box</a> except one for a non-<a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#atomic-inline" id="ref-for-atomic-inline">atomic inline</a>. The anchor node is always a <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-tree-descendant" id="ref-for-concept-tree-descendant">descendant</a> of the <a data-link-type="dfn" href="https://drafts.csswg.org/cssom-view-1/#scrolling-box" id="ref-for-scrolling-box②">scrolling box</a>. In some cases, a scrolling box may not select any anchor node.</p> <p>An element <var>C</var> is a <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="anchor-viable-candidate">viable candidate</dfn> for becoming a scroll anchor for a scrolling box <var>S</var> if it meets all of the following criteria:</p> <ul> <li data-md> <p><var>C</var> is an element that is not a non-<a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#atomic-inline" id="ref-for-atomic-inline①">atomic inline</a>.</p> <li data-md> <p><var>C</var> is <a data-link-type="dfn" href="#partially-visible" id="ref-for-partially-visible">partially visible</a> or <a data-link-type="dfn" href="#fully-visible" id="ref-for-fully-visible">fully visible</a> in <var>S</var></p> <li data-md> <p><var>C</var> is a descendant of <var>S</var></p> <li data-md> <p><var>C</var> is not in an <a data-link-type="dfn" href="#excluded-subtree" id="ref-for-excluded-subtree">excluded subtree</a></p> <li data-md> <p>None of the ancestors of <var>C</var> up to <var>S</var> are in an <a data-link-type="dfn" href="#excluded-subtree" id="ref-for-excluded-subtree①">excluded subtree</a></p> </ul> <p>Some elements are considered to be <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-local-lt="priority candidate" data-lt="anchor priority candidate" id="anchor-priority-candidates">anchor priority candidates</dfn> for anchor selection:</p> <ol> <li data-md> <p>The <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/interaction.html#dom-anchor" id="ref-for-dom-anchor">DOM anchor</a> of the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/interaction.html#focused-area-of-the-document" id="ref-for-focused-area-of-the-document">focused area of the document</a>, if such an anchor is text editable (<a data-link-type="dfn" href="https://w3c.github.io/editing/docs/execCommand/index.html#editable" id="ref-for-editable">editable</a>, <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/interaction.html#editing-host" id="ref-for-editing-host">editing host</a>, <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#concept-fe-mutable" id="ref-for-concept-fe-mutable">mutable</a> <code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/form-elements.html#the-textarea-element" id="ref-for-the-textarea-element">textarea</a></code>, or <span id="ref-for-concept-fe-mutable①">mutable</span> <code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/input.html#the-input-element" id="ref-for-the-input-element">input</a></code> with a type that allows text entry).</p> <li data-md> <p>An element containing the current <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/interaction.html#fip-active-match" id="ref-for-fip-active-match">active match</a> of the find-in-page user-agent algorithm. If the match spans multiple elements, then consider only the first such element.</p> </ol> <p>Note that if the <a data-link-type="dfn" href="#anchor-priority-candidates" id="ref-for-anchor-priority-candidates">priority candidate</a> is a non-<a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#atomic-inline" id="ref-for-atomic-inline②">atomic inline</a> element, then instead consider its nearest ancestor element that is not a non-atomic inline element as the priority candidate.</p> <div class="algorithm" data-algorithm="anchor node selection algorithm"> The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="anchoring-algorithm">anchor node selection algorithm</dfn> for a scrolling box <var>S</var> is as follows: <ol> <li data-md> <p>If <var>S</var> is associated with an element whose computed value of the <a class="property css" data-link-type="property" href="#propdef-overflow-anchor" id="ref-for-propdef-overflow-anchor">overflow-anchor</a> property is <a class="css" data-link-type="maybe" href="#valdef-overflow-anchor-none" id="ref-for-valdef-overflow-anchor-none">none</a>, then do not select an anchor node for <var>S</var>.</p> <li data-md> <p>Otherwise, for each <a data-link-type="dfn" href="#anchor-priority-candidates" id="ref-for-anchor-priority-candidates①">priority candidate</a> <var>PC</var> in order specified, check if <var>PC</var> is a <a data-link-type="dfn" href="#anchor-viable-candidate" id="ref-for-anchor-viable-candidate">viable candidate</a> in <var>S</var>. If so, select it as an anchor node and terminate.</p> <li data-md> <p>Otherwise, for each DOM child <var>N</var> of the element or document associated with <var>S</var>, perform the <a data-link-type="dfn" href="#candidate-examination" id="ref-for-candidate-examination">candidate examination algorithm</a> for <var>N</var> in <var>S</var>, and terminate if it selects an anchor node.</p> </ol> </div> <div class="algorithm" data-algorithm="candidate examination algorithm"> The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="candidate-examination">candidate examination algorithm</dfn> for a candidate DOM node <var>N</var> in a scrolling box <var>S</var> is as follows: <ol> <li data-md> <p>If <var>N</var> is an <a data-link-type="dfn" href="#excluded-subtree" id="ref-for-excluded-subtree②">excluded subtree</a>, or if <var>N</var> is <a data-link-type="dfn" href="#fully-clipped" id="ref-for-fully-clipped">fully clipped</a> in <var>S</var>, then do nothing (<var>N</var> and its descendants are skipped).</p> <li data-md> <p>If <var>N</var> is <a data-link-type="dfn" href="#fully-visible" id="ref-for-fully-visible①">fully visible</a> in <var>S</var>, select <var>N</var> as the anchor node.</p> <li data-md> <p>If N is <a data-link-type="dfn" href="#partially-visible" id="ref-for-partially-visible①">partially visible</a>:</p> <ol> <li data-md> <p>For each DOM child <var>C</var> of <var>N</var>, perform the <a data-link-type="dfn" href="#candidate-examination" id="ref-for-candidate-examination①">candidate examination algorithm</a> for <var>C</var> in <var>S</var>, and terminate if it selects an anchor node.</p> <li data-md> <p>For each absolutely-positioned element <var>A</var> whose <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#containing-block" id="ref-for-containing-block">containing block</a> is <var>N</var>, but whose DOM parent is not <var>N</var>, perform the <a data-link-type="dfn" href="#candidate-examination" id="ref-for-candidate-examination②">candidate examination algorithm</a> for <var>A</var> in <var>S</var>, and terminate if it selects an anchor node.</p> <li data-md> <p>Select <var>N</var> as the anchor node. (If this step is reached, no suitable anchor node was found among <var>N</var>’s descendants.)</p> </ol> <p class="note" role="note"><span class="marker">Note:</span> Deeper nodes are preferred to minimize the possibility of content changing inside the anchor node but outside the viewport, which would cause visible content to shift without triggering any scroll anchoring adjustment.</p> </ol> </div> <p>Conceptually, a new anchor node is computed for every scrolling box whenever the scroll position of any scrolling box changes. (As a performance optimization, the implementation may wait until the anchor node is needed before computing it.)</p> <div class="algorithm" data-algorithm="excluded subtree"> A DOM node <var>N</var> is an <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="excluded-subtree">excluded subtree</dfn> if it is an element and any of the following conditions holds: <ul> <li data-md> <p><var>N</var>’s computed value of the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-display-4/#propdef-display" id="ref-for-propdef-display">display</a> property is <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-display-4/#valdef-display-none" id="ref-for-valdef-display-none">none</a>.</p> <li data-md> <p><var>N</var>’s computed value of the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-position-3/#propdef-position" id="ref-for-propdef-position">position</a> property is <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-position-3/#valdef-position-fixed" id="ref-for-valdef-position-fixed">fixed</a>.</p> <li data-md> <p><var>N</var>’s computed value of the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-position-3/#propdef-position" id="ref-for-propdef-position①">position</a> property is <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-position-3/#valdef-position-absolute" id="ref-for-valdef-position-absolute">absolute</a> and <var>N</var>’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#containing-block" id="ref-for-containing-block①">containing block</a> is an ancestor of the scrolling box.</p> <li data-md> <p><var>N</var>’s computed value of the <a class="property css" data-link-type="property" href="#propdef-overflow-anchor" id="ref-for-propdef-overflow-anchor①">overflow-anchor</a> property is <a class="css" data-link-type="maybe" href="#valdef-overflow-anchor-none" id="ref-for-valdef-overflow-anchor-none①">none</a>.</p> </ul> </div> <div class="algorithm" data-algorithm="fully visible"> A DOM node <var>N</var> is <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="fully-visible">fully visible</dfn> in a scrolling box <var>S</var> if <var>N</var>’s <a data-link-type="dfn" href="#scroll-anchoring-bounding-rect" id="ref-for-scroll-anchoring-bounding-rect">scroll anchoring bounding rect</a> is entirely within the <a data-link-type="dfn" href="https://drafts.csswg.org/css-scroll-snap-1/#optimal-viewing-region" id="ref-for-optimal-viewing-region①">optimal viewing region</a> of <var>S</var>. </div> <div class="algorithm" data-algorithm="fully clipped"> A DOM node <var>N</var> is <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="fully-clipped">fully clipped</dfn> in a scrolling box <var>S</var> if <var>N</var>’s <a data-link-type="dfn" href="#scroll-anchoring-bounding-rect" id="ref-for-scroll-anchoring-bounding-rect①">scroll anchoring bounding rect</a> is entirely outside the <a data-link-type="dfn" href="https://drafts.csswg.org/css-scroll-snap-1/#optimal-viewing-region" id="ref-for-optimal-viewing-region②">optimal viewing region</a> of <var>S</var>. </div> <div class="algorithm" data-algorithm="partially visible"> A DOM node <var>N</var> is <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="partially-visible">partially visible</dfn> in a scrolling box <var>S</var> if <var>N</var> is neither <a data-link-type="dfn" href="#fully-visible" id="ref-for-fully-visible②">fully visible</a> in <var>S</var> nor <a data-link-type="dfn" href="#fully-clipped" id="ref-for-fully-clipped①">fully clipped</a> in <var>S</var>. </div> <div class="algorithm" data-algorithm="scroll anchoring bounding rect"> The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="scroll-anchoring-bounding-rect">scroll anchoring bounding rect</dfn> of a DOM node <var>N</var> is <var>N</var>’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-overflow-3/#scrollable-overflow-rectangle" id="ref-for-scrollable-overflow-rectangle">scrollable overflow rectangle</a>. </div> <h3 class="heading settled" data-level="2.2" id="scroll-adjustment"><span class="secno">2.2. </span><span class="content"> Scroll Adjustment</span><a class="self-link" href="#scroll-adjustment"></a></h3> <p>If an anchor node was selected, then when the anchor node moves, the browser computes the previous offset <code>y0</code>, and the current offset <code>y1</code>, of the block start edge of the anchor node’s <a data-link-type="dfn" href="#scroll-anchoring-bounding-rect" id="ref-for-scroll-anchoring-bounding-rect②">scroll anchoring bounding rect</a>, relative to the block start edge of the scrolling content in the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow-direction" id="ref-for-block-flow-direction">block flow direction</a> of the scroller.</p> <p>It then queues an adjustment to the scroll position of <code>y1 - y0</code>, in the block flow direction, to be performed at the end of the <a data-link-type="dfn" href="#suppression-window" id="ref-for-suppression-window">suppression window</a>.</p> <p>The scroll adjustment is a type of [[cssom-view-1#scrolling-events#scrolling]] as defined by <a data-link-type="biblio" href="#biblio-cssom-view" title="CSSOM View Module">[CSSOM-VIEW]</a>, and generates <a class="idl-code" data-link-type="event" href="https://drafts.csswg.org/cssom-view-1/#eventdef-document-scroll" id="ref-for-eventdef-document-scroll">scroll events</a> in the manner described there.</p> <h4 class="heading settled" data-level="2.2.1" id="suppression-windows"><span class="secno">2.2.1. </span><span class="content"> Suppression Window</span><a class="self-link" href="#suppression-windows"></a></h4> <p>Every movement of an anchor node occurs within a window of time called the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="suppression-window">suppression window</dfn>, defined as follows:</p> <ul> <li data-md> <p>The suppression window begins at the start of the current iteration of the <a href="https://html.spec.whatwg.org/multipage/webappapis.html#processing-model-8">HTML Processing Model</a> event loop, or at the end of the most recently completed suppression window, whichever is more recent.</p> <li data-md> <p>The suppression window ends at the end of the current iteration of the <a href="https://html.spec.whatwg.org/multipage/webappapis.html#processing-model-8">HTML Processing Model</a> event loop, or immediately before the next operation whose result or side effects would differ as a result of a change in the scroll position (for example, an invocation of <code class="idl"><a data-link-type="idl" href="https://drafts.csswg.org/cssom-view-1/#dom-element-getboundingclientrect" id="ref-for-dom-element-getboundingclientrect">getBoundingClientRect()</a></code>), whichever comes sooner.</p> </ul> <p class="note" role="note"><span class="marker">Note:</span> The suppression window boundaries should be incorporated into the HTML standard once the scroll anchoring API is stabilized.</p> <p>More than one anchor node movement may occur within the same suppression window.</p> <p>At the end of a suppression window, the user agent performs all scroll adjustments that were queued during the window and not suppressed by any <a data-link-type="dfn" href="#suppression-trigger" id="ref-for-suppression-trigger">suppression trigger</a> during the window.</p> <h4 class="heading settled" data-level="2.2.2" id="suppression-triggers"><span class="secno">2.2.2. </span><span class="content"> Suppression Triggers</span><a class="self-link" href="#suppression-triggers"></a></h4> <p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="suppression-trigger">suppression trigger</dfn> is an operation that suppresses the scroll anchoring adjustment for an anchor node movement, if it occurs within the suppression window for that movement. These triggers are:</p> <ul> <li data-md> <p>Any change to the computed value of any of the following properties, on any element in the path from the anchor node to the scrollable element (or document), inclusive of both:</p> <ul> <li data-md> <p><a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-position-3/#propdef-top" id="ref-for-propdef-top">top</a>, <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-position-3/#propdef-left" id="ref-for-propdef-left">left</a>, <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-position-3/#propdef-right" id="ref-for-propdef-right">right</a>, or <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-position-3/#propdef-bottom" id="ref-for-propdef-bottom">bottom</a></p> <li data-md> <p><a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-box-4/#propdef-margin" id="ref-for-propdef-margin">margin</a> or its longhands</p> <li data-md> <p><a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-box-4/#propdef-padding" id="ref-for-propdef-padding">padding</a> or its longhands</p> <li data-md> <p><a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-sizing-3/#propdef-width" id="ref-for-propdef-width">width</a>, <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-sizing-3/#propdef-height" id="ref-for-propdef-height">height</a>, <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-sizing-3/#propdef-min-width" id="ref-for-propdef-min-width">min-width</a>, <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-sizing-3/#propdef-max-width" id="ref-for-propdef-max-width">max-width</a>, <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-sizing-3/#propdef-min-height" id="ref-for-propdef-min-height">min-height</a>, or <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-sizing-3/#propdef-max-height" id="ref-for-propdef-max-height">max-height</a></p> <li data-md> <p><a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-position-3/#propdef-position" id="ref-for-propdef-position②">position</a></p> <li data-md> <p><a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-transforms-1/#propdef-transform" id="ref-for-propdef-transform">transform</a></p> </ul> <li data-md> <p>Any change to the computed value of the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-position-3/#propdef-position" id="ref-for-propdef-position③">position</a> property on any element within the scrollable element (or document), such that the element becomes or stops being absolutely positioned. Note that this trigger applies regardless of whether the modified element is on the path from the anchor node to the scrollable element.</p> <li data-md> <p>The scroll offset of the scrollable element being zero.</p> </ul> <p class="note" role="note"><span class="marker">Note:</span> Suppression triggers exist for compatibility with existing web content that has negative interactions with scroll anchoring due to shifting content in scroll event handlers.</p> <h2 class="heading settled" data-level="3" id="exclusion-api"><span class="secno">3. </span><span class="content"> Exclusion API</span><a class="self-link" href="#exclusion-api"></a></h2> <p>Scroll anchoring aims to be the default mode of behavior when launched, so that users benefit from it even on legacy content. <a class="property css" data-link-type="property" href="#propdef-overflow-anchor" id="ref-for-propdef-overflow-anchor②">overflow-anchor</a> can disable scroll anchoring in part or all of a webpage (opt out), or exclude portions of the DOM from the anchor node selection algorithm.</p> <table class="def propdef" data-link-for-hint="overflow-anchor"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-overflow-anchor">overflow-anchor</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod">auto <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one">|</a> none <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><a href="https://www.w3.org/TR/css-pseudo/#generated-content" title="Includes ::before and ::after pseudo-elements.">all 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>specified keyword <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 </table> <p>Values are defined as follows:</p> <dl> <dt data-md><dfn class="dfn-paneled css" data-dfn-for="overflow-anchor" data-dfn-type="value" data-export id="valdef-overflow-anchor-auto">auto</dfn> <dd data-md> <p>Declares that the element is potentially eligible to participate in the <a data-link-type="dfn" href="#anchoring-algorithm" id="ref-for-anchoring-algorithm">anchor node selection algorithm</a> for any scrolling box created by the element or an ancestor.</p> <dt data-md><dfn class="dfn-paneled css" data-dfn-for="overflow-anchor" data-dfn-type="value" data-export id="valdef-overflow-anchor-none">none</dfn> <dd data-md> <p>Declares that the element and its descendants (that aren’t nested inside of another scrolling element) are <em>not</em> eligible to participate in the <a data-link-type="dfn" href="#anchoring-algorithm" id="ref-for-anchoring-algorithm①">anchor node selection algorithm</a> for any scrolling box created by the element or an ancestor.</p> </dl> <p class="note" role="note"><span class="marker">Note:</span> It is not possible to turn scroll anchoring "back on" for descendants of a <a class="css" data-link-type="propdesc" href="#propdef-overflow-anchor" id="ref-for-propdef-overflow-anchor③">overflow-anchor: none</a> element. However, descendant <a data-link-type="dfn" href="https://drafts.csswg.org/css-overflow-3/#scroll-container" id="ref-for-scroll-container">scroll containers</a> automatically "turn it back on" (for their own scrolling box) unless they explicitly have <span class="css" id="ref-for-propdef-overflow-anchor④">overflow-anchor: none</span> set on them as well.</p> <p class="note" role="note"><span class="marker">Note:</span> The <code>overflow-anchor</code> property was also proposed (with different values) for <a href="http://tabatkins.github.io/specs/css-sticky-scrollbars/">CSS Sticky Scrollbars</a>, which has now been <a href="https://tabatkins.github.io/specs/css-sticky-scrollbars/#intro">superseded</a>.</p> <h2 class="heading settled" data-level="4" id="priv-sec"><span class="secno">4. </span><span class="content"> Privacy and Security Considerations</span><a class="self-link" href="#priv-sec"></a></h2> <p>This specification, as it only adjusts how we compute scroll positions, introduces no new privacy or security considerations.</p> <h2 class="no-num heading settled" id="changes"><span class="content"> Changes</span><a class="self-link" href="#changes"></a></h2> <h3 class="heading settled" id="changes-20200211"><span class="content"> Changes Since the Feb 11 2020 Working Draft</span><a class="self-link" href="#changes-20200211"></a></h3> <ul> <li data-md> <p>Added definitions of <a data-link-type="dfn" href="#anchor-viable-candidate" id="ref-for-anchor-viable-candidate①">viable candidate</a> and <a data-link-type="dfn" href="#anchor-priority-candidates" id="ref-for-anchor-priority-candidates②">priority candidate</a>.</p> <li data-md> <p>Clarified interaction between scroll anchoring and <a data-link-type="dfn" href="https://drafts.csswg.org/css-scroll-snap-1/#scroll-snap" id="ref-for-scroll-snap①">scroll snapping</a>.</p> </ul> </main> <h2 class="no-ref no-num heading settled" id="w3c-conformance"><span class="content"> Conformance</span><a class="self-link" href="#w3c-conformance"></a></h2> <h3 class="no-ref heading settled" id="w3c-conventions"><span class="content"> Document conventions</span><a class="self-link" href="#w3c-conventions"></a></h3> <p>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. </p> <p>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></p> <p>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: </p> <div class="example" id="w3c-example"> <a class="self-link" href="#w3c-example"></a> <p>This is an example of an informative example.</p> </div> <p>Informative notes begin with the word “Note” and are set apart from the normative text with <code>class="note"</code>, like this: </p> <p class="note" role="note">Note, this is an informative note.</p> <p>Advisements are normative sections styled to evoke special attention and are set apart from other normative text with <code><strong class="advisement"></code>, like this: <strong class="advisement"> UAs MUST provide an accessible alternative. </strong></p> <details class="wpt-tests-block" dir="ltr" lang="en" open> <summary>Tests</summary> <p>Tests relating to the content of this specification may be documented in “Tests” blocks like this one. Any such block is non-normative.</p> <ul class="wpt-tests-list"></ul> <hr> </details> <h3 class="no-ref heading settled" id="w3c-conformance-classes"><span class="content"> Conformance classes</span><a class="self-link" href="#w3c-conformance-classes"></a></h3> <p>Conformance to this specification is defined for three conformance classes: </p> <dl> <dt>style sheet <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS style sheet</a>. <dt>renderer <dd>A <a href="http://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="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> that writes a style sheet. </dl> <p>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. </p> <p>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.) </p> <p>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. </p> <h3 class="no-ref heading settled" id="w3c-partial"><span class="content"> Partial implementations</span><a class="self-link" href="#w3c-partial"></a></h3> <p>So that authors can exploit the forward-compatible parsing rules to assign fallback values, CSS renderers <strong>must</strong> treat as invalid (and <a href="http://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 <strong>must not</strong> 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.</p> <h4 class="heading settled" id="w3c-conform-future-proofing"><span class="content"> Implementations of Unstable and Proprietary Features</span><a class="self-link" href="#w3c-conform-future-proofing"></a></h4> <p>To avoid clashes with future stable CSS features, the CSSWG recommends <a href="http://www.w3.org/TR/CSS/#future-proofing">following best practices</a> for the implementation of <a href="http://www.w3.org/TR/CSS/#unstable">unstable</a> features and <a href="http://www.w3.org/TR/CSS/#proprietary-extension">proprietary extensions</a> to CSS. </p> <h3 class="no-ref heading settled" id="w3c-testing"><span class="content"> Non-experimental implementations</span><a class="self-link" href="#w3c-testing"></a></h3> <p>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. </p> <p>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. </p> <p>Further information on submitting testcases and implementation reports can be found from on the CSS Working Group’s website at <a href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>. Questions should be directed to the <a href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a> mailing list.</p> <script src="https://www.w3.org/scripts/TR/2021/fixup.js"></script> <h2 class="no-num no-ref heading settled" id="index"><span class="content">Index</span><a class="self-link" href="#index"></a></h2> <h3 class="no-num no-ref heading settled" id="index-defined-here"><span class="content">Terms defined by this specification</span><a class="self-link" href="#index-defined-here"></a></h3> <ul class="index"> <li><a href="#scroll-anchoring-anchor-node">anchor node</a><span>, in § 2</span> <li><a href="#anchoring-algorithm">anchor node selection algorithm</a><span>, in § 2.1</span> <li><a href="#anchor-priority-candidates">anchor priority candidate</a><span>, in § 2.1</span> <li><a href="#valdef-overflow-anchor-auto">auto</a><span>, in § 3</span> <li><a href="#candidate-examination">candidate examination algorithm</a><span>, in § 2.1</span> <li><a href="#excluded-subtree">excluded subtree</a><span>, in § 2.1</span> <li><a href="#fully-clipped">fully clipped</a><span>, in § 2.1</span> <li><a href="#fully-visible">fully visible</a><span>, in § 2.1</span> <li><a href="#valdef-overflow-anchor-none">none</a><span>, in § 3</span> <li><a href="#propdef-overflow-anchor">overflow-anchor</a><span>, in § 3</span> <li><a href="#partially-visible">partially visible</a><span>, in § 2.1</span> <li><a href="#anchor-priority-candidates">priority candidate</a><span>, in § 2.1</span> <li><a href="#scroll-anchoring-bounding-rect">scroll anchoring bounding rect</a><span>, in § 2.1</span> <li><a href="#suppression-trigger">suppression trigger</a><span>, in § 2.2.2</span> <li><a href="#suppression-window">suppression window</a><span>, in § 2.2.1</span> <li><a href="#anchor-viable-candidate">viable candidate</a><span>, in § 2.1</span> </ul> <h3 class="no-num no-ref heading settled" id="index-defined-elsewhere"><span class="content">Terms defined by reference</span><a class="self-link" href="#index-defined-elsewhere"></a></h3> <ul class="index"> <li> <a data-link-type="biblio">[CSS-BOX-4]</a> defines the following terms: <ul> <li><span class="dfn-paneled" id="40873652">content area</span> <li><span class="dfn-paneled" id="cecbe9cd">margin</span> <li><span class="dfn-paneled" id="b5418f3e">padding</span> </ul> <li> <a data-link-type="biblio">[CSS-DISPLAY-4]</a> defines the following terms: <ul> <li><span class="dfn-paneled" id="a18c5781">atomic inline</span> <li><span class="dfn-paneled" id="881c2f72">box</span> <li><span class="dfn-paneled" id="ea663a43">containing block</span> <li><span class="dfn-paneled" id="e7f0dd6c">display</span> <li><span class="dfn-paneled" id="55e8f5de">none</span> </ul> <li> <a data-link-type="biblio">[CSS-OVERFLOW-3]</a> defines the following terms: <ul> <li><span class="dfn-paneled" id="86923d07">scroll container</span> <li><span class="dfn-paneled" id="23177077">scrollable overflow rectangle</span> </ul> <li> <a data-link-type="biblio">[CSS-POSITION-3]</a> defines the following terms: <ul> <li><span class="dfn-paneled" id="3d3e300e">absolute</span> <li><span class="dfn-paneled" id="a58a3cd8">bottom</span> <li><span class="dfn-paneled" id="b7221005">fixed</span> <li><span class="dfn-paneled" id="dde41168">left</span> <li><span class="dfn-paneled" id="b8a0ba74">position</span> <li><span class="dfn-paneled" id="b0b8d8c0">right</span> <li><span class="dfn-paneled" id="e1483d91">top</span> </ul> <li> <a data-link-type="biblio">[CSS-SCROLL-SNAP-1]</a> defines the following terms: <ul> <li><span class="dfn-paneled" id="6c4f0e7b">optimal viewing region</span> <li><span class="dfn-paneled" id="3d1558b7">re-snap</span> <li><span class="dfn-paneled" id="721a6c78">scroll snap</span> <li><span class="dfn-paneled" id="aa9d496e">scroll-padding</span> </ul> <li> <a data-link-type="biblio">[CSS-SIZING-3]</a> defines the following terms: <ul> <li><span class="dfn-paneled" id="68019d7a">height</span> <li><span class="dfn-paneled" id="9e39189b">max-height</span> <li><span class="dfn-paneled" id="f08b32ef">max-width</span> <li><span class="dfn-paneled" id="4c9599fa">min-height</span> <li><span class="dfn-paneled" id="88def535">min-width</span> <li><span class="dfn-paneled" id="88643fe0">width</span> </ul> <li> <a data-link-type="biblio">[CSS-TRANSFORMS-1]</a> defines the following terms: <ul> <li><span class="dfn-paneled" id="e2e08d07">transform</span> </ul> <li> <a data-link-type="biblio">[CSS-VALUES-4]</a> defines the following terms: <ul> <li><span class="dfn-paneled" id="358fd6ff">CSS-wide keywords</span> <li><span class="dfn-paneled" id="6ec67710">|</span> </ul> <li> <a data-link-type="biblio">[CSS-WRITING-MODES-4]</a> defines the following terms: <ul> <li><span class="dfn-paneled" id="88dd7551">block flow direction</span> </ul> <li> <a data-link-type="biblio">[CSSOM-VIEW]</a> defines the following terms: <ul> <li><span class="dfn-paneled" id="d38f9598">getBoundingClientRect()</span> <li><span class="dfn-paneled" id="5b482fa1">scroll</span> <li><span class="dfn-paneled" id="4186822a">scrolling box</span> </ul> <li> <a data-link-type="biblio">[DOM]</a> defines the following terms: <ul> <li><span class="dfn-paneled" id="da8b8e0e">descendant</span> </ul> <li> <a data-link-type="biblio">[HTML]</a> defines the following terms: <ul> <li><span class="dfn-paneled" id="9f4cc044">active match</span> <li><span class="dfn-paneled" id="06834943">DOM anchor</span> <li><span class="dfn-paneled" id="04ca8d46">editable</span> <li><span class="dfn-paneled" id="050af578">editing host</span> <li><span class="dfn-paneled" id="86573168">focused area of the document</span> <li><span class="dfn-paneled" id="d7d642a2">input</span> <li><span class="dfn-paneled" id="e926b664">mutable</span> <li><span class="dfn-paneled" id="fc736137">textarea</span> </ul> </ul> <h2 class="no-num no-ref heading settled" id="references"><span class="content">References</span><a class="self-link" href="#references"></a></h2> <h3 class="no-num no-ref heading settled" id="normative"><span class="content">Normative References</span><a class="self-link" href="#normative"></a></h3> <dl> <dt id="biblio-css-box-4">[CSS-BOX-4] <dd>Elika Etemad. <a href="https://drafts.csswg.org/css-box-4/"><cite>CSS Box Model Module Level 4</cite></a>. URL: <a href="https://drafts.csswg.org/css-box-4/">https://drafts.csswg.org/css-box-4/</a> <dt id="biblio-css-display-4">[CSS-DISPLAY-4] <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://drafts.csswg.org/css-display/"><cite>CSS Display Module Level 4</cite></a>. URL: <a href="https://drafts.csswg.org/css-display/">https://drafts.csswg.org/css-display/</a> <dt id="biblio-css-overflow-3">[CSS-OVERFLOW-3] <dd>Elika Etemad; Florian Rivoal. <a href="https://drafts.csswg.org/css-overflow-3/"><cite>CSS Overflow Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-overflow-3/">https://drafts.csswg.org/css-overflow-3/</a> <dt id="biblio-css-position-3">[CSS-POSITION-3] <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://drafts.csswg.org/css-position-3/"><cite>CSS Positioned Layout Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-position-3/">https://drafts.csswg.org/css-position-3/</a> <dt id="biblio-css-scroll-snap-1">[CSS-SCROLL-SNAP-1] <dd>Matt Rakow; et al. <a href="https://drafts.csswg.org/css-scroll-snap-1/"><cite>CSS Scroll Snap Module Level 1</cite></a>. URL: <a href="https://drafts.csswg.org/css-scroll-snap-1/">https://drafts.csswg.org/css-scroll-snap-1/</a> <dt id="biblio-css-sizing-3">[CSS-SIZING-3] <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://drafts.csswg.org/css-sizing-3/"><cite>CSS Box Sizing Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-sizing-3/">https://drafts.csswg.org/css-sizing-3/</a> <dt id="biblio-css-transforms-1">[CSS-TRANSFORMS-1] <dd>Simon Fraser; et al. <a href="https://drafts.csswg.org/css-transforms/"><cite>CSS Transforms Module Level 1</cite></a>. URL: <a href="https://drafts.csswg.org/css-transforms/">https://drafts.csswg.org/css-transforms/</a> <dt id="biblio-css-values-3">[CSS-VALUES-3] <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://drafts.csswg.org/css-values-3/"><cite>CSS Values and Units Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-values-3/">https://drafts.csswg.org/css-values-3/</a> <dt id="biblio-css-values-4">[CSS-VALUES-4] <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://drafts.csswg.org/css-values-4/"><cite>CSS Values and Units Module Level 4</cite></a>. URL: <a href="https://drafts.csswg.org/css-values-4/">https://drafts.csswg.org/css-values-4/</a> <dt id="biblio-css-writing-modes-4">[CSS-WRITING-MODES-4] <dd>Elika Etemad; Koji Ishii. <a href="https://drafts.csswg.org/css-writing-modes-4/"><cite>CSS Writing Modes Level 4</cite></a>. URL: <a href="https://drafts.csswg.org/css-writing-modes-4/">https://drafts.csswg.org/css-writing-modes-4/</a> <dt id="biblio-css2">[CSS2] <dd>Bert Bos; et al. <a href="https://drafts.csswg.org/css2/"><cite>Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification</cite></a>. URL: <a href="https://drafts.csswg.org/css2/">https://drafts.csswg.org/css2/</a> <dt id="biblio-cssom-view">[CSSOM-VIEW] <dd>Simon Pieters. <a href="https://drafts.csswg.org/cssom-view/"><cite>CSSOM View Module</cite></a>. URL: <a href="https://drafts.csswg.org/cssom-view/">https://drafts.csswg.org/cssom-view/</a> <dt id="biblio-dom">[DOM] <dd>Anne van Kesteren. <a href="https://dom.spec.whatwg.org/"><cite>DOM Standard</cite></a>. Living Standard. URL: <a href="https://dom.spec.whatwg.org/">https://dom.spec.whatwg.org/</a> <dt id="biblio-html">[HTML] <dd>Anne van Kesteren; et al. <a href="https://html.spec.whatwg.org/multipage/"><cite>HTML Standard</cite></a>. Living Standard. URL: <a href="https://html.spec.whatwg.org/multipage/">https://html.spec.whatwg.org/multipage/</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> </dl> <h2 class="no-num no-ref heading settled" id="property-index"><span class="content">Property Index</span><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 <tbody> <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-overflow-anchor" id="ref-for-propdef-overflow-anchor⑤">overflow-anchor</a> <td>auto | none <td>auto <td>all elements <td>no <td>n/a <td>discrete <td>per grammar <td>specified keyword </table> </div> <details class="mdn-anno unpositioned" data-anno-for="exclusion-api"> <summary><span>MDN</span></summary> <div class="feature"> <p><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-anchor" title="The overflow-anchor CSS property provides a way to opt out of the browser's scroll anchoring behavior, which adjusts scroll position to minimize content shifts.">overflow-anchor</a></p> <div class="support"> <span class="firefox yes"><span>Firefox</span><span>66+</span></span><span class="safari no"><span>Safari</span><span>None</span></span><span class="chrome yes"><span>Chrome</span><span>56+</span></span> <hr> <span class="opera no"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span> <hr> <span class="edge no"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>IE</span><span>None</span></span> <hr> <span class="firefox_android no"><span>Firefox for Android</span><span>?</span></span><span class="safari_ios no"><span>iOS Safari</span><span>?</span></span><span class="chrome_android no"><span>Chrome for Android</span><span>?</span></span><span class="webview_android no"><span>Android WebView</span><span>?</span></span><span class="samsunginternet_android no"><span>Samsung Internet</span><span>?</span></span><span class="opera_android no"><span>Opera Mobile</span><span>?</span></span> </div> </div> </details> <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 = { "04ca8d46": {"dfnID":"04ca8d46","dfnText":"editable","external":true,"refSections":[{"refs":[{"id":"ref-for-editable"}],"title":"2.1. \nAnchor Node Selection"}],"url":"https://w3c.github.io/editing/docs/execCommand/index.html#editable"}, "050af578": {"dfnID":"050af578","dfnText":"editing host","external":true,"refSections":[{"refs":[{"id":"ref-for-editing-host"}],"title":"2.1. \nAnchor Node Selection"}],"url":"https://html.spec.whatwg.org/multipage/interaction.html#editing-host"}, "06834943": {"dfnID":"06834943","dfnText":"DOM anchor","external":true,"refSections":[{"refs":[{"id":"ref-for-dom-anchor"}],"title":"2.1. \nAnchor Node Selection"}],"url":"https://html.spec.whatwg.org/multipage/interaction.html#dom-anchor"}, "23177077": {"dfnID":"23177077","dfnText":"scrollable overflow rectangle","external":true,"refSections":[{"refs":[{"id":"ref-for-scrollable-overflow-rectangle"}],"title":"2.1. \nAnchor Node Selection"}],"url":"https://drafts.csswg.org/css-overflow-3/#scrollable-overflow-rectangle"}, "358fd6ff": {"dfnID":"358fd6ff","dfnText":"CSS-wide keywords","external":true,"refSections":[{"refs":[{"id":"ref-for-css-wide-keywords"}],"title":"1.1. \nValue Definitions"}],"url":"https://drafts.csswg.org/css-values-4/#css-wide-keywords"}, "3d1558b7": {"dfnID":"3d1558b7","dfnText":"re-snap","external":true,"refSections":[{"refs":[{"id":"ref-for-re-snap"}],"title":"2. \nDescription"}],"url":"https://drafts.csswg.org/css-scroll-snap-1/#re-snap"}, "3d3e300e": {"dfnID":"3d3e300e","dfnText":"absolute","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-position-absolute"}],"title":"2.1. \nAnchor Node Selection"}],"url":"https://drafts.csswg.org/css-position-3/#valdef-position-absolute"}, "40873652": {"dfnID":"40873652","dfnText":"content area","external":true,"refSections":[{"refs":[{"id":"ref-for-content-area"}],"title":"2.1. \nAnchor Node Selection"}],"url":"https://drafts.csswg.org/css-box-4/#content-area"}, "4186822a": {"dfnID":"4186822a","dfnText":"scrolling box","external":true,"refSections":[{"refs":[{"id":"ref-for-scrolling-box"}],"title":"Unnumbered Section"},{"refs":[{"id":"ref-for-scrolling-box\u2460"},{"id":"ref-for-scrolling-box\u2461"}],"title":"2.1. \nAnchor Node Selection"}],"url":"https://drafts.csswg.org/cssom-view-1/#scrolling-box"}, "4c9599fa": {"dfnID":"4c9599fa","dfnText":"min-height","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-min-height"}],"title":"2.2.2. \nSuppression Triggers"}],"url":"https://drafts.csswg.org/css-sizing-3/#propdef-min-height"}, "55e8f5de": {"dfnID":"55e8f5de","dfnText":"none","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-display-none"}],"title":"2.1. \nAnchor Node Selection"}],"url":"https://drafts.csswg.org/css-display-4/#valdef-display-none"}, "5b482fa1": {"dfnID":"5b482fa1","dfnText":"scroll","external":true,"refSections":[{"refs":[{"id":"ref-for-eventdef-document-scroll"}],"title":"2.2. \nScroll Adjustment"}],"url":"https://drafts.csswg.org/cssom-view-1/#eventdef-document-scroll"}, "68019d7a": {"dfnID":"68019d7a","dfnText":"height","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-height"}],"title":"2.2.2. \nSuppression Triggers"}],"url":"https://drafts.csswg.org/css-sizing-3/#propdef-height"}, "6c4f0e7b": {"dfnID":"6c4f0e7b","dfnText":"optimal viewing region","external":true,"refSections":[{"refs":[{"id":"ref-for-optimal-viewing-region"},{"id":"ref-for-optimal-viewing-region\u2460"},{"id":"ref-for-optimal-viewing-region\u2461"}],"title":"2.1. \nAnchor Node Selection"}],"url":"https://drafts.csswg.org/css-scroll-snap-1/#optimal-viewing-region"}, "6ec67710": {"dfnID":"6ec67710","dfnText":"|","external":true,"refSections":[{"refs":[{"id":"ref-for-comb-one"}],"title":"3. \nExclusion API"}],"url":"https://drafts.csswg.org/css-values-4/#comb-one"}, "721a6c78": {"dfnID":"721a6c78","dfnText":"scroll snap","external":true,"refSections":[{"refs":[{"id":"ref-for-scroll-snap"}],"title":"2. \nDescription"},{"refs":[{"id":"ref-for-scroll-snap\u2460"}],"title":"\nChanges Since the Feb 11 2020 Working Draft"}],"url":"https://drafts.csswg.org/css-scroll-snap-1/#scroll-snap"}, "86573168": {"dfnID":"86573168","dfnText":"focused area of the document","external":true,"refSections":[{"refs":[{"id":"ref-for-focused-area-of-the-document"}],"title":"2.1. \nAnchor Node Selection"}],"url":"https://html.spec.whatwg.org/multipage/interaction.html#focused-area-of-the-document"}, "86923d07": {"dfnID":"86923d07","dfnText":"scroll container","external":true,"refSections":[{"refs":[{"id":"ref-for-scroll-container"}],"title":"3. \nExclusion API"}],"url":"https://drafts.csswg.org/css-overflow-3/#scroll-container"}, "881c2f72": {"dfnID":"881c2f72","dfnText":"box","external":true,"refSections":[{"refs":[{"id":"ref-for-box"}],"title":"2.1. \nAnchor Node Selection"}],"url":"https://drafts.csswg.org/css-display-4/#box"}, "88643fe0": {"dfnID":"88643fe0","dfnText":"width","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-width"}],"title":"2.2.2. \nSuppression Triggers"}],"url":"https://drafts.csswg.org/css-sizing-3/#propdef-width"}, "88dd7551": {"dfnID":"88dd7551","dfnText":"block flow direction","external":true,"refSections":[{"refs":[{"id":"ref-for-block-flow-direction"}],"title":"2.2. \nScroll Adjustment"}],"url":"https://drafts.csswg.org/css-writing-modes-4/#block-flow-direction"}, "88def535": {"dfnID":"88def535","dfnText":"min-width","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-min-width"}],"title":"2.2.2. \nSuppression Triggers"}],"url":"https://drafts.csswg.org/css-sizing-3/#propdef-min-width"}, "9e39189b": {"dfnID":"9e39189b","dfnText":"max-height","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-max-height"}],"title":"2.2.2. \nSuppression Triggers"}],"url":"https://drafts.csswg.org/css-sizing-3/#propdef-max-height"}, "9f4cc044": {"dfnID":"9f4cc044","dfnText":"active match","external":true,"refSections":[{"refs":[{"id":"ref-for-fip-active-match"}],"title":"2.1. \nAnchor Node Selection"}],"url":"https://html.spec.whatwg.org/multipage/interaction.html#fip-active-match"}, "a18c5781": {"dfnID":"a18c5781","dfnText":"atomic inline","external":true,"refSections":[{"refs":[{"id":"ref-for-atomic-inline"},{"id":"ref-for-atomic-inline\u2460"},{"id":"ref-for-atomic-inline\u2461"}],"title":"2.1. \nAnchor Node Selection"}],"url":"https://drafts.csswg.org/css-display-4/#atomic-inline"}, "a58a3cd8": {"dfnID":"a58a3cd8","dfnText":"bottom","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-bottom"}],"title":"2.2.2. \nSuppression Triggers"}],"url":"https://drafts.csswg.org/css-position-3/#propdef-bottom"}, "aa9d496e": {"dfnID":"aa9d496e","dfnText":"scroll-padding","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-scroll-padding"}],"title":"2.1. \nAnchor Node Selection"}],"url":"https://drafts.csswg.org/css-scroll-snap-1/#propdef-scroll-padding"}, "anchor-priority-candidates": {"dfnID":"anchor-priority-candidates","dfnText":"anchor priority candidates","external":false,"refSections":[{"refs":[{"id":"ref-for-anchor-priority-candidates"},{"id":"ref-for-anchor-priority-candidates\u2460"}],"title":"2.1. \nAnchor Node Selection"},{"refs":[{"id":"ref-for-anchor-priority-candidates\u2461"}],"title":"\nChanges Since the Feb 11 2020 Working Draft"}],"url":"#anchor-priority-candidates"}, "anchor-viable-candidate": {"dfnID":"anchor-viable-candidate","dfnText":"viable candidate","external":false,"refSections":[{"refs":[{"id":"ref-for-anchor-viable-candidate"}],"title":"2.1. \nAnchor Node Selection"},{"refs":[{"id":"ref-for-anchor-viable-candidate\u2460"}],"title":"\nChanges Since the Feb 11 2020 Working Draft"}],"url":"#anchor-viable-candidate"}, "anchoring-algorithm": {"dfnID":"anchoring-algorithm","dfnText":"anchor node selection algorithm","external":false,"refSections":[{"refs":[{"id":"ref-for-anchoring-algorithm"},{"id":"ref-for-anchoring-algorithm\u2460"}],"title":"3. \nExclusion API"}],"url":"#anchoring-algorithm"}, "b0b8d8c0": {"dfnID":"b0b8d8c0","dfnText":"right","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-right"}],"title":"2.2.2. \nSuppression Triggers"}],"url":"https://drafts.csswg.org/css-position-3/#propdef-right"}, "b5418f3e": {"dfnID":"b5418f3e","dfnText":"padding","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-padding"}],"title":"2.2.2. \nSuppression Triggers"}],"url":"https://drafts.csswg.org/css-box-4/#propdef-padding"}, "b7221005": {"dfnID":"b7221005","dfnText":"fixed","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-position-fixed"}],"title":"2.1. \nAnchor Node Selection"}],"url":"https://drafts.csswg.org/css-position-3/#valdef-position-fixed"}, "b8a0ba74": {"dfnID":"b8a0ba74","dfnText":"position","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-position"},{"id":"ref-for-propdef-position\u2460"}],"title":"2.1. \nAnchor Node Selection"},{"refs":[{"id":"ref-for-propdef-position\u2461"},{"id":"ref-for-propdef-position\u2462"}],"title":"2.2.2. \nSuppression Triggers"}],"url":"https://drafts.csswg.org/css-position-3/#propdef-position"}, "candidate-examination": {"dfnID":"candidate-examination","dfnText":"candidate examination algorithm","external":false,"refSections":[{"refs":[{"id":"ref-for-candidate-examination"},{"id":"ref-for-candidate-examination\u2460"},{"id":"ref-for-candidate-examination\u2461"}],"title":"2.1. \nAnchor Node Selection"}],"url":"#candidate-examination"}, "cecbe9cd": {"dfnID":"cecbe9cd","dfnText":"margin","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-margin"}],"title":"2.2.2. \nSuppression Triggers"}],"url":"https://drafts.csswg.org/css-box-4/#propdef-margin"}, "d38f9598": {"dfnID":"d38f9598","dfnText":"getBoundingClientRect()","external":true,"refSections":[{"refs":[{"id":"ref-for-dom-element-getboundingclientrect"}],"title":"2.2.1. \nSuppression Window"}],"url":"https://drafts.csswg.org/cssom-view-1/#dom-element-getboundingclientrect"}, "d7d642a2": {"dfnID":"d7d642a2","dfnText":"input","external":true,"refSections":[{"refs":[{"id":"ref-for-the-input-element"}],"title":"2.1. \nAnchor Node Selection"}],"url":"https://html.spec.whatwg.org/multipage/input.html#the-input-element"}, "da8b8e0e": {"dfnID":"da8b8e0e","dfnText":"descendant","external":true,"refSections":[{"refs":[{"id":"ref-for-concept-tree-descendant"}],"title":"2.1. \nAnchor Node Selection"}],"url":"https://dom.spec.whatwg.org/#concept-tree-descendant"}, "dde41168": {"dfnID":"dde41168","dfnText":"left","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-left"}],"title":"2.2.2. \nSuppression Triggers"}],"url":"https://drafts.csswg.org/css-position-3/#propdef-left"}, "e1483d91": {"dfnID":"e1483d91","dfnText":"top","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-top"}],"title":"2.2.2. \nSuppression Triggers"}],"url":"https://drafts.csswg.org/css-position-3/#propdef-top"}, "e2e08d07": {"dfnID":"e2e08d07","dfnText":"transform","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-transform"}],"title":"2.2.2. \nSuppression Triggers"}],"url":"https://drafts.csswg.org/css-transforms-1/#propdef-transform"}, "e7f0dd6c": {"dfnID":"e7f0dd6c","dfnText":"display","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-display"}],"title":"2.1. \nAnchor Node Selection"}],"url":"https://drafts.csswg.org/css-display-4/#propdef-display"}, "e926b664": {"dfnID":"e926b664","dfnText":"mutable","external":true,"refSections":[{"refs":[{"id":"ref-for-concept-fe-mutable"},{"id":"ref-for-concept-fe-mutable\u2460"}],"title":"2.1. \nAnchor Node Selection"}],"url":"https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#concept-fe-mutable"}, "ea663a43": {"dfnID":"ea663a43","dfnText":"containing block","external":true,"refSections":[{"refs":[{"id":"ref-for-containing-block"},{"id":"ref-for-containing-block\u2460"}],"title":"2.1. \nAnchor Node Selection"}],"url":"https://drafts.csswg.org/css-display-4/#containing-block"}, "excluded-subtree": {"dfnID":"excluded-subtree","dfnText":"excluded subtree","external":false,"refSections":[{"refs":[{"id":"ref-for-excluded-subtree"},{"id":"ref-for-excluded-subtree\u2460"},{"id":"ref-for-excluded-subtree\u2461"}],"title":"2.1. \nAnchor Node Selection"}],"url":"#excluded-subtree"}, "f08b32ef": {"dfnID":"f08b32ef","dfnText":"max-width","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-max-width"}],"title":"2.2.2. \nSuppression Triggers"}],"url":"https://drafts.csswg.org/css-sizing-3/#propdef-max-width"}, "fc736137": {"dfnID":"fc736137","dfnText":"textarea","external":true,"refSections":[{"refs":[{"id":"ref-for-the-textarea-element"}],"title":"2.1. \nAnchor Node Selection"}],"url":"https://html.spec.whatwg.org/multipage/form-elements.html#the-textarea-element"}, "fully-clipped": {"dfnID":"fully-clipped","dfnText":"fully clipped","external":false,"refSections":[{"refs":[{"id":"ref-for-fully-clipped"},{"id":"ref-for-fully-clipped\u2460"}],"title":"2.1. \nAnchor Node Selection"}],"url":"#fully-clipped"}, "fully-visible": {"dfnID":"fully-visible","dfnText":"fully visible","external":false,"refSections":[{"refs":[{"id":"ref-for-fully-visible"},{"id":"ref-for-fully-visible\u2460"},{"id":"ref-for-fully-visible\u2461"}],"title":"2.1. \nAnchor Node Selection"}],"url":"#fully-visible"}, "partially-visible": {"dfnID":"partially-visible","dfnText":"partially visible","external":false,"refSections":[{"refs":[{"id":"ref-for-partially-visible"},{"id":"ref-for-partially-visible\u2460"}],"title":"2.1. \nAnchor Node Selection"}],"url":"#partially-visible"}, "propdef-overflow-anchor": {"dfnID":"propdef-overflow-anchor","dfnText":"overflow-anchor","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-overflow-anchor"},{"id":"ref-for-propdef-overflow-anchor\u2460"}],"title":"2.1. \nAnchor Node Selection"},{"refs":[{"id":"ref-for-propdef-overflow-anchor\u2461"},{"id":"ref-for-propdef-overflow-anchor\u2462"},{"id":"ref-for-propdef-overflow-anchor\u2463"}],"title":"3. \nExclusion API"}],"url":"#propdef-overflow-anchor"}, "scroll-anchoring-anchor-node": {"dfnID":"scroll-anchoring-anchor-node","dfnText":"anchor node","external":false,"refSections":[{"refs":[{"id":"ref-for-scroll-anchoring-anchor-node"}],"title":"2.1. \nAnchor Node Selection"}],"url":"#scroll-anchoring-anchor-node"}, "scroll-anchoring-bounding-rect": {"dfnID":"scroll-anchoring-bounding-rect","dfnText":"scroll anchoring bounding rect","external":false,"refSections":[{"refs":[{"id":"ref-for-scroll-anchoring-bounding-rect"},{"id":"ref-for-scroll-anchoring-bounding-rect\u2460"}],"title":"2.1. \nAnchor Node Selection"},{"refs":[{"id":"ref-for-scroll-anchoring-bounding-rect\u2461"}],"title":"2.2. \nScroll Adjustment"}],"url":"#scroll-anchoring-bounding-rect"}, "suppression-trigger": {"dfnID":"suppression-trigger","dfnText":"suppression trigger","external":false,"refSections":[{"refs":[{"id":"ref-for-suppression-trigger"}],"title":"2.2.1. \nSuppression Window"}],"url":"#suppression-trigger"}, "suppression-window": {"dfnID":"suppression-window","dfnText":"suppression window","external":false,"refSections":[{"refs":[{"id":"ref-for-suppression-window"}],"title":"2.2. \nScroll Adjustment"}],"url":"#suppression-window"}, "valdef-overflow-anchor-auto": {"dfnID":"valdef-overflow-anchor-auto","dfnText":"auto","external":false,"refSections":[],"url":"#valdef-overflow-anchor-auto"}, "valdef-overflow-anchor-none": {"dfnID":"valdef-overflow-anchor-none","dfnText":"none","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-overflow-anchor-none"},{"id":"ref-for-valdef-overflow-anchor-none\u2460"}],"title":"2.1. \nAnchor Node Selection"}],"url":"#valdef-overflow-anchor-none"}, }; 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-position-annos */ "use strict"; { function repositionAnnoPanels(){ const panels = [...document.querySelectorAll("[data-anno-for]")]; hydratePanels(panels); let vSoFar = 0; for(const panel of panels.sort(cmpTops)) { if(panel.top < vSoFar) { panel.top = vSoFar; panel.style.top = vSoFar + "px"; } vSoFar = panel.top + panel.height + 15; } } function hydratePanels(panels) { const main = document.querySelector("main"); let mainRect; if(main) mainRect = main.getBoundingClientRect(); // First display them all, if they're not already visible. for(const panel of panels) { panel.classList.remove("unpositioned"); } // Measure them all for(const panel of panels) { const dfn = document.getElementById(panel.getAttribute("data-anno-for")); if(!dfn) { console.log("Can't find the annotation panel target:", panel); continue; } panel.dfn = dfn; panel.top = window.scrollY + dfn.getBoundingClientRect().top; let panelRect = panel.getBoundingClientRect(); panel.height = panelRect.height; if(main) { panel.overlappingMain = panelRect.left < mainRect.right; } else { panel.overlappingMain = false; } } // And finally position them for(const panel of panels) { const dfn = panel.dfn; if(!dfn) continue; panel.style.top = panel.top + "px"; panel.classList.toggle("overlapping-main", panel.overlappingMain); } } function cmpTops(a,b) { return a.top - b.top; } window.addEventListener("load", repositionAnnoPanels); window.addEventListener("resize", repositionAnnoPanels); } </script> <script>/* Boilerplate: script-ref-hints */ "use strict"; { let refsData = { "#anchor-priority-candidates": {"displayText":"priority candidate","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-scroll-anchoring","spec":"css-scroll-anchoring-1","status":"local","text":"priority candidate","type":"dfn","url":"#anchor-priority-candidates"}, "#anchor-viable-candidate": {"displayText":"viable candidate","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-scroll-anchoring","spec":"css-scroll-anchoring-1","status":"local","text":"viable candidate","type":"dfn","url":"#anchor-viable-candidate"}, "#anchoring-algorithm": {"displayText":"anchor node selection algorithm","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-scroll-anchoring","spec":"css-scroll-anchoring-1","status":"local","text":"anchor node selection algorithm","type":"dfn","url":"#anchoring-algorithm"}, "#candidate-examination": {"displayText":"candidate examination algorithm","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-scroll-anchoring","spec":"css-scroll-anchoring-1","status":"local","text":"candidate examination algorithm","type":"dfn","url":"#candidate-examination"}, "#excluded-subtree": {"displayText":"excluded subtree","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-scroll-anchoring","spec":"css-scroll-anchoring-1","status":"local","text":"excluded subtree","type":"dfn","url":"#excluded-subtree"}, "#fully-clipped": {"displayText":"fully clipped","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-scroll-anchoring","spec":"css-scroll-anchoring-1","status":"local","text":"fully clipped","type":"dfn","url":"#fully-clipped"}, "#fully-visible": {"displayText":"fully visible","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-scroll-anchoring","spec":"css-scroll-anchoring-1","status":"local","text":"fully visible","type":"dfn","url":"#fully-visible"}, "#partially-visible": {"displayText":"partially visible","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-scroll-anchoring","spec":"css-scroll-anchoring-1","status":"local","text":"partially visible","type":"dfn","url":"#partially-visible"}, "#propdef-overflow-anchor": {"displayText":"overflow-anchor","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-scroll-anchoring","spec":"css-scroll-anchoring-1","status":"local","text":"overflow-anchor","type":"property","url":"#propdef-overflow-anchor"}, "#scroll-anchoring-anchor-node": {"displayText":"anchor node","export":true,"for_":["scroll-anchoring"],"level":"1","normative":true,"shortname":"css-scroll-anchoring","spec":"css-scroll-anchoring-1","status":"local","text":"anchor node","type":"dfn","url":"#scroll-anchoring-anchor-node"}, "#scroll-anchoring-bounding-rect": {"displayText":"scroll anchoring bounding rect","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-scroll-anchoring","spec":"css-scroll-anchoring-1","status":"local","text":"scroll anchoring bounding rect","type":"dfn","url":"#scroll-anchoring-bounding-rect"}, "#suppression-trigger": {"displayText":"suppression trigger","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-scroll-anchoring","spec":"css-scroll-anchoring-1","status":"local","text":"suppression trigger","type":"dfn","url":"#suppression-trigger"}, "#suppression-window": {"displayText":"suppression window","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-scroll-anchoring","spec":"css-scroll-anchoring-1","status":"local","text":"suppression window","type":"dfn","url":"#suppression-window"}, "#valdef-overflow-anchor-none": {"displayText":"none","export":true,"for_":["overflow-anchor"],"level":"1","normative":true,"shortname":"css-scroll-anchoring","spec":"css-scroll-anchoring-1","status":"local","text":"none","type":"value","url":"#valdef-overflow-anchor-none"}, "https://dom.spec.whatwg.org/#concept-tree-descendant": {"displayText":"descendant","export":true,"for_":["tree"],"level":"1","normative":true,"shortname":"dom","spec":"dom","status":"current","text":"descendant","type":"dfn","url":"https://dom.spec.whatwg.org/#concept-tree-descendant"}, "https://drafts.csswg.org/css-box-4/#content-area": {"displayText":"content area","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"current","text":"content area","type":"dfn","url":"https://drafts.csswg.org/css-box-4/#content-area"}, "https://drafts.csswg.org/css-box-4/#propdef-margin": {"displayText":"margin","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"current","text":"margin","type":"property","url":"https://drafts.csswg.org/css-box-4/#propdef-margin"}, "https://drafts.csswg.org/css-box-4/#propdef-padding": {"displayText":"padding","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"current","text":"padding","type":"property","url":"https://drafts.csswg.org/css-box-4/#propdef-padding"}, "https://drafts.csswg.org/css-display-4/#atomic-inline": {"displayText":"atomic inline","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"atomic inline","type":"dfn","url":"https://drafts.csswg.org/css-display-4/#atomic-inline"}, "https://drafts.csswg.org/css-display-4/#box": {"displayText":"box","export":true,"for_":["CSS"],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"box","type":"dfn","url":"https://drafts.csswg.org/css-display-4/#box"}, "https://drafts.csswg.org/css-display-4/#containing-block": {"displayText":"containing block","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"containing block","type":"dfn","url":"https://drafts.csswg.org/css-display-4/#containing-block"}, "https://drafts.csswg.org/css-display-4/#propdef-display": {"displayText":"display","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"display","type":"property","url":"https://drafts.csswg.org/css-display-4/#propdef-display"}, "https://drafts.csswg.org/css-display-4/#valdef-display-none": {"displayText":"none","export":true,"for_":["display","<display-box>"],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"none","type":"value","url":"https://drafts.csswg.org/css-display-4/#valdef-display-none"}, "https://drafts.csswg.org/css-overflow-3/#scroll-container": {"displayText":"scroll container","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-overflow","spec":"css-overflow-3","status":"current","text":"scroll container","type":"dfn","url":"https://drafts.csswg.org/css-overflow-3/#scroll-container"}, "https://drafts.csswg.org/css-overflow-3/#scrollable-overflow-rectangle": {"displayText":"scrollable overflow rectangle","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-overflow","spec":"css-overflow-3","status":"current","text":"scrollable overflow rectangle","type":"dfn","url":"https://drafts.csswg.org/css-overflow-3/#scrollable-overflow-rectangle"}, "https://drafts.csswg.org/css-position-3/#propdef-bottom": {"displayText":"bottom","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-position","spec":"css-position-3","status":"current","text":"bottom","type":"property","url":"https://drafts.csswg.org/css-position-3/#propdef-bottom"}, "https://drafts.csswg.org/css-position-3/#propdef-left": {"displayText":"left","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-position","spec":"css-position-3","status":"current","text":"left","type":"property","url":"https://drafts.csswg.org/css-position-3/#propdef-left"}, "https://drafts.csswg.org/css-position-3/#propdef-position": {"displayText":"position","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-position","spec":"css-position-3","status":"current","text":"position","type":"property","url":"https://drafts.csswg.org/css-position-3/#propdef-position"}, "https://drafts.csswg.org/css-position-3/#propdef-right": {"displayText":"right","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-position","spec":"css-position-3","status":"current","text":"right","type":"property","url":"https://drafts.csswg.org/css-position-3/#propdef-right"}, "https://drafts.csswg.org/css-position-3/#propdef-top": {"displayText":"top","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-position","spec":"css-position-3","status":"current","text":"top","type":"property","url":"https://drafts.csswg.org/css-position-3/#propdef-top"}, "https://drafts.csswg.org/css-position-3/#valdef-position-absolute": {"displayText":"absolute","export":true,"for_":["position"],"level":"3","normative":true,"shortname":"css-position","spec":"css-position-3","status":"current","text":"absolute","type":"value","url":"https://drafts.csswg.org/css-position-3/#valdef-position-absolute"}, "https://drafts.csswg.org/css-position-3/#valdef-position-fixed": {"displayText":"fixed","export":true,"for_":["position"],"level":"3","normative":true,"shortname":"css-position","spec":"css-position-3","status":"current","text":"fixed","type":"value","url":"https://drafts.csswg.org/css-position-3/#valdef-position-fixed"}, "https://drafts.csswg.org/css-scroll-snap-1/#optimal-viewing-region": {"displayText":"optimal viewing region","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-scroll-snap","spec":"css-scroll-snap-1","status":"current","text":"optimal viewing region","type":"dfn","url":"https://drafts.csswg.org/css-scroll-snap-1/#optimal-viewing-region"}, "https://drafts.csswg.org/css-scroll-snap-1/#propdef-scroll-padding": {"displayText":"scroll-padding","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-scroll-snap","spec":"css-scroll-snap-1","status":"current","text":"scroll-padding","type":"property","url":"https://drafts.csswg.org/css-scroll-snap-1/#propdef-scroll-padding"}, "https://drafts.csswg.org/css-scroll-snap-1/#re-snap": {"displayText":"re-snap","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-scroll-snap","spec":"css-scroll-snap-1","status":"current","text":"re-snap","type":"dfn","url":"https://drafts.csswg.org/css-scroll-snap-1/#re-snap"}, "https://drafts.csswg.org/css-scroll-snap-1/#scroll-snap": {"displayText":"scroll snap","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-scroll-snap","spec":"css-scroll-snap-1","status":"current","text":"scroll snap","type":"dfn","url":"https://drafts.csswg.org/css-scroll-snap-1/#scroll-snap"}, "https://drafts.csswg.org/css-sizing-3/#propdef-height": {"displayText":"height","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-sizing","spec":"css-sizing-3","status":"current","text":"height","type":"property","url":"https://drafts.csswg.org/css-sizing-3/#propdef-height"}, "https://drafts.csswg.org/css-sizing-3/#propdef-max-height": {"displayText":"max-height","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-sizing","spec":"css-sizing-3","status":"current","text":"max-height","type":"property","url":"https://drafts.csswg.org/css-sizing-3/#propdef-max-height"}, "https://drafts.csswg.org/css-sizing-3/#propdef-max-width": {"displayText":"max-width","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-sizing","spec":"css-sizing-3","status":"current","text":"max-width","type":"property","url":"https://drafts.csswg.org/css-sizing-3/#propdef-max-width"}, "https://drafts.csswg.org/css-sizing-3/#propdef-min-height": {"displayText":"min-height","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-sizing","spec":"css-sizing-3","status":"current","text":"min-height","type":"property","url":"https://drafts.csswg.org/css-sizing-3/#propdef-min-height"}, "https://drafts.csswg.org/css-sizing-3/#propdef-min-width": {"displayText":"min-width","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-sizing","spec":"css-sizing-3","status":"current","text":"min-width","type":"property","url":"https://drafts.csswg.org/css-sizing-3/#propdef-min-width"}, "https://drafts.csswg.org/css-sizing-3/#propdef-width": {"displayText":"width","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-sizing","spec":"css-sizing-3","status":"current","text":"width","type":"property","url":"https://drafts.csswg.org/css-sizing-3/#propdef-width"}, "https://drafts.csswg.org/css-transforms-1/#propdef-transform": {"displayText":"transform","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-transforms","spec":"css-transforms-1","status":"current","text":"transform","type":"property","url":"https://drafts.csswg.org/css-transforms-1/#propdef-transform"}, "https://drafts.csswg.org/css-values-4/#comb-one": {"displayText":"|","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"current","text":"|","type":"grammar","url":"https://drafts.csswg.org/css-values-4/#comb-one"}, "https://drafts.csswg.org/css-values-4/#css-wide-keywords": {"displayText":"CSS-wide keywords","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"current","text":"css-wide keywords","type":"dfn","url":"https://drafts.csswg.org/css-values-4/#css-wide-keywords"}, "https://drafts.csswg.org/css-writing-modes-4/#block-flow-direction": {"displayText":"block flow direction","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-4","status":"current","text":"block flow direction","type":"dfn","url":"https://drafts.csswg.org/css-writing-modes-4/#block-flow-direction"}, "https://drafts.csswg.org/cssom-view-1/#dom-element-getboundingclientrect": {"displayText":"getBoundingClientRect()","export":true,"for_":["Element"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"current","text":"getBoundingClientRect()","type":"method","url":"https://drafts.csswg.org/cssom-view-1/#dom-element-getboundingclientrect"}, "https://drafts.csswg.org/cssom-view-1/#eventdef-document-scroll": {"displayText":"scroll","export":true,"for_":["Document","Element","VisualViewport"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"current","text":"scroll","type":"event","url":"https://drafts.csswg.org/cssom-view-1/#eventdef-document-scroll"}, "https://drafts.csswg.org/cssom-view-1/#scrolling-box": {"displayText":"scrolling box","export":true,"for_":[],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"current","text":"scrolling box","type":"dfn","url":"https://drafts.csswg.org/cssom-view-1/#scrolling-box"}, "https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#concept-fe-mutable": {"displayText":"mutable","export":true,"for_":[],"level":"","normative":true,"shortname":"html","spec":"html","status":"anchor-block","text":"mutable","type":"dfn","url":"https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#concept-fe-mutable"}, "https://html.spec.whatwg.org/multipage/form-elements.html#the-textarea-element": {"displayText":"textarea","export":true,"for_":[],"level":"1","normative":true,"shortname":"html","spec":"html","status":"current","text":"textarea","type":"element","url":"https://html.spec.whatwg.org/multipage/form-elements.html#the-textarea-element"}, "https://html.spec.whatwg.org/multipage/input.html#the-input-element": {"displayText":"input","export":true,"for_":[],"level":"1","normative":true,"shortname":"html","spec":"html","status":"current","text":"input","type":"element","url":"https://html.spec.whatwg.org/multipage/input.html#the-input-element"}, "https://html.spec.whatwg.org/multipage/interaction.html#dom-anchor": {"displayText":"DOM anchor","export":true,"for_":[],"level":"","normative":true,"shortname":"html","spec":"html","status":"anchor-block","text":"dom anchor","type":"dfn","url":"https://html.spec.whatwg.org/multipage/interaction.html#dom-anchor"}, "https://html.spec.whatwg.org/multipage/interaction.html#editing-host": {"displayText":"editing host","export":true,"for_":[],"level":"1","normative":true,"shortname":"html","spec":"html","status":"current","text":"editing host","type":"dfn","url":"https://html.spec.whatwg.org/multipage/interaction.html#editing-host"}, "https://html.spec.whatwg.org/multipage/interaction.html#fip-active-match": {"displayText":"active match","export":true,"for_":[],"level":"","normative":true,"shortname":"html","spec":"html","status":"anchor-block","text":"active match","type":"dfn","url":"https://html.spec.whatwg.org/multipage/interaction.html#fip-active-match"}, "https://html.spec.whatwg.org/multipage/interaction.html#focused-area-of-the-document": {"displayText":"focused area of the document","export":true,"for_":[],"level":"","normative":true,"shortname":"html","spec":"html","status":"anchor-block","text":"focused area of the document","type":"dfn","url":"https://html.spec.whatwg.org/multipage/interaction.html#focused-area-of-the-document"}, "https://w3c.github.io/editing/docs/execCommand/index.html#editable": {"displayText":"editable","export":true,"for_":[],"level":"","normative":true,"shortname":"html","spec":"html","status":"anchor-block","text":"editable","type":"dfn","url":"https://w3c.github.io/editing/docs/execCommand/index.html#editable"}, }; function mkRefHint(link, ref) { const linkText = link.textContent; let dfnTextElements = ''; if (ref.displayText.toLowerCase() != linkText.toLowerCase()) { // Give the original term if it's being displayed in a different way. // But allow casing differences, they're insignificant. dfnTextElements = mk.li({}, mk.b({}, "Term: "), mk.span({}, ref.displayText) ); } 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 refHintKey = link.getAttribute("data-refhint-key"); let key = url; if(refHintKey) { key = refHintKey + "_" + url; } const ref = refsData[key]; 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> <script>/* Boilerplate: script-var-click-highlighting */ "use strict"; { /* Color-choosing design: * Colors are ordered by goodness. * On clicking a var, give it the earliest color with the lowest usage in the algorithm. * On re-clicking, re-use the var's most recent color if that's not currently being used elsewhere. */ const COLOR_COUNT = 7; document.addEventListener("click", e=>{ if(e.target.nodeName == "VAR") { highlightSameAlgoVars(e.target); } }); function highlightSameAlgoVars(v) { // Find the algorithm container. let algoContainer = findAlgoContainer(v); // Not highlighting document-global vars, // too likely to be unrelated. if(algoContainer == null) return; const varName = nameFromVar(v); if(!v.hasAttribute("data-var-color")) { const newColor = chooseHighlightColor(algoContainer, v); for(const el of algoContainer.querySelectorAll("var")) { if(nameFromVar(el) == varName) { el.setAttribute("data-var-color", newColor); el.setAttribute("data-var-last-color", newColor); } } } else { for(const el of algoContainer.querySelectorAll("var")) { if(nameFromVar(el) == varName) { el.removeAttribute("data-var-color"); } } } } function findAlgoContainer(el) { while(el != document.body) { if(el.hasAttribute("data-algorithm")) return el; el = el.parentNode; } return null; } function nameFromVar(el) { return el.textContent.replace(/(\s|\xa0)+/g, " ").trim(); } function colorCountsFromContainer(container) { const namesFromColor = Array.from({length:COLOR_COUNT}, x=>new Set()); for(let v of container.querySelectorAll("var[data-var-color]")) { let color = +v.getAttribute("data-var-color"); namesFromColor[color].add(nameFromVar(v)); } return namesFromColor.map(x=>x.size); } function leastUsedColor(colors) { // Find the earliest color with the lowest count. let minCount = Infinity; let minColor = null; for(var i = 0; i < colors.length; i++) { if(colors[i] < minCount) { minColor = i; minCount = colors[i]; } } return minColor; } function chooseHighlightColor(container, v) { const colorCounts = colorCountsFromContainer(container); if(v.hasAttribute("data-var-last-color")) { let color = +v.getAttribute("data-var-last-color"); if(colorCounts[color] == 0) return color; } return leastUsedColor(colorCounts); } } </script>