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>CSSOM View Module</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/cssom-view-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> main .atrisk::before { float: right; margin-top: -0.25em; padding: 0.5em 1em 0.5em 0; text-indent: -0.9em; border: 1px solid; content: '\25C0 Not yet widely implemented'; white-space: pre; font-size: small; background-color: white; color: gray; text-align: center; } </style> <style> .selected-text-file-an-issue { position: fixed; bottom: 0; right: 0; background: rgba(255, 255, 255, 0.8); font-size: smaller; padding: 4px 10px; z-index: 1; text-decoration: underline; } @media (max-width: 767px) { .selected-text-file-an-issue { left: 0; right: auto; text-align: left; } } </style> <style> @keyframes lvmove { 0%, 10%, 20% { transform: translate(0, 100px); } 30%, 50%, 70% { transform: translate(0, 150px); } 80%,100% { transform: translate(0, 100px); } } @keyframes vvmove { 0%, 10% { transform: translate(70px, 150px); } 30%, 50% { transform: translate(70px, 250px); } 80%, 90% { transform: translate(70px, 100px); } 100% { transform: translate(70px, 150px); } } #lv { transform: translate(0, 100px); animation: lvmove linear 3s infinite; } #vv { transform: translate(20px, 150px); animation: vvmove linear 3s infinite; } .paused #lv { animation-play-state: paused; } .paused #vv { animation-play-state: paused; } </style> <style>/* Boilerplate: style-autolinks */ .css.css, .property.property, .descriptor.descriptor { color: var(--a-normal-text); font-size: inherit; font-family: inherit; } .css::before, .property::before, .descriptor::before { content: "‘"; } .css::after, .property::after, .descriptor::after { content: "’"; } .property, .descriptor { /* Don't wrap property and descriptor names */ white-space: nowrap; } .type { /* CSS value <type> */ font-style: italic; } pre .property::before, pre .property::after { content: ""; } [data-link-type="property"]::before, [data-link-type="propdesc"]::before, [data-link-type="descriptor"]::before, [data-link-type="value"]::before, [data-link-type="function"]::before, [data-link-type="at-rule"]::before, [data-link-type="selector"]::before, [data-link-type="maybe"]::before { content: "‘"; } [data-link-type="property"]::after, [data-link-type="propdesc"]::after, [data-link-type="descriptor"]::after, [data-link-type="value"]::after, [data-link-type="function"]::after, [data-link-type="at-rule"]::after, [data-link-type="selector"]::after, [data-link-type="maybe"]::after { content: "’"; } [data-link-type].production::before, [data-link-type].production::after, .prod [data-link-type]::before, .prod [data-link-type]::after { content: ""; } [data-link-type=element], [data-link-type=element-attr] { font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace; font-size: .9em; } [data-link-type=element]::before { content: "<" } [data-link-type=element]::after { content: ">" } [data-link-type=biblio] { white-space: pre; } @media (prefers-color-scheme: dark) { :root { --selflink-text: black; --selflink-bg: silver; --selflink-hover-text: white; } } </style> <style>/* Boilerplate: style-caniuse-panel */ @media (max-width: 767px) { .caniuse-status { opacity: .1; transition: opacity .1s; } } :root { --caniuse-bg: #EEE; --caniuse-shadow: #999; --caniuse-nosupport-text: #ccc; --caniuse-partialsupport-text: #666; } @media (prefers-color-scheme: dark) { :root { --caniuse-bg: #222; --caniuse-shadow: #444; --caniuse-nosupport-text: #666; --caniuse-partialsupport-text: #bbb; } } .caniuse-status { background: var(--caniuse-bg, #EEE); border-radius: .25em; box-shadow: 0 0 3px var(--caniuse-shadow, #999); color: var(--text, black); font: 1em sans-serif; hyphens: none; max-width: min-content; overflow: hidden; padding: .2em; position: absolute; right: 0.3em; top: auto; width: fit-content; word-wrap: normal; z-index: 8; } .caniuse-status.unpositioned { display: none; } .caniuse-status.overlapping-main { opacity: .2; transition: opacity .1s; } .caniuse-status[open] { opacity: 1; z-index: 9; min-width: 9em; width: fit-content; } .caniuse-status:hover { outline: var(--text, black) 1px solid; opacity: 1; } .caniuse-status > summary { font-weight: normal; text-align: right; cursor: pointer; display: block; } .caniuse-status > p { font-size: 0.6em; margin: 0; padding: 0; clear: both; } .caniuse-status > p + p { padding-top: 0.5em; } .caniuse-status > .support { display: block; } .caniuse-status > .support > span { padding: 0.2em 0; display: block; display: table; } .caniuse-status > .support > span.partial { color: var(--caniuse-partialsupport-text, #666666); filter: grayscale(50%); } .caniuse-status > .support > span.no { color: var(--caniuse-nosupport-text, #CCCCCC); filter: grayscale(100%); } .caniuse-status > .support > span.no::before { opacity: 0.5; } .caniuse-status > .support > span:first-of-type { padding-top: 0.5em; } .caniuse-status > .support > span > span { padding: 0 0.5em; display: table-cell; vertical-align: top; } .caniuse-status > .support > span > span:first-child { width: 100%; } .caniuse-status > .support > span > span:last-child { width: 100%; white-space: pre; padding: 0; } .caniuse-status > .support > span::before { content: ' '; display: table-cell; height: 1.5em; background: no-repeat center center; background-size: contain; text-align: right; font-size: 0.75em; font-weight: bold; } .caniuse-status > .support > .and_chr::before { background-image: url(https://resources.whatwg.org/browser-logos/chrome.svg); } .caniuse-status > .support > .and_ff::before { background-image: url(https://resources.whatwg.org/browser-logos/firefox.png); } .caniuse-status > .support > .and_uc::before { background-image: url(https://resources.whatwg.org/browser-logos/uc.png); } /* UC Browser for Android */ .caniuse-status > .support > .android::before { background-image: url(https://resources.whatwg.org/browser-logos/android.svg); } .caniuse-status > .support > .bb::before { background-image: url(https://resources.whatwg.org/browser-logos/bb.jpg); } /* Blackberry Browser */ .caniuse-status > .support > .chrome::before { background-image: url(https://resources.whatwg.org/browser-logos/chrome.svg); } .caniuse-status > .support > .edge::before { background-image: url(https://resources.whatwg.org/browser-logos/edge.svg); } .caniuse-status > .support > .firefox::before { background-image: url(https://resources.whatwg.org/browser-logos/firefox.png); } .caniuse-status > .support > .ie::before { background-image: url(https://resources.whatwg.org/browser-logos/ie.png); } .caniuse-status > .support > .ie_mob::before { background-image: url(https://resources.whatwg.org/browser-logos/ie-mobile.svg); } .caniuse-status > .support > .ios_saf::before { background-image: url(https://resources.whatwg.org/browser-logos/safari-ios.svg); } .caniuse-status > .support > .op_mini::before { background-image: url(https://resources.whatwg.org/browser-logos/opera-mini.png); } .caniuse-status > .support > .op_mob::before { background-image: url(https://resources.whatwg.org/browser-logos/opera.svg); } .caniuse-status > .support > .opera::before { background-image: url(https://resources.whatwg.org/browser-logos/opera.svg); } .caniuse-status > .support > .safari::before { background-image: url(https://resources.whatwg.org/browser-logos/safari.png); } .caniuse-status > .support > .samsung::before { background-image: url(https://resources.whatwg.org/browser-logos/samsung.svg); } .caniuse-status > .caniuse { text-align: right; font-style: italic; } @media (max-width: 767px) { .caniuse-status.wrapped { width: 9em; height: auto; } .caniuse-status:not(.wrapped) { height: 1em; max-width: min-content; } .caniuse-status.wrapped > :not(input) { display: block; } .caniuse-status:not(.wrapped) > :not(input) { display: none; } } </style> <style>/* Boilerplate: style-colors */ /* Any --*-text not paired with a --*-bg is assumed to have a transparent bg */ :root { color-scheme: light dark; --text: black; --bg: white; --unofficial-watermark: url(https://www.w3.org/StyleSheets/TR/2016/logos/UD-watermark); --logo-bg: #1a5e9a; --logo-active-bg: #c00; --logo-text: white; --tocnav-normal-text: #707070; --tocnav-normal-bg: var(--bg); --tocnav-hover-text: var(--tocnav-normal-text); --tocnav-hover-bg: #f8f8f8; --tocnav-active-text: #c00; --tocnav-active-bg: var(--tocnav-normal-bg); --tocsidebar-text: var(--text); --tocsidebar-bg: #f7f8f9; --tocsidebar-shadow: rgba(0,0,0,.1); --tocsidebar-heading-text: hsla(203,20%,40%,.7); --toclink-text: var(--text); --toclink-underline: #3980b5; --toclink-visited-text: var(--toclink-text); --toclink-visited-underline: #054572; --heading-text: #005a9c; --hr-text: var(--text); --algo-border: #def; --del-text: red; --del-bg: transparent; --ins-text: #080; --ins-bg: transparent; --a-normal-text: #034575; --a-normal-underline: #bbb; --a-visited-text: var(--a-normal-text); --a-visited-underline: #707070; --a-hover-bg: rgba(75%, 75%, 75%, .25); --a-active-text: #c00; --a-active-underline: #c00; --blockquote-border: silver; --blockquote-bg: transparent; --blockquote-text: currentcolor; --issue-border: #e05252; --issue-bg: #fbe9e9; --issue-text: var(--text); --issueheading-text: #831616; --example-border: #e0cb52; --example-bg: #fcfaee; --example-text: var(--text); --exampleheading-text: #574b0f; --note-border: #52e052; --note-bg: #e9fbe9; --note-text: var(--text); --noteheading-text: hsl(120, 70%, 30%); --notesummary-underline: silver; --assertion-border: #aaa; --assertion-bg: #eee; --assertion-text: black; --advisement-border: orange; --advisement-bg: #fec; --advisement-text: var(--text); --advisementheading-text: #b35f00; --warning-border: red; --warning-bg: hsla(40,100%,50%,0.95); --warning-text: var(--text); --amendment-border: #330099; --amendment-bg: #F5F0FF; --amendment-text: var(--text); --amendmentheading-text: #220066; --def-border: #8ccbf2; --def-bg: #def; --def-text: var(--text); --defrow-border: #bbd7e9; --datacell-border: silver; --indexinfo-text: #707070; --indextable-hover-text: black; --indextable-hover-bg: #f7f8f9; --outdatedspec-bg: rgba(0, 0, 0, .5); --outdatedspec-text: black; --outdated-bg: maroon; --outdated-text: white; --outdated-shadow: red; --editedrec-bg: darkorange; } @media (prefers-color-scheme: dark) { :root { --text: #ddd; --bg: black; --unofficial-watermark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cg fill='%23100808' transform='translate(200 200) rotate(-45) translate(-200 -200)' stroke='%23100808' stroke-width='3'%3E%3Ctext x='50%25' y='220' style='font: bold 70px sans-serif; text-anchor: middle; letter-spacing: 6px;'%3EUNOFFICIAL%3C/text%3E%3Ctext x='50%25' y='305' style='font: bold 70px sans-serif; text-anchor: middle; letter-spacing: 6px;'%3EDRAFT%3C/text%3E%3C/g%3E%3C/svg%3E"); --logo-bg: #1a5e9a; --logo-active-bg: #c00; --logo-text: white; --tocnav-normal-text: #999; --tocnav-normal-bg: var(--bg); --tocnav-hover-text: var(--tocnav-normal-text); --tocnav-hover-bg: #080808; --tocnav-active-text: #f44; --tocnav-active-bg: var(--tocnav-normal-bg); --tocsidebar-text: var(--text); --tocsidebar-bg: #080808; --tocsidebar-shadow: rgba(255,255,255,.1); --tocsidebar-heading-text: hsla(203,20%,40%,.7); --toclink-text: var(--text); --toclink-underline: #6af; --toclink-visited-text: var(--toclink-text); --toclink-visited-underline: #054572; --heading-text: #8af; --hr-text: var(--text); --algo-border: #456; --del-text: #f44; --del-bg: transparent; --ins-text: #4a4; --ins-bg: transparent; --a-normal-text: #6af; --a-normal-underline: #555; --a-visited-text: var(--a-normal-text); --a-visited-underline: var(--a-normal-underline); --a-hover-bg: rgba(25%, 25%, 25%, .2); --a-active-text: #f44; --a-active-underline: var(--a-active-text); --borderedblock-bg: rgba(255, 255, 255, .05); --blockquote-border: silver; --blockquote-bg: var(--borderedblock-bg); --blockquote-text: currentcolor; --issue-border: #e05252; --issue-bg: var(--borderedblock-bg); --issue-text: var(--text); --issueheading-text: hsl(0deg, 70%, 70%); --example-border: hsl(50deg, 90%, 60%); --example-bg: var(--borderedblock-bg); --example-text: var(--text); --exampleheading-text: hsl(50deg, 70%, 70%); --note-border: hsl(120deg, 100%, 35%); --note-bg: var(--borderedblock-bg); --note-text: var(--text); --noteheading-text: hsl(120, 70%, 70%); --notesummary-underline: silver; --assertion-border: #444; --assertion-bg: var(--borderedblock-bg); --assertion-text: var(--text); --advisement-border: orange; --advisement-bg: #222218; --advisement-text: var(--text); --advisementheading-text: #f84; --warning-border: red; --warning-bg: hsla(40,100%,20%,0.95); --warning-text: var(--text); --amendment-border: #330099; --amendment-bg: #080010; --amendment-text: var(--text); --amendmentheading-text: #cc00ff; --def-border: #8ccbf2; --def-bg: #080818; --def-text: var(--text); --defrow-border: #136; --datacell-border: silver; --indexinfo-text: #aaa; --indextable-hover-text: var(--text); --indextable-hover-bg: #181818; --outdatedspec-bg: rgba(255, 255, 255, .5); --outdatedspec-text: black; --outdated-bg: maroon; --outdated-text: white; --outdated-shadow: red; --editedrec-bg: darkorange; } /* In case a transparent-bg image doesn't expect to be on a dark bg, which is quite common in practice... */ img { background: white; } } </style> <style>/* Boilerplate: style-counters */ body { counter-reset: example figure issue; } .issue { counter-increment: issue; } .issue:not(.no-marker)::before { content: "Issue " counter(issue); } .example { counter-increment: example; } .example:not(.no-marker)::before { content: "Example " counter(example); } .invalid.example:not(.no-marker)::before, .illegal.example:not(.no-marker)::before { content: "Invalid Example" counter(example); } figcaption { counter-increment: figure; } figcaption:not(.no-marker)::before { content: "Figure " counter(figure) " "; } </style> <style>/* Boilerplate: style-dfn-panel */ :root { --dfnpanel-bg: #ddd; --dfnpanel-text: var(--text); --dfnpanel-target-bg: #ffc; --dfnpanel-target-outline: orange; } @media (prefers-color-scheme: dark) { :root { --dfnpanel-bg: #222; --dfnpanel-text: var(--text); --dfnpanel-target-bg: #333; --dfnpanel-target-outline: silver; } } .dfn-panel { position: absolute; z-index: 35; width: 20em; width: 300px; height: auto; max-height: 500px; overflow: auto; padding: 0.5em 0.75em; font: small Helvetica Neue, sans-serif, Droid Sans Fallback; background: var(--dfnpanel-bg); color: var(--dfnpanel-text); border: outset 0.2em; white-space: normal; /* in case it's moved into a pre */ } .dfn-panel:not(.on) { display: none; } .dfn-panel * { margin: 0; padding: 0; text-indent: 0; } .dfn-panel > b { display: block; } .dfn-panel a { color: var(--dfnpanel-text); } .dfn-panel a:not(:hover) { text-decoration: none !important; border-bottom: none !important; } .dfn-panel a:focus { outline: 5px auto Highlight; outline: 5px auto -webkit-focus-ring-color; } .dfn-panel > b + b { margin-top: 0.25em; } .dfn-panel ul { padding: 0 0 0 1em; list-style: none; } .dfn-panel li a { max-width: calc(300px - 1.5em - 1em); overflow: hidden; text-overflow: ellipsis; } .dfn-panel.activated { display: inline-block; position: fixed; left: 8px; bottom: 2em; margin: 0 auto; max-width: calc(100vw - 1.5em - .4em - .5em); max-height: 30vh; transition: left 1s ease-out, bottom 1s ease-out; } .dfn-panel .link-item:hover { text-decoration: underline; } .dfn-panel .link-item .copy-icon { opacity: 0; } .dfn-panel .link-item:hover .copy-icon, .dfn-panel .link-item .copy-icon:focus { opacity: 1; } .dfn-panel .copy-icon { display: inline-block; margin-right: 0.5em; width: 0.85em; height: 1em; border-radius: 3px; background-color: #ccc; cursor: pointer; } .dfn-panel .copy-icon .icon { width: 100%; height: 100%; background-color: #fff; display: flex; justify-content: center; align-items: center; position: relative; } .dfn-panel .copy-icon .icon::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 1px solid black; background-color: #ccc; opacity: 0.25; transform: translate(3px, -3px); } .dfn-panel .copy-icon:active .icon::before { opacity: 1; } .dfn-paneled[role="button"] { cursor: help; } .highlighted { animation: target-fade 3s; } @keyframes target-fade { from { background-color: var(--dfnpanel-target-bg); outline: 5px solid var(--dfnpanel-target-outline); } to { color: var(--a-normal-text); background-color: transparent; outline: transparent; } } </style> <style>/* Boilerplate: style-idl-highlighting */ pre.idl.highlight { background: var(--borderedblock-bg, var(--def-bg)); } </style> <style>/* Boilerplate: style-issues */ a[href].issue-return { float: right; float: inline-end; color: var(--issueheading-text); font-weight: bold; text-decoration: none; } </style> <style>/* Boilerplate: style-md-lists */ /* This is a weird hack for me not yet following the commonmark spec regarding paragraph and lists. */ [data-md] > :first-child { margin-top: 0; } [data-md] > :last-child { margin-bottom: 0; } </style> <style>/* Boilerplate: style-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-syntax-highlighting */ code.highlight { padding: .1em; border-radius: .3em; } pre.highlight, pre > code.highlight { display: block; padding: 1em; margin: .5em 0; overflow: auto; border-radius: 0; } .highlight:not(.idl) { background: rgba(0, 0, 0, .03); } c-[a] { color: #990055 } /* Keyword.Declaration */ c-[b] { color: #990055 } /* Keyword.Type */ c-[c] { color: #708090 } /* Comment */ c-[d] { color: #708090 } /* Comment.Multiline */ c-[e] { color: #0077aa } /* Name.Attribute */ c-[f] { color: #669900 } /* Name.Tag */ c-[g] { color: #222222 } /* Name.Variable */ c-[k] { color: #990055 } /* Keyword */ c-[l] { color: #000000 } /* Literal */ c-[m] { color: #000000 } /* Literal.Number */ c-[n] { color: #0077aa } /* Name */ c-[o] { color: #999999 } /* Operator */ c-[p] { color: #999999 } /* Punctuation */ c-[s] { color: #a67f59 } /* Literal.String */ c-[t] { color: #a67f59 } /* Literal.String.Single */ c-[u] { color: #a67f59 } /* Literal.String.Double */ c-[cp] { color: #708090 } /* Comment.Preproc */ c-[c1] { color: #708090 } /* Comment.Single */ c-[cs] { color: #708090 } /* Comment.Special */ c-[kc] { color: #990055 } /* Keyword.Constant */ c-[kn] { color: #990055 } /* Keyword.Namespace */ c-[kp] { color: #990055 } /* Keyword.Pseudo */ c-[kr] { color: #990055 } /* Keyword.Reserved */ c-[ld] { color: #000000 } /* Literal.Date */ c-[nc] { color: #0077aa } /* Name.Class */ c-[no] { color: #0077aa } /* Name.Constant */ c-[nd] { color: #0077aa } /* Name.Decorator */ c-[ni] { color: #0077aa } /* Name.Entity */ c-[ne] { color: #0077aa } /* Name.Exception */ c-[nf] { color: #0077aa } /* Name.Function */ c-[nl] { color: #0077aa } /* Name.Label */ c-[nn] { color: #0077aa } /* Name.Namespace */ c-[py] { color: #0077aa } /* Name.Property */ c-[ow] { color: #999999 } /* Operator.Word */ c-[mb] { color: #000000 } /* Literal.Number.Bin */ c-[mf] { color: #000000 } /* Literal.Number.Float */ c-[mh] { color: #000000 } /* Literal.Number.Hex */ c-[mi] { color: #000000 } /* Literal.Number.Integer */ c-[mo] { color: #000000 } /* Literal.Number.Oct */ c-[sb] { color: #a67f59 } /* Literal.String.Backtick */ c-[sc] { color: #a67f59 } /* Literal.String.Char */ c-[sd] { color: #a67f59 } /* Literal.String.Doc */ c-[se] { color: #a67f59 } /* Literal.String.Escape */ c-[sh] { color: #a67f59 } /* Literal.String.Heredoc */ c-[si] { color: #a67f59 } /* Literal.String.Interpol */ c-[sx] { color: #a67f59 } /* Literal.String.Other */ c-[sr] { color: #a67f59 } /* Literal.String.Regex */ c-[ss] { color: #a67f59 } /* Literal.String.Symbol */ c-[vc] { color: #0077aa } /* Name.Variable.Class */ c-[vg] { color: #0077aa } /* Name.Variable.Global */ c-[vi] { color: #0077aa } /* Name.Variable.Instance */ c-[il] { color: #000000 } /* Literal.Number.Integer.Long */ @media (prefers-color-scheme: dark) { .highlight:not(.idl) { background: rgba(255, 255, 255, .05); } c-[a] { color: #d33682 } /* Keyword.Declaration */ c-[b] { color: #d33682 } /* Keyword.Type */ c-[c] { color: #2aa198 } /* Comment */ c-[d] { color: #2aa198 } /* Comment.Multiline */ c-[e] { color: #268bd2 } /* Name.Attribute */ c-[f] { color: #b58900 } /* Name.Tag */ c-[g] { color: #cb4b16 } /* Name.Variable */ c-[k] { color: #d33682 } /* Keyword */ c-[l] { color: #657b83 } /* Literal */ c-[m] { color: #657b83 } /* Literal.Number */ c-[n] { color: #268bd2 } /* Name */ c-[o] { color: #657b83 } /* Operator */ c-[p] { color: #657b83 } /* Punctuation */ c-[s] { color: #6c71c4 } /* Literal.String */ c-[t] { color: #6c71c4 } /* Literal.String.Single */ c-[u] { color: #6c71c4 } /* Literal.String.Double */ c-[ch] { color: #2aa198 } /* Comment.Hashbang */ c-[cp] { color: #2aa198 } /* Comment.Preproc */ c-[cpf] { color: #2aa198 } /* Comment.PreprocFile */ c-[c1] { color: #2aa198 } /* Comment.Single */ c-[cs] { color: #2aa198 } /* Comment.Special */ c-[kc] { color: #d33682 } /* Keyword.Constant */ c-[kn] { color: #d33682 } /* Keyword.Namespace */ c-[kp] { color: #d33682 } /* Keyword.Pseudo */ c-[kr] { color: #d33682 } /* Keyword.Reserved */ c-[ld] { color: #657b83 } /* Literal.Date */ c-[nc] { color: #268bd2 } /* Name.Class */ c-[no] { color: #268bd2 } /* Name.Constant */ c-[nd] { color: #268bd2 } /* Name.Decorator */ c-[ni] { color: #268bd2 } /* Name.Entity */ c-[ne] { color: #268bd2 } /* Name.Exception */ c-[nf] { color: #268bd2 } /* Name.Function */ c-[nl] { color: #268bd2 } /* Name.Label */ c-[nn] { color: #268bd2 } /* Name.Namespace */ c-[py] { color: #268bd2 } /* Name.Property */ c-[ow] { color: #657b83 } /* Operator.Word */ c-[mb] { color: #657b83 } /* Literal.Number.Bin */ c-[mf] { color: #657b83 } /* Literal.Number.Float */ c-[mh] { color: #657b83 } /* Literal.Number.Hex */ c-[mi] { color: #657b83 } /* Literal.Number.Integer */ c-[mo] { color: #657b83 } /* Literal.Number.Oct */ c-[sa] { color: #6c71c4 } /* Literal.String.Affix */ c-[sb] { color: #6c71c4 } /* Literal.String.Backtick */ c-[sc] { color: #6c71c4 } /* Literal.String.Char */ c-[dl] { color: #6c71c4 } /* Literal.String.Delimiter */ c-[sd] { color: #6c71c4 } /* Literal.String.Doc */ c-[se] { color: #6c71c4 } /* Literal.String.Escape */ c-[sh] { color: #6c71c4 } /* Literal.String.Heredoc */ c-[si] { color: #6c71c4 } /* Literal.String.Interpol */ c-[sx] { color: #6c71c4 } /* Literal.String.Other */ c-[sr] { color: #6c71c4 } /* Literal.String.Regex */ c-[ss] { color: #6c71c4 } /* Literal.String.Symbol */ c-[fm] { color: #268bd2 } /* Name.Function.Magic */ c-[vc] { color: #cb4b16 } /* Name.Variable.Class */ c-[vg] { color: #cb4b16 } /* Name.Variable.Global */ c-[vi] { color: #cb4b16 } /* Name.Variable.Instance */ c-[vm] { color: #cb4b16 } /* Name.Variable.Magic */ c-[il] { color: #657b83 } /* Literal.Number.Integer.Long */ } </style> <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"> <a class="logo" href="https://www.w3.org/"> <img alt="W3C" height="48" src="https://www.w3.org/StyleSheets/TR/2021/logos/W3C" width="72"> </a> <h1 class="p-name no-ref" id="title">CSSOM View Module</h1> <a href="https://www.w3.org/standards/types/#ED">Editor’s Draft</a>, <time class="dt-updated" datetime="2025-02-21">21 February 2025</time> <details open> <summary>More details about this document</summary> <div data-fill-with="spec-metadata"> <dl> <dt>This version: <dd><a class="u-url" href="https://drafts.csswg.org/cssom-view/">https://drafts.csswg.org/cssom-view/</a> <dt>Latest published version: <dd><a href="https://www.w3.org/TR/cssom-view-1/">https://www.w3.org/TR/cssom-view-1/</a> <dt>Previous Versions: <dd><a href="https://www.w3.org/TR/2016/WD-cssom-view-1-20160317/" rel="prev">https://www.w3.org/TR/2016/WD-cssom-view-1-20160317/</a> <dd><a href="https://www.w3.org/TR/2013/WD-cssom-view-20131217/" rel="prev">https://www.w3.org/TR/2013/WD-cssom-view-20131217/</a> <dd><a href="https://www.w3.org/TR/2011/WD-cssom-view-20110804/" rel="prev">https://www.w3.org/TR/2011/WD-cssom-view-20110804/</a> <dd><a href="https://www.w3.org/TR/2009/WD-cssom-view-20090804/" rel="prev">https://www.w3.org/TR/2009/WD-cssom-view-20090804/</a> <dd><a href="https://www.w3.org/TR/2008/WD-cssom-view-20080222/" rel="prev">https://www.w3.org/TR/2008/WD-cssom-view-20080222/</a> <dd><a href="https://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/" rel="prev">https://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/</a> <dt>Feedback: <dd><a href="https://github.com/w3c/csswg-drafts/labels/cssom-view-1">CSSWG Issues Repository</a> <dd><a href="#issues-index">Inline In Spec</a> <dt class="editor">Editors: <dd class="editor p-author h-card vcard" data-editor-id="44066"><a class="p-name fn u-email email" href="mailto:simon.fraser@apple.com">Simon Fraser</a> (<a class="p-org org" href="http://www.apple.com/">Apple Inc</a>) <dd class="editor p-author h-card vcard" data-editor-id="106537"><a class="p-name fn u-email email" href="mailto:emilio@mozilla.com">Emilio Cobos Álvarez</a> (<a class="p-org org" href="https://mozilla.org">Mozilla</a>) <dt class="editor">Former Editors: <dd class="editor p-author h-card vcard"><a class="p-name fn u-email email" href="mailto:simonp@opera.com">Simon Pieters</a> (<a class="p-org org" href="http://www.opera.com">Opera Software AS</a>) <dd class="editor p-author h-card vcard"><a class="p-name fn u-url url" href="http://www.w3.org/wiki/User:Gadams">Glenn Adams</a> (<a class="p-org org" href="http://www.cox.com">Cox Communications, Inc.</a>) <a class="u-email email" href="mailto:glenn.adams@cos.com">glenn.adams@cos.com</a> <dd class="editor p-author h-card vcard"><a class="p-name fn u-url url" href="https://annevankesteren.nl/">Anne van Kesteren</a> (<a class="p-org org" href="http://www.opera.com">Opera Software ASA</a>) <a class="u-email email" href="mailto:annevk@annevk.nl">annevk@annevk.nl</a> <dt>Suggest an Edit for this Spec: <dd><a href="https://github.com/w3c/csswg-drafts/blob/main/cssom-view-1/Overview.bs">GitHub Editor</a> <dt>Legacy issues list: <dd><a href="https://www.w3.org/Bugs/Public/buglist.cgi?product=CSS&component=CSSOM%20View&resolution=---">Bugzilla</a> </dl> </div> </details> <div data-fill-with="warning"></div> <a href="https://www.w3.org/policies/#copyright">Copyright</a> © 2025 <a href="https://www.w3.org/">World Wide Web Consortium</a>. <abbr title="World Wide Web Consortium">W3C</abbr>® <a href="https://www.w3.org/policies/#Legal_Disclaimer">liability</a>, <a href="https://www.w3.org/policies/#W3C_Trademarks">trademark</a> and <a href="https://www.w3.org/copyright/software-license/" rel="license" title="W3C Software and Document License">permissive document license</a> rules apply. <hr title="Separator for header"> </div> <div class="p-summary" data-fill-with="abstract"> <h2 class="no-num no-toc no-ref heading settled" id="abstract">Abstract</h2> The APIs introduced by this specification provide authors with a way to inspect and manipulate the visual view of a document. This includes getting the position of element layout boxes, obtaining the width of the viewport through script, and also scrolling an element. <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">Status of this document</h2> <div data-fill-with="status"> 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. Please send feedback by <a href="https://github.com/w3c/csswg-drafts/issues">filing issues in GitHub</a> (preferred), including the spec code “cssom-view” in the title, like this: “[cssom-view] …summary of comment…”. 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=%5Bcssom-view%5D%20PUT%20SUBJECT%20HERE">www-style@w3.org</a>. 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>. </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="#background">1 Background</a> <li> <a href="#terminology">2 Terminology</a> <ol class="toc"> <li><a href="#css-pixels">2.1 CSS pixels</a> <li><a href="#zooming">2.2 Zooming</a> <li><a href="#web-exposed-screen-information">2.3 Web-exposed screen information</a> </ol> <li> <a href="#common-infrastructure">3 Common Infrastructure</a> <ol class="toc"> <li><a href="#scrolling">3.1 Scrolling</a> <li><a href="#webidl-values">3.2 WebIDL values</a> </ol> <li> <a href="#extensions-to-the-window-interface">4 Extensions to the <code class="idl">Window</code> Interface</a> <ol class="toc"> <li><a href="#the-features-argument-to-the-open()-method">4.1 The <var>features</var> argument to the <code class="idl">open()</code> method</a> <li> <a href="#the-mediaquerylist-interface">4.2 The <code class="idl">MediaQueryList</code> Interface</a> <ol class="toc"> <li><a href="#mediaquerylist-event-summary">4.2.1 Event summary</a> </ol> <li><a href="#the-screen-interface">4.3 The <code class="idl">Screen</code> Interface</a> </ol> <li> <a href="#extensions-to-the-document-interface">5 Extensions to the <code class="idl">Document</code> Interface</a> <ol class="toc"> <li><a href="#the-caretposition-interface">5.1 The <code class="idl">CaretPosition</code> Interface</a> </ol> <li> <a href="#extension-to-the-element-interface">6 Extensions to the <code class="idl">Element</code> Interface</a> <ol class="toc"> <li><a href="#element-scrolling-members">6.1 <code class="idl">Element</code> Scrolling Members</a> </ol> <li><a href="#extensions-to-the-htmlelement-interface">7 Extensions to the <code class="idl">HTMLElement</code> Interface</a> <li><a href="#extensions-to-the-htmlimageelement-interface">8 Extensions to the <code class="idl">HTMLImageElement</code> Interface</a> <li><a href="#extensions-to-the-range-interface">9 Extensions to the <code class="idl">Range</code> Interface</a> <li><a href="#extensions-to-the-mouseevent-interface">10 Extensions to the <code class="idl">MouseEvent</code> Interface</a> <li> <a href="#geometry">11 Geometry</a> <ol class="toc"> <li><a href="#the-geometryutils-interface">11.1 The <code class="idl">GeometryUtils</code> Interface</a> </ol> <li> <a href="#visualViewport">12 VisualViewport</a> <ol class="toc"> <li><a href="#the-visualviewport-interface">12.1 The <code class="idl">VisualViewport</code> Interface</a> </ol> <li> <a href="#events">13 Events</a> <ol class="toc"> <li><a href="#resizing-viewports">13.1 Resizing viewports</a> <li><a href="#scrolling-events">13.2 Scrolling</a> <li><a href="#event-summary">13.3 Event summary</a> </ol> <li><a href="#post-layout-snapshot">14 Post-Layout State Snapshotting</a> <li><a href="#priv-sec">15 Security and Privacy Considerations</a> <li> <a href="#changes">16 Changes</a> <ol class="toc"> <li><a href="#changes-from-2022-07-07"> Changes From 07 July 2022</a> <li><a href="#changes-from-2022-06-22"> Changes From 22 June 2022</a> <li><a href="#changes-from-2020-10-19"> Changes From 19 October 2020</a> <li><a href="#changes-from-2020-01-31"> Changes From 31 January 2020</a> <li><a href="#changes-from-2013-12-17"> Changes From 17 December 2013 To 31 January 2020</a> <li><a href="#changes-from-2011-08-04"> Changes From 4 August 2011 To 17 December 2013</a> </ol> <li><a href="#acks">17 Acknowledgements</a> <li> <a href="#w3c-conformance"> Conformance</a> <ol class="toc"> <li><a href="#w3c-conventions"> Document conventions</a> <li><a href="#w3c-conformance-classes"> Conformance classes</a> <li> <a href="#w3c-partial"> Partial implementations</a> <ol class="toc"> <li><a href="#w3c-conform-future-proofing"> Implementations of Unstable and Proprietary Features</a> </ol> <li><a href="#w3c-testing"> Non-experimental implementations</a> </ol> <li> <a href="#index"> Index</a> <ol class="toc"> <li><a href="#index-defined-here"> Terms defined by this specification</a> <li><a href="#index-defined-elsewhere"> Terms defined by reference</a> </ol> <li> <a href="#references"> References</a> <ol class="toc"> <li><a href="#normative"> Normative References</a> <li><a href="#informative"> Informative References</a> </ol> <li><a href="#idl-index"> IDL Index</a> <li><a href="#issues-index"> Issues Index</a> </ol> </nav> <main> <script async data-file-issue-url="https://github.com/w3c/csswg-drafts/issues/new?title=%5Bcssom-view%5D%20" src="https://resources.whatwg.org/file-issue.js"></script> <h2 class="heading settled" data-level="1" id="background">1. Background<a class="self-link" href="#background"></a></h2> Many of the features defined in this specification have been supported by browsers for a long period of time. The goal of this specification is to define these features in such a way that they can be implemented by all browsers in an interoperable manner. The specification also defines a some new features which allow for scroll customization. <h2 class="heading settled" data-level="2" id="terminology">2. Terminology<a class="self-link" href="#terminology"></a></h2> Terminology used in this specification is from DOM, CSSOM and HTML. <a data-link-type="biblio" href="#biblio-dom" title="DOM Standard">[DOM]</a> <a data-link-type="biblio" href="#biblio-cssom" title="CSS Object Model (CSSOM)">[CSSOM]</a> <a data-link-type="biblio" href="#biblio-html" title="HTML Standard">[HTML]</a> An element <var>body</var> (which will be <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/dom.html#the-body-element-2" id="ref-for-the-body-element-2">the <code>body</code> element</a>) is <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="potentially-scrollable">potentially scrollable</dfn> if all of the following conditions are true: <ul> <li data-md> <var>body</var> has an associated <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#box" id="ref-for-box">box</a>. <li data-md> <var>body</var>’s <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#parent-element" id="ref-for-parent-element">parent element</a>’s computed value of the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-overflow-3/#propdef-overflow-x" id="ref-for-propdef-overflow-x">overflow-x</a> or <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-overflow-3/#propdef-overflow-y" id="ref-for-propdef-overflow-y">overflow-y</a> properties is neither <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-overflow-3/#valdef-overflow-visible" id="ref-for-valdef-overflow-visible">visible</a> nor <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-overflow-3/#valdef-overflow-clip" id="ref-for-valdef-overflow-clip">clip</a>. <li data-md> <var>body</var>’s computed value of the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-overflow-3/#propdef-overflow-x" id="ref-for-propdef-overflow-x①">overflow-x</a> or <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-overflow-3/#propdef-overflow-y" id="ref-for-propdef-overflow-y①">overflow-y</a> properties is neither <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-overflow-3/#valdef-overflow-visible" id="ref-for-valdef-overflow-visible①">visible</a> nor <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-overflow-3/#valdef-overflow-clip" id="ref-for-valdef-overflow-clip①">clip</a>. </ul> Note: A <code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/sections.html#the-body-element" id="ref-for-the-body-element">body</a></code> element that is <a data-link-type="dfn" href="#potentially-scrollable" id="ref-for-potentially-scrollable">potentially scrollable</a> might not have a <a data-link-type="dfn" href="#scrolling-box" id="ref-for-scrolling-box">scrolling box</a>. For instance, it could have a used value of <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-overflow-3/#propdef-overflow" id="ref-for-propdef-overflow">overflow</a> being <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-overflow-3/#valdef-overflow-auto" id="ref-for-valdef-overflow-auto">auto</a> but not have its content overflowing its content area. A <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="scrolling-box">scrolling box</dfn> of a <a data-link-type="dfn" href="https://drafts.csswg.org/css2/#viewport%E2%91%A0" id="ref-for-viewport%E2%91%A0">viewport</a> or element has two <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="overflow-directions">overflow directions</dfn>, which are the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#block-end" id="ref-for-block-end">block-end</a> and <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#inline-end" id="ref-for-inline-end">inline-end</a> directions for that viewport or element. Note that the initial scroll position might not be aligned with the <a data-link-type="dfn" href="#scrolling-area-origin" id="ref-for-scrolling-area-origin">scrolling area origin</a> depending on the <a data-link-type="dfn" href="https://drafts.csswg.org/css-align-3/#content-distribution-properties" id="ref-for-content-distribution-properties">content-distribution properties</a>, see <a href="https://drafts.csswg.org/css-align-3/#overflow-scroll-position"><cite>CSS Box Alignment 3</cite> § 5.3 Overflow and Scroll Positions</a>. The term <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="scrolling-area">scrolling area</dfn> refers to a box of a <a data-link-type="dfn" href="https://drafts.csswg.org/css2/#viewport%E2%91%A0" id="ref-for-viewport%E2%91%A0①">viewport</a> or an element that has the following edges, depending on the viewport’s or element’s <a data-link-type="dfn" href="#scrolling-box" id="ref-for-scrolling-box①">scrolling box’s</a> <a data-link-type="dfn" href="#overflow-directions" id="ref-for-overflow-directions">overflow directions</a>. <table class="complex data"> <thead> <tr> <th>If the <a data-link-type="dfn" href="#overflow-directions" id="ref-for-overflow-directions①">overflow directions</a> are… <th>For a <a data-link-type="dfn" href="https://drafts.csswg.org/css2/#viewport%E2%91%A0" id="ref-for-viewport%E2%91%A0③">viewport</a> <th>For an element <tbody> <tr> <td>rightward and downward <td class="long"> <dl> <dt>top edge <dd>The top edge of the <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#initial-containing-block" id="ref-for-initial-containing-block">initial containing block</a>. <dt>right edge <dd>The right-most edge of the right edge of the <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#initial-containing-block" id="ref-for-initial-containing-block①">initial containing block</a> and the right <a data-link-type="dfn" href="https://drafts.csswg.org/css-box-4/#margin-edge" id="ref-for-margin-edge">margin edge</a> of all of the <a data-link-type="dfn" href="https://drafts.csswg.org/css2/#viewport%E2%91%A0" id="ref-for-viewport%E2%91%A0④">viewport’s</a> descendants' boxes. <dt>bottom edge <dd>The bottom-most edge of the bottom edge of the <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#initial-containing-block" id="ref-for-initial-containing-block②">initial containing block</a> and the bottom <a data-link-type="dfn" href="https://drafts.csswg.org/css-box-4/#margin-edge" id="ref-for-margin-edge①">margin edge</a> of all of the <a data-link-type="dfn" href="https://drafts.csswg.org/css2/#viewport%E2%91%A0" id="ref-for-viewport%E2%91%A0⑤">viewport’s</a> descendants' boxes. <dt>left edge <dd>The left edge of the <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#initial-containing-block" id="ref-for-initial-containing-block③">initial containing block</a>. </dl> <td class="long"> <dl> <dt>top edge <dd>The element’s top <a data-link-type="dfn" href="https://drafts.csswg.org/css-box-4/#padding-edge" id="ref-for-padding-edge">padding edge</a>. <dt>right edge <dd>The right-most edge of the element’s right <a data-link-type="dfn" href="https://drafts.csswg.org/css-box-4/#padding-edge" id="ref-for-padding-edge①">padding edge</a> and the right <a data-link-type="dfn" href="https://drafts.csswg.org/css-box-4/#margin-edge" id="ref-for-margin-edge②">margin edge</a> of all of the element’s descendants' boxes, excluding boxes that have an ancestor of the element as their containing block. <dt>bottom edge <dd>The bottom-most edge of the element’s bottom <a data-link-type="dfn" href="https://drafts.csswg.org/css-box-4/#padding-edge" id="ref-for-padding-edge②">padding edge</a> and the bottom <a data-link-type="dfn" href="https://drafts.csswg.org/css-box-4/#margin-edge" id="ref-for-margin-edge③">margin edge</a> of all of the element’s descendants' boxes, excluding boxes that have an ancestor of the element as their containing block. <dt>left edge <dd>The element’s left <a data-link-type="dfn" href="https://drafts.csswg.org/css-box-4/#padding-edge" id="ref-for-padding-edge③">padding edge</a>. </dl> <tr> <td>leftward and downward <td class="long"> <dl> <dt>top edge <dd>The top edge of the <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#initial-containing-block" id="ref-for-initial-containing-block④">initial containing block</a>. <dt>right edge <dd>The right edge of the <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#initial-containing-block" id="ref-for-initial-containing-block⑤">initial containing block</a>. <dt>bottom edge <dd>The bottom-most edge of the bottom edge of the <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#initial-containing-block" id="ref-for-initial-containing-block⑥">initial containing block</a> and the bottom <a data-link-type="dfn" href="https://drafts.csswg.org/css-box-4/#margin-edge" id="ref-for-margin-edge④">margin edge</a> of all of the <a data-link-type="dfn" href="https://drafts.csswg.org/css2/#viewport%E2%91%A0" id="ref-for-viewport%E2%91%A0⑥">viewport’s</a> descendants' boxes. <dt>left edge <dd>The left-most edge of the left edge of the <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#initial-containing-block" id="ref-for-initial-containing-block⑦">initial containing block</a> and the left <a data-link-type="dfn" href="https://drafts.csswg.org/css-box-4/#margin-edge" id="ref-for-margin-edge⑤">margin edge</a> of all of the <a data-link-type="dfn" href="https://drafts.csswg.org/css2/#viewport%E2%91%A0" id="ref-for-viewport%E2%91%A0⑦">viewport’s</a> descendants' boxes. </dl> <td class="long"> <dl> <dt>top edge <dd>The element’s top <a data-link-type="dfn" href="https://drafts.csswg.org/css-box-4/#padding-edge" id="ref-for-padding-edge④">padding edge</a>. <dt>right edge <dd>The element’s right <a data-link-type="dfn" href="https://drafts.csswg.org/css-box-4/#padding-edge" id="ref-for-padding-edge⑤">padding edge</a>. <dt>bottom edge <dd>The bottom-most edge of the element’s bottom <a data-link-type="dfn" href="https://drafts.csswg.org/css-box-4/#padding-edge" id="ref-for-padding-edge⑥">padding edge</a> and the bottom <a data-link-type="dfn" href="https://drafts.csswg.org/css-box-4/#margin-edge" id="ref-for-margin-edge⑥">margin edge</a> of all of the element’s descendants' boxes, excluding boxes that have an ancestor of the element as their containing block. <dt>left edge <dd>The left-most edge of the element’s left <a data-link-type="dfn" href="https://drafts.csswg.org/css-box-4/#padding-edge" id="ref-for-padding-edge⑦">padding edge</a> and the left <a data-link-type="dfn" href="https://drafts.csswg.org/css-box-4/#margin-edge" id="ref-for-margin-edge⑦">margin edge</a> of all of the element’s descendants' boxes, excluding boxes that have an ancestor of the element as their containing block. </dl> <tr> <td>leftward and upward <td class="long"> <dl> <dt>top edge <dd>The top-most edge of the top edge of the <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#initial-containing-block" id="ref-for-initial-containing-block⑧">initial containing block</a> and the top <a data-link-type="dfn" href="https://drafts.csswg.org/css-box-4/#margin-edge" id="ref-for-margin-edge⑧">margin edge</a> of all of the <a data-link-type="dfn" href="https://drafts.csswg.org/css2/#viewport%E2%91%A0" id="ref-for-viewport%E2%91%A0⑧">viewport’s</a> descendants' boxes. <dt>right edge <dd>The right edge of the <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#initial-containing-block" id="ref-for-initial-containing-block⑨">initial containing block</a>. <dt>bottom edge <dd>The bottom edge of the <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#initial-containing-block" id="ref-for-initial-containing-block①⓪">initial containing block</a>. <dt>left edge <dd>The left-most edge of the left edge of the <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#initial-containing-block" id="ref-for-initial-containing-block①①">initial containing block</a> and the left <a data-link-type="dfn" href="https://drafts.csswg.org/css-box-4/#margin-edge" id="ref-for-margin-edge⑨">margin edge</a> of all of the <a data-link-type="dfn" href="https://drafts.csswg.org/css2/#viewport%E2%91%A0" id="ref-for-viewport%E2%91%A0⑨">viewport’s</a> descendants' boxes. </dl> <td class="long"> <dl> <dt>top edge <dd>The top-most edge of the element’s top <a data-link-type="dfn" href="https://drafts.csswg.org/css-box-4/#padding-edge" id="ref-for-padding-edge⑧">padding edge</a> and the top <a data-link-type="dfn" href="https://drafts.csswg.org/css-box-4/#margin-edge" id="ref-for-margin-edge①⓪">margin edge</a> of all of the element’s descendants' boxes, excluding boxes that have an ancestor of the element as their containing block. <dt>right edge <dd>The element’s right <a data-link-type="dfn" href="https://drafts.csswg.org/css-box-4/#padding-edge" id="ref-for-padding-edge⑨">padding edge</a>. <dt>bottom edge <dd>The element’s bottom <a data-link-type="dfn" href="https://drafts.csswg.org/css-box-4/#padding-edge" id="ref-for-padding-edge①⓪">padding edge</a>. <dt>left edge <dd>The left-most edge of the element’s left <a data-link-type="dfn" href="https://drafts.csswg.org/css-box-4/#padding-edge" id="ref-for-padding-edge①①">padding edge</a> and the left <a data-link-type="dfn" href="https://drafts.csswg.org/css-box-4/#margin-edge" id="ref-for-margin-edge①①">margin edge</a> of all of the element’s descendants' boxes, excluding boxes that have an ancestor of the element as their containing block. </dl> <tr> <td>rightward and upward <td class="long"> <dl> <dt>top edge <dd>The top-most edge of the top edge of the <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#initial-containing-block" id="ref-for-initial-containing-block①②">initial containing block</a> and the top <a data-link-type="dfn" href="https://drafts.csswg.org/css-box-4/#margin-edge" id="ref-for-margin-edge①②">margin edge</a> of all of the <a data-link-type="dfn" href="https://drafts.csswg.org/css2/#viewport%E2%91%A0" id="ref-for-viewport%E2%91%A0①⓪">viewport’s</a> descendants' boxes. <dt>right edge <dd>The right-most edge of the right edge of the <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#initial-containing-block" id="ref-for-initial-containing-block①③">initial containing block</a> and the right <a data-link-type="dfn" href="https://drafts.csswg.org/css-box-4/#margin-edge" id="ref-for-margin-edge①③">margin edge</a> of all of the <a data-link-type="dfn" href="https://drafts.csswg.org/css2/#viewport%E2%91%A0" id="ref-for-viewport%E2%91%A0①①">viewport’s</a> descendants' boxes. <dt>bottom edge <dd>The bottom edge of the <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#initial-containing-block" id="ref-for-initial-containing-block①④">initial containing block</a>. <dt>left edge <dd>The left edge of the <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#initial-containing-block" id="ref-for-initial-containing-block①⑤">initial containing block</a>. </dl> <td class="long"> <dl> <dt>top edge <dd>The top-most edge of the element’s top <a data-link-type="dfn" href="https://drafts.csswg.org/css-box-4/#padding-edge" id="ref-for-padding-edge①②">padding edge</a> and the top <a data-link-type="dfn" href="https://drafts.csswg.org/css-box-4/#margin-edge" id="ref-for-margin-edge①④">margin edge</a> of all of the element’s descendants' boxes, excluding boxes that have an ancestor of the element as their containing block. <dt>right edge <dd>The right-most edge of the element’s right <a data-link-type="dfn" href="https://drafts.csswg.org/css-box-4/#padding-edge" id="ref-for-padding-edge①③">padding edge</a> and the right <a data-link-type="dfn" href="https://drafts.csswg.org/css-box-4/#margin-edge" id="ref-for-margin-edge①⑤">margin edge</a> of all of the element’s descendants' boxes, excluding boxes that have an ancestor of the element as their containing block. <dt>bottom edge <dd>The element’s bottom <a data-link-type="dfn" href="https://drafts.csswg.org/css-box-4/#padding-edge" id="ref-for-padding-edge①④">padding edge</a>. <dt>left edge <dd>The element’s left <a data-link-type="dfn" href="https://drafts.csswg.org/css-box-4/#padding-edge" id="ref-for-padding-edge①⑤">padding edge</a>. </dl> </table> The <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="scrolling area origin" data-noexport id="scrolling-area-origin">origin</dfn> of a <a data-link-type="dfn" href="#scrolling-area" id="ref-for-scrolling-area">scrolling area</a> is the origin of the <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#initial-containing-block" id="ref-for-initial-containing-block①⑥">initial containing block</a> if the scrolling area is a <a data-link-type="dfn" href="https://drafts.csswg.org/css2/#viewport%E2%91%A0" id="ref-for-viewport%E2%91%A0①②">viewport</a>, and otherwise the top left padding edge of the element when the element has its default scroll position. The x-coordinate increases rightwards, and the y-coordinate increases downwards. The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="beginning-edges">beginning edges</dfn> of a particular set of edges of a box or element are the following edges: <dl class="switch"> <dt>If the <a data-link-type="dfn" href="#overflow-directions" id="ref-for-overflow-directions②">overflow directions</a> are rightward and downward <dd>The top and left edges. <dt>If the <a data-link-type="dfn" href="#overflow-directions" id="ref-for-overflow-directions③">overflow directions</a> are leftward and downward <dd>The top and right edges. <dt>If the <a data-link-type="dfn" href="#overflow-directions" id="ref-for-overflow-directions④">overflow directions</a> are leftward and upward <dd>The bottom and right edges. <dt>If the <a data-link-type="dfn" href="#overflow-directions" id="ref-for-overflow-directions⑤">overflow directions</a> are rightward and upward <dd>The bottom and left edges. </dl> The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="ending-edges">ending edges</dfn> of a particular set of edges of a box or element are the following edges: <dl class="switch"> <dt>If the <a data-link-type="dfn" href="#overflow-directions" id="ref-for-overflow-directions⑥">overflow directions</a> are rightward and downward <dd>The bottom and right edges. <dt>If the <a data-link-type="dfn" href="#overflow-directions" id="ref-for-overflow-directions⑦">overflow directions</a> are leftward and downward <dd>The bottom and left edges. <dt>If the <a data-link-type="dfn" href="#overflow-directions" id="ref-for-overflow-directions⑧">overflow directions</a> are leftward and upward <dd>The top and left edges. <dt>If the <a data-link-type="dfn" href="#overflow-directions" id="ref-for-overflow-directions⑨">overflow directions</a> are rightward and upward <dd>The top and right edges. </dl> The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="visual-viewport">visual viewport</dfn> is a kind of <a data-link-type="dfn" href="https://drafts.csswg.org/css2/#viewport%E2%91%A0" id="ref-for-viewport%E2%91%A0①③">viewport</a> whose <a data-link-type="dfn" href="#scrolling-area" id="ref-for-scrolling-area②">scrolling area</a> is another viewport, called the <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="layout-viewport">layout viewport</dfn>. In addition to scrolling, the <a data-link-type="dfn" href="#visual-viewport" id="ref-for-visual-viewport">visual viewport</a> may also apply a scale transform to its <a data-link-type="dfn" href="#layout-viewport" id="ref-for-layout-viewport">layout viewport</a>. This transform is applied to the <a data-link-type="dfn" href="https://drafts.csswg.org/css2/#canvas" id="ref-for-canvas">canvas</a> of the layout viewport and does not affect its internal coordinate space. Note: The scale transform of the visual viewport is often referred to as "pinch-zoom". Conceptually, this transform changes the size of the CSS <a data-link-type="dfn" href="https://drafts.csswg.org/css-values-4/#reference-pixel" id="ref-for-reference-pixel">reference pixel</a> but changes the size of the layout viewport proportionally so that it does not cause reflow of the page’s contents. The magnitude of the scale transform is known as the <a data-link-type="dfn" href="#visual-viewport" id="ref-for-visual-viewport①">visual viewport</a>’s <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="scale-factor">scale factor</dfn>. <div class="example paused" id="example-vvanimation"> <a class="self-link" href="#example-vvanimation"></a> This animation shows an example of a zoomed in visual viewport being "panned" around (for example, by a user performing a touch drag). The page is scaled so that the layout viewport is larger than the visual viewport. A scroll delta is applied to the visual viewport first. When the visual viewport is at its extent, scroll delta will be applied to the layout viewport. This behavior is implemented by the <a data-link-type="dfn" href="#viewport-perform-a-scroll" id="ref-for-viewport-perform-a-scroll">perform a scroll</a> steps. <svg height="400" width="300"> <rect fill="white" height="100%" stroke="grey" stroke-width="3" width="100%"></rect> <text fill="grey" font-family="Sans" font-size="25" x="10" y="30"> Document </text> <g id="lv"> <rect fill="none" height="200" stroke="blue" stroke-width="4" width="296" x="2" y="2"></rect> <text fill="blue" font-family="Sans" font-size="15" x="10" y="20"> Layout Viewport </text> </g> <g id="vv"> <rect fill="none" height="100" stroke="red" stroke-width="4" width="148" x="2" y="2"></rect> <text fill="red" font-family="Sans" font-size="15" x="10" y="60"> Visual Viewport </text> </g> </svg> <button id="vvanimationBtn">Toggle Animation</button> <script> document.getElementById('vvanimationBtn').onclick = () => { document.getElementById('example-vvanimation').classList.toggle('paused'); }; </script> </div> The <code class="idl"><a data-link-type="idl" href="#visualviewport" id="ref-for-visualviewport">VisualViewport</a></code> object has an <dfn class="dfn-paneled" data-dfn-for="visualviewport" data-dfn-type="dfn" data-noexport id="visualviewport-associated-document">associated document</dfn>, which is a <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document" id="ref-for-document">Document</a></code> object. It is the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/nav-history-apis.html#concept-document-window" id="ref-for-concept-document-window">associated document</a> of the owner <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/nav-history-apis.html#window" id="ref-for-window">Window</a></code> of <code class="idl"><a data-link-type="idl" href="#visualviewport" id="ref-for-visualviewport①">VisualViewport</a></code>. The <a data-link-type="dfn" href="#layout-viewport" id="ref-for-layout-viewport②">layout viewport</a> is the owner <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/nav-history-apis.html#window" id="ref-for-window①">Window</a></code>’s <a data-link-type="dfn" href="https://drafts.csswg.org/css2/#viewport%E2%91%A0" id="ref-for-viewport%E2%91%A0①⑤">viewport</a>. For the purpose of the requirements in this specification, elements that have a 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 that is <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-display-4/#valdef-display-table-column" id="ref-for-valdef-display-table-column">table-column</a> or <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-display-4/#valdef-display-table-column-group" id="ref-for-valdef-display-table-column-group">table-column-group</a> must be considered to have an associated <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#box" id="ref-for-box①">box</a> (the column or column group, respectively). The term <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="svg-layout-box">SVG layout box</dfn> refers to a <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#box" id="ref-for-box②">box</a> generated by an SVG element which does not correspond to a CSS-defined <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> type. (Such as the box generated by a <code><a data-link-type="element" href="https://svgwg.org/svg2-draft/shapes.html#elementdef-rect" id="ref-for-elementdef-rect">rect</a></code> element.) The term <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="transforms">transforms</dfn> refers to SVG transforms and CSS transforms. <a data-link-type="biblio" href="#biblio-svg11" title="Scalable Vector Graphics (SVG) 1.1 (Second Edition)">[SVG11]</a> <a data-link-type="biblio" href="#biblio-css-transforms-1" title="CSS Transforms Module Level 1">[CSS-TRANSFORMS-1]</a> When a method or an attribute is said to call another method or attribute, the user agent must invoke its internal API for that attribute or method so that e.g. the author can’t change the behavior by overriding attributes or methods with custom properties or functions in ECMAScript. Unless otherwise stated, all string comparisons use <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#string-is" id="ref-for-string-is">is</a>. <h3 class="heading settled" data-level="2.1" id="css-pixels">2.1. CSS pixels<a class="self-link" href="#css-pixels"></a></h3> All coordinates and dimensions for the APIs defined in this specification are in <a class="css" data-link-type="value" href="https://drafts.csswg.org/css-values-4/#px" id="ref-for-px">CSS pixels</a>, unless otherwise specified. <a data-link-type="biblio" href="#biblio-css-values" title="CSS Values and Units Module Level 3">[CSS-VALUES]</a> Note: This does not apply to e.g. <code class="idl"><a data-link-type="idl" href="#dom-window-matchmedia" id="ref-for-dom-window-matchmedia">matchMedia()</a></code> as the units are explicitly given there. <h3 class="heading settled" data-level="2.2" id="zooming">2.2. Zooming<a class="self-link" href="#zooming"></a></h3> There are two kinds of zoom, <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="page-zoom">page zoom</dfn> which affects the size of the initial viewport, and the visual viewport <a data-link-type="dfn" href="#scale-factor" id="ref-for-scale-factor">scale factor</a> which acts like a magnifying glass and does not affect the initial viewport or actual viewport. <a data-link-type="biblio" href="#biblio-css-device-adapt" title="CSS Viewport Module Level 1">[CSS-DEVICE-ADAPT]</a> Note: The "scale factor" is often referred to as "pinch-zoom"; however, it can be affected through means other than pinch-zooming. e.g. The user agent may zooms in on a focused input element to make it legible. <h3 class="heading settled" data-level="2.3" id="web-exposed-screen-information">2.3. Web-exposed screen information<a class="self-link" href="#web-exposed-screen-information"></a></h3> User agents may choose to hide information about the screen of the output device, in order to protect the user’s privacy. In order to do so in a consistent manner across APIs, this specification defines the following terms, each having a width and a height, the origin being the top left corner, and the x- and y-coordinates increase rightwards and downwards, respectively. The <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="web-exposed-screen-area">Web-exposed screen area</dfn> is one of the following: <ul> <li data-md> The area of the output device, in <a class="css" data-link-type="value" href="https://drafts.csswg.org/css-values-4/#px" id="ref-for-px①">CSS pixels</a>. <li data-md> The area of the <a data-link-type="dfn" href="https://drafts.csswg.org/css2/#viewport%E2%91%A0" id="ref-for-viewport%E2%91%A0①⑥">viewport</a>, in <a class="css" data-link-type="value" href="https://drafts.csswg.org/css-values-4/#px" id="ref-for-px②">CSS pixels</a>. </ul> The <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="web-exposed-available-screen-area">Web-exposed available screen area</dfn> is one of the following: <ul> <li data-md> The available area of the rendering surface of the output device, in <a class="css" data-link-type="value" href="https://drafts.csswg.org/css-values-4/#px" id="ref-for-px③">CSS pixels</a>. <li data-md> The area of the output device, in <a class="css" data-link-type="value" href="https://drafts.csswg.org/css-values-4/#px" id="ref-for-px④">CSS pixels</a>. <li data-md> The area of the <a data-link-type="dfn" href="https://drafts.csswg.org/css2/#viewport%E2%91%A0" id="ref-for-viewport%E2%91%A0①⑦">viewport</a>, in <a class="css" data-link-type="value" href="https://drafts.csswg.org/css-values-4/#px" id="ref-for-px⑤">CSS pixels</a>. </ul> <h2 class="heading settled" data-level="3" id="common-infrastructure">3. Common Infrastructure<a class="self-link" href="#common-infrastructure"></a></h2> This specification depends on the WHATWG Infra standard. <a data-link-type="biblio" href="#biblio-infra" title="Infra Standard">[INFRA]</a> <h3 class="heading settled" data-level="3.1" id="scrolling">3.1. Scrolling<a class="self-link" href="#scrolling"></a></h3> <div class="algorithm" data-algorithm="perform a scroll of a box"> When a user agent is to <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="perform-a-scroll">perform a scroll</dfn> of a <a data-link-type="dfn" href="#scrolling-box" id="ref-for-scrolling-box②">scrolling box</a> <var>box</var>, to a given position <var>position</var>, an associated element or <a data-link-type="dfn" href="https://drafts.csswg.org/selectors-4/#pseudo-element" id="ref-for-pseudo-element">pseudo-element</a> <var>element</var> and optionally a scroll behavior <var>behavior</var> (which is "<code>auto</code>" if omitted), the following steps must be run: <ol> <li><a data-link-type="dfn" href="#smooth-scroll-aborted" id="ref-for-smooth-scroll-aborted">Abort</a> any ongoing <a data-link-type="dfn" href="#concept-smooth-scroll" id="ref-for-concept-smooth-scroll">smooth scroll</a> for <var>box</var>. <li> If the user agent honors the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-overflow-3/#propdef-scroll-behavior" id="ref-for-propdef-scroll-behavior">scroll-behavior</a> property and one of the following are true: <ul> <li><var>behavior</var> is "<code>auto</code>" and <var>element</var> is not null and its computed value of the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-overflow-3/#propdef-scroll-behavior" id="ref-for-propdef-scroll-behavior①">scroll-behavior</a> property is <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-overflow-3/#valdef-scroll-behavior-smooth" id="ref-for-valdef-scroll-behavior-smooth">smooth</a> <li><var>behavior</var> is <code>smooth</code> </ul> ...then perform a <a data-link-type="dfn" href="#concept-smooth-scroll" id="ref-for-concept-smooth-scroll①">smooth scroll</a> of <var>box</var> to <var>position</var>. Once the position has finished updating, emit the <a class="idl-code" data-link-type="event" href="#eventdef-document-scrollend" id="ref-for-eventdef-document-scrollend">scrollend</a> event. Otherwise, perform an <a data-link-type="dfn" href="#concept-instant-scroll" id="ref-for-concept-instant-scroll">instant scroll</a> of <var>box</var> to <var>position</var>. After an instant scroll emit the scrollend event. Note: <code>behavior: "instant"</code> always performs an <a data-link-type="dfn" href="#concept-instant-scroll" id="ref-for-concept-instant-scroll②">instant scroll</a> by this algorithm. Note: If the scroll position did not change as a result of the user interaction or programmatic invocation, where no translations were applied as a result, then no <a class="idl-code" data-link-type="event" href="#eventdef-document-scrollend" id="ref-for-eventdef-document-scrollend②">scrollend</a> event fires because no scrolling occurred. </ol> </div> <div class="algorithm" data-algorithm="perform a scroll of a viewport"> When a user agent is to <dfn class="dfn-paneled" data-dfn-for="viewport" data-dfn-type="dfn" data-export id="viewport-perform-a-scroll">perform a scroll</dfn> of a <a data-link-type="dfn" href="https://drafts.csswg.org/css2/#viewport%E2%91%A0" id="ref-for-viewport%E2%91%A0①⑧">viewport</a> to a given position <var>position</var> and optionally a scroll behavior <var>behavior</var> (which is "<code>auto</code>" if omitted) it must perform a coordinated viewport scroll by following these steps: <ol> <li data-md> Let <var>doc</var> be the <a data-link-type="dfn" href="https://drafts.csswg.org/css2/#viewport%E2%91%A0" id="ref-for-viewport%E2%91%A0①⑨">viewport’s</a> associated <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document" id="ref-for-document①">Document</a></code>. <li data-md> Let <var>vv</var> be the <code class="idl"><a data-link-type="idl" href="#visualviewport" id="ref-for-visualviewport②">VisualViewport</a></code> whose <a data-link-type="dfn" href="#visualviewport-associated-document" id="ref-for-visualviewport-associated-document">associated document</a> is <var>doc</var>. <li data-md> Let <var>maxX</var> be the difference between <a data-link-type="dfn" href="https://drafts.csswg.org/css2/#viewport%E2%91%A0" id="ref-for-viewport%E2%91%A0②⓪">viewport</a>’s <a data-link-type="dfn" href="#scrolling-box" id="ref-for-scrolling-box③">scrolling box</a>’s width and the value of <var>vv</var>’s <a class="idl-code" data-link-type="attribute" href="#dom-visualviewport-width" id="ref-for-dom-visualviewport-width">width</a> attribute. <li data-md> Let <var>maxY</var> be the difference between <a data-link-type="dfn" href="https://drafts.csswg.org/css2/#viewport%E2%91%A0" id="ref-for-viewport%E2%91%A0②①">viewport</a>’s <a data-link-type="dfn" href="#scrolling-box" id="ref-for-scrolling-box④">scrolling box</a>’s height and the value of <var>vv</var>’s <a class="idl-code" data-link-type="attribute" href="#dom-visualviewport-height" id="ref-for-dom-visualviewport-height">height</a> attribute. <li data-md> Let <var>dx</var> be the horizontal component of <var>position</var> - the value <var>vv</var>’s <a class="idl-code" data-link-type="attribute" href="#dom-visualviewport-pageleft" id="ref-for-dom-visualviewport-pageleft">pageLeft</a> attribute <li data-md> Let <var>dy</var> be the vertical component of <var>position</var> - the value of <var>vv</var>’s <a class="idl-code" data-link-type="attribute" href="#dom-visualviewport-pagetop" id="ref-for-dom-visualviewport-pagetop">pageTop</a> attribute <li data-md> Let <var>visual x</var> be the value of <var>vv</var>’s <a class="idl-code" data-link-type="attribute" href="#dom-visualviewport-offsetleft" id="ref-for-dom-visualviewport-offsetleft">offsetLeft</a> attribute. <li data-md> Let <var>visual y</var> be the value of <var>vv</var>’s <a class="idl-code" data-link-type="attribute" href="#dom-visualviewport-offsettop" id="ref-for-dom-visualviewport-offsettop">offsetTop</a> attribute. <li data-md> Let <var>visual dx</var> be min(<var>maxX</var>, max(0, <var>visual x</var> + <var>dx</var>)) - <var>visual x</var>. <li data-md> Let <var>visual dy</var> be min(<var>maxY</var>, max(0, <var>visual y</var> + <var>dy</var>)) - <var>visual y</var>. <li data-md> Let <var>layout dx</var> be <var>dx</var> - <var>visual dx</var> <li data-md> Let <var>layout dy</var> be <var>dy</var> - <var>visual dy</var> <li data-md> Let <var>element</var> be <var>doc</var>’s root element if there is one, null otherwise. <li data-md> <a data-link-type="dfn" href="#perform-a-scroll" id="ref-for-perform-a-scroll">Perform a scroll</a> of the <a data-link-type="dfn" href="https://drafts.csswg.org/css2/#viewport%E2%91%A0" id="ref-for-viewport%E2%91%A0②②">viewport</a>’s <a data-link-type="dfn" href="#scrolling-box" id="ref-for-scrolling-box⑤">scrolling box</a> to its current scroll position + (<var>layout dx</var>, <var>layout dy</var>) with <var>element</var> as the associated element, and <var>behavior</var> as the scroll behavior. <li data-md> <a data-link-type="dfn" href="#perform-a-scroll" id="ref-for-perform-a-scroll①">Perform a scroll</a> of <var>vv</var>’s <a data-link-type="dfn" href="#scrolling-box" id="ref-for-scrolling-box⑥">scrolling box</a> to its current scroll position + (<var>visual dx</var>, <var>visual dy</var>) with <var>element</var> as the associated element, and <var>behavior</var> as the scroll behavior. </ol> Note: Conceptually, the visual viewport is scrolled until it "bumps up" against the layout viewport edge and then "pushes" the layout viewport by applying the scroll delta to the layout viewport. However, the scrolls in the steps above are computed ahead of time and applied in the opposite order so that the layout viewport is scrolled before the visual viewport. This is done for historical reasons to ensure consistent scroll event ordering. See the <a href="#example-vvanimation">example above</a> for a visual depiction. </div> <div class="example" id="example-ed07146f"><a class="self-link" href="#example-ed07146f"></a> The user pinch-zooms into the document and ticks their mouse wheel, requesting the user agent scroll the document down by 50px. Because the document is pinch-zoomed in, the visual viewport has 20px of room to scroll. The user agent distributes the scroll by scrolling the visual viewport down by 20px and the layout viewport by 30px. </div> <div class="example" id="example-cb4be61c"><a class="self-link" href="#example-cb4be61c"></a> The user is viewing a document in a mobile user agent. The document focuses an offscreen text input element, showing a virtual keyboard which shrinks the visual viewport. The user agent must now bring the element into view in the visual viewport. The user agent scrolls the layout viewport so that the element is visible within it, then the visual viewport so that the element is visible to the user. </div> Scroll is <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="scroll completed" data-noexport id="scroll-completed">completed</dfn> when the scroll position has no more pending updates or translations and the user has completed their gesture. Scroll position updates include smooth or instant mouse wheel scrolling, keyboard scrolling, scroll-snap events, or other APIs and gestures which cause the scroll position to update and possibly interpolate. User gestures like touch panning or trackpad scrolling aren’t complete until pointers or keys have released. When a user agent is to perform a <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="concept-smooth-scroll">smooth scroll</dfn> of a <a data-link-type="dfn" href="#scrolling-box" id="ref-for-scrolling-box⑦">scrolling box</a> <var>box</var> to <var>position</var>, it must update the scroll position of <var>box</var> in a user-agent-defined fashion over a user-agent-defined amount of time. When the scroll is <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="smooth scroll completed" id="smooth-scroll-completed">completed</dfn>, the scroll position of <var>box</var> must be <var>position</var>. The scroll can also be <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="smooth scroll aborted" id="smooth-scroll-aborted">aborted</dfn>, either by an algorithm or by the user. When a user agent is to perform an <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="concept-instant-scroll">instant scroll</dfn> of a <a data-link-type="dfn" href="#scrolling-box" id="ref-for-scrolling-box⑧">scrolling box</a> <var>box</var> to <var>position</var>, it must update the scroll position of <var>box</var> to <var>position</var>. To <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="scroll-to-the-beginning-of-the-document">scroll to the beginning of the document</dfn> for a document <var>document</var>, follow these steps: <ol> <li>Let <var>viewport</var> be the <a data-link-type="dfn" href="https://drafts.csswg.org/css2/#viewport%E2%91%A0" id="ref-for-viewport%E2%91%A0②③">viewport</a> that is associated with <var>document</var>. <li>Let <var>position</var> be the scroll position <var>viewport</var> would have by aligning the <a data-link-type="dfn" href="#beginning-edges" id="ref-for-beginning-edges">beginning edges</a> of the <a data-link-type="dfn" href="#scrolling-area" id="ref-for-scrolling-area③">scrolling area</a> with the beginning edges of <var>viewport</var>. <li>If <var>position</var> is the same as <var>viewport</var>’s current scroll position, and <var>viewport</var> does not have an ongoing <a data-link-type="dfn" href="#concept-smooth-scroll" id="ref-for-concept-smooth-scroll②">smooth scroll</a>, abort these steps. <li><a data-link-type="dfn" href="#viewport-perform-a-scroll" id="ref-for-viewport-perform-a-scroll①">Perform a scroll</a> of <var>viewport</var> to <var>position</var>, and <var>document</var>’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#root-element" id="ref-for-root-element">root element</a> as the associated element, if there is one, or null otherwise. </ol> Note: This algorithm is used when navigating to the <code>#top</code> fragment identifier, as defined in HTML. <a data-link-type="biblio" href="#biblio-html" title="HTML Standard">[HTML]</a> <h3 class="heading settled" data-level="3.2" id="webidl-values">3.2. WebIDL values<a class="self-link" href="#webidl-values"></a></h3> When asked to <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="normalize-non-finite-values">normalize non-finite values</dfn> for a value <var>x</var>, if <var>x</var> is one of the three special floating point literal values (<code>Infinity</code>, <code>-Infinity</code> or <code>NaN</code>), then <var>x</var> must be changed to the value <code>0</code>. <a data-link-type="biblio" href="#biblio-webidl" title="Web IDL Standard">[WEBIDL]</a> <h2 class="heading settled" data-level="4" id="extensions-to-the-window-interface">4. Extensions to the <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/nav-history-apis.html#window" id="ref-for-window②">Window</a></code> Interface<a class="self-link" href="#extensions-to-the-window-interface"></a></h2> <pre class="idl highlight def"><c- b>enum</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="enum" data-export id="enumdef-scrollbehavior"><code><c- g>ScrollBehavior</c-></code></dfn> { <dfn class="dfn-paneled idl-code" data-dfn-for="ScrollBehavior" data-dfn-type="enum-value" data-export id="dom-scrollbehavior-auto"><code><c- s>"auto"</c-></code></dfn>, <dfn class="dfn-paneled idl-code" data-dfn-for="ScrollBehavior" data-dfn-type="enum-value" data-export id="dom-scrollbehavior-instant"><code><c- s>"instant"</c-></code></dfn>, <dfn class="dfn-paneled idl-code" data-dfn-for="ScrollBehavior" data-dfn-type="enum-value" data-export id="dom-scrollbehavior-smooth"><code><c- s>"smooth"</c-></code></dfn> }; <c- b>dictionary</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="dictionary" data-export id="dictdef-scrolloptions"><code><c- g>ScrollOptions</c-></code></dfn> { <a data-link-type="idl-name" href="#enumdef-scrollbehavior" id="ref-for-enumdef-scrollbehavior"><c- n>ScrollBehavior</c-></a> <dfn class="dfn-paneled idl-code" data-default=""auto"" data-dfn-for="ScrollOptions" data-dfn-type="dict-member" data-export data-type="ScrollBehavior" id="dom-scrolloptions-behavior"><code><c- g>behavior</c-></code></dfn> = "auto"; }; <c- b>dictionary</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="dictionary" data-export id="dictdef-scrolltooptions"><code><c- g>ScrollToOptions</c-></code></dfn> : <a data-link-type="idl-name" href="#dictdef-scrolloptions" id="ref-for-dictdef-scrolloptions"><c- n>ScrollOptions</c-></a> { <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="ScrollToOptions" data-dfn-type="dict-member" data-export data-type="unrestricted double" id="dom-scrolltooptions-left"><code><c- g>left</c-></code></dfn>; <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="ScrollToOptions" data-dfn-type="dict-member" data-export data-type="unrestricted double" id="dom-scrolltooptions-top"><code><c- g>top</c-></code></dfn>; }; <c- b>partial</c-> <c- b>interface</c-> <a class="idl-code" data-link-type="interface" href="https://html.spec.whatwg.org/multipage/nav-history-apis.html#window" id="ref-for-window③"><c- g>Window</c-></a> { [<a class="idl-code" data-link-type="extended-attribute" href="https://webidl.spec.whatwg.org/#NewObject" id="ref-for-NewObject"><c- g>NewObject</c-></a>] <a data-link-type="idl-name" href="#mediaquerylist" id="ref-for-mediaquerylist"><c- n>MediaQueryList</c-></a> <a class="idl-code" data-link-type="method" href="#dom-window-matchmedia" id="ref-for-dom-window-matchmedia①"><c- g>matchMedia</c-></a>(<a data-link-type="idl-name" href="https://drafts.csswg.org/cssom-1/#cssomstring" id="ref-for-cssomstring"><c- n>CSSOMString</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="Window/matchMedia(query)" data-dfn-type="argument" data-export id="dom-window-matchmedia-query-query"><code><c- g>query</c-></code></dfn>); [<a class="idl-code" data-link-type="extended-attribute" href="https://webidl.spec.whatwg.org/#SameObject" id="ref-for-SameObject"><c- g>SameObject</c-></a>, <a class="idl-code" data-link-type="extended-attribute" href="https://webidl.spec.whatwg.org/#Replaceable" id="ref-for-Replaceable"><c- g>Replaceable</c-></a>] <c- b>readonly</c-> <c- b>attribute</c-> <a data-link-type="idl-name" href="#screen" id="ref-for-screen"><c- n>Screen</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="Screen" href="#dom-window-screen" id="ref-for-dom-window-screen"><c- g>screen</c-></a>; [<a class="idl-code" data-link-type="extended-attribute" href="https://webidl.spec.whatwg.org/#SameObject" id="ref-for-SameObject①"><c- g>SameObject</c-></a>, <a class="idl-code" data-link-type="extended-attribute" href="https://webidl.spec.whatwg.org/#Replaceable" id="ref-for-Replaceable①"><c- g>Replaceable</c-></a>] <c- b>readonly</c-> <c- b>attribute</c-> <a data-link-type="idl-name" href="#visualviewport" id="ref-for-visualviewport③"><c- n>VisualViewport</c-></a>? <a class="idl-code" data-link-type="attribute" data-readonly data-type="VisualViewport?" href="#dom-window-visualviewport" id="ref-for-dom-window-visualviewport"><c- g>visualViewport</c-></a>; // browsing context <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-undefined" id="ref-for-idl-undefined"><c- b>undefined</c-></a> <a class="idl-code" data-link-type="method" href="#dom-window-moveto" id="ref-for-dom-window-moveto"><c- g>moveTo</c-></a>(<a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-long" id="ref-for-idl-long"><c- b>long</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="Window/moveTo(x, y)" data-dfn-type="argument" data-export id="dom-window-moveto-x-y-x"><code><c- g>x</c-></code></dfn>, <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-long" id="ref-for-idl-long①"><c- b>long</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="Window/moveTo(x, y)" data-dfn-type="argument" data-export id="dom-window-moveto-x-y-y"><code><c- g>y</c-></code></dfn>); <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-undefined" id="ref-for-idl-undefined①"><c- b>undefined</c-></a> <a class="idl-code" data-link-type="method" href="#dom-window-moveby" id="ref-for-dom-window-moveby"><c- g>moveBy</c-></a>(<a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-long" id="ref-for-idl-long②"><c- b>long</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="Window/moveBy(x, y)" data-dfn-type="argument" data-export id="dom-window-moveby-x-y-x"><code><c- g>x</c-></code></dfn>, <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-long" id="ref-for-idl-long③"><c- b>long</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="Window/moveBy(x, y)" data-dfn-type="argument" data-export id="dom-window-moveby-x-y-y"><code><c- g>y</c-></code></dfn>); <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-undefined" id="ref-for-idl-undefined②"><c- b>undefined</c-></a> <a class="idl-code" data-link-type="method" href="#dom-window-resizeto" id="ref-for-dom-window-resizeto"><c- g>resizeTo</c-></a>(<a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-long" id="ref-for-idl-long④"><c- b>long</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="Window/resizeTo(width, height)" data-dfn-type="argument" data-export id="dom-window-resizeto-width-height-width"><code><c- g>width</c-></code></dfn>, <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-long" id="ref-for-idl-long⑤"><c- b>long</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="Window/resizeTo(width, height)" data-dfn-type="argument" data-export id="dom-window-resizeto-width-height-height"><code><c- g>height</c-></code></dfn>); <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-undefined" id="ref-for-idl-undefined③"><c- b>undefined</c-></a> <a class="idl-code" data-link-type="method" href="#dom-window-resizeby" id="ref-for-dom-window-resizeby"><c- g>resizeBy</c-></a>(<a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-long" id="ref-for-idl-long⑥"><c- b>long</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="Window/resizeBy(x, y)" data-dfn-type="argument" data-export id="dom-window-resizeby-x-y-x"><code><c- g>x</c-></code></dfn>, <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-long" id="ref-for-idl-long⑦"><c- b>long</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="Window/resizeBy(x, y)" data-dfn-type="argument" data-export id="dom-window-resizeby-x-y-y"><code><c- g>y</c-></code></dfn>); // viewport [<a class="idl-code" data-link-type="extended-attribute" href="https://webidl.spec.whatwg.org/#Replaceable" id="ref-for-Replaceable②"><c- g>Replaceable</c-></a>] <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-long" id="ref-for-idl-long⑧"><c- b>long</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="long" href="#dom-window-innerwidth" id="ref-for-dom-window-innerwidth"><c- g>innerWidth</c-></a>; [<a class="idl-code" data-link-type="extended-attribute" href="https://webidl.spec.whatwg.org/#Replaceable" id="ref-for-Replaceable③"><c- g>Replaceable</c-></a>] <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-long" id="ref-for-idl-long⑨"><c- b>long</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="long" href="#dom-window-innerheight" id="ref-for-dom-window-innerheight"><c- g>innerHeight</c-></a>; // viewport scrolling [<a class="idl-code" data-link-type="extended-attribute" href="https://webidl.spec.whatwg.org/#Replaceable" id="ref-for-Replaceable④"><c- g>Replaceable</c-></a>] <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-double" id="ref-for-idl-double"><c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="double" href="#dom-window-scrollx" id="ref-for-dom-window-scrollx"><c- g>scrollX</c-></a>; [<a class="idl-code" data-link-type="extended-attribute" href="https://webidl.spec.whatwg.org/#Replaceable" id="ref-for-Replaceable⑤"><c- g>Replaceable</c-></a>] <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-double" id="ref-for-idl-double①"><c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="double" href="#dom-window-pagexoffset" id="ref-for-dom-window-pagexoffset"><c- g>pageXOffset</c-></a>; [<a class="idl-code" data-link-type="extended-attribute" href="https://webidl.spec.whatwg.org/#Replaceable" id="ref-for-Replaceable⑥"><c- g>Replaceable</c-></a>] <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-double" id="ref-for-idl-double②"><c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="double" href="#dom-window-scrolly" id="ref-for-dom-window-scrolly"><c- g>scrollY</c-></a>; [<a class="idl-code" data-link-type="extended-attribute" href="https://webidl.spec.whatwg.org/#Replaceable" id="ref-for-Replaceable⑦"><c- g>Replaceable</c-></a>] <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-double" id="ref-for-idl-double③"><c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="double" href="#dom-window-pageyoffset" id="ref-for-dom-window-pageyoffset"><c- g>pageYOffset</c-></a>; <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-undefined" id="ref-for-idl-undefined④"><c- b>undefined</c-></a> <a class="idl-code" data-link-type="method" href="#dom-window-scroll" id="ref-for-dom-window-scroll"><c- g>scroll</c-></a>(<c- b>optional</c-> <a data-link-type="idl-name" href="#dictdef-scrolltooptions" id="ref-for-dictdef-scrolltooptions"><c- n>ScrollToOptions</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="Window/scroll(options), Window/scroll()" data-dfn-type="argument" data-export id="dom-window-scroll-options-options"><code><c- g>options</c-></code></dfn> = {}); <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-undefined" id="ref-for-idl-undefined⑤"><c- b>undefined</c-></a> <a class="idl-code" data-link-type="method" href="#dom-window-scroll" id="ref-for-dom-window-scroll①"><c- g>scroll</c-></a>(<a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double②"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="Window/scroll(x, y)" data-dfn-type="argument" data-export id="dom-window-scroll-x-y-x"><code><c- g>x</c-></code></dfn>, <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double③"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="Window/scroll(x, y)" data-dfn-type="argument" data-export id="dom-window-scroll-x-y-y"><code><c- g>y</c-></code></dfn>); <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-undefined" id="ref-for-idl-undefined⑥"><c- b>undefined</c-></a> <a class="idl-code" data-link-type="method" href="#dom-window-scrollto" id="ref-for-dom-window-scrollto"><c- g>scrollTo</c-></a>(<c- b>optional</c-> <a data-link-type="idl-name" href="#dictdef-scrolltooptions" id="ref-for-dictdef-scrolltooptions①"><c- n>ScrollToOptions</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="Window/scrollTo(options), Window/scrollTo()" data-dfn-type="argument" data-export id="dom-window-scrollto-options-options"><code><c- g>options</c-></code></dfn> = {}); <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-undefined" id="ref-for-idl-undefined⑦"><c- b>undefined</c-></a> <a class="idl-code" data-link-type="method" href="#dom-window-scrollto" id="ref-for-dom-window-scrollto①"><c- g>scrollTo</c-></a>(<a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double④"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="Window/scrollTo(x, y)" data-dfn-type="argument" data-export id="dom-window-scrollto-x-y-x"><code><c- g>x</c-></code></dfn>, <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑤"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="Window/scrollTo(x, y)" data-dfn-type="argument" data-export id="dom-window-scrollto-x-y-y"><code><c- g>y</c-></code></dfn>); <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-undefined" id="ref-for-idl-undefined⑧"><c- b>undefined</c-></a> <a class="idl-code" data-link-type="method" href="#dom-window-scrollby" id="ref-for-dom-window-scrollby"><c- g>scrollBy</c-></a>(<c- b>optional</c-> <a data-link-type="idl-name" href="#dictdef-scrolltooptions" id="ref-for-dictdef-scrolltooptions②"><c- n>ScrollToOptions</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="Window/scrollBy(options), Window/scrollBy()" data-dfn-type="argument" data-export id="dom-window-scrollby-options-options"><code><c- g>options</c-></code></dfn> = {}); <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-undefined" id="ref-for-idl-undefined⑨"><c- b>undefined</c-></a> <a class="idl-code" data-link-type="method" href="#dom-window-scrollby" id="ref-for-dom-window-scrollby①"><c- g>scrollBy</c-></a>(<a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑥"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="Window/scrollBy(x, y)" data-dfn-type="argument" data-export id="dom-window-scrollby-x-y-x"><code><c- g>x</c-></code></dfn>, <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑦"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="Window/scrollBy(x, y)" data-dfn-type="argument" data-export id="dom-window-scrollby-x-y-y"><code><c- g>y</c-></code></dfn>); // client [<a class="idl-code" data-link-type="extended-attribute" href="https://webidl.spec.whatwg.org/#Replaceable" id="ref-for-Replaceable⑧"><c- g>Replaceable</c-></a>] <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-long" id="ref-for-idl-long①⓪"><c- b>long</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="long" href="#dom-window-screenx" id="ref-for-dom-window-screenx"><c- g>screenX</c-></a>; [<a class="idl-code" data-link-type="extended-attribute" href="https://webidl.spec.whatwg.org/#Replaceable" id="ref-for-Replaceable⑨"><c- g>Replaceable</c-></a>] <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-long" id="ref-for-idl-long①①"><c- b>long</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="long" href="#dom-window-screenleft" id="ref-for-dom-window-screenleft"><c- g>screenLeft</c-></a>; [<a class="idl-code" data-link-type="extended-attribute" href="https://webidl.spec.whatwg.org/#Replaceable" id="ref-for-Replaceable①⓪"><c- g>Replaceable</c-></a>] <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-long" id="ref-for-idl-long①②"><c- b>long</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="long" href="#dom-window-screeny" id="ref-for-dom-window-screeny"><c- g>screenY</c-></a>; [<a class="idl-code" data-link-type="extended-attribute" href="https://webidl.spec.whatwg.org/#Replaceable" id="ref-for-Replaceable①①"><c- g>Replaceable</c-></a>] <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-long" id="ref-for-idl-long①③"><c- b>long</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="long" href="#dom-window-screentop" id="ref-for-dom-window-screentop"><c- g>screenTop</c-></a>; [<a class="idl-code" data-link-type="extended-attribute" href="https://webidl.spec.whatwg.org/#Replaceable" id="ref-for-Replaceable①②"><c- g>Replaceable</c-></a>] <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-long" id="ref-for-idl-long①④"><c- b>long</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="long" href="#dom-window-outerwidth" id="ref-for-dom-window-outerwidth"><c- g>outerWidth</c-></a>; [<a class="idl-code" data-link-type="extended-attribute" href="https://webidl.spec.whatwg.org/#Replaceable" id="ref-for-Replaceable①③"><c- g>Replaceable</c-></a>] <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-long" id="ref-for-idl-long①⑤"><c- b>long</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="long" href="#dom-window-outerheight" id="ref-for-dom-window-outerheight"><c- g>outerHeight</c-></a>; [<a class="idl-code" data-link-type="extended-attribute" href="https://webidl.spec.whatwg.org/#Replaceable" id="ref-for-Replaceable①④"><c- g>Replaceable</c-></a>] <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-double" id="ref-for-idl-double④"><c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="double" href="#dom-window-devicepixelratio" id="ref-for-dom-window-devicepixelratio"><c- g>devicePixelRatio</c-></a>; }; </pre> When the <dfn class="dfn-paneled caniuse-paneled idl-code" data-dfn-for="Window" data-dfn-type="method" data-export id="dom-window-matchmedia"><code>matchMedia(<var>query</var>)</code></dfn> method is invoked these steps must be run: <ol> <li>Let <var>parsed media query list</var> be the result of <a data-link-type="dfn" href="https://drafts.csswg.org/cssom-1/#parse-a-media-query-list" id="ref-for-parse-a-media-query-list">parsing</a> <var>query</var>. <li>Return a new <code class="idl"><a data-link-type="idl" href="#mediaquerylist" id="ref-for-mediaquerylist①">MediaQueryList</a></code> object, with <a data-link-type="dfn" href="https://webidl.spec.whatwg.org/#this" id="ref-for-this">this</a>’s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/nav-history-apis.html#concept-document-window" id="ref-for-concept-document-window①">associated <code>Document</code></a> as the <a data-link-type="dfn" href="#mediaquerylist-document" id="ref-for-mediaquerylist-document">document</a>, with <var>parsed media query list</var> as its associated <a data-link-type="dfn" href="#mediaquerylist-media-query-list" id="ref-for-mediaquerylist-media-query-list">media query list</a>. </ol> The <dfn class="dfn-paneled idl-code" data-dfn-for="Window" data-dfn-type="attribute" data-export id="dom-window-screen"><code>screen</code></dfn> attribute must return the <code class="idl"><a data-link-type="idl" href="#screen" id="ref-for-screen①">Screen</a></code> object associated with the <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/nav-history-apis.html#window" id="ref-for-window④">Window</a></code> object. Note: Accessing <code class="idl"><a data-link-type="idl" href="#dom-window-screen" id="ref-for-dom-window-screen①">screen</a></code> through a <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/nav-history-apis.html#windowproxy" id="ref-for-windowproxy">WindowProxy</a></code> object might yield different results when the <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document" id="ref-for-document②">Document</a></code> is navigated. If the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/nav-history-apis.html#concept-document-window" id="ref-for-concept-document-window②">associated document</a> is <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/document-sequences.html#fully-active" id="ref-for-fully-active">fully active</a>, the <dfn class="dfn-paneled idl-code" data-dfn-for="Window" data-dfn-type="attribute" data-export id="dom-window-visualviewport"><code>visualViewport</code></dfn> attribute must return the <code class="idl"><a data-link-type="idl" href="#visualviewport" id="ref-for-visualviewport④">VisualViewport</a></code> object associated with the <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/nav-history-apis.html#window" id="ref-for-window⑤">Window</a></code> object’s associated document. Otherwise, it must return null. Note: the VisualViewport object is only returned and useful for a window whose Document is currently being presented. If a reference is retained to a VisualViewport whose associated Document is not being currently presented, the values in that VisualViewport must not reveal any information about the browsing context. The <dfn class="dfn-paneled idl-code" data-dfn-for="Window" data-dfn-type="method" data-export id="dom-window-moveto"><code>moveTo(<var>x</var>, <var>y</var>)</code></dfn> method must follow these steps: <ol> <li data-md> Optionally, return. <li data-md> Let <var>target</var> be <a data-link-type="dfn" href="https://webidl.spec.whatwg.org/#this" id="ref-for-this①">this</a>’s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-relevant-global" id="ref-for-concept-relevant-global">relevant global object</a>’s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/nav-history-apis.html#window-bc" id="ref-for-window-bc">browsing context</a>. <li data-md> If <var>target</var> is not an <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/document-sequences.html#auxiliary-browsing-context" id="ref-for-auxiliary-browsing-context">auxiliary browsing context</a> that was created by a script (as opposed to by an action of the user), then return. <li data-md> Optionally, clamp <var>x</var> and <var>y</var> in a user-agent-defined manner so that the window does not move outside the available space. <li data-md> Move <var>target</var>’s window such that the window’s top left corner is at coordinates (<var>x</var>, <var>y</var>) relative to the top left corner of the output device, measured in <a class="css" data-link-type="value" href="https://drafts.csswg.org/css-values-4/#px" id="ref-for-px⑥">CSS pixels</a> of <var>target</var>. The positive axes are rightward and downward. </ol> The <dfn class="dfn-paneled idl-code" data-dfn-for="Window" data-dfn-type="method" data-export id="dom-window-moveby"><code>moveBy(<var>x</var>, <var>y</var>)</code></dfn> method must follow these steps: <ol> <li data-md> Optionally, return. <li data-md> Let <var>target</var> be <a data-link-type="dfn" href="https://webidl.spec.whatwg.org/#this" id="ref-for-this②">this</a>’s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-relevant-global" id="ref-for-concept-relevant-global①">relevant global object</a>’s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/nav-history-apis.html#window-bc" id="ref-for-window-bc①">browsing context</a>. <li data-md> If <var>target</var> is not an <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/document-sequences.html#auxiliary-browsing-context" id="ref-for-auxiliary-browsing-context①">auxiliary browsing context</a> that was created by a script (as opposed to by an action of the user), then return. <li data-md> Optionally, clamp <var>x</var> and <var>y</var> in a user-agent-defined manner so that the window does not move outside the available space. <li data-md> Move <var>target</var>’s window <var>x</var> <a class="css" data-link-type="value" href="https://drafts.csswg.org/css-values-4/#px" id="ref-for-px⑦">CSS pixels</a> of <var>target</var> rightward and <var>y</var> CSS pixels of <var>target</var> downward. </ol> The <dfn class="dfn-paneled idl-code" data-dfn-for="Window" data-dfn-type="method" data-export id="dom-window-resizeto"><code>resizeTo(<var>width</var>, <var>height</var>)</code></dfn> method must follow these steps: <ol> <li data-md> Optionally, return. <li data-md> Let <var>target</var> be <a data-link-type="dfn" href="https://webidl.spec.whatwg.org/#this" id="ref-for-this③">this</a>’s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-relevant-global" id="ref-for-concept-relevant-global②">relevant global object</a>’s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/nav-history-apis.html#window-bc" id="ref-for-window-bc②">browsing context</a>. <li data-md> If <var>target</var> is not an <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/document-sequences.html#auxiliary-browsing-context" id="ref-for-auxiliary-browsing-context②">auxiliary browsing context</a> that was created by a script (as opposed to by an action of the user), then return. <li data-md> Optionally, clamp <var>width</var> and <var>height</var> in a user-agent-defined manner so that the window does not get too small or bigger than the available space. <li data-md> Resize <var>target</var>’s window by moving its right and bottom edges such that the distance between the left and right edges of the viewport are <var>width</var> <a class="css" data-link-type="value" href="https://drafts.csswg.org/css-values-4/#px" id="ref-for-px⑨">CSS pixels</a> of <var>target</var> and the distance between the top and bottom edges of the viewport are <var>height</var> CSS pixels of <var>target</var>. <li data-md> Optionally, move <var>target</var>’s window in a user-agent-defined manner so that it does not grow outside the available space. </ol> The <dfn class="dfn-paneled idl-code" data-dfn-for="Window" data-dfn-type="method" data-export id="dom-window-resizeby"><code>resizeBy(<var>x</var>, <var>y</var>)</code></dfn> method must follow these steps: <ol> <li data-md> Optionally, return. <li data-md> Let <var>target</var> be <a data-link-type="dfn" href="https://webidl.spec.whatwg.org/#this" id="ref-for-this④">this</a>’s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-relevant-global" id="ref-for-concept-relevant-global③">relevant global object</a>’s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/nav-history-apis.html#window-bc" id="ref-for-window-bc③">browsing context</a>. <li data-md> If <var>target</var> is not an <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/document-sequences.html#auxiliary-browsing-context" id="ref-for-auxiliary-browsing-context③">auxiliary browsing context</a> that was created by a script (as opposed to by an action of the user), then return. <li data-md> Optionally, clamp <var>x</var> and <var>y</var> in a user-agent-defined manner so that the window does not get too small or bigger than the available space. <li data-md> Resize <var>target</var>’s window by moving its right edge <var>x</var> <a class="css" data-link-type="value" href="https://drafts.csswg.org/css-values-4/#px" id="ref-for-px①①">CSS pixels</a> of <var>target</var> rightward and its bottom edge <var>y</var> CSS pixels of <var>target</var> downward. <li data-md> Optionally, move <var>target</var>’s window in a user-agent-defined manner so that it does not grow outside the available space. </ol> The <dfn class="dfn-paneled idl-code" data-dfn-for="Window" data-dfn-type="attribute" data-export id="dom-window-innerwidth"><code>innerWidth</code></dfn> attribute must return the <a data-link-type="dfn" href="https://drafts.csswg.org/css2/#viewport%E2%91%A0" id="ref-for-viewport%E2%91%A0②④">viewport</a> width including the size of a rendered scroll bar (if any), or zero if there is no viewport. <div class="example" id="example-daa56a22"> <a class="self-link" href="#example-daa56a22"></a> The following snippet shows how to obtain the width of the viewport: <pre>var viewportWidth = innerWidth</pre> </div> The <dfn class="dfn-paneled idl-code" data-dfn-for="Window" data-dfn-type="attribute" data-export id="dom-window-innerheight"><code>innerHeight</code></dfn> attribute must return the <a data-link-type="dfn" href="https://drafts.csswg.org/css2/#viewport%E2%91%A0" id="ref-for-viewport%E2%91%A0②⑥">viewport</a> height including the size of a rendered scroll bar (if any), or zero if there is no viewport. The <dfn class="dfn-paneled idl-code" data-dfn-for="Window" data-dfn-type="attribute" data-export id="dom-window-scrollx"><code>scrollX</code></dfn> attribute must return the x-coordinate, relative to the <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#initial-containing-block" id="ref-for-initial-containing-block①⑦">initial containing block</a> origin, of the left of the <a data-link-type="dfn" href="https://drafts.csswg.org/css2/#viewport%E2%91%A0" id="ref-for-viewport%E2%91%A0②⑧">viewport</a>, or zero if there is no viewport. The <dfn class="dfn-paneled idl-code" data-dfn-for="Window" data-dfn-type="attribute" data-export id="dom-window-pagexoffset"><code>pageXOffset</code></dfn> attribute must return the value returned by the <code class="idl"><a data-link-type="idl" href="#dom-window-scrollx" id="ref-for-dom-window-scrollx①">scrollX</a></code> attribute. The <dfn class="dfn-paneled idl-code" data-dfn-for="Window" data-dfn-type="attribute" data-export id="dom-window-scrolly"><code>scrollY</code></dfn> attribute must return the y-coordinate, relative to the <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#initial-containing-block" id="ref-for-initial-containing-block①⑧">initial containing block</a> origin, of the top of the <a data-link-type="dfn" href="https://drafts.csswg.org/css2/#viewport%E2%91%A0" id="ref-for-viewport%E2%91%A0③⓪">viewport</a>, or zero if there is no viewport. The <dfn class="dfn-paneled idl-code" data-dfn-for="Window" data-dfn-type="attribute" data-export id="dom-window-pageyoffset"><code>pageYOffset</code></dfn> attribute must return the value returned by the <code class="idl"><a data-link-type="idl" href="#dom-window-scrolly" id="ref-for-dom-window-scrolly①">scrollY</a></code> attribute. When the <dfn class="dfn-paneled idl-code" data-dfn-for="Window" data-dfn-type="method" data-export data-lt="scroll(x, y)|scroll(options)|scroll()" id="dom-window-scroll"><code>scroll()</code></dfn> method is invoked these steps must be run: <ol> <li data-md> If invoked with one argument, follow these substeps: <ol> <li data-md> Let <var>options</var> be the argument. <li data-md> Let <var>x</var> be the value of the <code class="idl"><a data-link-type="idl" href="#dom-scrolltooptions-left" id="ref-for-dom-scrolltooptions-left">left</a></code> dictionary member of <var>options</var>, if present, or the <a data-link-type="dfn" href="https://drafts.csswg.org/css2/#viewport%E2%91%A0" id="ref-for-viewport%E2%91%A0③②">viewport’s</a> current scroll position on the x axis otherwise. <li data-md> Let <var>y</var> be the value of the <code class="idl"><a data-link-type="idl" href="#dom-scrolltooptions-top" id="ref-for-dom-scrolltooptions-top">top</a></code> dictionary member of <var>options</var>, if present, or the <a data-link-type="dfn" href="https://drafts.csswg.org/css2/#viewport%E2%91%A0" id="ref-for-viewport%E2%91%A0③③">viewport’s</a> current scroll position on the y axis otherwise. </ol> <li data-md> If invoked with two arguments, follow these substeps: <ol> <li data-md> Let <var>options</var> be null <a data-link-type="dfn" href="https://webidl.spec.whatwg.org/#dfn-convert-ecmascript-to-idl-value" id="ref-for-dfn-convert-ecmascript-to-idl-value">converted</a> to a <code class="idl"><a data-link-type="idl" href="#dictdef-scrolltooptions" id="ref-for-dictdef-scrolltooptions③">ScrollToOptions</a></code> dictionary. <a data-link-type="biblio" href="#biblio-webidl" title="Web IDL Standard">[WEBIDL]</a> <li data-md> Let <var>x</var> and <var>y</var> be the arguments, respectively. </ol> <li data-md> <a data-link-type="dfn" href="#normalize-non-finite-values" id="ref-for-normalize-non-finite-values">Normalize non-finite values</a> for <var>x</var> and <var>y</var>. <li data-md> If there is no <a data-link-type="dfn" href="https://drafts.csswg.org/css2/#viewport%E2%91%A0" id="ref-for-viewport%E2%91%A0③④">viewport</a>, abort these steps. <li data-md> Let <var>viewport width</var> be the width of the <a data-link-type="dfn" href="https://drafts.csswg.org/css2/#viewport%E2%91%A0" id="ref-for-viewport%E2%91%A0③⑤">viewport</a> excluding the width of the scroll bar, if any. <li data-md> Let <var>viewport height</var> be the height of the <a data-link-type="dfn" href="https://drafts.csswg.org/css2/#viewport%E2%91%A0" id="ref-for-viewport%E2%91%A0③⑥">viewport</a> excluding the height of the scroll bar, if any. <li data-md> <dl class="switch"> <dt>If the <a data-link-type="dfn" href="https://drafts.csswg.org/css2/#viewport%E2%91%A0" id="ref-for-viewport%E2%91%A0③⑦">viewport</a> has rightward <a data-link-type="dfn" href="#overflow-directions" id="ref-for-overflow-directions①⓪">overflow direction</a> <dd>Let <var>x</var> be max(0, min(<var>x</var>, <a data-link-type="dfn" href="https://drafts.csswg.org/css2/#viewport%E2%91%A0" id="ref-for-viewport%E2%91%A0③⑧">viewport</a> <a data-link-type="dfn" href="#scrolling-area" id="ref-for-scrolling-area④">scrolling area</a> width - <var>viewport width</var>)). <dt>If the <a data-link-type="dfn" href="https://drafts.csswg.org/css2/#viewport%E2%91%A0" id="ref-for-viewport%E2%91%A0③⑨">viewport</a> has leftward <a data-link-type="dfn" href="#overflow-directions" id="ref-for-overflow-directions①①">overflow direction</a> <dd>Let <var>x</var> be min(0, max(<var>x</var>, <var>viewport width</var> - <a data-link-type="dfn" href="https://drafts.csswg.org/css2/#viewport%E2%91%A0" id="ref-for-viewport%E2%91%A0④⓪">viewport</a> <a data-link-type="dfn" href="#scrolling-area" id="ref-for-scrolling-area⑤">scrolling area</a> width)). </dl> <li data-md> <dl class="switch"> <dt>If the <a data-link-type="dfn" href="https://drafts.csswg.org/css2/#viewport%E2%91%A0" id="ref-for-viewport%E2%91%A0④①">viewport</a> has downward <a data-link-type="dfn" href="#overflow-directions" id="ref-for-overflow-directions①②">overflow direction</a> <dd>Let <var>y</var> be max(0, min(<var>y</var>, <a data-link-type="dfn" href="https://drafts.csswg.org/css2/#viewport%E2%91%A0" id="ref-for-viewport%E2%91%A0④②">viewport</a> <a data-link-type="dfn" href="#scrolling-area" id="ref-for-scrolling-area⑥">scrolling area</a> height - <var>viewport height</var>)). <dt>If the <a data-link-type="dfn" href="https://drafts.csswg.org/css2/#viewport%E2%91%A0" id="ref-for-viewport%E2%91%A0④③">viewport</a> has upward <a data-link-type="dfn" href="#overflow-directions" id="ref-for-overflow-directions①③">overflow direction</a> <dd>Let <var>y</var> be min(0, max(<var>y</var>, <var>viewport height</var> - <a data-link-type="dfn" href="https://drafts.csswg.org/css2/#viewport%E2%91%A0" id="ref-for-viewport%E2%91%A0④④">viewport</a> <a data-link-type="dfn" href="#scrolling-area" id="ref-for-scrolling-area⑦">scrolling area</a> height)). </dl> <li data-md> Let <var>position</var> be the scroll position the <a data-link-type="dfn" href="https://drafts.csswg.org/css2/#viewport%E2%91%A0" id="ref-for-viewport%E2%91%A0④⑤">viewport</a> would have by aligning the x-coordinate <var>x</var> of the viewport <a data-link-type="dfn" href="#scrolling-area" id="ref-for-scrolling-area⑧">scrolling area</a> with the left of the viewport and aligning the y-coordinate <var>y</var> of the viewport scrolling area with the top of the viewport. <li data-md> If <var>position</var> is the same as the <a data-link-type="dfn" href="https://drafts.csswg.org/css2/#viewport%E2%91%A0" id="ref-for-viewport%E2%91%A0⑤⓪">viewport’s</a> current scroll position, and the viewport does not have an ongoing <a data-link-type="dfn" href="#concept-smooth-scroll" id="ref-for-concept-smooth-scroll③">smooth scroll</a>, abort these steps. <li data-md> Let <var>document</var> be the <a data-link-type="dfn" href="https://drafts.csswg.org/css2/#viewport%E2%91%A0" id="ref-for-viewport%E2%91%A0⑤②">viewport’s</a> associated <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document" id="ref-for-document③">Document</a></code>. <li data-md> <a data-link-type="dfn" href="#viewport-perform-a-scroll" id="ref-for-viewport-perform-a-scroll②">Perform a scroll</a> of the <a data-link-type="dfn" href="https://drafts.csswg.org/css2/#viewport%E2%91%A0" id="ref-for-viewport%E2%91%A0⑤③">viewport</a> to <var>position</var>, <var>document</var>’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#root-element" id="ref-for-root-element①">root element</a> as the associated element, if there is one, or null otherwise, and the scroll behavior being the value of the <code class="idl"><a data-link-type="idl" href="#dom-scrolloptions-behavior" id="ref-for-dom-scrolloptions-behavior">behavior</a></code> dictionary member of <var>options</var>. <a class="self-link" href="#issue-1e98b401"></a> User agents do not agree whether this uses the (coordinated) <a data-link-type="dfn" href="https://drafts.csswg.org/css2/#viewport%E2%91%A0" id="ref-for-viewport%E2%91%A0⑤④">viewport</a> <a data-link-type="dfn" href="#viewport-perform-a-scroll" id="ref-for-viewport-perform-a-scroll③">perform a scroll</a> or the <a data-link-type="dfn" href="#scrolling-box" id="ref-for-scrolling-box⑨">scrolling box</a> <a data-link-type="dfn" href="#perform-a-scroll" id="ref-for-perform-a-scroll②">perform a scroll</a> on the layout viewport’s scrolling box. </ol> When the <dfn class="dfn-paneled idl-code" data-dfn-for="Window" data-dfn-type="method" data-export data-lt="scrollTo(x, y)|scrollTo(options)|scrollTo()" id="dom-window-scrollto"><code>scrollTo()</code></dfn> method is invoked, the user agent must act as if the <code class="idl"><a data-link-type="idl" href="#dom-window-scroll" id="ref-for-dom-window-scroll②">scroll()</a></code> method was invoked with the same arguments. When the <dfn class="dfn-paneled idl-code" data-dfn-for="Window" data-dfn-type="method" data-export data-lt="scrollBy(x, y)|scrollBy(options)|scrollBy()" id="dom-window-scrollby"><code>scrollBy()</code></dfn> method is invoked, the user agent must run these steps: <ol> <li data-md> If invoked with two arguments, follow these substeps: <ol> <li data-md> Let <var>options</var> be null <a data-link-type="dfn" href="https://webidl.spec.whatwg.org/#dfn-convert-ecmascript-to-idl-value" id="ref-for-dfn-convert-ecmascript-to-idl-value①">converted</a> to a <code class="idl"><a data-link-type="idl" href="#dictdef-scrolltooptions" id="ref-for-dictdef-scrolltooptions④">ScrollToOptions</a></code> dictionary. <a data-link-type="biblio" href="#biblio-webidl" title="Web IDL Standard">[WEBIDL]</a> <li data-md> Let <var>x</var> and <var>y</var> be the arguments, respectively. <li data-md> Let the <code class="idl"><a data-link-type="idl" href="#dom-scrolltooptions-left" id="ref-for-dom-scrolltooptions-left①">left</a></code> dictionary member of <var>options</var> have the value <var>x</var>. <li data-md> Let the <code class="idl"><a data-link-type="idl" href="#dom-scrolltooptions-top" id="ref-for-dom-scrolltooptions-top①">top</a></code> dictionary member of <var>options</var> have the value <var>y</var>. </ol> <li data-md> <a data-link-type="dfn" href="#normalize-non-finite-values" id="ref-for-normalize-non-finite-values①">Normalize non-finite values</a> for the <code class="idl"><a data-link-type="idl" href="#dom-scrolltooptions-left" id="ref-for-dom-scrolltooptions-left②">left</a></code> and <code class="idl"><a data-link-type="idl" href="#dom-scrolltooptions-top" id="ref-for-dom-scrolltooptions-top②">top</a></code> dictionary members of <var>options</var>. <li data-md> Add the value of <code class="idl"><a data-link-type="idl" href="#dom-window-scrollx" id="ref-for-dom-window-scrollx②">scrollX</a></code> to the <code class="idl"><a data-link-type="idl" href="#dom-scrolltooptions-left" id="ref-for-dom-scrolltooptions-left③">left</a></code> dictionary member. <li data-md> Add the value of <code class="idl"><a data-link-type="idl" href="#dom-window-scrolly" id="ref-for-dom-window-scrolly②">scrollY</a></code> to the <code class="idl"><a data-link-type="idl" href="#dom-scrolltooptions-top" id="ref-for-dom-scrolltooptions-top③">top</a></code> dictionary member. <li data-md> Act as if the <code class="idl"><a data-link-type="idl" href="#dom-window-scroll" id="ref-for-dom-window-scroll③">scroll()</a></code> method was invoked with <var>options</var> as the only argument. </ol> The <dfn class="dfn-paneled idl-code" data-dfn-for="Window" data-dfn-type="attribute" data-export id="dom-window-screenx"><code>screenX</code></dfn> and <dfn class="dfn-paneled idl-code" data-dfn-for="Window" data-dfn-type="attribute" data-export id="dom-window-screenleft"><code>screenLeft</code></dfn> attributes must return the x-coordinate, relative to the origin of the <a data-link-type="dfn" href="#web-exposed-screen-area" id="ref-for-web-exposed-screen-area">Web-exposed screen area</a>, of the left of the client window as number of <a class="css" data-link-type="value" href="https://drafts.csswg.org/css-values-4/#px" id="ref-for-px①③">CSS pixels</a>, or zero if there is no such thing. The <dfn class="dfn-paneled idl-code" data-dfn-for="Window" data-dfn-type="attribute" data-export id="dom-window-screeny"><code>screenY</code></dfn> and <dfn class="dfn-paneled idl-code" data-dfn-for="Window" data-dfn-type="attribute" data-export id="dom-window-screentop"><code>screenTop</code></dfn> attributes must return the y-coordinate, relative to the origin of the screen of the <a data-link-type="dfn" href="#web-exposed-screen-area" id="ref-for-web-exposed-screen-area①">Web-exposed screen area</a>, of the top of the client window as number of <a class="css" data-link-type="value" href="https://drafts.csswg.org/css-values-4/#px" id="ref-for-px①④">CSS pixels</a>, or zero if there is no such thing. The <dfn class="dfn-paneled idl-code" data-dfn-for="Window" data-dfn-type="attribute" data-export id="dom-window-outerwidth"><code>outerWidth</code></dfn> attribute must return the width of the client window. If there is no client window this attribute must return zero. The <dfn class="dfn-paneled idl-code" data-dfn-for="Window" data-dfn-type="attribute" data-export id="dom-window-outerheight"><code>outerHeight</code></dfn> attribute must return the height of the client window. If there is no client window this attribute must return zero. The <dfn class="dfn-paneled caniuse-paneled idl-code" data-dfn-for="Window" data-dfn-type="attribute" data-export id="dom-window-devicepixelratio"><code>devicePixelRatio</code></dfn> attribute must return the result of the following <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="determine-the-device-pixel-ratio">determine the device pixel ratio</dfn> algorithm: <ol> <li data-md> If there is no output device, return 1 and abort these steps. <li data-md> Let <var>CSS pixel size</var> be the size of a <a class="css" data-link-type="value" href="https://drafts.csswg.org/css-values-4/#px" id="ref-for-px①⑤">CSS pixel</a> at the current <a data-link-type="dfn" href="#page-zoom" id="ref-for-page-zoom">page zoom</a> and using a <a data-link-type="dfn" href="#scale-factor" id="ref-for-scale-factor①">scale factor</a> of 1.0. <li data-md> Let <var>device pixel size</var> be the vertical size of a device pixel of the output device. <li data-md> Return the result of dividing <var>CSS pixel size</var> by <var>device pixel size</var>. </ol> <h3 class="heading settled" data-level="4.1" id="the-features-argument-to-the-open()-method">4.1. The <var>features</var> argument to the <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/nav-history-apis.html#dom-open" id="ref-for-dom-open">open()</a></code> method<a class="self-link" href="#the-features-argument-to-the-open()-method"></a></h3> HTML defines the <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/nav-history-apis.html#dom-open" id="ref-for-dom-open①">open()</a></code> method. This section defines behavior for position and size given in the <var>features</var> argument. <a data-link-type="biblio" href="#biblio-html" title="HTML Standard">[HTML]</a> To <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="set-up-browsing-context-features">set up browsing context features</dfn> for a browsing context <var>target</var> given a <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#ordered-map" id="ref-for-ordered-map">map</a> <var>tokenizedFeatures</var>: <ol> <li data-md> Let <var>x</var> be null. <li data-md> Let <var>y</var> be null. <li data-md> Let <var>width</var> be null. <li data-md> Let <var>height</var> be null. <li data-md> If <var>tokenizedFeatures</var>["<a data-link-type="dfn" href="#supported-open-feature-name-left" id="ref-for-supported-open-feature-name-left">left</a>"] <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#map-exists" id="ref-for-map-exists">exists</a>: <ol> <li data-md> Set <var>x</var> to the result of invoking the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#rules-for-parsing-integers" id="ref-for-rules-for-parsing-integers">rules for parsing integers</a> on <var>tokenizedFeatures</var>["<a data-link-type="dfn" href="#supported-open-feature-name-left" id="ref-for-supported-open-feature-name-left①">left</a>"]. <li data-md> If <var>x</var> is an error, set <var>x</var> to 0. <li data-md> Optionally, clamp <var>x</var> in a user-agent-defined manner so that the window does not move outside the <a data-link-type="dfn" href="#web-exposed-available-screen-area" id="ref-for-web-exposed-available-screen-area">Web-exposed available screen area</a>. <li data-md> Optionally, move <var>target</var>’s window such that the window’s left edge is at the horizontal coordinate <var>x</var> relative to the left edge of the <a data-link-type="dfn" href="#web-exposed-screen-area" id="ref-for-web-exposed-screen-area②">Web-exposed screen area</a>, measured in <a class="css" data-link-type="value" href="https://drafts.csswg.org/css-values-4/#px" id="ref-for-px①⑥">CSS pixels</a> of <var>target</var>. The positive axis is rightward. </ol> <li data-md> If <var>tokenizedFeatures</var>["<a data-link-type="dfn" href="#supported-open-feature-name-top" id="ref-for-supported-open-feature-name-top">top</a>"] <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#map-exists" id="ref-for-map-exists①">exists</a>: <ol> <li data-md> Set <var>y</var> to the result of invoking the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#rules-for-parsing-integers" id="ref-for-rules-for-parsing-integers①">rules for parsing integers</a> on <var>tokenizedFeatures</var>["<a data-link-type="dfn" href="#supported-open-feature-name-top" id="ref-for-supported-open-feature-name-top①">top</a>"]. <li data-md> If <var>y</var> is an error, set <var>y</var> to 0. <li data-md> Optionally, clamp <var>y</var> in a user-agent-defined manner so that the window does not move outside the <a data-link-type="dfn" href="#web-exposed-available-screen-area" id="ref-for-web-exposed-available-screen-area①">Web-exposed available screen area</a>. <li data-md> Optionally, move <var>target</var>’s window such that the window’s top edge is at the vertical coordinate <var>y</var> relative to the top edge of the <a data-link-type="dfn" href="#web-exposed-screen-area" id="ref-for-web-exposed-screen-area③">Web-exposed screen area</a>, measured in <a class="css" data-link-type="value" href="https://drafts.csswg.org/css-values-4/#px" id="ref-for-px①⑦">CSS pixels</a> of <var>target</var>. The positive axis is downward. </ol> <li data-md> If <var>tokenizedFeatures</var>["<a data-link-type="dfn" href="#supported-open-feature-name-width" id="ref-for-supported-open-feature-name-width">width</a>"] <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#map-exists" id="ref-for-map-exists②">exists</a>: <ol> <li data-md> Set <var>width</var> to the result of invoking the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#rules-for-parsing-integers" id="ref-for-rules-for-parsing-integers②">rules for parsing integers</a> on <var>tokenizedFeatures</var>["<a data-link-type="dfn" href="#supported-open-feature-name-width" id="ref-for-supported-open-feature-name-width①">width</a>"]. <li data-md> If <var>width</var> is an error, set <var>width</var> to 0. <li data-md> If <var>width</var> is not 0: <ol> <li data-md> Optionally, clamp <var>width</var> in a user-agent-defined manner so that the window does not get too small or bigger than the <a data-link-type="dfn" href="#web-exposed-available-screen-area" id="ref-for-web-exposed-available-screen-area②">Web-exposed available screen area</a>. <li data-md> Optionally, size <var>target</var>’s window by moving its right edge such that the distance between the left and right edges of the viewport are <var>width</var> <a class="css" data-link-type="value" href="https://drafts.csswg.org/css-values-4/#px" id="ref-for-px①⑧">CSS pixels</a> of <var>target</var>. <li data-md> Optionally, move <var>target</var>’s window in a user-agent-defined manner so that it does not grow outside the <a data-link-type="dfn" href="#web-exposed-available-screen-area" id="ref-for-web-exposed-available-screen-area③">Web-exposed available screen area</a>. </ol> </ol> <li data-md> If <var>tokenizedFeatures</var>["<a data-link-type="dfn" href="#supported-open-feature-name-height" id="ref-for-supported-open-feature-name-height">height</a>"] <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#map-exists" id="ref-for-map-exists③">exists</a>: <ol> <li data-md> Set <var>height</var> to the result of invoking the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#rules-for-parsing-integers" id="ref-for-rules-for-parsing-integers③">rules for parsing integers</a> on <var>tokenizedFeatures</var>["<a data-link-type="dfn" href="#supported-open-feature-name-height" id="ref-for-supported-open-feature-name-height①">height</a>"]. <li data-md> If <var>height</var> is an error, set <var>height</var> to 0. <li data-md> If <var>height</var> is not 0: <ol> <li data-md> Optionally, clamp <var>height</var> in a user-agent-defined manner so that the window does not get too small or bigger than the <a data-link-type="dfn" href="#web-exposed-available-screen-area" id="ref-for-web-exposed-available-screen-area④">Web-exposed available screen area</a>. <li data-md> Optionally, size <var>target</var>’s window by moving its bottom edge such that the distance between the top and bottom edges of the viewport are <var>height</var> <a class="css" data-link-type="value" href="https://drafts.csswg.org/css-values-4/#px" id="ref-for-px①⑨">CSS pixels</a> of <var>target</var>. <li data-md> Optionally, move <var>target</var>’s window in a user-agent-defined manner so that it does not grow outside the <a data-link-type="dfn" href="#web-exposed-available-screen-area" id="ref-for-web-exposed-available-screen-area⑤">Web-exposed available screen area</a>. </ol> </ol> </ol> A <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="supported-open-feature-name">supported <code>open()</code> feature name</dfn> is one of the following: <dl> <dt><dfn class="dfn-paneled" data-dfn-for="supported open() feature name" data-dfn-type="dfn" data-export id="supported-open-feature-name-width">width</dfn> <dd>The width of the viewport. <dt><dfn class="dfn-paneled" data-dfn-for="supported open() feature name" data-dfn-type="dfn" data-export id="supported-open-feature-name-height">height</dfn> <dd>The height of the viewport. <dt><dfn class="dfn-paneled" data-dfn-for="supported open() feature name" data-dfn-type="dfn" data-export id="supported-open-feature-name-left">left</dfn> <dd>The left position of the window. <dt><dfn class="dfn-paneled" data-dfn-for="supported open() feature name" data-dfn-type="dfn" data-export id="supported-open-feature-name-top">top</dfn> <dd>The top position of the window. </dl> <h3 class="heading settled" data-level="4.2" id="the-mediaquerylist-interface">4.2. The <code class="idl"><a data-link-type="idl" href="#mediaquerylist" id="ref-for-mediaquerylist②">MediaQueryList</a></code> Interface<a class="self-link" href="#the-mediaquerylist-interface"></a></h3> This section integrates with the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#event-loop" id="ref-for-event-loop">event loop</a> defined in HTML. <a data-link-type="biblio" href="#biblio-html" title="HTML Standard">[HTML]</a> A <code class="idl"><a data-link-type="idl" href="#mediaquerylist" id="ref-for-mediaquerylist③">MediaQueryList</a></code> object has an associated <dfn class="dfn-paneled" data-dfn-for="MediaQueryList" data-dfn-type="dfn" data-noexport id="mediaquerylist-media-query-list">media query list</dfn> and an associated <dfn class="dfn-paneled" data-dfn-for="MediaQueryList" data-dfn-type="dfn" data-noexport id="mediaquerylist-document">document</dfn> set on creation. A <code class="idl"><a data-link-type="idl" href="#mediaquerylist" id="ref-for-mediaquerylist④">MediaQueryList</a></code> object has an associated <dfn class="dfn-paneled" data-dfn-for="MediaQueryList" data-dfn-type="dfn" data-noexport id="mediaquerylist-media">media</dfn> which is the <a data-link-type="dfn" href="https://drafts.csswg.org/cssom-1/#serialize-a-media-query-list" id="ref-for-serialize-a-media-query-list">serialized</a> form of the associated <a data-link-type="dfn" href="#mediaquerylist-media-query-list" id="ref-for-mediaquerylist-media-query-list①">media query list</a>. A <code class="idl"><a data-link-type="idl" href="#mediaquerylist" id="ref-for-mediaquerylist⑤">MediaQueryList</a></code> object has an associated <dfn class="dfn-paneled" data-dfn-for="MediaQueryList" data-dfn-type="dfn" data-noexport id="mediaquerylist-matches-state">matches state</dfn> which is true if the associated <a data-link-type="dfn" href="#mediaquerylist-media-query-list" id="ref-for-mediaquerylist-media-query-list②">media query list</a> matches the state of the <a data-link-type="dfn" href="#mediaquerylist-document" id="ref-for-mediaquerylist-document①">document</a>, and false otherwise. When asked to <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="evaluate-media-queries-and-report-changes">evaluate media queries and report changes</dfn> for a <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document" id="ref-for-document④">Document</a></code> <var>doc</var>, run these steps: <ol> <li> For each <code class="idl"><a data-link-type="idl" href="#mediaquerylist" id="ref-for-mediaquerylist⑥">MediaQueryList</a></code> object <var>target</var> that has <var>doc</var> as its <a data-link-type="dfn" href="#mediaquerylist-document" id="ref-for-mediaquerylist-document②">document</a>, in the order they were created, oldest first, run these substeps: <ol> <li>If <var>target</var>’s <a data-link-type="dfn" href="#mediaquerylist-matches-state" id="ref-for-mediaquerylist-matches-state">matches state</a> has changed since the last time these steps were run, <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-event-fire" id="ref-for-concept-event-fire">fire an event</a> named <a class="idl-code" data-link-type="event" href="#eventdef-mediaquerylist-change" id="ref-for-eventdef-mediaquerylist-change">change</a> at <var>target</var> using <code class="idl"><a data-link-type="idl" href="#mediaquerylistevent" id="ref-for-mediaquerylistevent">MediaQueryListEvent</a></code>, with its <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#dom-event-istrusted" id="ref-for-dom-event-istrusted">isTrusted</a></code> attribute initialized to true, its <code class="idl"><a data-link-type="idl" href="#dom-mediaquerylist-media" id="ref-for-dom-mediaquerylist-media">media</a></code> attribute initialized to <var>target</var>’s <a data-link-type="dfn">media</a>, and its <code class="idl"><a data-link-type="idl" href="#dom-mediaquerylistevent-matches" id="ref-for-dom-mediaquerylistevent-matches">matches</a></code> attribute initialized to <var>target</var>’s matches state. </ol> </ol> <div class="example" id="example-5ecb609e"> <a class="self-link" href="#example-5ecb609e"></a> A simple piece of code that detects changes in the orientation of the viewport can be written as follows: <pre class="highlight"><c- a>function</c-> handleOrientationChange<c- p>(</c->event<c- p>)</c-> <c- p>{</c-> <c- k>if</c-><c- p>(</c->event<c- p>.</c->matches<c- p>)</c-> <c- c1>// landscape</c-> … <c- k>else</c-> … <c- p>}</c-> <c- a>var</c-> mql <c- o>=</c-> matchMedia<c- p>(</c-><c- u>"(orientation:landscape)"</c-><c- p>);</c-> mql<c- p>.</c->onchange <c- o>=</c-> handleOrientationChange<c- p>;</c-> </pre> </div> <pre class="idl highlight def">[<a class="idl-code" data-link-type="extended-attribute" href="https://webidl.spec.whatwg.org/#Exposed" id="ref-for-Exposed"><c- g>Exposed</c-></a>=<c- n>Window</c->] <c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="mediaquerylist"><code><c- g>MediaQueryList</c-></code></dfn> : <a data-link-type="idl-name" href="https://dom.spec.whatwg.org/#eventtarget" id="ref-for-eventtarget"><c- n>EventTarget</c-></a> { <c- b>readonly</c-> <c- b>attribute</c-> <a data-link-type="idl-name" href="https://drafts.csswg.org/cssom-1/#cssomstring" id="ref-for-cssomstring①"><c- n>CSSOMString</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="CSSOMString" href="#dom-mediaquerylist-media" id="ref-for-dom-mediaquerylist-media①"><c- g>media</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-boolean" id="ref-for-idl-boolean"><c- b>boolean</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="boolean" href="#dom-mediaquerylist-matches" id="ref-for-dom-mediaquerylist-matches"><c- g>matches</c-></a>; <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-undefined" id="ref-for-idl-undefined①⓪"><c- b>undefined</c-></a> <a class="idl-code" data-link-type="method" href="#dom-mediaquerylist-addlistener" id="ref-for-dom-mediaquerylist-addlistener"><c- g>addListener</c-></a>(<a data-link-type="idl-name" href="https://dom.spec.whatwg.org/#callbackdef-eventlistener" id="ref-for-callbackdef-eventlistener"><c- n>EventListener</c-></a>? <dfn class="dfn-paneled idl-code" data-dfn-for="MediaQueryList/addListener(callback)" data-dfn-type="argument" data-export id="dom-mediaquerylist-addlistener-callback-callback"><code><c- g>callback</c-></code></dfn>); <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-undefined" id="ref-for-idl-undefined①①"><c- b>undefined</c-></a> <a class="idl-code" data-link-type="method" href="#dom-mediaquerylist-removelistener" id="ref-for-dom-mediaquerylist-removelistener"><c- g>removeListener</c-></a>(<a data-link-type="idl-name" href="https://dom.spec.whatwg.org/#callbackdef-eventlistener" id="ref-for-callbackdef-eventlistener①"><c- n>EventListener</c-></a>? <dfn class="dfn-paneled idl-code" data-dfn-for="MediaQueryList/removeListener(callback)" data-dfn-type="argument" data-export id="dom-mediaquerylist-removelistener-callback-callback"><code><c- g>callback</c-></code></dfn>); <c- b>attribute</c-> <a data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler" id="ref-for-eventhandler"><c- n>EventHandler</c-></a> <a class="idl-code" data-link-type="attribute" data-type="EventHandler" href="#dom-mediaquerylist-onchange" id="ref-for-dom-mediaquerylist-onchange"><c- g>onchange</c-></a>; }; </pre> The <dfn class="dfn-paneled idl-code" data-dfn-for="MediaQueryList" data-dfn-type="attribute" data-export id="dom-mediaquerylist-media"><code>media</code></dfn> attribute must return the associated <a data-link-type="dfn">media</a>. The <dfn class="dfn-paneled idl-code" data-dfn-for="MediaQueryList" data-dfn-type="attribute" data-export id="dom-mediaquerylist-matches"><code>matches</code></dfn> attribute must return the associated <a data-link-type="dfn" href="#mediaquerylist-matches-state" id="ref-for-mediaquerylist-matches-state②">matches state</a>. The <dfn class="dfn-paneled idl-code" data-dfn-for="MediaQueryList" data-dfn-type="method" data-export id="dom-mediaquerylist-addlistener"><code>addListener(<var>callback</var>)</code></dfn> method, when invoked, must run these steps: <ol> <li data-md> <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#add-an-event-listener" id="ref-for-add-an-event-listener">Add an event listener</a> with <a data-link-type="dfn" href="https://webidl.spec.whatwg.org/#this" id="ref-for-this⑤">this</a> and an <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-event-listener" id="ref-for-concept-event-listener">event listener</a> whose <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#event-listener-type" id="ref-for-event-listener-type">type</a> is <code>change</code>, and <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#event-listener-callback" id="ref-for-event-listener-callback">callback</a> is <var>callback</var>. </ol> The <dfn class="dfn-paneled idl-code" data-dfn-for="MediaQueryList" data-dfn-type="method" data-export id="dom-mediaquerylist-removelistener"><code>removeListener(<var>callback</var>)</code></dfn> method, when invoked, must run these steps: <ol> <li data-md> If <a data-link-type="dfn" href="https://webidl.spec.whatwg.org/#this" id="ref-for-this⑥">this</a>’s <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#eventtarget-event-listener-list" id="ref-for-eventtarget-event-listener-list">event listener list</a> <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#list-contain" id="ref-for-list-contain">contains</a> an <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-event-listener" id="ref-for-concept-event-listener①">event listener</a> whose <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#event-listener-type" id="ref-for-event-listener-type①">type</a> is <code>change</code>, <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#event-listener-callback" id="ref-for-event-listener-callback①">callback</a> is <var>callback</var>, and <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#event-listener-capture" id="ref-for-event-listener-capture">capture</a> is false, then <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#remove-an-event-listener" id="ref-for-remove-an-event-listener">remove an event listener</a> with this and that event listener. </ol> Note: This specification initially had a custom callback mechanism with <code class="idl"><a data-link-type="idl" href="#dom-mediaquerylist-addlistener" id="ref-for-dom-mediaquerylist-addlistener①">addListener()</a></code> and <code class="idl"><a data-link-type="idl" href="#dom-mediaquerylist-removelistener" id="ref-for-dom-mediaquerylist-removelistener①">removeListener()</a></code>, and the callback was invoked with the associated media query list as argument. Now the normal event mechanism is used instead. For backwards compatibility, the <code class="idl"><a data-link-type="idl" href="#dom-mediaquerylist-addlistener" id="ref-for-dom-mediaquerylist-addlistener②">addListener()</a></code> and <code class="idl"><a data-link-type="idl" href="#dom-mediaquerylist-removelistener" id="ref-for-dom-mediaquerylist-removelistener②">removeListener()</a></code> methods are basically aliases for <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#dom-eventtarget-addeventlistener" id="ref-for-dom-eventtarget-addeventlistener">addEventListener()</a></code> and <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#dom-eventtarget-removeeventlistener" id="ref-for-dom-eventtarget-removeeventlistener">removeEventListener()</a></code>, respectively, and the <code>change</code> event masquerades as a <code class="idl"><a data-link-type="idl" href="#mediaquerylist" id="ref-for-mediaquerylist⑦">MediaQueryList</a></code>. The following are the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#event-handlers" id="ref-for-event-handlers">event handlers</a> (and their corresponding <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#event-handler-event-type" id="ref-for-event-handler-event-type">event handler event types</a>) that must be supported, as <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#event-handler-idl-attributes" id="ref-for-event-handler-idl-attributes">event handler IDL attributes</a>, by all objects implementing the <code class="idl"><a data-link-type="idl" href="#mediaquerylist" id="ref-for-mediaquerylist⑧">MediaQueryList</a></code> interface: <table class="complex data"> <thead> <tr> <th><a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#event-handlers" id="ref-for-event-handlers①">Event handler</a> <th><a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#event-handler-event-type" id="ref-for-event-handler-event-type①">Event handler event type</a> <tbody> <tr> <td><dfn class="dfn-paneled idl-code" data-dfn-for="MediaQueryList" data-dfn-type="attribute" data-export id="dom-mediaquerylist-onchange"><code>onchange</code></dfn> <td><a class="idl-code" data-link-type="event" href="#eventdef-mediaquerylist-change" id="ref-for-eventdef-mediaquerylist-change①">change</a> </table> <pre class="idl highlight def">[<a class="idl-code" data-link-type="extended-attribute" href="https://webidl.spec.whatwg.org/#Exposed" id="ref-for-Exposed①"><c- g>Exposed</c-></a>=<c- n>Window</c->] <c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="mediaquerylistevent"><code><c- g>MediaQueryListEvent</c-></code></dfn> : <a data-link-type="idl-name" href="https://dom.spec.whatwg.org/#event" id="ref-for-event"><c- n>Event</c-></a> { <dfn class="dfn-paneled idl-code" data-dfn-for="MediaQueryListEvent" data-dfn-type="constructor" data-export data-lt="MediaQueryListEvent(type, eventInitDict)|constructor(type, eventInitDict)|MediaQueryListEvent(type)|constructor(type)" id="dom-mediaquerylistevent-mediaquerylistevent"><code><c- g>constructor</c-></code></dfn>(<a data-link-type="idl-name" href="https://drafts.csswg.org/cssom-1/#cssomstring" id="ref-for-cssomstring②"><c- n>CSSOMString</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="MediaQueryListEvent/MediaQueryListEvent(type, eventInitDict), MediaQueryListEvent/constructor(type, eventInitDict), MediaQueryListEvent/MediaQueryListEvent(type), MediaQueryListEvent/constructor(type)" data-dfn-type="argument" data-export id="dom-mediaquerylistevent-mediaquerylistevent-type-eventinitdict-type"><code><c- g>type</c-></code></dfn>, <c- b>optional</c-> <a data-link-type="idl-name" href="#dictdef-mediaquerylisteventinit" id="ref-for-dictdef-mediaquerylisteventinit"><c- n>MediaQueryListEventInit</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="MediaQueryListEvent/MediaQueryListEvent(type, eventInitDict), MediaQueryListEvent/constructor(type, eventInitDict), MediaQueryListEvent/MediaQueryListEvent(type), MediaQueryListEvent/constructor(type)" data-dfn-type="argument" data-export id="dom-mediaquerylistevent-mediaquerylistevent-type-eventinitdict-eventinitdict"><code><c- g>eventInitDict</c-></code></dfn> = {}); <c- b>readonly</c-> <c- b>attribute</c-> <a data-link-type="idl-name" href="https://drafts.csswg.org/cssom-1/#cssomstring" id="ref-for-cssomstring③"><c- n>CSSOMString</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="CSSOMString" href="#dom-mediaquerylistevent-media" id="ref-for-dom-mediaquerylistevent-media"><c- g>media</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-boolean" id="ref-for-idl-boolean①"><c- b>boolean</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="boolean" href="#dom-mediaquerylistevent-matches" id="ref-for-dom-mediaquerylistevent-matches①"><c- g>matches</c-></a>; }; <c- b>dictionary</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="dictionary" data-export id="dictdef-mediaquerylisteventinit"><code><c- g>MediaQueryListEventInit</c-></code></dfn> : <a data-link-type="idl-name" href="https://dom.spec.whatwg.org/#dictdef-eventinit" id="ref-for-dictdef-eventinit"><c- n>EventInit</c-></a> { <a data-link-type="idl-name" href="https://drafts.csswg.org/cssom-1/#cssomstring" id="ref-for-cssomstring④"><c- n>CSSOMString</c-></a> <dfn class="dfn-paneled idl-code" data-default="""" data-dfn-for="MediaQueryListEventInit" data-dfn-type="dict-member" data-export data-type="CSSOMString" id="dom-mediaquerylisteventinit-media"><code><c- g>media</c-></code></dfn> = ""; <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-boolean" id="ref-for-idl-boolean②"><c- b>boolean</c-></a> <dfn class="dfn-paneled idl-code" data-default="false" data-dfn-for="MediaQueryListEventInit" data-dfn-type="dict-member" data-export data-type="boolean" id="dom-mediaquerylisteventinit-matches"><code><c- g>matches</c-></code></dfn> = <c- b>false</c->; }; </pre> The <dfn class="dfn-paneled idl-code" data-dfn-for="MediaQueryListEvent" data-dfn-type="attribute" data-export id="dom-mediaquerylistevent-media"><code>media</code></dfn> attribute must return the value it was initialized to. The <dfn class="dfn-paneled idl-code" data-dfn-for="MediaQueryListEvent" data-dfn-type="attribute" data-export id="dom-mediaquerylistevent-matches"><code>matches</code></dfn> attribute must return the value it was initialized to. <h4 class="heading settled" data-level="4.2.1" id="mediaquerylist-event-summary">4.2.1. Event summary<a class="self-link" href="#mediaquerylist-event-summary"></a></h4> This section is non-normative. <table class="complex data"> <thead> <tr> <th>Event <th>Interface <th>Interesting targets <th>Description <tbody> <tr> <td><dfn class="dfn-paneled idl-code" data-dfn-for="MediaQueryList" data-dfn-type="event" data-export id="eventdef-mediaquerylist-change"><code>change</code></dfn> <td><code class="idl"><a data-link-type="idl" href="#mediaquerylistevent" id="ref-for-mediaquerylistevent①">MediaQueryListEvent</a></code> <td><code class="idl"><a data-link-type="idl" href="#mediaquerylist" id="ref-for-mediaquerylist⑨">MediaQueryList</a></code> <td>Fired at the <code class="idl"><a data-link-type="idl" href="#mediaquerylist" id="ref-for-mediaquerylist①⓪">MediaQueryList</a></code> when the <a data-link-type="dfn" href="#mediaquerylist-matches-state" id="ref-for-mediaquerylist-matches-state③">matches state</a> changes. </table> <h3 class="heading settled" data-level="4.3" id="the-screen-interface">4.3. The <code class="idl"><a data-link-type="idl" href="#screen" id="ref-for-screen②">Screen</a></code> Interface<a class="self-link" href="#the-screen-interface"></a></h3> As its name suggests, the <code class="idl"><a data-link-type="idl" href="#screen" id="ref-for-screen③">Screen</a></code> interface represents information about the screen of the output device. <pre class="idl highlight def">[<a class="idl-code" data-link-type="extended-attribute" href="https://webidl.spec.whatwg.org/#Exposed" id="ref-for-Exposed②"><c- g>Exposed</c-></a>=<c- n>Window</c->] <c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="screen"><code><c- g>Screen</c-></code></dfn> { <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-long" id="ref-for-idl-long①⑥"><c- b>long</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="long" href="#dom-screen-availwidth" id="ref-for-dom-screen-availwidth"><c- g>availWidth</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-long" id="ref-for-idl-long①⑦"><c- b>long</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="long" href="#dom-screen-availheight" id="ref-for-dom-screen-availheight"><c- g>availHeight</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-long" id="ref-for-idl-long①⑧"><c- b>long</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="long" href="#dom-screen-width" id="ref-for-dom-screen-width"><c- g>width</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-long" id="ref-for-idl-long①⑨"><c- b>long</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="long" href="#dom-screen-height" id="ref-for-dom-screen-height"><c- g>height</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-unsigned-long" id="ref-for-idl-unsigned-long"><c- b>unsigned</c-> <c- b>long</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="unsigned long" href="#dom-screen-colordepth" id="ref-for-dom-screen-colordepth"><c- g>colorDepth</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-unsigned-long" id="ref-for-idl-unsigned-long①"><c- b>unsigned</c-> <c- b>long</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="unsigned long" href="#dom-screen-pixeldepth" id="ref-for-dom-screen-pixeldepth"><c- g>pixelDepth</c-></a>; }; </pre> The <dfn class="dfn-paneled idl-code" data-dfn-for="Screen" data-dfn-type="attribute" data-export id="dom-screen-availwidth"><code>availWidth</code></dfn> attribute must return the width of the <a data-link-type="dfn" href="#web-exposed-available-screen-area" id="ref-for-web-exposed-available-screen-area⑥">Web-exposed available screen area</a>. The <dfn class="dfn-paneled idl-code" data-dfn-for="Screen" data-dfn-type="attribute" data-export id="dom-screen-availheight"><code>availHeight</code></dfn> attribute must return the height of the <a data-link-type="dfn" href="#web-exposed-available-screen-area" id="ref-for-web-exposed-available-screen-area⑦">Web-exposed available screen area</a>. The <dfn class="dfn-paneled idl-code" data-dfn-for="Screen" data-dfn-type="attribute" data-export id="dom-screen-width"><code>width</code></dfn> attribute must return the width of the <a data-link-type="dfn" href="#web-exposed-screen-area" id="ref-for-web-exposed-screen-area④">Web-exposed screen area</a>. The <dfn class="dfn-paneled idl-code" data-dfn-for="Screen" data-dfn-type="attribute" data-export id="dom-screen-height"><code>height</code></dfn> attribute must return the height of the <a data-link-type="dfn" href="#web-exposed-screen-area" id="ref-for-web-exposed-screen-area⑤">Web-exposed screen area</a>. The <dfn class="dfn-paneled idl-code" data-dfn-for="Screen" data-dfn-type="attribute" data-export id="dom-screen-colordepth"><code>colorDepth</code></dfn> and <dfn class="dfn-paneled idl-code" data-dfn-for="Screen" data-dfn-type="attribute" data-export id="dom-screen-pixeldepth"><code>pixelDepth</code></dfn> attributes should return the number of bits allocated to colors for a pixel in the output device, excluding the alpha channel. If the user agent is not able to return the number of bits used by the output device, it should return the closest estimation such as, for example, the number of bits used by the frame buffer sent to the display or any internal representation that would be the closest to the value the output device would use. The user agent must return a value for these attributes at least equal to the value of the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/mediaqueries-5/#descdef-media-color" id="ref-for-descdef-media-color">color</a> media feature multiplied by three. If the different color components are not represented with the same number of bits, the returned value may be greater than three times the value of the color media feature. If the user agent does not know the color depth or does not want to return it for privacy considerations, it should return 24. Note: The <code class="idl"><a data-link-type="idl" href="#dom-screen-colordepth" id="ref-for-dom-screen-colordepth①">colorDepth</a></code> and <code class="idl"><a data-link-type="idl" href="#dom-screen-pixeldepth" id="ref-for-dom-screen-pixeldepth①">pixelDepth</a></code> attributes return the same value for compatibility reasons. Note: Some non-conforming implementations are known to return 32 instead of 24. <h2 class="heading settled" data-level="5" id="extensions-to-the-document-interface">5. Extensions to the <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document" id="ref-for-document⑤">Document</a></code> Interface<a class="self-link" href="#extensions-to-the-document-interface"></a></h2> <pre class="idl highlight def"><c- b>partial</c-> <c- b>interface</c-> <a class="idl-code" data-link-type="interface" href="https://dom.spec.whatwg.org/#document" id="ref-for-document⑥"><c- g>Document</c-></a> { <a data-link-type="idl-name" href="https://dom.spec.whatwg.org/#element" id="ref-for-element"><c- n>Element</c-></a>? <a class="idl-code" data-link-type="method" href="#dom-document-elementfrompoint" id="ref-for-dom-document-elementfrompoint"><c- g>elementFromPoint</c-></a>(<a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-double" id="ref-for-idl-double⑤"><c- b>double</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="Document/elementFromPoint(x, y)" data-dfn-type="argument" data-export id="dom-document-elementfrompoint-x-y-x"><code><c- g>x</c-></code></dfn>, <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-double" id="ref-for-idl-double⑥"><c- b>double</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="Document/elementFromPoint(x, y)" data-dfn-type="argument" data-export id="dom-document-elementfrompoint-x-y-y"><code><c- g>y</c-></code></dfn>); <a data-link-type="dfn" href="https://webidl.spec.whatwg.org/#idl-sequence" id="ref-for-idl-sequence"><c- b>sequence</c-></a><<a data-link-type="idl-name" href="https://dom.spec.whatwg.org/#element" id="ref-for-element①"><c- n>Element</c-></a>> <a class="idl-code" data-link-type="method" href="#dom-document-elementsfrompoint" id="ref-for-dom-document-elementsfrompoint"><c- g>elementsFromPoint</c-></a>(<a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-double" id="ref-for-idl-double⑦"><c- b>double</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="Document/elementsFromPoint(x, y)" data-dfn-type="argument" data-export id="dom-document-elementsfrompoint-x-y-x"><code><c- g>x</c-></code></dfn>, <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-double" id="ref-for-idl-double⑧"><c- b>double</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="Document/elementsFromPoint(x, y)" data-dfn-type="argument" data-export id="dom-document-elementsfrompoint-x-y-y"><code><c- g>y</c-></code></dfn>); <a data-link-type="idl-name" href="#caretposition" id="ref-for-caretposition"><c- n>CaretPosition</c-></a>? <a class="idl-code" data-link-type="method" href="#dom-document-caretpositionfrompoint" id="ref-for-dom-document-caretpositionfrompoint"><c- g>caretPositionFromPoint</c-></a>(<a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-double" id="ref-for-idl-double⑨"><c- b>double</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="Document/caretPositionFromPoint(x, y, options), Document/caretPositionFromPoint(x, y)" data-dfn-type="argument" data-export id="dom-document-caretpositionfrompoint-x-y-options-x"><code><c- g>x</c-></code></dfn>, <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-double" id="ref-for-idl-double①⓪"><c- b>double</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="Document/caretPositionFromPoint(x, y, options), Document/caretPositionFromPoint(x, y)" data-dfn-type="argument" data-export id="dom-document-caretpositionfrompoint-x-y-options-y"><code><c- g>y</c-></code></dfn>, <c- b>optional</c-> <a data-link-type="idl-name" href="#dictdef-caretpositionfrompointoptions" id="ref-for-dictdef-caretpositionfrompointoptions"><c- n>CaretPositionFromPointOptions</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="Document/caretPositionFromPoint(x, y, options), Document/caretPositionFromPoint(x, y)" data-dfn-type="argument" data-export id="dom-document-caretpositionfrompoint-x-y-options-options"><code><c- g>options</c-></code></dfn> = {}); <c- b>readonly</c-> <c- b>attribute</c-> <a data-link-type="idl-name" href="https://dom.spec.whatwg.org/#element" id="ref-for-element②"><c- n>Element</c-></a>? <a class="idl-code" data-link-type="attribute" data-readonly data-type="Element?" href="#dom-document-scrollingelement" id="ref-for-dom-document-scrollingelement"><c- g>scrollingElement</c-></a>; }; <c- b>dictionary</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="dictionary" data-export id="dictdef-caretpositionfrompointoptions"><code><c- g>CaretPositionFromPointOptions</c-></code></dfn> { <a data-link-type="dfn" href="https://webidl.spec.whatwg.org/#idl-sequence" id="ref-for-idl-sequence①"><c- b>sequence</c-></a><<a data-link-type="idl-name" href="https://dom.spec.whatwg.org/#shadowroot" id="ref-for-shadowroot"><c- n>ShadowRoot</c-></a>> <dfn class="dfn-paneled idl-code" data-default="[]" data-dfn-for="CaretPositionFromPointOptions" data-dfn-type="dict-member" data-export data-type="sequence<ShadowRoot>" id="dom-caretpositionfrompointoptions-shadowroots"><code><c- g>shadowRoots</c-></code></dfn> = []; }; </pre> The <dfn class="dfn-paneled caniuse-paneled idl-code" data-dfn-for="Document" data-dfn-type="method" data-export id="dom-document-elementfrompoint"><code>elementFromPoint(<var>x</var>, <var>y</var>)</code></dfn> method must follow these steps: <ol> <li data-md> If either argument is negative, <var>x</var> is greater than the <a data-link-type="dfn" href="https://drafts.csswg.org/css2/#viewport%E2%91%A0" id="ref-for-viewport%E2%91%A0⑤⑤">viewport</a> width excluding the size of a rendered scroll bar (if any), or <var>y</var> is greater than the viewport height excluding the size of a rendered scroll bar (if any), or there is no viewport associated with the document, return null and terminate these steps. <li data-md> If there is a <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#box" id="ref-for-box④">box</a> in the <a data-link-type="dfn" href="https://drafts.csswg.org/css2/#viewport%E2%91%A0" id="ref-for-viewport%E2%91%A0⑤⑧">viewport</a> that would be a target for hit testing at coordinates <var>x</var>,<var>y</var>, when applying the <a data-link-type="dfn" href="#transforms" id="ref-for-transforms">transforms</a> that apply to the descendants of the viewport, return the associated element and terminate these steps. <li data-md> If the document has a <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#root-element" id="ref-for-root-element②">root element</a>, return the root element and terminate these steps. <li data-md> Return null. </ol> Note: The <code class="idl"><a data-link-type="idl" href="#dom-document-elementfrompoint" id="ref-for-dom-document-elementfrompoint①">elementFromPoint()</a></code> method does not necessarily return the top-most painted element. For instance, an element can be excluded from being a target for hit testing by using the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-ui-4/#propdef-pointer-events" id="ref-for-propdef-pointer-events">pointer-events</a> CSS property. The <dfn class="dfn-paneled idl-code" data-dfn-for="Document" data-dfn-type="method" data-export id="dom-document-elementsfrompoint"><code>elementsFromPoint(<var>x</var>, <var>y</var>)</code></dfn> method must follow these steps: <ol> <li data-md> Let <var>sequence</var> be a new empty sequence. <li data-md> If either argument is negative, <var>x</var> is greater than the <a data-link-type="dfn" href="https://drafts.csswg.org/css2/#viewport%E2%91%A0" id="ref-for-viewport%E2%91%A0⑥⓪">viewport</a> width excluding the size of a rendered scroll bar (if any), or <var>y</var> is greater than the viewport height excluding the size of a rendered scroll bar (if any), or there is no viewport associated with the document, return <var>sequence</var> and terminate these steps. <li data-md> For each <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#box" id="ref-for-box⑤">box</a> in the <a data-link-type="dfn" href="https://drafts.csswg.org/css2/#viewport%E2%91%A0" id="ref-for-viewport%E2%91%A0⑥③">viewport</a>, in paint order, starting with the topmost box, that would be a target for hit testing at coordinates <var>x</var>,<var>y</var> even if nothing would be overlapping it, when applying the <a data-link-type="dfn" href="#transforms" id="ref-for-transforms①">transforms</a> that apply to the descendants of the viewport, append the associated element to <var>sequence</var>. <li data-md> If the document has a <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#root-element" id="ref-for-root-element④">root element</a>, and the last item in <var>sequence</var> is not the root element, append the root element to <var>sequence</var>. <li data-md> Return <var>sequence</var>. </ol> The <dfn class="dfn-paneled idl-code" data-dfn-for="Document" data-dfn-type="method" data-export data-lt="caretPositionFromPoint(x, y, options)|caretPositionFromPoint(x, y)" id="dom-document-caretpositionfrompoint"><code>caretPositionFromPoint(<var>x</var>, <var>y</var>, <var>options</var>)</code></dfn> method must return the result of running these steps: <ol> <li data-md> If there is no <a data-link-type="dfn" href="https://drafts.csswg.org/css2/#viewport%E2%91%A0" id="ref-for-viewport%E2%91%A0⑥⑤">viewport</a> associated with the document, return null. <li data-md> If either argument is negative, <var>x</var> is greater than the <a data-link-type="dfn" href="https://drafts.csswg.org/css2/#viewport%E2%91%A0" id="ref-for-viewport%E2%91%A0⑥⑥">viewport</a> width excluding the size of a rendered scroll bar (if any), <var>y</var> is greater than the viewport height excluding the size of a rendered scroll bar (if any) return null. <li data-md> If at the coordinates <var>x</var>,<var>y</var> in the <a data-link-type="dfn" href="https://drafts.csswg.org/css2/#viewport%E2%91%A0" id="ref-for-viewport%E2%91%A0⑥⑧">viewport</a> no text insertion point indicator would have been inserted when applying the <a data-link-type="dfn" href="#transforms" id="ref-for-transforms②">transforms</a> that apply to the descendants of the viewport, return null. <li data-md> If at the coordinates <var>x</var>,<var>y</var> in the <a data-link-type="dfn" href="https://drafts.csswg.org/css2/#viewport%E2%91%A0" id="ref-for-viewport%E2%91%A0⑦⓪">viewport</a> a text insertion point indicator would have been inserted in a text entry widget which is also a replaced element, when applying the <a data-link-type="dfn" href="#transforms" id="ref-for-transforms③">transforms</a> that apply to the descendants of the viewport, return a <a data-link-type="dfn" href="#caret-position" id="ref-for-caret-position">caret position</a> with its properties set as follows: <dl> <dt><a data-link-type="dfn" href="#caret-node" id="ref-for-caret-node">caret node</a> <dd>The node corresponding to the text entry widget. <dt><a data-link-type="dfn" href="#caret-offset" id="ref-for-caret-offset">caret offset</a> <dd>The amount of 16-bit units to the left of where the text insertion point indicator would have inserted. </dl> <li data-md> Otherwise: <ol> <li data-md> Let <var>caretPosition</var> be a <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#tuple" id="ref-for-tuple">tuple</a> consisting of a <var>caretPositionNode</var> (a <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-node" id="ref-for-concept-node">node</a>) and a <var>caretPositionOffset</var> (a non-negative integer) for the position where the text insertion point indicator would have been inserted when applying the <a data-link-type="dfn" href="#transforms" id="ref-for-transforms④">transforms</a> that apply to the descendants of the <a data-link-type="dfn" href="https://drafts.csswg.org/css2/#viewport%E2%91%A0" id="ref-for-viewport%E2%91%A0⑦②">viewport</a>. <li data-md> Let <var>startNode</var> be the <var>caretPositionNode</var> of the <var>caretPosition</var>, and let <var>startOffset</var> be the <var>caretPositionOffset</var> of the <var>caretPosition</var>. <li data-md> While <var>startNode</var> is a <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#boundary-point-node" id="ref-for-boundary-point-node">node</a>, <var>startNode</var>’s <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-tree-root" id="ref-for-concept-tree-root">root</a> is a <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element-shadow-root" id="ref-for-concept-element-shadow-root">shadow root</a>, and <var>startNode</var>’s root is not a <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-shadow-including-inclusive-ancestor" id="ref-for-concept-shadow-including-inclusive-ancestor">shadow-including inclusive ancestor</a> of any of <var>options</var>["<code class="idl"><a data-link-type="idl" href="#dom-caretpositionfrompointoptions-shadowroots" id="ref-for-dom-caretpositionfrompointoptions-shadowroots">shadowRoots</a></code>"], repeat these steps: <ol> <li data-md> Set <var>startOffset</var> to <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-tree-index" id="ref-for-concept-tree-index">index</a> of <var>startNode</var>’s <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-tree-root" id="ref-for-concept-tree-root②">root</a>’s <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-documentfragment-host" id="ref-for-concept-documentfragment-host">host</a>. <li data-md> Set <var>startNode</var> to <var>startNode</var>’s <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-tree-root" id="ref-for-concept-tree-root③">root</a>’s <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-documentfragment-host" id="ref-for-concept-documentfragment-host①">host</a>’s <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-tree-parent" id="ref-for-concept-tree-parent">parent</a>. </ol> <li data-md> Return a <a data-link-type="dfn" href="#caret-position" id="ref-for-caret-position①">caret position</a> with its properties set as follows: <ol> <li data-md> <a data-link-type="dfn" href="#caret-node" id="ref-for-caret-node①">caret node</a> is set to <var>startNode</var>. <li data-md> <a data-link-type="dfn" href="#caret-offset" id="ref-for-caret-offset①">caret offset</a> is set to <var>startOffset</var>. </ol> </ol> </ol> Note: This <a data-link-type="dfn" href="#caret-position" id="ref-for-caret-position②">caret position</a> is not <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/infrastructure.html#live" id="ref-for-live">live</a>. Note: The specifics of hit testing are out of scope of this specification and therefore the exact details of <code class="idl"><a data-link-type="idl" href="#dom-document-elementfrompoint" id="ref-for-dom-document-elementfrompoint②">elementFromPoint()</a></code> and <code class="idl"><a data-link-type="idl" href="#dom-document-caretpositionfrompoint" id="ref-for-dom-document-caretpositionfrompoint①">caretPositionFromPoint()</a></code> are therefore too. Hit testing will hopefully be defined in a future revision of CSS or HTML. The <dfn class="dfn-paneled caniuse-paneled idl-code" data-dfn-for="Document" data-dfn-type="attribute" data-export id="dom-document-scrollingelement"><code>scrollingElement</code></dfn> attribute, on getting, must run these steps: <ol> <li data-md> If the <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document" id="ref-for-document⑦">Document</a></code> is in <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-document-quirks" id="ref-for-concept-document-quirks">quirks mode</a>, follow these substeps: <ol> <li data-md> If <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/dom.html#the-body-element-2" id="ref-for-the-body-element-2①">the <code>body</code> element</a> exists, and it is not <a data-link-type="dfn" href="#potentially-scrollable" id="ref-for-potentially-scrollable①">potentially scrollable</a>, return the <code>body</code> element and abort these steps. For this purpose, a value of overflow:clip on the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/dom.html#the-body-element-2" id="ref-for-the-body-element-2③">the <code>body</code> element</a>’s parent element must be treated as overflow:hidden. <li data-md> Return null and abort these steps. </ol> <li data-md> If there is a <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#root-element" id="ref-for-root-element⑦">root element</a>, return the root element and abort these steps. <li data-md> Return null. </ol> Note: For non-conforming user agents that always use the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-document-quirks" id="ref-for-concept-document-quirks①">quirks mode</a> behavior for <code class="idl"><a data-link-type="idl" href="#dom-element-scrolltop" id="ref-for-dom-element-scrolltop">scrollTop</a></code> and <code class="idl"><a data-link-type="idl" href="#dom-element-scrollleft" id="ref-for-dom-element-scrollleft">scrollLeft</a></code>, the <code class="idl"><a data-link-type="idl" href="#dom-document-scrollingelement" id="ref-for-dom-document-scrollingelement①">scrollingElement</a></code> attribute is expected to also always return <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/dom.html#the-body-element-2" id="ref-for-the-body-element-2④">the <code>body</code> element</a> (or null if it does not exist). This API exists so that Web developers can use it to get the right element to use for scrolling APIs, without making assumptions about a particular user agent’s behavior or having to invoke a scroll to see which element scrolls the viewport. Note: <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/dom.html#the-body-element-2" id="ref-for-the-body-element-2⑤">the <code>body</code> element</a> is different from HTML’s <code>document.body</code> in that the latter can return a <code>frameset</code> element. <h3 class="heading settled" data-level="5.1" id="the-caretposition-interface">5.1. The <code class="idl"><a data-link-type="idl" href="#caretposition" id="ref-for-caretposition①">CaretPosition</a></code> Interface<a class="self-link" href="#the-caretposition-interface"></a></h3> A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="caret-position">caret position</dfn> gives the position of a text insertion point indicator. It always has an associated <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="caret-node">caret node</dfn> and <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="caret-offset">caret offset</dfn>. It is represented by a <code class="idl"><a data-link-type="idl" href="#caretposition" id="ref-for-caretposition②">CaretPosition</a></code> object. <pre class="idl highlight def">[<a class="idl-code" data-link-type="extended-attribute" href="https://webidl.spec.whatwg.org/#Exposed" id="ref-for-Exposed③"><c- g>Exposed</c-></a>=<c- n>Window</c->] <c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="caretposition"><code><c- g>CaretPosition</c-></code></dfn> { <c- b>readonly</c-> <c- b>attribute</c-> <a data-link-type="idl-name" href="https://dom.spec.whatwg.org/#node" id="ref-for-node"><c- n>Node</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="Node" href="#dom-caretposition-offsetnode" id="ref-for-dom-caretposition-offsetnode"><c- g>offsetNode</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-unsigned-long" id="ref-for-idl-unsigned-long②"><c- b>unsigned</c-> <c- b>long</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="unsigned long" href="#dom-caretposition-offset" id="ref-for-dom-caretposition-offset"><c- g>offset</c-></a>; [<a class="idl-code" data-link-type="extended-attribute" href="https://webidl.spec.whatwg.org/#NewObject" id="ref-for-NewObject①"><c- g>NewObject</c-></a>] <a data-link-type="idl-name" href="https://drafts.fxtf.org/geometry-1/#domrect" id="ref-for-domrect"><c- n>DOMRect</c-></a>? <a class="idl-code" data-link-type="method" href="#dom-caretposition-getclientrect" id="ref-for-dom-caretposition-getclientrect"><c- g>getClientRect</c-></a>(); }; </pre> The <dfn class="dfn-paneled idl-code" data-dfn-for="CaretPosition" data-dfn-type="attribute" data-export id="dom-caretposition-offsetnode"><code>offsetNode</code></dfn> attribute must return the <a data-link-type="dfn" href="#caret-node" id="ref-for-caret-node②">caret node</a>. The <dfn class="dfn-paneled idl-code" data-dfn-for="CaretPosition" data-dfn-type="attribute" data-export id="dom-caretposition-offset"><code>offset</code></dfn> attribute must return the <a data-link-type="dfn" href="#caret-offset" id="ref-for-caret-offset②">caret offset</a>. The <dfn class="dfn-paneled idl-code" data-dfn-for="CaretPosition" data-dfn-type="method" data-export id="dom-caretposition-getclientrect"><code>getClientRect()</code></dfn> method must follow these steps, aborting on the first step that returns a value: <ol> <li data-md> If <a data-link-type="dfn" href="#caret-node" id="ref-for-caret-node③">caret node</a> is a text entry widget that is a replaced element, and that is in the document, return a <a data-link-type="dfn" href="https://drafts.csswg.org/css-viewport/#scaled" id="ref-for-scaled">scaled</a> <code class="idl"><a data-link-type="idl" href="https://drafts.fxtf.org/geometry-1/#domrect" id="ref-for-domrect①">DOMRect</a></code> object for the caret in the widget as represented by the <a data-link-type="dfn" href="#caret-offset" id="ref-for-caret-offset③">caret offset</a> value. The <a data-link-type="dfn" href="#transforms" id="ref-for-transforms⑤">transforms</a> that apply to the element and its ancestors are applied. <li data-md> Otherwise: <ol> <li data-md> Let <var>caretRange</var> be a collapsed <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#range" id="ref-for-range">Range</a></code> object whose <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-range-start-node" id="ref-for-concept-range-start-node">start node</a> and <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-range-end-node" id="ref-for-concept-range-end-node">end node</a> are set to <a data-link-type="dfn" href="#caret-node" id="ref-for-caret-node④">caret node</a>, and whose <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-range-start-offset" id="ref-for-concept-range-start-offset">start offset</a> and <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-range-end-offset" id="ref-for-concept-range-end-offset">end offset</a> are set to <a data-link-type="dfn" href="#caret-offset" id="ref-for-caret-offset④">caret offset</a>. <li data-md> Return the <code class="idl"><a data-link-type="idl" href="https://drafts.fxtf.org/geometry-1/#domrect" id="ref-for-domrect②">DOMRect</a></code> object which is the result of invoking the <code class="idl"><a data-link-type="idl" href="#dom-range-getboundingclientrect" id="ref-for-dom-range-getboundingclientrect">getBoundingClientRect()</a></code> method on <var>caretRange</var>. </ol> </ol> Note: This <code class="idl"><a data-link-type="idl" href="https://drafts.fxtf.org/geometry-1/#domrect" id="ref-for-domrect③">DOMRect</a></code> object is not <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/infrastructure.html#live" id="ref-for-live①">live</a>. <h2 class="heading settled caniuse-paneled" data-level="6" id="extension-to-the-element-interface">6. Extensions to the <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#element" id="ref-for-element③">Element</a></code> Interface<a class="self-link" href="#extension-to-the-element-interface"></a></h2> <pre class="idl highlight def"><c- b>enum</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="enum" data-export id="enumdef-scrolllogicalposition"><code><c- g>ScrollLogicalPosition</c-></code></dfn> { <dfn class="dfn-paneled idl-code" data-dfn-for="ScrollLogicalPosition" data-dfn-type="enum-value" data-export id="dom-scrolllogicalposition-start"><code><c- s>"start"</c-></code></dfn>, <dfn class="dfn-paneled idl-code" data-dfn-for="ScrollLogicalPosition" data-dfn-type="enum-value" data-export id="dom-scrolllogicalposition-center"><code><c- s>"center"</c-></code></dfn>, <dfn class="dfn-paneled idl-code" data-dfn-for="ScrollLogicalPosition" data-dfn-type="enum-value" data-export id="dom-scrolllogicalposition-end"><code><c- s>"end"</c-></code></dfn>, <dfn class="dfn-paneled idl-code" data-dfn-for="ScrollLogicalPosition" data-dfn-type="enum-value" data-export id="dom-scrolllogicalposition-nearest"><code><c- s>"nearest"</c-></code></dfn> }; <c- b>dictionary</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="dictionary" data-export id="dictdef-scrollintoviewoptions"><code><c- g>ScrollIntoViewOptions</c-></code></dfn> : <a data-link-type="idl-name" href="#dictdef-scrolloptions" id="ref-for-dictdef-scrolloptions①"><c- n>ScrollOptions</c-></a> { <a data-link-type="idl-name" href="#enumdef-scrolllogicalposition" id="ref-for-enumdef-scrolllogicalposition"><c- n>ScrollLogicalPosition</c-></a> <dfn class="dfn-paneled idl-code" data-default=""start"" data-dfn-for="ScrollIntoViewOptions" data-dfn-type="dict-member" data-export data-type="ScrollLogicalPosition" id="dom-scrollintoviewoptions-block"><code><c- g>block</c-></code></dfn> = "start"; <a data-link-type="idl-name" href="#enumdef-scrolllogicalposition" id="ref-for-enumdef-scrolllogicalposition①"><c- n>ScrollLogicalPosition</c-></a> <dfn class="dfn-paneled idl-code" data-default=""nearest"" data-dfn-for="ScrollIntoViewOptions" data-dfn-type="dict-member" data-export data-type="ScrollLogicalPosition" id="dom-scrollintoviewoptions-inline"><code><c- g>inline</c-></code></dfn> = "nearest"; <a data-link-type="idl-name" href="#enumdef-scrollintoviewcontainer" id="ref-for-enumdef-scrollintoviewcontainer"><c- n>ScrollIntoViewContainer</c-></a> <dfn class="dfn-paneled idl-code" data-default=""all"" data-dfn-for="ScrollIntoViewOptions" data-dfn-type="dict-member" data-export data-type="ScrollIntoViewContainer" id="dom-scrollintoviewoptions-container"><code><c- g>container</c-></code></dfn> = "all"; }; <c- b>enum</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="enum" data-export id="enumdef-scrollintoviewcontainer"><code><c- g>ScrollIntoViewContainer</c-></code></dfn> { <dfn class="dfn-paneled idl-code" data-dfn-for="ScrollIntoViewContainer" data-dfn-type="enum-value" data-export id="dom-scrollintoviewcontainer-all"><code><c- s>"all"</c-></code></dfn>, <dfn class="dfn-paneled idl-code" data-dfn-for="ScrollIntoViewContainer" data-dfn-type="enum-value" data-export id="dom-scrollintoviewcontainer-nearest"><code><c- s>"nearest"</c-></code></dfn> }; <c- b>dictionary</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="dictionary" data-export id="dictdef-checkvisibilityoptions"><code><c- g>CheckVisibilityOptions</c-></code></dfn> { <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-boolean" id="ref-for-idl-boolean③"><c- b>boolean</c-></a> <dfn class="dfn-paneled idl-code" data-default="false" data-dfn-for="CheckVisibilityOptions" data-dfn-type="dict-member" data-export data-type="boolean" id="dom-checkvisibilityoptions-checkopacity"><code><c- g>checkOpacity</c-></code></dfn> = <c- b>false</c->; <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-boolean" id="ref-for-idl-boolean④"><c- b>boolean</c-></a> <dfn class="dfn-paneled idl-code" data-default="false" data-dfn-for="CheckVisibilityOptions" data-dfn-type="dict-member" data-export data-type="boolean" id="dom-checkvisibilityoptions-checkvisibilitycss"><code><c- g>checkVisibilityCSS</c-></code></dfn> = <c- b>false</c->; <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-boolean" id="ref-for-idl-boolean⑤"><c- b>boolean</c-></a> <dfn class="dfn-paneled idl-code" data-default="false" data-dfn-for="CheckVisibilityOptions" data-dfn-type="dict-member" data-export data-type="boolean" id="dom-checkvisibilityoptions-contentvisibilityauto"><code><c- g>contentVisibilityAuto</c-></code></dfn> = <c- b>false</c->; <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-boolean" id="ref-for-idl-boolean⑥"><c- b>boolean</c-></a> <dfn class="dfn-paneled idl-code" data-default="false" data-dfn-for="CheckVisibilityOptions" data-dfn-type="dict-member" data-export data-type="boolean" id="dom-checkvisibilityoptions-opacityproperty"><code><c- g>opacityProperty</c-></code></dfn> = <c- b>false</c->; <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-boolean" id="ref-for-idl-boolean⑦"><c- b>boolean</c-></a> <dfn class="dfn-paneled idl-code" data-default="false" data-dfn-for="CheckVisibilityOptions" data-dfn-type="dict-member" data-export data-type="boolean" id="dom-checkvisibilityoptions-visibilityproperty"><code><c- g>visibilityProperty</c-></code></dfn> = <c- b>false</c->; }; <c- b>partial</c-> <c- b>interface</c-> <a class="idl-code" data-link-type="interface" href="https://dom.spec.whatwg.org/#element" id="ref-for-element④"><c- g>Element</c-></a> { <a data-link-type="idl-name" href="https://drafts.fxtf.org/geometry-1/#domrectlist" id="ref-for-domrectlist"><c- n>DOMRectList</c-></a> <a class="idl-code" data-link-type="method" href="#dom-element-getclientrects" id="ref-for-dom-element-getclientrects"><c- g>getClientRects</c-></a>(); [<a class="idl-code" data-link-type="extended-attribute" href="https://webidl.spec.whatwg.org/#NewObject" id="ref-for-NewObject②"><c- g>NewObject</c-></a>] <a data-link-type="idl-name" href="https://drafts.fxtf.org/geometry-1/#domrect" id="ref-for-domrect④"><c- n>DOMRect</c-></a> <a class="idl-code" data-link-type="method" href="#dom-element-getboundingclientrect" id="ref-for-dom-element-getboundingclientrect"><c- g>getBoundingClientRect</c-></a>(); <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-boolean" id="ref-for-idl-boolean⑧"><c- b>boolean</c-></a> <a class="idl-code" data-link-type="method" href="#dom-element-checkvisibility" id="ref-for-dom-element-checkvisibility"><c- g>checkVisibility</c-></a>(<c- b>optional</c-> <a data-link-type="idl-name" href="#dictdef-checkvisibilityoptions" id="ref-for-dictdef-checkvisibilityoptions"><c- n>CheckVisibilityOptions</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="Element/checkVisibility(options), Element/checkVisibility()" data-dfn-type="argument" data-export id="dom-element-checkvisibility-options-options"><code><c- g>options</c-></code></dfn> = {}); <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-undefined" id="ref-for-idl-undefined①②"><c- b>undefined</c-></a> <a class="idl-code" data-link-type="method" href="#dom-element-scrollintoview" id="ref-for-dom-element-scrollintoview"><c- g>scrollIntoView</c-></a>(<c- b>optional</c-> (<a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-boolean" id="ref-for-idl-boolean⑨"><c- b>boolean</c-></a> <c- b>or</c-> <a data-link-type="idl-name" href="#dictdef-scrollintoviewoptions" id="ref-for-dictdef-scrollintoviewoptions"><c- n>ScrollIntoViewOptions</c-></a>) <dfn class="dfn-paneled idl-code" data-dfn-for="Element/scrollIntoView(arg), Element/scrollIntoView()" data-dfn-type="argument" data-export id="dom-element-scrollintoview-arg-arg"><code><c- g>arg</c-></code></dfn> = {}); <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-undefined" id="ref-for-idl-undefined①③"><c- b>undefined</c-></a> <a class="idl-code" data-link-type="method" href="#dom-element-scroll" id="ref-for-dom-element-scroll"><c- g>scroll</c-></a>(<c- b>optional</c-> <a data-link-type="idl-name" href="#dictdef-scrolltooptions" id="ref-for-dictdef-scrolltooptions⑤"><c- n>ScrollToOptions</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="Element/scroll(options), Element/scroll()" data-dfn-type="argument" data-export id="dom-element-scroll-options-options"><code><c- g>options</c-></code></dfn> = {}); <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-undefined" id="ref-for-idl-undefined①④"><c- b>undefined</c-></a> <a class="idl-code" data-link-type="method" href="#dom-element-scroll" id="ref-for-dom-element-scroll①"><c- g>scroll</c-></a>(<a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑧"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="Element/scroll(x, y)" data-dfn-type="argument" data-export id="dom-element-scroll-x-y-x"><code><c- g>x</c-></code></dfn>, <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double⑨"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="Element/scroll(x, y)" data-dfn-type="argument" data-export id="dom-element-scroll-x-y-y"><code><c- g>y</c-></code></dfn>); <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-undefined" id="ref-for-idl-undefined①⑤"><c- b>undefined</c-></a> <a class="idl-code" data-link-type="method" href="#dom-element-scrollto" id="ref-for-dom-element-scrollto"><c- g>scrollTo</c-></a>(<c- b>optional</c-> <a data-link-type="idl-name" href="#dictdef-scrolltooptions" id="ref-for-dictdef-scrolltooptions⑥"><c- n>ScrollToOptions</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="Element/scrollTo(options), Element/scrollTo()" data-dfn-type="argument" data-export id="dom-element-scrollto-options-options"><code><c- g>options</c-></code></dfn> = {}); <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-undefined" id="ref-for-idl-undefined①⑥"><c- b>undefined</c-></a> <a class="idl-code" data-link-type="method" href="#dom-element-scrollto" id="ref-for-dom-element-scrollto①"><c- g>scrollTo</c-></a>(<a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①⓪"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="Element/scrollTo(x, y)" data-dfn-type="argument" data-export id="dom-element-scrollto-x-y-x"><code><c- g>x</c-></code></dfn>, <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①①"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="Element/scrollTo(x, y)" data-dfn-type="argument" data-export id="dom-element-scrollto-x-y-y"><code><c- g>y</c-></code></dfn>); <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-undefined" id="ref-for-idl-undefined①⑦"><c- b>undefined</c-></a> <a class="idl-code" data-link-type="method" href="#dom-element-scrollby" id="ref-for-dom-element-scrollby"><c- g>scrollBy</c-></a>(<c- b>optional</c-> <a data-link-type="idl-name" href="#dictdef-scrolltooptions" id="ref-for-dictdef-scrolltooptions⑦"><c- n>ScrollToOptions</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="Element/scrollBy(options), Element/scrollBy()" data-dfn-type="argument" data-export id="dom-element-scrollby-options-options"><code><c- g>options</c-></code></dfn> = {}); <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-undefined" id="ref-for-idl-undefined①⑧"><c- b>undefined</c-></a> <a class="idl-code" data-link-type="method" href="#dom-element-scrollby" id="ref-for-dom-element-scrollby①"><c- g>scrollBy</c-></a>(<a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①②"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="Element/scrollBy(x, y)" data-dfn-type="argument" data-export id="dom-element-scrollby-x-y-x"><code><c- g>x</c-></code></dfn>, <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①③"><c- b>unrestricted</c-> <c- b>double</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="Element/scrollBy(x, y)" data-dfn-type="argument" data-export id="dom-element-scrollby-x-y-y"><code><c- g>y</c-></code></dfn>); <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①④"><c- b>unrestricted</c-> <c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-type="unrestricted double" href="#dom-element-scrolltop" id="ref-for-dom-element-scrolltop①"><c- g>scrollTop</c-></a>; <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double①⑤"><c- b>unrestricted</c-> <c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-type="unrestricted double" href="#dom-element-scrollleft" id="ref-for-dom-element-scrollleft①"><c- g>scrollLeft</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-long" id="ref-for-idl-long②⓪"><c- b>long</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="long" href="#dom-element-scrollwidth" id="ref-for-dom-element-scrollwidth"><c- g>scrollWidth</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-long" id="ref-for-idl-long②①"><c- b>long</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="long" href="#dom-element-scrollheight" id="ref-for-dom-element-scrollheight"><c- g>scrollHeight</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-long" id="ref-for-idl-long②②"><c- b>long</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="long" href="#dom-element-clienttop" id="ref-for-dom-element-clienttop"><c- g>clientTop</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-long" id="ref-for-idl-long②③"><c- b>long</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="long" href="#dom-element-clientleft" id="ref-for-dom-element-clientleft"><c- g>clientLeft</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-long" id="ref-for-idl-long②④"><c- b>long</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="long" href="#dom-element-clientwidth" id="ref-for-dom-element-clientwidth"><c- g>clientWidth</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-long" id="ref-for-idl-long②⑤"><c- b>long</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="long" href="#dom-element-clientheight" id="ref-for-dom-element-clientheight"><c- g>clientHeight</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-double" id="ref-for-idl-double①①"><c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="double" href="#dom-element-currentcsszoom" id="ref-for-dom-element-currentcsszoom"><c- g>currentCSSZoom</c-></a>; }; </pre> Note: The <code class="idl"><a data-link-type="idl" href="#dom-checkvisibilityoptions-checkopacity" id="ref-for-dom-checkvisibilityoptions-checkopacity">checkOpacity</a></code> and <code class="idl"><a data-link-type="idl" href="#dom-checkvisibilityoptions-checkvisibilitycss" id="ref-for-dom-checkvisibilityoptions-checkvisibilitycss">checkVisibilityCSS</a></code> properties are historical names. These properties have aliases that match the new naming scheme, namely <code class="idl"><a data-link-type="idl" href="#dom-checkvisibilityoptions-opacityproperty" id="ref-for-dom-checkvisibilityoptions-opacityproperty">opacityProperty</a></code> and <code class="idl"><a data-link-type="idl" href="#dom-checkvisibilityoptions-visibilityproperty" id="ref-for-dom-checkvisibilityoptions-visibilityproperty">visibilityProperty</a></code>. The <dfn class="dfn-paneled idl-code" data-dfn-for="Element" data-dfn-type="method" data-export id="dom-element-getclientrects"><code>getClientRects()</code></dfn> method, when invoked, must return the result of the following algorithm: <ol> <li data-md> If the element on which it was invoked does not have an associated <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#box" id="ref-for-box⑥">box</a> return an empty <code class="idl"><a data-link-type="idl" href="https://drafts.fxtf.org/geometry-1/#domrectlist" id="ref-for-domrectlist①">DOMRectList</a></code> object and stop this algorithm. <li data-md> If the element has an associated <a data-link-type="dfn" href="#svg-layout-box" id="ref-for-svg-layout-box">SVG layout box</a> return a <a data-link-type="dfn" href="https://drafts.csswg.org/css-viewport/#scaled" id="ref-for-scaled①">scaled</a> <code class="idl"><a data-link-type="idl" href="https://drafts.fxtf.org/geometry-1/#domrectlist" id="ref-for-domrectlist②">DOMRectList</a></code> object containing a single <code class="idl"><a data-link-type="idl" href="https://drafts.fxtf.org/geometry-1/#domrect" id="ref-for-domrect⑤">DOMRect</a></code> object that describes the bounding box of the element as defined by the SVG specification, applying the <a data-link-type="dfn" href="#transforms" id="ref-for-transforms⑥">transforms</a> that apply to the element and its ancestors. <li data-md> Return a <code class="idl"><a data-link-type="idl" href="https://drafts.fxtf.org/geometry-1/#domrectlist" id="ref-for-domrectlist③">DOMRectList</a></code> object containing <code class="idl"><a data-link-type="idl" href="https://drafts.fxtf.org/geometry-1/#domrect" id="ref-for-domrect⑥">DOMRect</a></code> objects in content order, one for each <a data-link-type="dfn" href="https://drafts.csswg.org/css-break-4/#box-fragment" id="ref-for-box-fragment">box fragment</a>, describing its border area (including those with a height or width of zero) with the following constraints: <ul> <li data-md> Apply the <a data-link-type="dfn" href="#transforms" id="ref-for-transforms⑦">transforms</a> that apply to the element and its ancestors. <li data-md> If the element on which the method was invoked has a computed value for 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 of <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-display-4/#valdef-display-table" id="ref-for-valdef-display-table">table</a> or <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-display-4/#valdef-display-inline-table" id="ref-for-valdef-display-inline-table">inline-table</a> include both the table box and the caption box, if any, but not the anonymous container box. <li data-md> Replace each <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#anonymous" id="ref-for-anonymous">anonymous</a> <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#block-box" id="ref-for-block-box">block box</a> with its child box(es) and repeat this until no anonymous block boxes are left in the final list. </ul> </ol> Note: The <code class="idl"><a data-link-type="idl" href="https://drafts.fxtf.org/geometry-1/#domrect" id="ref-for-domrect⑦">DOMRect</a></code> objects returned by <code class="idl"><a data-link-type="idl" href="#dom-element-getclientrects" id="ref-for-dom-element-getclientrects①">getClientRects()</a></code> are not <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/infrastructure.html#live" id="ref-for-live②">live</a>. The <dfn class="dfn-paneled caniuse-paneled idl-code" data-dfn-for="Element" data-dfn-type="method" data-export id="dom-element-getboundingclientrect"><code>getBoundingClientRect()</code></dfn> method, when invoked on an element <var>element</var>, must return the result of <a data-link-type="dfn" href="#element-get-the-bounding-box" id="ref-for-element-get-the-bounding-box">getting the bounding box</a> for <var>element</var>. <div class="algorithm" data-algorithm="get the bounding box" data-algorithm-for="Element"> To <dfn class="dfn-paneled" data-dfn-for="Element" data-dfn-type="dfn" data-export id="element-get-the-bounding-box">get the bounding box</dfn> for <var>element</var>, run the following steps: <ol> <li data-md> Let <var>list</var> be the result of invoking <code class="idl"><a data-link-type="idl" href="#dom-element-getclientrects" id="ref-for-dom-element-getclientrects②">getClientRects()</a></code> on <var>element</var>. <li data-md> If the <var>list</var> is empty return a <code class="idl"><a data-link-type="idl" href="https://drafts.fxtf.org/geometry-1/#domrect" id="ref-for-domrect⑧">DOMRect</a></code> object whose <code class="idl"><a data-link-type="idl" href="https://drafts.fxtf.org/geometry-1/#dom-domrect-x" id="ref-for-dom-domrect-x">x</a></code>, <code class="idl"><a data-link-type="idl" href="https://drafts.fxtf.org/geometry-1/#dom-domrect-y" id="ref-for-dom-domrect-y">y</a></code>, <code class="idl"><a data-link-type="idl" href="https://drafts.fxtf.org/geometry-1/#dom-domrect-width" id="ref-for-dom-domrect-width">width</a></code> and <code class="idl"><a data-link-type="idl" href="https://drafts.fxtf.org/geometry-1/#dom-domrect-height" id="ref-for-dom-domrect-height">height</a></code> members are zero. <li data-md> If all rectangles in <var>list</var> have zero width or height, return the first rectangle in <var>list</var>. <li data-md> Otherwise, return a <code class="idl"><a data-link-type="idl" href="https://drafts.fxtf.org/geometry-1/#domrect" id="ref-for-domrect⑨">DOMRect</a></code> object describing the smallest rectangle that includes all of the rectangles in <var>list</var> of which the height or width is not zero. </ol> </div> Note: The <code class="idl"><a data-link-type="idl" href="https://drafts.fxtf.org/geometry-1/#domrect" id="ref-for-domrect①⓪">DOMRect</a></code> object returned by <code class="idl"><a data-link-type="idl" href="#dom-element-getboundingclientrect" id="ref-for-dom-element-getboundingclientrect①">getBoundingClientRect()</a></code> is not <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/infrastructure.html#live" id="ref-for-live③">live</a>. <div class="example" id="example-1ac22791"> <a class="self-link" href="#example-1ac22791"></a> The following snippet gets the dimensions of the first <code>div</code> element in a document: <pre class="highlight"><c- a>var</c-> example <c- o>=</c-> document<c- p>.</c->getElementsByTagName<c- p>(</c-><c- u>"div"</c-><c- p>)[</c-><c- mf>0</c-><c- p>].</c->getBoundingClientRect<c- p>();</c-> <c- a>var</c-> exampleWidth <c- o>=</c-> example<c- p>.</c->width<c- p>;</c-> <c- a>var</c-> exampleHeight <c- o>=</c-> example<c- p>.</c->height<c- p>;</c-> </pre> </div> <div class="algorithm" data-algorithm="checkVisibility(options)" data-algorithm-for="Element"> Note: The <code class="idl"><a data-link-type="idl" href="#dom-element-checkvisibility" id="ref-for-dom-element-checkvisibility①">checkVisibility()</a></code> method provides a set of simple checks for whether an element is potentially "visible". It defaults to a very simple and straightforward method based on the <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#box-tree" id="ref-for-box-tree">box tree</a>, but allows for several additional checks to be opted into, depending on what precise notion of "visibility" is desired. The <dfn class="dfn-paneled idl-code" data-dfn-for="Element" data-dfn-type="method" data-export data-lt="checkVisibility(options)|checkVisibility()" id="dom-element-checkvisibility"><code>checkVisibility(<var>options</var>)</code></dfn> method must run these steps, when called on an element <var>this</var>: <ol> <li data-md> If <var>this</var> does not have an associated <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#box" id="ref-for-box⑦">box</a>, return false. <li data-md> If an ancestor of <var>this</var> in the <a data-link-type="dfn" href="https://drafts.csswg.org/css-scoping-1/#flat-tree" id="ref-for-flat-tree">flat tree</a> has <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-contain-2/#propdef-content-visibility" id="ref-for-propdef-content-visibility">content-visibility: hidden</a>, return false. <li data-md> If either the <code class="idl"><a data-link-type="idl" href="#dom-checkvisibilityoptions-opacityproperty" id="ref-for-dom-checkvisibilityoptions-opacityproperty①">opacityProperty</a></code> or the <code class="idl"><a data-link-type="idl" href="#dom-checkvisibilityoptions-checkopacity" id="ref-for-dom-checkvisibilityoptions-checkopacity①">checkOpacity</a></code> dictionary members of <var>options</var> are true, and <var>this</var>, or an ancestor of <var>this</var> in the <a data-link-type="dfn" href="https://drafts.csswg.org/css-scoping-1/#flat-tree" id="ref-for-flat-tree①">flat tree</a>, has a computed <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-color-4/#propdef-opacity" id="ref-for-propdef-opacity">opacity</a> value of 0, return false. <li data-md> If either the <code class="idl"><a data-link-type="idl" href="#dom-checkvisibilityoptions-visibilityproperty" id="ref-for-dom-checkvisibilityoptions-visibilityproperty①">visibilityProperty</a></code> or the <code class="idl"><a data-link-type="idl" href="#dom-checkvisibilityoptions-checkvisibilitycss" id="ref-for-dom-checkvisibilityoptions-checkvisibilitycss①">checkVisibilityCSS</a></code> dictionary members of <var>options</var> are true, and <var>this</var> is <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#invisible" id="ref-for-invisible">invisible</a>, return false. <li data-md> If the <code class="idl"><a data-link-type="idl" href="#dom-checkvisibilityoptions-contentvisibilityauto" id="ref-for-dom-checkvisibilityoptions-contentvisibilityauto">contentVisibilityAuto</a></code> dictionary member of <var>options</var> is true and an ancestor of <var>this</var> in the <a data-link-type="dfn" href="https://drafts.csswg.org/css-scoping-1/#flat-tree" id="ref-for-flat-tree②">flat tree</a> <a data-link-type="dfn" href="https://drafts.csswg.org/css-contain-2/#skips-its-contents" id="ref-for-skips-its-contents">skips its contents</a> due to <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-contain-2/#propdef-content-visibility" id="ref-for-propdef-content-visibility①">content-visibility: auto</a>, return false. <li data-md> Return true. </ol> </div> The <dfn class="dfn-paneled caniuse-paneled idl-code" data-dfn-for="Element" data-dfn-type="method" data-export data-lt="scrollIntoView(arg)|scrollIntoView()" id="dom-element-scrollintoview"><code>scrollIntoView(<var>arg</var>)</code></dfn> method must run these steps: <ol> <li data-md> Let <var>behavior</var> be "<code>auto</code>". <li data-md> Let <var>block</var> be "<code>start</code>". <li data-md> Let <var>inline</var> be "<code>nearest</code>". <li data-md> Let <var>container</var> be <code>null</code>. <li data-md> If <var>arg</var> is a <code class="idl"><a data-link-type="idl" href="#dictdef-scrollintoviewoptions" id="ref-for-dictdef-scrollintoviewoptions①">ScrollIntoViewOptions</a></code> dictionary, then: <ol> <li data-md> Set <var>behavior</var> to the <code class="idl"><a data-link-type="idl" href="#dom-scrolloptions-behavior" id="ref-for-dom-scrolloptions-behavior①">behavior</a></code> dictionary member of <var>options</var>. <li data-md> Set <var>block</var> to the <code class="idl"><a data-link-type="idl" href="#dom-scrollintoviewoptions-block" id="ref-for-dom-scrollintoviewoptions-block">block</a></code> dictionary member of <var>options</var>. <li data-md> Set <var>inline</var> to the <code class="idl"><a data-link-type="idl" href="#dom-scrollintoviewoptions-inline" id="ref-for-dom-scrollintoviewoptions-inline">inline</a></code> dictionary member of <var>options</var>. <li data-md> If the <code class="idl"><a data-link-type="idl" href="#dom-scrollintoviewoptions-container" id="ref-for-dom-scrollintoviewoptions-container">container</a></code> dictionary member of <var>options</var>, set <var>container</var> to this element. </ol> <li data-md> Otherwise, if <var>arg</var> is false, then set <var>block</var> to "<code>end</code>". <li data-md> If the element does not have any associated <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#box" id="ref-for-box⑧">box</a>, or is not available to user-agent features, then return. <li data-md> <a data-link-type="dfn" href="#scroll-a-target-into-view" id="ref-for-scroll-a-target-into-view">Scroll the element into view</a> with <var>behavior</var>, <var>block</var>, <var>inline</var>, and <var>container</var>. <li data-md> Optionally perform some other action that brings the element to the user’s attention. </ol> The <dfn class="dfn-paneled idl-code" data-dfn-for="Element" data-dfn-type="method" data-export data-lt="scroll(x, y)|scroll(options)|scroll()" id="dom-element-scroll"><code>scroll()</code></dfn> method must run these steps: <ol> <li data-md> If invoked with one argument, follow these substeps: <ol> <li data-md> Let <var>options</var> be the argument. <li data-md> <a data-link-type="dfn" href="#normalize-non-finite-values" id="ref-for-normalize-non-finite-values②">Normalize non-finite values</a> for <code class="idl"><a data-link-type="idl" href="#dom-scrolltooptions-left" id="ref-for-dom-scrolltooptions-left④">left</a></code> and <code class="idl"><a data-link-type="idl" href="#dom-scrolltooptions-top" id="ref-for-dom-scrolltooptions-top④">top</a></code> dictionary members of <var>options</var>, if present. <li data-md> Let <var>x</var> be the value of the <code class="idl"><a data-link-type="idl" href="#dom-scrolltooptions-left" id="ref-for-dom-scrolltooptions-left⑤">left</a></code> dictionary member of <var>options</var>, if present, or the element’s current scroll position on the x axis otherwise. <li data-md> Let <var>y</var> be the value of the <code class="idl"><a data-link-type="idl" href="#dom-scrolltooptions-top" id="ref-for-dom-scrolltooptions-top⑤">top</a></code> dictionary member of <var>options</var>, if present, or the element’s current scroll position on the y axis otherwise. </ol> <li data-md> If invoked with two arguments, follow these substeps: <ol> <li data-md> Let <var>options</var> be null <a data-link-type="dfn" href="https://webidl.spec.whatwg.org/#dfn-convert-ecmascript-to-idl-value" id="ref-for-dfn-convert-ecmascript-to-idl-value②">converted</a> to a <code class="idl"><a data-link-type="idl" href="#dictdef-scrolltooptions" id="ref-for-dictdef-scrolltooptions⑧">ScrollToOptions</a></code> dictionary. <a data-link-type="biblio" href="#biblio-webidl" title="Web IDL Standard">[WEBIDL]</a> <li data-md> Let <var>x</var> and <var>y</var> be the arguments, respectively. <li data-md> <a data-link-type="dfn" href="#normalize-non-finite-values" id="ref-for-normalize-non-finite-values③">Normalize non-finite values</a> for <var>x</var> and <var>y</var>. <li data-md> Let the <code class="idl"><a data-link-type="idl" href="#dom-scrolltooptions-left" id="ref-for-dom-scrolltooptions-left⑥">left</a></code> dictionary member of <var>options</var> have the value <var>x</var>. <li data-md> Let the <code class="idl"><a data-link-type="idl" href="#dom-scrolltooptions-top" id="ref-for-dom-scrolltooptions-top⑥">top</a></code> dictionary member of <var>options</var> have the value <var>y</var>. </ol> <li data-md> Let <var>document</var> be the element’s <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-node-document" id="ref-for-concept-node-document">node document</a>. <li data-md> If <var>document</var> is not the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/document-sequences.html#nav-document" id="ref-for-nav-document">active document</a>, terminate these steps. <li data-md> Let <var>window</var> be the value of <var>document</var>’s <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/nav-history-apis.html#dom-document-defaultview" id="ref-for-dom-document-defaultview">defaultView</a></code> attribute. <li data-md> If <var>window</var> is null, terminate these steps. <li data-md> If the element is the <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#root-element" id="ref-for-root-element⑨">root element</a> and <var>document</var> is in <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-document-quirks" id="ref-for-concept-document-quirks②">quirks mode</a>, terminate these steps. <li data-md> If the element is the <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#root-element" id="ref-for-root-element①⓪">root element</a> invoke <code class="idl"><a data-link-type="idl" href="#dom-window-scroll" id="ref-for-dom-window-scroll④">scroll()</a></code> on <var>window</var> with <code class="idl"><a data-link-type="idl" href="#dom-window-scrollx" id="ref-for-dom-window-scrollx③">scrollX</a></code> on <var>window</var> as first argument and <var>y</var> as second argument, and terminate these steps. <li data-md> If the element is <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/dom.html#the-body-element-2" id="ref-for-the-body-element-2⑥">the <code>body</code> element</a>, <var>document</var> is in <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-document-quirks" id="ref-for-concept-document-quirks③">quirks mode</a>, and the element is not <a data-link-type="dfn" href="#potentially-scrollable" id="ref-for-potentially-scrollable②">potentially scrollable</a>, invoke <code class="idl"><a data-link-type="idl" href="#dom-window-scroll" id="ref-for-dom-window-scroll⑤">scroll()</a></code> on <var>window</var> with <var>options</var> as the only argument, and terminate these steps. <li data-md> If the element does not have any associated <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#box" id="ref-for-box⑨">box</a>, the element has no associated <a data-link-type="dfn" href="#scrolling-box" id="ref-for-scrolling-box①⓪">scrolling box</a>, or the element has no overflow, terminate these steps. <li data-md> <a data-link-type="dfn" href="#scroll-an-element" id="ref-for-scroll-an-element">Scroll the element</a> to <var>x</var>,<var>y</var>, with the scroll behavior being the value of the <code class="idl"><a data-link-type="idl" href="#dom-scrolloptions-behavior" id="ref-for-dom-scrolloptions-behavior②">behavior</a></code> dictionary member of <var>options</var>. </ol> When the <dfn class="dfn-paneled idl-code" data-dfn-for="Element" data-dfn-type="method" data-export data-lt="scrollTo(x, y)|scrollTo(options)|scrollTo()" id="dom-element-scrollto"><code>scrollTo()</code></dfn> method is invoked, the user agent must act as if the <code class="idl"><a data-link-type="idl" href="#dom-element-scroll" id="ref-for-dom-element-scroll②">scroll()</a></code> method was invoked with the same arguments. When the <dfn class="dfn-paneled idl-code" data-dfn-for="Element" data-dfn-type="method" data-export data-lt="scrollBy(x, y)|scrollBy(options)|scrollBy()" id="dom-element-scrollby"><code>scrollBy()</code></dfn> method is invoked, the user agent must run these steps: <ol> <li data-md> If invoked with one argument, follow these substeps: <ol> <li data-md> Let <var>options</var> be the argument. <li data-md> <a data-link-type="dfn" href="#normalize-non-finite-values" id="ref-for-normalize-non-finite-values④">Normalize non-finite values</a> for <code class="idl"><a data-link-type="idl" href="#dom-scrolltooptions-left" id="ref-for-dom-scrolltooptions-left⑦">left</a></code> and <code class="idl"><a data-link-type="idl" href="#dom-scrolltooptions-top" id="ref-for-dom-scrolltooptions-top⑦">top</a></code> dictionary members of <var>options</var>, if present. </ol> <li data-md> If invoked with two arguments, follow these substeps: <ol> <li data-md> Let <var>options</var> be null <a data-link-type="dfn" href="https://webidl.spec.whatwg.org/#dfn-convert-ecmascript-to-idl-value" id="ref-for-dfn-convert-ecmascript-to-idl-value③">converted</a> to a <code class="idl"><a data-link-type="idl" href="#dictdef-scrolltooptions" id="ref-for-dictdef-scrolltooptions⑨">ScrollToOptions</a></code> dictionary. <a data-link-type="biblio" href="#biblio-webidl" title="Web IDL Standard">[WEBIDL]</a> <li data-md> Let <var>x</var> and <var>y</var> be the arguments, respectively. <li data-md> <a data-link-type="dfn" href="#normalize-non-finite-values" id="ref-for-normalize-non-finite-values⑤">Normalize non-finite values</a> for <var>x</var> and <var>y</var>. <li data-md> Let the <code class="idl"><a data-link-type="idl" href="#dom-scrolltooptions-left" id="ref-for-dom-scrolltooptions-left⑧">left</a></code> dictionary member of <var>options</var> have the value <var>x</var>. <li data-md> Let the <code class="idl"><a data-link-type="idl" href="#dom-scrolltooptions-top" id="ref-for-dom-scrolltooptions-top⑧">top</a></code> dictionary member of <var>options</var> have the value <var>y</var>. </ol> <li data-md> Add the value of <code class="idl"><a data-link-type="idl" href="#dom-element-scrollleft" id="ref-for-dom-element-scrollleft②">scrollLeft</a></code> to the <code class="idl"><a data-link-type="idl" href="#dom-scrolltooptions-left" id="ref-for-dom-scrolltooptions-left⑨">left</a></code> dictionary member. <li data-md> Add the value of <code class="idl"><a data-link-type="idl" href="#dom-element-scrolltop" id="ref-for-dom-element-scrolltop②">scrollTop</a></code> to the <code class="idl"><a data-link-type="idl" href="#dom-scrolltooptions-top" id="ref-for-dom-scrolltooptions-top⑨">top</a></code> dictionary member. <li data-md> Act as if the <code class="idl"><a data-link-type="idl" href="#dom-element-scroll" id="ref-for-dom-element-scroll③">scroll()</a></code> method was invoked with <var>options</var> as the only argument. </ol> The <dfn class="dfn-paneled idl-code" data-dfn-for="Element" data-dfn-type="attribute" data-export id="dom-element-scrolltop"><code>scrollTop</code></dfn> attribute, on getting, must return the result of running these steps: <ol> <li data-md> Let <var>document</var> be the element’s <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-node-document" id="ref-for-concept-node-document①">node document</a>. <li data-md> If <var>document</var> is not the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/document-sequences.html#nav-document" id="ref-for-nav-document①">active document</a>, return zero and terminate these steps. <li data-md> Let <var>window</var> be the value of <var>document</var>’s <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/nav-history-apis.html#dom-document-defaultview" id="ref-for-dom-document-defaultview①">defaultView</a></code> attribute. <li data-md> If <var>window</var> is null, return zero and terminate these steps. <li data-md> If the element is the <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#root-element" id="ref-for-root-element①①">root element</a> and <var>document</var> is in <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-document-quirks" id="ref-for-concept-document-quirks④">quirks mode</a>, return zero and terminate these steps. <li data-md> If the element is the <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#root-element" id="ref-for-root-element①②">root element</a> return the value of <code class="idl"><a data-link-type="idl" href="#dom-window-scrolly" id="ref-for-dom-window-scrolly③">scrollY</a></code> on <var>window</var>. <li data-md> If the element is <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/dom.html#the-body-element-2" id="ref-for-the-body-element-2⑦">the <code>body</code> element</a>, <var>document</var> is in <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-document-quirks" id="ref-for-concept-document-quirks⑤">quirks mode</a>, and the element is not <a data-link-type="dfn" href="#potentially-scrollable" id="ref-for-potentially-scrollable③">potentially scrollable</a>, return the value of <code class="idl"><a data-link-type="idl" href="#dom-window-scrolly" id="ref-for-dom-window-scrolly④">scrollY</a></code> on <var>window</var>. <li data-md> If the element does not have any associated <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#box" id="ref-for-box①⓪">box</a>, return zero and terminate these steps. <li data-md> Return the y-coordinate of the <a data-link-type="dfn" href="#scrolling-area" id="ref-for-scrolling-area①⓪">scrolling area</a> at the alignment point with the top of the <a data-link-type="dfn" href="https://drafts.csswg.org/css-box-4/#padding-edge" id="ref-for-padding-edge①⑥">padding edge</a> of the element. </ol> When setting the <code class="idl"><a data-link-type="idl" href="#dom-element-scrolltop" id="ref-for-dom-element-scrolltop③">scrollTop</a></code> attribute these steps must be run: <ol> <li data-md> Let <var>y</var> be the given value. <li data-md> <a data-link-type="dfn" href="#normalize-non-finite-values" id="ref-for-normalize-non-finite-values⑥">Normalize non-finite values</a> for <var>y</var>. <li data-md> Let <var>document</var> be the element’s <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-node-document" id="ref-for-concept-node-document②">node document</a>. <li data-md> If <var>document</var> is not the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/document-sequences.html#nav-document" id="ref-for-nav-document②">active document</a>, terminate these steps. <li data-md> Let <var>window</var> be the value of <var>document</var>’s <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/nav-history-apis.html#dom-document-defaultview" id="ref-for-dom-document-defaultview②">defaultView</a></code> attribute. <li data-md> If <var>window</var> is null, terminate these steps. <li data-md> If the element is the <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#root-element" id="ref-for-root-element①③">root element</a> and <var>document</var> is in <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-document-quirks" id="ref-for-concept-document-quirks⑥">quirks mode</a>, terminate these steps. <li data-md> If the element is the <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#root-element" id="ref-for-root-element①④">root element</a> invoke <code class="idl"><a data-link-type="idl" href="#dom-window-scroll" id="ref-for-dom-window-scroll⑥">scroll()</a></code> on <var>window</var> with <code class="idl"><a data-link-type="idl" href="#dom-window-scrollx" id="ref-for-dom-window-scrollx④">scrollX</a></code> on <var>window</var> as first argument and <var>y</var> as second argument, and terminate these steps. <li data-md> If the element is <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/dom.html#the-body-element-2" id="ref-for-the-body-element-2⑧">the <code>body</code> element</a>, <var>document</var> is in <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-document-quirks" id="ref-for-concept-document-quirks⑦">quirks mode</a>, and the element is not <a data-link-type="dfn" href="#potentially-scrollable" id="ref-for-potentially-scrollable④">potentially scrollable</a>, invoke <code class="idl"><a data-link-type="idl" href="#dom-window-scroll" id="ref-for-dom-window-scroll⑦">scroll()</a></code> on <var>window</var> with <code class="idl"><a data-link-type="idl" href="#dom-window-scrollx" id="ref-for-dom-window-scrollx⑤">scrollX</a></code> as first argument and <var>y</var> as second argument, and terminate these steps. <li data-md> If the element does not have any associated <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#box" id="ref-for-box①①">box</a>, the element has no associated <a data-link-type="dfn" href="#scrolling-box" id="ref-for-scrolling-box①①">scrolling box</a>, or the element has no overflow, terminate these steps. <li data-md> <a data-link-type="dfn" href="#scroll-an-element" id="ref-for-scroll-an-element①">Scroll the element</a> to <code class="idl"><a data-link-type="idl" href="#dom-element-scrollleft" id="ref-for-dom-element-scrollleft③">scrollLeft</a></code>,<var>y</var>, with the scroll behavior being "<code>auto</code>". </ol> The <dfn class="dfn-paneled idl-code" data-dfn-for="Element" data-dfn-type="attribute" data-export id="dom-element-scrollleft"><code>scrollLeft</code></dfn> attribute, on getting, must return the result of running these steps: <ol> <li data-md> Let <var>document</var> be the element’s <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-node-document" id="ref-for-concept-node-document③">node document</a>. <li data-md> If <var>document</var> is not the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/document-sequences.html#nav-document" id="ref-for-nav-document③">active document</a>, return zero and terminate these steps. <li data-md> Let <var>window</var> be the value of <var>document</var>’s <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/nav-history-apis.html#dom-document-defaultview" id="ref-for-dom-document-defaultview③">defaultView</a></code> attribute. <li data-md> If <var>window</var> is null, return zero and terminate these steps. <li data-md> If the element is the <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#root-element" id="ref-for-root-element①⑤">root element</a> and <var>document</var> is in <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-document-quirks" id="ref-for-concept-document-quirks⑧">quirks mode</a>, return zero and terminate these steps. <li data-md> If the element is the <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#root-element" id="ref-for-root-element①⑥">root element</a> return the value of <code class="idl"><a data-link-type="idl" href="#dom-window-scrollx" id="ref-for-dom-window-scrollx⑥">scrollX</a></code> on <var>window</var>. <li data-md> If the element is <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/dom.html#the-body-element-2" id="ref-for-the-body-element-2⑨">the <code>body</code> element</a>, <var>document</var> is in <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-document-quirks" id="ref-for-concept-document-quirks⑨">quirks mode</a>, and the element is not <a data-link-type="dfn" href="#potentially-scrollable" id="ref-for-potentially-scrollable⑤">potentially scrollable</a>, return the value of <code class="idl"><a data-link-type="idl" href="#dom-window-scrollx" id="ref-for-dom-window-scrollx⑦">scrollX</a></code> on <var>window</var>. <li data-md> If the element does not have any associated <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#box" id="ref-for-box①②">box</a>, return zero and terminate these steps. <li data-md> Return the x-coordinate of the <a data-link-type="dfn" href="#scrolling-area" id="ref-for-scrolling-area①①">scrolling area</a> at the alignment point with the left of the <a data-link-type="dfn" href="https://drafts.csswg.org/css-box-4/#padding-edge" id="ref-for-padding-edge①⑦">padding edge</a> of the element. </ol> When setting the <code class="idl"><a data-link-type="idl" href="#dom-element-scrollleft" id="ref-for-dom-element-scrollleft④">scrollLeft</a></code> attribute these steps must be run: <ol> <li data-md> Let <var>x</var> be the given value. <li data-md> <a data-link-type="dfn" href="#normalize-non-finite-values" id="ref-for-normalize-non-finite-values⑦">Normalize non-finite values</a> for <var>x</var>. <li data-md> Let <var>document</var> be the element’s <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-node-document" id="ref-for-concept-node-document④">node document</a>. <li data-md> If <var>document</var> is not the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/document-sequences.html#nav-document" id="ref-for-nav-document④">active document</a>, terminate these steps. <li data-md> Let <var>window</var> be the value of <var>document</var>’s <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/nav-history-apis.html#dom-document-defaultview" id="ref-for-dom-document-defaultview④">defaultView</a></code> attribute. <li data-md> If <var>window</var> is null, terminate these steps. <li data-md> If the element is the <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#root-element" id="ref-for-root-element①⑦">root element</a> and <var>document</var> is in <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-document-quirks" id="ref-for-concept-document-quirks①⓪">quirks mode</a>, terminate these steps. <li data-md> If the element is the <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#root-element" id="ref-for-root-element①⑧">root element</a> invoke <code class="idl"><a data-link-type="idl" href="#dom-window-scroll" id="ref-for-dom-window-scroll⑧">scroll()</a></code> on <var>window</var> with <var>x</var> as first argument and <code class="idl"><a data-link-type="idl" href="#dom-window-scrolly" id="ref-for-dom-window-scrolly⑤">scrollY</a></code> on <var>window</var> as second argument, and terminate these steps. <li data-md> If the element is <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/dom.html#the-body-element-2" id="ref-for-the-body-element-2①⓪">the <code>body</code> element</a>, <var>document</var> is in <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-document-quirks" id="ref-for-concept-document-quirks①①">quirks mode</a>, and the element is not <a data-link-type="dfn" href="#potentially-scrollable" id="ref-for-potentially-scrollable⑥">potentially scrollable</a>, invoke <code class="idl"><a data-link-type="idl" href="#dom-window-scroll" id="ref-for-dom-window-scroll⑨">scroll()</a></code> on <var>window</var> with <var>x</var> as first argument and <code class="idl"><a data-link-type="idl" href="#dom-window-scrolly" id="ref-for-dom-window-scrolly⑥">scrollY</a></code> on <var>window</var> as second argument, and terminate these steps. <li data-md> If the element does not have any associated <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#box" id="ref-for-box①③">box</a>, the element has no associated <a data-link-type="dfn" href="#scrolling-box" id="ref-for-scrolling-box①②">scrolling box</a>, or the element has no overflow, terminate these steps. <li data-md> <a data-link-type="dfn" href="#scroll-an-element" id="ref-for-scroll-an-element②">Scroll the element</a> to <var>x</var>,<code class="idl"><a data-link-type="idl" href="#dom-element-scrolltop" id="ref-for-dom-element-scrolltop④">scrollTop</a></code>, with the scroll behavior being "<code>auto</code>". </ol> The <dfn class="dfn-paneled idl-code" data-dfn-for="Element" data-dfn-type="attribute" data-export id="dom-element-scrollwidth"><code>scrollWidth</code></dfn> attribute must return the result of running these steps: <ol> <li data-md> Let <var>document</var> be the element’s <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-node-document" id="ref-for-concept-node-document⑤">node document</a>. <li data-md> If <var>document</var> is not the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/document-sequences.html#nav-document" id="ref-for-nav-document⑤">active document</a>, return zero and terminate these steps. <li data-md> Let <var>viewport width</var> be the width of the <a data-link-type="dfn" href="https://drafts.csswg.org/css2/#viewport%E2%91%A0" id="ref-for-viewport%E2%91%A0⑦③">viewport</a> excluding the width of the scroll bar, if any, or zero if there is no viewport. <li data-md> If the element is the <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#root-element" id="ref-for-root-element①⑨">root element</a> and <var>document</var> is not in <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-document-quirks" id="ref-for-concept-document-quirks①②">quirks mode</a> return max(<a data-link-type="dfn" href="https://drafts.csswg.org/css2/#viewport%E2%91%A0" id="ref-for-viewport%E2%91%A0⑦⑤">viewport</a> <a data-link-type="dfn" href="#scrolling-area" id="ref-for-scrolling-area①②">scrolling area</a> width, <var>viewport width</var>). <li data-md> If the element is <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/dom.html#the-body-element-2" id="ref-for-the-body-element-2①①">the <code>body</code> element</a>, <var>document</var> is in <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-document-quirks" id="ref-for-concept-document-quirks①③">quirks mode</a> and the element is not <a data-link-type="dfn" href="#potentially-scrollable" id="ref-for-potentially-scrollable⑦">potentially scrollable</a>, return max(<a data-link-type="dfn" href="https://drafts.csswg.org/css2/#viewport%E2%91%A0" id="ref-for-viewport%E2%91%A0⑦⑥">viewport</a> <a data-link-type="dfn" href="#scrolling-area" id="ref-for-scrolling-area①③">scrolling area</a> width, <var>viewport width</var>). <li data-md> If the element does not have any associated <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#box" id="ref-for-box①④">box</a> return zero and terminate these steps. <li data-md> Return the width of the element’s <a data-link-type="dfn" href="#scrolling-area" id="ref-for-scrolling-area①④">scrolling area</a>. </ol> The <dfn class="dfn-paneled idl-code" data-dfn-for="Element" data-dfn-type="attribute" data-export id="dom-element-scrollheight"><code>scrollHeight</code></dfn> attribute must return the result of running these steps: <ol> <li data-md> Let <var>document</var> be the element’s <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-node-document" id="ref-for-concept-node-document⑥">node document</a>. <li data-md> If <var>document</var> is not the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/document-sequences.html#nav-document" id="ref-for-nav-document⑥">active document</a>, return zero and terminate these steps. <li data-md> Let <var>viewport height</var> be the height of the <a data-link-type="dfn" href="https://drafts.csswg.org/css2/#viewport%E2%91%A0" id="ref-for-viewport%E2%91%A0⑦⑦">viewport</a> excluding the height of the scroll bar, if any, or zero if there is no viewport. <li data-md> If the element is the <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#root-element" id="ref-for-root-element②⓪">root element</a> and <var>document</var> is not in <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-document-quirks" id="ref-for-concept-document-quirks①④">quirks mode</a> return max(<a data-link-type="dfn" href="https://drafts.csswg.org/css2/#viewport%E2%91%A0" id="ref-for-viewport%E2%91%A0⑦⑨">viewport</a> <a data-link-type="dfn" href="#scrolling-area" id="ref-for-scrolling-area①⑤">scrolling area</a> height, <var>viewport height</var>). <li data-md> If the element is <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/dom.html#the-body-element-2" id="ref-for-the-body-element-2①②">the <code>body</code> element</a>, <var>document</var> is in <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-document-quirks" id="ref-for-concept-document-quirks①⑤">quirks mode</a> and the element is not <a data-link-type="dfn" href="#potentially-scrollable" id="ref-for-potentially-scrollable⑧">potentially scrollable</a>, return max(<a data-link-type="dfn" href="https://drafts.csswg.org/css2/#viewport%E2%91%A0" id="ref-for-viewport%E2%91%A0⑧⓪">viewport</a> <a data-link-type="dfn" href="#scrolling-area" id="ref-for-scrolling-area①⑥">scrolling area</a> height, <var>viewport height</var>). <li data-md> If the element does not have any associated <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#box" id="ref-for-box①⑤">box</a> return zero and terminate these steps. <li data-md> Return the height of the element’s <a data-link-type="dfn" href="#scrolling-area" id="ref-for-scrolling-area①⑦">scrolling area</a>. </ol> The <dfn class="dfn-paneled idl-code" data-dfn-for="Element" data-dfn-type="attribute" data-export id="dom-element-clienttop"><code>clientTop</code></dfn> attribute must run these steps: <ol> <li data-md> If the element has no associated <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#box" id="ref-for-box①⑥">box</a> or if the box is inline, return zero. <li data-md> Return the <a data-link-type="dfn" href="https://drafts.csswg.org/css-viewport/#unscaled" id="ref-for-unscaled">unscaled</a> computed value of the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top-width" id="ref-for-propdef-border-top-width">border-top-width</a> property plus the height of any scrollbar rendered between the top <a data-link-type="dfn" href="https://drafts.csswg.org/css-box-4/#padding-edge" id="ref-for-padding-edge①⑧">padding edge</a> and the top <a data-link-type="dfn" href="https://drafts.csswg.org/css-box-4/#border-edge" id="ref-for-border-edge">border edge</a>, ignoring any <a data-link-type="dfn" href="#transforms" id="ref-for-transforms⑧">transforms</a> that apply to the element and its ancestors. </ol> The <dfn class="dfn-paneled idl-code" data-dfn-for="Element" data-dfn-type="attribute" data-export id="dom-element-clientleft"><code>clientLeft</code></dfn> attribute must run these steps: <ol> <li data-md> If the element has no associated <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#box" id="ref-for-box①⑧">box</a> or if the box is inline, return zero. <li data-md> Return the <a data-link-type="dfn" href="https://drafts.csswg.org/css-viewport/#unscaled" id="ref-for-unscaled①">unscaled</a> computed value of the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-left-width" id="ref-for-propdef-border-left-width">border-left-width</a> property plus the width of any scrollbar rendered between the left <a data-link-type="dfn" href="https://drafts.csswg.org/css-box-4/#padding-edge" id="ref-for-padding-edge①⑨">padding edge</a> and the left <a data-link-type="dfn" href="https://drafts.csswg.org/css-box-4/#border-edge" id="ref-for-border-edge①">border edge</a>, ignoring any <a data-link-type="dfn" href="#transforms" id="ref-for-transforms⑨">transforms</a> that apply to the element and its ancestors. </ol> The <dfn class="dfn-paneled idl-code" data-dfn-for="Element" data-dfn-type="attribute" data-export id="dom-element-clientwidth"><code>clientWidth</code></dfn> attribute must run these steps: <ol> <li data-md> If the element has no associated <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#box" id="ref-for-box②⓪">box</a> or if the box is inline, return zero. <li data-md> If the element is the <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#root-element" id="ref-for-root-element②①">root element</a> and the element’s <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-node-document" id="ref-for-concept-node-document⑦">node document</a> is not in <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-document-quirks" id="ref-for-concept-document-quirks①⑥">quirks mode</a>, or if the element is <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/dom.html#the-body-element-2" id="ref-for-the-body-element-2①③">the <code>body</code> element</a> and the element’s node document is in quirks mode, return the <a data-link-type="dfn" href="https://drafts.csswg.org/css2/#viewport%E2%91%A0" id="ref-for-viewport%E2%91%A0⑧①">viewport</a> width excluding the size of a rendered scroll bar (if any). <li data-md> Return the <a data-link-type="dfn" href="https://drafts.csswg.org/css-viewport/#unscaled" id="ref-for-unscaled②">unscaled</a> width of the <a data-link-type="dfn" href="https://drafts.csswg.org/css-box-4/#padding-edge" id="ref-for-padding-edge②⓪">padding edge</a> excluding the width of any rendered scrollbar between the padding edge and the <a data-link-type="dfn" href="https://drafts.csswg.org/css-box-4/#border-edge" id="ref-for-border-edge②">border edge</a>, ignoring any <a data-link-type="dfn" href="#transforms" id="ref-for-transforms①⓪">transforms</a> or that apply to the element and its ancestors. </ol> The <dfn class="dfn-paneled idl-code" data-dfn-for="Element" data-dfn-type="attribute" data-export id="dom-element-clientheight"><code>clientHeight</code></dfn> attribute must run these steps: <ol> <li data-md> If the element has no associated <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#box" id="ref-for-box②②">box</a> or if the box is inline, return zero. <li data-md> If the element is the <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#root-element" id="ref-for-root-element②②">root element</a> and the element’s <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-node-document" id="ref-for-concept-node-document⑨">node document</a> is not in <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-document-quirks" id="ref-for-concept-document-quirks①⑧">quirks mode</a>, or if the element is <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/dom.html#the-body-element-2" id="ref-for-the-body-element-2①④">the <code>body</code> element</a> and the element’s node document is in quirks mode, return the <a data-link-type="dfn" href="https://drafts.csswg.org/css2/#viewport%E2%91%A0" id="ref-for-viewport%E2%91%A0⑧②">viewport</a> height excluding the size of a rendered scroll bar (if any). <li data-md> Return the <a data-link-type="dfn" href="https://drafts.csswg.org/css-viewport/#unscaled" id="ref-for-unscaled③">unscaled</a> height of the <a data-link-type="dfn" href="https://drafts.csswg.org/css-box-4/#padding-edge" id="ref-for-padding-edge②②">padding edge</a> excluding the height of any rendered scrollbar between the padding edge and the <a data-link-type="dfn" href="https://drafts.csswg.org/css-box-4/#border-edge" id="ref-for-border-edge③">border edge</a>, ignoring any <a data-link-type="dfn" href="#transforms" id="ref-for-transforms①①">transforms</a> that apply to the element and its ancestors. </ol> The <dfn class="dfn-paneled idl-code" data-dfn-for="Element" data-dfn-type="attribute" data-export id="dom-element-currentcsszoom"><code>currentCSSZoom</code></dfn> attribute must return the <a data-link-type="dfn" href="https://drafts.csswg.org/css-viewport/#effective-zoom" id="ref-for-effective-zoom">effective zoom</a> of the element, or 1.0 if the element isn’t <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/rendering.html#being-rendered" id="ref-for-being-rendered">being rendered</a>. <h3 class="heading settled" data-level="6.1" id="element-scrolling-members">6.1. <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#element" id="ref-for-element⑤">Element</a></code> Scrolling Members<a class="self-link" href="#element-scrolling-members"></a></h3> <div class="algorithm" data-algorithm="determine the scroll-into-view position"> To <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="determine-the-scroll-into-view-position">determine the scroll-into-view position</dfn> of a <var>target</var>, which is an <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element" id="ref-for-concept-element">Element</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/selectors-4/#pseudo-element" id="ref-for-pseudo-element①">pseudo-element</a>, or <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-range" id="ref-for-concept-range">Range</a>, with a scroll behavior <var>behavior</var>, a block flow direction position <var>block</var>, an inline base direction position <var>inline</var>, and a <a data-link-type="dfn" href="#scrolling-box" id="ref-for-scrolling-box①③">scrolling box</a> <var>scrolling box</var>, run the following steps: <ol> <li data-md> Let <var>target bounding border box</var> be the box represented by the return value of invoking Element’s <code class="idl"><a data-link-type="idl" href="#dom-element-getboundingclientrect" id="ref-for-dom-element-getboundingclientrect②">getBoundingClientRect()</a></code>, if <var>target</var> is an <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element" id="ref-for-concept-element①">Element</a>, or Range’s <code class="idl"><a data-link-type="idl" href="#dom-range-getboundingclientrect" id="ref-for-dom-range-getboundingclientrect①">getBoundingClientRect()</a></code>, if <var>target</var> is a <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-range" id="ref-for-concept-range①">Range</a>. <li data-md> Let <var>scrolling box edge A</var> be the <a data-link-type="dfn" href="#beginning-edges" id="ref-for-beginning-edges②">beginning edge</a> 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 <var>scrolling box</var>, and let <var>element edge A</var> be <var>target bounding border box</var>’s edge on the same physical side as that of <var>scrolling box edge A</var>. <li data-md> Let <var>scrolling box edge B</var> be the <a data-link-type="dfn" href="#ending-edges" id="ref-for-ending-edges">ending edge</a> 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 <var>scrolling box</var>, and let <var>element edge B</var> be <var>target bounding border box</var>’s edge on the same physical side as that of <var>scrolling box edge B</var>. <li data-md> Let <var>scrolling box edge C</var> be the <a data-link-type="dfn" href="#beginning-edges" id="ref-for-beginning-edges③">beginning edge</a> in the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#inline-base-direction" id="ref-for-inline-base-direction">inline base direction</a> of <var>scrolling box</var>, and let <var>element edge C</var> be <var>target bounding border box</var>’s edge on the same physical side as that of <var>scrolling box edge C</var>. <li data-md> Let <var>scrolling box edge D</var> be the <a data-link-type="dfn" href="#ending-edges" id="ref-for-ending-edges①">ending edge</a> in the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#inline-base-direction" id="ref-for-inline-base-direction①">inline base direction</a> of <var>scrolling box</var>, and let <var>element edge D</var> be <var>target bounding border box</var>’s edge on the same physical side as that of <var>scrolling box edge D</var>. <li data-md> Let <var>element height</var> be the distance between <var>element edge A</var> and <var>element edge B</var>. <li data-md> Let <var>scrolling box height</var> be the distance between <var>scrolling box edge A</var> and <var>scrolling box edge B</var>. <li data-md> Let <var>element width</var> be the distance between <var>element edge C</var> and <var>element edge D</var>. <li data-md> Let <var>scrolling box width</var> be the distance between <var>scrolling box edge C</var> and <var>scrolling box edge D</var>. <li data-md> Let <var>position</var> be the scroll position <var>scrolling box</var> would have by following these steps: <ol> <li data-md> If <var>block</var> is "<code>start</code>", then align <var>element edge A</var> with <var>scrolling box edge A</var>. <li data-md> Otherwise, if <var>block</var> is "<code>end</code>", then align <var>element edge B</var> with <var>scrolling box edge B</var>. <li data-md> Otherwise, if <var>block</var> is "<code>center</code>", then align the center of <var>target bounding border box</var> with the center of <var>scrolling box</var> in <var>scrolling box</var>’s <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>. <li data-md> Otherwise, <var>block</var> is "<code>nearest</code>": <dl class="switch"> <dt>If <var>element edge A</var> and <var>element edge B</var> are both outside <var>scrolling box edge A</var> and <var>scrolling box edge B</var> <dd>Do nothing. <dt>If <var>element edge A</var> is outside <var>scrolling box edge A</var> and <var>element height</var> is less than <var>scrolling box height</var> <dt>If <var>element edge B</var> is outside <var>scrolling box edge B</var> and <var>element height</var> is greater than <var>scrolling box height</var> <dd>Align <var>element edge A</var> with <var>scrolling box edge A</var>. <dt>If <var>element edge A</var> is outside <var>scrolling box edge A</var> and <var>element height</var> is greater than <var>scrolling box height</var> <dt>If <var>element edge B</var> is outside <var>scrolling box edge B</var> and <var>element height</var> is less than <var>scrolling box height</var> <dd>Align <var>element edge B</var> with <var>scrolling box edge B</var>. </dl> <li data-md> If <var>inline</var> is "<code>start</code>", then align <var>element edge C</var> with <var>scrolling box edge C</var>. <li data-md> Otherwise, if <var>inline</var> is "<code>end</code>", then align <var>element edge D</var> with <var>scrolling box edge D</var>. <li data-md> Otherwise, if <var>inline</var> is "<code>center</code>", then align the center of <var>target bounding border box</var> with the center of <var>scrolling box</var> in <var>scrolling box</var>’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#inline-base-direction" id="ref-for-inline-base-direction②">inline base direction</a>. <li data-md> Otherwise, <var>inline</var> is "<code>nearest</code>": <dl class="switch"> <dt>If <var>element edge C</var> and <var>element edge D</var> are both outside <var>scrolling box edge C</var> and <var>scrolling box edge D</var> <dd>Do nothing. <dt>If <var>element edge C</var> is outside <var>scrolling box edge C</var> and <var>element width</var> is less than <var>scrolling box width</var> <dt>If <var>element edge D</var> is outside <var>scrolling box edge D</var> and <var>element width</var> is greater than <var>scrolling box width</var> <dd>Align <var>element edge C</var> with <var>scrolling box edge C</var>. <dt>If <var>element edge C</var> is outside <var>scrolling box edge C</var> and <var>element width</var> is greater than <var>scrolling box width</var> <dt>If <var>element edge D</var> is outside <var>scrolling box edge D</var> and <var>element width</var> is less than <var>scrolling box width</var> <dd>Align <var>element edge D</var> with <var>scrolling box edge D</var>. </dl> <li data-md> If <var>target</var> is an <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element" id="ref-for-concept-element②">Element</a>, and the target element defines some <a data-link-type="dfn" href="https://drafts.csswg.org/css-scroll-snap-1/#scroll-snap-position" id="ref-for-scroll-snap-position">scroll snap positions</a>, then the user agent must <a data-link-type="dfn" href="https://drafts.csswg.org/css-scroll-snap-1/#scroll-snap" id="ref-for-scroll-snap">scroll snap</a> the resulting <var>position</var> to one of that element’s scroll snap positions if its nearest <a data-link-type="dfn" href="https://drafts.csswg.org/css-overflow-3/#scroll-container" id="ref-for-scroll-container">scroll container</a> is a <a data-link-type="dfn" href="https://drafts.csswg.org/css-scroll-snap-1/#scroll-snap-container" id="ref-for-scroll-snap-container">scroll snap container</a>. The user agent may also do this even when the scroll container has <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-scroll-snap-1/#propdef-scroll-snap-type" id="ref-for-propdef-scroll-snap-type">scroll-snap-type: none</a>. <li data-md> Return <var>position</var>. </ol> </ol> </div> <div class="algorithm" data-algorithm="scroll a target into view"> To <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="scroll-a-target-into-view">scroll a target into view</dfn> <var>target</var>, which is an <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-element" id="ref-for-concept-element③">Element</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/selectors-4/#pseudo-element" id="ref-for-pseudo-element②">pseudo-element</a>, or <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-range" id="ref-for-concept-range②">Range</a>, with a scroll behavior <var>behavior</var>, a block flow direction position <var>block</var>, an inline base direction position <var>inline</var>, and an optional containing <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-attribute-element" id="ref-for-concept-attribute-element">Element</a> to stop scrolling after reaching <var>container</var>, means to run these steps: <ol> <li data-md> For each ancestor element or <a data-link-type="dfn" href="https://drafts.csswg.org/css2/#viewport%E2%91%A0" id="ref-for-viewport%E2%91%A0⑧③">viewport</a> that establishes a <a data-link-type="dfn" href="#scrolling-box" id="ref-for-scrolling-box①④">scrolling box</a> <var>scrolling box</var>, in order of innermost to outermost scrolling box, run these substeps: <ol> <li data-md> If the <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document" id="ref-for-document⑧">Document</a></code> associated with <var>target</var> is not <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#same-origin" id="ref-for-same-origin">same origin</a> with the <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document" id="ref-for-document⑨">Document</a></code> associated with the element or <a data-link-type="dfn" href="https://drafts.csswg.org/css2/#viewport%E2%91%A0" id="ref-for-viewport%E2%91%A0⑧④">viewport</a> associated with <var>scrolling box</var>, terminate these steps. <li data-md> Let <var>position</var> be the scroll position resulting from running the steps to <a data-link-type="dfn" href="#determine-the-scroll-into-view-position" id="ref-for-determine-the-scroll-into-view-position">determine the scroll-into-view position</a> of <var>target</var> with <var>behavior</var> as the <var>scroll behavior</var>, <var>block</var> as the <var>block flow position</var>, <var>inline</var> as the <var>inline base direction position</var> and <var>scrolling box</var> as the <var>scrolling box</var>. <li data-md> If <var>position</var> is not the same as <var>scrolling box</var>’s current scroll position, or <var>scrolling box</var> has an ongoing <a data-link-type="dfn" href="#concept-smooth-scroll" id="ref-for-concept-smooth-scroll④">smooth scroll</a>, <ol> <li data-md> <dl class="switch"> <dt>If <var>scrolling box</var> is associated with an element <dd> <a data-link-type="dfn" href="#perform-a-scroll" id="ref-for-perform-a-scroll③">Perform a scroll</a> of the element’s <var>scrolling box</var> to <var>position</var>, with the element as the associated element and <var>behavior</var> as the scroll behavior. <dt>If <var>scrolling box</var> is associated with a <a data-link-type="dfn" href="https://drafts.csswg.org/css2/#viewport%E2%91%A0" id="ref-for-viewport%E2%91%A0⑧⑤">viewport</a> <dd> <ol> <li data-md> Let <var>document</var> be the <a data-link-type="dfn" href="https://drafts.csswg.org/css2/#viewport%E2%91%A0" id="ref-for-viewport%E2%91%A0⑧⑥">viewport’s</a> associated <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document" id="ref-for-document①⓪">Document</a></code>. <li data-md> Let <var>root element</var> be <var>document</var>’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#root-element" id="ref-for-root-element②③">root element</a>, if there is one, or null otherwise. <li data-md> <a data-link-type="dfn" href="#viewport-perform-a-scroll" id="ref-for-viewport-perform-a-scroll④">Perform a scroll</a> of the <a data-link-type="dfn" href="https://drafts.csswg.org/css2/#viewport%E2%91%A0" id="ref-for-viewport%E2%91%A0⑧⑦">viewport</a> to <var>position</var>, with <var>root element</var> as the associated element and <var>behavior</var> as the scroll behavior. </ol> </dl> </ol> <li data-md> If <var>container</var> is not null and <var>scrolling box</var> is a <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-shadow-including-inclusive-ancestor" id="ref-for-concept-shadow-including-inclusive-ancestor①">shadow-including inclusive ancestor</a> of <var>container</var>, abort the rest of these steps. </ol> </ol> </div> <div class="algorithm" data-algorithm="scroll an element"> To <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="scroll-an-element">scroll an element</dfn> (or <a data-link-type="dfn" href="https://drafts.csswg.org/selectors-4/#pseudo-element" id="ref-for-pseudo-element③">pseudo-element</a>) <var>element</var> to <var>x</var>,<var>y</var> optionally with a scroll behavior <var>behavior</var> (which is "<code>auto</code>" if omitted) means to: <ol> <li data-md> Let <var>box</var> be <var>element</var>’s associated <a data-link-type="dfn" href="#scrolling-box" id="ref-for-scrolling-box①⑥">scrolling box</a>. <li data-md> <dl class="switch"> <dt>If <var>box</var> has rightward <a data-link-type="dfn" href="#overflow-directions" id="ref-for-overflow-directions①④">overflow direction</a> <dd>Let <var>x</var> be max(0, min(<var>x</var>, <var>element</var> <a data-link-type="dfn" href="#scrolling-area" id="ref-for-scrolling-area①⑧">scrolling area</a> width - <var>element</var> <a data-link-type="dfn" href="https://drafts.csswg.org/css-box-4/#padding-edge" id="ref-for-padding-edge②④">padding edge</a> width)). <dt>If <var>box</var> has leftward <a data-link-type="dfn" href="#overflow-directions" id="ref-for-overflow-directions①⑤">overflow direction</a> <dd>Let <var>x</var> be min(0, max(<var>x</var>, <var>element</var> <a data-link-type="dfn" href="https://drafts.csswg.org/css-box-4/#padding-edge" id="ref-for-padding-edge②⑤">padding edge</a> width - <var>element</var> <a data-link-type="dfn" href="#scrolling-area" id="ref-for-scrolling-area①⑨">scrolling area</a> width)). </dl> <li data-md> <dl class="switch"> <dt>If <var>box</var> has downward <a data-link-type="dfn" href="#overflow-directions" id="ref-for-overflow-directions①⑥">overflow direction</a> <dd>Let <var>y</var> be max(0, min(<var>y</var>, <var>element</var> <a data-link-type="dfn" href="#scrolling-area" id="ref-for-scrolling-area②⓪">scrolling area</a> height - <var>element</var> <a data-link-type="dfn" href="https://drafts.csswg.org/css-box-4/#padding-edge" id="ref-for-padding-edge②⑥">padding edge</a> height)). <dt>If <var>box</var> has upward <a data-link-type="dfn" href="#overflow-directions" id="ref-for-overflow-directions①⑦">overflow direction</a> <dd>Let <var>y</var> be min(0, max(<var>y</var>, <var>element</var> <a data-link-type="dfn" href="https://drafts.csswg.org/css-box-4/#padding-edge" id="ref-for-padding-edge②⑦">padding edge</a> height - <var>element</var> <a data-link-type="dfn" href="#scrolling-area" id="ref-for-scrolling-area②①">scrolling area</a> height)). </dl> <li data-md> Let <var>position</var> be the scroll position <var>box</var> would have by aligning <a data-link-type="dfn" href="#scrolling-area" id="ref-for-scrolling-area②②">scrolling area</a> x-coordinate <var>x</var> with the left of <var>box</var> and aligning scrolling area y-coordinate <var>y</var> with the top of <var>box</var>. <li data-md> If <var>position</var> is the same as <var>box</var>’s current scroll position, and <var>box</var> does not have an ongoing <a data-link-type="dfn" href="#concept-smooth-scroll" id="ref-for-concept-smooth-scroll⑤">smooth scroll</a>, abort these steps. <li data-md> <a data-link-type="dfn" href="#perform-a-scroll" id="ref-for-perform-a-scroll④">Perform a scroll</a> of <var>box</var> to <var>position</var>, <var>element</var> as the associated element and <var>behavior</var> as the scroll behavior. </ol> </div> <h2 class="heading settled" data-level="7" id="extensions-to-the-htmlelement-interface">7. Extensions to the <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/dom.html#htmlelement" id="ref-for-htmlelement">HTMLElement</a></code> Interface<a class="self-link" href="#extensions-to-the-htmlelement-interface"></a></h2> <pre class="idl highlight def"><c- b>partial</c-> <c- b>interface</c-> <a class="idl-code" data-link-type="interface" href="https://html.spec.whatwg.org/multipage/dom.html#htmlelement" id="ref-for-htmlelement①"><c- g>HTMLElement</c-></a> { <c- b>readonly</c-> <c- b>attribute</c-> <a data-link-type="idl-name" href="https://dom.spec.whatwg.org/#element" id="ref-for-element⑥"><c- n>Element</c-></a>? <a class="idl-code" data-link-type="attribute" data-readonly data-type="Element?" href="#dom-htmlelement-offsetparent" id="ref-for-dom-htmlelement-offsetparent"><c- g>offsetParent</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-long" id="ref-for-idl-long②⑥"><c- b>long</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="long" href="#dom-htmlelement-offsettop" id="ref-for-dom-htmlelement-offsettop"><c- g>offsetTop</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-long" id="ref-for-idl-long②⑦"><c- b>long</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="long" href="#dom-htmlelement-offsetleft" id="ref-for-dom-htmlelement-offsetleft"><c- g>offsetLeft</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-long" id="ref-for-idl-long②⑧"><c- b>long</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="long" href="#dom-htmlelement-offsetwidth" id="ref-for-dom-htmlelement-offsetwidth"><c- g>offsetWidth</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-long" id="ref-for-idl-long②⑨"><c- b>long</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="long" href="#dom-htmlelement-offsetheight" id="ref-for-dom-htmlelement-offsetheight"><c- g>offsetHeight</c-></a>; }; </pre> The <dfn class="dfn-paneled idl-code" data-dfn-for="HTMLElement" data-dfn-type="attribute" data-export id="dom-htmlelement-offsetparent"><code>offsetParent</code></dfn> attribute must return the result of running these steps: <ol> <li data-md> If any of the following holds true return null and terminate this algorithm: <ul> <li data-md> The element does not have an associated <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#box" id="ref-for-box②④">box</a>. <li data-md> The element is the <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#root-element" id="ref-for-root-element②④">root element</a>. <li data-md> The element is <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/dom.html#the-body-element-2" id="ref-for-the-body-element-2①⑤">the <code>body</code> element</a>. <li data-md> The element’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>. </ul> <li data-md> Let <var>ancestor</var> be the parent of the element in the <a data-link-type="dfn" href="https://drafts.csswg.org/css-scoping-1/#flat-tree" id="ref-for-flat-tree③">flat tree</a> and repeat these substeps: <ol> <li data-md> If <var>ancestor</var> is <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-closed-shadow-hidden" id="ref-for-concept-closed-shadow-hidden">closed-shadow-hidden</a> from the element and its 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>, terminate this algorithm and return null. <li data-md> If <var>ancestor</var> is not <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-closed-shadow-hidden" id="ref-for-concept-closed-shadow-hidden①">closed-shadow-hidden</a> from the element and satisfies at least one of the following, terminate this algorithm and return <var>ancestor</var>. <ul> <li data-md> <var>ancestor</var> is a containing block of absolutely-positioned descendants (regardless of whether there are any absolutely-positioned descendants). <li data-md> The element has a different <a data-link-type="dfn" href="https://drafts.csswg.org/css-viewport/#effective-zoom" id="ref-for-effective-zoom①">effective zoom</a> than <var>ancestor</var>. <li data-md> It is <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/dom.html#the-body-element-2" id="ref-for-the-body-element-2①⑥">the <code>body</code> element</a>. <li data-md> 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 of the element is <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-position-3/#valdef-position-static" id="ref-for-valdef-position-static">static</a> and the ancestor is one of the following <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/infrastructure.html#html-elements" id="ref-for-html-elements">HTML elements</a>: <code>td</code>, <code>th</code>, or <code>table</code>. </ul> <li data-md> If there is no more parent of <var>ancestor</var> in the <a data-link-type="dfn" href="https://drafts.csswg.org/css-scoping-1/#flat-tree" id="ref-for-flat-tree④">flat tree</a>, terminate this algorithm and return null. <li data-md> Let <var>ancestor</var> be the parent of <var>ancestor</var> in the <a data-link-type="dfn" href="https://drafts.csswg.org/css-scoping-1/#flat-tree" id="ref-for-flat-tree⑤">flat tree</a>. </ol> </ol> The <dfn class="dfn-paneled idl-code" data-dfn-for="HTMLElement" data-dfn-type="attribute" data-export id="dom-htmlelement-offsettop"><code>offsetTop</code></dfn> attribute must return the result of running these steps: <ol> <li data-md> If the element is <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/dom.html#the-body-element-2" id="ref-for-the-body-element-2①⑦">the <code>body</code> element</a> or does not have any associated <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#box" id="ref-for-box②⑤">box</a> return zero and terminate this algorithm. <li data-md> If the <code class="idl"><a data-link-type="idl" href="#dom-htmlelement-offsetparent" id="ref-for-dom-htmlelement-offsetparent①">offsetParent</a></code> of the element is null return the <a data-link-type="dfn" href="https://drafts.csswg.org/css-viewport/#unscaled" id="ref-for-unscaled④">unscaled</a> y-coordinate of the top <a data-link-type="dfn" href="https://drafts.csswg.org/css-box-4/#border-edge" id="ref-for-border-edge④">border edge</a> of the first <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#box" id="ref-for-box②⑥">box</a> associated with the element, relative to the <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#initial-containing-block" id="ref-for-initial-containing-block①⑨">initial containing block</a> origin, ignoring any <a data-link-type="dfn" href="#transforms" id="ref-for-transforms①②">transforms</a>that apply to the element and its ancestors and terminate this algorithm. <li data-md> Return the <a data-link-type="dfn" href="https://drafts.csswg.org/css-viewport/#unscaled" id="ref-for-unscaled⑤">unscaled</a> result of subtracting the y-coordinate of the top <a data-link-type="dfn" href="https://drafts.csswg.org/css-box-4/#padding-edge" id="ref-for-padding-edge②⑧">padding edge</a> of the first <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#box" id="ref-for-box②⑦">box</a> associated with the <code class="idl"><a data-link-type="idl" href="#dom-htmlelement-offsetparent" id="ref-for-dom-htmlelement-offsetparent②">offsetParent</a></code> of the element from the y-coordinate of the top <a data-link-type="dfn" href="https://drafts.csswg.org/css-box-4/#border-edge" id="ref-for-border-edge⑤">border edge</a> of the first box associated with the element, relative to the <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#initial-containing-block" id="ref-for-initial-containing-block②⓪">initial containing block</a> origin, ignoring any <a data-link-type="dfn" href="#transforms" id="ref-for-transforms①③">transforms</a> that apply to the element and its ancestors. Note: An inline element that consists of multiple line boxes will only have its first <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#box" id="ref-for-box②⑨">box</a> considered. </ol> The <dfn class="dfn-paneled idl-code" data-dfn-for="HTMLElement" data-dfn-type="attribute" data-export id="dom-htmlelement-offsetleft"><code>offsetLeft</code></dfn> attribute must return the result of running these steps: <ol> <li data-md> If the element is <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/dom.html#the-body-element-2" id="ref-for-the-body-element-2①⑧">the <code>body</code> element</a> or does not have any associated <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#box" id="ref-for-box③⓪">box</a> return zero and terminate this algorithm. <li data-md> If the <code class="idl"><a data-link-type="idl" href="#dom-htmlelement-offsetparent" id="ref-for-dom-htmlelement-offsetparent③">offsetParent</a></code> of the element is null return the <a data-link-type="dfn" href="https://drafts.csswg.org/css-viewport/#unscaled" id="ref-for-unscaled⑥">unscaled</a> x-coordinate of the left <a data-link-type="dfn" href="https://drafts.csswg.org/css-box-4/#border-edge" id="ref-for-border-edge⑥">border edge</a> of the first <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#box" id="ref-for-box③①">box</a> associated with the element, relative to the <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#initial-containing-block" id="ref-for-initial-containing-block②①">initial containing block</a> origin, ignoring any <a data-link-type="dfn" href="#transforms" id="ref-for-transforms①④">transforms</a> that apply to the element and its ancestors, and terminate this algorithm. <li data-md> Return the <a data-link-type="dfn" href="https://drafts.csswg.org/css-viewport/#unscaled" id="ref-for-unscaled⑦">unscaled</a> result of subtracting the x-coordinate of the left <a data-link-type="dfn" href="https://drafts.csswg.org/css-box-4/#padding-edge" id="ref-for-padding-edge②⑨">padding edge</a> of the first <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#box" id="ref-for-box③②">box</a> associated with the <code class="idl"><a data-link-type="idl" href="#dom-htmlelement-offsetparent" id="ref-for-dom-htmlelement-offsetparent④">offsetParent</a></code> of the element from the x-coordinate of the left <a data-link-type="dfn" href="https://drafts.csswg.org/css-box-4/#border-edge" id="ref-for-border-edge⑦">border edge</a> of the first box associated with the element, relative to the <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#initial-containing-block" id="ref-for-initial-containing-block②②">initial containing block</a> origin, ignoring any <a data-link-type="dfn" href="#transforms" id="ref-for-transforms①⑤">transforms</a> that apply to the element and its ancestors. </ol> The <dfn class="dfn-paneled idl-code" data-dfn-for="HTMLElement" data-dfn-type="attribute" data-export id="dom-htmlelement-offsetwidth"><code>offsetWidth</code></dfn> attribute must return the result of running these steps: <ol> <li data-md> If the element does not have any associated <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#box" id="ref-for-box③④">box</a> return zero and terminate this algorithm. <li data-md> Return the <a data-link-type="dfn" href="https://drafts.csswg.org/css-viewport/#unscaled" id="ref-for-unscaled⑧">unscaled</a> width of the axis-aligned bounding box of the <a data-link-type="dfn" href="https://drafts.csswg.org/css-box-4/#border-box" id="ref-for-border-box">border boxes</a> of all fragments generated by the element’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#principal-box" id="ref-for-principal-box">principal box</a>, ignoring any <a data-link-type="dfn" href="#transforms" id="ref-for-transforms①⑥">transforms</a> that apply to the element and its ancestors. If the element’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#principal-box" id="ref-for-principal-box①">principal box</a> is an <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#inline-level-box" id="ref-for-inline-level-box">inline-level box</a> which was "split" by a <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#block-level" id="ref-for-block-level">block-level</a> descendant, also include fragments generated by the block-level descendants, unless they are zero width or height. </ol> The <dfn class="dfn-paneled idl-code" data-dfn-for="HTMLElement" data-dfn-type="attribute" data-export id="dom-htmlelement-offsetheight"><code>offsetHeight</code></dfn> attribute must return the result of running these steps: <ol> <li data-md> If the element does not have any associated <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#box" id="ref-for-box③⑤">box</a> return zero and terminate this algorithm. <li data-md> Return the <a data-link-type="dfn" href="https://drafts.csswg.org/css-viewport/#unscaled" id="ref-for-unscaled⑨">unscaled</a> height of the axis-aligned bounding box of the <a data-link-type="dfn" href="https://drafts.csswg.org/css-box-4/#border-box" id="ref-for-border-box①">border boxes</a> of all fragments generated by the element’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#principal-box" id="ref-for-principal-box②">principal box</a>, ignoring any <a data-link-type="dfn" href="#transforms" id="ref-for-transforms①⑦">transforms</a> that apply to the element and its ancestors. If the element’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#principal-box" id="ref-for-principal-box③">principal box</a> is an <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#inline-level-box" id="ref-for-inline-level-box①">inline-level box</a> which was "split" by a <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#block-level" id="ref-for-block-level②">block-level</a> descendant, also include fragments generated by the block-level descendants, unless they are zero width or height. </ol> <h2 class="heading settled" data-level="8" id="extensions-to-the-htmlimageelement-interface">8. Extensions to the <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/embedded-content.html#htmlimageelement" id="ref-for-htmlimageelement">HTMLImageElement</a></code> Interface<a class="self-link" href="#extensions-to-the-htmlimageelement-interface"></a></h2> <pre class="idl highlight def"><c- b>partial</c-> <c- b>interface</c-> <a class="idl-code" data-link-type="interface" href="https://html.spec.whatwg.org/multipage/embedded-content.html#htmlimageelement" id="ref-for-htmlimageelement①"><c- g>HTMLImageElement</c-></a> { <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-long" id="ref-for-idl-long③⓪"><c- b>long</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="long" href="#dom-htmlimageelement-x" id="ref-for-dom-htmlimageelement-x"><c- g>x</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-long" id="ref-for-idl-long③①"><c- b>long</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="long" href="#dom-htmlimageelement-y" id="ref-for-dom-htmlimageelement-y"><c- g>y</c-></a>; }; </pre> The <dfn class="dfn-paneled idl-code" data-dfn-for="HTMLImageElement" data-dfn-type="attribute" data-export id="dom-htmlimageelement-x"><code>x</code></dfn> attribute, on getting, must return the <a data-link-type="dfn" href="https://drafts.csswg.org/css-viewport/#scaled" id="ref-for-scaled②">scaled</a> x-coordinate of the left <a data-link-type="dfn" href="https://drafts.csswg.org/css-box-4/#border-edge" id="ref-for-border-edge⑧">border edge</a> of the first <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#box" id="ref-for-box③⑥">box</a> associated with the element, relative to the <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#initial-containing-block" id="ref-for-initial-containing-block②③">initial containing block</a> origin, ignoring any <a data-link-type="dfn" href="#transforms" id="ref-for-transforms①⑧">transforms</a> that apply to the element and its ancestors, or zero if there is no box. The <dfn class="dfn-paneled idl-code" data-dfn-for="HTMLImageElement" data-dfn-type="attribute" data-export id="dom-htmlimageelement-y"><code>y</code></dfn> attribute, on getting, must return the <a data-link-type="dfn" href="https://drafts.csswg.org/css-viewport/#scaled" id="ref-for-scaled③">scaled</a> y-coordinate of the top <a data-link-type="dfn" href="https://drafts.csswg.org/css-box-4/#border-edge" id="ref-for-border-edge⑨">border edge</a> of the first <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#box" id="ref-for-box③⑧">box</a> associated with the element, relative to the <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#initial-containing-block" id="ref-for-initial-containing-block②④">initial containing block</a> origin, ignoring any <a data-link-type="dfn" href="#transforms" id="ref-for-transforms①⑨">transforms</a> that apply to the element and its ancestors, or zero if there is no box. <h2 class="heading settled" data-level="9" id="extensions-to-the-range-interface">9. Extensions to the <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#range" id="ref-for-range①">Range</a></code> Interface<a class="self-link" href="#extensions-to-the-range-interface"></a></h2> <pre class="idl highlight def"><c- b>partial</c-> <c- b>interface</c-> <a class="idl-code" data-link-type="interface" href="https://dom.spec.whatwg.org/#range" id="ref-for-range②"><c- g>Range</c-></a> { <a data-link-type="idl-name" href="https://drafts.fxtf.org/geometry-1/#domrectlist" id="ref-for-domrectlist④"><c- n>DOMRectList</c-></a> <a class="idl-code" data-link-type="method" href="#dom-range-getclientrects" id="ref-for-dom-range-getclientrects"><c- g>getClientRects</c-></a>(); [<a class="idl-code" data-link-type="extended-attribute" href="https://webidl.spec.whatwg.org/#NewObject" id="ref-for-NewObject③"><c- g>NewObject</c-></a>] <a data-link-type="idl-name" href="https://drafts.fxtf.org/geometry-1/#domrect" id="ref-for-domrect①①"><c- n>DOMRect</c-></a> <a class="idl-code" data-link-type="method" href="#dom-range-getboundingclientrect" id="ref-for-dom-range-getboundingclientrect②"><c- g>getBoundingClientRect</c-></a>(); }; </pre> The <dfn class="dfn-paneled idl-code" data-dfn-for="Range" data-dfn-type="method" data-export id="dom-range-getclientrects"><code>getClientRects()</code></dfn> method, when invoked, must return an empty <code class="idl"><a data-link-type="idl" href="https://drafts.fxtf.org/geometry-1/#domrectlist" id="ref-for-domrectlist⑤">DOMRectList</a></code> object if the range is not in the document and otherwise a <code class="idl"><a data-link-type="idl" href="https://drafts.fxtf.org/geometry-1/#domrectlist" id="ref-for-domrectlist⑥">DOMRectList</a></code> object containing a list of <code class="idl"><a data-link-type="idl" href="https://drafts.fxtf.org/geometry-1/#domrect" id="ref-for-domrect①②">DOMRect</a></code> objects in content order that matches the following constraints: <ul> <li data-md> For each element selected by the range, whose parent is not selected by the range, include the border areas returned by invoking <code class="idl"><a data-link-type="idl" href="#dom-element-getclientrects" id="ref-for-dom-element-getclientrects③">getClientRects()</a></code> on the element. <li data-md> For each <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#text" id="ref-for-text">Text</a></code> node selected or partially selected by the range (including when the boundary-points are identical), include <a data-link-type="dfn" href="https://drafts.csswg.org/css-viewport/#scaled" id="ref-for-scaled④">scaled</a> <code class="idl"><a data-link-type="idl" href="https://drafts.fxtf.org/geometry-1/#domrect" id="ref-for-domrect①③">DOMRect</a></code> object (for the part that is selected, not the whole line box). The bounds of these <code class="idl"><a data-link-type="idl" href="https://drafts.fxtf.org/geometry-1/#domrect" id="ref-for-domrect①④">DOMRect</a></code> objects are computed using font metrics; thus, for horizontal writing, the vertical dimension of each box is determined by the font ascent and descent, and the horizontal dimension by the text advance width. If the range covers a partial <a data-link-type="dfn" href="https://drafts.csswg.org/css-text-4/#typographic-character-unit" id="ref-for-typographic-character-unit">typographic character unit</a> (e.g. half a surrogate pair or part of a grapheme cluster), the full typographic character unit must be included for the purpose of computing the bounds of the relevant <code class="idl"><a data-link-type="idl" href="https://drafts.fxtf.org/geometry-1/#domrect" id="ref-for-domrect①⑤">DOMRect</a></code>. <a data-link-type="biblio" href="#biblio-css-text-3" title="CSS Text Module Level 3">[CSS-TEXT-3]</a> The <a data-link-type="dfn" href="#transforms" id="ref-for-transforms②⓪">transforms</a> that apply to the ancestors are applied. </ul> Note: The <code class="idl"><a data-link-type="idl" href="https://drafts.fxtf.org/geometry-1/#domrect" id="ref-for-domrect①⑥">DOMRect</a></code> objects returned by <code class="idl"><a data-link-type="idl" href="#dom-range-getclientrects" id="ref-for-dom-range-getclientrects①">getClientRects()</a></code> are not <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/infrastructure.html#live" id="ref-for-live④">live</a>. The <dfn class="dfn-paneled idl-code" data-dfn-for="Range" data-dfn-type="method" data-export id="dom-range-getboundingclientrect"><code>getBoundingClientRect()</code></dfn> method, when invoked, must return the result of the following algorithm: <ol> <li data-md> Let <var>list</var> be the result of invoking <code class="idl"><a data-link-type="idl" href="#dom-range-getclientrects" id="ref-for-dom-range-getclientrects②">getClientRects()</a></code> on the same range this method was invoked on. <li data-md> If <var>list</var> is empty return a <code class="idl"><a data-link-type="idl" href="https://drafts.fxtf.org/geometry-1/#domrect" id="ref-for-domrect①⑦">DOMRect</a></code> object whose <code class="idl"><a data-link-type="idl" href="https://drafts.fxtf.org/geometry-1/#dom-domrect-x" id="ref-for-dom-domrect-x①">x</a></code>, <code class="idl"><a data-link-type="idl" href="https://drafts.fxtf.org/geometry-1/#dom-domrect-y" id="ref-for-dom-domrect-y①">y</a></code>, <code class="idl"><a data-link-type="idl" href="https://drafts.fxtf.org/geometry-1/#dom-domrect-width" id="ref-for-dom-domrect-width①">width</a></code> and <code class="idl"><a data-link-type="idl" href="https://drafts.fxtf.org/geometry-1/#dom-domrect-height" id="ref-for-dom-domrect-height①">height</a></code> members are zero. <li data-md> If all rectangles in <var>list</var> have zero width or height, return the first rectangle in <var>list</var>. <li data-md> Otherwise, return a <code class="idl"><a data-link-type="idl" href="https://drafts.fxtf.org/geometry-1/#domrect" id="ref-for-domrect①⑧">DOMRect</a></code> object describing the smallest rectangle that includes all of the rectangles in <var>list</var> of which the height or width is not zero. </ol> Note: The <code class="idl"><a data-link-type="idl" href="https://drafts.fxtf.org/geometry-1/#domrect" id="ref-for-domrect①⑨">DOMRect</a></code> object returned by <code class="idl"><a data-link-type="idl" href="#dom-range-getboundingclientrect" id="ref-for-dom-range-getboundingclientrect③">getBoundingClientRect()</a></code> is not <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/infrastructure.html#live" id="ref-for-live⑤">live</a>. <h2 class="heading settled" data-level="10" id="extensions-to-the-mouseevent-interface">10. Extensions to the <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/uievents/#mouseevent" id="ref-for-mouseevent">MouseEvent</a></code> Interface<a class="self-link" href="#extensions-to-the-mouseevent-interface"></a></h2> <a class="self-link" href="#issue-6025106e"></a> The object IDL fragment redefines some members. Can we resolve this somehow? <pre class="idl highlight def"><c- b>partial</c-> <c- b>interface</c-> <a class="idl-code" data-link-type="interface" href="https://w3c.github.io/uievents/#mouseevent" id="ref-for-mouseevent①"><c- g>MouseEvent</c-></a> { <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-double" id="ref-for-idl-double①②"><c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="double" href="#dom-mouseevent-screenx" id="ref-for-dom-mouseevent-screenx"><c- g>screenX</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-double" id="ref-for-idl-double①③"><c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="double" href="#dom-mouseevent-screeny" id="ref-for-dom-mouseevent-screeny"><c- g>screenY</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-double" id="ref-for-idl-double①④"><c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="double" href="#dom-mouseevent-pagex" id="ref-for-dom-mouseevent-pagex"><c- g>pageX</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-double" id="ref-for-idl-double①⑤"><c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="double" href="#dom-mouseevent-pagey" id="ref-for-dom-mouseevent-pagey"><c- g>pageY</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-double" id="ref-for-idl-double①⑥"><c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="double" href="#dom-mouseevent-clientx" id="ref-for-dom-mouseevent-clientx"><c- g>clientX</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-double" id="ref-for-idl-double①⑦"><c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="double" href="#dom-mouseevent-clienty" id="ref-for-dom-mouseevent-clienty"><c- g>clientY</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-double" id="ref-for-idl-double①⑧"><c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="double" href="#dom-mouseevent-x" id="ref-for-dom-mouseevent-x"><c- g>x</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-double" id="ref-for-idl-double①⑨"><c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="double" href="#dom-mouseevent-y" id="ref-for-dom-mouseevent-y"><c- g>y</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-double" id="ref-for-idl-double②⓪"><c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="double" href="#dom-mouseevent-offsetx" id="ref-for-dom-mouseevent-offsetx"><c- g>offsetX</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-double" id="ref-for-idl-double②①"><c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="double" href="#dom-mouseevent-offsety" id="ref-for-dom-mouseevent-offsety"><c- g>offsetY</c-></a>; }; <c- b>partial</c-> <c- b>dictionary</c-> <a class="idl-code" data-link-type="dictionary" href="https://w3c.github.io/uievents/#dictdef-mouseeventinit" id="ref-for-dictdef-mouseeventinit"><c- g>MouseEventInit</c-></a> { <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-double" id="ref-for-idl-double②②"><c- b>double</c-></a> <dfn class="dfn-paneled idl-code" data-default="0.0" data-dfn-for="MouseEventInit" data-dfn-type="dict-member" data-export data-type="double" id="dom-mouseeventinit-screenx"><code><c- g>screenX</c-></code></dfn> = 0.0; <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-double" id="ref-for-idl-double②③"><c- b>double</c-></a> <dfn class="dfn-paneled idl-code" data-default="0.0" data-dfn-for="MouseEventInit" data-dfn-type="dict-member" data-export data-type="double" id="dom-mouseeventinit-screeny"><code><c- g>screenY</c-></code></dfn> = 0.0; <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-double" id="ref-for-idl-double②④"><c- b>double</c-></a> <dfn class="dfn-paneled idl-code" data-default="0.0" data-dfn-for="MouseEventInit" data-dfn-type="dict-member" data-export data-type="double" id="dom-mouseeventinit-clientx"><code><c- g>clientX</c-></code></dfn> = 0.0; <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-double" id="ref-for-idl-double②⑤"><c- b>double</c-></a> <dfn class="dfn-paneled idl-code" data-default="0.0" data-dfn-for="MouseEventInit" data-dfn-type="dict-member" data-export data-type="double" id="dom-mouseeventinit-clienty"><code><c- g>clientY</c-></code></dfn> = 0.0; }; </pre> The <dfn class="dfn-paneled idl-code" data-dfn-for="MouseEvent" data-dfn-type="attribute" data-export id="dom-mouseevent-screenx"><code>screenX</code></dfn> attribute must return the x-coordinate of the position where the event occurred relative to the origin of the <a data-link-type="dfn" href="#web-exposed-screen-area" id="ref-for-web-exposed-screen-area⑥">Web-exposed screen area</a>. The <dfn class="dfn-paneled idl-code" data-dfn-for="MouseEvent" data-dfn-type="attribute" data-export id="dom-mouseevent-screeny"><code>screenY</code></dfn> attribute must return the y-coordinate of the position where the event occurred relative to the origin of the <a data-link-type="dfn" href="#web-exposed-screen-area" id="ref-for-web-exposed-screen-area⑦">Web-exposed screen area</a>. The <dfn class="dfn-paneled idl-code" data-dfn-for="MouseEvent" data-dfn-type="attribute" data-export id="dom-mouseevent-pagex"><code>pageX</code></dfn> attribute must follow these steps: <ol> <li data-md> If the event’s <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#dispatch-flag" id="ref-for-dispatch-flag">dispatch flag</a> is set, return the horizontal coordinate of the position where the event occurred relative to the origin of the <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#initial-containing-block" id="ref-for-initial-containing-block②⑤">initial containing block</a> and terminate these steps. <li data-md> Let <var>offset</var> be the value of the <code class="idl"><a data-link-type="idl" href="#dom-window-scrollx" id="ref-for-dom-window-scrollx⑧">scrollX</a></code> attribute of the event’s associated <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/nav-history-apis.html#window" id="ref-for-window⑥">Window</a></code> object, if there is one, or zero otherwise. <li data-md> Return the sum of <var>offset</var> and the value of the event’s <code class="idl"><a data-link-type="idl" href="#dom-mouseevent-clientx" id="ref-for-dom-mouseevent-clientx①">clientX</a></code> attribute. </ol> The <dfn class="dfn-paneled idl-code" data-dfn-for="MouseEvent" data-dfn-type="attribute" data-export id="dom-mouseevent-pagey"><code>pageY</code></dfn> attribute must follow these steps: <ol> <li data-md> If the event’s <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#dispatch-flag" id="ref-for-dispatch-flag①">dispatch flag</a> is set, return the vertical coordinate of the position where the event occurred relative to the origin of the <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#initial-containing-block" id="ref-for-initial-containing-block②⑥">initial containing block</a> and terminate these steps. <li data-md> Let <var>offset</var> be the value of the <code class="idl"><a data-link-type="idl" href="#dom-window-scrolly" id="ref-for-dom-window-scrolly⑦">scrollY</a></code> attribute of the event’s associated <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/nav-history-apis.html#window" id="ref-for-window⑦">Window</a></code> object, if there is one, or zero otherwise. <li data-md> Return the sum of <var>offset</var> and the value of the event’s <code class="idl"><a data-link-type="idl" href="#dom-mouseevent-clienty" id="ref-for-dom-mouseevent-clienty①">clientY</a></code> attribute. </ol> The <dfn class="dfn-paneled idl-code" data-dfn-for="MouseEvent" data-dfn-type="attribute" data-export id="dom-mouseevent-clientx"><code>clientX</code></dfn> attribute must return the x-coordinate of the position where the event occurred relative to the origin of the <a data-link-type="dfn" href="https://drafts.csswg.org/css2/#viewport%E2%91%A0" id="ref-for-viewport%E2%91%A0⑧⑧">viewport</a>. The <dfn class="dfn-paneled idl-code" data-dfn-for="MouseEvent" data-dfn-type="attribute" data-export id="dom-mouseevent-clienty"><code>clientY</code></dfn> attribute must return the y-coordinate of the position where the event occurred relative to the origin of the <a data-link-type="dfn" href="https://drafts.csswg.org/css2/#viewport%E2%91%A0" id="ref-for-viewport%E2%91%A0⑧⑨">viewport</a>. The <dfn class="dfn-paneled idl-code" data-dfn-for="MouseEvent" data-dfn-type="attribute" data-export id="dom-mouseevent-x"><code>x</code></dfn> attribute must return the value of <code class="idl"><a data-link-type="idl" href="#dom-mouseevent-clientx" id="ref-for-dom-mouseevent-clientx②">clientX</a></code>. The <dfn class="dfn-paneled idl-code" data-dfn-for="MouseEvent" data-dfn-type="attribute" data-export id="dom-mouseevent-y"><code>y</code></dfn> attribute must return the value of <code class="idl"><a data-link-type="idl" href="#dom-mouseevent-clienty" id="ref-for-dom-mouseevent-clienty②">clientY</a></code>. The <dfn class="dfn-paneled idl-code" data-dfn-for="MouseEvent" data-dfn-type="attribute" data-export id="dom-mouseevent-offsetx"><code>offsetX</code></dfn> attribute must follow these steps: <ol> <li data-md> If the event’s <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#dispatch-flag" id="ref-for-dispatch-flag②">dispatch flag</a> is set, return the x-coordinate of the position where the event occurred relative to the origin of the <a data-link-type="dfn" href="https://drafts.csswg.org/css-box-4/#padding-edge" id="ref-for-padding-edge③⓪">padding edge</a> of the target node, ignoring the <a data-link-type="dfn" href="#transforms" id="ref-for-transforms②①">transforms</a> that apply to the element and its ancestors, and terminate these steps. <li data-md> Return the value of the event’s <code class="idl"><a data-link-type="idl" href="#dom-mouseevent-pagex" id="ref-for-dom-mouseevent-pagex①">pageX</a></code> attribute. </ol> The <dfn class="dfn-paneled idl-code" data-dfn-for="MouseEvent" data-dfn-type="attribute" data-export id="dom-mouseevent-offsety"><code>offsetY</code></dfn> attribute must follow these steps: <ol> <li data-md> If the event’s <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#dispatch-flag" id="ref-for-dispatch-flag③">dispatch flag</a> is set, return the y-coordinate of the position where the event occurred relative to the origin of the <a data-link-type="dfn" href="https://drafts.csswg.org/css-box-4/#padding-edge" id="ref-for-padding-edge③①">padding edge</a> of the target node, ignoring the <a data-link-type="dfn" href="#transforms" id="ref-for-transforms②②">transforms</a> that apply to the element and its ancestors, and terminate these steps. <li data-md> Return the value of the event’s <code class="idl"><a data-link-type="idl" href="#dom-mouseevent-pagey" id="ref-for-dom-mouseevent-pagey①">pageY</a></code> attribute. </ol> <h2 class="heading settled" data-level="11" id="geometry">11. Geometry<a class="self-link" href="#geometry"></a></h2> <h3 class="atrisk heading settled" data-level="11.1" id="the-geometryutils-interface">11.1. The <code class="idl"><a data-link-type="idl" href="#geometryutils" id="ref-for-geometryutils">GeometryUtils</a></code> Interface<a class="self-link" href="#the-geometryutils-interface"></a></h3> <pre class="idl highlight def"><c- b>enum</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="enum" data-export id="enumdef-cssboxtype"><code><c- g>CSSBoxType</c-></code></dfn> { <dfn class="dfn-paneled idl-code" data-dfn-for="CSSBoxType" data-dfn-type="enum-value" data-export id="dom-cssboxtype-margin"><code><c- s>"margin"</c-></code></dfn>, <dfn class="dfn-paneled idl-code" data-dfn-for="CSSBoxType" data-dfn-type="enum-value" data-export id="dom-cssboxtype-border"><code><c- s>"border"</c-></code></dfn>, <dfn class="dfn-paneled idl-code" data-dfn-for="CSSBoxType" data-dfn-type="enum-value" data-export id="dom-cssboxtype-padding"><code><c- s>"padding"</c-></code></dfn>, <dfn class="dfn-paneled idl-code" data-dfn-for="CSSBoxType" data-dfn-type="enum-value" data-export id="dom-cssboxtype-content"><code><c- s>"content"</c-></code></dfn> }; <c- b>dictionary</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="dictionary" data-export id="dictdef-boxquadoptions"><code><c- g>BoxQuadOptions</c-></code></dfn> { <a data-link-type="idl-name" href="#enumdef-cssboxtype" id="ref-for-enumdef-cssboxtype"><c- n>CSSBoxType</c-></a> <dfn class="dfn-paneled idl-code" data-default=""border"" data-dfn-for="BoxQuadOptions" data-dfn-type="dict-member" data-export data-type="CSSBoxType" id="dom-boxquadoptions-box"><code><c- g>box</c-></code></dfn> = "border"; <a data-link-type="idl-name" href="#typedefdef-geometrynode" id="ref-for-typedefdef-geometrynode"><c- n>GeometryNode</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="BoxQuadOptions" data-dfn-type="dict-member" data-export data-type="GeometryNode" id="dom-boxquadoptions-relativeto"><code><c- g>relativeTo</c-></code></dfn>; // XXX default document (i.e. viewport) }; <c- b>dictionary</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="dictionary" data-export id="dictdef-convertcoordinateoptions"><code><c- g>ConvertCoordinateOptions</c-></code></dfn> { <a data-link-type="idl-name" href="#enumdef-cssboxtype" id="ref-for-enumdef-cssboxtype①"><c- n>CSSBoxType</c-></a> <dfn class="dfn-paneled idl-code" data-default=""border"" data-dfn-for="ConvertCoordinateOptions" data-dfn-type="dict-member" data-export data-type="CSSBoxType" id="dom-convertcoordinateoptions-frombox"><code><c- g>fromBox</c-></code></dfn> = "border"; <a data-link-type="idl-name" href="#enumdef-cssboxtype" id="ref-for-enumdef-cssboxtype②"><c- n>CSSBoxType</c-></a> <dfn class="dfn-paneled idl-code" data-default=""border"" data-dfn-for="ConvertCoordinateOptions" data-dfn-type="dict-member" data-export data-type="CSSBoxType" id="dom-convertcoordinateoptions-tobox"><code><c- g>toBox</c-></code></dfn> = "border"; }; <c- b>interface</c-> <c- b>mixin</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="geometryutils"><code><c- g>GeometryUtils</c-></code></dfn> { <a data-link-type="dfn" href="https://webidl.spec.whatwg.org/#idl-sequence" id="ref-for-idl-sequence②"><c- b>sequence</c-></a><<a data-link-type="idl-name" href="https://drafts.fxtf.org/geometry-1/#domquad" id="ref-for-domquad"><c- n>DOMQuad</c-></a>> <a class="idl-code" data-link-type="method" href="#dom-geometryutils-getboxquads" id="ref-for-dom-geometryutils-getboxquads"><c- g>getBoxQuads</c-></a>(<c- b>optional</c-> <a data-link-type="idl-name" href="#dictdef-boxquadoptions" id="ref-for-dictdef-boxquadoptions"><c- n>BoxQuadOptions</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="GeometryUtils/getBoxQuads(options), GeometryUtils/getBoxQuads()" data-dfn-type="argument" data-export id="dom-geometryutils-getboxquads-options-options"><code><c- g>options</c-></code></dfn> = {}); <a data-link-type="idl-name" href="https://drafts.fxtf.org/geometry-1/#domquad" id="ref-for-domquad①"><c- n>DOMQuad</c-></a> <a class="idl-code" data-link-type="method" href="#dom-geometryutils-convertquadfromnode" id="ref-for-dom-geometryutils-convertquadfromnode"><c- g>convertQuadFromNode</c-></a>(<a data-link-type="idl-name" href="https://drafts.fxtf.org/geometry-1/#dictdef-domquadinit" id="ref-for-dictdef-domquadinit"><c- n>DOMQuadInit</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="GeometryUtils/convertQuadFromNode(quad, from, options), GeometryUtils/convertQuadFromNode(quad, from)" data-dfn-type="argument" data-export id="dom-geometryutils-convertquadfromnode-quad-from-options-quad"><code><c- g>quad</c-></code></dfn>, <a data-link-type="idl-name" href="#typedefdef-geometrynode" id="ref-for-typedefdef-geometrynode①"><c- n>GeometryNode</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="GeometryUtils/convertQuadFromNode(quad, from, options), GeometryUtils/convertQuadFromNode(quad, from)" data-dfn-type="argument" data-export id="dom-geometryutils-convertquadfromnode-quad-from-options-from"><code><c- g>from</c-></code></dfn>, <c- b>optional</c-> <a data-link-type="idl-name" href="#dictdef-convertcoordinateoptions" id="ref-for-dictdef-convertcoordinateoptions"><c- n>ConvertCoordinateOptions</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="GeometryUtils/convertQuadFromNode(quad, from, options), GeometryUtils/convertQuadFromNode(quad, from)" data-dfn-type="argument" data-export id="dom-geometryutils-convertquadfromnode-quad-from-options-options"><code><c- g>options</c-></code></dfn> = {}); <a data-link-type="idl-name" href="https://drafts.fxtf.org/geometry-1/#domquad" id="ref-for-domquad②"><c- n>DOMQuad</c-></a> <a class="idl-code" data-link-type="method" href="#dom-geometryutils-convertrectfromnode" id="ref-for-dom-geometryutils-convertrectfromnode"><c- g>convertRectFromNode</c-></a>(<a data-link-type="idl-name" href="https://drafts.fxtf.org/geometry-1/#domrectreadonly" id="ref-for-domrectreadonly"><c- n>DOMRectReadOnly</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="GeometryUtils/convertRectFromNode(rect, from, options), GeometryUtils/convertRectFromNode(rect, from)" data-dfn-type="argument" data-export id="dom-geometryutils-convertrectfromnode-rect-from-options-rect"><code><c- g>rect</c-></code></dfn>, <a data-link-type="idl-name" href="#typedefdef-geometrynode" id="ref-for-typedefdef-geometrynode②"><c- n>GeometryNode</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="GeometryUtils/convertRectFromNode(rect, from, options), GeometryUtils/convertRectFromNode(rect, from)" data-dfn-type="argument" data-export id="dom-geometryutils-convertrectfromnode-rect-from-options-from"><code><c- g>from</c-></code></dfn>, <c- b>optional</c-> <a data-link-type="idl-name" href="#dictdef-convertcoordinateoptions" id="ref-for-dictdef-convertcoordinateoptions①"><c- n>ConvertCoordinateOptions</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="GeometryUtils/convertRectFromNode(rect, from, options), GeometryUtils/convertRectFromNode(rect, from)" data-dfn-type="argument" data-export id="dom-geometryutils-convertrectfromnode-rect-from-options-options"><code><c- g>options</c-></code></dfn> = {}); <a data-link-type="idl-name" href="https://drafts.fxtf.org/geometry-1/#dompoint" id="ref-for-dompoint"><c- n>DOMPoint</c-></a> <a class="idl-code" data-link-type="method" href="#dom-geometryutils-convertpointfromnode" id="ref-for-dom-geometryutils-convertpointfromnode"><c- g>convertPointFromNode</c-></a>(<a data-link-type="idl-name" href="https://drafts.fxtf.org/geometry-1/#dictdef-dompointinit" id="ref-for-dictdef-dompointinit"><c- n>DOMPointInit</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="GeometryUtils/convertPointFromNode(point, from, options), GeometryUtils/convertPointFromNode(point, from)" data-dfn-type="argument" data-export id="dom-geometryutils-convertpointfromnode-point-from-options-point"><code><c- g>point</c-></code></dfn>, <a data-link-type="idl-name" href="#typedefdef-geometrynode" id="ref-for-typedefdef-geometrynode③"><c- n>GeometryNode</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="GeometryUtils/convertPointFromNode(point, from, options), GeometryUtils/convertPointFromNode(point, from)" data-dfn-type="argument" data-export id="dom-geometryutils-convertpointfromnode-point-from-options-from"><code><c- g>from</c-></code></dfn>, <c- b>optional</c-> <a data-link-type="idl-name" href="#dictdef-convertcoordinateoptions" id="ref-for-dictdef-convertcoordinateoptions②"><c- n>ConvertCoordinateOptions</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="GeometryUtils/convertPointFromNode(point, from, options), GeometryUtils/convertPointFromNode(point, from)" data-dfn-type="argument" data-export id="dom-geometryutils-convertpointfromnode-point-from-options-options"><code><c- g>options</c-></code></dfn> = {}); // XXX z,w turns into 0 }; <a data-link-type="idl-name" href="https://dom.spec.whatwg.org/#text" id="ref-for-text①"><c- n>Text</c-></a> <c- b>includes</c-> <a data-link-type="idl-name" href="#geometryutils" id="ref-for-geometryutils①"><c- n>GeometryUtils</c-></a>; // like Range <a data-link-type="idl-name" href="https://dom.spec.whatwg.org/#element" id="ref-for-element⑦"><c- n>Element</c-></a> <c- b>includes</c-> <a data-link-type="idl-name" href="#geometryutils" id="ref-for-geometryutils②"><c- n>GeometryUtils</c-></a>; <a data-link-type="idl-name" href="https://drafts.csswg.org/css-pseudo-4/#csspseudoelement" id="ref-for-csspseudoelement"><c- n>CSSPseudoElement</c-></a> <c- b>includes</c-> <a data-link-type="idl-name" href="#geometryutils" id="ref-for-geometryutils③"><c- n>GeometryUtils</c-></a>; <a data-link-type="idl-name" href="https://dom.spec.whatwg.org/#document" id="ref-for-document①①"><c- n>Document</c-></a> <c- b>includes</c-> <a data-link-type="idl-name" href="#geometryutils" id="ref-for-geometryutils④"><c- n>GeometryUtils</c-></a>; <c- b>typedef</c-> (<a data-link-type="idl-name" href="https://dom.spec.whatwg.org/#text" id="ref-for-text②"><c- n>Text</c-></a> <c- b>or</c-> <a data-link-type="idl-name" href="https://dom.spec.whatwg.org/#element" id="ref-for-element⑧"><c- n>Element</c-></a> <c- b>or</c-> <a data-link-type="idl-name" href="https://drafts.csswg.org/css-pseudo-4/#csspseudoelement" id="ref-for-csspseudoelement①"><c- n>CSSPseudoElement</c-></a> <c- b>or</c-> <a data-link-type="idl-name" href="https://dom.spec.whatwg.org/#document" id="ref-for-document①②"><c- n>Document</c-></a>) <dfn class="dfn-paneled idl-code" data-dfn-type="typedef" data-export id="typedefdef-geometrynode"><code><c- g>GeometryNode</c-></code></dfn>; </pre> The <dfn class="dfn-paneled idl-code" data-dfn-for="GeometryUtils" data-dfn-type="method" data-export data-lt="getBoxQuads(options)|getBoxQuads()" id="dom-geometryutils-getboxquads"><code>getBoxQuads(<var>options</var>)</code></dfn> method must run the following steps: <ol> <li class="issue" id="issue-33d3f260"> <a class="self-link" href="#issue-33d3f260"></a> DOM order p1 = top left even in RTL scale to 0 means divide by zero, return 0x0 cross-frames not allowed, throw WrongDocumentError? points are flattened (3d transform), z=0. like getClientRect test block in inline pseudo-elements before/after are children of the element viewport boxes are all the same </ol> The <dfn class="dfn-paneled idl-code" data-dfn-for="GeometryUtils" data-dfn-type="method" data-export data-lt="convertQuadFromNode(quad, from, options)|convertQuadFromNode(quad, from)" id="dom-geometryutils-convertquadfromnode"><code>convertQuadFromNode(<var>quad</var>, <var>from</var>, <var>options</var>)</code></dfn> method must run the following steps: <ol> <li> <a class="self-link" href="#issue-2f43b42f"></a>... </ol> The <dfn class="dfn-paneled idl-code" data-dfn-for="GeometryUtils" data-dfn-type="method" data-export data-lt="convertRectFromNode(rect, from, options)|convertRectFromNode(rect, from)" id="dom-geometryutils-convertrectfromnode"><code>convertRectFromNode(<var>rect</var>, <var>from</var>, <var>options</var>)</code></dfn> method must run the following steps: <ol> <li> <a class="self-link" href="#issue-2f43b42f①"></a>... </ol> The <dfn class="dfn-paneled idl-code" data-dfn-for="GeometryUtils" data-dfn-type="method" data-export data-lt="convertPointFromNode(point, from, options)|convertPointFromNode(point, from)" id="dom-geometryutils-convertpointfromnode"><code>convertPointFromNode(<var>point</var>, <var>from</var>, <var>options</var>)</code></dfn> method must run the following steps: <ol> <li> <a class="self-link" href="#issue-2f43b42f②"></a>... </ol> <h2 class="heading settled" data-level="12" id="visualViewport">12. VisualViewport<a class="self-link" href="#visualViewport"></a></h2> <h3 class="heading settled" data-level="12.1" id="the-visualviewport-interface">12.1. The <code class="idl"><a data-link-type="idl" href="#visualviewport" id="ref-for-visualviewport⑤">VisualViewport</a></code> Interface<a class="self-link" href="#the-visualviewport-interface"></a></h3> <pre class="idl highlight def">[<a class="idl-code" data-link-type="extended-attribute" href="https://webidl.spec.whatwg.org/#Exposed" id="ref-for-Exposed④"><c- g>Exposed</c-></a>=<c- n>Window</c->] <c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="visualviewport"><code><c- g>VisualViewport</c-></code></dfn> : <a data-link-type="idl-name" href="https://dom.spec.whatwg.org/#eventtarget" id="ref-for-eventtarget①"><c- n>EventTarget</c-></a> { <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-double" id="ref-for-idl-double②⑥"><c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="double" href="#dom-visualviewport-offsetleft" id="ref-for-dom-visualviewport-offsetleft①"><c- g>offsetLeft</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-double" id="ref-for-idl-double②⑦"><c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="double" href="#dom-visualviewport-offsettop" id="ref-for-dom-visualviewport-offsettop①"><c- g>offsetTop</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-double" id="ref-for-idl-double②⑧"><c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="double" href="#dom-visualviewport-pageleft" id="ref-for-dom-visualviewport-pageleft①"><c- g>pageLeft</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-double" id="ref-for-idl-double②⑨"><c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="double" href="#dom-visualviewport-pagetop" id="ref-for-dom-visualviewport-pagetop①"><c- g>pageTop</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-double" id="ref-for-idl-double③⓪"><c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="double" href="#dom-visualviewport-width" id="ref-for-dom-visualviewport-width①"><c- g>width</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-double" id="ref-for-idl-double③①"><c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="double" href="#dom-visualviewport-height" id="ref-for-dom-visualviewport-height①"><c- g>height</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-double" id="ref-for-idl-double③②"><c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="double" href="#dom-visualviewport-scale" id="ref-for-dom-visualviewport-scale"><c- g>scale</c-></a>; <c- b>attribute</c-> <a data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler" id="ref-for-eventhandler①"><c- n>EventHandler</c-></a> <a class="idl-code" data-link-type="attribute" data-type="EventHandler" href="#dom-visualviewport-onresize" id="ref-for-dom-visualviewport-onresize"><c- g>onresize</c-></a>; <c- b>attribute</c-> <a data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler" id="ref-for-eventhandler②"><c- n>EventHandler</c-></a> <a class="idl-code" data-link-type="attribute" data-type="EventHandler" href="#dom-visualviewport-onscroll" id="ref-for-dom-visualviewport-onscroll"><c- g>onscroll</c-></a>; <c- b>attribute</c-> <a data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler" id="ref-for-eventhandler③"><c- n>EventHandler</c-></a> <a class="idl-code" data-link-type="attribute" data-type="EventHandler" href="#dom-visualviewport-onscrollend" id="ref-for-dom-visualviewport-onscrollend"><c- g>onscrollend</c-></a>; }; </pre> The <dfn class="dfn-paneled idl-code" data-dfn-for="VisualViewport" data-dfn-type="attribute" data-export id="dom-visualviewport-offsetleft"><code>offsetLeft</code></dfn> attribute must run these steps: <ol> <li data-md> If the <a data-link-type="dfn" href="#visual-viewport" id="ref-for-visual-viewport②">visual viewport</a>’s <a data-link-type="dfn" href="#visualviewport-associated-document" id="ref-for-visualviewport-associated-document①">associated document</a> is not <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/document-sequences.html#fully-active" id="ref-for-fully-active①">fully active</a>, return 0. <li data-md> Otherwise, return the offset of the left edge of the <a data-link-type="dfn" href="#visual-viewport" id="ref-for-visual-viewport③">visual viewport</a> from the left edge of the <a data-link-type="dfn" href="#layout-viewport" id="ref-for-layout-viewport③">layout viewport</a>. </ol> The <dfn class="dfn-paneled idl-code" data-dfn-for="VisualViewport" data-dfn-type="attribute" data-export id="dom-visualviewport-offsettop"><code>offsetTop</code></dfn> attribute must run these steps: <ol> <li data-md> If the <a data-link-type="dfn" href="#visual-viewport" id="ref-for-visual-viewport④">visual viewport</a>’s <a data-link-type="dfn" href="#visualviewport-associated-document" id="ref-for-visualviewport-associated-document②">associated document</a> is not <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/document-sequences.html#fully-active" id="ref-for-fully-active②">fully active</a>, return 0. <li data-md> Otherwise, return the offset of the top edge of the <a data-link-type="dfn" href="#visual-viewport" id="ref-for-visual-viewport⑤">visual viewport</a> from the top edge of the <a data-link-type="dfn" href="#layout-viewport" id="ref-for-layout-viewport④">layout viewport</a>. </ol> The <dfn class="dfn-paneled idl-code" data-dfn-for="VisualViewport" data-dfn-type="attribute" data-export id="dom-visualviewport-pageleft"><code>pageLeft</code></dfn> attribute must run these steps: <ol> <li data-md> If the <a data-link-type="dfn" href="#visual-viewport" id="ref-for-visual-viewport⑥">visual viewport</a>’s <a data-link-type="dfn" href="#visualviewport-associated-document" id="ref-for-visualviewport-associated-document③">associated document</a> is not <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/document-sequences.html#fully-active" id="ref-for-fully-active③">fully active</a>, return 0. <li data-md> Otherwise, return the offset of the left edge of the <a data-link-type="dfn" href="#visual-viewport" id="ref-for-visual-viewport⑦">visual viewport</a> from the left edge of the <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#initial-containing-block" id="ref-for-initial-containing-block②⑦">initial containing block</a> of the <a data-link-type="dfn" href="#layout-viewport" id="ref-for-layout-viewport⑤">layout viewport</a>’s <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-document" id="ref-for-concept-document">document</a>. </ol> The <dfn class="dfn-paneled idl-code" data-dfn-for="VisualViewport" data-dfn-type="attribute" data-export id="dom-visualviewport-pagetop"><code>pageTop</code></dfn> attribute must run these steps: <ol> <li data-md> If the <a data-link-type="dfn" href="#visual-viewport" id="ref-for-visual-viewport⑧">visual viewport</a>’s <a data-link-type="dfn" href="#visualviewport-associated-document" id="ref-for-visualviewport-associated-document④">associated document</a> is not <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/document-sequences.html#fully-active" id="ref-for-fully-active④">fully active</a>, return 0. <li data-md> Otherwise, return the offset of the top edge of the <a data-link-type="dfn" href="#visual-viewport" id="ref-for-visual-viewport⑨">visual viewport</a> from the top edge of the <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#initial-containing-block" id="ref-for-initial-containing-block②⑧">initial containing block</a> of the <a data-link-type="dfn" href="#layout-viewport" id="ref-for-layout-viewport⑥">layout viewport</a>’s <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-document" id="ref-for-concept-document①">document</a>. </ol> The <dfn class="dfn-paneled idl-code" data-dfn-for="VisualViewport" data-dfn-type="attribute" data-export id="dom-visualviewport-width"><code>width</code></dfn> attribute must run these steps: <ol> <li data-md> If the <a data-link-type="dfn" href="#visual-viewport" id="ref-for-visual-viewport①⓪">visual viewport</a>’s <a data-link-type="dfn" href="#visualviewport-associated-document" id="ref-for-visualviewport-associated-document⑤">associated document</a> is not <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/document-sequences.html#fully-active" id="ref-for-fully-active⑤">fully active</a>, return 0. <li data-md> Otherwise, return the width of the <a data-link-type="dfn" href="#visual-viewport" id="ref-for-visual-viewport①①">visual viewport</a> excluding the width of any rendered vertical <a data-link-type="dfn" href="https://drafts.csswg.org/css-overflow-3/#classic-scrollbars" id="ref-for-classic-scrollbars">classic scrollbar</a> that is fixed to the visual viewport. </ol> Note: Since this value is returned in CSS pixels, the value will decrease in magnitude if either <a data-link-type="dfn" href="#page-zoom" id="ref-for-page-zoom①">page zoom</a> or the <a data-link-type="dfn" href="#scale-factor" id="ref-for-scale-factor②">scale factor</a> is increased. Note: A scrollbar that is fixed to the visual viewport is one that does not change size or location as the visual viewport is zoomed and panned. Because this value is in CSS pixels, when excluding the scrollbar width the UA must account for how large the scrollbar is as measured in CSS pixels. That is, the amount excluded decreases when zooming in and increases when zooming out. The <dfn class="dfn-paneled idl-code" data-dfn-for="VisualViewport" data-dfn-type="attribute" data-export id="dom-visualviewport-height"><code>height</code></dfn> attribute must run these steps: <ol> <li data-md> If the <a data-link-type="dfn" href="#visual-viewport" id="ref-for-visual-viewport①②">visual viewport</a>’s <a data-link-type="dfn" href="#visualviewport-associated-document" id="ref-for-visualviewport-associated-document⑥">associated document</a> is not <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/document-sequences.html#fully-active" id="ref-for-fully-active⑥">fully active</a>, return 0. <li data-md> Otherwise, return the height of the <a data-link-type="dfn" href="#visual-viewport" id="ref-for-visual-viewport①③">visual viewport</a> excluding the height of any rendered horizontal <a data-link-type="dfn" href="https://drafts.csswg.org/css-overflow-3/#classic-scrollbars" id="ref-for-classic-scrollbars①">classic scrollbar</a> that is fixed to the visual viewport. </ol> The <dfn class="dfn-paneled idl-code" data-dfn-for="VisualViewport" data-dfn-type="attribute" data-export id="dom-visualviewport-scale"><code>scale</code></dfn> attribute must run these steps: <ol> <li data-md> If the <a data-link-type="dfn" href="#visual-viewport" id="ref-for-visual-viewport①④">visual viewport</a>’s <a data-link-type="dfn" href="#visualviewport-associated-document" id="ref-for-visualviewport-associated-document⑦">associated document</a> is not <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/document-sequences.html#fully-active" id="ref-for-fully-active⑦">fully active</a>, return 0 and abort these steps. <li data-md> If there is no output device, return 1 and abort these steps. <li data-md> Otherwise, return the <a data-link-type="dfn" href="#visual-viewport" id="ref-for-visual-viewport①⑤">visual viewport</a>’s <a data-link-type="dfn" href="#scale-factor" id="ref-for-scale-factor③">scale factor</a>. </ol> <dfn class="dfn-paneled idl-code" data-dfn-for="VisualViewport" data-dfn-type="attribute" data-export id="dom-visualviewport-onresize"><code>onresize</code></dfn> is the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#event-handler-idl-attributes" id="ref-for-event-handler-idl-attributes①">event handler IDL attribute</a> for the <a class="idl-code" data-link-type="event" href="#eventdef-window-resize" id="ref-for-eventdef-window-resize">resize</a> event. <dfn class="dfn-paneled idl-code" data-dfn-for="VisualViewport" data-dfn-type="attribute" data-export id="dom-visualviewport-onscroll"><code>onscroll</code></dfn> is the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#event-handler-idl-attributes" id="ref-for-event-handler-idl-attributes②">event handler IDL attribute</a> for the <a class="idl-code" data-link-type="event" href="#eventdef-document-scroll" id="ref-for-eventdef-document-scroll">scroll</a> event. <dfn class="dfn-paneled idl-code" data-dfn-for="VisualViewport" data-dfn-type="attribute" data-export id="dom-visualviewport-onscrollend"><code>onscrollend</code></dfn> is the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#event-handler-idl-attributes" id="ref-for-event-handler-idl-attributes③">event handler IDL attribute</a> for the <a class="idl-code" data-link-type="event" href="#eventdef-document-scrollend" id="ref-for-eventdef-document-scrollend③">scrollend</a> event. <h2 class="heading settled" data-level="13" id="events">13. Events<a class="self-link" href="#events"></a></h2> <h3 class="heading settled" data-level="13.1" id="resizing-viewports">13.1. Resizing viewports<a class="self-link" href="#resizing-viewports"></a></h3> This section integrates with the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#event-loop" id="ref-for-event-loop①">event loop</a> defined in HTML. <a data-link-type="biblio" href="#biblio-html" title="HTML Standard">[HTML]</a> When asked to <dfn class="dfn-paneled" data-dfn-for="Document" data-dfn-type="dfn" data-export id="document-run-the-resize-steps">run the resize steps</dfn> for a <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document" id="ref-for-document①③">Document</a></code> <var>doc</var>, run these steps: <ol> <li data-md> If <var>doc</var>’s <a data-link-type="dfn" href="https://drafts.csswg.org/css2/#viewport%E2%91%A0" id="ref-for-viewport%E2%91%A0⑨⓪">viewport</a> has had its width or height changed (e.g. as a result of the user resizing the browser window, or changing page zoom, or an <code>iframe</code> element’s dimensions are changed) since the last time these steps were run, <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-event-fire" id="ref-for-concept-event-fire①">fire an event</a> named <a class="idl-code" data-link-type="event" href="#eventdef-window-resize" id="ref-for-eventdef-window-resize①">resize</a> at the <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/nav-history-apis.html#window" id="ref-for-window⑧">Window</a></code> object associated with <var>doc</var>. <li data-md> If the <code class="idl"><a data-link-type="idl" href="#visualviewport" id="ref-for-visualviewport⑥">VisualViewport</a></code> associated with <var>doc</var> has had its <a class="idl-code" data-link-type="attribute" href="#dom-visualviewport-scale" id="ref-for-dom-visualviewport-scale①">scale</a>, <a class="idl-code" data-link-type="attribute" href="#dom-visualviewport-width" id="ref-for-dom-visualviewport-width②">width</a>, or <a class="idl-code" data-link-type="attribute" href="#dom-visualviewport-height" id="ref-for-dom-visualviewport-height②">height</a> properties changed since the last time these steps were run, <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-event-fire" id="ref-for-concept-event-fire②">fire an event</a> named <a class="idl-code" data-link-type="event" href="#eventdef-window-resize" id="ref-for-eventdef-window-resize②">resize</a> at the <code class="idl"><a data-link-type="idl" href="#visualviewport" id="ref-for-visualviewport⑦">VisualViewport</a></code>. </ol> <h3 class="heading settled" data-level="13.2" id="scrolling-events">13.2. Scrolling<a class="self-link" href="#scrolling-events"></a></h3> This section integrates with the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#event-loop" id="ref-for-event-loop②">event loop</a> defined in HTML. <a data-link-type="biblio" href="#biblio-html" title="HTML Standard">[HTML]</a> Each <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document" id="ref-for-document①④">Document</a></code> has an associated list of <dfn class="dfn-paneled" data-dfn-for="Document" data-dfn-type="dfn" data-noexport id="document-pending-scroll-event-targets">pending scroll event targets</dfn>, initially empty. Each <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document" id="ref-for-document①⑤">Document</a></code> has an associated list of <dfn class="dfn-paneled" data-dfn-for="Document" data-dfn-type="dfn" data-noexport id="document-pending-scrollend-event-targets">pending scrollend event targets</dfn>, initially empty. Whenever a <a data-link-type="dfn" href="https://drafts.csswg.org/css2/#viewport%E2%91%A0" id="ref-for-viewport%E2%91%A0⑨①">viewport</a> gets scrolled (whether in response to user interaction or by an API), the user agent must run these steps: <ol> <li data-md> Let <var>doc</var> be the <a data-link-type="dfn" href="https://drafts.csswg.org/css2/#viewport%E2%91%A0" id="ref-for-viewport%E2%91%A0⑨②">viewport’s</a> associated <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document" id="ref-for-document①⑥">Document</a></code>. <li data-md> If <var>doc</var> is a <a data-link-type="dfn" href="https://drafts.csswg.org/css-scroll-snap-1/#scroll-snap-container" id="ref-for-scroll-snap-container①">snap container</a>, run the steps to <a data-link-type="dfn" href="https://drafts.csswg.org/css-scroll-snap-2/#document-update-scrollsnapchanging-targets" id="ref-for-document-update-scrollsnapchanging-targets">update scrollsnapchanging targets</a> for <var>doc</var> with <var>doc</var>’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-scroll-snap-2/#eventual-snap-target" id="ref-for-eventual-snap-target">eventual snap target</a> in the block axis as newBlockTarget and <var>doc</var>’s eventual snap target in the inline axis as newInlineTarget. <li data-md> If <var>doc</var> is already in <var>doc</var>’s <a data-link-type="dfn" href="#document-pending-scroll-event-targets" id="ref-for-document-pending-scroll-event-targets">pending scroll event targets</a>, abort these steps. <li data-md> Append <var>doc</var> to <var>doc</var>’s <a data-link-type="dfn" href="#document-pending-scroll-event-targets" id="ref-for-document-pending-scroll-event-targets①">pending scroll event targets</a>. </ol> Whenever an element gets scrolled (whether in response to user interaction or by an API), the user agent must run these steps: <ol> <li data-md> Let <var>doc</var> be the element’s <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-node-document" id="ref-for-concept-node-document①①">node document</a>. <li data-md> If the element is a <a data-link-type="dfn" href="https://drafts.csswg.org/css-scroll-snap-1/#scroll-snap-container" id="ref-for-scroll-snap-container②">snap container</a>, run the steps to <a data-link-type="dfn" href="https://drafts.csswg.org/css-scroll-snap-2/#document-update-scrollsnapchanging-targets" id="ref-for-document-update-scrollsnapchanging-targets①">update scrollsnapchanging targets</a> for the element with the element’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-scroll-snap-2/#eventual-snap-target" id="ref-for-eventual-snap-target②">eventual snap target</a> in the block axis as newBlockTarget and the element’s eventual snap target in the inline axis as newInlineTarget. <li data-md> If the element is already in <var>doc</var>’s <a data-link-type="dfn" href="#document-pending-scroll-event-targets" id="ref-for-document-pending-scroll-event-targets②">pending scroll event targets</a>, abort these steps. <li data-md> Append the element to <var>doc</var>’s <a data-link-type="dfn" href="#document-pending-scroll-event-targets" id="ref-for-document-pending-scroll-event-targets③">pending scroll event targets</a>. </ol> Whenever a <a data-link-type="dfn" href="#visual-viewport" id="ref-for-visual-viewport①⑥">visual viewport</a> gets scrolled (whether in response to user interaction or by an API), the user agent must run these steps: <ol> <li data-md> Let <var>vv</var> be the <code class="idl"><a data-link-type="idl" href="#visualviewport" id="ref-for-visualviewport⑧">VisualViewport</a></code> object that was scrolled. <li data-md> Let <var>doc</var> be <var>vv</var>’s <a data-link-type="dfn" href="#visualviewport-associated-document" id="ref-for-visualviewport-associated-document⑧">associated document</a>. <li data-md> If <var>vv</var> is already in <var>doc</var>’s <a data-link-type="dfn" href="#document-pending-scroll-event-targets" id="ref-for-document-pending-scroll-event-targets④">pending scroll event targets</a>, abort these steps. <li data-md> Append <var>vv</var> to <var>doc</var>’s <a data-link-type="dfn" href="#document-pending-scroll-event-targets" id="ref-for-document-pending-scroll-event-targets⑤">pending scroll event targets</a>. </ol> When asked to <dfn class="dfn-paneled" data-dfn-for="Document" data-dfn-type="dfn" data-export id="document-run-the-scroll-steps">run the scroll steps</dfn> for a <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document" id="ref-for-document①⑦">Document</a></code> <var>doc</var>, run these steps: <ol> <li data-md> Run the steps to <a data-link-type="dfn" href="https://drafts.csswg.org/css-scroll-snap-2/#document-dispatch-pending-scrollsnapchanging-events" id="ref-for-document-dispatch-pending-scrollsnapchanging-events">dispatch pending scrollsnapchanging events</a> for <var>doc</var>. <li data-md> For each item <var>target</var> in <var>doc</var>’s <a data-link-type="dfn" href="#document-pending-scroll-event-targets" id="ref-for-document-pending-scroll-event-targets⑥">pending scroll event targets</a>, in the order they were added to the list, run these substeps: <ol> <li data-md> If <var>target</var> is a <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document" id="ref-for-document①⑧">Document</a></code>, <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-event-fire" id="ref-for-concept-event-fire③">fire an event</a> named <a class="idl-code" data-link-type="event" href="#eventdef-document-scroll" id="ref-for-eventdef-document-scroll①">scroll</a> that bubbles at <var>target</var>. <li data-md> Otherwise, <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-event-fire" id="ref-for-concept-event-fire④">fire an event</a> named <a class="idl-code" data-link-type="event" href="#eventdef-document-scroll" id="ref-for-eventdef-document-scroll②">scroll</a> at <var>target</var>. </ol> <li data-md> Empty <var>doc</var>’s <a data-link-type="dfn" href="#document-pending-scroll-event-targets" id="ref-for-document-pending-scroll-event-targets⑦">pending scroll event targets</a>. <li data-md> Run the steps to <a data-link-type="dfn" href="https://drafts.csswg.org/css-scroll-snap-2/#document-dispatch-pending-scrollsnapchange-events" id="ref-for-document-dispatch-pending-scrollsnapchange-events">dispatch pending scrollsnapchange events</a> for <var>doc</var>. </ol> Whenever scrolling is <a data-link-type="dfn" href="#scroll-completed" id="ref-for-scroll-completed">completed</a>, the user agent must run these steps: <a class="self-link" href="#issue-5cebf624"></a> In what order are scrollend events dispatched? Ordered based on scroll start or scroll completion? <ol> <li data-md> For each scrolling box <var>box</var> that was scrolled: <ol> <li data-md> If <var>box</var> belongs to a <a data-link-type="dfn" href="https://drafts.csswg.org/css2/#viewport%E2%91%A0" id="ref-for-viewport%E2%91%A0⑨③">viewport</a>, let <var>doc</var> be the viewport’s associated <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document" id="ref-for-document①⑨">Document</a></code> and <var>target</var> be the viewport. If <var>box</var> belongs to a <code class="idl"><a data-link-type="idl" href="#visualviewport" id="ref-for-visualviewport⑨">VisualViewport</a></code>, let <var>doc</var> be the <code class="idl"><a data-link-type="idl" href="#visualviewport" id="ref-for-visualviewport①⓪">VisualViewport</a></code>’s <a data-link-type="dfn" href="#visualviewport-associated-document" id="ref-for-visualviewport-associated-document⑨">associated document</a> and <var>target</var> be the <code class="idl"><a data-link-type="idl" href="#visualviewport" id="ref-for-visualviewport①①">VisualViewport</a></code>. Otherwise, <var>box</var> belongs to an element and let <var>doc</var> be the element’s <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-node-document" id="ref-for-concept-node-document①②">node document</a> and <var>target</var> be the element. <li data-md> If <var>box</var> belongs to a <a data-link-type="dfn" href="https://drafts.csswg.org/css-scroll-snap-1/#scroll-snap-container" id="ref-for-scroll-snap-container③">snap container</a>, <var>snapcontainer</var>, run the <a data-link-type="dfn" href="https://drafts.csswg.org/css-scroll-snap-2/#document-update-scrollsnapchange-targets" id="ref-for-document-update-scrollsnapchange-targets">update scrollsnapchange targets</a> steps for <var>snapcontainer</var>. <li data-md> If <var>target</var> is already in <var>doc</var>’s <a data-link-type="dfn" href="#document-pending-scrollend-event-targets" id="ref-for-document-pending-scrollend-event-targets">pending scrollend event targets</a>, abort these steps. <li data-md> Append <var>target</var> to <var>doc</var>’s <a data-link-type="dfn" href="#document-pending-scrollend-event-targets" id="ref-for-document-pending-scrollend-event-targets①">pending scrollend event targets</a>. </ol> <li data-md> Run the steps to <a data-link-type="dfn">dispatch pending scrollsnapchange targets</a> for <var>doc</var>. <li data-md> For each item <var>target</var> in <var>doc</var>’s <a data-link-type="dfn" href="#document-pending-scrollend-event-targets" id="ref-for-document-pending-scrollend-event-targets②">pending scrollend event targets</a>, in the order they were added to the list, run these substeps: <ol> <li data-md> If <var>target</var> is a <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document" id="ref-for-document②⓪">Document</a></code>, <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-event-fire" id="ref-for-concept-event-fire⑤">fire an event</a> named <a class="idl-code" data-link-type="event" href="#eventdef-document-scrollend" id="ref-for-eventdef-document-scrollend④">scrollend</a> that bubbles at <var>target</var>. <li data-md> Otherwise, <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-event-fire" id="ref-for-concept-event-fire⑥">fire an event</a> named <a class="idl-code" data-link-type="event" href="#eventdef-document-scrollend" id="ref-for-eventdef-document-scrollend⑤">scrollend</a> at <var>target</var>. </ol> <li data-md> Empty <var>doc</var>’s <a data-link-type="dfn" href="#document-pending-scrollend-event-targets" id="ref-for-document-pending-scrollend-event-targets③">pending scrollend event targets</a>. </ol> <h3 class="heading settled" data-level="13.3" id="event-summary">13.3. Event summary<a class="self-link" href="#event-summary"></a></h3> This section is non-normative. <table class="complex data"> <thead> <tr> <th>Event <th>Interface <th>Interesting targets <th>Description <tbody> <tr> <td><dfn class="dfn-paneled idl-code" data-dfn-for="Window, VisualViewport" data-dfn-type="event" data-export id="eventdef-window-resize"><code>resize</code></dfn> <td><code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#event" id="ref-for-event①">Event</a></code> <td><code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/nav-history-apis.html#window" id="ref-for-window⑨">Window</a></code>, <code class="idl"><a data-link-type="idl" href="#visualviewport" id="ref-for-visualviewport①②">VisualViewport</a></code> <td>Fired at the <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/nav-history-apis.html#window" id="ref-for-window①⓪">Window</a></code> when the <a data-link-type="dfn" href="https://drafts.csswg.org/css2/#viewport%E2%91%A0" id="ref-for-viewport%E2%91%A0⑨⑥">viewport</a> is resized. Fired at <code class="idl"><a data-link-type="idl" href="#visualviewport" id="ref-for-visualviewport①③">VisualViewport</a></code> when the <a data-link-type="dfn" href="#visual-viewport" id="ref-for-visual-viewport①⑦">visual viewport</a> is resized or the <a data-link-type="dfn" href="#layout-viewport" id="ref-for-layout-viewport⑦">layout viewport</a> is scaled. <tr> <td><dfn class="dfn-paneled idl-code" data-dfn-for="Document, Element, VisualViewport" data-dfn-type="event" data-export id="eventdef-document-scroll"><code>scroll</code></dfn> <td><code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#event" id="ref-for-event②">Event</a></code> <td><code class="idl"><a data-link-type="idl" href="#visualviewport" id="ref-for-visualviewport①④">VisualViewport</a></code>, <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document" id="ref-for-document②①">Document</a></code>, elements <td>Fired at the <code class="idl"><a data-link-type="idl" href="#visualviewport" id="ref-for-visualviewport①⑤">VisualViewport</a></code>, <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document" id="ref-for-document②②">Document</a></code> or element when the <code class="idl"><a data-link-type="idl" href="#visualviewport" id="ref-for-visualviewport①⑥">VisualViewport</a></code>, <a data-link-type="dfn" href="https://drafts.csswg.org/css2/#viewport%E2%91%A0" id="ref-for-viewport%E2%91%A0⑨⑦">viewport</a>, or element is scrolled, respectively. <tr> <td><dfn class="dfn-paneled idl-code" data-dfn-for="Document, Element, VisualViewport" data-dfn-type="event" data-export id="eventdef-document-scrollend"><code>scrollend</code></dfn> <td><code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#event" id="ref-for-event③">Event</a></code> <td><code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document" id="ref-for-document②③">Document</a></code>, elements, <code class="idl"><a data-link-type="idl" href="#visualviewport" id="ref-for-visualviewport①⑦">VisualViewport</a></code> <td>Fired at the <code class="idl"><a data-link-type="idl" href="#visualviewport" id="ref-for-visualviewport①⑧">VisualViewport</a></code>, <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document" id="ref-for-document②④">Document</a></code>, or element when a scroll is <a data-link-type="dfn" href="#scroll-completed" id="ref-for-scroll-completed①">completed</a>: the <code class="idl"><a data-link-type="idl" href="#visualviewport" id="ref-for-visualviewport①⑨">VisualViewport</a></code>, <a data-link-type="dfn" href="https://drafts.csswg.org/css2/#viewport%E2%91%A0" id="ref-for-viewport%E2%91%A0⑨⑧">viewport</a>, or element has been scrolled, the scroll sequence has ended and any scroll offset changes have been applied. </table> <h2 class="heading settled" data-level="14" id="post-layout-snapshot">14. Post-Layout State Snapshotting<a class="self-link" href="#post-layout-snapshot"></a></h2> Some CSS features use post-layout state, like scroll position, as input to the next style and layout update. When asked to <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="run-snapshot-post-layout-state-steps">run snapshot post-layout state steps</dfn> for a <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document" id="ref-for-document②⑤">Document</a></code> <var>doc</var>, run these steps: <ol> <li data-md> For each CSS feature that needs to snapshot post-layout state, take a snapshot of the relevant state in <var>doc</var>. </ol> The state that is snapshot is defined in other specifications. These steps must not invalidate <var>doc</var> or any other <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document" id="ref-for-document②⑥">Document</a></code>s in such a way that other post-layout snapshotting steps can observe that such snapshotting happened. It follows that the order of which such snapshotting takes place must not matter. <h2 class="heading settled" data-level="15" id="priv-sec">15. Security and Privacy Considerations<a class="self-link" href="#priv-sec"></a></h2> The <code class="idl"><a data-link-type="idl" href="#screen" id="ref-for-screen④">Screen</a></code> interface exposes information about the user’s display configuration, which maybe be used as input to fingerprinting algorithms. User agents may choose to hide or quantize information about the screen size or configuration, in order to protect the user’s privacy. <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/uievents/#mouseevent" id="ref-for-mouseevent②">MouseEvent</a></code> contains information about the screen-relative coordinates of the event. User agents may set these properties to values that obscure the actual screen-relative location of the event, in order to protect the user’s privacy. <h2 class="heading settled" data-level="16" id="changes">16. Changes<a class="self-link" href="#changes"></a></h2> This section documents some of the changes between publications of this specification. This section is not exhaustive. Bug fixes and editorial changes are generally not listed. <h3 class="no-num heading settled" id="changes-from-2022-07-07">Changes From 07 July 2022<a class="self-link" href="#changes-from-2022-07-07"></a></h3> <ul> <li data-md> Introduced the <code class="idl"><a data-link-type="idl" href="#visualviewport" id="ref-for-visualviewport②⓪">VisualViewport</a></code> API and related concepts <li data-md> Pinch zoom is now renamed to <a data-link-type="dfn" href="#scale-factor" id="ref-for-scale-factor④">scale factor</a> <li data-md> Added visibilityProperty, opacityProperty, and contentVisiblityAuto properties for <code class="idl"><a data-link-type="idl" href="#dom-element-checkvisibility" id="ref-for-dom-element-checkvisibility②">checkVisibility()</a></code> method. </ul> <h3 class="no-num heading settled" id="changes-from-2022-06-22">Changes From 22 June 2022<a class="self-link" href="#changes-from-2022-06-22"></a></h3> <ul> <li data-md> Adam Argyle moved the <a class="idl-code" data-link-type="event" href="#eventdef-document-scrollend" id="ref-for-eventdef-document-scrollend⑥">scrollend</a> event from <a href="https://wicg.github.io/overscroll-scrollend-events/">WICG overscroll-scrollend-events</a> to <a data-link-type="biblio" href="#biblio-cssom-view-1" title="CSSOM View Module">[CSSOM-VIEW-1]</a> </ul> <h3 class="no-num heading settled" id="changes-from-2020-10-19">Changes From 19 October 2020<a class="self-link" href="#changes-from-2020-10-19"></a></h3> <ul> <li data-md> Added the "Security and Privacy Considerations" section <li data-md> Fixed a logical error in the Terminology section. <li data-md> Moved the <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-overflow-3/#propdef-scroll-behavior" id="ref-for-propdef-scroll-behavior②">scroll-behavior</a> property to <a data-link-type="biblio" href="#biblio-css-overflow-3" title="CSS Overflow Module Level 3">[CSS-OVERFLOW-3]</a> </ul> <h3 class="no-num heading settled" id="changes-from-2020-01-31">Changes From 31 January 2020<a class="self-link" href="#changes-from-2020-01-31"></a></h3> <ul> <li data-md> Added Simon Fraser as editor <li data-md> Renamed the arguments to <code class="idl"><a data-link-type="idl" href="#dom-window-resizeto" id="ref-for-dom-window-resizeto①">resizeTo()</a></code> to be <var>width</var> and <var>height</var> (<a href="https://github.com/w3c/csswg-drafts/issues/4727">4727</a>) </ul> <h3 class="no-num heading settled" id="changes-from-2013-12-17">Changes From 17 December 2013 To 31 January 2020<a class="self-link" href="#changes-from-2013-12-17"></a></h3> <ul> <li data-md> The <code class="idl"><a data-link-type="idl" href="#dom-element-scrollintoview" id="ref-for-dom-element-scrollintoview①">scrollIntoView()</a></code> method on <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#element" id="ref-for-element⑨">Element</a></code> was changed and extended. <li data-md> The <code class="idl"><a data-link-type="idl" href="#dom-element-scrolltop" id="ref-for-dom-element-scrolltop⑤">scrollTop</a></code> and <code class="idl"><a data-link-type="idl" href="#dom-element-scrollleft" id="ref-for-dom-element-scrollleft⑤">scrollLeft</a></code> IDL attributes on <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#element" id="ref-for-element①⓪">Element</a></code> changed to no longer take an object; the <code class="idl"><a data-link-type="idl" href="#dom-element-scroll" id="ref-for-dom-element-scroll④">scroll()</a></code>, <code class="idl"><a data-link-type="idl" href="#dom-element-scrollto" id="ref-for-dom-element-scrollto②">scrollTo()</a></code> and <code class="idl"><a data-link-type="idl" href="#dom-element-scrollby" id="ref-for-dom-element-scrollby②">scrollBy()</a></code> methods were added instead. <li data-md> The <code class="idl"><a data-link-type="idl" href="#dom-element-scrollwidth" id="ref-for-dom-element-scrollwidth①">scrollWidth</a></code>, <code class="idl"><a data-link-type="idl" href="#dom-element-scrollheight" id="ref-for-dom-element-scrollheight①">scrollHeight</a></code>, <code class="idl"><a data-link-type="idl" href="#dom-element-clienttop" id="ref-for-dom-element-clienttop①">clientTop</a></code>, <code class="idl"><a data-link-type="idl" href="#dom-element-clientleft" id="ref-for-dom-element-clientleft①">clientLeft</a></code>, <code class="idl"><a data-link-type="idl" href="#dom-element-clientwidth" id="ref-for-dom-element-clientwidth①">clientWidth</a></code> and <code class="idl"><a data-link-type="idl" href="#dom-element-clientheight" id="ref-for-dom-element-clientheight①">clientHeight</a></code> IDL attributes on <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#element" id="ref-for-element①①">Element</a></code> were changed back to return integers. <li data-md> The <code>DOMRectList</code> interface was removed. <li data-md> The <code class="idl"><a data-link-type="idl" href="#dom-document-scrollingelement" id="ref-for-dom-document-scrollingelement②">scrollingElement</a></code> IDL attribute on <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document" id="ref-for-document②⑦">Document</a></code> was added. <li data-md> Some readonly attributes on <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/nav-history-apis.html#window" id="ref-for-window①①">Window</a></code> were annotated with <code>[Replaceable]</code> IDL extended attribute. <li data-md> <code class="idl"><a data-link-type="idl" href="#mediaquerylist" id="ref-for-mediaquerylist①①">MediaQueryList</a></code>, <a class="idl-code" data-link-type="event" href="#eventdef-document-scroll" id="ref-for-eventdef-document-scroll③">scroll</a> event and <a class="idl-code" data-link-type="event" href="#eventdef-window-resize" id="ref-for-eventdef-window-resize③">resize</a> event are integrated with the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#event-loop" id="ref-for-event-loop③">event loop</a> in HTML so they are synchronized with animation frames. <li data-md> The <code>instant</code> value of <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-overflow-3/#propdef-scroll-behavior" id="ref-for-propdef-scroll-behavior③">scroll-behavior</a> was renamed to <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-overflow-3/#valdef-scroll-behavior-auto" id="ref-for-valdef-scroll-behavior-auto">auto</a>. <li data-md> The origin of <code class="idl"><a data-link-type="idl" href="#dom-element-scrollleft" id="ref-for-dom-element-scrollleft⑥">scrollLeft</a></code> on <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#element" id="ref-for-element①②">Element</a></code> was changed (for RTL). <li data-md> The <code class="idl"><a data-link-type="idl" href="#dom-element-scrollintoview" id="ref-for-dom-element-scrollintoview②">scrollIntoView()</a></code> method on <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#element" id="ref-for-element①③">Element</a></code> and <code class="idl"><a data-link-type="idl" href="#dom-window-scroll" id="ref-for-dom-window-scroll①⓪">scroll()</a></code>, <code class="idl"><a data-link-type="idl" href="#dom-window-scrollto" id="ref-for-dom-window-scrollto②">scrollTo()</a></code> and <code class="idl"><a data-link-type="idl" href="#dom-window-scrollby" id="ref-for-dom-window-scrollby②">scrollBy()</a></code> methods on <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/nav-history-apis.html#window" id="ref-for-window①②">Window</a></code> take the relevant dictionary as the first argument. <li data-md> The <code class="idl"><a data-link-type="idl" href="#mediaquerylist" id="ref-for-mediaquerylist①②">MediaQueryList</a></code> interface was changed to use regular event API and define <code class="idl"><a data-link-type="idl" href="#dom-mediaquerylist-addlistener" id="ref-for-dom-mediaquerylist-addlistener③">addListener()</a></code> in terms of that. </ul> <h3 class="no-num heading settled" id="changes-from-2011-08-04">Changes From 4 August 2011 To 17 December 2013<a class="self-link" href="#changes-from-2011-08-04"></a></h3> <ul> <li data-md> The specification now handles right-to-left and vertical writing modes. <li data-md> The specification is now aware of <a data-link-type="dfn" href="#page-zoom" id="ref-for-page-zoom②">page zoom</a> and pinch zoom. <li data-md> The <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-overflow-3/#propdef-scroll-behavior" id="ref-for-propdef-scroll-behavior④">scroll-behavior</a> CSS property is introduced and scrolling APIs are extended with a mechanism to control smooth scrolling. <li data-md> The <code class="idl"><a data-link-type="idl" href="#dom-window-moveto" id="ref-for-dom-window-moveto①">moveTo()</a></code>, <code class="idl"><a data-link-type="idl" href="#dom-window-moveby" id="ref-for-dom-window-moveby①">moveBy()</a></code>, <code class="idl"><a data-link-type="idl" href="#dom-window-resizeto" id="ref-for-dom-window-resizeto②">resizeTo()</a></code> and <code class="idl"><a data-link-type="idl" href="#dom-window-resizeby" id="ref-for-dom-window-resizeby①">resizeBy()</a></code> methods are now defined. <li data-md> <code class="idl"><a data-link-type="idl" href="#dom-window-innerwidth" id="ref-for-dom-window-innerwidth①">innerWidth</a></code> et al now use the WebIDL type <code class="idl"><a data-link-type="idl" href="https://webidl.spec.whatwg.org/#idl-double" id="ref-for-idl-double③③">double</a></code> instead of <code class="idl"><a data-link-type="idl" href="https://webidl.spec.whatwg.org/#idl-long" id="ref-for-idl-long③②">long</a></code>. <li data-md> <code class="idl"><a data-link-type="idl" href="#dom-window-devicepixelratio" id="ref-for-dom-window-devicepixelratio①">devicePixelRatio</a></code> is now defined. <li data-md> The <code>features</code> argument to <a class="idl-code" data-link-type="method" href="https://html.spec.whatwg.org/multipage/nav-history-apis.html#dom-open" id="ref-for-dom-open②">window.open()</a> is now defined. <li data-md> The <code class="idl"><a data-link-type="idl" href="#dom-screen-colordepth" id="ref-for-dom-screen-colordepth②">colorDepth</a></code> and <code class="idl"><a data-link-type="idl" href="#dom-screen-pixeldepth" id="ref-for-dom-screen-pixeldepth②">pixelDepth</a></code> attributes of <code class="idl"><a data-link-type="idl" href="#screen" id="ref-for-screen⑤">Screen</a></code> now always return 24. <li data-md> The <code class="idl"><a data-link-type="idl" href="#dom-document-elementsfrompoint" id="ref-for-dom-document-elementsfrompoint①">elementsFromPoint()</a></code> method of <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#element" id="ref-for-element①④">Element</a></code> is introduced. <li data-md> The specification is now aware of <a data-link-type="dfn" href="#transforms" id="ref-for-transforms②③">transforms</a>. <li data-md> Some geometry utility APIs are introduced but are not yet specified. <li data-md> <code>ClientRect</code> has been renamed to <code class="idl"><a data-link-type="idl" href="https://drafts.fxtf.org/geometry-1/#domrect" id="ref-for-domrect②⓪">DOMRect</a></code> and has moved to the Geometry specification. <a data-link-type="biblio" href="#biblio-geometry-1" title="Geometry Interfaces Module Level 1">[GEOMETRY-1]</a> <li data-md> The specification now defines when the <code>resize</code> and <code>scroll</code> events fire. </ul> <h2 class="heading settled" data-level="17" id="acks">17. Acknowledgements<a class="self-link" href="#acks"></a></h2> The editors would like to thank Alan Stearns, Alexey Feldgendler, Antonio Gomes, Björn Höhrmann, Boris Zbarsky, Chris Rebert, Corey Farwell, Dan Bates, David Vest, Elliott Sprehn, Garrett Smith, Henrik Andersson, Hallvord R. M. Steen, Kang-Hao Lu, Koji Ishii, Leif Arne Storset, Luiz Agostini, Maciej Stachowiak, Michael Dyck, Mike Wilson, Morten Stenshorne, Olli Pettay, Pavel Curtis, Peter-Paul Koch, Rachel Kmetz, Rick Byers, Robert O’Callahan, Sam Weinig, Scott Johnson, Sebastian Zartner, Stewart Brodie, Sylvain Galineau, Tab Atkins, Tarquin Wilton-Jones, Thomas Moore, Thomas Shinnick, and Xiaomei Ji for their contributions to this document. Special thanks to the Microsoft employees who first implemented many of the features specified in this draft, which were first widely deployed by the Windows Internet Explorer browser. </main> <h2 class="no-ref no-num heading settled" id="w3c-conformance"> Conformance<a class="self-link" href="#w3c-conformance"></a></h2> <h3 class="no-ref heading settled" id="w3c-conventions"> Document conventions<a class="self-link" href="#w3c-conventions"></a></h3> Conformance requirements are expressed with a combination of descriptive assertions and RFC 2119 terminology. The key words “MUST”, “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this document are to be interpreted as described in RFC 2119. However, for readability, these words do not appear in all uppercase letters in this specification. All of the text of this specification is normative except sections explicitly marked as non-normative, examples, and notes. <a data-link-type="biblio" href="#biblio-rfc2119" title="Key words for use in RFCs to Indicate Requirement Levels">[RFC2119]</a> Examples in this specification are introduced with the words “for example” or are set apart from the normative text with <code>class="example"</code>, like this: <div class="example" id="w3c-example"> <a class="self-link" href="#w3c-example"></a> This is an example of an informative example. </div> Informative notes begin with the word “Note” and are set apart from the normative text with <code>class="note"</code>, like this: Note, this is an informative note. Advisements are normative sections styled to evoke special attention and are set apart from other normative text with <code></code>, like this: UAs MUST provide an accessible alternative. <details class="wpt-tests-block" dir="ltr" lang="en" open> <summary>Tests</summary> Tests relating to the content of this specification may be documented in “Tests” blocks like this one. Any such block is non-normative. <ul class="wpt-tests-list"></ul> <hr> </details> <h3 class="no-ref heading settled" id="w3c-conformance-classes"> Conformance classes<a class="self-link" href="#w3c-conformance-classes"></a></h3> Conformance to this specification is defined for three conformance classes: <dl> <dt>style sheet <dd>A <a href="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> A style sheet is conformant to this specification if all of its statements that use syntax defined in this module are valid according to the generic CSS grammar and the individual grammars of each feature defined in this module. A renderer is conformant to this specification if, in addition to interpreting the style sheet as defined by the appropriate specifications, it supports all the features defined by this specification by parsing them correctly and rendering the document accordingly. However, the inability of a UA to correctly render a document due to limitations of the device does not make the UA non-conformant. (For example, a UA is not required to render color on a monochrome monitor.) An authoring tool is conformant to this specification if it writes style sheets that are syntactically correct according to the generic CSS grammar and the individual grammars of each feature in this module, and meet all other conformance requirements of style sheets as described in this module. <h3 class="no-ref heading settled" id="w3c-partial"> Partial implementations<a class="self-link" href="#w3c-partial"></a></h3> So that authors can exploit the forward-compatible parsing rules to assign fallback values, CSS renderers must treat as invalid (and <a href="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 must not selectively ignore unsupported component values and honor supported values in a single multi-value property declaration: if any value is considered invalid (as unsupported values must be), CSS requires that the entire declaration be ignored. <h4 class="heading settled" id="w3c-conform-future-proofing"> Implementations of Unstable and Proprietary Features<a class="self-link" href="#w3c-conform-future-proofing"></a></h4> To avoid clashes with future stable CSS features, the CSSWG recommends <a href="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. <h3 class="no-ref heading settled" id="w3c-testing"> Non-experimental implementations<a class="self-link" href="#w3c-testing"></a></h3> Once a specification reaches the Candidate Recommendation stage, non-experimental implementations are possible, and implementors should release an unprefixed implementation of any CR-level feature they can demonstrate to be correctly implemented according to spec. To establish and maintain the interoperability of CSS across implementations, the CSS Working Group requests that non-experimental CSS renderers submit an implementation report (and, if necessary, the testcases used for that implementation report) to the W3C before releasing an unprefixed implementation of any CSS features. Testcases submitted to W3C are subject to review and correction by the CSS Working Group. Further information on submitting testcases and implementation reports can be found from on the CSS Working Group’s website at <a href="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. <script src="https://www.w3.org/scripts/TR/2021/fixup.js"></script> <h2 class="no-num no-ref heading settled" id="index">Index<a class="self-link" href="#index"></a></h2> <h3 class="no-num no-ref heading settled" id="index-defined-here">Terms defined by this specification<a class="self-link" href="#index-defined-here"></a></h3> <ul class="index"> <li><a href="#dom-mediaquerylist-addlistener">addListener(callback)</a>, in § 4.2 <li><a href="#dom-scrollintoviewcontainer-all">"all"</a>, in § 6 <li><a href="#visualviewport-associated-document">associated document</a>, in § 2 <li><a href="#dom-scrollbehavior-auto">"auto"</a>, in § 4 <li><a href="#dom-screen-availheight">availHeight</a>, in § 4.3 <li><a href="#dom-screen-availwidth">availWidth</a>, in § 4.3 <li><a href="#beginning-edges">beginning edges</a>, in § 2 <li><a href="#dom-scrolloptions-behavior">behavior</a>, in § 4 <li><a href="#dom-scrollintoviewoptions-block">block</a>, in § 6 <li><a href="#dom-cssboxtype-border">"border"</a>, in § 11.1 <li><a href="#dom-boxquadoptions-box">box</a>, in § 11.1 <li><a href="#dictdef-boxquadoptions">BoxQuadOptions</a>, in § 11.1 <li><a href="#caret-node">caret node</a>, in § 5.1 <li><a href="#caret-offset">caret offset</a>, in § 5.1 <li><a href="#caret-position">caret position</a>, in § 5.1 <li><a href="#caretposition">CaretPosition</a>, in § 5.1 <li><a href="#dictdef-caretpositionfrompointoptions">CaretPositionFromPointOptions</a>, in § 5 <li><a href="#dom-document-caretpositionfrompoint">caretPositionFromPoint(x, y)</a>, in § 5 <li><a href="#dom-document-caretpositionfrompoint">caretPositionFromPoint(x, y, options)</a>, in § 5 <li><a href="#dom-scrolllogicalposition-center">"center"</a>, in § 6 <li><a href="#eventdef-mediaquerylist-change">change</a>, in § 4.2.1 <li><a href="#dom-checkvisibilityoptions-checkopacity">checkOpacity</a>, in § 6 <li><a href="#dom-element-checkvisibility">checkVisibility()</a>, in § 6 <li><a href="#dom-checkvisibilityoptions-checkvisibilitycss">checkVisibilityCSS</a>, in § 6 <li><a href="#dom-element-checkvisibility">checkVisibility(options)</a>, in § 6 <li><a href="#dictdef-checkvisibilityoptions">CheckVisibilityOptions</a>, in § 6 <li><a href="#dom-element-clientheight">clientHeight</a>, in § 6 <li><a href="#dom-element-clientleft">clientLeft</a>, in § 6 <li><a href="#dom-element-clienttop">clientTop</a>, in § 6 <li><a href="#dom-element-clientwidth">clientWidth</a>, in § 6 <li> clientX <ul> <li><a href="#dom-mouseevent-clientx">attribute for MouseEvent</a>, in § 10 <li><a href="#dom-mouseeventinit-clientx">dict-member for MouseEventInit</a>, in § 10 </ul> <li> clientY <ul> <li><a href="#dom-mouseevent-clienty">attribute for MouseEvent</a>, in § 10 <li><a href="#dom-mouseeventinit-clienty">dict-member for MouseEventInit</a>, in § 10 </ul> <li><a href="#dom-screen-colordepth">colorDepth</a>, in § 4.3 <li><a href="#dom-mediaquerylistevent-mediaquerylistevent">constructor(type)</a>, in § 4.2 <li><a href="#dom-mediaquerylistevent-mediaquerylistevent">constructor(type, eventInitDict)</a>, in § 4.2 <li><a href="#dom-scrollintoviewoptions-container">container</a>, in § 6 <li><a href="#dom-cssboxtype-content">"content"</a>, in § 11.1 <li><a href="#dom-checkvisibilityoptions-contentvisibilityauto">contentVisibilityAuto</a>, in § 6 <li><a href="#dictdef-convertcoordinateoptions">ConvertCoordinateOptions</a>, in § 11.1 <li><a href="#dom-geometryutils-convertpointfromnode">convertPointFromNode(point, from)</a>, in § 11.1 <li><a href="#dom-geometryutils-convertpointfromnode">convertPointFromNode(point, from, options)</a>, in § 11.1 <li><a href="#dom-geometryutils-convertquadfromnode">convertQuadFromNode(quad, from)</a>, in § 11.1 <li><a href="#dom-geometryutils-convertquadfromnode">convertQuadFromNode(quad, from, options)</a>, in § 11.1 <li><a href="#dom-geometryutils-convertrectfromnode">convertRectFromNode(rect, from)</a>, in § 11.1 <li><a href="#dom-geometryutils-convertrectfromnode">convertRectFromNode(rect, from, options)</a>, in § 11.1 <li><a href="#enumdef-cssboxtype">CSSBoxType</a>, in § 11.1 <li><a href="#dom-element-currentcsszoom">currentCSSZoom</a>, in § 6 <li><a href="#determine-the-device-pixel-ratio">determine the device pixel ratio</a>, in § 4 <li><a href="#determine-the-scroll-into-view-position">determine the scroll-into-view position</a>, in § 6.1 <li><a href="#dom-window-devicepixelratio">devicePixelRatio</a>, in § 4 <li><a href="#mediaquerylist-document">document</a>, in § 4.2 <li><a href="#dom-document-elementfrompoint">elementFromPoint(x, y)</a>, in § 5 <li><a href="#dom-document-elementsfrompoint">elementsFromPoint(x, y)</a>, in § 5 <li><a href="#dom-scrolllogicalposition-end">"end"</a>, in § 6 <li><a href="#ending-edges">ending edges</a>, in § 2 <li><a href="#evaluate-media-queries-and-report-changes">evaluate media queries and report changes</a>, in § 4.2 <li><a href="#dom-convertcoordinateoptions-frombox">fromBox</a>, in § 11.1 <li><a href="#typedefdef-geometrynode">GeometryNode</a>, in § 11.1 <li><a href="#geometryutils">GeometryUtils</a>, in § 11.1 <li> getBoundingClientRect() <ul> <li><a href="#dom-element-getboundingclientrect">method for Element</a>, in § 6 <li><a href="#dom-range-getboundingclientrect">method for Range</a>, in § 9 </ul> <li><a href="#dom-geometryutils-getboxquads">getBoxQuads()</a>, in § 11.1 <li><a href="#dom-geometryutils-getboxquads">getBoxQuads(options)</a>, in § 11.1 <li><a href="#dom-caretposition-getclientrect">getClientRect()</a>, in § 5.1 <li> getClientRects() <ul> <li><a href="#dom-element-getclientrects">method for Element</a>, in § 6 <li><a href="#dom-range-getclientrects">method for Range</a>, in § 9 </ul> <li><a href="#element-get-the-bounding-box">get the bounding box</a>, in § 6 <li> height <ul> <li><a href="#dom-screen-height">attribute for Screen</a>, in § 4.3 <li><a href="#dom-visualviewport-height">attribute for VisualViewport</a>, in § 12.1 <li><a href="#supported-open-feature-name-height">dfn for supported open() feature name</a>, in § 4.1 </ul> <li><a href="#dom-scrollintoviewoptions-inline">inline</a>, in § 6 <li><a href="#dom-window-innerheight">innerHeight</a>, in § 4 <li><a href="#dom-window-innerwidth">innerWidth</a>, in § 4 <li><a href="#dom-scrollbehavior-instant">"instant"</a>, in § 4 <li><a href="#concept-instant-scroll">instant scroll</a>, in § 3.1 <li><a href="#layout-viewport">layout viewport</a>, in § 2 <li> left <ul> <li><a href="#supported-open-feature-name-left">dfn for supported open() feature name</a>, in § 4.1 <li><a href="#dom-scrolltooptions-left">dict-member for ScrollToOptions</a>, in § 4 </ul> <li><a href="#dom-cssboxtype-margin">"margin"</a>, in § 11.1 <li> matches <ul> <li><a href="#dom-mediaquerylist-matches">attribute for MediaQueryList</a>, in § 4.2 <li><a href="#dom-mediaquerylistevent-matches">attribute for MediaQueryListEvent</a>, in § 4.2 <li><a href="#dom-mediaquerylisteventinit-matches">dict-member for MediaQueryListEventInit</a>, in § 4.2 </ul> <li><a href="#mediaquerylist-matches-state">matches state</a>, in § 4.2 <li><a href="#dom-window-matchmedia">matchMedia(query)</a>, in § 4 <li> media <ul> <li><a href="#dom-mediaquerylist-media">attribute for MediaQueryList</a>, in § 4.2 <li><a href="#dom-mediaquerylistevent-media">attribute for MediaQueryListEvent</a>, in § 4.2 <li><a href="#mediaquerylist-media">dfn for MediaQueryList</a>, in § 4.2 <li><a href="#dom-mediaquerylisteventinit-media">dict-member for MediaQueryListEventInit</a>, in § 4.2 </ul> <li><a href="#mediaquerylist-media-query-list">media query list</a>, in § 4.2 <li><a href="#mediaquerylist">MediaQueryList</a>, in § 4.2 <li><a href="#mediaquerylistevent">MediaQueryListEvent</a>, in § 4.2 <li><a href="#dictdef-mediaquerylisteventinit">MediaQueryListEventInit</a>, in § 4.2 <li><a href="#dom-mediaquerylistevent-mediaquerylistevent">MediaQueryListEvent(type)</a>, in § 4.2 <li><a href="#dom-mediaquerylistevent-mediaquerylistevent">MediaQueryListEvent(type, eventInitDict)</a>, in § 4.2 <li><a href="#dom-window-moveby">moveBy(x, y)</a>, in § 4 <li><a href="#dom-window-moveto">moveTo(x, y)</a>, in § 4 <li> "nearest" <ul> <li><a href="#dom-scrollintoviewcontainer-nearest">enum-value for ScrollIntoViewContainer</a>, in § 6 <li><a href="#dom-scrolllogicalposition-nearest">enum-value for ScrollLogicalPosition</a>, in § 6 </ul> <li><a href="#normalize-non-finite-values">normalize non-finite values</a>, in § 3.2 <li><a href="#dom-caretposition-offset">offset</a>, in § 5.1 <li><a href="#dom-htmlelement-offsetheight">offsetHeight</a>, in § 7 <li> offsetLeft <ul> <li><a href="#dom-htmlelement-offsetleft">attribute for HTMLElement</a>, in § 7 <li><a href="#dom-visualviewport-offsetleft">attribute for VisualViewport</a>, in § 12.1 </ul> <li><a href="#dom-caretposition-offsetnode">offsetNode</a>, in § 5.1 <li><a href="#dom-htmlelement-offsetparent">offsetParent</a>, in § 7 <li> offsetTop <ul> <li><a href="#dom-htmlelement-offsettop">attribute for HTMLElement</a>, in § 7 <li><a href="#dom-visualviewport-offsettop">attribute for VisualViewport</a>, in § 12.1 </ul> <li><a href="#dom-htmlelement-offsetwidth">offsetWidth</a>, in § 7 <li><a href="#dom-mouseevent-offsetx">offsetX</a>, in § 10 <li><a href="#dom-mouseevent-offsety">offsetY</a>, in § 10 <li><a href="#dom-mediaquerylist-onchange">onchange</a>, in § 4.2 <li><a href="#dom-visualviewport-onresize">onresize</a>, in § 12.1 <li><a href="#dom-visualviewport-onscroll">onscroll</a>, in § 12.1 <li><a href="#dom-visualviewport-onscrollend">onscrollend</a>, in § 12.1 <li><a href="#dom-checkvisibilityoptions-opacityproperty">opacityProperty</a>, in § 6 <li><a href="#dom-window-outerheight">outerHeight</a>, in § 4 <li><a href="#dom-window-outerwidth">outerWidth</a>, in § 4 <li><a href="#overflow-directions">overflow directions</a>, in § 2 <li><a href="#dom-cssboxtype-padding">"padding"</a>, in § 11.1 <li><a href="#dom-visualviewport-pageleft">pageLeft</a>, in § 12.1 <li><a href="#dom-visualviewport-pagetop">pageTop</a>, in § 12.1 <li><a href="#dom-mouseevent-pagex">pageX</a>, in § 10 <li><a href="#dom-window-pagexoffset">pageXOffset</a>, in § 4 <li><a href="#dom-mouseevent-pagey">pageY</a>, in § 10 <li><a href="#dom-window-pageyoffset">pageYOffset</a>, in § 4 <li><a href="#page-zoom">page zoom</a>, in § 2.2 <li><a href="#document-pending-scrollend-event-targets">pending scrollend event targets</a>, in § 13.2 <li><a href="#document-pending-scroll-event-targets">pending scroll event targets</a>, in § 13.2 <li> perform a scroll <ul> <li><a href="#perform-a-scroll">definition of</a>, in § 3.1 <li><a href="#viewport-perform-a-scroll">dfn for viewport</a>, in § 3.1 </ul> <li><a href="#dom-screen-pixeldepth">pixelDepth</a>, in § 4.3 <li><a href="#potentially-scrollable">potentially scrollable</a>, in § 2 <li><a href="#dom-boxquadoptions-relativeto">relativeTo</a>, in § 11.1 <li><a href="#dom-mediaquerylist-removelistener">removeListener(callback)</a>, in § 4.2 <li><a href="#eventdef-window-resize">resize</a>, in § 13.3 <li><a href="#dom-window-resizeby">resizeBy(x, y)</a>, in § 4 <li><a href="#dom-window-resizeto">resizeTo(width, height)</a>, in § 4 <li><a href="#run-snapshot-post-layout-state-steps">run snapshot post-layout state steps</a>, in § 14 <li><a href="#document-run-the-resize-steps">run the resize steps</a>, in § 13.1 <li><a href="#document-run-the-scroll-steps">run the scroll steps</a>, in § 13.2 <li><a href="#dom-visualviewport-scale">scale</a>, in § 12.1 <li><a href="#scale-factor">scale factor</a>, in § 2 <li><a href="#screen">Screen</a>, in § 4.3 <li><a href="#dom-window-screen">screen</a>, in § 4 <li><a href="#dom-window-screenleft">screenLeft</a>, in § 4 <li><a href="#dom-window-screentop">screenTop</a>, in § 4 <li> screenX <ul> <li><a href="#dom-mouseevent-screenx">attribute for MouseEvent</a>, in § 10 <li><a href="#dom-window-screenx">attribute for Window</a>, in § 4 <li><a href="#dom-mouseeventinit-screenx">dict-member for MouseEventInit</a>, in § 10 </ul> <li> screenY <ul> <li><a href="#dom-mouseevent-screeny">attribute for MouseEvent</a>, in § 10 <li><a href="#dom-window-screeny">attribute for Window</a>, in § 4 <li><a href="#dom-mouseeventinit-screeny">dict-member for MouseEventInit</a>, in § 10 </ul> <li><a href="#eventdef-document-scroll">scroll</a>, in § 13.3 <li> scroll() <ul> <li><a href="#dom-element-scroll">method for Element</a>, in § 6 <li><a href="#dom-window-scroll">method for Window</a>, in § 4 </ul> <li><a href="#scroll-an-element">scroll an element</a>, in § 6.1 <li><a href="#scroll-a-target-into-view">scroll a target into view</a>, in § 6.1 <li><a href="#enumdef-scrollbehavior">ScrollBehavior</a>, in § 4 <li> scrollBy() <ul> <li><a href="#dom-element-scrollby">method for Element</a>, in § 6 <li><a href="#dom-window-scrollby">method for Window</a>, in § 4 </ul> <li> scrollBy(options) <ul> <li><a href="#dom-element-scrollby">method for Element</a>, in § 6 <li><a href="#dom-window-scrollby">method for Window</a>, in § 4 </ul> <li> scrollBy(x, y) <ul> <li><a href="#dom-element-scrollby">method for Element</a>, in § 6 <li><a href="#dom-window-scrollby">method for Window</a>, in § 4 </ul> <li><a href="#scroll-completed">scroll completed</a>, in § 3.1 <li><a href="#eventdef-document-scrollend">scrollend</a>, in § 13.3 <li><a href="#dom-element-scrollheight">scrollHeight</a>, in § 6 <li><a href="#scrolling-area">scrolling area</a>, in § 2 <li><a href="#scrolling-area-origin">scrolling area origin</a>, in § 2 <li><a href="#scrolling-box">scrolling box</a>, in § 2 <li><a href="#dom-document-scrollingelement">scrollingElement</a>, in § 5 <li><a href="#dom-element-scrollintoview">scrollIntoView()</a>, in § 6 <li><a href="#dom-element-scrollintoview">scrollIntoView(arg)</a>, in § 6 <li><a href="#enumdef-scrollintoviewcontainer">ScrollIntoViewContainer</a>, in § 6 <li><a href="#dictdef-scrollintoviewoptions">ScrollIntoViewOptions</a>, in § 6 <li><a href="#dom-element-scrollleft">scrollLeft</a>, in § 6 <li><a href="#enumdef-scrolllogicalposition">ScrollLogicalPosition</a>, in § 6 <li> scroll(options) <ul> <li><a href="#dom-element-scroll">method for Element</a>, in § 6 <li><a href="#dom-window-scroll">method for Window</a>, in § 4 </ul> <li><a href="#dictdef-scrolloptions">ScrollOptions</a>, in § 4 <li> scrollTo() <ul> <li><a href="#dom-element-scrollto">method for Element</a>, in § 6 <li><a href="#dom-window-scrollto">method for Window</a>, in § 4 </ul> <li> scrollTo(options) <ul> <li><a href="#dom-element-scrollto">method for Element</a>, in § 6 <li><a href="#dom-window-scrollto">method for Window</a>, in § 4 </ul> <li><a href="#dictdef-scrolltooptions">ScrollToOptions</a>, in § 4 <li><a href="#dom-element-scrolltop">scrollTop</a>, in § 6 <li><a href="#scroll-to-the-beginning-of-the-document">scroll to the beginning of the document</a>, in § 3.1 <li> scrollTo(x, y) <ul> <li><a href="#dom-element-scrollto">method for Element</a>, in § 6 <li><a href="#dom-window-scrollto">method for Window</a>, in § 4 </ul> <li><a href="#dom-element-scrollwidth">scrollWidth</a>, in § 6 <li><a href="#dom-window-scrollx">scrollX</a>, in § 4 <li> scroll(x, y) <ul> <li><a href="#dom-element-scroll">method for Element</a>, in § 6 <li><a href="#dom-window-scroll">method for Window</a>, in § 4 </ul> <li><a href="#dom-window-scrolly">scrollY</a>, in § 4 <li><a href="#set-up-browsing-context-features">set up browsing context features</a>, in § 4.1 <li><a href="#dom-caretpositionfrompointoptions-shadowroots">shadowRoots</a>, in § 5 <li><a href="#dom-scrollbehavior-smooth">"smooth"</a>, in § 4 <li><a href="#concept-smooth-scroll">smooth scroll</a>, in § 3.1 <li><a href="#smooth-scroll-aborted">smooth scroll aborted</a>, in § 3.1 <li><a href="#smooth-scroll-completed">smooth scroll completed</a>, in § 3.1 <li><a href="#dom-scrolllogicalposition-start">"start"</a>, in § 6 <li><a href="#supported-open-feature-name">supported open() feature name</a>, in § 4.1 <li><a href="#svg-layout-box">SVG layout box</a>, in § 2 <li><a href="#dom-convertcoordinateoptions-tobox">toBox</a>, in § 11.1 <li> top <ul> <li><a href="#supported-open-feature-name-top">dfn for supported open() feature name</a>, in § 4.1 <li><a href="#dom-scrolltooptions-top">dict-member for ScrollToOptions</a>, in § 4 </ul> <li><a href="#transforms">transforms</a>, in § 2 <li><a href="#dom-checkvisibilityoptions-visibilityproperty">visibilityProperty</a>, in § 6 <li><a href="#visual-viewport">visual viewport</a>, in § 2 <li><a href="#visualviewport">VisualViewport</a>, in § 12.1 <li><a href="#dom-window-visualviewport">visualViewport</a>, in § 4 <li><a href="#web-exposed-available-screen-area">Web-exposed available screen area</a>, in § 2.3 <li><a href="#web-exposed-screen-area">Web-exposed screen area</a>, in § 2.3 <li> width <ul> <li><a href="#dom-screen-width">attribute for Screen</a>, in § 4.3 <li><a href="#dom-visualviewport-width">attribute for VisualViewport</a>, in § 12.1 <li><a href="#supported-open-feature-name-width">dfn for supported open() feature name</a>, in § 4.1 </ul> <li> x <ul> <li><a href="#dom-htmlimageelement-x">attribute for HTMLImageElement</a>, in § 8 <li><a href="#dom-mouseevent-x">attribute for MouseEvent</a>, in § 10 </ul> <li> y <ul> <li><a href="#dom-htmlimageelement-y">attribute for HTMLImageElement</a>, in § 8 <li><a href="#dom-mouseevent-y">attribute for MouseEvent</a>, in § 10 </ul> </ul> <h3 class="no-num no-ref heading settled" id="index-defined-elsewhere">Terms defined by reference<a class="self-link" href="#index-defined-elsewhere"></a></h3> <ul class="index"> <li> <a data-link-type="biblio">[CSS-ALIGN-3]</a> defines the following terms: <ul> <li>content-distribution properties </ul> <li> <a data-link-type="biblio">[CSS-BACKGROUNDS-3]</a> defines the following terms: <ul> <li>border-left-width <li>border-top-width </ul> <li> <a data-link-type="biblio">[CSS-BOX-4]</a> defines the following terms: <ul> <li>border box <li>border edge <li>margin edge <li>padding edge </ul> <li> <a data-link-type="biblio">[CSS-BREAK-4]</a> defines the following terms: <ul> <li>box fragment </ul> <li> <a data-link-type="biblio">[CSS-COLOR-4]</a> defines the following terms: <ul> <li>opacity </ul> <li> <a data-link-type="biblio">[CSS-CONTAIN-2]</a> defines the following terms: <ul> <li>content-visibility <li>skips its contents </ul> <li> <a data-link-type="biblio">[CSS-DEVICE-ADAPT]</a> defines the following terms: <ul> <li>effective zoom <li>scaled <li>unscaled </ul> <li> <a data-link-type="biblio">[CSS-DISPLAY-4]</a> defines the following terms: <ul> <li>anonymous <li>block box <li>block-level <li>box <li>box tree <li>display <li>initial containing block <li>inline-level box <li>inline-table <li>invisible <li>principal box <li>root element <li>table <li>table-column <li>table-column-group </ul> <li> <a data-link-type="biblio">[CSS-OVERFLOW-3]</a> defines the following terms: <ul> <li>auto (for overflow) <li>auto (for scroll-behavior) <li>classic scrollbars <li>clip <li>overflow <li>overflow-x <li>overflow-y <li>scroll container <li>scroll-behavior <li>smooth <li>visible </ul> <li> <a data-link-type="biblio">[CSS-POSITION-3]</a> defines the following terms: <ul> <li>fixed <li>position <li>static </ul> <li> <a data-link-type="biblio">[CSS-PSEUDO-4]</a> defines the following terms: <ul> <li>CSSPseudoElement </ul> <li> <a data-link-type="biblio">[CSS-SCOPING-1]</a> defines the following terms: <ul> <li>flat tree </ul> <li> <a data-link-type="biblio">[CSS-SCROLL-SNAP-1]</a> defines the following terms: <ul> <li>scroll snap <li>scroll snap container <li>scroll snap position <li>scroll-snap-type </ul> <li> <a data-link-type="biblio">[CSS-SCROLL-SNAP-2]</a> defines the following terms: <ul> <li>dispatch pending scrollsnapchange events <li>dispatch pending scrollsnapchanging events <li>eventual snap target <li>update scrollsnapchange targets <li>update scrollsnapchanging targets </ul> <li> <a data-link-type="biblio">[CSS-TEXT-4]</a> defines the following terms: <ul> <li>typographic character unit </ul> <li> <a data-link-type="biblio">[CSS-UI-4]</a> defines the following terms: <ul> <li>pointer-events </ul> <li> <a data-link-type="biblio">[CSS-VALUES-4]</a> defines the following terms: <ul> <li>px <li>reference pixel </ul> <li> <a data-link-type="biblio">[CSS-WRITING-MODES-4]</a> defines the following terms: <ul> <li>block flow direction <li>block-end <li>inline base direction <li>inline-end </ul> <li> <a data-link-type="biblio">[CSS2]</a> defines the following terms: <ul> <li>canvas <li>viewport </ul> <li> <a data-link-type="biblio">[CSSOM]</a> defines the following terms: <ul> <li>CSSOMString <li>parse a media query list <li>serialize a media query list </ul> <li> <a data-link-type="biblio">[DOM]</a> defines the following terms: <ul> <li>Document <li>Element <li>Event <li>EventInit <li>EventListener <li>EventTarget <li>Node <li>Range <li>ShadowRoot <li>Text <li>add an event listener <li>addEventListener(type, callback) <li>callback <li>capture <li>closed-shadow-hidden <li>dispatch flag <li>document <li>element <li>element (for Attr) <li>end node <li>end offset <li>event listener <li>event listener list <li>fire an event <li>host <li>index <li>isTrusted <li>node <li>node document <li>nodes <li>parent <li>parent element <li>quirks mode <li>range <li>remove an event listener <li>removeEventListener(type, callback) <li>root <li>shadow root <li>shadow-including inclusive ancestor <li>start node <li>start offset <li>type </ul> <li> <a data-link-type="biblio">[GEOMETRY-1]</a> defines the following terms: <ul> <li>DOMPoint <li>DOMPointInit <li>DOMQuad <li>DOMQuadInit <li>DOMRect <li>DOMRectList <li>DOMRectReadOnly <li>height <li>width <li>x <li>y </ul> <li> <a data-link-type="biblio">[HTML]</a> defines the following terms: <ul> <li>EventHandler <li>HTMLElement <li>HTMLImageElement <li>Window <li>WindowProxy <li>active document <li>associated Document <li>auxiliary browsing context <li>being rendered <li>body <li>browsing context <li>defaultView <li>event handler <li>event handler event type <li>event handler IDL attribute <li>event loop <li>fully active <li>HTML elements <li>live <li>open(url, target, features) <li>relevant global object <li>rules for parsing integers <li>same origin <li>the body element </ul> <li> <a data-link-type="biblio">[INFRA]</a> defines the following terms: <ul> <li>contain <li>exist <li>is <li>map <li>tuple </ul> <li> <a data-link-type="biblio">[MEDIAQUERIES-5]</a> defines the following terms: <ul> <li>color </ul> <li> <a data-link-type="biblio">[SELECTORS-4]</a> defines the following terms: <ul> <li>pseudo-element </ul> <li> <a data-link-type="biblio">[SVG2]</a> defines the following terms: <ul> <li>rect </ul> <li> <a data-link-type="biblio">[UIEVENTS]</a> defines the following terms: <ul> <li>MouseEvent <li>MouseEventInit </ul> <li> <a data-link-type="biblio">[WEBIDL]</a> defines the following terms: <ul> <li>Exposed <li>NewObject <li>Replaceable <li>SameObject <li>boolean <li>converted to an IDL value <li>double <li>long <li>sequence <li>this <li>undefined <li>unrestricted double <li>unsigned long </ul> </ul> <h2 class="no-num no-ref heading settled" id="references">References<a class="self-link" href="#references"></a></h2> <h3 class="no-num no-ref heading settled" id="normative">Normative References<a class="self-link" href="#normative"></a></h3> <dl> <dt id="biblio-css-align-3">[CSS-ALIGN-3] <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://drafts.csswg.org/css-align/"><cite>CSS Box Alignment Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-align/">https://drafts.csswg.org/css-align/</a> <dt id="biblio-css-backgrounds-3">[CSS-BACKGROUNDS-3] <dd>Elika Etemad; Brad Kemper. <a href="https://drafts.csswg.org/css-backgrounds/"><cite>CSS Backgrounds and Borders Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-backgrounds/">https://drafts.csswg.org/css-backgrounds/</a> <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-break-4">[CSS-BREAK-4] <dd>Rossen Atanassov; Elika Etemad. <a href="https://drafts.csswg.org/css-break-4/"><cite>CSS Fragmentation Module Level 4</cite></a>. URL: <a href="https://drafts.csswg.org/css-break-4/">https://drafts.csswg.org/css-break-4/</a> <dt id="biblio-css-color-4">[CSS-COLOR-4] <dd>Chris Lilley; Tab Atkins Jr.; Lea Verou. <a href="https://drafts.csswg.org/css-color-4/"><cite>CSS Color Module Level 4</cite></a>. URL: <a href="https://drafts.csswg.org/css-color-4/">https://drafts.csswg.org/css-color-4/</a> <dt id="biblio-css-contain-2">[CSS-CONTAIN-2] <dd>Tab Atkins Jr.; Florian Rivoal; Vladimir Levin. <a href="https://drafts.csswg.org/css-contain-2/"><cite>CSS Containment Module Level 2</cite></a>. URL: <a href="https://drafts.csswg.org/css-contain-2/">https://drafts.csswg.org/css-contain-2/</a> <dt id="biblio-css-device-adapt">[CSS-DEVICE-ADAPT] <dd>Florian Rivoal; Emilio Cobos Álvarez. <a href="https://drafts.csswg.org/css-viewport/"><cite>CSS Viewport Module Level 1</cite></a>. URL: <a href="https://drafts.csswg.org/css-viewport/">https://drafts.csswg.org/css-viewport/</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-pseudo-4">[CSS-PSEUDO-4] <dd>Daniel Glazman; Elika Etemad; Alan Stearns. <a href="https://drafts.csswg.org/css-pseudo-4/"><cite>CSS Pseudo-Elements Module Level 4</cite></a>. URL: <a href="https://drafts.csswg.org/css-pseudo-4/">https://drafts.csswg.org/css-pseudo-4/</a> <dt id="biblio-css-scoping-1">[CSS-SCOPING-1] <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://drafts.csswg.org/css-scoping/"><cite>CSS Scoping Module Level 1</cite></a>. URL: <a href="https://drafts.csswg.org/css-scoping/">https://drafts.csswg.org/css-scoping/</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-scroll-snap-2">[CSS-SCROLL-SNAP-2] <dd>Elika Etemad; Tab Atkins Jr.; Adam Argyle. <a href="https://drafts.csswg.org/css-scroll-snap-2/"><cite>CSS Scroll Snap Module Level 2</cite></a>. URL: <a href="https://drafts.csswg.org/css-scroll-snap-2/">https://drafts.csswg.org/css-scroll-snap-2/</a> <dt id="biblio-css-text-3">[CSS-TEXT-3] <dd>Elika Etemad; Koji Ishii; Florian Rivoal. <a href="https://drafts.csswg.org/css-text-3/"><cite>CSS Text Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-text-3/">https://drafts.csswg.org/css-text-3/</a> <dt id="biblio-css-text-4">[CSS-TEXT-4] <dd>Elika Etemad; et al. <a href="https://drafts.csswg.org/css-text-4/"><cite>CSS Text Module Level 4</cite></a>. URL: <a href="https://drafts.csswg.org/css-text-4/">https://drafts.csswg.org/css-text-4/</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">[CSS-VALUES] <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">[CSSOM] <dd>Daniel Glazman; Emilio Cobos Álvarez. <a href="https://drafts.csswg.org/cssom/"><cite>CSS Object Model (CSSOM)</cite></a>. URL: <a href="https://drafts.csswg.org/cssom/">https://drafts.csswg.org/cssom/</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-geometry-1">[GEOMETRY-1] <dd>Simon Pieters; Chris Harrelson. <a href="https://drafts.fxtf.org/geometry/"><cite>Geometry Interfaces Module Level 1</cite></a>. URL: <a href="https://drafts.fxtf.org/geometry/">https://drafts.fxtf.org/geometry/</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-infra">[INFRA] <dd>Anne van Kesteren; Domenic Denicola. <a href="https://infra.spec.whatwg.org/"><cite>Infra Standard</cite></a>. Living Standard. URL: <a href="https://infra.spec.whatwg.org/">https://infra.spec.whatwg.org/</a> <dt id="biblio-mediaqueries-5">[MEDIAQUERIES-5] <dd>Dean Jackson; et al. <a href="https://drafts.csswg.org/mediaqueries-5/"><cite>Media Queries Level 5</cite></a>. URL: <a href="https://drafts.csswg.org/mediaqueries-5/">https://drafts.csswg.org/mediaqueries-5/</a> <dt id="biblio-rfc2119">[RFC2119] <dd>S. Bradner. <a href="https://datatracker.ietf.org/doc/html/rfc2119"><cite>Key words for use in RFCs to Indicate Requirement Levels</cite></a>. March 1997. Best Current Practice. URL: <a href="https://datatracker.ietf.org/doc/html/rfc2119">https://datatracker.ietf.org/doc/html/rfc2119</a> <dt id="biblio-selectors-4">[SELECTORS-4] <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://drafts.csswg.org/selectors/"><cite>Selectors Level 4</cite></a>. URL: <a href="https://drafts.csswg.org/selectors/">https://drafts.csswg.org/selectors/</a> <dt id="biblio-svg11">[SVG11] <dd>Erik Dahlström; et al. <a href="https://www.w3.org/TR/SVG11/"><cite>Scalable Vector Graphics (SVG) 1.1 (Second Edition)</cite></a>. 16 August 2011. REC. URL: <a href="https://www.w3.org/TR/SVG11/">https://www.w3.org/TR/SVG11/</a> <dt id="biblio-svg2">[SVG2] <dd>Amelia Bellamy-Royds; et al. <a href="https://svgwg.org/svg2-draft/"><cite>Scalable Vector Graphics (SVG) 2</cite></a>. URL: <a href="https://svgwg.org/svg2-draft/">https://svgwg.org/svg2-draft/</a> <dt id="biblio-uievents">[UIEVENTS] <dd>Gary Kacmarcik; Travis Leithead. <a href="https://w3c.github.io/uievents/"><cite>UI Events</cite></a>. URL: <a href="https://w3c.github.io/uievents/">https://w3c.github.io/uievents/</a> <dt id="biblio-webidl">[WEBIDL] <dd>Edgar Chen; Timothy Gu. <a href="https://webidl.spec.whatwg.org/"><cite>Web IDL Standard</cite></a>. Living Standard. URL: <a href="https://webidl.spec.whatwg.org/">https://webidl.spec.whatwg.org/</a> </dl> <h3 class="no-num no-ref heading settled" id="informative">Informative References<a class="self-link" href="#informative"></a></h3> <dl> <dt id="biblio-css-ui-4">[CSS-UI-4] <dd>Florian Rivoal. <a href="https://drafts.csswg.org/css-ui-4/"><cite>CSS Basic User Interface Module Level 4</cite></a>. URL: <a href="https://drafts.csswg.org/css-ui-4/">https://drafts.csswg.org/css-ui-4/</a> <dt id="biblio-cssom-view-1">[CSSOM-VIEW-1] <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> </dl> <h2 class="no-num no-ref heading settled" id="idl-index">IDL Index<a class="self-link" href="#idl-index"></a></h2> <pre class="idl highlight def"><c- b>enum</c-> <a href="#enumdef-scrollbehavior"><code><c- g>ScrollBehavior</c-></code></a> { <a href="#dom-scrollbehavior-auto"><code><c- s>"auto"</c-></code></a>, <a href="#dom-scrollbehavior-instant"><code><c- s>"instant"</c-></code></a>, <a href="#dom-scrollbehavior-smooth"><code><c- s>"smooth"</c-></code></a> }; <c- b>dictionary</c-> <a href="#dictdef-scrolloptions"><code><c- g>ScrollOptions</c-></code></a> { <a data-link-type="idl-name" href="#enumdef-scrollbehavior"><c- n>ScrollBehavior</c-></a> <a data-default=""auto"" data-type="ScrollBehavior" href="#dom-scrolloptions-behavior"><code><c- g>behavior</c-></code></a> = "auto"; }; <c- b>dictionary</c-> <a href="#dictdef-scrolltooptions"><code><c- g>ScrollToOptions</c-></code></a> : <a data-link-type="idl-name" href="#dictdef-scrolloptions"><c- n>ScrollOptions</c-></a> { <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-unrestricted-double"><c- b>unrestricted</c-> <c- b>double</c-></a> <a data-type="unrestricted double" href="#dom-scrolltooptions-left"><code><c- g>left</c-></code></a>; <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-unrestricted-double"><c- b>unrestricted</c-> <c- b>double</c-></a> <a data-type="unrestricted double" href="#dom-scrolltooptions-top"><code><c- g>top</c-></code></a>; }; <c- b>partial</c-> <c- b>interface</c-> <a class="idl-code" data-link-type="interface" href="https://html.spec.whatwg.org/multipage/nav-history-apis.html#window"><c- g>Window</c-></a> { [<a class="idl-code" data-link-type="extended-attribute" href="https://webidl.spec.whatwg.org/#NewObject"><c- g>NewObject</c-></a>] <a data-link-type="idl-name" href="#mediaquerylist"><c- n>MediaQueryList</c-></a> <a class="idl-code" data-link-type="method" href="#dom-window-matchmedia"><c- g>matchMedia</c-></a>(<a data-link-type="idl-name" href="https://drafts.csswg.org/cssom-1/#cssomstring"><c- n>CSSOMString</c-></a> <a href="#dom-window-matchmedia-query-query"><code><c- g>query</c-></code></a>); [<a class="idl-code" data-link-type="extended-attribute" href="https://webidl.spec.whatwg.org/#SameObject"><c- g>SameObject</c-></a>, <a class="idl-code" data-link-type="extended-attribute" href="https://webidl.spec.whatwg.org/#Replaceable"><c- g>Replaceable</c-></a>] <c- b>readonly</c-> <c- b>attribute</c-> <a data-link-type="idl-name" href="#screen"><c- n>Screen</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="Screen" href="#dom-window-screen"><c- g>screen</c-></a>; [<a class="idl-code" data-link-type="extended-attribute" href="https://webidl.spec.whatwg.org/#SameObject"><c- g>SameObject</c-></a>, <a class="idl-code" data-link-type="extended-attribute" href="https://webidl.spec.whatwg.org/#Replaceable"><c- g>Replaceable</c-></a>] <c- b>readonly</c-> <c- b>attribute</c-> <a data-link-type="idl-name" href="#visualviewport"><c- n>VisualViewport</c-></a>? <a class="idl-code" data-link-type="attribute" data-readonly data-type="VisualViewport?" href="#dom-window-visualviewport"><c- g>visualViewport</c-></a>; // browsing context <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-undefined"><c- b>undefined</c-></a> <a class="idl-code" data-link-type="method" href="#dom-window-moveto"><c- g>moveTo</c-></a>(<a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-long"><c- b>long</c-></a> <a href="#dom-window-moveto-x-y-x"><code><c- g>x</c-></code></a>, <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-long"><c- b>long</c-></a> <a href="#dom-window-moveto-x-y-y"><code><c- g>y</c-></code></a>); <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-undefined"><c- b>undefined</c-></a> <a class="idl-code" data-link-type="method" href="#dom-window-moveby"><c- g>moveBy</c-></a>(<a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-long"><c- b>long</c-></a> <a href="#dom-window-moveby-x-y-x"><code><c- g>x</c-></code></a>, <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-long"><c- b>long</c-></a> <a href="#dom-window-moveby-x-y-y"><code><c- g>y</c-></code></a>); <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-undefined"><c- b>undefined</c-></a> <a class="idl-code" data-link-type="method" href="#dom-window-resizeto"><c- g>resizeTo</c-></a>(<a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-long"><c- b>long</c-></a> <a href="#dom-window-resizeto-width-height-width"><code><c- g>width</c-></code></a>, <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-long"><c- b>long</c-></a> <a href="#dom-window-resizeto-width-height-height"><code><c- g>height</c-></code></a>); <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-undefined"><c- b>undefined</c-></a> <a class="idl-code" data-link-type="method" href="#dom-window-resizeby"><c- g>resizeBy</c-></a>(<a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-long"><c- b>long</c-></a> <a href="#dom-window-resizeby-x-y-x"><code><c- g>x</c-></code></a>, <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-long"><c- b>long</c-></a> <a href="#dom-window-resizeby-x-y-y"><code><c- g>y</c-></code></a>); // viewport [<a class="idl-code" data-link-type="extended-attribute" href="https://webidl.spec.whatwg.org/#Replaceable"><c- g>Replaceable</c-></a>] <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-long"><c- b>long</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="long" href="#dom-window-innerwidth"><c- g>innerWidth</c-></a>; [<a class="idl-code" data-link-type="extended-attribute" href="https://webidl.spec.whatwg.org/#Replaceable"><c- g>Replaceable</c-></a>] <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-long"><c- b>long</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="long" href="#dom-window-innerheight"><c- g>innerHeight</c-></a>; // viewport scrolling [<a class="idl-code" data-link-type="extended-attribute" href="https://webidl.spec.whatwg.org/#Replaceable"><c- g>Replaceable</c-></a>] <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-double"><c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="double" href="#dom-window-scrollx"><c- g>scrollX</c-></a>; [<a class="idl-code" data-link-type="extended-attribute" href="https://webidl.spec.whatwg.org/#Replaceable"><c- g>Replaceable</c-></a>] <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-double"><c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="double" href="#dom-window-pagexoffset"><c- g>pageXOffset</c-></a>; [<a class="idl-code" data-link-type="extended-attribute" href="https://webidl.spec.whatwg.org/#Replaceable"><c- g>Replaceable</c-></a>] <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-double"><c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="double" href="#dom-window-scrolly"><c- g>scrollY</c-></a>; [<a class="idl-code" data-link-type="extended-attribute" href="https://webidl.spec.whatwg.org/#Replaceable"><c- g>Replaceable</c-></a>] <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-double"><c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="double" href="#dom-window-pageyoffset"><c- g>pageYOffset</c-></a>; <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-undefined"><c- b>undefined</c-></a> <a class="idl-code" data-link-type="method" href="#dom-window-scroll"><c- g>scroll</c-></a>(<c- b>optional</c-> <a data-link-type="idl-name" href="#dictdef-scrolltooptions"><c- n>ScrollToOptions</c-></a> <a href="#dom-window-scroll-options-options"><code><c- g>options</c-></code></a> = {}); <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-undefined"><c- b>undefined</c-></a> <a class="idl-code" data-link-type="method" href="#dom-window-scroll"><c- g>scroll</c-></a>(<a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-unrestricted-double"><c- b>unrestricted</c-> <c- b>double</c-></a> <a href="#dom-window-scroll-x-y-x"><code><c- g>x</c-></code></a>, <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-unrestricted-double"><c- b>unrestricted</c-> <c- b>double</c-></a> <a href="#dom-window-scroll-x-y-y"><code><c- g>y</c-></code></a>); <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-undefined"><c- b>undefined</c-></a> <a class="idl-code" data-link-type="method" href="#dom-window-scrollto"><c- g>scrollTo</c-></a>(<c- b>optional</c-> <a data-link-type="idl-name" href="#dictdef-scrolltooptions"><c- n>ScrollToOptions</c-></a> <a href="#dom-window-scrollto-options-options"><code><c- g>options</c-></code></a> = {}); <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-undefined"><c- b>undefined</c-></a> <a class="idl-code" data-link-type="method" href="#dom-window-scrollto"><c- g>scrollTo</c-></a>(<a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-unrestricted-double"><c- b>unrestricted</c-> <c- b>double</c-></a> <a href="#dom-window-scrollto-x-y-x"><code><c- g>x</c-></code></a>, <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-unrestricted-double"><c- b>unrestricted</c-> <c- b>double</c-></a> <a href="#dom-window-scrollto-x-y-y"><code><c- g>y</c-></code></a>); <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-undefined"><c- b>undefined</c-></a> <a class="idl-code" data-link-type="method" href="#dom-window-scrollby"><c- g>scrollBy</c-></a>(<c- b>optional</c-> <a data-link-type="idl-name" href="#dictdef-scrolltooptions"><c- n>ScrollToOptions</c-></a> <a href="#dom-window-scrollby-options-options"><code><c- g>options</c-></code></a> = {}); <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-undefined"><c- b>undefined</c-></a> <a class="idl-code" data-link-type="method" href="#dom-window-scrollby"><c- g>scrollBy</c-></a>(<a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-unrestricted-double"><c- b>unrestricted</c-> <c- b>double</c-></a> <a href="#dom-window-scrollby-x-y-x"><code><c- g>x</c-></code></a>, <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-unrestricted-double"><c- b>unrestricted</c-> <c- b>double</c-></a> <a href="#dom-window-scrollby-x-y-y"><code><c- g>y</c-></code></a>); // client [<a class="idl-code" data-link-type="extended-attribute" href="https://webidl.spec.whatwg.org/#Replaceable"><c- g>Replaceable</c-></a>] <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-long"><c- b>long</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="long" href="#dom-window-screenx"><c- g>screenX</c-></a>; [<a class="idl-code" data-link-type="extended-attribute" href="https://webidl.spec.whatwg.org/#Replaceable"><c- g>Replaceable</c-></a>] <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-long"><c- b>long</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="long" href="#dom-window-screenleft"><c- g>screenLeft</c-></a>; [<a class="idl-code" data-link-type="extended-attribute" href="https://webidl.spec.whatwg.org/#Replaceable"><c- g>Replaceable</c-></a>] <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-long"><c- b>long</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="long" href="#dom-window-screeny"><c- g>screenY</c-></a>; [<a class="idl-code" data-link-type="extended-attribute" href="https://webidl.spec.whatwg.org/#Replaceable"><c- g>Replaceable</c-></a>] <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-long"><c- b>long</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="long" href="#dom-window-screentop"><c- g>screenTop</c-></a>; [<a class="idl-code" data-link-type="extended-attribute" href="https://webidl.spec.whatwg.org/#Replaceable"><c- g>Replaceable</c-></a>] <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-long"><c- b>long</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="long" href="#dom-window-outerwidth"><c- g>outerWidth</c-></a>; [<a class="idl-code" data-link-type="extended-attribute" href="https://webidl.spec.whatwg.org/#Replaceable"><c- g>Replaceable</c-></a>] <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-long"><c- b>long</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="long" href="#dom-window-outerheight"><c- g>outerHeight</c-></a>; [<a class="idl-code" data-link-type="extended-attribute" href="https://webidl.spec.whatwg.org/#Replaceable"><c- g>Replaceable</c-></a>] <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-double"><c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="double" href="#dom-window-devicepixelratio"><c- g>devicePixelRatio</c-></a>; }; [<a class="idl-code" data-link-type="extended-attribute" href="https://webidl.spec.whatwg.org/#Exposed"><c- g>Exposed</c-></a>=<c- n>Window</c->] <c- b>interface</c-> <a href="#mediaquerylist"><code><c- g>MediaQueryList</c-></code></a> : <a data-link-type="idl-name" href="https://dom.spec.whatwg.org/#eventtarget"><c- n>EventTarget</c-></a> { <c- b>readonly</c-> <c- b>attribute</c-> <a data-link-type="idl-name" href="https://drafts.csswg.org/cssom-1/#cssomstring"><c- n>CSSOMString</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="CSSOMString" href="#dom-mediaquerylist-media"><c- g>media</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-boolean"><c- b>boolean</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="boolean" href="#dom-mediaquerylist-matches"><c- g>matches</c-></a>; <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-undefined"><c- b>undefined</c-></a> <a class="idl-code" data-link-type="method" href="#dom-mediaquerylist-addlistener"><c- g>addListener</c-></a>(<a data-link-type="idl-name" href="https://dom.spec.whatwg.org/#callbackdef-eventlistener"><c- n>EventListener</c-></a>? <a href="#dom-mediaquerylist-addlistener-callback-callback"><code><c- g>callback</c-></code></a>); <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-undefined"><c- b>undefined</c-></a> <a class="idl-code" data-link-type="method" href="#dom-mediaquerylist-removelistener"><c- g>removeListener</c-></a>(<a data-link-type="idl-name" href="https://dom.spec.whatwg.org/#callbackdef-eventlistener"><c- n>EventListener</c-></a>? <a href="#dom-mediaquerylist-removelistener-callback-callback"><code><c- g>callback</c-></code></a>); <c- b>attribute</c-> <a data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler"><c- n>EventHandler</c-></a> <a class="idl-code" data-link-type="attribute" data-type="EventHandler" href="#dom-mediaquerylist-onchange"><c- g>onchange</c-></a>; }; [<a class="idl-code" data-link-type="extended-attribute" href="https://webidl.spec.whatwg.org/#Exposed"><c- g>Exposed</c-></a>=<c- n>Window</c->] <c- b>interface</c-> <a href="#mediaquerylistevent"><code><c- g>MediaQueryListEvent</c-></code></a> : <a data-link-type="idl-name" href="https://dom.spec.whatwg.org/#event"><c- n>Event</c-></a> { <a href="#dom-mediaquerylistevent-mediaquerylistevent"><code><c- g>constructor</c-></code></a>(<a data-link-type="idl-name" href="https://drafts.csswg.org/cssom-1/#cssomstring"><c- n>CSSOMString</c-></a> <a href="#dom-mediaquerylistevent-mediaquerylistevent-type-eventinitdict-type"><code><c- g>type</c-></code></a>, <c- b>optional</c-> <a data-link-type="idl-name" href="#dictdef-mediaquerylisteventinit"><c- n>MediaQueryListEventInit</c-></a> <a href="#dom-mediaquerylistevent-mediaquerylistevent-type-eventinitdict-eventinitdict"><code><c- g>eventInitDict</c-></code></a> = {}); <c- b>readonly</c-> <c- b>attribute</c-> <a data-link-type="idl-name" href="https://drafts.csswg.org/cssom-1/#cssomstring"><c- n>CSSOMString</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="CSSOMString" href="#dom-mediaquerylistevent-media"><c- g>media</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-boolean"><c- b>boolean</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="boolean" href="#dom-mediaquerylistevent-matches"><c- g>matches</c-></a>; }; <c- b>dictionary</c-> <a href="#dictdef-mediaquerylisteventinit"><code><c- g>MediaQueryListEventInit</c-></code></a> : <a data-link-type="idl-name" href="https://dom.spec.whatwg.org/#dictdef-eventinit"><c- n>EventInit</c-></a> { <a data-link-type="idl-name" href="https://drafts.csswg.org/cssom-1/#cssomstring"><c- n>CSSOMString</c-></a> <a data-default="""" data-type="CSSOMString" href="#dom-mediaquerylisteventinit-media"><code><c- g>media</c-></code></a> = ""; <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-boolean"><c- b>boolean</c-></a> <a data-default="false" data-type="boolean" href="#dom-mediaquerylisteventinit-matches"><code><c- g>matches</c-></code></a> = <c- b>false</c->; }; [<a class="idl-code" data-link-type="extended-attribute" href="https://webidl.spec.whatwg.org/#Exposed"><c- g>Exposed</c-></a>=<c- n>Window</c->] <c- b>interface</c-> <a href="#screen"><code><c- g>Screen</c-></code></a> { <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-long"><c- b>long</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="long" href="#dom-screen-availwidth"><c- g>availWidth</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-long"><c- b>long</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="long" href="#dom-screen-availheight"><c- g>availHeight</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-long"><c- b>long</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="long" href="#dom-screen-width"><c- g>width</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-long"><c- b>long</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="long" href="#dom-screen-height"><c- g>height</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-unsigned-long"><c- b>unsigned</c-> <c- b>long</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="unsigned long" href="#dom-screen-colordepth"><c- g>colorDepth</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-unsigned-long"><c- b>unsigned</c-> <c- b>long</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="unsigned long" href="#dom-screen-pixeldepth"><c- g>pixelDepth</c-></a>; }; <c- b>partial</c-> <c- b>interface</c-> <a class="idl-code" data-link-type="interface" href="https://dom.spec.whatwg.org/#document"><c- g>Document</c-></a> { <a data-link-type="idl-name" href="https://dom.spec.whatwg.org/#element"><c- n>Element</c-></a>? <a class="idl-code" data-link-type="method" href="#dom-document-elementfrompoint"><c- g>elementFromPoint</c-></a>(<a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-double"><c- b>double</c-></a> <a href="#dom-document-elementfrompoint-x-y-x"><code><c- g>x</c-></code></a>, <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-double"><c- b>double</c-></a> <a href="#dom-document-elementfrompoint-x-y-y"><code><c- g>y</c-></code></a>); <a data-link-type="dfn" href="https://webidl.spec.whatwg.org/#idl-sequence"><c- b>sequence</c-></a><<a data-link-type="idl-name" href="https://dom.spec.whatwg.org/#element"><c- n>Element</c-></a>> <a class="idl-code" data-link-type="method" href="#dom-document-elementsfrompoint"><c- g>elementsFromPoint</c-></a>(<a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-double"><c- b>double</c-></a> <a href="#dom-document-elementsfrompoint-x-y-x"><code><c- g>x</c-></code></a>, <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-double"><c- b>double</c-></a> <a href="#dom-document-elementsfrompoint-x-y-y"><code><c- g>y</c-></code></a>); <a data-link-type="idl-name" href="#caretposition"><c- n>CaretPosition</c-></a>? <a class="idl-code" data-link-type="method" href="#dom-document-caretpositionfrompoint"><c- g>caretPositionFromPoint</c-></a>(<a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-double"><c- b>double</c-></a> <a href="#dom-document-caretpositionfrompoint-x-y-options-x"><code><c- g>x</c-></code></a>, <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-double"><c- b>double</c-></a> <a href="#dom-document-caretpositionfrompoint-x-y-options-y"><code><c- g>y</c-></code></a>, <c- b>optional</c-> <a data-link-type="idl-name" href="#dictdef-caretpositionfrompointoptions"><c- n>CaretPositionFromPointOptions</c-></a> <a href="#dom-document-caretpositionfrompoint-x-y-options-options"><code><c- g>options</c-></code></a> = {}); <c- b>readonly</c-> <c- b>attribute</c-> <a data-link-type="idl-name" href="https://dom.spec.whatwg.org/#element"><c- n>Element</c-></a>? <a class="idl-code" data-link-type="attribute" data-readonly data-type="Element?" href="#dom-document-scrollingelement"><c- g>scrollingElement</c-></a>; }; <c- b>dictionary</c-> <a href="#dictdef-caretpositionfrompointoptions"><code><c- g>CaretPositionFromPointOptions</c-></code></a> { <a data-link-type="dfn" href="https://webidl.spec.whatwg.org/#idl-sequence"><c- b>sequence</c-></a><<a data-link-type="idl-name" href="https://dom.spec.whatwg.org/#shadowroot"><c- n>ShadowRoot</c-></a>> <a data-default="[]" data-type="sequence<ShadowRoot>" href="#dom-caretpositionfrompointoptions-shadowroots"><code><c- g>shadowRoots</c-></code></a> = []; }; [<a class="idl-code" data-link-type="extended-attribute" href="https://webidl.spec.whatwg.org/#Exposed"><c- g>Exposed</c-></a>=<c- n>Window</c->] <c- b>interface</c-> <a href="#caretposition"><code><c- g>CaretPosition</c-></code></a> { <c- b>readonly</c-> <c- b>attribute</c-> <a data-link-type="idl-name" href="https://dom.spec.whatwg.org/#node"><c- n>Node</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="Node" href="#dom-caretposition-offsetnode"><c- g>offsetNode</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-unsigned-long"><c- b>unsigned</c-> <c- b>long</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="unsigned long" href="#dom-caretposition-offset"><c- g>offset</c-></a>; [<a class="idl-code" data-link-type="extended-attribute" href="https://webidl.spec.whatwg.org/#NewObject"><c- g>NewObject</c-></a>] <a data-link-type="idl-name" href="https://drafts.fxtf.org/geometry-1/#domrect"><c- n>DOMRect</c-></a>? <a class="idl-code" data-link-type="method" href="#dom-caretposition-getclientrect"><c- g>getClientRect</c-></a>(); }; <c- b>enum</c-> <a href="#enumdef-scrolllogicalposition"><code><c- g>ScrollLogicalPosition</c-></code></a> { <a href="#dom-scrolllogicalposition-start"><code><c- s>"start"</c-></code></a>, <a href="#dom-scrolllogicalposition-center"><code><c- s>"center"</c-></code></a>, <a href="#dom-scrolllogicalposition-end"><code><c- s>"end"</c-></code></a>, <a href="#dom-scrolllogicalposition-nearest"><code><c- s>"nearest"</c-></code></a> }; <c- b>dictionary</c-> <a href="#dictdef-scrollintoviewoptions"><code><c- g>ScrollIntoViewOptions</c-></code></a> : <a data-link-type="idl-name" href="#dictdef-scrolloptions"><c- n>ScrollOptions</c-></a> { <a data-link-type="idl-name" href="#enumdef-scrolllogicalposition"><c- n>ScrollLogicalPosition</c-></a> <a data-default=""start"" data-type="ScrollLogicalPosition" href="#dom-scrollintoviewoptions-block"><code><c- g>block</c-></code></a> = "start"; <a data-link-type="idl-name" href="#enumdef-scrolllogicalposition"><c- n>ScrollLogicalPosition</c-></a> <a data-default=""nearest"" data-type="ScrollLogicalPosition" href="#dom-scrollintoviewoptions-inline"><code><c- g>inline</c-></code></a> = "nearest"; <a data-link-type="idl-name" href="#enumdef-scrollintoviewcontainer"><c- n>ScrollIntoViewContainer</c-></a> <a data-default=""all"" data-type="ScrollIntoViewContainer" href="#dom-scrollintoviewoptions-container"><code><c- g>container</c-></code></a> = "all"; }; <c- b>enum</c-> <a href="#enumdef-scrollintoviewcontainer"><code><c- g>ScrollIntoViewContainer</c-></code></a> { <a href="#dom-scrollintoviewcontainer-all"><code><c- s>"all"</c-></code></a>, <a href="#dom-scrollintoviewcontainer-nearest"><code><c- s>"nearest"</c-></code></a> }; <c- b>dictionary</c-> <a href="#dictdef-checkvisibilityoptions"><code><c- g>CheckVisibilityOptions</c-></code></a> { <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-boolean"><c- b>boolean</c-></a> <a data-default="false" data-type="boolean" href="#dom-checkvisibilityoptions-checkopacity"><code><c- g>checkOpacity</c-></code></a> = <c- b>false</c->; <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-boolean"><c- b>boolean</c-></a> <a data-default="false" data-type="boolean" href="#dom-checkvisibilityoptions-checkvisibilitycss"><code><c- g>checkVisibilityCSS</c-></code></a> = <c- b>false</c->; <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-boolean"><c- b>boolean</c-></a> <a data-default="false" data-type="boolean" href="#dom-checkvisibilityoptions-contentvisibilityauto"><code><c- g>contentVisibilityAuto</c-></code></a> = <c- b>false</c->; <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-boolean"><c- b>boolean</c-></a> <a data-default="false" data-type="boolean" href="#dom-checkvisibilityoptions-opacityproperty"><code><c- g>opacityProperty</c-></code></a> = <c- b>false</c->; <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-boolean"><c- b>boolean</c-></a> <a data-default="false" data-type="boolean" href="#dom-checkvisibilityoptions-visibilityproperty"><code><c- g>visibilityProperty</c-></code></a> = <c- b>false</c->; }; <c- b>partial</c-> <c- b>interface</c-> <a class="idl-code" data-link-type="interface" href="https://dom.spec.whatwg.org/#element"><c- g>Element</c-></a> { <a data-link-type="idl-name" href="https://drafts.fxtf.org/geometry-1/#domrectlist"><c- n>DOMRectList</c-></a> <a class="idl-code" data-link-type="method" href="#dom-element-getclientrects"><c- g>getClientRects</c-></a>(); [<a class="idl-code" data-link-type="extended-attribute" href="https://webidl.spec.whatwg.org/#NewObject"><c- g>NewObject</c-></a>] <a data-link-type="idl-name" href="https://drafts.fxtf.org/geometry-1/#domrect"><c- n>DOMRect</c-></a> <a class="idl-code" data-link-type="method" href="#dom-element-getboundingclientrect"><c- g>getBoundingClientRect</c-></a>(); <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-boolean"><c- b>boolean</c-></a> <a class="idl-code" data-link-type="method" href="#dom-element-checkvisibility"><c- g>checkVisibility</c-></a>(<c- b>optional</c-> <a data-link-type="idl-name" href="#dictdef-checkvisibilityoptions"><c- n>CheckVisibilityOptions</c-></a> <a href="#dom-element-checkvisibility-options-options"><code><c- g>options</c-></code></a> = {}); <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-undefined"><c- b>undefined</c-></a> <a class="idl-code" data-link-type="method" href="#dom-element-scrollintoview"><c- g>scrollIntoView</c-></a>(<c- b>optional</c-> (<a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-boolean"><c- b>boolean</c-></a> <c- b>or</c-> <a data-link-type="idl-name" href="#dictdef-scrollintoviewoptions"><c- n>ScrollIntoViewOptions</c-></a>) <a href="#dom-element-scrollintoview-arg-arg"><code><c- g>arg</c-></code></a> = {}); <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-undefined"><c- b>undefined</c-></a> <a class="idl-code" data-link-type="method" href="#dom-element-scroll"><c- g>scroll</c-></a>(<c- b>optional</c-> <a data-link-type="idl-name" href="#dictdef-scrolltooptions"><c- n>ScrollToOptions</c-></a> <a href="#dom-element-scroll-options-options"><code><c- g>options</c-></code></a> = {}); <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-undefined"><c- b>undefined</c-></a> <a class="idl-code" data-link-type="method" href="#dom-element-scroll"><c- g>scroll</c-></a>(<a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-unrestricted-double"><c- b>unrestricted</c-> <c- b>double</c-></a> <a href="#dom-element-scroll-x-y-x"><code><c- g>x</c-></code></a>, <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-unrestricted-double"><c- b>unrestricted</c-> <c- b>double</c-></a> <a href="#dom-element-scroll-x-y-y"><code><c- g>y</c-></code></a>); <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-undefined"><c- b>undefined</c-></a> <a class="idl-code" data-link-type="method" href="#dom-element-scrollto"><c- g>scrollTo</c-></a>(<c- b>optional</c-> <a data-link-type="idl-name" href="#dictdef-scrolltooptions"><c- n>ScrollToOptions</c-></a> <a href="#dom-element-scrollto-options-options"><code><c- g>options</c-></code></a> = {}); <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-undefined"><c- b>undefined</c-></a> <a class="idl-code" data-link-type="method" href="#dom-element-scrollto"><c- g>scrollTo</c-></a>(<a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-unrestricted-double"><c- b>unrestricted</c-> <c- b>double</c-></a> <a href="#dom-element-scrollto-x-y-x"><code><c- g>x</c-></code></a>, <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-unrestricted-double"><c- b>unrestricted</c-> <c- b>double</c-></a> <a href="#dom-element-scrollto-x-y-y"><code><c- g>y</c-></code></a>); <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-undefined"><c- b>undefined</c-></a> <a class="idl-code" data-link-type="method" href="#dom-element-scrollby"><c- g>scrollBy</c-></a>(<c- b>optional</c-> <a data-link-type="idl-name" href="#dictdef-scrolltooptions"><c- n>ScrollToOptions</c-></a> <a href="#dom-element-scrollby-options-options"><code><c- g>options</c-></code></a> = {}); <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-undefined"><c- b>undefined</c-></a> <a class="idl-code" data-link-type="method" href="#dom-element-scrollby"><c- g>scrollBy</c-></a>(<a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-unrestricted-double"><c- b>unrestricted</c-> <c- b>double</c-></a> <a href="#dom-element-scrollby-x-y-x"><code><c- g>x</c-></code></a>, <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-unrestricted-double"><c- b>unrestricted</c-> <c- b>double</c-></a> <a href="#dom-element-scrollby-x-y-y"><code><c- g>y</c-></code></a>); <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-unrestricted-double"><c- b>unrestricted</c-> <c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-type="unrestricted double" href="#dom-element-scrolltop"><c- g>scrollTop</c-></a>; <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-unrestricted-double"><c- b>unrestricted</c-> <c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-type="unrestricted double" href="#dom-element-scrollleft"><c- g>scrollLeft</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-long"><c- b>long</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="long" href="#dom-element-scrollwidth"><c- g>scrollWidth</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-long"><c- b>long</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="long" href="#dom-element-scrollheight"><c- g>scrollHeight</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-long"><c- b>long</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="long" href="#dom-element-clienttop"><c- g>clientTop</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-long"><c- b>long</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="long" href="#dom-element-clientleft"><c- g>clientLeft</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-long"><c- b>long</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="long" href="#dom-element-clientwidth"><c- g>clientWidth</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-long"><c- b>long</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="long" href="#dom-element-clientheight"><c- g>clientHeight</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-double"><c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="double" href="#dom-element-currentcsszoom"><c- g>currentCSSZoom</c-></a>; }; <c- b>partial</c-> <c- b>interface</c-> <a class="idl-code" data-link-type="interface" href="https://html.spec.whatwg.org/multipage/dom.html#htmlelement"><c- g>HTMLElement</c-></a> { <c- b>readonly</c-> <c- b>attribute</c-> <a data-link-type="idl-name" href="https://dom.spec.whatwg.org/#element"><c- n>Element</c-></a>? <a class="idl-code" data-link-type="attribute" data-readonly data-type="Element?" href="#dom-htmlelement-offsetparent"><c- g>offsetParent</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-long"><c- b>long</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="long" href="#dom-htmlelement-offsettop"><c- g>offsetTop</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-long"><c- b>long</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="long" href="#dom-htmlelement-offsetleft"><c- g>offsetLeft</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-long"><c- b>long</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="long" href="#dom-htmlelement-offsetwidth"><c- g>offsetWidth</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-long"><c- b>long</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="long" href="#dom-htmlelement-offsetheight"><c- g>offsetHeight</c-></a>; }; <c- b>partial</c-> <c- b>interface</c-> <a class="idl-code" data-link-type="interface" href="https://html.spec.whatwg.org/multipage/embedded-content.html#htmlimageelement"><c- g>HTMLImageElement</c-></a> { <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-long"><c- b>long</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="long" href="#dom-htmlimageelement-x"><c- g>x</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-long"><c- b>long</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="long" href="#dom-htmlimageelement-y"><c- g>y</c-></a>; }; <c- b>partial</c-> <c- b>interface</c-> <a class="idl-code" data-link-type="interface" href="https://dom.spec.whatwg.org/#range"><c- g>Range</c-></a> { <a data-link-type="idl-name" href="https://drafts.fxtf.org/geometry-1/#domrectlist"><c- n>DOMRectList</c-></a> <a class="idl-code" data-link-type="method" href="#dom-range-getclientrects"><c- g>getClientRects</c-></a>(); [<a class="idl-code" data-link-type="extended-attribute" href="https://webidl.spec.whatwg.org/#NewObject"><c- g>NewObject</c-></a>] <a data-link-type="idl-name" href="https://drafts.fxtf.org/geometry-1/#domrect"><c- n>DOMRect</c-></a> <a class="idl-code" data-link-type="method" href="#dom-range-getboundingclientrect"><c- g>getBoundingClientRect</c-></a>(); }; <c- b>partial</c-> <c- b>interface</c-> <a class="idl-code" data-link-type="interface" href="https://w3c.github.io/uievents/#mouseevent"><c- g>MouseEvent</c-></a> { <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-double"><c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="double" href="#dom-mouseevent-screenx"><c- g>screenX</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-double"><c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="double" href="#dom-mouseevent-screeny"><c- g>screenY</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-double"><c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="double" href="#dom-mouseevent-pagex"><c- g>pageX</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-double"><c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="double" href="#dom-mouseevent-pagey"><c- g>pageY</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-double"><c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="double" href="#dom-mouseevent-clientx"><c- g>clientX</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-double"><c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="double" href="#dom-mouseevent-clienty"><c- g>clientY</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-double"><c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="double" href="#dom-mouseevent-x"><c- g>x</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-double"><c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="double" href="#dom-mouseevent-y"><c- g>y</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-double"><c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="double" href="#dom-mouseevent-offsetx"><c- g>offsetX</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-double"><c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="double" href="#dom-mouseevent-offsety"><c- g>offsetY</c-></a>; }; <c- b>partial</c-> <c- b>dictionary</c-> <a class="idl-code" data-link-type="dictionary" href="https://w3c.github.io/uievents/#dictdef-mouseeventinit"><c- g>MouseEventInit</c-></a> { <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-double"><c- b>double</c-></a> <a data-default="0.0" data-type="double" href="#dom-mouseeventinit-screenx"><code><c- g>screenX</c-></code></a> = 0.0; <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-double"><c- b>double</c-></a> <a data-default="0.0" data-type="double" href="#dom-mouseeventinit-screeny"><code><c- g>screenY</c-></code></a> = 0.0; <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-double"><c- b>double</c-></a> <a data-default="0.0" data-type="double" href="#dom-mouseeventinit-clientx"><code><c- g>clientX</c-></code></a> = 0.0; <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-double"><c- b>double</c-></a> <a data-default="0.0" data-type="double" href="#dom-mouseeventinit-clienty"><code><c- g>clientY</c-></code></a> = 0.0; }; <c- b>enum</c-> <a href="#enumdef-cssboxtype"><code><c- g>CSSBoxType</c-></code></a> { <a href="#dom-cssboxtype-margin"><code><c- s>"margin"</c-></code></a>, <a href="#dom-cssboxtype-border"><code><c- s>"border"</c-></code></a>, <a href="#dom-cssboxtype-padding"><code><c- s>"padding"</c-></code></a>, <a href="#dom-cssboxtype-content"><code><c- s>"content"</c-></code></a> }; <c- b>dictionary</c-> <a href="#dictdef-boxquadoptions"><code><c- g>BoxQuadOptions</c-></code></a> { <a data-link-type="idl-name" href="#enumdef-cssboxtype"><c- n>CSSBoxType</c-></a> <a data-default=""border"" data-type="CSSBoxType" href="#dom-boxquadoptions-box"><code><c- g>box</c-></code></a> = "border"; <a data-link-type="idl-name" href="#typedefdef-geometrynode"><c- n>GeometryNode</c-></a> <a data-type="GeometryNode" href="#dom-boxquadoptions-relativeto"><code><c- g>relativeTo</c-></code></a>; // XXX default document (i.e. viewport) }; <c- b>dictionary</c-> <a href="#dictdef-convertcoordinateoptions"><code><c- g>ConvertCoordinateOptions</c-></code></a> { <a data-link-type="idl-name" href="#enumdef-cssboxtype"><c- n>CSSBoxType</c-></a> <a data-default=""border"" data-type="CSSBoxType" href="#dom-convertcoordinateoptions-frombox"><code><c- g>fromBox</c-></code></a> = "border"; <a data-link-type="idl-name" href="#enumdef-cssboxtype"><c- n>CSSBoxType</c-></a> <a data-default=""border"" data-type="CSSBoxType" href="#dom-convertcoordinateoptions-tobox"><code><c- g>toBox</c-></code></a> = "border"; }; <c- b>interface</c-> <c- b>mixin</c-> <a href="#geometryutils"><code><c- g>GeometryUtils</c-></code></a> { <a data-link-type="dfn" href="https://webidl.spec.whatwg.org/#idl-sequence"><c- b>sequence</c-></a><<a data-link-type="idl-name" href="https://drafts.fxtf.org/geometry-1/#domquad"><c- n>DOMQuad</c-></a>> <a class="idl-code" data-link-type="method" href="#dom-geometryutils-getboxquads"><c- g>getBoxQuads</c-></a>(<c- b>optional</c-> <a data-link-type="idl-name" href="#dictdef-boxquadoptions"><c- n>BoxQuadOptions</c-></a> <a href="#dom-geometryutils-getboxquads-options-options"><code><c- g>options</c-></code></a> = {}); <a data-link-type="idl-name" href="https://drafts.fxtf.org/geometry-1/#domquad"><c- n>DOMQuad</c-></a> <a class="idl-code" data-link-type="method" href="#dom-geometryutils-convertquadfromnode"><c- g>convertQuadFromNode</c-></a>(<a data-link-type="idl-name" href="https://drafts.fxtf.org/geometry-1/#dictdef-domquadinit"><c- n>DOMQuadInit</c-></a> <a href="#dom-geometryutils-convertquadfromnode-quad-from-options-quad"><code><c- g>quad</c-></code></a>, <a data-link-type="idl-name" href="#typedefdef-geometrynode"><c- n>GeometryNode</c-></a> <a href="#dom-geometryutils-convertquadfromnode-quad-from-options-from"><code><c- g>from</c-></code></a>, <c- b>optional</c-> <a data-link-type="idl-name" href="#dictdef-convertcoordinateoptions"><c- n>ConvertCoordinateOptions</c-></a> <a href="#dom-geometryutils-convertquadfromnode-quad-from-options-options"><code><c- g>options</c-></code></a> = {}); <a data-link-type="idl-name" href="https://drafts.fxtf.org/geometry-1/#domquad"><c- n>DOMQuad</c-></a> <a class="idl-code" data-link-type="method" href="#dom-geometryutils-convertrectfromnode"><c- g>convertRectFromNode</c-></a>(<a data-link-type="idl-name" href="https://drafts.fxtf.org/geometry-1/#domrectreadonly"><c- n>DOMRectReadOnly</c-></a> <a href="#dom-geometryutils-convertrectfromnode-rect-from-options-rect"><code><c- g>rect</c-></code></a>, <a data-link-type="idl-name" href="#typedefdef-geometrynode"><c- n>GeometryNode</c-></a> <a href="#dom-geometryutils-convertrectfromnode-rect-from-options-from"><code><c- g>from</c-></code></a>, <c- b>optional</c-> <a data-link-type="idl-name" href="#dictdef-convertcoordinateoptions"><c- n>ConvertCoordinateOptions</c-></a> <a href="#dom-geometryutils-convertrectfromnode-rect-from-options-options"><code><c- g>options</c-></code></a> = {}); <a data-link-type="idl-name" href="https://drafts.fxtf.org/geometry-1/#dompoint"><c- n>DOMPoint</c-></a> <a class="idl-code" data-link-type="method" href="#dom-geometryutils-convertpointfromnode"><c- g>convertPointFromNode</c-></a>(<a data-link-type="idl-name" href="https://drafts.fxtf.org/geometry-1/#dictdef-dompointinit"><c- n>DOMPointInit</c-></a> <a href="#dom-geometryutils-convertpointfromnode-point-from-options-point"><code><c- g>point</c-></code></a>, <a data-link-type="idl-name" href="#typedefdef-geometrynode"><c- n>GeometryNode</c-></a> <a href="#dom-geometryutils-convertpointfromnode-point-from-options-from"><code><c- g>from</c-></code></a>, <c- b>optional</c-> <a data-link-type="idl-name" href="#dictdef-convertcoordinateoptions"><c- n>ConvertCoordinateOptions</c-></a> <a href="#dom-geometryutils-convertpointfromnode-point-from-options-options"><code><c- g>options</c-></code></a> = {}); // XXX z,w turns into 0 }; <a data-link-type="idl-name" href="https://dom.spec.whatwg.org/#text"><c- n>Text</c-></a> <c- b>includes</c-> <a data-link-type="idl-name" href="#geometryutils"><c- n>GeometryUtils</c-></a>; // like Range <a data-link-type="idl-name" href="https://dom.spec.whatwg.org/#element"><c- n>Element</c-></a> <c- b>includes</c-> <a data-link-type="idl-name" href="#geometryutils"><c- n>GeometryUtils</c-></a>; <a data-link-type="idl-name" href="https://drafts.csswg.org/css-pseudo-4/#csspseudoelement"><c- n>CSSPseudoElement</c-></a> <c- b>includes</c-> <a data-link-type="idl-name" href="#geometryutils"><c- n>GeometryUtils</c-></a>; <a data-link-type="idl-name" href="https://dom.spec.whatwg.org/#document"><c- n>Document</c-></a> <c- b>includes</c-> <a data-link-type="idl-name" href="#geometryutils"><c- n>GeometryUtils</c-></a>; <c- b>typedef</c-> (<a data-link-type="idl-name" href="https://dom.spec.whatwg.org/#text"><c- n>Text</c-></a> <c- b>or</c-> <a data-link-type="idl-name" href="https://dom.spec.whatwg.org/#element"><c- n>Element</c-></a> <c- b>or</c-> <a data-link-type="idl-name" href="https://drafts.csswg.org/css-pseudo-4/#csspseudoelement"><c- n>CSSPseudoElement</c-></a> <c- b>or</c-> <a data-link-type="idl-name" href="https://dom.spec.whatwg.org/#document"><c- n>Document</c-></a>) <a href="#typedefdef-geometrynode"><code><c- g>GeometryNode</c-></code></a>; [<a class="idl-code" data-link-type="extended-attribute" href="https://webidl.spec.whatwg.org/#Exposed"><c- g>Exposed</c-></a>=<c- n>Window</c->] <c- b>interface</c-> <a href="#visualviewport"><code><c- g>VisualViewport</c-></code></a> : <a data-link-type="idl-name" href="https://dom.spec.whatwg.org/#eventtarget"><c- n>EventTarget</c-></a> { <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-double"><c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="double" href="#dom-visualviewport-offsetleft"><c- g>offsetLeft</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-double"><c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="double" href="#dom-visualviewport-offsettop"><c- g>offsetTop</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-double"><c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="double" href="#dom-visualviewport-pageleft"><c- g>pageLeft</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-double"><c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="double" href="#dom-visualviewport-pagetop"><c- g>pageTop</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-double"><c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="double" href="#dom-visualviewport-width"><c- g>width</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-double"><c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="double" href="#dom-visualviewport-height"><c- g>height</c-></a>; <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-double"><c- b>double</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="double" href="#dom-visualviewport-scale"><c- g>scale</c-></a>; <c- b>attribute</c-> <a data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler"><c- n>EventHandler</c-></a> <a class="idl-code" data-link-type="attribute" data-type="EventHandler" href="#dom-visualviewport-onresize"><c- g>onresize</c-></a>; <c- b>attribute</c-> <a data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler"><c- n>EventHandler</c-></a> <a class="idl-code" data-link-type="attribute" data-type="EventHandler" href="#dom-visualviewport-onscroll"><c- g>onscroll</c-></a>; <c- b>attribute</c-> <a data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler"><c- n>EventHandler</c-></a> <a class="idl-code" data-link-type="attribute" data-type="EventHandler" href="#dom-visualviewport-onscrollend"><c- g>onscrollend</c-></a>; }; </pre> <h2 class="no-num no-ref heading settled" id="issues-index">Issues Index<a class="self-link" href="#issues-index"></a></h2> <div style="counter-reset:issue"> <div class="issue"> User agents do not agree whether this uses the (coordinated) <a data-link-type="dfn" href="https://drafts.csswg.org/css2/#viewport%E2%91%A0">viewport</a> <a data-link-type="dfn" href="#viewport-perform-a-scroll">perform a scroll</a> or the <a data-link-type="dfn" href="#scrolling-box">scrolling box</a> <a data-link-type="dfn" href="#perform-a-scroll">perform a scroll</a> on the layout viewport’s scrolling box. <a class="issue-return" href="#issue-1e98b401" title="Jump to section">↵</a></div> <div class="issue"> The object IDL fragment redefines some members. Can we resolve this somehow? <a class="issue-return" href="#issue-6025106e" title="Jump to section">↵</a></div> <div class="issue"> DOM order p1 = top left even in RTL scale to 0 means divide by zero, return 0x0 cross-frames not allowed, throw WrongDocumentError? points are flattened (3d transform), z=0. like getClientRect test block in inline pseudo-elements before/after are children of the element viewport boxes are all the same <a class="issue-return" href="#issue-33d3f260" title="Jump to section">↵</a> </div> <div class="issue">... <a class="issue-return" href="#issue-2f43b42f" title="Jump to section">↵</a></div> <div class="issue">... <a class="issue-return" href="#issue-2f43b42f①" title="Jump to section">↵</a></div> <div class="issue">... <a class="issue-return" href="#issue-2f43b42f②" title="Jump to section">↵</a></div> <div class="issue"> In what order are scrollend events dispatched? Ordered based on scroll start or scroll completion? <a class="issue-return" href="#issue-5cebf624" title="Jump to section">↵</a></div> </div> <details class="mdn-anno unpositioned" data-anno-for="caret-position"> <summary>⚠MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/API/CaretPosition" title="The CaretPosition interface represents the caret position, an indicator for the text insertion point. You can get a CaretPosition using the Document.caretPositionFromPoint() method.">CaretPosition</a> In only one current engine. <div class="support"> Firefox20+SafariNoneChromeNone <hr> Opera?EdgeNone <hr> Edge (Legacy)?IENone <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile? </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="dom-document-caretpositionfrompoint"> <summary>⚠MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/caretPositionFromPoint" title="The caretPositionFromPoint() method of the Document interface returns a CaretPosition object, containing the DOM node, along with the caret and caret's character offset within that node.">Document/caretPositionFromPoint</a> In only one current engine. <div class="support"> Firefox20+SafariNoneChromeNone <hr> Opera?EdgeNone <hr> Edge (Legacy)?IENone <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile? </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="dom-document-elementfrompoint"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/elementFromPoint" title="The elementFromPoint() method, available on the Document object, returns the topmost Element at the specified coordinates (relative to the viewport).">Document/elementFromPoint</a> In all current engines. <div class="support"> Firefox3+Safari4+Chrome1+ <hr> Opera12.1+Edge79+ <hr> Edge (Legacy)12+IE4+ <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView37+Samsung Internet?Opera Mobile12.1+ </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="dom-document-elementsfrompoint"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/elementsFromPoint" title="The elementsFromPoint() method of the Document interface returns an array of all elements at the specified coordinates (relative to the viewport). The elements are ordered from the topmost to the bottommost box of the viewport.">Document/elementsFromPoint</a> In all current engines. <div class="support"> Firefox46+Safari11.1+Chrome43+ <hr> Opera30+Edge79+ <hr> Edge (Legacy)NoneIENone <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile30+ </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="eventdef-document-scroll"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/scroll_event" title="The scroll event fires when the document view has been scrolled. To detect when scrolling has completed, see the Document: scrollend event. For element scrolling, see Element: scroll event.">Document/scroll_event</a> In all current engines. <div class="support"> Firefox6+Safari2+Chrome1+ <hr> Opera11.6+Edge79+ <hr> Edge (Legacy)12+IE9+ <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile12+ </div> </div> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/scroll_event" title="The scroll event fires when an element has been scrolled. To detect when scrolling has completed, see the Element: scrollend event.">Element/scroll_event</a> In all current engines. <div class="support"> Firefox6+Safari1.3+Chrome1+ <hr> Opera12.1+Edge79+ <hr> Edge (Legacy)12+IE9+ <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile12.1+ </div> </div> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/API/VisualViewport/scroll_event" title="The scroll event of the VisualViewport interface is fired when the visual viewport is scrolled.">VisualViewport/scroll_event</a> In all current engines. <div class="support"> Firefox91+Safari13+Chrome62+ <hr> Opera?Edge79+ <hr> Edge (Legacy)NoneIENone <hr> Firefox for Android68+iOS Safari?Chrome for Android?Android WebView?Samsung Internet8.0+Opera Mobile? </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="eventdef-document-scrollend"> <summary>MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/scrollend_event" title="The scrollend event fires when the document view has completed scrolling. Scrolling is considered completed when the scroll position has no more pending updates and the user has completed their gesture.">Document/scrollend_event</a> <div class="support"> Firefox109+SafariNoneChrome114+ <hr> Opera?Edge114+ <hr> Edge (Legacy)?IENone <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile? </div> </div> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollend_event" title="The scrollend event fires when element scrolling has completed. Scrolling is considered completed when the scroll position has no more pending updates and the user has completed their gesture.">Element/scrollend_event</a> <div class="support"> Firefox109+SafariNoneChrome114+ <hr> Opera?Edge114+ <hr> Edge (Legacy)?IENone <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile? </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="dom-document-scrollingelement"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/scrollingElement" title="The scrollingElement read-only property of the Document interface returns a reference to the Element that scrolls the document. In standards mode, this is the root element of the document, document.documentElement.">Document/scrollingElement</a> In all current engines. <div class="support"> Firefox48+Safari9+Chrome44+ <hr> Opera?Edge79+ <hr> Edge (Legacy)12+IENone <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile? </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="extensions-to-the-document-interface"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document" title="The Document interface represents any web page loaded in the browser and serves as an entry point into the web page's content, which is the DOM tree.">Document</a> In all current engines. <div class="support"> Firefox1+Safari1+Chrome1+ <hr> Opera3+Edge79+ <hr> Edge (Legacy)12+IE4+ <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView37+Samsung Internet?Opera Mobile10.1+ </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="dom-element-clientheight"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight" title="The Element.clientHeight read-only property is zero for elements with no CSS or inline layout boxes; otherwise, it's the inner height of an element in pixels. It includes padding but excludes borders, margins, and horizontal scrollbars (if present).">Element/clientHeight</a> In all current engines. <div class="support"> Firefox1+Safari3+Chrome1+ <hr> Opera8+Edge79+ <hr> Edge (Legacy)12+IE5+ <hr> Firefox for Android?iOS Safari1+Chrome for Android?Android WebView?Samsung Internet?Opera Mobile10.1+ </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="dom-element-clientleft"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/clientLeft" title="The width of the left border of an element in pixels. It includes the width of the vertical scrollbar if the text direction of the element is right-to-left and if there is an overflow causing a left vertical scrollbar to be rendered. clientLeft does not include the left margin or the left padding. clientLeft is read-only.">Element/clientLeft</a> In all current engines. <div class="support"> Firefox3+Safari3+Chrome1+ <hr> Opera8+Edge79+ <hr> Edge (Legacy)12+IE5+ <hr> Firefox for Android?iOS Safari1+Chrome for Android?Android WebView?Samsung Internet?Opera Mobile10.1+ </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="dom-element-clienttop"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/clientTop" title="The width of the top border of an element in pixels. It is a read-only, integer property of element.">Element/clientTop</a> In all current engines. <div class="support"> Firefox3+Safari3+Chrome1+ <hr> Opera8+Edge79+ <hr> Edge (Legacy)12+IE5+ <hr> Firefox for Android?iOS Safari1+Chrome for Android?Android WebView?Samsung Internet?Opera Mobile10.1+ </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="dom-element-clientwidth"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/clientWidth" title="The Element.clientWidth property is zero for inline elements and elements with no CSS; otherwise, it's the inner width of an element in pixels. It includes padding but excludes borders, margins, and vertical scrollbars (if present).">Element/clientWidth</a> In all current engines. <div class="support"> Firefox1+Safari3+Chrome1+ <hr> Opera8+Edge79+ <hr> Edge (Legacy)12+IE5+ <hr> Firefox for Android?iOS Safari1+Chrome for Android?Android WebView?Samsung Internet?Opera Mobile10.1+ </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="dom-element-getboundingclientrect"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect" title="The Element.getBoundingClientRect() method returns a DOMRect object providing information about the size of an element and its position relative to the viewport.">Element/getBoundingClientRect</a> In all current engines. <div class="support"> Firefox3+Safari4+Chrome2+ <hr> Opera9.5+Edge79+ <hr> Edge (Legacy)12+IE4+ <hr> Firefox for Android?iOS Safari3.2+Chrome for Android?Android WebView2+Samsung Internet?Opera Mobile10.1+ </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="dom-element-getclientrects"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/getClientRects" title="The getClientRects() method of the Element interface returns a collection of DOMRect objects that indicate the bounding rectangles for each CSS border box in a client.">Element/getClientRects</a> In all current engines. <div class="support"> Firefox3+Safari4+Chrome2+ <hr> Opera9.5+Edge79+ <hr> Edge (Legacy)12+IE5+ <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView2+Samsung Internet?Opera Mobile10.1+ </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="dom-element-scroll"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/scroll" title="The scroll() method of the Element interface scrolls the element to a particular set of coordinates inside a given element.">Element/scroll</a> In all current engines. <div class="support"> Firefox36+Safari10.1+Chrome61+ <hr> Opera?Edge79+ <hr> Edge (Legacy)?IENone <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile? </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="dom-element-scrollby"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollBy" title="The scrollBy() method of the Element interface scrolls an element by the given amount.">Element/scrollBy</a> In all current engines. <div class="support"> Firefox36+Safari10.1+Chrome61+ <hr> Opera?Edge79+ <hr> Edge (Legacy)?IENone <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile? </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="dom-element-scrollheight"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight" title="The Element.scrollHeight read-only property is a measurement of the height of an element's content, including content not visible on the screen due to overflow.">Element/scrollHeight</a> In all current engines. <div class="support"> Firefox21+Safari1+Chrome1+ <hr> Opera8+Edge79+ <hr> Edge (Legacy)12+IE5+ <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile10.1+ </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="dom-element-scrollintoview"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView" title="The Element interface's scrollIntoView() method scrolls the element's ancestor containers such that the element on which scrollIntoView() is called is visible to the user.">Element/scrollIntoView</a> In all current engines. <div class="support"> Firefox1+Safari3+Chrome1+ <hr> Opera12.1+Edge79+ <hr> Edge (Legacy)NoneIENone <hr> Firefox for Android?iOS Safari1+Chrome for Android?Android WebView?Samsung Internet?Opera Mobile12.1+ </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="dom-element-scrollleft"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft" title="The Element.scrollLeft property gets or sets the number of pixels that an element's content is scrolled from its left edge.">Element/scrollLeft</a> In all current engines. <div class="support"> Firefox1+Safari1+Chrome86+ <hr> Opera8+Edge86+ <hr> Edge (Legacy)NoneIE5+ <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile10.1+ </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="dom-element-scrollto"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTo" title="The scrollTo() method of the Element interface scrolls to a particular set of coordinates inside a given element.">Element/scrollTo</a> In all current engines. <div class="support"> Firefox36+Safari10.1+Chrome61+ <hr> Opera?Edge79+ <hr> Edge (Legacy)?IENone <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile? </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="dom-element-scrolltop"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop" title="The Element.scrollTop property gets or sets the number of pixels that an element's content is scrolled vertically.">Element/scrollTop</a> In all current engines. <div class="support"> Firefox1+Safari1+Chrome1+ <hr> Opera8+Edge79+ <hr> Edge (Legacy)12+IE5+ <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile10.1+ </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="dom-element-scrollwidth"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollWidth" title="The Element.scrollWidth read-only property is a measurement of the width of an element's content, including content not visible on the screen due to overflow.">Element/scrollWidth</a> In all current engines. <div class="support"> Firefox1+Safari1+Chrome1+ <hr> Opera12.1+Edge79+ <hr> Edge (Legacy)12+IE5+ <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile12.1+ </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="extension-to-the-element-interface"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element" title="Element is the most general base class from which all element objects (i.e. objects that represent elements) in a Document inherit. It only has methods and properties common to all kinds of elements. More specific classes inherit from Element.">Element</a> In all current engines. <div class="support"> Firefox1+Safari1+Chrome1+ <hr> Opera8+Edge79+ <hr> Edge (Legacy)12+IE4+ <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView37+Samsung Internet?Opera Mobile10.1+ </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="dom-htmlelement-offsetheight"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetHeight" title="The HTMLElement.offsetHeight read-only property returns the height of an element, including vertical padding and borders, as an integer.">HTMLElement/offsetHeight</a> In all current engines. <div class="support"> Firefox1+Safari3+Chrome1+ <hr> Opera8+Edge79+ <hr> Edge (Legacy)12+IE5.5+ <hr> Firefox for Android?iOS Safari1+Chrome for Android?Android WebView?Samsung Internet?Opera Mobile10.1+ </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="dom-htmlelement-offsetleft"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetLeft" title="The HTMLElement.offsetLeft read-only property returns the number of pixels that the upper left corner of the current element is offset to the left within the HTMLElement.offsetParent node.">HTMLElement/offsetLeft</a> In all current engines. <div class="support"> Firefox1+Safari3+Chrome1+ <hr> Opera8+Edge79+ <hr> Edge (Legacy)12+IE5.5+ <hr> Firefox for Android?iOS Safari1+Chrome for Android?Android WebView?Samsung Internet?Opera Mobile10.1+ </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="dom-htmlelement-offsetparent"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetParent" title="The HTMLElement.offsetParent read-only property returns a reference to the element which is the closest (nearest in the containment hierarchy) positioned ancestor element.">HTMLElement/offsetParent</a> In all current engines. <div class="support"> Firefox1+Safari3+Chrome1+ <hr> Opera8+Edge79+ <hr> Edge (Legacy)12+IE5.5+ <hr> Firefox for Android?iOS Safari1+Chrome for Android?Android WebView?Samsung Internet?Opera Mobile10.1+ </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="dom-htmlelement-offsettop"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetTop" title="The HTMLElement.offsetTop read-only property returns the distance of the outer border of the current element relative to the inner border of the top of the offsetParent, the closest positioned ancestor element.">HTMLElement/offsetTop</a> In all current engines. <div class="support"> Firefox1+Safari3+Chrome1+ <hr> Opera8+Edge79+ <hr> Edge (Legacy)12+IE5.5+ <hr> Firefox for Android?iOS Safari1+Chrome for Android?Android WebView?Samsung Internet?Opera Mobile10.1+ </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="dom-htmlelement-offsetwidth"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetWidth" title="The HTMLElement.offsetWidth read-only property returns the layout width of an element as an integer.">HTMLElement/offsetWidth</a> In all current engines. <div class="support"> Firefox1+Safari3+Chrome1+ <hr> Opera8+Edge79+ <hr> Edge (Legacy)12+IE5.5+ <hr> Firefox for Android?iOS Safari1+Chrome for Android?Android WebView?Samsung Internet?Opera Mobile10.1+ </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="dom-htmlimageelement-x"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/x" title="The read-only HTMLImageElement property x indicates the x-coordinate of the <img> element's left border edge relative to the root element's origin.">HTMLImageElement/x</a> In all current engines. <div class="support"> Firefox14+Safari3+Chrome1+ <hr> Opera12.1+Edge79+ <hr> Edge (Legacy)12+IENone <hr> Firefox for Android?iOS Safari1+Chrome for Android?Android WebView?Samsung Internet?Opera Mobile12.1+ </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="dom-htmlimageelement-y"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/y" title="The read-only HTMLImageElement property y indicates the y-coordinate of the <img> element's top border edge relative to the root element's origin.">HTMLImageElement/y</a> In all current engines. <div class="support"> Firefox14+Safari3+Chrome1+ <hr> Opera12.1+Edge79+ <hr> Edge (Legacy)12+IENone <hr> Firefox for Android?iOS Safari1+Chrome for Android?Android WebView?Samsung Internet?Opera Mobile12.1+ </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="dom-mediaquerylist-onchange"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/change_event" title="The change event of the MediaQueryList interface fires when the status of media query support changes.">MediaQueryList/change_event</a> In all current engines. <div class="support"> Firefox55+Safari14+Chrome39+ <hr> Opera?Edge79+ <hr> Edge (Legacy)?IENone <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile? </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="dom-mediaquerylist-matches"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/matches" title="The matches read-only property of the MediaQueryList interface is a boolean value that returns true if the document currently matches the media query list, or false if not.">MediaQueryList/matches</a> In all current engines. <div class="support"> Firefox6+Safari5.1+Chrome9+ <hr> Opera12.1+Edge79+ <hr> Edge (Legacy)12+IE10+ <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView37+Samsung Internet?Opera Mobile12.1+ </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="dom-mediaquerylist-media"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/media" title="The media read-only property of the MediaQueryList interface is a string representing a serialized media query.">MediaQueryList/media</a> In all current engines. <div class="support"> Firefox6+Safari5.1+Chrome9+ <hr> Opera12.1+Edge79+ <hr> Edge (Legacy)12+IE10+ <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView37+Samsung Internet?Opera Mobile12.1+ </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="the-mediaquerylist-interface"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList" title="A MediaQueryList object stores information on a media query applied to a document, with support for both immediate and event-driven matching against the state of the document.">MediaQueryList</a> In all current engines. <div class="support"> Firefox6+Safari5.1+Chrome9+ <hr> Opera12.1+Edge79+ <hr> Edge (Legacy)12+IE10+ <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView37+Samsung Internet?Opera Mobile12.1+ </div> </div> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryListEvent" title="The MediaQueryListEvent object stores information on the changes that have happened to a MediaQueryList object — instances are available as the event object on a function referenced by a change event.">MediaQueryListEvent</a> In all current engines. <div class="support"> Firefox55+Safari14+Chrome39+ <hr> Opera?Edge79+ <hr> Edge (Legacy)?IENone <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile? </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="dom-mediaquerylistevent-mediaquerylistevent"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryListEvent/MediaQueryListEvent" title="The MediaQueryListEvent() constructor creates a new MediaQueryListEvent object.">MediaQueryListEvent/MediaQueryListEvent</a> In all current engines. <div class="support"> Firefox55+Safari14+Chrome39+ <hr> Opera?Edge79+ <hr> Edge (Legacy)?IENone <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile? </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="dom-mediaquerylistevent-matches"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryListEvent/matches" title="The matches read-only property of the MediaQueryListEvent interface is a boolean value that is true if the document currently matches the media query list, or false if not.">MediaQueryListEvent/matches</a> In all current engines. <div class="support"> Firefox55+Safari14+Chrome39+ <hr> Opera?Edge79+ <hr> Edge (Legacy)?IENone <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile? </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="dom-mediaquerylistevent-media"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryListEvent/media" title="The media read-only property of the MediaQueryListEvent interface is a string representing a serialized media query.">MediaQueryListEvent/media</a> In all current engines. <div class="support"> Firefox55+Safari14+Chrome39+ <hr> Opera?Edge79+ <hr> Edge (Legacy)?IENone <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile? </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="dom-mouseevent-offsetx"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/offsetX" title="The offsetX read-only property of the MouseEvent interface provides the offset in the X coordinate of the mouse pointer between that event and the padding edge of the target node.">MouseEvent/offsetX</a> In all current engines. <div class="support"> Firefox39+Safari1+Chrome1+ <hr> Opera12.1+Edge79+ <hr> Edge (Legacy)12+IE9+ <hr> Firefox for Android43+iOS Safari?Chrome for Android?Android WebView37+Samsung Internet?Opera Mobile12.1+ </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="dom-mouseevent-offsety"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/offsetY" title="The offsetY read-only property of the MouseEvent interface provides the offset in the Y coordinate of the mouse pointer between that event and the padding edge of the target node.">MouseEvent/offsetY</a> In all current engines. <div class="support"> Firefox39+Safari1+Chrome1+ <hr> Opera12.1+Edge79+ <hr> Edge (Legacy)12+IE9+ <hr> Firefox for Android43+iOS Safari?Chrome for Android?Android WebView37+Samsung Internet?Opera Mobile12.1+ </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="dom-mouseevent-pagex"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/pageX" title="The pageX read-only property of the MouseEvent interface returns the X (horizontal) coordinate (in pixels) at which the mouse was clicked, relative to the left edge of the entire document. This includes any portion of the document not currently visible.">MouseEvent/pageX</a> In all current engines. <div class="support"> Firefox1.5+Safari1+Chrome1+ <hr> Opera12.1+Edge79+ <hr> Edge (Legacy)12+IE9+ <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView37+Samsung Internet?Opera Mobile12.1+ </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="dom-mouseevent-pagey"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/pageY" title="The pageY read-only property of the MouseEvent interface returns the Y (vertical) coordinate in pixels of the event relative to the whole document. This property takes into account any vertical scrolling of the page.">MouseEvent/pageY</a> In all current engines. <div class="support"> Firefox1.5+Safari1+Chrome1+ <hr> Opera12.1+Edge79+ <hr> Edge (Legacy)12+IE9+ <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView37+Samsung Internet?Opera Mobile12.1+ </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="dom-mouseevent-x"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/x" title="The MouseEvent.x property is an alias for the MouseEvent.clientX property.">MouseEvent/x</a> In all current engines. <div class="support"> Firefox53+Safari3.1+Chrome1+ <hr> Opera12.1+Edge79+ <hr> Edge (Legacy)12+IE9+ <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView37+Samsung Internet?Opera Mobile12.1+ </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="dom-mouseevent-y"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/y" title="The MouseEvent.y property is an alias for the MouseEvent.clientY property.">MouseEvent/y</a> In all current engines. <div class="support"> Firefox53+Safari3.1+Chrome1+ <hr> Opera12.1+Edge79+ <hr> Edge (Legacy)12+IE9+ <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView37+Samsung Internet?Opera Mobile12.1+ </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="extensions-to-the-mouseevent-interface"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent" title="The MouseEvent interface represents events that occur due to the user interacting with a pointing device (such as a mouse). Common events using this interface include click, dblclick, mouseup, mousedown.">MouseEvent</a> In all current engines. <div class="support"> Firefox1+Safari1+Chrome1+ <hr> Opera10.6+Edge79+ <hr> Edge (Legacy)12+IE9+ <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile11+ </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="dom-range-getboundingclientrect"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/API/Range/getBoundingClientRect" title="The Range.getBoundingClientRect() method returns a DOMRect object that bounds the contents of the range; this is a rectangle enclosing the union of the bounding rectangles for all the elements in the range.">Range/getBoundingClientRect</a> In all current engines. <div class="support"> Firefox4+Safari5+Chrome4+ <hr> Opera12.1+Edge79+ <hr> Edge (Legacy)12+IE9+ <hr> Firefox for Android?iOS Safari4+Chrome for Android?Android WebView37+Samsung Internet?Opera Mobile12.1+ </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="dom-range-getclientrects"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/API/Range/getClientRects" title="The Range.getClientRects() method returns a list of DOMRect objects representing the area of the screen occupied by the range. This is created by aggregating the results of calls to Element.getClientRects() for all the elements in the range.">Range/getClientRects</a> In all current engines. <div class="support"> Firefox4+Safari5+Chrome4+ <hr> Opera12.1+Edge79+ <hr> Edge (Legacy)12+IE9+ <hr> Firefox for Android?iOS Safari4+Chrome for Android?Android WebView37+Samsung Internet?Opera Mobile12.1+ </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="extensions-to-the-range-interface"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/API/Range" title="The Range interface represents a fragment of a document that can contain nodes and parts of text nodes.">Range</a> In all current engines. <div class="support"> Firefox1+Safari1+Chrome1+ <hr> Opera9+Edge79+ <hr> Edge (Legacy)12+IE9+ <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile10.1+ </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="dom-screen-availheight"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/API/Screen/availHeight" title="The read-only Screen interface's availHeight property returns the height, in CSS pixels, of the space available for Web content on the screen. Since Screen is exposed on the Window interface's window.screen property, you access availHeight using window.screen.availHeight.">Screen/availHeight</a> In all current engines. <div class="support"> Firefox1+Safari1+Chrome1+ <hr> Opera12.1+Edge79+ <hr> Edge (Legacy)12+IE4+ <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile12.1+ </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="dom-screen-availwidth"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/API/Screen/availWidth" title="The Screen.availWidth property returns the amount of horizontal space (in pixels) available to the window.">Screen/availWidth</a> In all current engines. <div class="support"> Firefox1+Safari1+Chrome1+ <hr> Opera12.1+Edge79+ <hr> Edge (Legacy)12+IE4+ <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile12.1+ </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="dom-screen-colordepth"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/API/Screen/colorDepth" title="The Screen.colorDepth read-only property returns the color depth of the screen. Per the CSSOM, some implementations return 24 for compatibility reasons. See the browser compatibility section for those that don't.">Screen/colorDepth</a> In all current engines. <div class="support"> Firefox1+Safari1+Chrome1+ <hr> Opera12.1+Edge79+ <hr> Edge (Legacy)12+IE4+ <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet1.0+Opera Mobile12.1+ </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="dom-screen-height"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/API/Screen/height" title="The Screen.height read-only property returns the height of the screen in pixels.">Screen/height</a> In all current engines. <div class="support"> Firefox1+Safari1+Chrome1+ <hr> Opera12.1+Edge79+ <hr> Edge (Legacy)12+IE4+ <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile12.1+ </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="dom-screen-pixeldepth"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/API/Screen/pixelDepth" title="Returns the bit depth of the screen. Per the CSSOM, some implementations return 24 for compatibility reasons. See the browser compatibility section for those that don't.">Screen/pixelDepth</a> In all current engines. <div class="support"> Firefox1+Safari1+Chrome1+ <hr> Opera12.1+Edge79+ <hr> Edge (Legacy)12+IE9+ <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet1.0+Opera Mobile12.1+ </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="dom-screen-width"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/API/Screen/width" title="The Screen.width read-only property returns the width of the screen in CSS pixels.">Screen/width</a> In all current engines. <div class="support"> Firefox1+Safari1+Chrome1+ <hr> Opera12.1+Edge79+ <hr> Edge (Legacy)12+IE4+ <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile12.1+ </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="the-screen-interface"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/API/Screen" title="The Screen interface represents a screen, usually the one on which the current window is being rendered, and is obtained using window.screen.">Screen</a> In all current engines. <div class="support"> Firefox1+Safari1+Chrome1+ <hr> Opera12.1+Edge79+ <hr> Edge (Legacy)12+IE4+ <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile12.1+ </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="dom-visualviewport-height"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/API/VisualViewport/height" title="The height read-only property of the VisualViewport interface returns the height of the visual viewport, in CSS pixels.">VisualViewport/height</a> In all current engines. <div class="support"> Firefox91+Safari13+Chrome61+ <hr> Opera?Edge79+ <hr> Edge (Legacy)?IENone <hr> Firefox for Android68+iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile? </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="dom-visualviewport-offsetleft"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/API/VisualViewport/offsetLeft" title="The offsetLeft read-only property of the VisualViewport interface returns the offset of the left edge of the visual viewport from the left edge of the layout viewport in CSS pixels.">VisualViewport/offsetLeft</a> In all current engines. <div class="support"> Firefox91+Safari13+Chrome61+ <hr> Opera?Edge79+ <hr> Edge (Legacy)?IENone <hr> Firefox for Android68+iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile? </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="dom-visualviewport-offsettop"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/API/VisualViewport/offsetTop" title="The offsetTop read-only property of the VisualViewport interface returns the offset of the top edge of the visual viewport from the top edge of the layout viewport in CSS pixels.">VisualViewport/offsetTop</a> In all current engines. <div class="support"> Firefox91+Safari13+Chrome61+ <hr> Opera?Edge79+ <hr> Edge (Legacy)?IENone <hr> Firefox for Android68+iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile? </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="dom-visualviewport-pageleft"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/API/VisualViewport/pageLeft" title="The pageLeft read-only property of the VisualViewport interface returns the x coordinate of the left edge of the visual viewport relative to the initial containing block origin, in CSS pixels.">VisualViewport/pageLeft</a> In all current engines. <div class="support"> Firefox91+Safari13+Chrome61+ <hr> Opera?Edge79+ <hr> Edge (Legacy)?IENone <hr> Firefox for Android68+iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile? </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="dom-visualviewport-pagetop"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/API/VisualViewport/pageTop" title="The pageTop read-only property of the VisualViewport interface returns the y coordinate of the top edge of the visual viewport relative to the initial containing block origin, in CSS pixels.">VisualViewport/pageTop</a> In all current engines. <div class="support"> Firefox91+Safari13+Chrome61+ <hr> Opera?Edge79+ <hr> Edge (Legacy)?IENone <hr> Firefox for Android68+iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile? </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="eventdef-window-resize"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/API/VisualViewport/resize_event" title="The resize event of the VisualViewport interface is fired when the visual viewport is resized.">VisualViewport/resize_event</a> In all current engines. <div class="support"> Firefox91+Safari13+Chrome62+ <hr> Opera?Edge79+ <hr> Edge (Legacy)NoneIENone <hr> Firefox for Android68+iOS Safari?Chrome for Android?Android WebView?Samsung Internet8.0+Opera Mobile? </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="dom-visualviewport-scale"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/API/VisualViewport/scale" title="The scale read-only property of the VisualViewport interface returns the pinch-zoom scaling factor applied to the visual viewport.">VisualViewport/scale</a> In all current engines. <div class="support"> Firefox91+Safari13+Chrome61+ <hr> Opera?Edge79+ <hr> Edge (Legacy)?IENone <hr> Firefox for Android68+iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile? </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="dom-visualviewport-width"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/API/VisualViewport/width" title="The width read-only property of the VisualViewport interface returns the width of the visual viewport, in CSS pixels.">VisualViewport/width</a> In all current engines. <div class="support"> Firefox91+Safari13+Chrome61+ <hr> Opera?Edge79+ <hr> Edge (Legacy)?IENone <hr> Firefox for Android68+iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile? </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="the-visualviewport-interface"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/API/VisualViewport" title="The VisualViewport interface of the Visual Viewport API represents the visual viewport for a given window. For a page containing iframes, each iframe, as well as the containing page, will have a unique window object. Each window on a page will have a unique VisualViewport representing the properties associated with that window.">VisualViewport</a> In all current engines. <div class="support"> Firefox91+Safari13+Chrome61+ <hr> Opera?Edge79+ <hr> Edge (Legacy)?IENone <hr> Firefox for Android68+iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile? </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="dom-window-devicepixelratio"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio" title="The devicePixelRatio of Window interface returns the ratio of the resolution in physical pixels to the resolution in CSS pixels for the current display device.">Window/devicePixelRatio</a> In all current engines. <div class="support"> Firefox18+Safari3+Chrome1+ <hr> Opera11.1+Edge79+ <hr> Edge (Legacy)12+IE11 <hr> Firefox for Android?iOS Safari1+Chrome for Android?Android WebView?Samsung Internet?Opera Mobile11.1+ </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="dom-window-innerheight"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/innerHeight" title="The read-only innerHeight property of the Window interface returns the interior height of the window in pixels, including the height of the horizontal scroll bar, if present.">Window/innerHeight</a> In all current engines. <div class="support"> Firefox1+Safari3+Chrome1+ <hr> Opera9+Edge79+ <hr> Edge (Legacy)12+IE9+ <hr> Firefox for Android4+iOS Safari1+Chrome for Android?Android WebView?Samsung Internet?Opera Mobile10.1+ </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="dom-window-innerwidth"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/innerWidth" title="The read-only Window property innerWidth returns the interior width of the window in pixels. This includes the width of the vertical scroll bar, if one is present.">Window/innerWidth</a> In all current engines. <div class="support"> Firefox1+Safari3+Chrome1+ <hr> Opera9+Edge79+ <hr> Edge (Legacy)12+IE9+ <hr> Firefox for Android4+iOS Safari1+Chrome for Android?Android WebView?Samsung Internet?Opera Mobile10.1+ </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="dom-window-matchmedia"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia" title="The Window interface's matchMedia() method returns a new MediaQueryList object that can then be used to determine if the document matches the media query string, as well as to monitor the document to detect when it matches (or stops matching) that media query.">Window/matchMedia</a> In all current engines. <div class="support"> Firefox6+Safari5.1+Chrome9+ <hr> Opera12.1+Edge79+ <hr> Edge (Legacy)12+IE10+ <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView3+Samsung Internet?Opera Mobile12.1+ </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="dom-window-moveby"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/moveBy" title="The moveBy() method of the Window interface moves the current window by a specified amount.">Window/moveBy</a> In all current engines. <div class="support"> Firefox1+Safari1+Chrome1+ <hr> Opera12.1+Edge79+ <hr> Edge (Legacy)12+IE4+ <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile12.1+ </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="dom-window-moveto"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/moveTo" title="The moveTo() method of the Window interface moves the current window to the specified coordinates.">Window/moveTo</a> In all current engines. <div class="support"> Firefox1+Safari1+Chrome1+ <hr> Opera12.1+Edge79+ <hr> Edge (Legacy)12+IE4+ <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile12.1+ </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="the-features-argument-to-the-open()-method"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/open" title="The open() method of the Window interface loads a specified resource into a new or existing browsing context (that is, a tab, a window, or an iframe) under a specified name.">Window/open</a> In all current engines. <div class="support"> Firefox1+Safari1+Chrome1+ <hr> Opera3+Edge79+ <hr> Edge (Legacy)12+IE4+ <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile10.1+ </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="dom-window-outerheight"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/outerHeight" title="The Window.outerHeight read-only property returns the height in pixels of the whole browser window, including any sidebar, window chrome, and window-resizing borders/handles.">Window/outerHeight</a> In all current engines. <div class="support"> Firefox1+Safari3+Chrome1+ <hr> Opera9+Edge79+ <hr> Edge (Legacy)12+IE9+ <hr> Firefox for Android?iOS Safari3+Chrome for Android?Android WebView?Samsung Internet?Opera Mobile10.1+ </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="dom-window-outerwidth"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/outerWidth" title="Window.outerWidth read-only property returns the width of the outside of the browser window. It represents the width of the whole browser window including sidebar (if expanded), window chrome and window resizing borders/handles.">Window/outerWidth</a> In all current engines. <div class="support"> Firefox1+Safari3+Chrome1+ <hr> Opera9+Edge79+ <hr> Edge (Legacy)12+IE9+ <hr> Firefox for Android?iOS Safari3+Chrome for Android?Android WebView?Samsung Internet?Opera Mobile10.1+ </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="dom-window-pagexoffset"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/pageXOffset" title="The read-only Window property pageXOffset is an alias for scrollX.">Window/pageXOffset</a> In all current engines. <div class="support"> Firefox1+Safari1+Chrome1+ <hr> Opera3+Edge79+ <hr> Edge (Legacy)12+IE9+ <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile10.1+ </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="dom-window-pageyoffset"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/pageYOffset" title="The read-only Window property pageYOffset is an alias for scrollY; as such, it returns the number of pixels the document is currently scrolled along the vertical axis (that is, up or down) with a value of 0.0, indicating that the top edge of the Document is currently aligned with the top edge of the window's content area.">Window/pageYOffset</a> In all current engines. <div class="support"> Firefox1+Safari1+Chrome1+ <hr> Opera3+Edge79+ <hr> Edge (Legacy)12+IE9+ <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile10.1+ </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="resizing-viewports"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/resize_event" title="The resize event fires when the document view (window) has been resized.">Window/resize_event</a> In all current engines. <div class="support"> Firefox1+Safari1.1+Chrome1+ <hr> Opera7+Edge79+ <hr> Edge (Legacy)12+IE4+ <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView1+Samsung Internet?Opera Mobile10.1+ </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="dom-window-resizeby"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/resizeBy" title="The Window.resizeBy() method resizes the current window by a specified amount.">Window/resizeBy</a> In all current engines. <div class="support"> Firefox1+Safari1+Chrome1+ <hr> Opera12.1+Edge79+ <hr> Edge (Legacy)12+IE4+ <hr> Firefox for Android4+iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile12.1+ </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="dom-window-resizeto"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/resizeTo" title="The Window.resizeTo() method dynamically resizes the window.">Window/resizeTo</a> In all current engines. <div class="support"> Firefox1+Safari1+Chrome1+ <hr> Opera12.1+Edge79+ <hr> Edge (Legacy)12+IE4+ <hr> Firefox for Android4+iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile12.1+ </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="dom-window-screen"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/screen" title="The Window property screen returns a reference to the screen object associated with the window. The screen object, implementing the Screen interface, is a special object for inspecting properties of the screen on which the current window is being rendered.">Window/screen</a> In all current engines. <div class="support"> Firefox1+Safari1+Chrome1+ <hr> Opera12.1+Edge79+ <hr> Edge (Legacy)12+IE4+ <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile12.1+ </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="dom-window-screenleft"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/screenLeft" title="The Window.screenLeft read-only property returns the horizontal distance, in CSS pixels, from the left border of the user's browser viewport to the left side of the screen.">Window/screenLeft</a> In all current engines. <div class="support"> Firefox64+Safari1+Chrome1+ <hr> Opera12.1+Edge79+ <hr> Edge (Legacy)12+IE5+ <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile12.1+ </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="dom-window-screentop"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/screenTop" title="The Window.screenTop read-only property returns the vertical distance, in CSS pixels, from the top border of the user's browser viewport to the top side of the screen.">Window/screenTop</a> In all current engines. <div class="support"> Firefox64+Safari1+Chrome1+ <hr> Opera12.1+Edge79+ <hr> Edge (Legacy)12+IE5+ <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile12.1+ </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="dom-window-screenx"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/screenX" title="The Window.screenX read-only property returns the horizontal distance, in CSS pixels, of the left border of the user's browser viewport to the left side of the screen.">Window/screenX</a> In all current engines. <div class="support"> Firefox1+Safari1+Chrome1+ <hr> Opera12.1+Edge79+ <hr> Edge (Legacy)12+IE9+ <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile12.1+ </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="dom-window-screeny"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/screenY" title="The Window.screenY read-only property returns the vertical distance, in CSS pixels, of the top border of the user's browser viewport to the top edge of the screen.">Window/screenY</a> In all current engines. <div class="support"> Firefox1+Safari1+Chrome1+ <hr> Opera12.1+Edge79+ <hr> Edge (Legacy)12+IE9+ <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile12.1+ </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="dom-window-scroll"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/scroll" title="The Window.scroll() method scrolls the window to a particular place in the document.">Window/scroll</a> In all current engines. <div class="support"> Firefox1+Safari1+Chrome1+ <hr> Opera3+Edge79+ <hr> Edge (Legacy)12+IE4+ <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile10.1+ </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="dom-window-scrollby"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollBy" title="The Window.scrollBy() method scrolls the document in the window by the given amount.">Window/scrollBy</a> In all current engines. <div class="support"> Firefox1+Safari1+Chrome1+ <hr> Opera3+Edge79+ <hr> Edge (Legacy)12+IE11 <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile10.1+ </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="dom-window-scrollto"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo" title="Window.scrollTo() scrolls to a particular set of coordinates in the document.">Window/scrollTo</a> In all current engines. <div class="support"> Firefox1+Safari1+Chrome1+ <hr> Opera4+Edge79+ <hr> Edge (Legacy)12+IE4+ <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile10.1+ </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="dom-window-scrollx"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollX" title="The read-only scrollX property of the Window interface returns the number of pixels that the document is currently scrolled horizontally. This value is subpixel precise in modern browsers, meaning that it isn't necessarily a whole number. You can get the number of pixels the document is scrolled vertically from the scrollY property.">Window/scrollX</a> In all current engines. <div class="support"> Firefox1+Safari1+Chrome1+ <hr> Opera9.6+Edge79+ <hr> Edge (Legacy)12+IENone <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile10.1+ </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="dom-window-scrolly"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollY" title="The read-only scrollY property of the Window interface returns the number of pixels that the document is currently scrolled vertically.">Window/scrollY</a> In all current engines. <div class="support"> Firefox1+Safari1+Chrome1+ <hr> Opera9.6+Edge79+ <hr> Edge (Legacy)12+IENone <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile10.1+ </div> </div> </details> <details class="mdn-anno unpositioned" data-anno-for="dom-window-visualviewport"> <summary>✔MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/visualViewport" title="The visualViewport read-only property of the Window interface returns a VisualViewport object representing the visual viewport for a given window.">Window/visualViewport</a> In all current engines. <div class="support"> Firefox91+Safari13+Chrome61+ <hr> Opera?Edge79+ <hr> Edge (Legacy)?IENone <hr> Firefox for Android68+iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile? </div> </div> </details> <details class="caniuse-status unpositioned" data-anno-for="dom-window-matchmedia" data-deco> <summary>CanIUse</summary> Support:Android Browser3+Baidu Browser13.52+Blackberry Browser10+Chrome9+Chrome for Android132+Edge12+Firefox6+Firefox for Android132+IE10+IE Mobile10+KaiOS Browser2.5+Opera12.1+Opera MiniAllOpera Mobile12.1+QQ Browser14.9+Safari5.1+Safari on iOS5.0+Samsung Internet4+UC Browser for Android15.5+ Source: <a href="https://caniuse.com/#feat=matchmedia">caniuse.com</a> as of 2025-02-16 </details> <details class="caniuse-status unpositioned" data-anno-for="dom-window-devicepixelratio" data-deco> <summary>CanIUse</summary> Support:Android Browser2.1+Baidu Browser13.52+Blackberry Browser7+Chrome4+Chrome for Android132+Edge12+Firefox18+Firefox for Android132+IE11+IE Mobile11+KaiOS Browser2.5+Opera11.6+Opera MiniAllOpera Mobile12+QQ Browser14.9+Safari3.1+Safari on iOS3.2+Samsung Internet4+UC Browser for Android15.5+ Source: <a href="https://caniuse.com/#feat=devicepixelratio">caniuse.com</a> as of 2025-02-16 </details> <details class="caniuse-status unpositioned" data-anno-for="dom-document-elementfrompoint" data-deco> <summary>CanIUse</summary> Support:Android Browser2.3+Baidu Browser13.52+Blackberry Browser7+Chrome15+Chrome for Android132+Edge12+Firefox3+Firefox for Android132+IE6+IE Mobile10+KaiOS Browser2.5+Opera11+Opera MiniAllOpera Mobile12+QQ Browser14.9+Safari5+Safari on iOS4.0+Samsung Internet4+UC Browser for Android15.5+ Source: <a href="https://caniuse.com/#feat=element-from-point">caniuse.com</a> as of 2025-02-16 </details> <details class="caniuse-status unpositioned" data-anno-for="dom-document-scrollingelement" data-deco> <summary>CanIUse</summary> Support:Android Browser132+Baidu Browser13.52+Blackberry BrowserNoneChrome44+Chrome for Android132+Edge14+Firefox48+Firefox for Android132+IENoneIE MobileNoneKaiOS Browser2.5+Opera31+Opera MiniNoneOpera Mobile80+QQ Browser14.9+Safari9+Safari on iOS9.0+Samsung Internet4+UC Browser for Android15.5+ Source: <a href="https://caniuse.com/#feat=document-scrollingelement">caniuse.com</a> as of 2025-02-16 </details> <details class="caniuse-status unpositioned" data-anno-for="extension-to-the-element-interface" data-deco> <summary>CanIUse</summary> Support:Android Browser132+Baidu Browser13.52+Blackberry BrowserNoneChrome61+Chrome for Android132+Edge79+Firefox36+Firefox for Android132+IENoneIE MobileNoneKaiOS Browser2.5+Opera48+Opera MiniNoneOpera Mobile80+QQ Browser14.9+Safari14+Safari on iOS14.5+Samsung Internet8.2+UC Browser for Android15.5+ Source: <a href="https://caniuse.com/#feat=element-scroll-methods">caniuse.com</a> as of 2025-02-16 </details> <details class="caniuse-status unpositioned" data-anno-for="dom-element-getboundingclientrect" data-deco> <summary>CanIUse</summary> Support:Android Browser2.3+Baidu Browser13.52+Blackberry Browser7+Chrome4+Chrome for Android132+Edge12+Firefox12+Firefox for Android132+IE9+IE Mobile10+KaiOS Browser2.5+Opera10.6+Opera MiniAllOpera Mobile11+QQ Browser14.9+Safari4+Safari on iOS4.0+Samsung Internet4+UC Browser for Android15.5+ Source: <a href="https://caniuse.com/#feat=getboundingclientrect">caniuse.com</a> as of 2025-02-16 </details> <details class="caniuse-status unpositioned" data-anno-for="dom-element-scrollintoview" data-deco> <summary>CanIUse</summary> Support:Android Browser132+Baidu Browser13.52+Blackberry Browser (limited)7+Chrome61+Chrome for Android132+Edge79+Firefox36+Firefox for Android132+IE (limited)8+IE Mobile (limited)10+KaiOS Browser2.5+Opera48+Opera MiniNoneOpera Mobile80+QQ Browser14.9+Safari16.0+Safari on iOS16.0+Samsung Internet8.2+UC Browser for Android15.5+ Source: <a href="https://caniuse.com/#feat=scrollintoview">caniuse.com</a> as of 2025-02-16 </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 = { "01d5a451": {"dfnID":"01d5a451","dfnText":"Replaceable","external":true,"refSections":[{"refs":[{"id":"ref-for-Replaceable"},{"id":"ref-for-Replaceable\u2460"},{"id":"ref-for-Replaceable\u2461"},{"id":"ref-for-Replaceable\u2462"},{"id":"ref-for-Replaceable\u2463"},{"id":"ref-for-Replaceable\u2464"},{"id":"ref-for-Replaceable\u2465"},{"id":"ref-for-Replaceable\u2466"},{"id":"ref-for-Replaceable\u2467"},{"id":"ref-for-Replaceable\u2468"},{"id":"ref-for-Replaceable\u2460\u24ea"},{"id":"ref-for-Replaceable\u2460\u2460"},{"id":"ref-for-Replaceable\u2460\u2461"},{"id":"ref-for-Replaceable\u2460\u2462"},{"id":"ref-for-Replaceable\u2460\u2463"}],"title":"4. Extensions to the Window Interface"}],"url":"https://webidl.spec.whatwg.org/#Replaceable"}, "02d764d2": {"dfnID":"02d764d2","dfnText":"table-column","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-display-table-column"}],"title":"2. Terminology"}],"url":"https://drafts.csswg.org/css-display-4/#valdef-display-table-column"}, "03675365": {"dfnID":"03675365","dfnText":"event handler IDL attribute","external":true,"refSections":[{"refs":[{"id":"ref-for-event-handler-idl-attributes"}],"title":"4.2. The MediaQueryList Interface"},{"refs":[{"id":"ref-for-event-handler-idl-attributes\u2460"},{"id":"ref-for-event-handler-idl-attributes\u2461"},{"id":"ref-for-event-handler-idl-attributes\u2462"}],"title":"12.1. The VisualViewport Interface"}],"url":"https://html.spec.whatwg.org/multipage/webappapis.html#event-handler-idl-attributes"}, "06950d36": {"dfnID":"06950d36","dfnText":"event listener","external":true,"refSections":[{"refs":[{"id":"ref-for-concept-event-listener"},{"id":"ref-for-concept-event-listener\u2460"},{"id":"ref-for-concept-event-listener\u2461"}],"title":"4.2. The MediaQueryList Interface"}],"url":"https://dom.spec.whatwg.org/#concept-event-listener"}, "071eb852": {"dfnID":"071eb852","dfnText":"type","external":true,"refSections":[{"refs":[{"id":"ref-for-event-listener-type"},{"id":"ref-for-event-listener-type\u2460"}],"title":"4.2. The MediaQueryList Interface"}],"url":"https://dom.spec.whatwg.org/#event-listener-type"}, "092f2e0b": {"dfnID":"092f2e0b","dfnText":"dispatch flag","external":true,"refSections":[{"refs":[{"id":"ref-for-dispatch-flag"},{"id":"ref-for-dispatch-flag\u2460"},{"id":"ref-for-dispatch-flag\u2461"},{"id":"ref-for-dispatch-flag\u2462"}],"title":"10. Extensions to the MouseEvent Interface"}],"url":"https://dom.spec.whatwg.org/#dispatch-flag"}, "0979c53e": {"dfnID":"0979c53e","dfnText":"scroll-snap-type","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-scroll-snap-type"}],"title":"6.1. Element Scrolling Members"}],"url":"https://drafts.csswg.org/css-scroll-snap-1/#propdef-scroll-snap-type"}, "0e3ba9f8": {"dfnID":"0e3ba9f8","dfnText":"fully active","external":true,"refSections":[{"refs":[{"id":"ref-for-fully-active"}],"title":"4. Extensions to the Window Interface"},{"refs":[{"id":"ref-for-fully-active\u2460"},{"id":"ref-for-fully-active\u2461"},{"id":"ref-for-fully-active\u2462"},{"id":"ref-for-fully-active\u2463"},{"id":"ref-for-fully-active\u2464"},{"id":"ref-for-fully-active\u2465"},{"id":"ref-for-fully-active\u2466"}],"title":"12.1. The VisualViewport Interface"}],"url":"https://html.spec.whatwg.org/multipage/document-sequences.html#fully-active"}, "0e8de730": {"dfnID":"0e8de730","dfnText":"tuple","external":true,"refSections":[{"refs":[{"id":"ref-for-tuple"}],"title":"5. Extensions to the Document Interface"}],"url":"https://infra.spec.whatwg.org/#tuple"}, "0ef1eda5": {"dfnID":"0ef1eda5","dfnText":"classic scrollbars","external":true,"refSections":[{"refs":[{"id":"ref-for-classic-scrollbars"},{"id":"ref-for-classic-scrollbars\u2460"}],"title":"12.1. The VisualViewport Interface"}],"url":"https://drafts.csswg.org/css-overflow-3/#classic-scrollbars"}, "11e0b87f": {"dfnID":"11e0b87f","dfnText":"unrestricted double","external":true,"refSections":[{"refs":[{"id":"ref-for-idl-unrestricted-double"},{"id":"ref-for-idl-unrestricted-double\u2460"},{"id":"ref-for-idl-unrestricted-double\u2461"},{"id":"ref-for-idl-unrestricted-double\u2462"},{"id":"ref-for-idl-unrestricted-double\u2463"},{"id":"ref-for-idl-unrestricted-double\u2464"},{"id":"ref-for-idl-unrestricted-double\u2465"},{"id":"ref-for-idl-unrestricted-double\u2466"}],"title":"4. Extensions to the Window Interface"},{"refs":[{"id":"ref-for-idl-unrestricted-double\u2467"},{"id":"ref-for-idl-unrestricted-double\u2468"},{"id":"ref-for-idl-unrestricted-double\u2460\u24ea"},{"id":"ref-for-idl-unrestricted-double\u2460\u2460"},{"id":"ref-for-idl-unrestricted-double\u2460\u2461"},{"id":"ref-for-idl-unrestricted-double\u2460\u2462"},{"id":"ref-for-idl-unrestricted-double\u2460\u2463"},{"id":"ref-for-idl-unrestricted-double\u2460\u2464"}],"title":"6. \nExtensions to the Element Interface"}],"url":"https://webidl.spec.whatwg.org/#idl-unrestricted-double"}, "1243a891": {"dfnID":"1243a891","dfnText":"exist","external":true,"refSections":[{"refs":[{"id":"ref-for-map-exists"},{"id":"ref-for-map-exists\u2460"},{"id":"ref-for-map-exists\u2461"},{"id":"ref-for-map-exists\u2462"}],"title":"4.1. The features argument to the open() method"}],"url":"https://infra.spec.whatwg.org/#map-exists"}, "129bdae8": {"dfnID":"129bdae8","dfnText":"Event","external":true,"refSections":[{"refs":[{"id":"ref-for-event"}],"title":"4.2. The MediaQueryList Interface"},{"refs":[{"id":"ref-for-event\u2460"},{"id":"ref-for-event\u2461"},{"id":"ref-for-event\u2462"}],"title":"13.3. Event summary"}],"url":"https://dom.spec.whatwg.org/#event"}, "162c95fc": {"dfnID":"162c95fc","dfnText":"dispatch pending scrollsnapchanging events","external":true,"refSections":[{"refs":[{"id":"ref-for-document-dispatch-pending-scrollsnapchanging-events"}],"title":"13.2. Scrolling"}],"url":"https://drafts.csswg.org/css-scroll-snap-2/#document-dispatch-pending-scrollsnapchanging-events"}, "1b08e188": {"dfnID":"1b08e188","dfnText":"scroll-behavior","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-scroll-behavior"},{"id":"ref-for-propdef-scroll-behavior\u2460"}],"title":"3.1. Scrolling"},{"refs":[{"id":"ref-for-propdef-scroll-behavior\u2461"}],"title":"Changes From 19 October 2020"},{"refs":[{"id":"ref-for-propdef-scroll-behavior\u2462"}],"title":"Changes From 17 December 2013 To 31 January 2020"},{"refs":[{"id":"ref-for-propdef-scroll-behavior\u2463"}],"title":"Changes From 4 August 2011 To 17 December 2013"}],"url":"https://drafts.csswg.org/css-overflow-3/#propdef-scroll-behavior"}, "1cd7ff31": {"dfnID":"1cd7ff31","dfnText":"ShadowRoot","external":true,"refSections":[{"refs":[{"id":"ref-for-shadowroot"}],"title":"5. Extensions to the Document Interface"}],"url":"https://dom.spec.whatwg.org/#shadowroot"}, "1ed80ce4": {"dfnID":"1ed80ce4","dfnText":"content-distribution properties","external":true,"refSections":[{"refs":[{"id":"ref-for-content-distribution-properties"}],"title":"2. Terminology"}],"url":"https://drafts.csswg.org/css-align-3/#content-distribution-properties"}, "1f1acc70": {"dfnID":"1f1acc70","dfnText":"DOMQuadInit","external":true,"refSections":[{"refs":[{"id":"ref-for-dictdef-domquadinit"}],"title":"11.1. The GeometryUtils Interface"}],"url":"https://drafts.fxtf.org/geometry-1/#dictdef-domquadinit"}, "201c3eff": {"dfnID":"201c3eff","dfnText":"removeEventListener(type, callback)","external":true,"refSections":[{"refs":[{"id":"ref-for-dom-eventtarget-removeeventlistener"}],"title":"4.2. The MediaQueryList Interface"}],"url":"https://dom.spec.whatwg.org/#dom-eventtarget-removeeventlistener"}, "203b148b": {"dfnID":"203b148b","dfnText":"end offset","external":true,"refSections":[{"refs":[{"id":"ref-for-concept-range-end-offset"}],"title":"5.1. The CaretPosition Interface"}],"url":"https://dom.spec.whatwg.org/#concept-range-end-offset"}, "22109b0e": {"dfnID":"22109b0e","dfnText":"flat tree","external":true,"refSections":[{"refs":[{"id":"ref-for-flat-tree"},{"id":"ref-for-flat-tree\u2460"},{"id":"ref-for-flat-tree\u2461"}],"title":"6. \nExtensions to the Element Interface"},{"refs":[{"id":"ref-for-flat-tree\u2462"},{"id":"ref-for-flat-tree\u2463"},{"id":"ref-for-flat-tree\u2464"}],"title":"7. Extensions to the HTMLElement Interface"}],"url":"https://drafts.csswg.org/css-scoping-1/#flat-tree"}, "2306aaa1": {"dfnID":"2306aaa1","dfnText":"content-visibility","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-content-visibility"},{"id":"ref-for-propdef-content-visibility\u2460"}],"title":"6. \nExtensions to the Element Interface"}],"url":"https://drafts.csswg.org/css-contain-2/#propdef-content-visibility"}, "237b3136": {"dfnID":"237b3136","dfnText":"typographic character unit","external":true,"refSections":[{"refs":[{"id":"ref-for-typographic-character-unit"},{"id":"ref-for-typographic-character-unit\u2460"}],"title":"9. Extensions to the Range Interface"}],"url":"https://drafts.csswg.org/css-text-4/#typographic-character-unit"}, "2490cb61": {"dfnID":"2490cb61","dfnText":"dispatch pending scrollsnapchange events","external":true,"refSections":[{"refs":[{"id":"ref-for-document-dispatch-pending-scrollsnapchange-events"}],"title":"13.2. Scrolling"}],"url":"https://drafts.csswg.org/css-scroll-snap-2/#document-dispatch-pending-scrollsnapchange-events"}, "24f4b323": {"dfnID":"24f4b323","dfnText":"overflow-x","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-overflow-x"},{"id":"ref-for-propdef-overflow-x\u2460"}],"title":"2. Terminology"}],"url":"https://drafts.csswg.org/css-overflow-3/#propdef-overflow-x"}, "27d9b7ea": {"dfnID":"27d9b7ea","dfnText":"element","external":true,"refSections":[{"refs":[{"id":"ref-for-concept-element"},{"id":"ref-for-concept-element\u2460"},{"id":"ref-for-concept-element\u2461"},{"id":"ref-for-concept-element\u2462"}],"title":"6.1. Element Scrolling Members"}],"url":"https://dom.spec.whatwg.org/#concept-element"}, "27dba777": {"dfnID":"27dba777","dfnText":"DOMRect","external":true,"refSections":[{"refs":[{"id":"ref-for-domrect"},{"id":"ref-for-domrect\u2460"},{"id":"ref-for-domrect\u2461"},{"id":"ref-for-domrect\u2462"}],"title":"5.1. The CaretPosition Interface"},{"refs":[{"id":"ref-for-domrect\u2463"},{"id":"ref-for-domrect\u2464"},{"id":"ref-for-domrect\u2465"},{"id":"ref-for-domrect\u2466"},{"id":"ref-for-domrect\u2467"},{"id":"ref-for-domrect\u2468"},{"id":"ref-for-domrect\u2460\u24ea"}],"title":"6. \nExtensions to the Element Interface"},{"refs":[{"id":"ref-for-domrect\u2460\u2460"},{"id":"ref-for-domrect\u2460\u2461"},{"id":"ref-for-domrect\u2460\u2462"},{"id":"ref-for-domrect\u2460\u2463"},{"id":"ref-for-domrect\u2460\u2464"},{"id":"ref-for-domrect\u2460\u2465"},{"id":"ref-for-domrect\u2460\u2466"},{"id":"ref-for-domrect\u2460\u2467"},{"id":"ref-for-domrect\u2460\u2468"}],"title":"9. Extensions to the Range Interface"},{"refs":[{"id":"ref-for-domrect\u2461\u24ea"}],"title":"Changes From 4 August 2011 To 17 December 2013"}],"url":"https://drafts.fxtf.org/geometry-1/#domrect"}, "288dfcac": {"dfnID":"288dfcac","dfnText":"static","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-position-static"}],"title":"7. Extensions to the HTMLElement Interface"}],"url":"https://drafts.csswg.org/css-position-3/#valdef-position-static"}, "289ee1c2": {"dfnID":"289ee1c2","dfnText":"DOMPointInit","external":true,"refSections":[{"refs":[{"id":"ref-for-dictdef-dompointinit"}],"title":"11.1. The GeometryUtils Interface"}],"url":"https://drafts.fxtf.org/geometry-1/#dictdef-dompointinit"}, "296f3551": {"dfnID":"296f3551","dfnText":"Element","external":true,"refSections":[{"refs":[{"id":"ref-for-element"},{"id":"ref-for-element\u2460"},{"id":"ref-for-element\u2461"}],"title":"5. Extensions to the Document Interface"},{"refs":[{"id":"ref-for-element\u2462"},{"id":"ref-for-element\u2463"}],"title":"6. \nExtensions to the Element Interface"},{"refs":[{"id":"ref-for-element\u2464"}],"title":"6.1. Element Scrolling Members"},{"refs":[{"id":"ref-for-element\u2465"}],"title":"7. Extensions to the HTMLElement Interface"},{"refs":[{"id":"ref-for-element\u2466"},{"id":"ref-for-element\u2467"}],"title":"11.1. The GeometryUtils Interface"},{"refs":[{"id":"ref-for-element\u2468"},{"id":"ref-for-element\u2460\u24ea"},{"id":"ref-for-element\u2460\u2460"},{"id":"ref-for-element\u2460\u2461"},{"id":"ref-for-element\u2460\u2462"}],"title":"Changes From 17 December 2013 To 31 January 2020"},{"refs":[{"id":"ref-for-element\u2460\u2463"}],"title":"Changes From 4 August 2011 To 17 December 2013"}],"url":"https://dom.spec.whatwg.org/#element"}, "2b29269e": {"dfnID":"2b29269e","dfnText":"invisible","external":true,"refSections":[{"refs":[{"id":"ref-for-invisible"}],"title":"6. \nExtensions to the Element Interface"}],"url":"https://drafts.csswg.org/css-display-4/#invisible"}, "2bc0cdf4": {"dfnID":"2bc0cdf4","dfnText":"EventTarget","external":true,"refSections":[{"refs":[{"id":"ref-for-eventtarget"}],"title":"4.2. The MediaQueryList Interface"},{"refs":[{"id":"ref-for-eventtarget\u2460"}],"title":"12.1. The VisualViewport Interface"}],"url":"https://dom.spec.whatwg.org/#eventtarget"}, "2c239fd0": {"dfnID":"2c239fd0","dfnText":"reference pixel","external":true,"refSections":[{"refs":[{"id":"ref-for-reference-pixel"}],"title":"2. Terminology"}],"url":"https://drafts.csswg.org/css-values-4/#reference-pixel"}, "2c3a36fb": {"dfnID":"2c3a36fb","dfnText":"visible","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-overflow-visible"},{"id":"ref-for-valdef-overflow-visible\u2460"}],"title":"2. Terminology"}],"url":"https://drafts.csswg.org/css-overflow-3/#valdef-overflow-visible"}, "2dabaee6": {"dfnID":"2dabaee6","dfnText":"DOMRectList","external":true,"refSections":[{"refs":[{"id":"ref-for-domrectlist"},{"id":"ref-for-domrectlist\u2460"},{"id":"ref-for-domrectlist\u2461"},{"id":"ref-for-domrectlist\u2462"}],"title":"6. \nExtensions to the Element Interface"},{"refs":[{"id":"ref-for-domrectlist\u2463"},{"id":"ref-for-domrectlist\u2464"},{"id":"ref-for-domrectlist\u2465"}],"title":"9. Extensions to the Range Interface"}],"url":"https://drafts.fxtf.org/geometry-1/#domrectlist"}, "2e95db1d": {"dfnID":"2e95db1d","dfnText":"defaultView","external":true,"refSections":[{"refs":[{"id":"ref-for-dom-document-defaultview"},{"id":"ref-for-dom-document-defaultview\u2460"},{"id":"ref-for-dom-document-defaultview\u2461"},{"id":"ref-for-dom-document-defaultview\u2462"},{"id":"ref-for-dom-document-defaultview\u2463"}],"title":"6. \nExtensions to the Element Interface"}],"url":"https://html.spec.whatwg.org/multipage/nav-history-apis.html#dom-document-defaultview"}, "2ef14d2e": {"dfnID":"2ef14d2e","dfnText":"nodes","external":true,"refSections":[{"refs":[{"id":"ref-for-concept-node"}],"title":"5. Extensions to the Document Interface"}],"url":"https://dom.spec.whatwg.org/#concept-node"}, "2f0492ac": {"dfnID":"2f0492ac","dfnText":"body","external":true,"refSections":[{"refs":[{"id":"ref-for-the-body-element"}],"title":"2. Terminology"}],"url":"https://html.spec.whatwg.org/multipage/sections.html#the-body-element"}, "32b3558b": {"dfnID":"32b3558b","dfnText":"height","external":true,"refSections":[{"refs":[{"id":"ref-for-dom-domrect-height"}],"title":"6. \nExtensions to the Element Interface"},{"refs":[{"id":"ref-for-dom-domrect-height\u2460"}],"title":"9. Extensions to the Range Interface"}],"url":"https://drafts.fxtf.org/geometry-1/#dom-domrect-height"}, "3349d69f": {"dfnID":"3349d69f","dfnText":"associated Document","external":true,"refSections":[{"refs":[{"id":"ref-for-concept-document-window"}],"title":"2. Terminology"},{"refs":[{"id":"ref-for-concept-document-window\u2460"},{"id":"ref-for-concept-document-window\u2461"},{"id":"ref-for-concept-document-window\u2462"}],"title":"4. Extensions to the Window Interface"}],"url":"https://html.spec.whatwg.org/multipage/nav-history-apis.html#concept-document-window"}, "33eda2d8": {"dfnID":"33eda2d8","dfnText":"clip","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-overflow-clip"},{"id":"ref-for-valdef-overflow-clip\u2460"}],"title":"2. Terminology"}],"url":"https://drafts.csswg.org/css-overflow-3/#valdef-overflow-clip"}, "344199b8": {"dfnID":"344199b8","dfnText":"color","external":true,"refSections":[{"refs":[{"id":"ref-for-descdef-media-color"},{"id":"ref-for-descdef-media-color\u2460"}],"title":"4.3. The Screen Interface"}],"url":"https://drafts.csswg.org/mediaqueries-5/#descdef-media-color"}, "35972864": {"dfnID":"35972864","dfnText":"active document","external":true,"refSections":[{"refs":[{"id":"ref-for-nav-document"},{"id":"ref-for-nav-document\u2460"},{"id":"ref-for-nav-document\u2461"},{"id":"ref-for-nav-document\u2462"},{"id":"ref-for-nav-document\u2463"},{"id":"ref-for-nav-document\u2464"},{"id":"ref-for-nav-document\u2465"}],"title":"6. \nExtensions to the Element Interface"}],"url":"https://html.spec.whatwg.org/multipage/document-sequences.html#nav-document"}, "37c3d179": {"dfnID":"37c3d179","dfnText":"block-end","external":true,"refSections":[{"refs":[{"id":"ref-for-block-end"}],"title":"2. Terminology"}],"url":"https://drafts.csswg.org/css-writing-modes-4/#block-end"}, "3d6a3d36": {"dfnID":"3d6a3d36","dfnText":"shadow-including inclusive ancestor","external":true,"refSections":[{"refs":[{"id":"ref-for-concept-shadow-including-inclusive-ancestor"}],"title":"5. Extensions to the Document Interface"},{"refs":[{"id":"ref-for-concept-shadow-including-inclusive-ancestor\u2460"}],"title":"6.1. Element Scrolling Members"}],"url":"https://dom.spec.whatwg.org/#concept-shadow-including-inclusive-ancestor"}, "3edd98b4": {"dfnID":"3edd98b4","dfnText":"end node","external":true,"refSections":[{"refs":[{"id":"ref-for-concept-range-end-node"}],"title":"5.1. The CaretPosition Interface"}],"url":"https://dom.spec.whatwg.org/#concept-range-end-node"}, "3fca5a9e": {"dfnID":"3fca5a9e","dfnText":"map","external":true,"refSections":[{"refs":[{"id":"ref-for-ordered-map"}],"title":"4.1. The features argument to the open() method"}],"url":"https://infra.spec.whatwg.org/#ordered-map"}, "4013a022": {"dfnID":"4013a022","dfnText":"this","external":true,"refSections":[{"refs":[{"id":"ref-for-this"},{"id":"ref-for-this\u2460"},{"id":"ref-for-this\u2461"},{"id":"ref-for-this\u2462"},{"id":"ref-for-this\u2463"}],"title":"4. Extensions to the Window Interface"},{"refs":[{"id":"ref-for-this\u2464"},{"id":"ref-for-this\u2465"},{"id":"ref-for-this\u2466"}],"title":"4.2. The MediaQueryList Interface"}],"url":"https://webidl.spec.whatwg.org/#this"}, "4225558e": {"dfnID":"4225558e","dfnText":"inline-table","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-display-inline-table"}],"title":"6. \nExtensions to the Element Interface"}],"url":"https://drafts.csswg.org/css-display-4/#valdef-display-inline-table"}, "44a7708c": {"dfnID":"44a7708c","dfnText":"EventInit","external":true,"refSections":[{"refs":[{"id":"ref-for-dictdef-eventinit"}],"title":"4.2. The MediaQueryList Interface"}],"url":"https://dom.spec.whatwg.org/#dictdef-eventinit"}, "483ca172": {"dfnID":"483ca172","dfnText":"DOMQuad","external":true,"refSections":[{"refs":[{"id":"ref-for-domquad"},{"id":"ref-for-domquad\u2460"},{"id":"ref-for-domquad\u2461"}],"title":"11.1. The GeometryUtils Interface"}],"url":"https://drafts.fxtf.org/geometry-1/#domquad"}, "49a64d88": {"dfnID":"49a64d88","dfnText":"HTML elements","external":true,"refSections":[{"refs":[{"id":"ref-for-html-elements"}],"title":"7. Extensions to the HTMLElement Interface"}],"url":"https://html.spec.whatwg.org/multipage/infrastructure.html#html-elements"}, "4a16f115": {"dfnID":"4a16f115","dfnText":"border-top-width","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-border-top-width"}],"title":"6. \nExtensions to the Element Interface"}],"url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top-width"}, "4a667616": {"dfnID":"4a667616","dfnText":"DOMPoint","external":true,"refSections":[{"refs":[{"id":"ref-for-dompoint"}],"title":"11.1. The GeometryUtils Interface"}],"url":"https://drafts.fxtf.org/geometry-1/#dompoint"}, "4ebbec71": {"dfnID":"4ebbec71","dfnText":"event listener list","external":true,"refSections":[{"refs":[{"id":"ref-for-eventtarget-event-listener-list"}],"title":"4.2. The MediaQueryList Interface"}],"url":"https://dom.spec.whatwg.org/#eventtarget-event-listener-list"}, "5216e1a0": {"dfnID":"5216e1a0","dfnText":"node document","external":true,"refSections":[{"refs":[{"id":"ref-for-concept-node-document"},{"id":"ref-for-concept-node-document\u2460"},{"id":"ref-for-concept-node-document\u2461"},{"id":"ref-for-concept-node-document\u2462"},{"id":"ref-for-concept-node-document\u2463"},{"id":"ref-for-concept-node-document\u2464"},{"id":"ref-for-concept-node-document\u2465"},{"id":"ref-for-concept-node-document\u2466"},{"id":"ref-for-concept-node-document\u2467"},{"id":"ref-for-concept-node-document\u2468"},{"id":"ref-for-concept-node-document\u2460\u24ea"}],"title":"6. \nExtensions to the Element Interface"},{"refs":[{"id":"ref-for-concept-node-document\u2460\u2460"},{"id":"ref-for-concept-node-document\u2460\u2461"}],"title":"13.2. Scrolling"}],"url":"https://dom.spec.whatwg.org/#concept-node-document"}, "5372cca8": {"dfnID":"5372cca8","dfnText":"boolean","external":true,"refSections":[{"refs":[{"id":"ref-for-idl-boolean"},{"id":"ref-for-idl-boolean\u2460"},{"id":"ref-for-idl-boolean\u2461"}],"title":"4.2. The MediaQueryList Interface"},{"refs":[{"id":"ref-for-idl-boolean\u2462"},{"id":"ref-for-idl-boolean\u2463"},{"id":"ref-for-idl-boolean\u2464"},{"id":"ref-for-idl-boolean\u2465"},{"id":"ref-for-idl-boolean\u2466"},{"id":"ref-for-idl-boolean\u2467"},{"id":"ref-for-idl-boolean\u2468"}],"title":"6. \nExtensions to the Element Interface"}],"url":"https://webidl.spec.whatwg.org/#idl-boolean"}, "54d48ea2": {"dfnID":"54d48ea2","dfnText":"inline-level box","external":true,"refSections":[{"refs":[{"id":"ref-for-inline-level-box"},{"id":"ref-for-inline-level-box\u2460"}],"title":"7. Extensions to the HTMLElement Interface"}],"url":"https://drafts.csswg.org/css-display-4/#inline-level-box"}, "563932dc": {"dfnID":"563932dc","dfnText":"index","external":true,"refSections":[{"refs":[{"id":"ref-for-concept-tree-index"}],"title":"5. Extensions to the Document Interface"}],"url":"https://dom.spec.whatwg.org/#concept-tree-index"}, "578a7982": {"dfnID":"578a7982","dfnText":"CSSPseudoElement","external":true,"refSections":[{"refs":[{"id":"ref-for-csspseudoelement"},{"id":"ref-for-csspseudoelement\u2460"}],"title":"11.1. The GeometryUtils Interface"}],"url":"https://drafts.csswg.org/css-pseudo-4/#csspseudoelement"}, "58ebefde": {"dfnID":"58ebefde","dfnText":"auxiliary browsing context","external":true,"refSections":[{"refs":[{"id":"ref-for-auxiliary-browsing-context"},{"id":"ref-for-auxiliary-browsing-context\u2460"},{"id":"ref-for-auxiliary-browsing-context\u2461"},{"id":"ref-for-auxiliary-browsing-context\u2462"}],"title":"4. Extensions to the Window Interface"}],"url":"https://html.spec.whatwg.org/multipage/document-sequences.html#auxiliary-browsing-context"}, "597088f0": {"dfnID":"597088f0","dfnText":"Text","external":true,"refSections":[{"refs":[{"id":"ref-for-text"}],"title":"9. Extensions to the Range Interface"},{"refs":[{"id":"ref-for-text\u2460"},{"id":"ref-for-text\u2461"}],"title":"11.1. The GeometryUtils Interface"}],"url":"https://dom.spec.whatwg.org/#text"}, "5a54d362": {"dfnID":"5a54d362","dfnText":"closed-shadow-hidden","external":true,"refSections":[{"refs":[{"id":"ref-for-concept-closed-shadow-hidden"},{"id":"ref-for-concept-closed-shadow-hidden\u2460"}],"title":"7. Extensions to the HTMLElement Interface"}],"url":"https://dom.spec.whatwg.org/#concept-closed-shadow-hidden"}, "5afeceea": {"dfnID":"5afeceea","dfnText":"parent element","external":true,"refSections":[{"refs":[{"id":"ref-for-parent-element"}],"title":"2. Terminology"}],"url":"https://dom.spec.whatwg.org/#parent-element"}, "5c6db8f2": {"dfnID":"5c6db8f2","dfnText":"table-column-group","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-display-table-column-group"}],"title":"2. Terminology"}],"url":"https://drafts.csswg.org/css-display-4/#valdef-display-table-column-group"}, "5d233601": {"dfnID":"5d233601","dfnText":"host","external":true,"refSections":[{"refs":[{"id":"ref-for-concept-documentfragment-host"},{"id":"ref-for-concept-documentfragment-host\u2460"}],"title":"5. Extensions to the Document Interface"}],"url":"https://dom.spec.whatwg.org/#concept-documentfragment-host"}, "5d7209e9": {"dfnID":"5d7209e9","dfnText":"Window","external":true,"refSections":[{"refs":[{"id":"ref-for-window"},{"id":"ref-for-window\u2460"}],"title":"2. Terminology"},{"refs":[{"id":"ref-for-window\u2461"},{"id":"ref-for-window\u2462"},{"id":"ref-for-window\u2463"},{"id":"ref-for-window\u2464"}],"title":"4. Extensions to the Window Interface"},{"refs":[{"id":"ref-for-window\u2465"},{"id":"ref-for-window\u2466"}],"title":"10. Extensions to the MouseEvent Interface"},{"refs":[{"id":"ref-for-window\u2467"}],"title":"13.1. Resizing viewports"},{"refs":[{"id":"ref-for-window\u2468"},{"id":"ref-for-window\u2460\u24ea"}],"title":"13.3. Event summary"},{"refs":[{"id":"ref-for-window\u2460\u2460"},{"id":"ref-for-window\u2460\u2461"}],"title":"Changes From 17 December 2013 To 31 January 2020"}],"url":"https://html.spec.whatwg.org/multipage/nav-history-apis.html#window"}, "5e7582d3": {"dfnID":"5e7582d3","dfnText":"width","external":true,"refSections":[{"refs":[{"id":"ref-for-dom-domrect-width"}],"title":"6. \nExtensions to the Element Interface"},{"refs":[{"id":"ref-for-dom-domrect-width\u2460"}],"title":"9. Extensions to the Range Interface"}],"url":"https://drafts.fxtf.org/geometry-1/#dom-domrect-width"}, "5f90bbfb": {"dfnID":"5f90bbfb","dfnText":"undefined","external":true,"refSections":[{"refs":[{"id":"ref-for-idl-undefined"},{"id":"ref-for-idl-undefined\u2460"},{"id":"ref-for-idl-undefined\u2461"},{"id":"ref-for-idl-undefined\u2462"},{"id":"ref-for-idl-undefined\u2463"},{"id":"ref-for-idl-undefined\u2464"},{"id":"ref-for-idl-undefined\u2465"},{"id":"ref-for-idl-undefined\u2466"},{"id":"ref-for-idl-undefined\u2467"},{"id":"ref-for-idl-undefined\u2468"}],"title":"4. Extensions to the Window Interface"},{"refs":[{"id":"ref-for-idl-undefined\u2460\u24ea"},{"id":"ref-for-idl-undefined\u2460\u2460"}],"title":"4.2. The MediaQueryList Interface"},{"refs":[{"id":"ref-for-idl-undefined\u2460\u2461"},{"id":"ref-for-idl-undefined\u2460\u2462"},{"id":"ref-for-idl-undefined\u2460\u2463"},{"id":"ref-for-idl-undefined\u2460\u2464"},{"id":"ref-for-idl-undefined\u2460\u2465"},{"id":"ref-for-idl-undefined\u2460\u2466"},{"id":"ref-for-idl-undefined\u2460\u2467"}],"title":"6. \nExtensions to the Element Interface"}],"url":"https://webidl.spec.whatwg.org/#idl-undefined"}, "5fced98b": {"dfnID":"5fced98b","dfnText":"CSSOMString","external":true,"refSections":[{"refs":[{"id":"ref-for-cssomstring"}],"title":"4. Extensions to the Window Interface"},{"refs":[{"id":"ref-for-cssomstring\u2460"},{"id":"ref-for-cssomstring\u2461"},{"id":"ref-for-cssomstring\u2462"},{"id":"ref-for-cssomstring\u2463"}],"title":"4.2. The MediaQueryList Interface"}],"url":"https://drafts.csswg.org/cssom-1/#cssomstring"}, "5fd23811": {"dfnID":"5fd23811","dfnText":"fire an event","external":true,"refSections":[{"refs":[{"id":"ref-for-concept-event-fire"}],"title":"4.2. The MediaQueryList Interface"},{"refs":[{"id":"ref-for-concept-event-fire\u2460"},{"id":"ref-for-concept-event-fire\u2461"}],"title":"13.1. Resizing viewports"},{"refs":[{"id":"ref-for-concept-event-fire\u2462"},{"id":"ref-for-concept-event-fire\u2463"},{"id":"ref-for-concept-event-fire\u2464"},{"id":"ref-for-concept-event-fire\u2465"}],"title":"13.2. Scrolling"}],"url":"https://dom.spec.whatwg.org/#concept-event-fire"}, "5fe22d95": {"dfnID":"5fe22d95","dfnText":"viewport","external":true,"refSections":[{"refs":[{"id":"ref-for-viewport%E2%91%A0"},{"id":"ref-for-viewport%E2%91%A0\u2460"},{"id":"ref-for-viewport%E2%91%A0\u2461"},{"id":"ref-for-viewport%E2%91%A0\u2462"},{"id":"ref-for-viewport%E2%91%A0\u2463"},{"id":"ref-for-viewport%E2%91%A0\u2464"},{"id":"ref-for-viewport%E2%91%A0\u2465"},{"id":"ref-for-viewport%E2%91%A0\u2466"},{"id":"ref-for-viewport%E2%91%A0\u2467"},{"id":"ref-for-viewport%E2%91%A0\u2468"},{"id":"ref-for-viewport%E2%91%A0\u2460\u24ea"},{"id":"ref-for-viewport%E2%91%A0\u2460\u2460"},{"id":"ref-for-viewport%E2%91%A0\u2460\u2461"},{"id":"ref-for-viewport%E2%91%A0\u2460\u2462"},{"id":"ref-for-viewport%E2%91%A0\u2460\u2463"},{"id":"ref-for-viewport%E2%91%A0\u2460\u2464"}],"title":"2. Terminology"},{"refs":[{"id":"ref-for-viewport%E2%91%A0\u2460\u2465"},{"id":"ref-for-viewport%E2%91%A0\u2460\u2466"}],"title":"2.3. Web-exposed screen information"},{"refs":[{"id":"ref-for-viewport%E2%91%A0\u2460\u2467"},{"id":"ref-for-viewport%E2%91%A0\u2460\u2468"},{"id":"ref-for-viewport%E2%91%A0\u2461\u24ea"},{"id":"ref-for-viewport%E2%91%A0\u2461\u2460"},{"id":"ref-for-viewport%E2%91%A0\u2461\u2461"},{"id":"ref-for-viewport%E2%91%A0\u2461\u2462"}],"title":"3.1. Scrolling"},{"refs":[{"id":"ref-for-viewport%E2%91%A0\u2461\u2463"},{"id":"ref-for-viewport%E2%91%A0\u2461\u2464"},{"id":"ref-for-viewport%E2%91%A0\u2461\u2465"},{"id":"ref-for-viewport%E2%91%A0\u2461\u2466"},{"id":"ref-for-viewport%E2%91%A0\u2461\u2467"},{"id":"ref-for-viewport%E2%91%A0\u2461\u2468"},{"id":"ref-for-viewport%E2%91%A0\u2462\u24ea"},{"id":"ref-for-viewport%E2%91%A0\u2462\u2460"},{"id":"ref-for-viewport%E2%91%A0\u2462\u2461"},{"id":"ref-for-viewport%E2%91%A0\u2462\u2462"},{"id":"ref-for-viewport%E2%91%A0\u2462\u2463"},{"id":"ref-for-viewport%E2%91%A0\u2462\u2464"},{"id":"ref-for-viewport%E2%91%A0\u2462\u2465"},{"id":"ref-for-viewport%E2%91%A0\u2462\u2466"},{"id":"ref-for-viewport%E2%91%A0\u2462\u2467"},{"id":"ref-for-viewport%E2%91%A0\u2462\u2468"},{"id":"ref-for-viewport%E2%91%A0\u2463\u24ea"},{"id":"ref-for-viewport%E2%91%A0\u2463\u2460"},{"id":"ref-for-viewport%E2%91%A0\u2463\u2461"},{"id":"ref-for-viewport%E2%91%A0\u2463\u2462"},{"id":"ref-for-viewport%E2%91%A0\u2463\u2463"},{"id":"ref-for-viewport%E2%91%A0\u2463\u2464"},{"id":"ref-for-viewport%E2%91%A0\u2463\u2465"},{"id":"ref-for-viewport%E2%91%A0\u2463\u2466"},{"id":"ref-for-viewport%E2%91%A0\u2463\u2467"},{"id":"ref-for-viewport%E2%91%A0\u2463\u2468"},{"id":"ref-for-viewport%E2%91%A0\u2464\u24ea"},{"id":"ref-for-viewport%E2%91%A0\u2464\u2460"},{"id":"ref-for-viewport%E2%91%A0\u2464\u2461"},{"id":"ref-for-viewport%E2%91%A0\u2464\u2462"},{"id":"ref-for-viewport%E2%91%A0\u2464\u2463"}],"title":"4. Extensions to the Window Interface"},{"refs":[{"id":"ref-for-viewport%E2%91%A0\u2464\u2464"},{"id":"ref-for-viewport%E2%91%A0\u2464\u2465"},{"id":"ref-for-viewport%E2%91%A0\u2464\u2466"},{"id":"ref-for-viewport%E2%91%A0\u2464\u2467"},{"id":"ref-for-viewport%E2%91%A0\u2464\u2468"},{"id":"ref-for-viewport%E2%91%A0\u2465\u24ea"},{"id":"ref-for-viewport%E2%91%A0\u2465\u2460"},{"id":"ref-for-viewport%E2%91%A0\u2465\u2461"},{"id":"ref-for-viewport%E2%91%A0\u2465\u2462"},{"id":"ref-for-viewport%E2%91%A0\u2465\u2463"},{"id":"ref-for-viewport%E2%91%A0\u2465\u2464"},{"id":"ref-for-viewport%E2%91%A0\u2465\u2465"},{"id":"ref-for-viewport%E2%91%A0\u2465\u2466"},{"id":"ref-for-viewport%E2%91%A0\u2465\u2467"},{"id":"ref-for-viewport%E2%91%A0\u2465\u2468"},{"id":"ref-for-viewport%E2%91%A0\u2466\u24ea"},{"id":"ref-for-viewport%E2%91%A0\u2466\u2460"},{"id":"ref-for-viewport%E2%91%A0\u2466\u2461"}],"title":"5. Extensions to the Document Interface"},{"refs":[{"id":"ref-for-viewport%E2%91%A0\u2466\u2462"},{"id":"ref-for-viewport%E2%91%A0\u2466\u2463"},{"id":"ref-for-viewport%E2%91%A0\u2466\u2464"},{"id":"ref-for-viewport%E2%91%A0\u2466\u2465"},{"id":"ref-for-viewport%E2%91%A0\u2466\u2466"},{"id":"ref-for-viewport%E2%91%A0\u2466\u2467"},{"id":"ref-for-viewport%E2%91%A0\u2466\u2468"},{"id":"ref-for-viewport%E2%91%A0\u2467\u24ea"},{"id":"ref-for-viewport%E2%91%A0\u2467\u2460"},{"id":"ref-for-viewport%E2%91%A0\u2467\u2461"}],"title":"6. \nExtensions to the Element Interface"},{"refs":[{"id":"ref-for-viewport%E2%91%A0\u2467\u2462"},{"id":"ref-for-viewport%E2%91%A0\u2467\u2463"},{"id":"ref-for-viewport%E2%91%A0\u2467\u2464"},{"id":"ref-for-viewport%E2%91%A0\u2467\u2465"},{"id":"ref-for-viewport%E2%91%A0\u2467\u2466"}],"title":"6.1. Element Scrolling Members"},{"refs":[{"id":"ref-for-viewport%E2%91%A0\u2467\u2467"},{"id":"ref-for-viewport%E2%91%A0\u2467\u2468"}],"title":"10. Extensions to the MouseEvent Interface"},{"refs":[{"id":"ref-for-viewport%E2%91%A0\u2468\u24ea"}],"title":"13.1. Resizing viewports"},{"refs":[{"id":"ref-for-viewport%E2%91%A0\u2468\u2460"},{"id":"ref-for-viewport%E2%91%A0\u2468\u2461"},{"id":"ref-for-viewport%E2%91%A0\u2468\u2462"},{"id":"ref-for-viewport%E2%91%A0\u2468\u2463"},{"id":"ref-for-viewport%E2%91%A0\u2468\u2464"}],"title":"13.2. Scrolling"},{"refs":[{"id":"ref-for-viewport%E2%91%A0\u2468\u2465"},{"id":"ref-for-viewport%E2%91%A0\u2468\u2466"},{"id":"ref-for-viewport%E2%91%A0\u2468\u2467"}],"title":"13.3. Event summary"}],"url":"https://drafts.csswg.org/css2/#viewport%E2%91%A0"}, "622d9f0e": {"dfnID":"622d9f0e","dfnText":"callback","external":true,"refSections":[{"refs":[{"id":"ref-for-event-listener-callback"},{"id":"ref-for-event-listener-callback\u2460"}],"title":"4.2. The MediaQueryList Interface"}],"url":"https://dom.spec.whatwg.org/#event-listener-callback"}, "62aa77f4": {"dfnID":"62aa77f4","dfnText":"y","external":true,"refSections":[{"refs":[{"id":"ref-for-dom-domrect-y"}],"title":"6. \nExtensions to the Element Interface"},{"refs":[{"id":"ref-for-dom-domrect-y\u2460"}],"title":"9. Extensions to the Range Interface"}],"url":"https://drafts.fxtf.org/geometry-1/#dom-domrect-y"}, "683b1507": {"dfnID":"683b1507","dfnText":"start offset","external":true,"refSections":[{"refs":[{"id":"ref-for-concept-range-start-offset"}],"title":"5.1. The CaretPosition Interface"}],"url":"https://dom.spec.whatwg.org/#concept-range-start-offset"}, "6a5a59a0": {"dfnID":"6a5a59a0","dfnText":"event handler","external":true,"refSections":[{"refs":[{"id":"ref-for-event-handlers"},{"id":"ref-for-event-handlers\u2460"}],"title":"4.2. The MediaQueryList Interface"}],"url":"https://html.spec.whatwg.org/multipage/webappapis.html#event-handlers"}, "6c88f67e": {"dfnID":"6c88f67e","dfnText":"start node","external":true,"refSections":[{"refs":[{"id":"ref-for-concept-range-start-node"}],"title":"5.1. The CaretPosition Interface"}],"url":"https://dom.spec.whatwg.org/#concept-range-start-node"}, "6cb219a5": {"dfnID":"6cb219a5","dfnText":"unscaled","external":true,"refSections":[{"refs":[{"id":"ref-for-unscaled"},{"id":"ref-for-unscaled\u2460"},{"id":"ref-for-unscaled\u2461"},{"id":"ref-for-unscaled\u2462"}],"title":"6. \nExtensions to the Element Interface"},{"refs":[{"id":"ref-for-unscaled\u2463"},{"id":"ref-for-unscaled\u2464"},{"id":"ref-for-unscaled\u2465"},{"id":"ref-for-unscaled\u2466"},{"id":"ref-for-unscaled\u2467"},{"id":"ref-for-unscaled\u2468"}],"title":"7. Extensions to the HTMLElement Interface"}],"url":"https://drafts.csswg.org/css-viewport/#unscaled"}, "6cf6f82f": {"dfnID":"6cf6f82f","dfnText":"addEventListener(type, callback)","external":true,"refSections":[{"refs":[{"id":"ref-for-dom-eventtarget-addeventlistener"}],"title":"4.2. The MediaQueryList Interface"}],"url":"https://dom.spec.whatwg.org/#dom-eventtarget-addeventlistener"}, "6d88ab2e": {"dfnID":"6d88ab2e","dfnText":"browsing context","external":true,"refSections":[{"refs":[{"id":"ref-for-window-bc"},{"id":"ref-for-window-bc\u2460"},{"id":"ref-for-window-bc\u2461"},{"id":"ref-for-window-bc\u2462"}],"title":"4. Extensions to the Window Interface"}],"url":"https://html.spec.whatwg.org/multipage/nav-history-apis.html#window-bc"}, "721a6c78": {"dfnID":"721a6c78","dfnText":"scroll snap","external":true,"refSections":[{"refs":[{"id":"ref-for-scroll-snap"}],"title":"6.1. Element Scrolling Members"}],"url":"https://drafts.csswg.org/css-scroll-snap-1/#scroll-snap"}, "7393da89": {"dfnID":"7393da89","dfnText":"same origin","external":true,"refSections":[{"refs":[{"id":"ref-for-same-origin"}],"title":"6.1. Element Scrolling Members"}],"url":"https://html.spec.whatwg.org/multipage/browsers.html#same-origin"}, "73bc6606": {"dfnID":"73bc6606","dfnText":"pointer-events","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-pointer-events"}],"title":"5. Extensions to the Document Interface"}],"url":"https://drafts.csswg.org/css-ui-4/#propdef-pointer-events"}, "7a87d819": {"dfnID":"7a87d819","dfnText":"is","external":true,"refSections":[{"refs":[{"id":"ref-for-string-is"}],"title":"2. Terminology"}],"url":"https://infra.spec.whatwg.org/#string-is"}, "7df798b5": {"dfnID":"7df798b5","dfnText":"skips its contents","external":true,"refSections":[{"refs":[{"id":"ref-for-skips-its-contents"}],"title":"6. \nExtensions to the Element Interface"}],"url":"https://drafts.csswg.org/css-contain-2/#skips-its-contents"}, "7f5c719c": {"dfnID":"7f5c719c","dfnText":"MouseEventInit","external":true,"refSections":[{"refs":[{"id":"ref-for-dictdef-mouseeventinit"}],"title":"10. Extensions to the MouseEvent Interface"}],"url":"https://w3c.github.io/uievents/#dictdef-mouseeventinit"}, "7fb2c729": {"dfnID":"7fb2c729","dfnText":"margin edge","external":true,"refSections":[{"refs":[{"id":"ref-for-margin-edge"},{"id":"ref-for-margin-edge\u2460"},{"id":"ref-for-margin-edge\u2461"},{"id":"ref-for-margin-edge\u2462"},{"id":"ref-for-margin-edge\u2463"},{"id":"ref-for-margin-edge\u2464"},{"id":"ref-for-margin-edge\u2465"},{"id":"ref-for-margin-edge\u2466"},{"id":"ref-for-margin-edge\u2467"},{"id":"ref-for-margin-edge\u2468"},{"id":"ref-for-margin-edge\u2460\u24ea"},{"id":"ref-for-margin-edge\u2460\u2460"},{"id":"ref-for-margin-edge\u2460\u2461"},{"id":"ref-for-margin-edge\u2460\u2462"},{"id":"ref-for-margin-edge\u2460\u2463"},{"id":"ref-for-margin-edge\u2460\u2464"}],"title":"2. Terminology"}],"url":"https://drafts.csswg.org/css-box-4/#margin-edge"}, "8000726e": {"dfnID":"8000726e","dfnText":"border-left-width","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-border-left-width"}],"title":"6. \nExtensions to the Element Interface"}],"url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-left-width"}, "8044ee41": {"dfnID":"8044ee41","dfnText":"range","external":true,"refSections":[{"refs":[{"id":"ref-for-concept-range"},{"id":"ref-for-concept-range\u2460"},{"id":"ref-for-concept-range\u2461"}],"title":"6.1. Element Scrolling Members"}],"url":"https://dom.spec.whatwg.org/#concept-range"}, "80eb9508": {"dfnID":"80eb9508","dfnText":"principal box","external":true,"refSections":[{"refs":[{"id":"ref-for-principal-box"},{"id":"ref-for-principal-box\u2460"},{"id":"ref-for-principal-box\u2461"},{"id":"ref-for-principal-box\u2462"}],"title":"7. Extensions to the HTMLElement Interface"}],"url":"https://drafts.csswg.org/css-display-4/#principal-box"}, "8379845e": {"dfnID":"8379845e","dfnText":"block-level","external":true,"refSections":[{"refs":[{"id":"ref-for-block-level"},{"id":"ref-for-block-level\u2460"},{"id":"ref-for-block-level\u2461"},{"id":"ref-for-block-level\u2462"}],"title":"7. Extensions to the HTMLElement Interface"}],"url":"https://drafts.csswg.org/css-display-4/#block-level"}, "838900a7": {"dfnID":"838900a7","dfnText":"isTrusted","external":true,"refSections":[{"refs":[{"id":"ref-for-dom-event-istrusted"}],"title":"4.2. The MediaQueryList Interface"}],"url":"https://dom.spec.whatwg.org/#dom-event-istrusted"}, "85394472": {"dfnID":"85394472","dfnText":"Document","external":true,"refSections":[{"refs":[{"id":"ref-for-document"}],"title":"2. Terminology"},{"refs":[{"id":"ref-for-document\u2460"}],"title":"3.1. Scrolling"},{"refs":[{"id":"ref-for-document\u2461"},{"id":"ref-for-document\u2462"}],"title":"4. Extensions to the Window Interface"},{"refs":[{"id":"ref-for-document\u2463"}],"title":"4.2. The MediaQueryList Interface"},{"refs":[{"id":"ref-for-document\u2464"},{"id":"ref-for-document\u2465"},{"id":"ref-for-document\u2466"}],"title":"5. Extensions to the Document Interface"},{"refs":[{"id":"ref-for-document\u2467"},{"id":"ref-for-document\u2468"},{"id":"ref-for-document\u2460\u24ea"}],"title":"6.1. Element Scrolling Members"},{"refs":[{"id":"ref-for-document\u2460\u2460"},{"id":"ref-for-document\u2460\u2461"}],"title":"11.1. The GeometryUtils Interface"},{"refs":[{"id":"ref-for-document\u2460\u2462"}],"title":"13.1. Resizing viewports"},{"refs":[{"id":"ref-for-document\u2460\u2463"},{"id":"ref-for-document\u2460\u2464"},{"id":"ref-for-document\u2460\u2465"},{"id":"ref-for-document\u2460\u2466"},{"id":"ref-for-document\u2460\u2467"},{"id":"ref-for-document\u2460\u2468"},{"id":"ref-for-document\u2461\u24ea"}],"title":"13.2. Scrolling"},{"refs":[{"id":"ref-for-document\u2461\u2460"},{"id":"ref-for-document\u2461\u2461"},{"id":"ref-for-document\u2461\u2462"},{"id":"ref-for-document\u2461\u2463"}],"title":"13.3. Event summary"},{"refs":[{"id":"ref-for-document\u2461\u2464"},{"id":"ref-for-document\u2461\u2465"}],"title":"14. Post-Layout State Snapshotting"},{"refs":[{"id":"ref-for-document\u2461\u2466"}],"title":"Changes From 17 December 2013 To 31 January 2020"}],"url":"https://dom.spec.whatwg.org/#document"}, "853ba8e2": {"dfnID":"853ba8e2","dfnText":"update scrollsnapchange targets","external":true,"refSections":[{"refs":[{"id":"ref-for-document-update-scrollsnapchange-targets"}],"title":"13.2. Scrolling"}],"url":"https://drafts.csswg.org/css-scroll-snap-2/#document-update-scrollsnapchange-targets"}, "868c2ca7": {"dfnID":"868c2ca7","dfnText":"x","external":true,"refSections":[{"refs":[{"id":"ref-for-dom-domrect-x"}],"title":"6. \nExtensions to the Element Interface"},{"refs":[{"id":"ref-for-dom-domrect-x\u2460"}],"title":"9. Extensions to the Range Interface"}],"url":"https://drafts.fxtf.org/geometry-1/#dom-domrect-x"}, "86923d07": {"dfnID":"86923d07","dfnText":"scroll container","external":true,"refSections":[{"refs":[{"id":"ref-for-scroll-container"},{"id":"ref-for-scroll-container\u2460"}],"title":"6.1. Element Scrolling Members"}],"url":"https://drafts.csswg.org/css-overflow-3/#scroll-container"}, "86928bde": {"dfnID":"86928bde","dfnText":"overflow","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-overflow"}],"title":"2. Terminology"}],"url":"https://drafts.csswg.org/css-overflow-3/#propdef-overflow"}, "881c2f72": {"dfnID":"881c2f72","dfnText":"box","external":true,"refSections":[{"refs":[{"id":"ref-for-box"},{"id":"ref-for-box\u2460"},{"id":"ref-for-box\u2461"},{"id":"ref-for-box\u2462"}],"title":"2. Terminology"},{"refs":[{"id":"ref-for-box\u2463"},{"id":"ref-for-box\u2464"}],"title":"5. Extensions to the Document Interface"},{"refs":[{"id":"ref-for-box\u2465"},{"id":"ref-for-box\u2466"},{"id":"ref-for-box\u2467"},{"id":"ref-for-box\u2468"},{"id":"ref-for-box\u2460\u24ea"},{"id":"ref-for-box\u2460\u2460"},{"id":"ref-for-box\u2460\u2461"},{"id":"ref-for-box\u2460\u2462"},{"id":"ref-for-box\u2460\u2463"},{"id":"ref-for-box\u2460\u2464"},{"id":"ref-for-box\u2460\u2465"},{"id":"ref-for-box\u2460\u2466"},{"id":"ref-for-box\u2460\u2467"},{"id":"ref-for-box\u2460\u2468"},{"id":"ref-for-box\u2461\u24ea"},{"id":"ref-for-box\u2461\u2460"},{"id":"ref-for-box\u2461\u2461"},{"id":"ref-for-box\u2461\u2462"}],"title":"6. \nExtensions to the Element Interface"},{"refs":[{"id":"ref-for-box\u2461\u2463"},{"id":"ref-for-box\u2461\u2464"},{"id":"ref-for-box\u2461\u2465"},{"id":"ref-for-box\u2461\u2466"},{"id":"ref-for-box\u2461\u2467"},{"id":"ref-for-box\u2461\u2468"},{"id":"ref-for-box\u2462\u24ea"},{"id":"ref-for-box\u2462\u2460"},{"id":"ref-for-box\u2462\u2461"},{"id":"ref-for-box\u2462\u2462"},{"id":"ref-for-box\u2462\u2463"},{"id":"ref-for-box\u2462\u2464"}],"title":"7. Extensions to the HTMLElement Interface"},{"refs":[{"id":"ref-for-box\u2462\u2465"},{"id":"ref-for-box\u2462\u2466"},{"id":"ref-for-box\u2462\u2467"},{"id":"ref-for-box\u2462\u2468"}],"title":"8. Extensions to the HTMLImageElement Interface"}],"url":"https://drafts.csswg.org/css-display-4/#box"}, "887c0c5c": {"dfnID":"887c0c5c","dfnText":"inline base direction","external":true,"refSections":[{"refs":[{"id":"ref-for-inline-base-direction"},{"id":"ref-for-inline-base-direction\u2460"},{"id":"ref-for-inline-base-direction\u2461"}],"title":"6.1. Element Scrolling Members"}],"url":"https://drafts.csswg.org/css-writing-modes-4/#inline-base-direction"}, "889e932f": {"dfnID":"889e932f","dfnText":"Exposed","external":true,"refSections":[{"refs":[{"id":"ref-for-Exposed"},{"id":"ref-for-Exposed\u2460"}],"title":"4.2. The MediaQueryList Interface"},{"refs":[{"id":"ref-for-Exposed\u2461"}],"title":"4.3. The Screen Interface"},{"refs":[{"id":"ref-for-Exposed\u2462"}],"title":"5.1. The CaretPosition Interface"},{"refs":[{"id":"ref-for-Exposed\u2463"}],"title":"12.1. The VisualViewport Interface"}],"url":"https://webidl.spec.whatwg.org/#Exposed"}, "88dd7551": {"dfnID":"88dd7551","dfnText":"block flow direction","external":true,"refSections":[{"refs":[{"id":"ref-for-block-flow-direction"},{"id":"ref-for-block-flow-direction\u2460"},{"id":"ref-for-block-flow-direction\u2461"}],"title":"6.1. Element Scrolling Members"}],"url":"https://drafts.csswg.org/css-writing-modes-4/#block-flow-direction"}, "8b3ca704": {"dfnID":"8b3ca704","dfnText":"auto (for overflow)","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-overflow-auto"}],"title":"2. Terminology"}],"url":"https://drafts.csswg.org/css-overflow-3/#valdef-overflow-auto"}, "8c800cdf": {"dfnID":"8c800cdf","dfnText":"double","external":true,"refSections":[{"refs":[{"id":"ref-for-idl-double"},{"id":"ref-for-idl-double\u2460"},{"id":"ref-for-idl-double\u2461"},{"id":"ref-for-idl-double\u2462"},{"id":"ref-for-idl-double\u2463"}],"title":"4. Extensions to the Window Interface"},{"refs":[{"id":"ref-for-idl-double\u2464"},{"id":"ref-for-idl-double\u2465"},{"id":"ref-for-idl-double\u2466"},{"id":"ref-for-idl-double\u2467"},{"id":"ref-for-idl-double\u2468"},{"id":"ref-for-idl-double\u2460\u24ea"}],"title":"5. Extensions to the Document Interface"},{"refs":[{"id":"ref-for-idl-double\u2460\u2460"}],"title":"6. \nExtensions to the Element Interface"},{"refs":[{"id":"ref-for-idl-double\u2460\u2461"},{"id":"ref-for-idl-double\u2460\u2462"},{"id":"ref-for-idl-double\u2460\u2463"},{"id":"ref-for-idl-double\u2460\u2464"},{"id":"ref-for-idl-double\u2460\u2465"},{"id":"ref-for-idl-double\u2460\u2466"},{"id":"ref-for-idl-double\u2460\u2467"},{"id":"ref-for-idl-double\u2460\u2468"},{"id":"ref-for-idl-double\u2461\u24ea"},{"id":"ref-for-idl-double\u2461\u2460"},{"id":"ref-for-idl-double\u2461\u2461"},{"id":"ref-for-idl-double\u2461\u2462"},{"id":"ref-for-idl-double\u2461\u2463"},{"id":"ref-for-idl-double\u2461\u2464"}],"title":"10. Extensions to the MouseEvent Interface"},{"refs":[{"id":"ref-for-idl-double\u2461\u2465"},{"id":"ref-for-idl-double\u2461\u2466"},{"id":"ref-for-idl-double\u2461\u2467"},{"id":"ref-for-idl-double\u2461\u2468"},{"id":"ref-for-idl-double\u2462\u24ea"},{"id":"ref-for-idl-double\u2462\u2460"},{"id":"ref-for-idl-double\u2462\u2461"}],"title":"12.1. The VisualViewport Interface"},{"refs":[{"id":"ref-for-idl-double\u2462\u2462"}],"title":"Changes From 4 August 2011 To 17 December 2013"}],"url":"https://webidl.spec.whatwg.org/#idl-double"}, "8d0ede2c": {"dfnID":"8d0ede2c","dfnText":"initial containing block","external":true,"refSections":[{"refs":[{"id":"ref-for-initial-containing-block"},{"id":"ref-for-initial-containing-block\u2460"},{"id":"ref-for-initial-containing-block\u2461"},{"id":"ref-for-initial-containing-block\u2462"},{"id":"ref-for-initial-containing-block\u2463"},{"id":"ref-for-initial-containing-block\u2464"},{"id":"ref-for-initial-containing-block\u2465"},{"id":"ref-for-initial-containing-block\u2466"},{"id":"ref-for-initial-containing-block\u2467"},{"id":"ref-for-initial-containing-block\u2468"},{"id":"ref-for-initial-containing-block\u2460\u24ea"},{"id":"ref-for-initial-containing-block\u2460\u2460"},{"id":"ref-for-initial-containing-block\u2460\u2461"},{"id":"ref-for-initial-containing-block\u2460\u2462"},{"id":"ref-for-initial-containing-block\u2460\u2463"},{"id":"ref-for-initial-containing-block\u2460\u2464"},{"id":"ref-for-initial-containing-block\u2460\u2465"}],"title":"2. Terminology"},{"refs":[{"id":"ref-for-initial-containing-block\u2460\u2466"},{"id":"ref-for-initial-containing-block\u2460\u2467"}],"title":"4. Extensions to the Window Interface"},{"refs":[{"id":"ref-for-initial-containing-block\u2460\u2468"},{"id":"ref-for-initial-containing-block\u2461\u24ea"},{"id":"ref-for-initial-containing-block\u2461\u2460"},{"id":"ref-for-initial-containing-block\u2461\u2461"}],"title":"7. Extensions to the HTMLElement Interface"},{"refs":[{"id":"ref-for-initial-containing-block\u2461\u2462"},{"id":"ref-for-initial-containing-block\u2461\u2463"}],"title":"8. Extensions to the HTMLImageElement Interface"},{"refs":[{"id":"ref-for-initial-containing-block\u2461\u2464"},{"id":"ref-for-initial-containing-block\u2461\u2465"}],"title":"10. Extensions to the MouseEvent Interface"},{"refs":[{"id":"ref-for-initial-containing-block\u2461\u2466"},{"id":"ref-for-initial-containing-block\u2461\u2467"}],"title":"12.1. The VisualViewport Interface"}],"url":"https://drafts.csswg.org/css-display-4/#initial-containing-block"}, "8e39589a": {"dfnID":"8e39589a","dfnText":"block box","external":true,"refSections":[{"refs":[{"id":"ref-for-block-box"}],"title":"6. \nExtensions to the Element Interface"}],"url":"https://drafts.csswg.org/css-display-4/#block-box"}, "91bfbe18": {"dfnID":"91bfbe18","dfnText":"opacity","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-opacity"}],"title":"6. \nExtensions to the Element Interface"}],"url":"https://drafts.csswg.org/css-color-4/#propdef-opacity"}, "91c1cfa1": {"dfnID":"91c1cfa1","dfnText":"smooth","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-scroll-behavior-smooth"}],"title":"3.1. Scrolling"}],"url":"https://drafts.csswg.org/css-overflow-3/#valdef-scroll-behavior-smooth"}, "94039a0c": {"dfnID":"94039a0c","dfnText":"WindowProxy","external":true,"refSections":[{"refs":[{"id":"ref-for-windowproxy"}],"title":"4. Extensions to the Window Interface"}],"url":"https://html.spec.whatwg.org/multipage/nav-history-apis.html#windowproxy"}, "95d8b94a": {"dfnID":"95d8b94a","dfnText":"remove an event listener","external":true,"refSections":[{"refs":[{"id":"ref-for-remove-an-event-listener"}],"title":"4.2. The MediaQueryList Interface"}],"url":"https://dom.spec.whatwg.org/#remove-an-event-listener"}, "96c16e60": {"dfnID":"96c16e60","dfnText":"Node","external":true,"refSections":[{"refs":[{"id":"ref-for-node"}],"title":"5.1. The CaretPosition Interface"}],"url":"https://dom.spec.whatwg.org/#node"}, "98cc1c03": {"dfnID":"98cc1c03","dfnText":"auto (for scroll-behavior)","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-scroll-behavior-auto"}],"title":"Changes From 17 December 2013 To 31 January 2020"}],"url":"https://drafts.csswg.org/css-overflow-3/#valdef-scroll-behavior-auto"}, "9958418a": {"dfnID":"9958418a","dfnText":"overflow-y","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-overflow-y"},{"id":"ref-for-propdef-overflow-y\u2460"}],"title":"2. Terminology"}],"url":"https://drafts.csswg.org/css-overflow-3/#propdef-overflow-y"}, "9a79f3c4": {"dfnID":"9a79f3c4","dfnText":"serialize a media query list","external":true,"refSections":[{"refs":[{"id":"ref-for-serialize-a-media-query-list"}],"title":"4.2. The MediaQueryList Interface"}],"url":"https://drafts.csswg.org/cssom-1/#serialize-a-media-query-list"}, "9bfc28f6": {"dfnID":"9bfc28f6","dfnText":"pseudo-element","external":true,"refSections":[{"refs":[{"id":"ref-for-pseudo-element"}],"title":"3.1. Scrolling"},{"refs":[{"id":"ref-for-pseudo-element\u2460"},{"id":"ref-for-pseudo-element\u2461"},{"id":"ref-for-pseudo-element\u2462"}],"title":"6.1. Element Scrolling Members"}],"url":"https://drafts.csswg.org/selectors-4/#pseudo-element"}, "9cce47fd": {"dfnID":"9cce47fd","dfnText":"sequence","external":true,"refSections":[{"refs":[{"id":"ref-for-idl-sequence"},{"id":"ref-for-idl-sequence\u2460"}],"title":"5. Extensions to the Document Interface"},{"refs":[{"id":"ref-for-idl-sequence\u2461"}],"title":"11.1. The GeometryUtils Interface"}],"url":"https://webidl.spec.whatwg.org/#idl-sequence"}, "9d386f55": {"dfnID":"9d386f55","dfnText":"event handler event type","external":true,"refSections":[{"refs":[{"id":"ref-for-event-handler-event-type"},{"id":"ref-for-event-handler-event-type\u2460"}],"title":"4.2. The MediaQueryList Interface"}],"url":"https://html.spec.whatwg.org/multipage/webappapis.html#event-handler-event-type"}, "9ddea951": {"dfnID":"9ddea951","dfnText":"px","external":true,"refSections":[{"refs":[{"id":"ref-for-px"}],"title":"2.1. CSS pixels"},{"refs":[{"id":"ref-for-px\u2460"},{"id":"ref-for-px\u2461"},{"id":"ref-for-px\u2462"},{"id":"ref-for-px\u2463"},{"id":"ref-for-px\u2464"}],"title":"2.3. Web-exposed screen information"},{"refs":[{"id":"ref-for-px\u2465"},{"id":"ref-for-px\u2466"},{"id":"ref-for-px\u2467"},{"id":"ref-for-px\u2468"},{"id":"ref-for-px\u2460\u24ea"},{"id":"ref-for-px\u2460\u2460"},{"id":"ref-for-px\u2460\u2461"},{"id":"ref-for-px\u2460\u2462"},{"id":"ref-for-px\u2460\u2463"},{"id":"ref-for-px\u2460\u2464"}],"title":"4. Extensions to the Window Interface"},{"refs":[{"id":"ref-for-px\u2460\u2465"},{"id":"ref-for-px\u2460\u2466"},{"id":"ref-for-px\u2460\u2467"},{"id":"ref-for-px\u2460\u2468"}],"title":"4.1. The features argument to the open() method"}],"url":"https://drafts.csswg.org/css-values-4/#px"}, "a00822b3": {"dfnID":"a00822b3","dfnText":"anonymous","external":true,"refSections":[{"refs":[{"id":"ref-for-anonymous"}],"title":"6. \nExtensions to the Element Interface"}],"url":"https://drafts.csswg.org/css-display-4/#anonymous"}, "a5c2148a": {"dfnID":"a5c2148a","dfnText":"parse a media query list","external":true,"refSections":[{"refs":[{"id":"ref-for-parse-a-media-query-list"}],"title":"4. Extensions to the Window Interface"}],"url":"https://drafts.csswg.org/cssom-1/#parse-a-media-query-list"}, "a5c91173": {"dfnID":"a5c91173","dfnText":"SameObject","external":true,"refSections":[{"refs":[{"id":"ref-for-SameObject"},{"id":"ref-for-SameObject\u2460"}],"title":"4. Extensions to the Window Interface"}],"url":"https://webidl.spec.whatwg.org/#SameObject"}, "a973e0fe": {"dfnID":"a973e0fe","dfnText":"document","external":true,"refSections":[{"refs":[{"id":"ref-for-concept-document"},{"id":"ref-for-concept-document\u2460"}],"title":"12.1. The VisualViewport Interface"}],"url":"https://dom.spec.whatwg.org/#concept-document"}, "abb2bed7": {"dfnID":"abb2bed7","dfnText":"table","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-display-table"}],"title":"6. \nExtensions to the Element Interface"}],"url":"https://drafts.csswg.org/css-display-4/#valdef-display-table"}, "abbd4058": {"dfnID":"abbd4058","dfnText":"rect","external":true,"refSections":[{"refs":[{"id":"ref-for-elementdef-rect"}],"title":"2. Terminology"}],"url":"https://svgwg.org/svg2-draft/shapes.html#elementdef-rect"}, "ae8def21": {"dfnID":"ae8def21","dfnText":"contain","external":true,"refSections":[{"refs":[{"id":"ref-for-list-contain"}],"title":"4.2. The MediaQueryList Interface"}],"url":"https://infra.spec.whatwg.org/#list-contain"}, "b06cd527": {"dfnID":"b06cd527","dfnText":"scroll snap container","external":true,"refSections":[{"refs":[{"id":"ref-for-scroll-snap-container"}],"title":"6.1. Element Scrolling Members"},{"refs":[{"id":"ref-for-scroll-snap-container\u2460"},{"id":"ref-for-scroll-snap-container\u2461"},{"id":"ref-for-scroll-snap-container\u2462"}],"title":"13.2. Scrolling"}],"url":"https://drafts.csswg.org/css-scroll-snap-1/#scroll-snap-container"}, "b08d0bb2": {"dfnID":"b08d0bb2","dfnText":"HTMLElement","external":true,"refSections":[{"refs":[{"id":"ref-for-htmlelement"},{"id":"ref-for-htmlelement\u2460"}],"title":"7. Extensions to the HTMLElement Interface"}],"url":"https://html.spec.whatwg.org/multipage/dom.html#htmlelement"}, "b7221005": {"dfnID":"b7221005","dfnText":"fixed","external":true,"refSections":[{"refs":[{"id":"ref-for-valdef-position-fixed"},{"id":"ref-for-valdef-position-fixed\u2460"}],"title":"7. Extensions to the HTMLElement Interface"}],"url":"https://drafts.csswg.org/css-position-3/#valdef-position-fixed"}, "b7e0bc03": {"dfnID":"b7e0bc03","dfnText":"border edge","external":true,"refSections":[{"refs":[{"id":"ref-for-border-edge"},{"id":"ref-for-border-edge\u2460"},{"id":"ref-for-border-edge\u2461"},{"id":"ref-for-border-edge\u2462"}],"title":"6. \nExtensions to the Element Interface"},{"refs":[{"id":"ref-for-border-edge\u2463"},{"id":"ref-for-border-edge\u2464"},{"id":"ref-for-border-edge\u2465"},{"id":"ref-for-border-edge\u2466"}],"title":"7. Extensions to the HTMLElement Interface"},{"refs":[{"id":"ref-for-border-edge\u2467"},{"id":"ref-for-border-edge\u2468"}],"title":"8. Extensions to the HTMLImageElement Interface"}],"url":"https://drafts.csswg.org/css-box-4/#border-edge"}, "b8a0ba74": {"dfnID":"b8a0ba74","dfnText":"position","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-position"},{"id":"ref-for-propdef-position\u2460"},{"id":"ref-for-propdef-position\u2461"}],"title":"7. Extensions to the HTMLElement Interface"}],"url":"https://drafts.csswg.org/css-position-3/#propdef-position"}, "beginning-edges": {"dfnID":"beginning-edges","dfnText":"beginning edges","external":false,"refSections":[{"refs":[{"id":"ref-for-beginning-edges"},{"id":"ref-for-beginning-edges\u2460"}],"title":"3.1. Scrolling"},{"refs":[{"id":"ref-for-beginning-edges\u2461"},{"id":"ref-for-beginning-edges\u2462"}],"title":"6.1. Element Scrolling Members"}],"url":"#beginning-edges"}, "c3469cd0": {"dfnID":"c3469cd0","dfnText":"MouseEvent","external":true,"refSections":[{"refs":[{"id":"ref-for-mouseevent"},{"id":"ref-for-mouseevent\u2460"}],"title":"10. Extensions to the MouseEvent Interface"},{"refs":[{"id":"ref-for-mouseevent\u2461"}],"title":"15. Security and Privacy Considerations"}],"url":"https://w3c.github.io/uievents/#mouseevent"}, "c3bd6e1d": {"dfnID":"c3bd6e1d","dfnText":"box fragment","external":true,"refSections":[{"refs":[{"id":"ref-for-box-fragment"}],"title":"6. \nExtensions to the Element Interface"}],"url":"https://drafts.csswg.org/css-break-4/#box-fragment"}, "c51ad875": {"dfnID":"c51ad875","dfnText":"the body element","external":true,"refSections":[{"refs":[{"id":"ref-for-the-body-element-2"}],"title":"2. Terminology"},{"refs":[{"id":"ref-for-the-body-element-2\u2460"},{"id":"ref-for-the-body-element-2\u2461"},{"id":"ref-for-the-body-element-2\u2462"},{"id":"ref-for-the-body-element-2\u2463"},{"id":"ref-for-the-body-element-2\u2464"}],"title":"5. Extensions to the Document Interface"},{"refs":[{"id":"ref-for-the-body-element-2\u2465"},{"id":"ref-for-the-body-element-2\u2466"},{"id":"ref-for-the-body-element-2\u2467"},{"id":"ref-for-the-body-element-2\u2468"},{"id":"ref-for-the-body-element-2\u2460\u24ea"},{"id":"ref-for-the-body-element-2\u2460\u2460"},{"id":"ref-for-the-body-element-2\u2460\u2461"},{"id":"ref-for-the-body-element-2\u2460\u2462"},{"id":"ref-for-the-body-element-2\u2460\u2463"}],"title":"6. \nExtensions to the Element Interface"},{"refs":[{"id":"ref-for-the-body-element-2\u2460\u2464"},{"id":"ref-for-the-body-element-2\u2460\u2465"},{"id":"ref-for-the-body-element-2\u2460\u2466"},{"id":"ref-for-the-body-element-2\u2460\u2467"}],"title":"7. Extensions to the HTMLElement Interface"}],"url":"https://html.spec.whatwg.org/multipage/dom.html#the-body-element-2"}, "c5891539": {"dfnID":"c5891539","dfnText":"HTMLImageElement","external":true,"refSections":[{"refs":[{"id":"ref-for-htmlimageelement"},{"id":"ref-for-htmlimageelement\u2460"}],"title":"8. Extensions to the HTMLImageElement Interface"}],"url":"https://html.spec.whatwg.org/multipage/embedded-content.html#htmlimageelement"}, "c628f0f9": {"dfnID":"c628f0f9","dfnText":"effective zoom","external":true,"refSections":[{"refs":[{"id":"ref-for-effective-zoom"}],"title":"6. \nExtensions to the Element Interface"},{"refs":[{"id":"ref-for-effective-zoom\u2460"}],"title":"7. Extensions to the HTMLElement Interface"}],"url":"https://drafts.csswg.org/css-viewport/#effective-zoom"}, "c6d19e56": {"dfnID":"c6d19e56","dfnText":"event loop","external":true,"refSections":[{"refs":[{"id":"ref-for-event-loop"}],"title":"4.2. The MediaQueryList Interface"},{"refs":[{"id":"ref-for-event-loop\u2460"}],"title":"13.1. Resizing viewports"},{"refs":[{"id":"ref-for-event-loop\u2461"}],"title":"13.2. Scrolling"},{"refs":[{"id":"ref-for-event-loop\u2462"}],"title":"Changes From 17 December 2013 To 31 January 2020"}],"url":"https://html.spec.whatwg.org/multipage/webappapis.html#event-loop"}, "c807e273": {"dfnID":"c807e273","dfnText":"NewObject","external":true,"refSections":[{"refs":[{"id":"ref-for-NewObject"}],"title":"4. Extensions to the Window Interface"},{"refs":[{"id":"ref-for-NewObject\u2460"}],"title":"5.1. The CaretPosition Interface"},{"refs":[{"id":"ref-for-NewObject\u2461"}],"title":"6. \nExtensions to the Element Interface"},{"refs":[{"id":"ref-for-NewObject\u2462"}],"title":"9. Extensions to the Range Interface"}],"url":"https://webidl.spec.whatwg.org/#NewObject"}, "cadf5fe9": {"dfnID":"cadf5fe9","dfnText":"converted to an IDL value","external":true,"refSections":[{"refs":[{"id":"ref-for-dfn-convert-ecmascript-to-idl-value"},{"id":"ref-for-dfn-convert-ecmascript-to-idl-value\u2460"}],"title":"4. Extensions to the Window Interface"},{"refs":[{"id":"ref-for-dfn-convert-ecmascript-to-idl-value\u2461"},{"id":"ref-for-dfn-convert-ecmascript-to-idl-value\u2462"}],"title":"6. \nExtensions to the Element Interface"}],"url":"https://webidl.spec.whatwg.org/#dfn-convert-ecmascript-to-idl-value"}, "caret-node": {"dfnID":"caret-node","dfnText":"caret node","external":false,"refSections":[{"refs":[{"id":"ref-for-caret-node"},{"id":"ref-for-caret-node\u2460"}],"title":"5. Extensions to the Document Interface"},{"refs":[{"id":"ref-for-caret-node\u2461"},{"id":"ref-for-caret-node\u2462"},{"id":"ref-for-caret-node\u2463"}],"title":"5.1. The CaretPosition Interface"}],"url":"#caret-node"}, "caret-offset": {"dfnID":"caret-offset","dfnText":"caret offset","external":false,"refSections":[{"refs":[{"id":"ref-for-caret-offset"},{"id":"ref-for-caret-offset\u2460"}],"title":"5. Extensions to the Document Interface"},{"refs":[{"id":"ref-for-caret-offset\u2461"},{"id":"ref-for-caret-offset\u2462"},{"id":"ref-for-caret-offset\u2463"}],"title":"5.1. The CaretPosition Interface"}],"url":"#caret-offset"}, "caret-position": {"dfnID":"caret-position","dfnText":"caret position","external":false,"refSections":[{"refs":[{"id":"ref-for-caret-position"},{"id":"ref-for-caret-position\u2460"},{"id":"ref-for-caret-position\u2461"}],"title":"5. Extensions to the Document Interface"}],"url":"#caret-position"}, "caretposition": {"dfnID":"caretposition","dfnText":"CaretPosition","external":false,"refSections":[{"refs":[{"id":"ref-for-caretposition"}],"title":"5. Extensions to the Document Interface"},{"refs":[{"id":"ref-for-caretposition\u2460"},{"id":"ref-for-caretposition\u2461"}],"title":"5.1. The CaretPosition Interface"}],"url":"#caretposition"}, "cc682c89": {"dfnID":"cc682c89","dfnText":"root element","external":true,"refSections":[{"refs":[{"id":"ref-for-root-element"}],"title":"3.1. Scrolling"},{"refs":[{"id":"ref-for-root-element\u2460"}],"title":"4. Extensions to the Window Interface"},{"refs":[{"id":"ref-for-root-element\u2461"},{"id":"ref-for-root-element\u2462"},{"id":"ref-for-root-element\u2463"},{"id":"ref-for-root-element\u2464"},{"id":"ref-for-root-element\u2465"},{"id":"ref-for-root-element\u2466"},{"id":"ref-for-root-element\u2467"}],"title":"5. Extensions to the Document Interface"},{"refs":[{"id":"ref-for-root-element\u2468"},{"id":"ref-for-root-element\u2460\u24ea"},{"id":"ref-for-root-element\u2460\u2460"},{"id":"ref-for-root-element\u2460\u2461"},{"id":"ref-for-root-element\u2460\u2462"},{"id":"ref-for-root-element\u2460\u2463"},{"id":"ref-for-root-element\u2460\u2464"},{"id":"ref-for-root-element\u2460\u2465"},{"id":"ref-for-root-element\u2460\u2466"},{"id":"ref-for-root-element\u2460\u2467"},{"id":"ref-for-root-element\u2460\u2468"},{"id":"ref-for-root-element\u2461\u24ea"},{"id":"ref-for-root-element\u2461\u2460"},{"id":"ref-for-root-element\u2461\u2461"}],"title":"6. \nExtensions to the Element Interface"},{"refs":[{"id":"ref-for-root-element\u2461\u2462"}],"title":"6.1. Element Scrolling Members"},{"refs":[{"id":"ref-for-root-element\u2461\u2463"}],"title":"7. Extensions to the HTMLElement Interface"}],"url":"https://drafts.csswg.org/css-display-4/#root-element"}, "ce720392": {"dfnID":"ce720392","dfnText":"shadow root","external":true,"refSections":[{"refs":[{"id":"ref-for-concept-element-shadow-root"}],"title":"5. Extensions to the Document Interface"}],"url":"https://dom.spec.whatwg.org/#concept-element-shadow-root"}, "cf493b79": {"dfnID":"cf493b79","dfnText":"canvas","external":true,"refSections":[{"refs":[{"id":"ref-for-canvas"}],"title":"2. Terminology"}],"url":"https://drafts.csswg.org/css2/#canvas"}, "concept-instant-scroll": {"dfnID":"concept-instant-scroll","dfnText":"instant scroll","external":false,"refSections":[{"refs":[{"id":"ref-for-concept-instant-scroll"},{"id":"ref-for-concept-instant-scroll\u2460"},{"id":"ref-for-concept-instant-scroll\u2461"}],"title":"3.1. Scrolling"}],"url":"#concept-instant-scroll"}, "concept-smooth-scroll": {"dfnID":"concept-smooth-scroll","dfnText":"smooth scroll","external":false,"refSections":[{"refs":[{"id":"ref-for-concept-smooth-scroll"},{"id":"ref-for-concept-smooth-scroll\u2460"},{"id":"ref-for-concept-smooth-scroll\u2461"}],"title":"3.1. Scrolling"},{"refs":[{"id":"ref-for-concept-smooth-scroll\u2462"}],"title":"4. Extensions to the Window Interface"},{"refs":[{"id":"ref-for-concept-smooth-scroll\u2463"},{"id":"ref-for-concept-smooth-scroll\u2464"}],"title":"6.1. Element Scrolling Members"}],"url":"#concept-smooth-scroll"}, "d03d8a56": {"dfnID":"d03d8a56","dfnText":"element (for Attr)","external":true,"refSections":[{"refs":[{"id":"ref-for-concept-attribute-element"}],"title":"6.1. Element Scrolling Members"}],"url":"https://dom.spec.whatwg.org/#concept-attribute-element"}, "d2bd0bce": {"dfnID":"d2bd0bce","dfnText":"Range","external":true,"refSections":[{"refs":[{"id":"ref-for-range"}],"title":"5.1. The CaretPosition Interface"},{"refs":[{"id":"ref-for-range\u2460"},{"id":"ref-for-range\u2461"}],"title":"9. Extensions to the Range Interface"}],"url":"https://dom.spec.whatwg.org/#range"}, "d30f4c38": {"dfnID":"d30f4c38","dfnText":"EventListener","external":true,"refSections":[{"refs":[{"id":"ref-for-callbackdef-eventlistener"},{"id":"ref-for-callbackdef-eventlistener\u2460"}],"title":"4.2. The MediaQueryList Interface"}],"url":"https://dom.spec.whatwg.org/#callbackdef-eventlistener"}, "d462b34f": {"dfnID":"d462b34f","dfnText":"node","external":true,"refSections":[{"refs":[{"id":"ref-for-boundary-point-node"}],"title":"5. Extensions to the Document Interface"}],"url":"https://dom.spec.whatwg.org/#boundary-point-node"}, "d729a9ff": {"dfnID":"d729a9ff","dfnText":"parent","external":true,"refSections":[{"refs":[{"id":"ref-for-concept-tree-parent"}],"title":"5. Extensions to the Document Interface"}],"url":"https://dom.spec.whatwg.org/#concept-tree-parent"}, "d773d0d1": {"dfnID":"d773d0d1","dfnText":"rules for parsing integers","external":true,"refSections":[{"refs":[{"id":"ref-for-rules-for-parsing-integers"},{"id":"ref-for-rules-for-parsing-integers\u2460"},{"id":"ref-for-rules-for-parsing-integers\u2461"},{"id":"ref-for-rules-for-parsing-integers\u2462"}],"title":"4.1. The features argument to the open() method"}],"url":"https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#rules-for-parsing-integers"}, "dc6c63f7": {"dfnID":"dc6c63f7","dfnText":"eventual snap target","external":true,"refSections":[{"refs":[{"id":"ref-for-eventual-snap-target"},{"id":"ref-for-eventual-snap-target\u2460"},{"id":"ref-for-eventual-snap-target\u2461"},{"id":"ref-for-eventual-snap-target\u2462"}],"title":"13.2. Scrolling"}],"url":"https://drafts.csswg.org/css-scroll-snap-2/#eventual-snap-target"}, "determine-the-device-pixel-ratio": {"dfnID":"determine-the-device-pixel-ratio","dfnText":"determine the device pixel ratio","external":false,"refSections":[],"url":"#determine-the-device-pixel-ratio"}, "determine-the-scroll-into-view-position": {"dfnID":"determine-the-scroll-into-view-position","dfnText":"determine the scroll-into-view position","external":false,"refSections":[{"refs":[{"id":"ref-for-determine-the-scroll-into-view-position"}],"title":"6.1. Element Scrolling Members"}],"url":"#determine-the-scroll-into-view-position"}, "df19338c": {"dfnID":"df19338c","dfnText":"box tree","external":true,"refSections":[{"refs":[{"id":"ref-for-box-tree"}],"title":"6. \nExtensions to the Element Interface"}],"url":"https://drafts.csswg.org/css-display-4/#box-tree"}, "dictdef-boxquadoptions": {"dfnID":"dictdef-boxquadoptions","dfnText":"BoxQuadOptions","external":false,"refSections":[{"refs":[{"id":"ref-for-dictdef-boxquadoptions"}],"title":"11.1. The GeometryUtils Interface"}],"url":"#dictdef-boxquadoptions"}, "dictdef-caretpositionfrompointoptions": {"dfnID":"dictdef-caretpositionfrompointoptions","dfnText":"CaretPositionFromPointOptions","external":false,"refSections":[{"refs":[{"id":"ref-for-dictdef-caretpositionfrompointoptions"}],"title":"5. Extensions to the Document Interface"}],"url":"#dictdef-caretpositionfrompointoptions"}, "dictdef-checkvisibilityoptions": {"dfnID":"dictdef-checkvisibilityoptions","dfnText":"CheckVisibilityOptions","external":false,"refSections":[{"refs":[{"id":"ref-for-dictdef-checkvisibilityoptions"}],"title":"6. \nExtensions to the Element Interface"}],"url":"#dictdef-checkvisibilityoptions"}, "dictdef-convertcoordinateoptions": {"dfnID":"dictdef-convertcoordinateoptions","dfnText":"ConvertCoordinateOptions","external":false,"refSections":[{"refs":[{"id":"ref-for-dictdef-convertcoordinateoptions"},{"id":"ref-for-dictdef-convertcoordinateoptions\u2460"},{"id":"ref-for-dictdef-convertcoordinateoptions\u2461"}],"title":"11.1. The GeometryUtils Interface"}],"url":"#dictdef-convertcoordinateoptions"}, "dictdef-mediaquerylisteventinit": {"dfnID":"dictdef-mediaquerylisteventinit","dfnText":"MediaQueryListEventInit","external":false,"refSections":[{"refs":[{"id":"ref-for-dictdef-mediaquerylisteventinit"}],"title":"4.2. The MediaQueryList Interface"}],"url":"#dictdef-mediaquerylisteventinit"}, "dictdef-scrollintoviewoptions": {"dfnID":"dictdef-scrollintoviewoptions","dfnText":"ScrollIntoViewOptions","external":false,"refSections":[{"refs":[{"id":"ref-for-dictdef-scrollintoviewoptions"},{"id":"ref-for-dictdef-scrollintoviewoptions\u2460"}],"title":"6. \nExtensions to the Element Interface"}],"url":"#dictdef-scrollintoviewoptions"}, "dictdef-scrolloptions": {"dfnID":"dictdef-scrolloptions","dfnText":"ScrollOptions","external":false,"refSections":[{"refs":[{"id":"ref-for-dictdef-scrolloptions"}],"title":"4. Extensions to the Window Interface"},{"refs":[{"id":"ref-for-dictdef-scrolloptions\u2460"}],"title":"6. \nExtensions to the Element Interface"}],"url":"#dictdef-scrolloptions"}, "dictdef-scrolltooptions": {"dfnID":"dictdef-scrolltooptions","dfnText":"ScrollToOptions","external":false,"refSections":[{"refs":[{"id":"ref-for-dictdef-scrolltooptions"},{"id":"ref-for-dictdef-scrolltooptions\u2460"},{"id":"ref-for-dictdef-scrolltooptions\u2461"},{"id":"ref-for-dictdef-scrolltooptions\u2462"},{"id":"ref-for-dictdef-scrolltooptions\u2463"}],"title":"4. Extensions to the Window Interface"},{"refs":[{"id":"ref-for-dictdef-scrolltooptions\u2464"},{"id":"ref-for-dictdef-scrolltooptions\u2465"},{"id":"ref-for-dictdef-scrolltooptions\u2466"},{"id":"ref-for-dictdef-scrolltooptions\u2467"},{"id":"ref-for-dictdef-scrolltooptions\u2468"}],"title":"6. \nExtensions to the Element Interface"}],"url":"#dictdef-scrolltooptions"}, "document-pending-scroll-event-targets": {"dfnID":"document-pending-scroll-event-targets","dfnText":"pending scroll event targets","external":false,"refSections":[{"refs":[{"id":"ref-for-document-pending-scroll-event-targets"},{"id":"ref-for-document-pending-scroll-event-targets\u2460"},{"id":"ref-for-document-pending-scroll-event-targets\u2461"},{"id":"ref-for-document-pending-scroll-event-targets\u2462"},{"id":"ref-for-document-pending-scroll-event-targets\u2463"},{"id":"ref-for-document-pending-scroll-event-targets\u2464"},{"id":"ref-for-document-pending-scroll-event-targets\u2465"},{"id":"ref-for-document-pending-scroll-event-targets\u2466"}],"title":"13.2. Scrolling"}],"url":"#document-pending-scroll-event-targets"}, "document-pending-scrollend-event-targets": {"dfnID":"document-pending-scrollend-event-targets","dfnText":"pending scrollend event targets","external":false,"refSections":[{"refs":[{"id":"ref-for-document-pending-scrollend-event-targets"},{"id":"ref-for-document-pending-scrollend-event-targets\u2460"},{"id":"ref-for-document-pending-scrollend-event-targets\u2461"},{"id":"ref-for-document-pending-scrollend-event-targets\u2462"}],"title":"13.2. Scrolling"}],"url":"#document-pending-scrollend-event-targets"}, "document-run-the-resize-steps": {"dfnID":"document-run-the-resize-steps","dfnText":"run the resize steps","external":false,"refSections":[],"url":"#document-run-the-resize-steps"}, "document-run-the-scroll-steps": {"dfnID":"document-run-the-scroll-steps","dfnText":"run the scroll steps","external":false,"refSections":[],"url":"#document-run-the-scroll-steps"}, "dom-boxquadoptions-box": {"dfnID":"dom-boxquadoptions-box","dfnText":"box","external":false,"refSections":[],"url":"#dom-boxquadoptions-box"}, "dom-boxquadoptions-relativeto": {"dfnID":"dom-boxquadoptions-relativeto","dfnText":"relativeTo","external":false,"refSections":[],"url":"#dom-boxquadoptions-relativeto"}, "dom-caretposition-getclientrect": {"dfnID":"dom-caretposition-getclientrect","dfnText":"getClientRect()","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-caretposition-getclientrect"}],"title":"5.1. The CaretPosition Interface"}],"url":"#dom-caretposition-getclientrect"}, "dom-caretposition-offset": {"dfnID":"dom-caretposition-offset","dfnText":"offset","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-caretposition-offset"}],"title":"5.1. The CaretPosition Interface"}],"url":"#dom-caretposition-offset"}, "dom-caretposition-offsetnode": {"dfnID":"dom-caretposition-offsetnode","dfnText":"offsetNode","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-caretposition-offsetnode"}],"title":"5.1. The CaretPosition Interface"}],"url":"#dom-caretposition-offsetnode"}, "dom-caretpositionfrompointoptions-shadowroots": {"dfnID":"dom-caretpositionfrompointoptions-shadowroots","dfnText":"shadowRoots","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-caretpositionfrompointoptions-shadowroots"}],"title":"5. Extensions to the Document Interface"}],"url":"#dom-caretpositionfrompointoptions-shadowroots"}, "dom-checkvisibilityoptions-checkopacity": {"dfnID":"dom-checkvisibilityoptions-checkopacity","dfnText":"checkOpacity","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-checkvisibilityoptions-checkopacity"},{"id":"ref-for-dom-checkvisibilityoptions-checkopacity\u2460"}],"title":"6. \nExtensions to the Element Interface"}],"url":"#dom-checkvisibilityoptions-checkopacity"}, "dom-checkvisibilityoptions-checkvisibilitycss": {"dfnID":"dom-checkvisibilityoptions-checkvisibilitycss","dfnText":"checkVisibilityCSS","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-checkvisibilityoptions-checkvisibilitycss"},{"id":"ref-for-dom-checkvisibilityoptions-checkvisibilitycss\u2460"}],"title":"6. \nExtensions to the Element Interface"}],"url":"#dom-checkvisibilityoptions-checkvisibilitycss"}, "dom-checkvisibilityoptions-contentvisibilityauto": {"dfnID":"dom-checkvisibilityoptions-contentvisibilityauto","dfnText":"contentVisibilityAuto","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-checkvisibilityoptions-contentvisibilityauto"}],"title":"6. \nExtensions to the Element Interface"}],"url":"#dom-checkvisibilityoptions-contentvisibilityauto"}, "dom-checkvisibilityoptions-opacityproperty": {"dfnID":"dom-checkvisibilityoptions-opacityproperty","dfnText":"opacityProperty","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-checkvisibilityoptions-opacityproperty"},{"id":"ref-for-dom-checkvisibilityoptions-opacityproperty\u2460"}],"title":"6. \nExtensions to the Element Interface"}],"url":"#dom-checkvisibilityoptions-opacityproperty"}, "dom-checkvisibilityoptions-visibilityproperty": {"dfnID":"dom-checkvisibilityoptions-visibilityproperty","dfnText":"visibilityProperty","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-checkvisibilityoptions-visibilityproperty"},{"id":"ref-for-dom-checkvisibilityoptions-visibilityproperty\u2460"}],"title":"6. \nExtensions to the Element Interface"}],"url":"#dom-checkvisibilityoptions-visibilityproperty"}, "dom-convertcoordinateoptions-frombox": {"dfnID":"dom-convertcoordinateoptions-frombox","dfnText":"fromBox","external":false,"refSections":[],"url":"#dom-convertcoordinateoptions-frombox"}, "dom-convertcoordinateoptions-tobox": {"dfnID":"dom-convertcoordinateoptions-tobox","dfnText":"toBox","external":false,"refSections":[],"url":"#dom-convertcoordinateoptions-tobox"}, "dom-cssboxtype-border": {"dfnID":"dom-cssboxtype-border","dfnText":"\"border\"","external":false,"refSections":[],"url":"#dom-cssboxtype-border"}, "dom-cssboxtype-content": {"dfnID":"dom-cssboxtype-content","dfnText":"\"content\"","external":false,"refSections":[],"url":"#dom-cssboxtype-content"}, "dom-cssboxtype-margin": {"dfnID":"dom-cssboxtype-margin","dfnText":"\"margin\"","external":false,"refSections":[],"url":"#dom-cssboxtype-margin"}, "dom-cssboxtype-padding": {"dfnID":"dom-cssboxtype-padding","dfnText":"\"padding\"","external":false,"refSections":[],"url":"#dom-cssboxtype-padding"}, "dom-document-caretpositionfrompoint": {"dfnID":"dom-document-caretpositionfrompoint","dfnText":"caretPositionFromPoint(x, y, options)","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-document-caretpositionfrompoint"},{"id":"ref-for-dom-document-caretpositionfrompoint\u2460"}],"title":"5. Extensions to the Document Interface"}],"url":"#dom-document-caretpositionfrompoint"}, "dom-document-caretpositionfrompoint-x-y-options-options": {"dfnID":"dom-document-caretpositionfrompoint-x-y-options-options","dfnText":"options","external":false,"refSections":[],"url":"#dom-document-caretpositionfrompoint-x-y-options-options"}, "dom-document-caretpositionfrompoint-x-y-options-x": {"dfnID":"dom-document-caretpositionfrompoint-x-y-options-x","dfnText":"x","external":false,"refSections":[],"url":"#dom-document-caretpositionfrompoint-x-y-options-x"}, "dom-document-caretpositionfrompoint-x-y-options-y": {"dfnID":"dom-document-caretpositionfrompoint-x-y-options-y","dfnText":"y","external":false,"refSections":[],"url":"#dom-document-caretpositionfrompoint-x-y-options-y"}, "dom-document-elementfrompoint": {"dfnID":"dom-document-elementfrompoint","dfnText":"elementFromPoint(x, y)","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-document-elementfrompoint"},{"id":"ref-for-dom-document-elementfrompoint\u2460"},{"id":"ref-for-dom-document-elementfrompoint\u2461"}],"title":"5. Extensions to the Document Interface"}],"url":"#dom-document-elementfrompoint"}, "dom-document-elementfrompoint-x-y-x": {"dfnID":"dom-document-elementfrompoint-x-y-x","dfnText":"x","external":false,"refSections":[],"url":"#dom-document-elementfrompoint-x-y-x"}, "dom-document-elementfrompoint-x-y-y": {"dfnID":"dom-document-elementfrompoint-x-y-y","dfnText":"y","external":false,"refSections":[],"url":"#dom-document-elementfrompoint-x-y-y"}, "dom-document-elementsfrompoint": {"dfnID":"dom-document-elementsfrompoint","dfnText":"elementsFromPoint(x, y)","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-document-elementsfrompoint"}],"title":"5. Extensions to the Document Interface"},{"refs":[{"id":"ref-for-dom-document-elementsfrompoint\u2460"}],"title":"Changes From 4 August 2011 To 17 December 2013"}],"url":"#dom-document-elementsfrompoint"}, "dom-document-elementsfrompoint-x-y-x": {"dfnID":"dom-document-elementsfrompoint-x-y-x","dfnText":"x","external":false,"refSections":[],"url":"#dom-document-elementsfrompoint-x-y-x"}, "dom-document-elementsfrompoint-x-y-y": {"dfnID":"dom-document-elementsfrompoint-x-y-y","dfnText":"y","external":false,"refSections":[],"url":"#dom-document-elementsfrompoint-x-y-y"}, "dom-document-scrollingelement": {"dfnID":"dom-document-scrollingelement","dfnText":"scrollingElement","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-document-scrollingelement"},{"id":"ref-for-dom-document-scrollingelement\u2460"}],"title":"5. Extensions to the Document Interface"},{"refs":[{"id":"ref-for-dom-document-scrollingelement\u2461"}],"title":"Changes From 17 December 2013 To 31 January 2020"}],"url":"#dom-document-scrollingelement"}, "dom-element-checkvisibility": {"dfnID":"dom-element-checkvisibility","dfnText":"checkVisibility(options)","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-element-checkvisibility"},{"id":"ref-for-dom-element-checkvisibility\u2460"}],"title":"6. \nExtensions to the Element Interface"},{"refs":[{"id":"ref-for-dom-element-checkvisibility\u2461"}],"title":"Changes From 07 July 2022"}],"url":"#dom-element-checkvisibility"}, "dom-element-checkvisibility-options-options": {"dfnID":"dom-element-checkvisibility-options-options","dfnText":"options","external":false,"refSections":[],"url":"#dom-element-checkvisibility-options-options"}, "dom-element-clientheight": {"dfnID":"dom-element-clientheight","dfnText":"clientHeight","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-element-clientheight"}],"title":"6. \nExtensions to the Element Interface"},{"refs":[{"id":"ref-for-dom-element-clientheight\u2460"}],"title":"Changes From 17 December 2013 To 31 January 2020"}],"url":"#dom-element-clientheight"}, "dom-element-clientleft": {"dfnID":"dom-element-clientleft","dfnText":"clientLeft","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-element-clientleft"}],"title":"6. \nExtensions to the Element Interface"},{"refs":[{"id":"ref-for-dom-element-clientleft\u2460"}],"title":"Changes From 17 December 2013 To 31 January 2020"}],"url":"#dom-element-clientleft"}, "dom-element-clienttop": {"dfnID":"dom-element-clienttop","dfnText":"clientTop","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-element-clienttop"}],"title":"6. \nExtensions to the Element Interface"},{"refs":[{"id":"ref-for-dom-element-clienttop\u2460"}],"title":"Changes From 17 December 2013 To 31 January 2020"}],"url":"#dom-element-clienttop"}, "dom-element-clientwidth": {"dfnID":"dom-element-clientwidth","dfnText":"clientWidth","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-element-clientwidth"}],"title":"6. \nExtensions to the Element Interface"},{"refs":[{"id":"ref-for-dom-element-clientwidth\u2460"}],"title":"Changes From 17 December 2013 To 31 January 2020"}],"url":"#dom-element-clientwidth"}, "dom-element-currentcsszoom": {"dfnID":"dom-element-currentcsszoom","dfnText":"currentCSSZoom","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-element-currentcsszoom"}],"title":"6. \nExtensions to the Element Interface"}],"url":"#dom-element-currentcsszoom"}, "dom-element-getboundingclientrect": {"dfnID":"dom-element-getboundingclientrect","dfnText":"getBoundingClientRect()","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-element-getboundingclientrect"},{"id":"ref-for-dom-element-getboundingclientrect\u2460"}],"title":"6. \nExtensions to the Element Interface"},{"refs":[{"id":"ref-for-dom-element-getboundingclientrect\u2461"}],"title":"6.1. Element Scrolling Members"}],"url":"#dom-element-getboundingclientrect"}, "dom-element-getclientrects": {"dfnID":"dom-element-getclientrects","dfnText":"getClientRects()","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-element-getclientrects"},{"id":"ref-for-dom-element-getclientrects\u2460"},{"id":"ref-for-dom-element-getclientrects\u2461"}],"title":"6. \nExtensions to the Element Interface"},{"refs":[{"id":"ref-for-dom-element-getclientrects\u2462"}],"title":"9. Extensions to the Range Interface"}],"url":"#dom-element-getclientrects"}, "dom-element-scroll": {"dfnID":"dom-element-scroll","dfnText":"scroll()","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-element-scroll"},{"id":"ref-for-dom-element-scroll\u2460"},{"id":"ref-for-dom-element-scroll\u2461"},{"id":"ref-for-dom-element-scroll\u2462"}],"title":"6. \nExtensions to the Element Interface"},{"refs":[{"id":"ref-for-dom-element-scroll\u2463"}],"title":"Changes From 17 December 2013 To 31 January 2020"}],"url":"#dom-element-scroll"}, "dom-element-scroll-options-options": {"dfnID":"dom-element-scroll-options-options","dfnText":"options","external":false,"refSections":[],"url":"#dom-element-scroll-options-options"}, "dom-element-scroll-x-y-x": {"dfnID":"dom-element-scroll-x-y-x","dfnText":"x","external":false,"refSections":[],"url":"#dom-element-scroll-x-y-x"}, "dom-element-scroll-x-y-y": {"dfnID":"dom-element-scroll-x-y-y","dfnText":"y","external":false,"refSections":[],"url":"#dom-element-scroll-x-y-y"}, "dom-element-scrollby": {"dfnID":"dom-element-scrollby","dfnText":"scrollBy()","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-element-scrollby"},{"id":"ref-for-dom-element-scrollby\u2460"}],"title":"6. \nExtensions to the Element Interface"},{"refs":[{"id":"ref-for-dom-element-scrollby\u2461"}],"title":"Changes From 17 December 2013 To 31 January 2020"}],"url":"#dom-element-scrollby"}, "dom-element-scrollby-options-options": {"dfnID":"dom-element-scrollby-options-options","dfnText":"options","external":false,"refSections":[],"url":"#dom-element-scrollby-options-options"}, "dom-element-scrollby-x-y-x": {"dfnID":"dom-element-scrollby-x-y-x","dfnText":"x","external":false,"refSections":[],"url":"#dom-element-scrollby-x-y-x"}, "dom-element-scrollby-x-y-y": {"dfnID":"dom-element-scrollby-x-y-y","dfnText":"y","external":false,"refSections":[],"url":"#dom-element-scrollby-x-y-y"}, "dom-element-scrollheight": {"dfnID":"dom-element-scrollheight","dfnText":"scrollHeight","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-element-scrollheight"}],"title":"6. \nExtensions to the Element Interface"},{"refs":[{"id":"ref-for-dom-element-scrollheight\u2460"}],"title":"Changes From 17 December 2013 To 31 January 2020"}],"url":"#dom-element-scrollheight"}, "dom-element-scrollintoview": {"dfnID":"dom-element-scrollintoview","dfnText":"scrollIntoView(arg)","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-element-scrollintoview"}],"title":"6. \nExtensions to the Element Interface"},{"refs":[{"id":"ref-for-dom-element-scrollintoview\u2460"},{"id":"ref-for-dom-element-scrollintoview\u2461"}],"title":"Changes From 17 December 2013 To 31 January 2020"}],"url":"#dom-element-scrollintoview"}, "dom-element-scrollintoview-arg-arg": {"dfnID":"dom-element-scrollintoview-arg-arg","dfnText":"arg","external":false,"refSections":[],"url":"#dom-element-scrollintoview-arg-arg"}, "dom-element-scrollleft": {"dfnID":"dom-element-scrollleft","dfnText":"scrollLeft","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-element-scrollleft"}],"title":"5. Extensions to the Document Interface"},{"refs":[{"id":"ref-for-dom-element-scrollleft\u2460"},{"id":"ref-for-dom-element-scrollleft\u2461"},{"id":"ref-for-dom-element-scrollleft\u2462"},{"id":"ref-for-dom-element-scrollleft\u2463"}],"title":"6. \nExtensions to the Element Interface"},{"refs":[{"id":"ref-for-dom-element-scrollleft\u2464"},{"id":"ref-for-dom-element-scrollleft\u2465"}],"title":"Changes From 17 December 2013 To 31 January 2020"}],"url":"#dom-element-scrollleft"}, "dom-element-scrollto": {"dfnID":"dom-element-scrollto","dfnText":"scrollTo()","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-element-scrollto"},{"id":"ref-for-dom-element-scrollto\u2460"}],"title":"6. \nExtensions to the Element Interface"},{"refs":[{"id":"ref-for-dom-element-scrollto\u2461"}],"title":"Changes From 17 December 2013 To 31 January 2020"}],"url":"#dom-element-scrollto"}, "dom-element-scrollto-options-options": {"dfnID":"dom-element-scrollto-options-options","dfnText":"options","external":false,"refSections":[],"url":"#dom-element-scrollto-options-options"}, "dom-element-scrollto-x-y-x": {"dfnID":"dom-element-scrollto-x-y-x","dfnText":"x","external":false,"refSections":[],"url":"#dom-element-scrollto-x-y-x"}, "dom-element-scrollto-x-y-y": {"dfnID":"dom-element-scrollto-x-y-y","dfnText":"y","external":false,"refSections":[],"url":"#dom-element-scrollto-x-y-y"}, "dom-element-scrolltop": {"dfnID":"dom-element-scrolltop","dfnText":"scrollTop","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-element-scrolltop"}],"title":"5. Extensions to the Document Interface"},{"refs":[{"id":"ref-for-dom-element-scrolltop\u2460"},{"id":"ref-for-dom-element-scrolltop\u2461"},{"id":"ref-for-dom-element-scrolltop\u2462"},{"id":"ref-for-dom-element-scrolltop\u2463"}],"title":"6. \nExtensions to the Element Interface"},{"refs":[{"id":"ref-for-dom-element-scrolltop\u2464"}],"title":"Changes From 17 December 2013 To 31 January 2020"}],"url":"#dom-element-scrolltop"}, "dom-element-scrollwidth": {"dfnID":"dom-element-scrollwidth","dfnText":"scrollWidth","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-element-scrollwidth"}],"title":"6. \nExtensions to the Element Interface"},{"refs":[{"id":"ref-for-dom-element-scrollwidth\u2460"}],"title":"Changes From 17 December 2013 To 31 January 2020"}],"url":"#dom-element-scrollwidth"}, "dom-geometryutils-convertpointfromnode": {"dfnID":"dom-geometryutils-convertpointfromnode","dfnText":"convertPointFromNode(point, from, options)","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-geometryutils-convertpointfromnode"}],"title":"11.1. The GeometryUtils Interface"}],"url":"#dom-geometryutils-convertpointfromnode"}, "dom-geometryutils-convertpointfromnode-point-from-options-from": {"dfnID":"dom-geometryutils-convertpointfromnode-point-from-options-from","dfnText":"from","external":false,"refSections":[],"url":"#dom-geometryutils-convertpointfromnode-point-from-options-from"}, "dom-geometryutils-convertpointfromnode-point-from-options-options": {"dfnID":"dom-geometryutils-convertpointfromnode-point-from-options-options","dfnText":"options","external":false,"refSections":[],"url":"#dom-geometryutils-convertpointfromnode-point-from-options-options"}, "dom-geometryutils-convertpointfromnode-point-from-options-point": {"dfnID":"dom-geometryutils-convertpointfromnode-point-from-options-point","dfnText":"point","external":false,"refSections":[],"url":"#dom-geometryutils-convertpointfromnode-point-from-options-point"}, "dom-geometryutils-convertquadfromnode": {"dfnID":"dom-geometryutils-convertquadfromnode","dfnText":"convertQuadFromNode(quad, from, options)","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-geometryutils-convertquadfromnode"}],"title":"11.1. The GeometryUtils Interface"}],"url":"#dom-geometryutils-convertquadfromnode"}, "dom-geometryutils-convertquadfromnode-quad-from-options-from": {"dfnID":"dom-geometryutils-convertquadfromnode-quad-from-options-from","dfnText":"from","external":false,"refSections":[],"url":"#dom-geometryutils-convertquadfromnode-quad-from-options-from"}, "dom-geometryutils-convertquadfromnode-quad-from-options-options": {"dfnID":"dom-geometryutils-convertquadfromnode-quad-from-options-options","dfnText":"options","external":false,"refSections":[],"url":"#dom-geometryutils-convertquadfromnode-quad-from-options-options"}, "dom-geometryutils-convertquadfromnode-quad-from-options-quad": {"dfnID":"dom-geometryutils-convertquadfromnode-quad-from-options-quad","dfnText":"quad","external":false,"refSections":[],"url":"#dom-geometryutils-convertquadfromnode-quad-from-options-quad"}, "dom-geometryutils-convertrectfromnode": {"dfnID":"dom-geometryutils-convertrectfromnode","dfnText":"convertRectFromNode(rect, from, options)","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-geometryutils-convertrectfromnode"}],"title":"11.1. The GeometryUtils Interface"}],"url":"#dom-geometryutils-convertrectfromnode"}, "dom-geometryutils-convertrectfromnode-rect-from-options-from": {"dfnID":"dom-geometryutils-convertrectfromnode-rect-from-options-from","dfnText":"from","external":false,"refSections":[],"url":"#dom-geometryutils-convertrectfromnode-rect-from-options-from"}, "dom-geometryutils-convertrectfromnode-rect-from-options-options": {"dfnID":"dom-geometryutils-convertrectfromnode-rect-from-options-options","dfnText":"options","external":false,"refSections":[],"url":"#dom-geometryutils-convertrectfromnode-rect-from-options-options"}, "dom-geometryutils-convertrectfromnode-rect-from-options-rect": {"dfnID":"dom-geometryutils-convertrectfromnode-rect-from-options-rect","dfnText":"rect","external":false,"refSections":[],"url":"#dom-geometryutils-convertrectfromnode-rect-from-options-rect"}, "dom-geometryutils-getboxquads": {"dfnID":"dom-geometryutils-getboxquads","dfnText":"getBoxQuads(options)","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-geometryutils-getboxquads"}],"title":"11.1. The GeometryUtils Interface"}],"url":"#dom-geometryutils-getboxquads"}, "dom-geometryutils-getboxquads-options-options": {"dfnID":"dom-geometryutils-getboxquads-options-options","dfnText":"options","external":false,"refSections":[],"url":"#dom-geometryutils-getboxquads-options-options"}, "dom-htmlelement-offsetheight": {"dfnID":"dom-htmlelement-offsetheight","dfnText":"offsetHeight","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-htmlelement-offsetheight"}],"title":"7. Extensions to the HTMLElement Interface"}],"url":"#dom-htmlelement-offsetheight"}, "dom-htmlelement-offsetleft": {"dfnID":"dom-htmlelement-offsetleft","dfnText":"offsetLeft","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-htmlelement-offsetleft"}],"title":"7. Extensions to the HTMLElement Interface"}],"url":"#dom-htmlelement-offsetleft"}, "dom-htmlelement-offsetparent": {"dfnID":"dom-htmlelement-offsetparent","dfnText":"offsetParent","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-htmlelement-offsetparent"},{"id":"ref-for-dom-htmlelement-offsetparent\u2460"},{"id":"ref-for-dom-htmlelement-offsetparent\u2461"},{"id":"ref-for-dom-htmlelement-offsetparent\u2462"},{"id":"ref-for-dom-htmlelement-offsetparent\u2463"}],"title":"7. Extensions to the HTMLElement Interface"}],"url":"#dom-htmlelement-offsetparent"}, "dom-htmlelement-offsettop": {"dfnID":"dom-htmlelement-offsettop","dfnText":"offsetTop","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-htmlelement-offsettop"}],"title":"7. Extensions to the HTMLElement Interface"}],"url":"#dom-htmlelement-offsettop"}, "dom-htmlelement-offsetwidth": {"dfnID":"dom-htmlelement-offsetwidth","dfnText":"offsetWidth","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-htmlelement-offsetwidth"}],"title":"7. Extensions to the HTMLElement Interface"}],"url":"#dom-htmlelement-offsetwidth"}, "dom-htmlimageelement-x": {"dfnID":"dom-htmlimageelement-x","dfnText":"x","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-htmlimageelement-x"}],"title":"8. Extensions to the HTMLImageElement Interface"}],"url":"#dom-htmlimageelement-x"}, "dom-htmlimageelement-y": {"dfnID":"dom-htmlimageelement-y","dfnText":"y","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-htmlimageelement-y"}],"title":"8. Extensions to the HTMLImageElement Interface"}],"url":"#dom-htmlimageelement-y"}, "dom-mediaquerylist-addlistener": {"dfnID":"dom-mediaquerylist-addlistener","dfnText":"addListener(callback)","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-mediaquerylist-addlistener"},{"id":"ref-for-dom-mediaquerylist-addlistener\u2460"},{"id":"ref-for-dom-mediaquerylist-addlistener\u2461"}],"title":"4.2. The MediaQueryList Interface"},{"refs":[{"id":"ref-for-dom-mediaquerylist-addlistener\u2462"}],"title":"Changes From 17 December 2013 To 31 January 2020"}],"url":"#dom-mediaquerylist-addlistener"}, "dom-mediaquerylist-addlistener-callback-callback": {"dfnID":"dom-mediaquerylist-addlistener-callback-callback","dfnText":"callback","external":false,"refSections":[],"url":"#dom-mediaquerylist-addlistener-callback-callback"}, "dom-mediaquerylist-matches": {"dfnID":"dom-mediaquerylist-matches","dfnText":"matches","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-mediaquerylist-matches"}],"title":"4.2. The MediaQueryList Interface"}],"url":"#dom-mediaquerylist-matches"}, "dom-mediaquerylist-media": {"dfnID":"dom-mediaquerylist-media","dfnText":"media","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-mediaquerylist-media"},{"id":"ref-for-dom-mediaquerylist-media\u2460"}],"title":"4.2. The MediaQueryList Interface"}],"url":"#dom-mediaquerylist-media"}, "dom-mediaquerylist-onchange": {"dfnID":"dom-mediaquerylist-onchange","dfnText":"onchange","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-mediaquerylist-onchange"}],"title":"4.2. The MediaQueryList Interface"}],"url":"#dom-mediaquerylist-onchange"}, "dom-mediaquerylist-removelistener": {"dfnID":"dom-mediaquerylist-removelistener","dfnText":"removeListener(callback)","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-mediaquerylist-removelistener"},{"id":"ref-for-dom-mediaquerylist-removelistener\u2460"},{"id":"ref-for-dom-mediaquerylist-removelistener\u2461"}],"title":"4.2. The MediaQueryList Interface"}],"url":"#dom-mediaquerylist-removelistener"}, "dom-mediaquerylist-removelistener-callback-callback": {"dfnID":"dom-mediaquerylist-removelistener-callback-callback","dfnText":"callback","external":false,"refSections":[],"url":"#dom-mediaquerylist-removelistener-callback-callback"}, "dom-mediaquerylistevent-matches": {"dfnID":"dom-mediaquerylistevent-matches","dfnText":"matches","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-mediaquerylistevent-matches"},{"id":"ref-for-dom-mediaquerylistevent-matches\u2460"}],"title":"4.2. The MediaQueryList Interface"}],"url":"#dom-mediaquerylistevent-matches"}, "dom-mediaquerylistevent-media": {"dfnID":"dom-mediaquerylistevent-media","dfnText":"media","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-mediaquerylistevent-media"}],"title":"4.2. The MediaQueryList Interface"}],"url":"#dom-mediaquerylistevent-media"}, "dom-mediaquerylistevent-mediaquerylistevent": {"dfnID":"dom-mediaquerylistevent-mediaquerylistevent","dfnText":"constructor","external":false,"refSections":[],"url":"#dom-mediaquerylistevent-mediaquerylistevent"}, "dom-mediaquerylistevent-mediaquerylistevent-type-eventinitdict-eventinitdict": {"dfnID":"dom-mediaquerylistevent-mediaquerylistevent-type-eventinitdict-eventinitdict","dfnText":"eventInitDict","external":false,"refSections":[],"url":"#dom-mediaquerylistevent-mediaquerylistevent-type-eventinitdict-eventinitdict"}, "dom-mediaquerylistevent-mediaquerylistevent-type-eventinitdict-type": {"dfnID":"dom-mediaquerylistevent-mediaquerylistevent-type-eventinitdict-type","dfnText":"type","external":false,"refSections":[],"url":"#dom-mediaquerylistevent-mediaquerylistevent-type-eventinitdict-type"}, "dom-mediaquerylisteventinit-matches": {"dfnID":"dom-mediaquerylisteventinit-matches","dfnText":"matches","external":false,"refSections":[],"url":"#dom-mediaquerylisteventinit-matches"}, "dom-mediaquerylisteventinit-media": {"dfnID":"dom-mediaquerylisteventinit-media","dfnText":"media","external":false,"refSections":[],"url":"#dom-mediaquerylisteventinit-media"}, "dom-mouseevent-clientx": {"dfnID":"dom-mouseevent-clientx","dfnText":"clientX","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-mouseevent-clientx"},{"id":"ref-for-dom-mouseevent-clientx\u2460"},{"id":"ref-for-dom-mouseevent-clientx\u2461"}],"title":"10. Extensions to the MouseEvent Interface"}],"url":"#dom-mouseevent-clientx"}, "dom-mouseevent-clienty": {"dfnID":"dom-mouseevent-clienty","dfnText":"clientY","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-mouseevent-clienty"},{"id":"ref-for-dom-mouseevent-clienty\u2460"},{"id":"ref-for-dom-mouseevent-clienty\u2461"}],"title":"10. Extensions to the MouseEvent Interface"}],"url":"#dom-mouseevent-clienty"}, "dom-mouseevent-offsetx": {"dfnID":"dom-mouseevent-offsetx","dfnText":"offsetX","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-mouseevent-offsetx"}],"title":"10. Extensions to the MouseEvent Interface"}],"url":"#dom-mouseevent-offsetx"}, "dom-mouseevent-offsety": {"dfnID":"dom-mouseevent-offsety","dfnText":"offsetY","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-mouseevent-offsety"}],"title":"10. Extensions to the MouseEvent Interface"}],"url":"#dom-mouseevent-offsety"}, "dom-mouseevent-pagex": {"dfnID":"dom-mouseevent-pagex","dfnText":"pageX","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-mouseevent-pagex"},{"id":"ref-for-dom-mouseevent-pagex\u2460"}],"title":"10. Extensions to the MouseEvent Interface"}],"url":"#dom-mouseevent-pagex"}, "dom-mouseevent-pagey": {"dfnID":"dom-mouseevent-pagey","dfnText":"pageY","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-mouseevent-pagey"},{"id":"ref-for-dom-mouseevent-pagey\u2460"}],"title":"10. Extensions to the MouseEvent Interface"}],"url":"#dom-mouseevent-pagey"}, "dom-mouseevent-screenx": {"dfnID":"dom-mouseevent-screenx","dfnText":"screenX","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-mouseevent-screenx"}],"title":"10. Extensions to the MouseEvent Interface"}],"url":"#dom-mouseevent-screenx"}, "dom-mouseevent-screeny": {"dfnID":"dom-mouseevent-screeny","dfnText":"screenY","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-mouseevent-screeny"}],"title":"10. Extensions to the MouseEvent Interface"}],"url":"#dom-mouseevent-screeny"}, "dom-mouseevent-x": {"dfnID":"dom-mouseevent-x","dfnText":"x","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-mouseevent-x"}],"title":"10. Extensions to the MouseEvent Interface"}],"url":"#dom-mouseevent-x"}, "dom-mouseevent-y": {"dfnID":"dom-mouseevent-y","dfnText":"y","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-mouseevent-y"}],"title":"10. Extensions to the MouseEvent Interface"}],"url":"#dom-mouseevent-y"}, "dom-mouseeventinit-clientx": {"dfnID":"dom-mouseeventinit-clientx","dfnText":"clientX","external":false,"refSections":[],"url":"#dom-mouseeventinit-clientx"}, "dom-mouseeventinit-clienty": {"dfnID":"dom-mouseeventinit-clienty","dfnText":"clientY","external":false,"refSections":[],"url":"#dom-mouseeventinit-clienty"}, "dom-mouseeventinit-screenx": {"dfnID":"dom-mouseeventinit-screenx","dfnText":"screenX","external":false,"refSections":[],"url":"#dom-mouseeventinit-screenx"}, "dom-mouseeventinit-screeny": {"dfnID":"dom-mouseeventinit-screeny","dfnText":"screenY","external":false,"refSections":[],"url":"#dom-mouseeventinit-screeny"}, "dom-range-getboundingclientrect": {"dfnID":"dom-range-getboundingclientrect","dfnText":"getBoundingClientRect()","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-range-getboundingclientrect"}],"title":"5.1. The CaretPosition Interface"},{"refs":[{"id":"ref-for-dom-range-getboundingclientrect\u2460"}],"title":"6.1. Element Scrolling Members"},{"refs":[{"id":"ref-for-dom-range-getboundingclientrect\u2461"},{"id":"ref-for-dom-range-getboundingclientrect\u2462"}],"title":"9. Extensions to the Range Interface"}],"url":"#dom-range-getboundingclientrect"}, "dom-range-getclientrects": {"dfnID":"dom-range-getclientrects","dfnText":"getClientRects()","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-range-getclientrects"},{"id":"ref-for-dom-range-getclientrects\u2460"},{"id":"ref-for-dom-range-getclientrects\u2461"}],"title":"9. Extensions to the Range Interface"}],"url":"#dom-range-getclientrects"}, "dom-screen-availheight": {"dfnID":"dom-screen-availheight","dfnText":"availHeight","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-screen-availheight"}],"title":"4.3. The Screen Interface"}],"url":"#dom-screen-availheight"}, "dom-screen-availwidth": {"dfnID":"dom-screen-availwidth","dfnText":"availWidth","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-screen-availwidth"}],"title":"4.3. The Screen Interface"}],"url":"#dom-screen-availwidth"}, "dom-screen-colordepth": {"dfnID":"dom-screen-colordepth","dfnText":"colorDepth","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-screen-colordepth"},{"id":"ref-for-dom-screen-colordepth\u2460"}],"title":"4.3. The Screen Interface"},{"refs":[{"id":"ref-for-dom-screen-colordepth\u2461"}],"title":"Changes From 4 August 2011 To 17 December 2013"}],"url":"#dom-screen-colordepth"}, "dom-screen-height": {"dfnID":"dom-screen-height","dfnText":"height","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-screen-height"}],"title":"4.3. The Screen Interface"}],"url":"#dom-screen-height"}, "dom-screen-pixeldepth": {"dfnID":"dom-screen-pixeldepth","dfnText":"pixelDepth","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-screen-pixeldepth"},{"id":"ref-for-dom-screen-pixeldepth\u2460"}],"title":"4.3. The Screen Interface"},{"refs":[{"id":"ref-for-dom-screen-pixeldepth\u2461"}],"title":"Changes From 4 August 2011 To 17 December 2013"}],"url":"#dom-screen-pixeldepth"}, "dom-screen-width": {"dfnID":"dom-screen-width","dfnText":"width","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-screen-width"}],"title":"4.3. The Screen Interface"}],"url":"#dom-screen-width"}, "dom-scrollbehavior-auto": {"dfnID":"dom-scrollbehavior-auto","dfnText":"\"auto\"","external":false,"refSections":[],"url":"#dom-scrollbehavior-auto"}, "dom-scrollbehavior-instant": {"dfnID":"dom-scrollbehavior-instant","dfnText":"\"instant\"","external":false,"refSections":[],"url":"#dom-scrollbehavior-instant"}, "dom-scrollbehavior-smooth": {"dfnID":"dom-scrollbehavior-smooth","dfnText":"\"smooth\"","external":false,"refSections":[],"url":"#dom-scrollbehavior-smooth"}, "dom-scrollintoviewcontainer-all": {"dfnID":"dom-scrollintoviewcontainer-all","dfnText":"\"all\"","external":false,"refSections":[],"url":"#dom-scrollintoviewcontainer-all"}, "dom-scrollintoviewcontainer-nearest": {"dfnID":"dom-scrollintoviewcontainer-nearest","dfnText":"\"nearest\"","external":false,"refSections":[],"url":"#dom-scrollintoviewcontainer-nearest"}, "dom-scrollintoviewoptions-block": {"dfnID":"dom-scrollintoviewoptions-block","dfnText":"block","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-scrollintoviewoptions-block"}],"title":"6. \nExtensions to the Element Interface"}],"url":"#dom-scrollintoviewoptions-block"}, "dom-scrollintoviewoptions-container": {"dfnID":"dom-scrollintoviewoptions-container","dfnText":"container","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-scrollintoviewoptions-container"}],"title":"6. \nExtensions to the Element Interface"}],"url":"#dom-scrollintoviewoptions-container"}, "dom-scrollintoviewoptions-inline": {"dfnID":"dom-scrollintoviewoptions-inline","dfnText":"inline","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-scrollintoviewoptions-inline"}],"title":"6. \nExtensions to the Element Interface"}],"url":"#dom-scrollintoviewoptions-inline"}, "dom-scrolllogicalposition-center": {"dfnID":"dom-scrolllogicalposition-center","dfnText":"\"center\"","external":false,"refSections":[],"url":"#dom-scrolllogicalposition-center"}, "dom-scrolllogicalposition-end": {"dfnID":"dom-scrolllogicalposition-end","dfnText":"\"end\"","external":false,"refSections":[],"url":"#dom-scrolllogicalposition-end"}, "dom-scrolllogicalposition-nearest": {"dfnID":"dom-scrolllogicalposition-nearest","dfnText":"\"nearest\"","external":false,"refSections":[],"url":"#dom-scrolllogicalposition-nearest"}, "dom-scrolllogicalposition-start": {"dfnID":"dom-scrolllogicalposition-start","dfnText":"\"start\"","external":false,"refSections":[],"url":"#dom-scrolllogicalposition-start"}, "dom-scrolloptions-behavior": {"dfnID":"dom-scrolloptions-behavior","dfnText":"behavior","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-scrolloptions-behavior"}],"title":"4. Extensions to the Window Interface"},{"refs":[{"id":"ref-for-dom-scrolloptions-behavior\u2460"},{"id":"ref-for-dom-scrolloptions-behavior\u2461"}],"title":"6. \nExtensions to the Element Interface"}],"url":"#dom-scrolloptions-behavior"}, "dom-scrolltooptions-left": {"dfnID":"dom-scrolltooptions-left","dfnText":"left","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-scrolltooptions-left"},{"id":"ref-for-dom-scrolltooptions-left\u2460"},{"id":"ref-for-dom-scrolltooptions-left\u2461"},{"id":"ref-for-dom-scrolltooptions-left\u2462"}],"title":"4. Extensions to the Window Interface"},{"refs":[{"id":"ref-for-dom-scrolltooptions-left\u2463"},{"id":"ref-for-dom-scrolltooptions-left\u2464"},{"id":"ref-for-dom-scrolltooptions-left\u2465"},{"id":"ref-for-dom-scrolltooptions-left\u2466"},{"id":"ref-for-dom-scrolltooptions-left\u2467"},{"id":"ref-for-dom-scrolltooptions-left\u2468"}],"title":"6. \nExtensions to the Element Interface"}],"url":"#dom-scrolltooptions-left"}, "dom-scrolltooptions-top": {"dfnID":"dom-scrolltooptions-top","dfnText":"top","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-scrolltooptions-top"},{"id":"ref-for-dom-scrolltooptions-top\u2460"},{"id":"ref-for-dom-scrolltooptions-top\u2461"},{"id":"ref-for-dom-scrolltooptions-top\u2462"}],"title":"4. Extensions to the Window Interface"},{"refs":[{"id":"ref-for-dom-scrolltooptions-top\u2463"},{"id":"ref-for-dom-scrolltooptions-top\u2464"},{"id":"ref-for-dom-scrolltooptions-top\u2465"},{"id":"ref-for-dom-scrolltooptions-top\u2466"},{"id":"ref-for-dom-scrolltooptions-top\u2467"},{"id":"ref-for-dom-scrolltooptions-top\u2468"}],"title":"6. \nExtensions to the Element Interface"}],"url":"#dom-scrolltooptions-top"}, "dom-visualviewport-height": {"dfnID":"dom-visualviewport-height","dfnText":"height","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-visualviewport-height"}],"title":"3.1. Scrolling"},{"refs":[{"id":"ref-for-dom-visualviewport-height\u2460"}],"title":"12.1. The VisualViewport Interface"},{"refs":[{"id":"ref-for-dom-visualviewport-height\u2461"}],"title":"13.1. Resizing viewports"}],"url":"#dom-visualviewport-height"}, "dom-visualviewport-offsetleft": {"dfnID":"dom-visualviewport-offsetleft","dfnText":"offsetLeft","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-visualviewport-offsetleft"}],"title":"3.1. Scrolling"},{"refs":[{"id":"ref-for-dom-visualviewport-offsetleft\u2460"}],"title":"12.1. The VisualViewport Interface"}],"url":"#dom-visualviewport-offsetleft"}, "dom-visualviewport-offsettop": {"dfnID":"dom-visualviewport-offsettop","dfnText":"offsetTop","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-visualviewport-offsettop"}],"title":"3.1. Scrolling"},{"refs":[{"id":"ref-for-dom-visualviewport-offsettop\u2460"}],"title":"12.1. The VisualViewport Interface"}],"url":"#dom-visualviewport-offsettop"}, "dom-visualviewport-onresize": {"dfnID":"dom-visualviewport-onresize","dfnText":"onresize","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-visualviewport-onresize"}],"title":"12.1. The VisualViewport Interface"}],"url":"#dom-visualviewport-onresize"}, "dom-visualviewport-onscroll": {"dfnID":"dom-visualviewport-onscroll","dfnText":"onscroll","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-visualviewport-onscroll"}],"title":"12.1. The VisualViewport Interface"}],"url":"#dom-visualviewport-onscroll"}, "dom-visualviewport-onscrollend": {"dfnID":"dom-visualviewport-onscrollend","dfnText":"onscrollend","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-visualviewport-onscrollend"}],"title":"12.1. The VisualViewport Interface"}],"url":"#dom-visualviewport-onscrollend"}, "dom-visualviewport-pageleft": {"dfnID":"dom-visualviewport-pageleft","dfnText":"pageLeft","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-visualviewport-pageleft"}],"title":"3.1. Scrolling"},{"refs":[{"id":"ref-for-dom-visualviewport-pageleft\u2460"}],"title":"12.1. The VisualViewport Interface"}],"url":"#dom-visualviewport-pageleft"}, "dom-visualviewport-pagetop": {"dfnID":"dom-visualviewport-pagetop","dfnText":"pageTop","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-visualviewport-pagetop"}],"title":"3.1. Scrolling"},{"refs":[{"id":"ref-for-dom-visualviewport-pagetop\u2460"}],"title":"12.1. The VisualViewport Interface"}],"url":"#dom-visualviewport-pagetop"}, "dom-visualviewport-scale": {"dfnID":"dom-visualviewport-scale","dfnText":"scale","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-visualviewport-scale"}],"title":"12.1. The VisualViewport Interface"},{"refs":[{"id":"ref-for-dom-visualviewport-scale\u2460"}],"title":"13.1. Resizing viewports"}],"url":"#dom-visualviewport-scale"}, "dom-visualviewport-width": {"dfnID":"dom-visualviewport-width","dfnText":"width","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-visualviewport-width"}],"title":"3.1. Scrolling"},{"refs":[{"id":"ref-for-dom-visualviewport-width\u2460"}],"title":"12.1. The VisualViewport Interface"},{"refs":[{"id":"ref-for-dom-visualviewport-width\u2461"}],"title":"13.1. Resizing viewports"}],"url":"#dom-visualviewport-width"}, "dom-window-devicepixelratio": {"dfnID":"dom-window-devicepixelratio","dfnText":"devicePixelRatio","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-window-devicepixelratio"}],"title":"4. Extensions to the Window Interface"},{"refs":[{"id":"ref-for-dom-window-devicepixelratio\u2460"}],"title":"Changes From 4 August 2011 To 17 December 2013"}],"url":"#dom-window-devicepixelratio"}, "dom-window-innerheight": {"dfnID":"dom-window-innerheight","dfnText":"innerHeight","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-window-innerheight"}],"title":"4. Extensions to the Window Interface"}],"url":"#dom-window-innerheight"}, "dom-window-innerwidth": {"dfnID":"dom-window-innerwidth","dfnText":"innerWidth","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-window-innerwidth"}],"title":"4. Extensions to the Window Interface"},{"refs":[{"id":"ref-for-dom-window-innerwidth\u2460"}],"title":"Changes From 4 August 2011 To 17 December 2013"}],"url":"#dom-window-innerwidth"}, "dom-window-matchmedia": {"dfnID":"dom-window-matchmedia","dfnText":"matchMedia(query)","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-window-matchmedia"}],"title":"2.1. CSS pixels"},{"refs":[{"id":"ref-for-dom-window-matchmedia\u2460"}],"title":"4. Extensions to the Window Interface"}],"url":"#dom-window-matchmedia"}, "dom-window-matchmedia-query-query": {"dfnID":"dom-window-matchmedia-query-query","dfnText":"query","external":false,"refSections":[],"url":"#dom-window-matchmedia-query-query"}, "dom-window-moveby": {"dfnID":"dom-window-moveby","dfnText":"moveBy(x, y)","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-window-moveby"}],"title":"4. Extensions to the Window Interface"},{"refs":[{"id":"ref-for-dom-window-moveby\u2460"}],"title":"Changes From 4 August 2011 To 17 December 2013"}],"url":"#dom-window-moveby"}, "dom-window-moveby-x-y-x": {"dfnID":"dom-window-moveby-x-y-x","dfnText":"x","external":false,"refSections":[],"url":"#dom-window-moveby-x-y-x"}, "dom-window-moveby-x-y-y": {"dfnID":"dom-window-moveby-x-y-y","dfnText":"y","external":false,"refSections":[],"url":"#dom-window-moveby-x-y-y"}, "dom-window-moveto": {"dfnID":"dom-window-moveto","dfnText":"moveTo(x, y)","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-window-moveto"}],"title":"4. Extensions to the Window Interface"},{"refs":[{"id":"ref-for-dom-window-moveto\u2460"}],"title":"Changes From 4 August 2011 To 17 December 2013"}],"url":"#dom-window-moveto"}, "dom-window-moveto-x-y-x": {"dfnID":"dom-window-moveto-x-y-x","dfnText":"x","external":false,"refSections":[],"url":"#dom-window-moveto-x-y-x"}, "dom-window-moveto-x-y-y": {"dfnID":"dom-window-moveto-x-y-y","dfnText":"y","external":false,"refSections":[],"url":"#dom-window-moveto-x-y-y"}, "dom-window-outerheight": {"dfnID":"dom-window-outerheight","dfnText":"outerHeight","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-window-outerheight"}],"title":"4. Extensions to the Window Interface"}],"url":"#dom-window-outerheight"}, "dom-window-outerwidth": {"dfnID":"dom-window-outerwidth","dfnText":"outerWidth","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-window-outerwidth"}],"title":"4. Extensions to the Window Interface"}],"url":"#dom-window-outerwidth"}, "dom-window-pagexoffset": {"dfnID":"dom-window-pagexoffset","dfnText":"pageXOffset","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-window-pagexoffset"}],"title":"4. Extensions to the Window Interface"}],"url":"#dom-window-pagexoffset"}, "dom-window-pageyoffset": {"dfnID":"dom-window-pageyoffset","dfnText":"pageYOffset","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-window-pageyoffset"}],"title":"4. Extensions to the Window Interface"}],"url":"#dom-window-pageyoffset"}, "dom-window-resizeby": {"dfnID":"dom-window-resizeby","dfnText":"resizeBy(x, y)","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-window-resizeby"}],"title":"4. Extensions to the Window Interface"},{"refs":[{"id":"ref-for-dom-window-resizeby\u2460"}],"title":"Changes From 4 August 2011 To 17 December 2013"}],"url":"#dom-window-resizeby"}, "dom-window-resizeby-x-y-x": {"dfnID":"dom-window-resizeby-x-y-x","dfnText":"x","external":false,"refSections":[],"url":"#dom-window-resizeby-x-y-x"}, "dom-window-resizeby-x-y-y": {"dfnID":"dom-window-resizeby-x-y-y","dfnText":"y","external":false,"refSections":[],"url":"#dom-window-resizeby-x-y-y"}, "dom-window-resizeto": {"dfnID":"dom-window-resizeto","dfnText":"resizeTo(width, height)","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-window-resizeto"}],"title":"4. Extensions to the Window Interface"},{"refs":[{"id":"ref-for-dom-window-resizeto\u2460"}],"title":"Changes From 31 January 2020"},{"refs":[{"id":"ref-for-dom-window-resizeto\u2461"}],"title":"Changes From 4 August 2011 To 17 December 2013"}],"url":"#dom-window-resizeto"}, "dom-window-resizeto-width-height-height": {"dfnID":"dom-window-resizeto-width-height-height","dfnText":"height","external":false,"refSections":[],"url":"#dom-window-resizeto-width-height-height"}, "dom-window-resizeto-width-height-width": {"dfnID":"dom-window-resizeto-width-height-width","dfnText":"width","external":false,"refSections":[],"url":"#dom-window-resizeto-width-height-width"}, "dom-window-screen": {"dfnID":"dom-window-screen","dfnText":"screen","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-window-screen"},{"id":"ref-for-dom-window-screen\u2460"}],"title":"4. Extensions to the Window Interface"}],"url":"#dom-window-screen"}, "dom-window-screenleft": {"dfnID":"dom-window-screenleft","dfnText":"screenLeft","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-window-screenleft"}],"title":"4. Extensions to the Window Interface"}],"url":"#dom-window-screenleft"}, "dom-window-screentop": {"dfnID":"dom-window-screentop","dfnText":"screenTop","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-window-screentop"}],"title":"4. Extensions to the Window Interface"}],"url":"#dom-window-screentop"}, "dom-window-screenx": {"dfnID":"dom-window-screenx","dfnText":"screenX","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-window-screenx"}],"title":"4. Extensions to the Window Interface"}],"url":"#dom-window-screenx"}, "dom-window-screeny": {"dfnID":"dom-window-screeny","dfnText":"screenY","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-window-screeny"}],"title":"4. Extensions to the Window Interface"}],"url":"#dom-window-screeny"}, "dom-window-scroll": {"dfnID":"dom-window-scroll","dfnText":"scroll()","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-window-scroll"},{"id":"ref-for-dom-window-scroll\u2460"},{"id":"ref-for-dom-window-scroll\u2461"},{"id":"ref-for-dom-window-scroll\u2462"}],"title":"4. Extensions to the Window Interface"},{"refs":[{"id":"ref-for-dom-window-scroll\u2463"},{"id":"ref-for-dom-window-scroll\u2464"},{"id":"ref-for-dom-window-scroll\u2465"},{"id":"ref-for-dom-window-scroll\u2466"},{"id":"ref-for-dom-window-scroll\u2467"},{"id":"ref-for-dom-window-scroll\u2468"}],"title":"6. \nExtensions to the Element Interface"},{"refs":[{"id":"ref-for-dom-window-scroll\u2460\u24ea"}],"title":"Changes From 17 December 2013 To 31 January 2020"}],"url":"#dom-window-scroll"}, "dom-window-scroll-options-options": {"dfnID":"dom-window-scroll-options-options","dfnText":"options","external":false,"refSections":[],"url":"#dom-window-scroll-options-options"}, "dom-window-scroll-x-y-x": {"dfnID":"dom-window-scroll-x-y-x","dfnText":"x","external":false,"refSections":[],"url":"#dom-window-scroll-x-y-x"}, "dom-window-scroll-x-y-y": {"dfnID":"dom-window-scroll-x-y-y","dfnText":"y","external":false,"refSections":[],"url":"#dom-window-scroll-x-y-y"}, "dom-window-scrollby": {"dfnID":"dom-window-scrollby","dfnText":"scrollBy()","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-window-scrollby"},{"id":"ref-for-dom-window-scrollby\u2460"}],"title":"4. Extensions to the Window Interface"},{"refs":[{"id":"ref-for-dom-window-scrollby\u2461"}],"title":"Changes From 17 December 2013 To 31 January 2020"}],"url":"#dom-window-scrollby"}, "dom-window-scrollby-options-options": {"dfnID":"dom-window-scrollby-options-options","dfnText":"options","external":false,"refSections":[],"url":"#dom-window-scrollby-options-options"}, "dom-window-scrollby-x-y-x": {"dfnID":"dom-window-scrollby-x-y-x","dfnText":"x","external":false,"refSections":[],"url":"#dom-window-scrollby-x-y-x"}, "dom-window-scrollby-x-y-y": {"dfnID":"dom-window-scrollby-x-y-y","dfnText":"y","external":false,"refSections":[],"url":"#dom-window-scrollby-x-y-y"}, "dom-window-scrollto": {"dfnID":"dom-window-scrollto","dfnText":"scrollTo()","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-window-scrollto"},{"id":"ref-for-dom-window-scrollto\u2460"}],"title":"4. Extensions to the Window Interface"},{"refs":[{"id":"ref-for-dom-window-scrollto\u2461"}],"title":"Changes From 17 December 2013 To 31 January 2020"}],"url":"#dom-window-scrollto"}, "dom-window-scrollto-options-options": {"dfnID":"dom-window-scrollto-options-options","dfnText":"options","external":false,"refSections":[],"url":"#dom-window-scrollto-options-options"}, "dom-window-scrollto-x-y-x": {"dfnID":"dom-window-scrollto-x-y-x","dfnText":"x","external":false,"refSections":[],"url":"#dom-window-scrollto-x-y-x"}, "dom-window-scrollto-x-y-y": {"dfnID":"dom-window-scrollto-x-y-y","dfnText":"y","external":false,"refSections":[],"url":"#dom-window-scrollto-x-y-y"}, "dom-window-scrollx": {"dfnID":"dom-window-scrollx","dfnText":"scrollX","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-window-scrollx"},{"id":"ref-for-dom-window-scrollx\u2460"},{"id":"ref-for-dom-window-scrollx\u2461"}],"title":"4. Extensions to the Window Interface"},{"refs":[{"id":"ref-for-dom-window-scrollx\u2462"},{"id":"ref-for-dom-window-scrollx\u2463"},{"id":"ref-for-dom-window-scrollx\u2464"},{"id":"ref-for-dom-window-scrollx\u2465"},{"id":"ref-for-dom-window-scrollx\u2466"}],"title":"6. \nExtensions to the Element Interface"},{"refs":[{"id":"ref-for-dom-window-scrollx\u2467"}],"title":"10. Extensions to the MouseEvent Interface"}],"url":"#dom-window-scrollx"}, "dom-window-scrolly": {"dfnID":"dom-window-scrolly","dfnText":"scrollY","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-window-scrolly"},{"id":"ref-for-dom-window-scrolly\u2460"},{"id":"ref-for-dom-window-scrolly\u2461"}],"title":"4. Extensions to the Window Interface"},{"refs":[{"id":"ref-for-dom-window-scrolly\u2462"},{"id":"ref-for-dom-window-scrolly\u2463"},{"id":"ref-for-dom-window-scrolly\u2464"},{"id":"ref-for-dom-window-scrolly\u2465"}],"title":"6. \nExtensions to the Element Interface"},{"refs":[{"id":"ref-for-dom-window-scrolly\u2466"}],"title":"10. Extensions to the MouseEvent Interface"}],"url":"#dom-window-scrolly"}, "dom-window-visualviewport": {"dfnID":"dom-window-visualviewport","dfnText":"visualViewport","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-window-visualviewport"}],"title":"4. Extensions to the Window Interface"}],"url":"#dom-window-visualviewport"}, "e135638f": {"dfnID":"e135638f","dfnText":"scroll snap position","external":true,"refSections":[{"refs":[{"id":"ref-for-scroll-snap-position"},{"id":"ref-for-scroll-snap-position\u2460"}],"title":"6.1. Element Scrolling Members"}],"url":"https://drafts.csswg.org/css-scroll-snap-1/#scroll-snap-position"}, "e7f0dd6c": {"dfnID":"e7f0dd6c","dfnText":"display","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-display"},{"id":"ref-for-propdef-display\u2460"}],"title":"2. Terminology"},{"refs":[{"id":"ref-for-propdef-display\u2461"}],"title":"6. \nExtensions to the Element Interface"}],"url":"https://drafts.csswg.org/css-display-4/#propdef-display"}, "e97a9688": {"dfnID":"e97a9688","dfnText":"unsigned long","external":true,"refSections":[{"refs":[{"id":"ref-for-idl-unsigned-long"},{"id":"ref-for-idl-unsigned-long\u2460"}],"title":"4.3. The Screen Interface"},{"refs":[{"id":"ref-for-idl-unsigned-long\u2461"}],"title":"5.1. The CaretPosition Interface"}],"url":"https://webidl.spec.whatwg.org/#idl-unsigned-long"}, "e99bd18e": {"dfnID":"e99bd18e","dfnText":"relevant global object","external":true,"refSections":[{"refs":[{"id":"ref-for-concept-relevant-global"},{"id":"ref-for-concept-relevant-global\u2460"},{"id":"ref-for-concept-relevant-global\u2461"},{"id":"ref-for-concept-relevant-global\u2462"}],"title":"4. Extensions to the Window Interface"}],"url":"https://html.spec.whatwg.org/multipage/webappapis.html#concept-relevant-global"}, "ea5623a4": {"dfnID":"ea5623a4","dfnText":"capture","external":true,"refSections":[{"refs":[{"id":"ref-for-event-listener-capture"}],"title":"4.2. The MediaQueryList Interface"}],"url":"https://dom.spec.whatwg.org/#event-listener-capture"}, "ef662a55": {"dfnID":"ef662a55","dfnText":"live","external":true,"refSections":[{"refs":[{"id":"ref-for-live"}],"title":"5. Extensions to the Document Interface"},{"refs":[{"id":"ref-for-live\u2460"}],"title":"5.1. The CaretPosition Interface"},{"refs":[{"id":"ref-for-live\u2461"},{"id":"ref-for-live\u2462"}],"title":"6. \nExtensions to the Element Interface"},{"refs":[{"id":"ref-for-live\u2463"},{"id":"ref-for-live\u2464"}],"title":"9. Extensions to the Range Interface"}],"url":"https://html.spec.whatwg.org/multipage/infrastructure.html#live"}, "element-get-the-bounding-box": {"dfnID":"element-get-the-bounding-box","dfnText":"get the bounding box","external":false,"refSections":[{"refs":[{"id":"ref-for-element-get-the-bounding-box"}],"title":"6. \nExtensions to the Element Interface"}],"url":"#element-get-the-bounding-box"}, "ending-edges": {"dfnID":"ending-edges","dfnText":"ending edges","external":false,"refSections":[{"refs":[{"id":"ref-for-ending-edges"},{"id":"ref-for-ending-edges\u2460"}],"title":"6.1. Element Scrolling Members"}],"url":"#ending-edges"}, "enumdef-cssboxtype": {"dfnID":"enumdef-cssboxtype","dfnText":"CSSBoxType","external":false,"refSections":[{"refs":[{"id":"ref-for-enumdef-cssboxtype"},{"id":"ref-for-enumdef-cssboxtype\u2460"},{"id":"ref-for-enumdef-cssboxtype\u2461"}],"title":"11.1. The GeometryUtils Interface"}],"url":"#enumdef-cssboxtype"}, "enumdef-scrollbehavior": {"dfnID":"enumdef-scrollbehavior","dfnText":"ScrollBehavior","external":false,"refSections":[{"refs":[{"id":"ref-for-enumdef-scrollbehavior"}],"title":"4. Extensions to the Window Interface"}],"url":"#enumdef-scrollbehavior"}, "enumdef-scrollintoviewcontainer": {"dfnID":"enumdef-scrollintoviewcontainer","dfnText":"ScrollIntoViewContainer","external":false,"refSections":[{"refs":[{"id":"ref-for-enumdef-scrollintoviewcontainer"}],"title":"6. \nExtensions to the Element Interface"}],"url":"#enumdef-scrollintoviewcontainer"}, "enumdef-scrolllogicalposition": {"dfnID":"enumdef-scrolllogicalposition","dfnText":"ScrollLogicalPosition","external":false,"refSections":[{"refs":[{"id":"ref-for-enumdef-scrolllogicalposition"},{"id":"ref-for-enumdef-scrolllogicalposition\u2460"}],"title":"6. \nExtensions to the Element Interface"}],"url":"#enumdef-scrolllogicalposition"}, "evaluate-media-queries-and-report-changes": {"dfnID":"evaluate-media-queries-and-report-changes","dfnText":"evaluate media queries and report changes","external":false,"refSections":[],"url":"#evaluate-media-queries-and-report-changes"}, "eventdef-document-scroll": {"dfnID":"eventdef-document-scroll","dfnText":"scroll","external":false,"refSections":[{"refs":[{"id":"ref-for-eventdef-document-scroll"}],"title":"12.1. The VisualViewport Interface"},{"refs":[{"id":"ref-for-eventdef-document-scroll\u2460"},{"id":"ref-for-eventdef-document-scroll\u2461"}],"title":"13.2. Scrolling"},{"refs":[{"id":"ref-for-eventdef-document-scroll\u2462"}],"title":"Changes From 17 December 2013 To 31 January 2020"}],"url":"#eventdef-document-scroll"}, "eventdef-document-scrollend": {"dfnID":"eventdef-document-scrollend","dfnText":"scrollend","external":false,"refSections":[{"refs":[{"id":"ref-for-eventdef-document-scrollend"},{"id":"ref-for-eventdef-document-scrollend\u2460"},{"id":"ref-for-eventdef-document-scrollend\u2461"}],"title":"3.1. Scrolling"},{"refs":[{"id":"ref-for-eventdef-document-scrollend\u2462"}],"title":"12.1. The VisualViewport Interface"},{"refs":[{"id":"ref-for-eventdef-document-scrollend\u2463"},{"id":"ref-for-eventdef-document-scrollend\u2464"}],"title":"13.2. Scrolling"},{"refs":[{"id":"ref-for-eventdef-document-scrollend\u2465"}],"title":"Changes From 22 June 2022"}],"url":"#eventdef-document-scrollend"}, "eventdef-mediaquerylist-change": {"dfnID":"eventdef-mediaquerylist-change","dfnText":"change","external":false,"refSections":[{"refs":[{"id":"ref-for-eventdef-mediaquerylist-change"},{"id":"ref-for-eventdef-mediaquerylist-change\u2460"}],"title":"4.2. The MediaQueryList Interface"}],"url":"#eventdef-mediaquerylist-change"}, "eventdef-window-resize": {"dfnID":"eventdef-window-resize","dfnText":"resize","external":false,"refSections":[{"refs":[{"id":"ref-for-eventdef-window-resize"}],"title":"12.1. The VisualViewport Interface"},{"refs":[{"id":"ref-for-eventdef-window-resize\u2460"},{"id":"ref-for-eventdef-window-resize\u2461"}],"title":"13.1. Resizing viewports"},{"refs":[{"id":"ref-for-eventdef-window-resize\u2462"}],"title":"Changes From 17 December 2013 To 31 January 2020"}],"url":"#eventdef-window-resize"}, "f0951476": {"dfnID":"f0951476","dfnText":"EventHandler","external":true,"refSections":[{"refs":[{"id":"ref-for-eventhandler"}],"title":"4.2. The MediaQueryList Interface"},{"refs":[{"id":"ref-for-eventhandler\u2460"},{"id":"ref-for-eventhandler\u2461"},{"id":"ref-for-eventhandler\u2462"}],"title":"12.1. The VisualViewport Interface"}],"url":"https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler"}, "f449d4f8": {"dfnID":"f449d4f8","dfnText":"open(url, target, features)","external":true,"refSections":[{"refs":[{"id":"ref-for-dom-open"},{"id":"ref-for-dom-open\u2460"}],"title":"4.1. The features argument to the open() method"},{"refs":[{"id":"ref-for-dom-open\u2461"}],"title":"Changes From 4 August 2011 To 17 December 2013"}],"url":"https://html.spec.whatwg.org/multipage/nav-history-apis.html#dom-open"}, "f4a5f1c1": {"dfnID":"f4a5f1c1","dfnText":"inline-end","external":true,"refSections":[{"refs":[{"id":"ref-for-inline-end"}],"title":"2. Terminology"}],"url":"https://drafts.csswg.org/css-writing-modes-4/#inline-end"}, "f598742d": {"dfnID":"f598742d","dfnText":"border box","external":true,"refSections":[{"refs":[{"id":"ref-for-border-box"},{"id":"ref-for-border-box\u2460"}],"title":"7. Extensions to the HTMLElement Interface"}],"url":"https://drafts.csswg.org/css-box-4/#border-box"}, "f7960529": {"dfnID":"f7960529","dfnText":"root","external":true,"refSections":[{"refs":[{"id":"ref-for-concept-tree-root"},{"id":"ref-for-concept-tree-root\u2460"},{"id":"ref-for-concept-tree-root\u2461"},{"id":"ref-for-concept-tree-root\u2462"}],"title":"5. Extensions to the Document Interface"}],"url":"https://dom.spec.whatwg.org/#concept-tree-root"}, "f8434dee": {"dfnID":"f8434dee","dfnText":"being rendered","external":true,"refSections":[{"refs":[{"id":"ref-for-being-rendered"}],"title":"6. \nExtensions to the Element Interface"}],"url":"https://html.spec.whatwg.org/multipage/rendering.html#being-rendered"}, "f8de33a3": {"dfnID":"f8de33a3","dfnText":"long","external":true,"refSections":[{"refs":[{"id":"ref-for-idl-long"},{"id":"ref-for-idl-long\u2460"},{"id":"ref-for-idl-long\u2461"},{"id":"ref-for-idl-long\u2462"},{"id":"ref-for-idl-long\u2463"},{"id":"ref-for-idl-long\u2464"},{"id":"ref-for-idl-long\u2465"},{"id":"ref-for-idl-long\u2466"},{"id":"ref-for-idl-long\u2467"},{"id":"ref-for-idl-long\u2468"},{"id":"ref-for-idl-long\u2460\u24ea"},{"id":"ref-for-idl-long\u2460\u2460"},{"id":"ref-for-idl-long\u2460\u2461"},{"id":"ref-for-idl-long\u2460\u2462"},{"id":"ref-for-idl-long\u2460\u2463"},{"id":"ref-for-idl-long\u2460\u2464"}],"title":"4. Extensions to the Window Interface"},{"refs":[{"id":"ref-for-idl-long\u2460\u2465"},{"id":"ref-for-idl-long\u2460\u2466"},{"id":"ref-for-idl-long\u2460\u2467"},{"id":"ref-for-idl-long\u2460\u2468"}],"title":"4.3. The Screen Interface"},{"refs":[{"id":"ref-for-idl-long\u2461\u24ea"},{"id":"ref-for-idl-long\u2461\u2460"},{"id":"ref-for-idl-long\u2461\u2461"},{"id":"ref-for-idl-long\u2461\u2462"},{"id":"ref-for-idl-long\u2461\u2463"},{"id":"ref-for-idl-long\u2461\u2464"}],"title":"6. \nExtensions to the Element Interface"},{"refs":[{"id":"ref-for-idl-long\u2461\u2465"},{"id":"ref-for-idl-long\u2461\u2466"},{"id":"ref-for-idl-long\u2461\u2467"},{"id":"ref-for-idl-long\u2461\u2468"}],"title":"7. Extensions to the HTMLElement Interface"},{"refs":[{"id":"ref-for-idl-long\u2462\u24ea"},{"id":"ref-for-idl-long\u2462\u2460"}],"title":"8. Extensions to the HTMLImageElement Interface"},{"refs":[{"id":"ref-for-idl-long\u2462\u2461"}],"title":"Changes From 4 August 2011 To 17 December 2013"}],"url":"https://webidl.spec.whatwg.org/#idl-long"}, "f93e91d4": {"dfnID":"f93e91d4","dfnText":"update scrollsnapchanging targets","external":true,"refSections":[{"refs":[{"id":"ref-for-document-update-scrollsnapchanging-targets"},{"id":"ref-for-document-update-scrollsnapchanging-targets\u2460"}],"title":"13.2. Scrolling"}],"url":"https://drafts.csswg.org/css-scroll-snap-2/#document-update-scrollsnapchanging-targets"}, "f99bafb9": {"dfnID":"f99bafb9","dfnText":"add an event listener","external":true,"refSections":[{"refs":[{"id":"ref-for-add-an-event-listener"}],"title":"4.2. The MediaQueryList Interface"}],"url":"https://dom.spec.whatwg.org/#add-an-event-listener"}, "f9a50f04": {"dfnID":"f9a50f04","dfnText":"padding edge","external":true,"refSections":[{"refs":[{"id":"ref-for-padding-edge"},{"id":"ref-for-padding-edge\u2460"},{"id":"ref-for-padding-edge\u2461"},{"id":"ref-for-padding-edge\u2462"},{"id":"ref-for-padding-edge\u2463"},{"id":"ref-for-padding-edge\u2464"},{"id":"ref-for-padding-edge\u2465"},{"id":"ref-for-padding-edge\u2466"},{"id":"ref-for-padding-edge\u2467"},{"id":"ref-for-padding-edge\u2468"},{"id":"ref-for-padding-edge\u2460\u24ea"},{"id":"ref-for-padding-edge\u2460\u2460"},{"id":"ref-for-padding-edge\u2460\u2461"},{"id":"ref-for-padding-edge\u2460\u2462"},{"id":"ref-for-padding-edge\u2460\u2463"},{"id":"ref-for-padding-edge\u2460\u2464"}],"title":"2. Terminology"},{"refs":[{"id":"ref-for-padding-edge\u2460\u2465"},{"id":"ref-for-padding-edge\u2460\u2466"},{"id":"ref-for-padding-edge\u2460\u2467"},{"id":"ref-for-padding-edge\u2460\u2468"},{"id":"ref-for-padding-edge\u2461\u24ea"},{"id":"ref-for-padding-edge\u2461\u2460"},{"id":"ref-for-padding-edge\u2461\u2461"},{"id":"ref-for-padding-edge\u2461\u2462"}],"title":"6. \nExtensions to the Element Interface"},{"refs":[{"id":"ref-for-padding-edge\u2461\u2463"},{"id":"ref-for-padding-edge\u2461\u2464"},{"id":"ref-for-padding-edge\u2461\u2465"},{"id":"ref-for-padding-edge\u2461\u2466"}],"title":"6.1. Element Scrolling Members"},{"refs":[{"id":"ref-for-padding-edge\u2461\u2467"},{"id":"ref-for-padding-edge\u2461\u2468"}],"title":"7. Extensions to the HTMLElement Interface"},{"refs":[{"id":"ref-for-padding-edge\u2462\u24ea"},{"id":"ref-for-padding-edge\u2462\u2460"}],"title":"10. Extensions to the MouseEvent Interface"}],"url":"https://drafts.csswg.org/css-box-4/#padding-edge"}, "fd11cdcd": {"dfnID":"fd11cdcd","dfnText":"quirks mode","external":true,"refSections":[{"refs":[{"id":"ref-for-concept-document-quirks"},{"id":"ref-for-concept-document-quirks\u2460"}],"title":"5. Extensions to the Document Interface"},{"refs":[{"id":"ref-for-concept-document-quirks\u2461"},{"id":"ref-for-concept-document-quirks\u2462"},{"id":"ref-for-concept-document-quirks\u2463"},{"id":"ref-for-concept-document-quirks\u2464"},{"id":"ref-for-concept-document-quirks\u2465"},{"id":"ref-for-concept-document-quirks\u2466"},{"id":"ref-for-concept-document-quirks\u2467"},{"id":"ref-for-concept-document-quirks\u2468"},{"id":"ref-for-concept-document-quirks\u2460\u24ea"},{"id":"ref-for-concept-document-quirks\u2460\u2460"},{"id":"ref-for-concept-document-quirks\u2460\u2461"},{"id":"ref-for-concept-document-quirks\u2460\u2462"},{"id":"ref-for-concept-document-quirks\u2460\u2463"},{"id":"ref-for-concept-document-quirks\u2460\u2464"},{"id":"ref-for-concept-document-quirks\u2460\u2465"},{"id":"ref-for-concept-document-quirks\u2460\u2466"},{"id":"ref-for-concept-document-quirks\u2460\u2467"},{"id":"ref-for-concept-document-quirks\u2460\u2468"}],"title":"6. \nExtensions to the Element Interface"}],"url":"https://dom.spec.whatwg.org/#concept-document-quirks"}, "fdd2dd4e": {"dfnID":"fdd2dd4e","dfnText":"DOMRectReadOnly","external":true,"refSections":[{"refs":[{"id":"ref-for-domrectreadonly"}],"title":"11.1. The GeometryUtils Interface"}],"url":"https://drafts.fxtf.org/geometry-1/#domrectreadonly"}, "ffec47cc": {"dfnID":"ffec47cc","dfnText":"scaled","external":true,"refSections":[{"refs":[{"id":"ref-for-scaled"}],"title":"5.1. The CaretPosition Interface"},{"refs":[{"id":"ref-for-scaled\u2460"}],"title":"6. \nExtensions to the Element Interface"},{"refs":[{"id":"ref-for-scaled\u2461"},{"id":"ref-for-scaled\u2462"}],"title":"8. Extensions to the HTMLImageElement Interface"},{"refs":[{"id":"ref-for-scaled\u2463"}],"title":"9. Extensions to the Range Interface"}],"url":"https://drafts.csswg.org/css-viewport/#scaled"}, "geometryutils": {"dfnID":"geometryutils","dfnText":"GeometryUtils","external":false,"refSections":[{"refs":[{"id":"ref-for-geometryutils"},{"id":"ref-for-geometryutils\u2460"},{"id":"ref-for-geometryutils\u2461"},{"id":"ref-for-geometryutils\u2462"},{"id":"ref-for-geometryutils\u2463"}],"title":"11.1. The GeometryUtils Interface"}],"url":"#geometryutils"}, "layout-viewport": {"dfnID":"layout-viewport","dfnText":"layout viewport","external":false,"refSections":[{"refs":[{"id":"ref-for-layout-viewport"},{"id":"ref-for-layout-viewport\u2460"},{"id":"ref-for-layout-viewport\u2461"}],"title":"2. Terminology"},{"refs":[{"id":"ref-for-layout-viewport\u2462"},{"id":"ref-for-layout-viewport\u2463"},{"id":"ref-for-layout-viewport\u2464"},{"id":"ref-for-layout-viewport\u2465"}],"title":"12.1. The VisualViewport Interface"},{"refs":[{"id":"ref-for-layout-viewport\u2466"}],"title":"13.3. Event summary"}],"url":"#layout-viewport"}, "mediaquerylist": {"dfnID":"mediaquerylist","dfnText":"MediaQueryList","external":false,"refSections":[{"refs":[{"id":"ref-for-mediaquerylist"},{"id":"ref-for-mediaquerylist\u2460"}],"title":"4. Extensions to the Window Interface"},{"refs":[{"id":"ref-for-mediaquerylist\u2461"},{"id":"ref-for-mediaquerylist\u2462"},{"id":"ref-for-mediaquerylist\u2463"},{"id":"ref-for-mediaquerylist\u2464"},{"id":"ref-for-mediaquerylist\u2465"},{"id":"ref-for-mediaquerylist\u2466"},{"id":"ref-for-mediaquerylist\u2467"}],"title":"4.2. The MediaQueryList Interface"},{"refs":[{"id":"ref-for-mediaquerylist\u2468"},{"id":"ref-for-mediaquerylist\u2460\u24ea"}],"title":"4.2.1. Event summary"},{"refs":[{"id":"ref-for-mediaquerylist\u2460\u2460"},{"id":"ref-for-mediaquerylist\u2460\u2461"}],"title":"Changes From 17 December 2013 To 31 January 2020"}],"url":"#mediaquerylist"}, "mediaquerylist-document": {"dfnID":"mediaquerylist-document","dfnText":"document","external":false,"refSections":[{"refs":[{"id":"ref-for-mediaquerylist-document"}],"title":"4. Extensions to the Window Interface"},{"refs":[{"id":"ref-for-mediaquerylist-document\u2460"},{"id":"ref-for-mediaquerylist-document\u2461"}],"title":"4.2. The MediaQueryList Interface"}],"url":"#mediaquerylist-document"}, "mediaquerylist-matches-state": {"dfnID":"mediaquerylist-matches-state","dfnText":"matches state","external":false,"refSections":[{"refs":[{"id":"ref-for-mediaquerylist-matches-state"},{"id":"ref-for-mediaquerylist-matches-state\u2460"},{"id":"ref-for-mediaquerylist-matches-state\u2461"}],"title":"4.2. The MediaQueryList Interface"},{"refs":[{"id":"ref-for-mediaquerylist-matches-state\u2462"}],"title":"4.2.1. Event summary"}],"url":"#mediaquerylist-matches-state"}, "mediaquerylist-media": {"dfnID":"mediaquerylist-media","dfnText":"media","external":false,"refSections":[],"url":"#mediaquerylist-media"}, "mediaquerylist-media-query-list": {"dfnID":"mediaquerylist-media-query-list","dfnText":"media query list","external":false,"refSections":[{"refs":[{"id":"ref-for-mediaquerylist-media-query-list"}],"title":"4. Extensions to the Window Interface"},{"refs":[{"id":"ref-for-mediaquerylist-media-query-list\u2460"},{"id":"ref-for-mediaquerylist-media-query-list\u2461"}],"title":"4.2. The MediaQueryList Interface"}],"url":"#mediaquerylist-media-query-list"}, "mediaquerylistevent": {"dfnID":"mediaquerylistevent","dfnText":"MediaQueryListEvent","external":false,"refSections":[{"refs":[{"id":"ref-for-mediaquerylistevent"}],"title":"4.2. The MediaQueryList Interface"},{"refs":[{"id":"ref-for-mediaquerylistevent\u2460"}],"title":"4.2.1. Event summary"}],"url":"#mediaquerylistevent"}, "normalize-non-finite-values": {"dfnID":"normalize-non-finite-values","dfnText":"normalize non-finite values","external":false,"refSections":[{"refs":[{"id":"ref-for-normalize-non-finite-values"},{"id":"ref-for-normalize-non-finite-values\u2460"}],"title":"4. Extensions to the Window Interface"},{"refs":[{"id":"ref-for-normalize-non-finite-values\u2461"},{"id":"ref-for-normalize-non-finite-values\u2462"},{"id":"ref-for-normalize-non-finite-values\u2463"},{"id":"ref-for-normalize-non-finite-values\u2464"},{"id":"ref-for-normalize-non-finite-values\u2465"},{"id":"ref-for-normalize-non-finite-values\u2466"}],"title":"6. \nExtensions to the Element Interface"}],"url":"#normalize-non-finite-values"}, "overflow-directions": {"dfnID":"overflow-directions","dfnText":"overflow directions","external":false,"refSections":[{"refs":[{"id":"ref-for-overflow-directions"},{"id":"ref-for-overflow-directions\u2460"},{"id":"ref-for-overflow-directions\u2461"},{"id":"ref-for-overflow-directions\u2462"},{"id":"ref-for-overflow-directions\u2463"},{"id":"ref-for-overflow-directions\u2464"},{"id":"ref-for-overflow-directions\u2465"},{"id":"ref-for-overflow-directions\u2466"},{"id":"ref-for-overflow-directions\u2467"},{"id":"ref-for-overflow-directions\u2468"}],"title":"2. Terminology"},{"refs":[{"id":"ref-for-overflow-directions\u2460\u24ea"},{"id":"ref-for-overflow-directions\u2460\u2460"},{"id":"ref-for-overflow-directions\u2460\u2461"},{"id":"ref-for-overflow-directions\u2460\u2462"}],"title":"4. Extensions to the Window Interface"},{"refs":[{"id":"ref-for-overflow-directions\u2460\u2463"},{"id":"ref-for-overflow-directions\u2460\u2464"},{"id":"ref-for-overflow-directions\u2460\u2465"},{"id":"ref-for-overflow-directions\u2460\u2466"}],"title":"6.1. Element Scrolling Members"}],"url":"#overflow-directions"}, "page-zoom": {"dfnID":"page-zoom","dfnText":"page zoom","external":false,"refSections":[{"refs":[{"id":"ref-for-page-zoom"}],"title":"4. Extensions to the Window Interface"},{"refs":[{"id":"ref-for-page-zoom\u2460"}],"title":"12.1. The VisualViewport Interface"},{"refs":[{"id":"ref-for-page-zoom\u2461"}],"title":"Changes From 4 August 2011 To 17 December 2013"}],"url":"#page-zoom"}, "perform-a-scroll": {"dfnID":"perform-a-scroll","dfnText":"perform a scroll","external":false,"refSections":[{"refs":[{"id":"ref-for-perform-a-scroll"},{"id":"ref-for-perform-a-scroll\u2460"}],"title":"3.1. Scrolling"},{"refs":[{"id":"ref-for-perform-a-scroll\u2461"}],"title":"4. Extensions to the Window Interface"},{"refs":[{"id":"ref-for-perform-a-scroll\u2462"},{"id":"ref-for-perform-a-scroll\u2463"}],"title":"6.1. Element Scrolling Members"}],"url":"#perform-a-scroll"}, "potentially-scrollable": {"dfnID":"potentially-scrollable","dfnText":"potentially scrollable","external":false,"refSections":[{"refs":[{"id":"ref-for-potentially-scrollable"}],"title":"2. Terminology"},{"refs":[{"id":"ref-for-potentially-scrollable\u2460"}],"title":"5. Extensions to the Document Interface"},{"refs":[{"id":"ref-for-potentially-scrollable\u2461"},{"id":"ref-for-potentially-scrollable\u2462"},{"id":"ref-for-potentially-scrollable\u2463"},{"id":"ref-for-potentially-scrollable\u2464"},{"id":"ref-for-potentially-scrollable\u2465"},{"id":"ref-for-potentially-scrollable\u2466"},{"id":"ref-for-potentially-scrollable\u2467"}],"title":"6. \nExtensions to the Element Interface"}],"url":"#potentially-scrollable"}, "run-snapshot-post-layout-state-steps": {"dfnID":"run-snapshot-post-layout-state-steps","dfnText":"run snapshot post-layout state steps","external":false,"refSections":[],"url":"#run-snapshot-post-layout-state-steps"}, "scale-factor": {"dfnID":"scale-factor","dfnText":"scale factor","external":false,"refSections":[{"refs":[{"id":"ref-for-scale-factor"}],"title":"2.2. Zooming"},{"refs":[{"id":"ref-for-scale-factor\u2460"}],"title":"4. Extensions to the Window Interface"},{"refs":[{"id":"ref-for-scale-factor\u2461"},{"id":"ref-for-scale-factor\u2462"}],"title":"12.1. The VisualViewport Interface"},{"refs":[{"id":"ref-for-scale-factor\u2463"}],"title":"Changes From 07 July 2022"}],"url":"#scale-factor"}, "screen": {"dfnID":"screen","dfnText":"Screen","external":false,"refSections":[{"refs":[{"id":"ref-for-screen"},{"id":"ref-for-screen\u2460"}],"title":"4. Extensions to the Window Interface"},{"refs":[{"id":"ref-for-screen\u2461"},{"id":"ref-for-screen\u2462"}],"title":"4.3. The Screen Interface"},{"refs":[{"id":"ref-for-screen\u2463"}],"title":"15. Security and Privacy Considerations"},{"refs":[{"id":"ref-for-screen\u2464"}],"title":"Changes From 4 August 2011 To 17 December 2013"}],"url":"#screen"}, "scroll-a-target-into-view": {"dfnID":"scroll-a-target-into-view","dfnText":"scroll a target into view","external":false,"refSections":[{"refs":[{"id":"ref-for-scroll-a-target-into-view"}],"title":"6. \nExtensions to the Element Interface"}],"url":"#scroll-a-target-into-view"}, "scroll-an-element": {"dfnID":"scroll-an-element","dfnText":"scroll an element","external":false,"refSections":[{"refs":[{"id":"ref-for-scroll-an-element"},{"id":"ref-for-scroll-an-element\u2460"},{"id":"ref-for-scroll-an-element\u2461"}],"title":"6. \nExtensions to the Element Interface"}],"url":"#scroll-an-element"}, "scroll-completed": {"dfnID":"scroll-completed","dfnText":"completed","external":false,"refSections":[{"refs":[{"id":"ref-for-scroll-completed"}],"title":"13.2. Scrolling"},{"refs":[{"id":"ref-for-scroll-completed\u2460"}],"title":"13.3. Event summary"}],"url":"#scroll-completed"}, "scroll-to-the-beginning-of-the-document": {"dfnID":"scroll-to-the-beginning-of-the-document","dfnText":"scroll to the beginning of the document","external":false,"refSections":[],"url":"#scroll-to-the-beginning-of-the-document"}, "scrolling-area": {"dfnID":"scrolling-area","dfnText":"scrolling area","external":false,"refSections":[{"refs":[{"id":"ref-for-scrolling-area"},{"id":"ref-for-scrolling-area\u2460"},{"id":"ref-for-scrolling-area\u2461"}],"title":"2. Terminology"},{"refs":[{"id":"ref-for-scrolling-area\u2462"}],"title":"3.1. Scrolling"},{"refs":[{"id":"ref-for-scrolling-area\u2463"},{"id":"ref-for-scrolling-area\u2464"},{"id":"ref-for-scrolling-area\u2465"},{"id":"ref-for-scrolling-area\u2466"},{"id":"ref-for-scrolling-area\u2467"},{"id":"ref-for-scrolling-area\u2468"}],"title":"4. Extensions to the Window Interface"},{"refs":[{"id":"ref-for-scrolling-area\u2460\u24ea"},{"id":"ref-for-scrolling-area\u2460\u2460"},{"id":"ref-for-scrolling-area\u2460\u2461"},{"id":"ref-for-scrolling-area\u2460\u2462"},{"id":"ref-for-scrolling-area\u2460\u2463"},{"id":"ref-for-scrolling-area\u2460\u2464"},{"id":"ref-for-scrolling-area\u2460\u2465"},{"id":"ref-for-scrolling-area\u2460\u2466"}],"title":"6. \nExtensions to the Element Interface"},{"refs":[{"id":"ref-for-scrolling-area\u2460\u2467"},{"id":"ref-for-scrolling-area\u2460\u2468"},{"id":"ref-for-scrolling-area\u2461\u24ea"},{"id":"ref-for-scrolling-area\u2461\u2460"},{"id":"ref-for-scrolling-area\u2461\u2461"},{"id":"ref-for-scrolling-area\u2461\u2462"}],"title":"6.1. Element Scrolling Members"}],"url":"#scrolling-area"}, "scrolling-area-origin": {"dfnID":"scrolling-area-origin","dfnText":"origin","external":false,"refSections":[{"refs":[{"id":"ref-for-scrolling-area-origin"}],"title":"2. Terminology"}],"url":"#scrolling-area-origin"}, "scrolling-box": {"dfnID":"scrolling-box","dfnText":"scrolling box","external":false,"refSections":[{"refs":[{"id":"ref-for-scrolling-box"},{"id":"ref-for-scrolling-box\u2460"}],"title":"2. Terminology"},{"refs":[{"id":"ref-for-scrolling-box\u2461"},{"id":"ref-for-scrolling-box\u2462"},{"id":"ref-for-scrolling-box\u2463"},{"id":"ref-for-scrolling-box\u2464"},{"id":"ref-for-scrolling-box\u2465"},{"id":"ref-for-scrolling-box\u2466"},{"id":"ref-for-scrolling-box\u2467"}],"title":"3.1. Scrolling"},{"refs":[{"id":"ref-for-scrolling-box\u2468"}],"title":"4. Extensions to the Window Interface"},{"refs":[{"id":"ref-for-scrolling-box\u2460\u24ea"},{"id":"ref-for-scrolling-box\u2460\u2460"},{"id":"ref-for-scrolling-box\u2460\u2461"}],"title":"6. \nExtensions to the Element Interface"},{"refs":[{"id":"ref-for-scrolling-box\u2460\u2462"},{"id":"ref-for-scrolling-box\u2460\u2463"},{"id":"ref-for-scrolling-box\u2460\u2464"},{"id":"ref-for-scrolling-box\u2460\u2465"}],"title":"6.1. Element Scrolling Members"}],"url":"#scrolling-box"}, "set-up-browsing-context-features": {"dfnID":"set-up-browsing-context-features","dfnText":"set up browsing context features","external":false,"refSections":[],"url":"#set-up-browsing-context-features"}, "smooth-scroll-aborted": {"dfnID":"smooth-scroll-aborted","dfnText":"aborted","external":false,"refSections":[{"refs":[{"id":"ref-for-smooth-scroll-aborted"}],"title":"3.1. Scrolling"}],"url":"#smooth-scroll-aborted"}, "smooth-scroll-completed": {"dfnID":"smooth-scroll-completed","dfnText":"completed","external":false,"refSections":[],"url":"#smooth-scroll-completed"}, "supported-open-feature-name": {"dfnID":"supported-open-feature-name","dfnText":"supported open() feature name","external":false,"refSections":[],"url":"#supported-open-feature-name"}, "supported-open-feature-name-height": {"dfnID":"supported-open-feature-name-height","dfnText":"height","external":false,"refSections":[{"refs":[{"id":"ref-for-supported-open-feature-name-height"},{"id":"ref-for-supported-open-feature-name-height\u2460"}],"title":"4.1. The features argument to the open() method"}],"url":"#supported-open-feature-name-height"}, "supported-open-feature-name-left": {"dfnID":"supported-open-feature-name-left","dfnText":"left","external":false,"refSections":[{"refs":[{"id":"ref-for-supported-open-feature-name-left"},{"id":"ref-for-supported-open-feature-name-left\u2460"}],"title":"4.1. The features argument to the open() method"}],"url":"#supported-open-feature-name-left"}, "supported-open-feature-name-top": {"dfnID":"supported-open-feature-name-top","dfnText":"top","external":false,"refSections":[{"refs":[{"id":"ref-for-supported-open-feature-name-top"},{"id":"ref-for-supported-open-feature-name-top\u2460"}],"title":"4.1. The features argument to the open() method"}],"url":"#supported-open-feature-name-top"}, "supported-open-feature-name-width": {"dfnID":"supported-open-feature-name-width","dfnText":"width","external":false,"refSections":[{"refs":[{"id":"ref-for-supported-open-feature-name-width"},{"id":"ref-for-supported-open-feature-name-width\u2460"}],"title":"4.1. The features argument to the open() method"}],"url":"#supported-open-feature-name-width"}, "svg-layout-box": {"dfnID":"svg-layout-box","dfnText":"SVG layout box","external":false,"refSections":[{"refs":[{"id":"ref-for-svg-layout-box"}],"title":"6. \nExtensions to the Element Interface"}],"url":"#svg-layout-box"}, "transforms": {"dfnID":"transforms","dfnText":"transforms","external":false,"refSections":[{"refs":[{"id":"ref-for-transforms"},{"id":"ref-for-transforms\u2460"},{"id":"ref-for-transforms\u2461"},{"id":"ref-for-transforms\u2462"},{"id":"ref-for-transforms\u2463"}],"title":"5. Extensions to the Document Interface"},{"refs":[{"id":"ref-for-transforms\u2464"}],"title":"5.1. The CaretPosition Interface"},{"refs":[{"id":"ref-for-transforms\u2465"},{"id":"ref-for-transforms\u2466"},{"id":"ref-for-transforms\u2467"},{"id":"ref-for-transforms\u2468"},{"id":"ref-for-transforms\u2460\u24ea"},{"id":"ref-for-transforms\u2460\u2460"}],"title":"6. \nExtensions to the Element Interface"},{"refs":[{"id":"ref-for-transforms\u2460\u2461"},{"id":"ref-for-transforms\u2460\u2462"},{"id":"ref-for-transforms\u2460\u2463"},{"id":"ref-for-transforms\u2460\u2464"},{"id":"ref-for-transforms\u2460\u2465"},{"id":"ref-for-transforms\u2460\u2466"}],"title":"7. Extensions to the HTMLElement Interface"},{"refs":[{"id":"ref-for-transforms\u2460\u2467"},{"id":"ref-for-transforms\u2460\u2468"}],"title":"8. Extensions to the HTMLImageElement Interface"},{"refs":[{"id":"ref-for-transforms\u2461\u24ea"}],"title":"9. Extensions to the Range Interface"},{"refs":[{"id":"ref-for-transforms\u2461\u2460"},{"id":"ref-for-transforms\u2461\u2461"}],"title":"10. Extensions to the MouseEvent Interface"},{"refs":[{"id":"ref-for-transforms\u2461\u2462"}],"title":"Changes From 4 August 2011 To 17 December 2013"}],"url":"#transforms"}, "typedefdef-geometrynode": {"dfnID":"typedefdef-geometrynode","dfnText":"GeometryNode","external":false,"refSections":[{"refs":[{"id":"ref-for-typedefdef-geometrynode"},{"id":"ref-for-typedefdef-geometrynode\u2460"},{"id":"ref-for-typedefdef-geometrynode\u2461"},{"id":"ref-for-typedefdef-geometrynode\u2462"}],"title":"11.1. The GeometryUtils Interface"}],"url":"#typedefdef-geometrynode"}, "viewport-perform-a-scroll": {"dfnID":"viewport-perform-a-scroll","dfnText":"perform a scroll","external":false,"refSections":[{"refs":[{"id":"ref-for-viewport-perform-a-scroll"}],"title":"2. Terminology"},{"refs":[{"id":"ref-for-viewport-perform-a-scroll\u2460"}],"title":"3.1. Scrolling"},{"refs":[{"id":"ref-for-viewport-perform-a-scroll\u2461"},{"id":"ref-for-viewport-perform-a-scroll\u2462"}],"title":"4. Extensions to the Window Interface"},{"refs":[{"id":"ref-for-viewport-perform-a-scroll\u2463"}],"title":"6.1. Element Scrolling Members"}],"url":"#viewport-perform-a-scroll"}, "visual-viewport": {"dfnID":"visual-viewport","dfnText":"visual viewport","external":false,"refSections":[{"refs":[{"id":"ref-for-visual-viewport"},{"id":"ref-for-visual-viewport\u2460"}],"title":"2. Terminology"},{"refs":[{"id":"ref-for-visual-viewport\u2461"},{"id":"ref-for-visual-viewport\u2462"},{"id":"ref-for-visual-viewport\u2463"},{"id":"ref-for-visual-viewport\u2464"},{"id":"ref-for-visual-viewport\u2465"},{"id":"ref-for-visual-viewport\u2466"},{"id":"ref-for-visual-viewport\u2467"},{"id":"ref-for-visual-viewport\u2468"},{"id":"ref-for-visual-viewport\u2460\u24ea"},{"id":"ref-for-visual-viewport\u2460\u2460"},{"id":"ref-for-visual-viewport\u2460\u2461"},{"id":"ref-for-visual-viewport\u2460\u2462"},{"id":"ref-for-visual-viewport\u2460\u2463"},{"id":"ref-for-visual-viewport\u2460\u2464"}],"title":"12.1. The VisualViewport Interface"},{"refs":[{"id":"ref-for-visual-viewport\u2460\u2465"}],"title":"13.2. Scrolling"},{"refs":[{"id":"ref-for-visual-viewport\u2460\u2466"}],"title":"13.3. Event summary"}],"url":"#visual-viewport"}, "visualviewport": {"dfnID":"visualviewport","dfnText":"VisualViewport","external":false,"refSections":[{"refs":[{"id":"ref-for-visualviewport"},{"id":"ref-for-visualviewport\u2460"}],"title":"2. Terminology"},{"refs":[{"id":"ref-for-visualviewport\u2461"}],"title":"3.1. Scrolling"},{"refs":[{"id":"ref-for-visualviewport\u2462"},{"id":"ref-for-visualviewport\u2463"}],"title":"4. Extensions to the Window Interface"},{"refs":[{"id":"ref-for-visualviewport\u2464"}],"title":"12.1. The VisualViewport Interface"},{"refs":[{"id":"ref-for-visualviewport\u2465"},{"id":"ref-for-visualviewport\u2466"}],"title":"13.1. Resizing viewports"},{"refs":[{"id":"ref-for-visualviewport\u2467"},{"id":"ref-for-visualviewport\u2468"},{"id":"ref-for-visualviewport\u2460\u24ea"},{"id":"ref-for-visualviewport\u2460\u2460"}],"title":"13.2. Scrolling"},{"refs":[{"id":"ref-for-visualviewport\u2460\u2461"},{"id":"ref-for-visualviewport\u2460\u2462"},{"id":"ref-for-visualviewport\u2460\u2463"},{"id":"ref-for-visualviewport\u2460\u2464"},{"id":"ref-for-visualviewport\u2460\u2465"},{"id":"ref-for-visualviewport\u2460\u2466"},{"id":"ref-for-visualviewport\u2460\u2467"},{"id":"ref-for-visualviewport\u2460\u2468"}],"title":"13.3. Event summary"},{"refs":[{"id":"ref-for-visualviewport\u2461\u24ea"}],"title":"Changes From 07 July 2022"}],"url":"#visualviewport"}, "visualviewport-associated-document": {"dfnID":"visualviewport-associated-document","dfnText":"associated document","external":false,"refSections":[{"refs":[{"id":"ref-for-visualviewport-associated-document"}],"title":"3.1. Scrolling"},{"refs":[{"id":"ref-for-visualviewport-associated-document\u2460"},{"id":"ref-for-visualviewport-associated-document\u2461"},{"id":"ref-for-visualviewport-associated-document\u2462"},{"id":"ref-for-visualviewport-associated-document\u2463"},{"id":"ref-for-visualviewport-associated-document\u2464"},{"id":"ref-for-visualviewport-associated-document\u2465"},{"id":"ref-for-visualviewport-associated-document\u2466"}],"title":"12.1. The VisualViewport Interface"},{"refs":[{"id":"ref-for-visualviewport-associated-document\u2467"},{"id":"ref-for-visualviewport-associated-document\u2468"}],"title":"13.2. Scrolling"}],"url":"#visualviewport-associated-document"}, "web-exposed-available-screen-area": {"dfnID":"web-exposed-available-screen-area","dfnText":"Web-exposed available screen area","external":false,"refSections":[{"refs":[{"id":"ref-for-web-exposed-available-screen-area"},{"id":"ref-for-web-exposed-available-screen-area\u2460"},{"id":"ref-for-web-exposed-available-screen-area\u2461"},{"id":"ref-for-web-exposed-available-screen-area\u2462"},{"id":"ref-for-web-exposed-available-screen-area\u2463"},{"id":"ref-for-web-exposed-available-screen-area\u2464"}],"title":"4.1. The features argument to the open() method"},{"refs":[{"id":"ref-for-web-exposed-available-screen-area\u2465"},{"id":"ref-for-web-exposed-available-screen-area\u2466"}],"title":"4.3. The Screen Interface"}],"url":"#web-exposed-available-screen-area"}, "web-exposed-screen-area": {"dfnID":"web-exposed-screen-area","dfnText":"Web-exposed screen area","external":false,"refSections":[{"refs":[{"id":"ref-for-web-exposed-screen-area"},{"id":"ref-for-web-exposed-screen-area\u2460"}],"title":"4. Extensions to the Window Interface"},{"refs":[{"id":"ref-for-web-exposed-screen-area\u2461"},{"id":"ref-for-web-exposed-screen-area\u2462"}],"title":"4.1. The features argument to the open() method"},{"refs":[{"id":"ref-for-web-exposed-screen-area\u2463"},{"id":"ref-for-web-exposed-screen-area\u2464"}],"title":"4.3. The Screen Interface"},{"refs":[{"id":"ref-for-web-exposed-screen-area\u2465"},{"id":"ref-for-web-exposed-screen-area\u2466"}],"title":"10. Extensions to the MouseEvent Interface"}],"url":"#web-exposed-screen-area"}, }; 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 = { "#beginning-edges": {"displayText":"beginning edges","export":true,"for_":[],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"beginning edges","type":"dfn","url":"#beginning-edges"}, "#caret-node": {"displayText":"caret node","export":true,"for_":[],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"caret node","type":"dfn","url":"#caret-node"}, "#caret-offset": {"displayText":"caret offset","export":true,"for_":[],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"caret offset","type":"dfn","url":"#caret-offset"}, "#caret-position": {"displayText":"caret position","export":true,"for_":[],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"caret position","type":"dfn","url":"#caret-position"}, "#caretposition": {"displayText":"CaretPosition","export":true,"for_":[],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"CaretPosition","type":"interface","url":"#caretposition"}, "#concept-instant-scroll": {"displayText":"instant scroll","export":true,"for_":[],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"instant scroll","type":"dfn","url":"#concept-instant-scroll"}, "#concept-smooth-scroll": {"displayText":"smooth scroll","export":true,"for_":[],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"smooth scroll","type":"dfn","url":"#concept-smooth-scroll"}, "#determine-the-scroll-into-view-position": {"displayText":"determine the scroll-into-view position","export":true,"for_":[],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"determine the scroll-into-view position","type":"dfn","url":"#determine-the-scroll-into-view-position"}, "#dictdef-boxquadoptions": {"displayText":"BoxQuadOptions","export":true,"for_":[],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"BoxQuadOptions","type":"dictionary","url":"#dictdef-boxquadoptions"}, "#dictdef-caretpositionfrompointoptions": {"displayText":"CaretPositionFromPointOptions","export":true,"for_":[],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"CaretPositionFromPointOptions","type":"dictionary","url":"#dictdef-caretpositionfrompointoptions"}, "#dictdef-checkvisibilityoptions": {"displayText":"CheckVisibilityOptions","export":true,"for_":[],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"CheckVisibilityOptions","type":"dictionary","url":"#dictdef-checkvisibilityoptions"}, "#dictdef-convertcoordinateoptions": {"displayText":"ConvertCoordinateOptions","export":true,"for_":[],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"ConvertCoordinateOptions","type":"dictionary","url":"#dictdef-convertcoordinateoptions"}, "#dictdef-mediaquerylisteventinit": {"displayText":"MediaQueryListEventInit","export":true,"for_":[],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"MediaQueryListEventInit","type":"dictionary","url":"#dictdef-mediaquerylisteventinit"}, "#dictdef-scrollintoviewoptions": {"displayText":"ScrollIntoViewOptions","export":true,"for_":[],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"ScrollIntoViewOptions","type":"dictionary","url":"#dictdef-scrollintoviewoptions"}, "#dictdef-scrolloptions": {"displayText":"ScrollOptions","export":true,"for_":[],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"ScrollOptions","type":"dictionary","url":"#dictdef-scrolloptions"}, "#dictdef-scrolltooptions": {"displayText":"ScrollToOptions","export":true,"for_":[],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"ScrollToOptions","type":"dictionary","url":"#dictdef-scrolltooptions"}, "#document-pending-scroll-event-targets": {"displayText":"pending scroll event targets","export":true,"for_":["Document"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"pending scroll event targets","type":"dfn","url":"#document-pending-scroll-event-targets"}, "#document-pending-scrollend-event-targets": {"displayText":"pending scrollend event targets","export":true,"for_":["Document"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"pending scrollend event targets","type":"dfn","url":"#document-pending-scrollend-event-targets"}, "#dom-caretposition-getclientrect": {"displayText":"getClientRect()","export":true,"for_":["CaretPosition"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"getClientRect()","type":"method","url":"#dom-caretposition-getclientrect"}, "#dom-caretposition-offset": {"displayText":"offset","export":true,"for_":["CaretPosition"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"offset","type":"attribute","url":"#dom-caretposition-offset"}, "#dom-caretposition-offsetnode": {"displayText":"offsetNode","export":true,"for_":["CaretPosition"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"offsetNode","type":"attribute","url":"#dom-caretposition-offsetnode"}, "#dom-caretpositionfrompointoptions-shadowroots": {"displayText":"shadowRoots","export":true,"for_":["CaretPositionFromPointOptions"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"shadowRoots","type":"dict-member","url":"#dom-caretpositionfrompointoptions-shadowroots"}, "#dom-checkvisibilityoptions-checkopacity": {"displayText":"checkOpacity","export":true,"for_":["CheckVisibilityOptions"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"checkOpacity","type":"dict-member","url":"#dom-checkvisibilityoptions-checkopacity"}, "#dom-checkvisibilityoptions-checkvisibilitycss": {"displayText":"checkVisibilityCSS","export":true,"for_":["CheckVisibilityOptions"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"checkVisibilityCSS","type":"dict-member","url":"#dom-checkvisibilityoptions-checkvisibilitycss"}, "#dom-checkvisibilityoptions-contentvisibilityauto": {"displayText":"contentVisibilityAuto","export":true,"for_":["CheckVisibilityOptions"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"contentVisibilityAuto","type":"dict-member","url":"#dom-checkvisibilityoptions-contentvisibilityauto"}, "#dom-checkvisibilityoptions-opacityproperty": {"displayText":"opacityProperty","export":true,"for_":["CheckVisibilityOptions"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"opacityProperty","type":"dict-member","url":"#dom-checkvisibilityoptions-opacityproperty"}, "#dom-checkvisibilityoptions-visibilityproperty": {"displayText":"visibilityProperty","export":true,"for_":["CheckVisibilityOptions"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"visibilityProperty","type":"dict-member","url":"#dom-checkvisibilityoptions-visibilityproperty"}, "#dom-document-caretpositionfrompoint": {"displayText":"caretPositionFromPoint(x, y, options)","export":true,"for_":["Document"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"caretPositionFromPoint(x, y, options)","type":"method","url":"#dom-document-caretpositionfrompoint"}, "#dom-document-elementfrompoint": {"displayText":"elementFromPoint(x, y)","export":true,"for_":["Document"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"elementFromPoint(x, y)","type":"method","url":"#dom-document-elementfrompoint"}, "#dom-document-elementsfrompoint": {"displayText":"elementsFromPoint(x, y)","export":true,"for_":["Document"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"elementsFromPoint(x, y)","type":"method","url":"#dom-document-elementsfrompoint"}, "#dom-document-scrollingelement": {"displayText":"scrollingElement","export":true,"for_":["Document"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"scrollingElement","type":"attribute","url":"#dom-document-scrollingelement"}, "#dom-element-checkvisibility": {"displayText":"checkVisibility(options)","export":true,"for_":["Element"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"checkVisibility(options)","type":"method","url":"#dom-element-checkvisibility"}, "#dom-element-clientheight": {"displayText":"clientHeight","export":true,"for_":["Element"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"clientHeight","type":"attribute","url":"#dom-element-clientheight"}, "#dom-element-clientleft": {"displayText":"clientLeft","export":true,"for_":["Element"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"clientLeft","type":"attribute","url":"#dom-element-clientleft"}, "#dom-element-clienttop": {"displayText":"clientTop","export":true,"for_":["Element"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"clientTop","type":"attribute","url":"#dom-element-clienttop"}, "#dom-element-clientwidth": {"displayText":"clientWidth","export":true,"for_":["Element"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"clientWidth","type":"attribute","url":"#dom-element-clientwidth"}, "#dom-element-currentcsszoom": {"displayText":"currentCSSZoom","export":true,"for_":["Element"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"currentCSSZoom","type":"attribute","url":"#dom-element-currentcsszoom"}, "#dom-element-getboundingclientrect": {"displayText":"getBoundingClientRect()","export":true,"for_":["Element"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"getBoundingClientRect()","type":"method","url":"#dom-element-getboundingclientrect"}, "#dom-element-getclientrects": {"displayText":"getClientRects()","export":true,"for_":["Element"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"getClientRects()","type":"method","url":"#dom-element-getclientrects"}, "#dom-element-scroll": {"displayText":"scroll(options)","export":true,"for_":["Element"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"scroll(options)","type":"method","url":"#dom-element-scroll"}, "#dom-element-scrollby": {"displayText":"scrollBy(options)","export":true,"for_":["Element"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"scrollBy(options)","type":"method","url":"#dom-element-scrollby"}, "#dom-element-scrollheight": {"displayText":"scrollHeight","export":true,"for_":["Element"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"scrollHeight","type":"attribute","url":"#dom-element-scrollheight"}, "#dom-element-scrollintoview": {"displayText":"scrollIntoView(arg)","export":true,"for_":["Element"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"scrollIntoView(arg)","type":"method","url":"#dom-element-scrollintoview"}, "#dom-element-scrollleft": {"displayText":"scrollLeft","export":true,"for_":["Element"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"scrollLeft","type":"attribute","url":"#dom-element-scrollleft"}, "#dom-element-scrollto": {"displayText":"scrollTo(options)","export":true,"for_":["Element"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"scrollTo(options)","type":"method","url":"#dom-element-scrollto"}, "#dom-element-scrolltop": {"displayText":"scrollTop","export":true,"for_":["Element"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"scrollTop","type":"attribute","url":"#dom-element-scrolltop"}, "#dom-element-scrollwidth": {"displayText":"scrollWidth","export":true,"for_":["Element"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"scrollWidth","type":"attribute","url":"#dom-element-scrollwidth"}, "#dom-geometryutils-convertpointfromnode": {"displayText":"convertPointFromNode(point, from, options)","export":true,"for_":["GeometryUtils"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"convertPointFromNode(point, from, options)","type":"method","url":"#dom-geometryutils-convertpointfromnode"}, "#dom-geometryutils-convertquadfromnode": {"displayText":"convertQuadFromNode(quad, from, options)","export":true,"for_":["GeometryUtils"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"convertQuadFromNode(quad, from, options)","type":"method","url":"#dom-geometryutils-convertquadfromnode"}, "#dom-geometryutils-convertrectfromnode": {"displayText":"convertRectFromNode(rect, from, options)","export":true,"for_":["GeometryUtils"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"convertRectFromNode(rect, from, options)","type":"method","url":"#dom-geometryutils-convertrectfromnode"}, "#dom-geometryutils-getboxquads": {"displayText":"getBoxQuads(options)","export":true,"for_":["GeometryUtils"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"getBoxQuads(options)","type":"method","url":"#dom-geometryutils-getboxquads"}, "#dom-htmlelement-offsetheight": {"displayText":"offsetHeight","export":true,"for_":["HTMLElement"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"offsetHeight","type":"attribute","url":"#dom-htmlelement-offsetheight"}, "#dom-htmlelement-offsetleft": {"displayText":"offsetLeft","export":true,"for_":["HTMLElement"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"offsetLeft","type":"attribute","url":"#dom-htmlelement-offsetleft"}, "#dom-htmlelement-offsetparent": {"displayText":"offsetParent","export":true,"for_":["HTMLElement"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"offsetParent","type":"attribute","url":"#dom-htmlelement-offsetparent"}, "#dom-htmlelement-offsettop": {"displayText":"offsetTop","export":true,"for_":["HTMLElement"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"offsetTop","type":"attribute","url":"#dom-htmlelement-offsettop"}, "#dom-htmlelement-offsetwidth": {"displayText":"offsetWidth","export":true,"for_":["HTMLElement"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"offsetWidth","type":"attribute","url":"#dom-htmlelement-offsetwidth"}, "#dom-htmlimageelement-x": {"displayText":"x","export":true,"for_":["HTMLImageElement"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"x","type":"attribute","url":"#dom-htmlimageelement-x"}, "#dom-htmlimageelement-y": {"displayText":"y","export":true,"for_":["HTMLImageElement"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"y","type":"attribute","url":"#dom-htmlimageelement-y"}, "#dom-mediaquerylist-addlistener": {"displayText":"addListener(callback)","export":true,"for_":["MediaQueryList"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"addListener(callback)","type":"method","url":"#dom-mediaquerylist-addlistener"}, "#dom-mediaquerylist-matches": {"displayText":"matches","export":true,"for_":["MediaQueryList"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"matches","type":"attribute","url":"#dom-mediaquerylist-matches"}, "#dom-mediaquerylist-media": {"displayText":"media","export":true,"for_":["MediaQueryList"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"media","type":"attribute","url":"#dom-mediaquerylist-media"}, "#dom-mediaquerylist-onchange": {"displayText":"onchange","export":true,"for_":["MediaQueryList"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"onchange","type":"attribute","url":"#dom-mediaquerylist-onchange"}, "#dom-mediaquerylist-removelistener": {"displayText":"removeListener(callback)","export":true,"for_":["MediaQueryList"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"removeListener(callback)","type":"method","url":"#dom-mediaquerylist-removelistener"}, "#dom-mediaquerylistevent-matches": {"displayText":"matches","export":true,"for_":["MediaQueryListEvent"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"matches","type":"attribute","url":"#dom-mediaquerylistevent-matches"}, "#dom-mediaquerylistevent-media": {"displayText":"media","export":true,"for_":["MediaQueryListEvent"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"media","type":"attribute","url":"#dom-mediaquerylistevent-media"}, "#dom-mouseevent-clientx": {"displayText":"clientX","export":true,"for_":["MouseEvent"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"clientX","type":"attribute","url":"#dom-mouseevent-clientx"}, "#dom-mouseevent-clienty": {"displayText":"clientY","export":true,"for_":["MouseEvent"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"clientY","type":"attribute","url":"#dom-mouseevent-clienty"}, "#dom-mouseevent-offsetx": {"displayText":"offsetX","export":true,"for_":["MouseEvent"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"offsetX","type":"attribute","url":"#dom-mouseevent-offsetx"}, "#dom-mouseevent-offsety": {"displayText":"offsetY","export":true,"for_":["MouseEvent"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"offsetY","type":"attribute","url":"#dom-mouseevent-offsety"}, "#dom-mouseevent-pagex": {"displayText":"pageX","export":true,"for_":["MouseEvent"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"pageX","type":"attribute","url":"#dom-mouseevent-pagex"}, "#dom-mouseevent-pagey": {"displayText":"pageY","export":true,"for_":["MouseEvent"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"pageY","type":"attribute","url":"#dom-mouseevent-pagey"}, "#dom-mouseevent-screenx": {"displayText":"screenX","export":true,"for_":["MouseEvent"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"screenX","type":"attribute","url":"#dom-mouseevent-screenx"}, "#dom-mouseevent-screeny": {"displayText":"screenY","export":true,"for_":["MouseEvent"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"screenY","type":"attribute","url":"#dom-mouseevent-screeny"}, "#dom-mouseevent-x": {"displayText":"x","export":true,"for_":["MouseEvent"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"x","type":"attribute","url":"#dom-mouseevent-x"}, "#dom-mouseevent-y": {"displayText":"y","export":true,"for_":["MouseEvent"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"y","type":"attribute","url":"#dom-mouseevent-y"}, "#dom-range-getboundingclientrect": {"displayText":"getBoundingClientRect()","export":true,"for_":["Range"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"getBoundingClientRect()","type":"method","url":"#dom-range-getboundingclientrect"}, "#dom-range-getclientrects": {"displayText":"getClientRects()","export":true,"for_":["Range"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"getClientRects()","type":"method","url":"#dom-range-getclientrects"}, "#dom-screen-availheight": {"displayText":"availHeight","export":true,"for_":["Screen"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"availHeight","type":"attribute","url":"#dom-screen-availheight"}, "#dom-screen-availwidth": {"displayText":"availWidth","export":true,"for_":["Screen"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"availWidth","type":"attribute","url":"#dom-screen-availwidth"}, "#dom-screen-colordepth": {"displayText":"colorDepth","export":true,"for_":["Screen"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"colorDepth","type":"attribute","url":"#dom-screen-colordepth"}, "#dom-screen-height": {"displayText":"height","export":true,"for_":["Screen"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"height","type":"attribute","url":"#dom-screen-height"}, "#dom-screen-pixeldepth": {"displayText":"pixelDepth","export":true,"for_":["Screen"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"pixelDepth","type":"attribute","url":"#dom-screen-pixeldepth"}, "#dom-screen-width": {"displayText":"width","export":true,"for_":["Screen"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"width","type":"attribute","url":"#dom-screen-width"}, "#dom-scrollintoviewoptions-block": {"displayText":"block","export":true,"for_":["ScrollIntoViewOptions"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"block","type":"dict-member","url":"#dom-scrollintoviewoptions-block"}, "#dom-scrollintoviewoptions-container": {"displayText":"container","export":true,"for_":["ScrollIntoViewOptions"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"container","type":"dict-member","url":"#dom-scrollintoviewoptions-container"}, "#dom-scrollintoviewoptions-inline": {"displayText":"inline","export":true,"for_":["ScrollIntoViewOptions"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"inline","type":"dict-member","url":"#dom-scrollintoviewoptions-inline"}, "#dom-scrolloptions-behavior": {"displayText":"behavior","export":true,"for_":["ScrollOptions"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"behavior","type":"dict-member","url":"#dom-scrolloptions-behavior"}, "#dom-scrolltooptions-left": {"displayText":"left","export":true,"for_":["ScrollToOptions"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"left","type":"dict-member","url":"#dom-scrolltooptions-left"}, "#dom-scrolltooptions-top": {"displayText":"top","export":true,"for_":["ScrollToOptions"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"top","type":"dict-member","url":"#dom-scrolltooptions-top"}, "#dom-visualviewport-height": {"displayText":"height","export":true,"for_":["VisualViewport"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"height","type":"attribute","url":"#dom-visualviewport-height"}, "#dom-visualviewport-offsetleft": {"displayText":"offsetLeft","export":true,"for_":["VisualViewport"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"offsetLeft","type":"attribute","url":"#dom-visualviewport-offsetleft"}, "#dom-visualviewport-offsettop": {"displayText":"offsetTop","export":true,"for_":["VisualViewport"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"offsetTop","type":"attribute","url":"#dom-visualviewport-offsettop"}, "#dom-visualviewport-onresize": {"displayText":"onresize","export":true,"for_":["VisualViewport"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"onresize","type":"attribute","url":"#dom-visualviewport-onresize"}, "#dom-visualviewport-onscroll": {"displayText":"onscroll","export":true,"for_":["VisualViewport"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"onscroll","type":"attribute","url":"#dom-visualviewport-onscroll"}, "#dom-visualviewport-onscrollend": {"displayText":"onscrollend","export":true,"for_":["VisualViewport"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"onscrollend","type":"attribute","url":"#dom-visualviewport-onscrollend"}, "#dom-visualviewport-pageleft": {"displayText":"pageLeft","export":true,"for_":["VisualViewport"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"pageLeft","type":"attribute","url":"#dom-visualviewport-pageleft"}, "#dom-visualviewport-pagetop": {"displayText":"pageTop","export":true,"for_":["VisualViewport"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"pageTop","type":"attribute","url":"#dom-visualviewport-pagetop"}, "#dom-visualviewport-scale": {"displayText":"scale","export":true,"for_":["VisualViewport"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"scale","type":"attribute","url":"#dom-visualviewport-scale"}, "#dom-visualviewport-width": {"displayText":"width","export":true,"for_":["VisualViewport"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"width","type":"attribute","url":"#dom-visualviewport-width"}, "#dom-window-devicepixelratio": {"displayText":"devicePixelRatio","export":true,"for_":["Window"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"devicePixelRatio","type":"attribute","url":"#dom-window-devicepixelratio"}, "#dom-window-innerheight": {"displayText":"innerHeight","export":true,"for_":["Window"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"innerHeight","type":"attribute","url":"#dom-window-innerheight"}, "#dom-window-innerwidth": {"displayText":"innerWidth","export":true,"for_":["Window"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"innerWidth","type":"attribute","url":"#dom-window-innerwidth"}, "#dom-window-matchmedia": {"displayText":"matchMedia(query)","export":true,"for_":["Window"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"matchMedia(query)","type":"method","url":"#dom-window-matchmedia"}, "#dom-window-moveby": {"displayText":"moveBy(x, y)","export":true,"for_":["Window"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"moveBy(x, y)","type":"method","url":"#dom-window-moveby"}, "#dom-window-moveto": {"displayText":"moveTo(x, y)","export":true,"for_":["Window"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"moveTo(x, y)","type":"method","url":"#dom-window-moveto"}, "#dom-window-outerheight": {"displayText":"outerHeight","export":true,"for_":["Window"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"outerHeight","type":"attribute","url":"#dom-window-outerheight"}, "#dom-window-outerwidth": {"displayText":"outerWidth","export":true,"for_":["Window"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"outerWidth","type":"attribute","url":"#dom-window-outerwidth"}, "#dom-window-pagexoffset": {"displayText":"pageXOffset","export":true,"for_":["Window"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"pageXOffset","type":"attribute","url":"#dom-window-pagexoffset"}, "#dom-window-pageyoffset": {"displayText":"pageYOffset","export":true,"for_":["Window"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"pageYOffset","type":"attribute","url":"#dom-window-pageyoffset"}, "#dom-window-resizeby": {"displayText":"resizeBy(x, y)","export":true,"for_":["Window"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"resizeBy(x, y)","type":"method","url":"#dom-window-resizeby"}, "#dom-window-resizeto": {"displayText":"resizeTo(width, height)","export":true,"for_":["Window"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"resizeTo(width, height)","type":"method","url":"#dom-window-resizeto"}, "#dom-window-screen": {"displayText":"screen","export":true,"for_":["Window"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"screen","type":"attribute","url":"#dom-window-screen"}, "#dom-window-screenleft": {"displayText":"screenLeft","export":true,"for_":["Window"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"screenLeft","type":"attribute","url":"#dom-window-screenleft"}, "#dom-window-screentop": {"displayText":"screenTop","export":true,"for_":["Window"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"screenTop","type":"attribute","url":"#dom-window-screentop"}, "#dom-window-screenx": {"displayText":"screenX","export":true,"for_":["Window"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"screenX","type":"attribute","url":"#dom-window-screenx"}, "#dom-window-screeny": {"displayText":"screenY","export":true,"for_":["Window"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"screenY","type":"attribute","url":"#dom-window-screeny"}, "#dom-window-scroll": {"displayText":"scroll(options)","export":true,"for_":["Window"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"scroll(options)","type":"method","url":"#dom-window-scroll"}, "#dom-window-scrollby": {"displayText":"scrollBy(options)","export":true,"for_":["Window"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"scrollBy(options)","type":"method","url":"#dom-window-scrollby"}, "#dom-window-scrollto": {"displayText":"scrollTo(options)","export":true,"for_":["Window"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"scrollTo(options)","type":"method","url":"#dom-window-scrollto"}, "#dom-window-scrollx": {"displayText":"scrollX","export":true,"for_":["Window"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"scrollX","type":"attribute","url":"#dom-window-scrollx"}, "#dom-window-scrolly": {"displayText":"scrollY","export":true,"for_":["Window"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"scrollY","type":"attribute","url":"#dom-window-scrolly"}, "#dom-window-visualviewport": {"displayText":"visualViewport","export":true,"for_":["Window"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"visualViewport","type":"attribute","url":"#dom-window-visualviewport"}, "#element-get-the-bounding-box": {"displayText":"get the bounding box","export":true,"for_":["Element"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"get the bounding box","type":"dfn","url":"#element-get-the-bounding-box"}, "#ending-edges": {"displayText":"ending edges","export":true,"for_":[],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"ending edges","type":"dfn","url":"#ending-edges"}, "#enumdef-cssboxtype": {"displayText":"CSSBoxType","export":true,"for_":[],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"CSSBoxType","type":"enum","url":"#enumdef-cssboxtype"}, "#enumdef-scrollbehavior": {"displayText":"ScrollBehavior","export":true,"for_":[],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"ScrollBehavior","type":"enum","url":"#enumdef-scrollbehavior"}, "#enumdef-scrollintoviewcontainer": {"displayText":"ScrollIntoViewContainer","export":true,"for_":[],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"ScrollIntoViewContainer","type":"enum","url":"#enumdef-scrollintoviewcontainer"}, "#enumdef-scrolllogicalposition": {"displayText":"ScrollLogicalPosition","export":true,"for_":[],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"ScrollLogicalPosition","type":"enum","url":"#enumdef-scrolllogicalposition"}, "#eventdef-document-scroll": {"displayText":"scroll","export":true,"for_":["Document","Element","VisualViewport"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"scroll","type":"event","url":"#eventdef-document-scroll"}, "#eventdef-document-scrollend": {"displayText":"scrollend","export":true,"for_":["Document","Element","VisualViewport"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"scrollend","type":"event","url":"#eventdef-document-scrollend"}, "#eventdef-mediaquerylist-change": {"displayText":"change","export":true,"for_":["MediaQueryList"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"change","type":"event","url":"#eventdef-mediaquerylist-change"}, "#eventdef-window-resize": {"displayText":"resize","export":true,"for_":["VisualViewport","Window"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"resize","type":"event","url":"#eventdef-window-resize"}, "#geometryutils": {"displayText":"GeometryUtils","export":true,"for_":[],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"GeometryUtils","type":"interface","url":"#geometryutils"}, "#layout-viewport": {"displayText":"layout viewport","export":true,"for_":[],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"layout viewport","type":"dfn","url":"#layout-viewport"}, "#mediaquerylist": {"displayText":"MediaQueryList","export":true,"for_":[],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"MediaQueryList","type":"interface","url":"#mediaquerylist"}, "#mediaquerylist-document": {"displayText":"document","export":true,"for_":["MediaQueryList"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"document","type":"dfn","url":"#mediaquerylist-document"}, "#mediaquerylist-matches-state": {"displayText":"matches state","export":true,"for_":["MediaQueryList"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"matches state","type":"dfn","url":"#mediaquerylist-matches-state"}, "#mediaquerylist-media-query-list": {"displayText":"media query list","export":true,"for_":["MediaQueryList"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"media query list","type":"dfn","url":"#mediaquerylist-media-query-list"}, "#mediaquerylistevent": {"displayText":"MediaQueryListEvent","export":true,"for_":[],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"MediaQueryListEvent","type":"interface","url":"#mediaquerylistevent"}, "#normalize-non-finite-values": {"displayText":"normalize non-finite values","export":true,"for_":[],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"normalize non-finite values","type":"dfn","url":"#normalize-non-finite-values"}, "#overflow-directions": {"displayText":"overflow directions","export":true,"for_":[],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"overflow directions","type":"dfn","url":"#overflow-directions"}, "#page-zoom": {"displayText":"page zoom","export":true,"for_":[],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"page zoom","type":"dfn","url":"#page-zoom"}, "#perform-a-scroll": {"displayText":"perform a scroll","export":true,"for_":[],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"perform a scroll","type":"dfn","url":"#perform-a-scroll"}, "#potentially-scrollable": {"displayText":"potentially scrollable","export":true,"for_":[],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"potentially scrollable","type":"dfn","url":"#potentially-scrollable"}, "#scale-factor": {"displayText":"scale factor","export":true,"for_":[],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"scale factor","type":"dfn","url":"#scale-factor"}, "#screen": {"displayText":"Screen","export":true,"for_":[],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"Screen","type":"interface","url":"#screen"}, "#scroll-a-target-into-view": {"displayText":"scroll a target into view","export":true,"for_":[],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"scroll a target into view","type":"dfn","url":"#scroll-a-target-into-view"}, "#scroll-an-element": {"displayText":"scroll an element","export":true,"for_":[],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"scroll an element","type":"dfn","url":"#scroll-an-element"}, "#scroll-completed": {"displayText":"scroll completed","export":true,"for_":[],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"scroll completed","type":"dfn","url":"#scroll-completed"}, "#scrolling-area": {"displayText":"scrolling area","export":true,"for_":[],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"scrolling area","type":"dfn","url":"#scrolling-area"}, "#scrolling-area-origin": {"displayText":"scrolling area origin","export":true,"for_":[],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"scrolling area origin","type":"dfn","url":"#scrolling-area-origin"}, "#scrolling-box": {"displayText":"scrolling box","export":true,"for_":[],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"scrolling box","type":"dfn","url":"#scrolling-box"}, "#smooth-scroll-aborted": {"displayText":"smooth scroll aborted","export":true,"for_":[],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"smooth scroll aborted","type":"dfn","url":"#smooth-scroll-aborted"}, "#supported-open-feature-name-height": {"displayText":"height","export":true,"for_":["supported open() feature name"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"height","type":"dfn","url":"#supported-open-feature-name-height"}, "#supported-open-feature-name-left": {"displayText":"left","export":true,"for_":["supported open() feature name"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"left","type":"dfn","url":"#supported-open-feature-name-left"}, "#supported-open-feature-name-top": {"displayText":"top","export":true,"for_":["supported open() feature name"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"top","type":"dfn","url":"#supported-open-feature-name-top"}, "#supported-open-feature-name-width": {"displayText":"width","export":true,"for_":["supported open() feature name"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"width","type":"dfn","url":"#supported-open-feature-name-width"}, "#svg-layout-box": {"displayText":"svg layout box","export":true,"for_":[],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"svg layout box","type":"dfn","url":"#svg-layout-box"}, "#transforms": {"displayText":"transforms","export":true,"for_":[],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"transforms","type":"dfn","url":"#transforms"}, "#typedefdef-geometrynode": {"displayText":"GeometryNode","export":true,"for_":[],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"GeometryNode","type":"typedef","url":"#typedefdef-geometrynode"}, "#viewport-perform-a-scroll": {"displayText":"perform a scroll","export":true,"for_":["viewport"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"perform a scroll","type":"dfn","url":"#viewport-perform-a-scroll"}, "#visual-viewport": {"displayText":"visual viewport","export":true,"for_":[],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"visual viewport","type":"dfn","url":"#visual-viewport"}, "#visualviewport": {"displayText":"VisualViewport","export":true,"for_":[],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"VisualViewport","type":"interface","url":"#visualviewport"}, "#visualviewport-associated-document": {"displayText":"associated document","export":true,"for_":["visualviewport"],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"associated document","type":"dfn","url":"#visualviewport-associated-document"}, "#web-exposed-available-screen-area": {"displayText":"web-exposed available screen area","export":true,"for_":[],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"web-exposed available screen area","type":"dfn","url":"#web-exposed-available-screen-area"}, "#web-exposed-screen-area": {"displayText":"web-exposed screen area","export":true,"for_":[],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"local","text":"web-exposed screen area","type":"dfn","url":"#web-exposed-screen-area"}, "https://dom.spec.whatwg.org/#add-an-event-listener": {"displayText":"add an event listener","export":true,"for_":[],"level":"1","normative":true,"shortname":"dom","spec":"dom","status":"current","text":"add an event listener","type":"dfn","url":"https://dom.spec.whatwg.org/#add-an-event-listener"}, "https://dom.spec.whatwg.org/#boundary-point-node": {"displayText":"node","export":true,"for_":["boundary point"],"level":"1","normative":true,"shortname":"dom","spec":"dom","status":"current","text":"node","type":"dfn","url":"https://dom.spec.whatwg.org/#boundary-point-node"}, "https://dom.spec.whatwg.org/#callbackdef-eventlistener": {"displayText":"EventListener","export":true,"for_":[],"level":"1","normative":true,"shortname":"dom","spec":"dom","status":"current","text":"EventListener","type":"callback","url":"https://dom.spec.whatwg.org/#callbackdef-eventlistener"}, "https://dom.spec.whatwg.org/#concept-attribute-element": {"displayText":"element","export":true,"for_":["Attr"],"level":"1","normative":true,"shortname":"dom","spec":"dom","status":"current","text":"element","type":"dfn","url":"https://dom.spec.whatwg.org/#concept-attribute-element"}, "https://dom.spec.whatwg.org/#concept-closed-shadow-hidden": {"displayText":"closed-shadow-hidden","export":true,"for_":[],"level":"1","normative":true,"shortname":"dom","spec":"dom","status":"current","text":"closed-shadow-hidden","type":"dfn","url":"https://dom.spec.whatwg.org/#concept-closed-shadow-hidden"}, "https://dom.spec.whatwg.org/#concept-document": {"displayText":"document","export":true,"for_":[],"level":"1","normative":true,"shortname":"dom","spec":"dom","status":"current","text":"document","type":"dfn","url":"https://dom.spec.whatwg.org/#concept-document"}, "https://dom.spec.whatwg.org/#concept-document-quirks": {"displayText":"quirks mode","export":true,"for_":[],"level":"1","normative":true,"shortname":"dom","spec":"dom","status":"current","text":"quirks mode","type":"dfn","url":"https://dom.spec.whatwg.org/#concept-document-quirks"}, "https://dom.spec.whatwg.org/#concept-documentfragment-host": {"displayText":"host","export":true,"for_":["DocumentFragment"],"level":"1","normative":true,"shortname":"dom","spec":"dom","status":"current","text":"host","type":"dfn","url":"https://dom.spec.whatwg.org/#concept-documentfragment-host"}, "https://dom.spec.whatwg.org/#concept-element": {"displayText":"element","export":true,"for_":[],"level":"1","normative":true,"shortname":"dom","spec":"dom","status":"current","text":"element","type":"dfn","url":"https://dom.spec.whatwg.org/#concept-element"}, "https://dom.spec.whatwg.org/#concept-element-shadow-root": {"displayText":"shadow root","export":true,"for_":["Element"],"level":"1","normative":true,"shortname":"dom","spec":"dom","status":"current","text":"shadow root","type":"dfn","url":"https://dom.spec.whatwg.org/#concept-element-shadow-root"}, "https://dom.spec.whatwg.org/#concept-event-fire": {"displayText":"fire an event","export":true,"for_":[],"level":"1","normative":true,"shortname":"dom","spec":"dom","status":"current","text":"fire an event","type":"dfn","url":"https://dom.spec.whatwg.org/#concept-event-fire"}, "https://dom.spec.whatwg.org/#concept-event-listener": {"displayText":"event listener","export":true,"for_":[],"level":"1","normative":true,"shortname":"dom","spec":"dom","status":"current","text":"event listener","type":"dfn","url":"https://dom.spec.whatwg.org/#concept-event-listener"}, "https://dom.spec.whatwg.org/#concept-node": {"displayText":"nodes","export":true,"for_":[],"level":"1","normative":true,"shortname":"dom","spec":"dom","status":"current","text":"nodes","type":"dfn","url":"https://dom.spec.whatwg.org/#concept-node"}, "https://dom.spec.whatwg.org/#concept-node-document": {"displayText":"node document","export":true,"for_":["Node"],"level":"1","normative":true,"shortname":"dom","spec":"dom","status":"current","text":"node document","type":"dfn","url":"https://dom.spec.whatwg.org/#concept-node-document"}, "https://dom.spec.whatwg.org/#concept-range": {"displayText":"range","export":true,"for_":[],"level":"1","normative":true,"shortname":"dom","spec":"dom","status":"current","text":"range","type":"dfn","url":"https://dom.spec.whatwg.org/#concept-range"}, "https://dom.spec.whatwg.org/#concept-range-end-node": {"displayText":"end node","export":true,"for_":["range"],"level":"1","normative":true,"shortname":"dom","spec":"dom","status":"current","text":"end node","type":"dfn","url":"https://dom.spec.whatwg.org/#concept-range-end-node"}, "https://dom.spec.whatwg.org/#concept-range-end-offset": {"displayText":"end offset","export":true,"for_":["range"],"level":"1","normative":true,"shortname":"dom","spec":"dom","status":"current","text":"end offset","type":"dfn","url":"https://dom.spec.whatwg.org/#concept-range-end-offset"}, "https://dom.spec.whatwg.org/#concept-range-start-node": {"displayText":"start node","export":true,"for_":["range"],"level":"1","normative":true,"shortname":"dom","spec":"dom","status":"current","text":"start node","type":"dfn","url":"https://dom.spec.whatwg.org/#concept-range-start-node"}, "https://dom.spec.whatwg.org/#concept-range-start-offset": {"displayText":"start offset","export":true,"for_":["range"],"level":"1","normative":true,"shortname":"dom","spec":"dom","status":"current","text":"start offset","type":"dfn","url":"https://dom.spec.whatwg.org/#concept-range-start-offset"}, "https://dom.spec.whatwg.org/#concept-shadow-including-inclusive-ancestor": {"displayText":"shadow-including inclusive ancestor","export":true,"for_":[],"level":"1","normative":true,"shortname":"dom","spec":"dom","status":"current","text":"shadow-including inclusive ancestor","type":"dfn","url":"https://dom.spec.whatwg.org/#concept-shadow-including-inclusive-ancestor"}, "https://dom.spec.whatwg.org/#concept-tree-index": {"displayText":"index","export":true,"for_":["tree"],"level":"1","normative":true,"shortname":"dom","spec":"dom","status":"current","text":"index","type":"dfn","url":"https://dom.spec.whatwg.org/#concept-tree-index"}, "https://dom.spec.whatwg.org/#concept-tree-parent": {"displayText":"parent","export":true,"for_":["tree"],"level":"1","normative":true,"shortname":"dom","spec":"dom","status":"current","text":"parent","type":"dfn","url":"https://dom.spec.whatwg.org/#concept-tree-parent"}, "https://dom.spec.whatwg.org/#concept-tree-root": {"displayText":"root","export":true,"for_":["tree"],"level":"1","normative":true,"shortname":"dom","spec":"dom","status":"current","text":"root","type":"dfn","url":"https://dom.spec.whatwg.org/#concept-tree-root"}, "https://dom.spec.whatwg.org/#dictdef-eventinit": {"displayText":"EventInit","export":true,"for_":[],"level":"1","normative":true,"shortname":"dom","spec":"dom","status":"current","text":"EventInit","type":"dictionary","url":"https://dom.spec.whatwg.org/#dictdef-eventinit"}, "https://dom.spec.whatwg.org/#dispatch-flag": {"displayText":"dispatch flag","export":true,"for_":["Event"],"level":"1","normative":true,"shortname":"dom","spec":"dom","status":"current","text":"dispatch flag","type":"dfn","url":"https://dom.spec.whatwg.org/#dispatch-flag"}, "https://dom.spec.whatwg.org/#document": {"displayText":"Document","export":true,"for_":[],"level":"1","normative":true,"shortname":"dom","spec":"dom","status":"current","text":"Document","type":"interface","url":"https://dom.spec.whatwg.org/#document"}, "https://dom.spec.whatwg.org/#dom-event-istrusted": {"displayText":"isTrusted","export":true,"for_":["Event"],"level":"1","normative":true,"shortname":"dom","spec":"dom","status":"current","text":"isTrusted","type":"attribute","url":"https://dom.spec.whatwg.org/#dom-event-istrusted"}, "https://dom.spec.whatwg.org/#dom-eventtarget-addeventlistener": {"displayText":"addEventListener(type, callback)","export":true,"for_":["EventTarget"],"level":"1","normative":true,"shortname":"dom","spec":"dom","status":"current","text":"addEventListener(type, callback)","type":"method","url":"https://dom.spec.whatwg.org/#dom-eventtarget-addeventlistener"}, "https://dom.spec.whatwg.org/#dom-eventtarget-removeeventlistener": {"displayText":"removeEventListener(type, callback)","export":true,"for_":["EventTarget"],"level":"1","normative":true,"shortname":"dom","spec":"dom","status":"current","text":"removeEventListener(type, callback)","type":"method","url":"https://dom.spec.whatwg.org/#dom-eventtarget-removeeventlistener"}, "https://dom.spec.whatwg.org/#element": {"displayText":"Element","export":true,"for_":[],"level":"1","normative":true,"shortname":"dom","spec":"dom","status":"current","text":"Element","type":"interface","url":"https://dom.spec.whatwg.org/#element"}, "https://dom.spec.whatwg.org/#event": {"displayText":"Event","export":true,"for_":[],"level":"1","normative":true,"shortname":"dom","spec":"dom","status":"current","text":"Event","type":"interface","url":"https://dom.spec.whatwg.org/#event"}, "https://dom.spec.whatwg.org/#event-listener-callback": {"displayText":"callback","export":true,"for_":["event listener"],"level":"1","normative":true,"shortname":"dom","spec":"dom","status":"current","text":"callback","type":"dfn","url":"https://dom.spec.whatwg.org/#event-listener-callback"}, "https://dom.spec.whatwg.org/#event-listener-capture": {"displayText":"capture","export":false,"for_":["event listener"],"level":"1","normative":true,"shortname":"dom","spec":"dom","status":"current","text":"capture","type":"dfn","url":"https://dom.spec.whatwg.org/#event-listener-capture"}, "https://dom.spec.whatwg.org/#event-listener-type": {"displayText":"type","export":false,"for_":["event listener"],"level":"1","normative":true,"shortname":"dom","spec":"dom","status":"current","text":"type","type":"dfn","url":"https://dom.spec.whatwg.org/#event-listener-type"}, "https://dom.spec.whatwg.org/#eventtarget": {"displayText":"EventTarget","export":true,"for_":[],"level":"1","normative":true,"shortname":"dom","spec":"dom","status":"current","text":"EventTarget","type":"interface","url":"https://dom.spec.whatwg.org/#eventtarget"}, "https://dom.spec.whatwg.org/#eventtarget-event-listener-list": {"displayText":"event listener list","export":false,"for_":["EventTarget"],"level":"1","normative":true,"shortname":"dom","spec":"dom","status":"current","text":"event listener list","type":"dfn","url":"https://dom.spec.whatwg.org/#eventtarget-event-listener-list"}, "https://dom.spec.whatwg.org/#node": {"displayText":"Node","export":true,"for_":[],"level":"1","normative":true,"shortname":"dom","spec":"dom","status":"current","text":"Node","type":"interface","url":"https://dom.spec.whatwg.org/#node"}, "https://dom.spec.whatwg.org/#parent-element": {"displayText":"parent element","export":true,"for_":[],"level":"1","normative":true,"shortname":"dom","spec":"dom","status":"current","text":"parent element","type":"dfn","url":"https://dom.spec.whatwg.org/#parent-element"}, "https://dom.spec.whatwg.org/#range": {"displayText":"Range","export":true,"for_":[],"level":"1","normative":true,"shortname":"dom","spec":"dom","status":"current","text":"Range","type":"interface","url":"https://dom.spec.whatwg.org/#range"}, "https://dom.spec.whatwg.org/#remove-an-event-listener": {"displayText":"remove an event listener","export":true,"for_":[],"level":"1","normative":true,"shortname":"dom","spec":"dom","status":"current","text":"remove an event listener","type":"dfn","url":"https://dom.spec.whatwg.org/#remove-an-event-listener"}, "https://dom.spec.whatwg.org/#shadowroot": {"displayText":"ShadowRoot","export":true,"for_":[],"level":"1","normative":true,"shortname":"dom","spec":"dom","status":"current","text":"ShadowRoot","type":"interface","url":"https://dom.spec.whatwg.org/#shadowroot"}, "https://dom.spec.whatwg.org/#text": {"displayText":"Text","export":true,"for_":[],"level":"1","normative":true,"shortname":"dom","spec":"dom","status":"current","text":"Text","type":"interface","url":"https://dom.spec.whatwg.org/#text"}, "https://drafts.csswg.org/css-align-3/#content-distribution-properties": {"displayText":"content-distribution properties","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-align","spec":"css-align-3","status":"current","text":"content-distribution properties","type":"dfn","url":"https://drafts.csswg.org/css-align-3/#content-distribution-properties"}, "https://drafts.csswg.org/css-backgrounds-3/#propdef-border-left-width": {"displayText":"border-left-width","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"current","text":"border-left-width","type":"property","url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-left-width"}, "https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top-width": {"displayText":"border-top-width","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"current","text":"border-top-width","type":"property","url":"https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top-width"}, "https://drafts.csswg.org/css-box-4/#border-box": {"displayText":"border box","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"current","text":"border box","type":"dfn","url":"https://drafts.csswg.org/css-box-4/#border-box"}, "https://drafts.csswg.org/css-box-4/#border-edge": {"displayText":"border edge","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"current","text":"border edge","type":"dfn","url":"https://drafts.csswg.org/css-box-4/#border-edge"}, "https://drafts.csswg.org/css-box-4/#margin-edge": {"displayText":"margin edge","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"current","text":"margin edge","type":"dfn","url":"https://drafts.csswg.org/css-box-4/#margin-edge"}, "https://drafts.csswg.org/css-box-4/#padding-edge": {"displayText":"padding edge","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"current","text":"padding edge","type":"dfn","url":"https://drafts.csswg.org/css-box-4/#padding-edge"}, "https://drafts.csswg.org/css-break-4/#box-fragment": {"displayText":"box fragment","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-break","spec":"css-break-4","status":"current","text":"box fragment","type":"dfn","url":"https://drafts.csswg.org/css-break-4/#box-fragment"}, "https://drafts.csswg.org/css-color-4/#propdef-opacity": {"displayText":"opacity","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-color","spec":"css-color-4","status":"current","text":"opacity","type":"property","url":"https://drafts.csswg.org/css-color-4/#propdef-opacity"}, "https://drafts.csswg.org/css-contain-2/#propdef-content-visibility": {"displayText":"content-visibility","export":true,"for_":[],"level":"2","normative":true,"shortname":"css-contain","spec":"css-contain-2","status":"current","text":"content-visibility","type":"property","url":"https://drafts.csswg.org/css-contain-2/#propdef-content-visibility"}, "https://drafts.csswg.org/css-contain-2/#skips-its-contents": {"displayText":"skips its contents","export":true,"for_":[],"level":"2","normative":true,"shortname":"css-contain","spec":"css-contain-2","status":"current","text":"skips its contents","type":"dfn","url":"https://drafts.csswg.org/css-contain-2/#skips-its-contents"}, "https://drafts.csswg.org/css-display-4/#anonymous": {"displayText":"anonymous","export":true,"for_":["CSS"],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"anonymous","type":"dfn","url":"https://drafts.csswg.org/css-display-4/#anonymous"}, "https://drafts.csswg.org/css-display-4/#block-box": {"displayText":"block box","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"block box","type":"dfn","url":"https://drafts.csswg.org/css-display-4/#block-box"}, "https://drafts.csswg.org/css-display-4/#block-level": {"displayText":"block-level","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"block-level","type":"dfn","url":"https://drafts.csswg.org/css-display-4/#block-level"}, "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/#box-tree": {"displayText":"box tree","export":true,"for_":["CSS"],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"box tree","type":"dfn","url":"https://drafts.csswg.org/css-display-4/#box-tree"}, "https://drafts.csswg.org/css-display-4/#initial-containing-block": {"displayText":"initial containing block","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"initial containing block","type":"dfn","url":"https://drafts.csswg.org/css-display-4/#initial-containing-block"}, "https://drafts.csswg.org/css-display-4/#inline-level-box": {"displayText":"inline-level box","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"inline-level box","type":"dfn","url":"https://drafts.csswg.org/css-display-4/#inline-level-box"}, "https://drafts.csswg.org/css-display-4/#invisible": {"displayText":"invisible","export":false,"for_":[],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"invisible","type":"dfn","url":"https://drafts.csswg.org/css-display-4/#invisible"}, "https://drafts.csswg.org/css-display-4/#principal-box": {"displayText":"principal box","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"principal box","type":"dfn","url":"https://drafts.csswg.org/css-display-4/#principal-box"}, "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/#root-element": {"displayText":"root element","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"root element","type":"dfn","url":"https://drafts.csswg.org/css-display-4/#root-element"}, "https://drafts.csswg.org/css-display-4/#valdef-display-inline-table": {"displayText":"inline-table","export":true,"for_":["display","<display-legacy>"],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"inline-table","type":"value","url":"https://drafts.csswg.org/css-display-4/#valdef-display-inline-table"}, "https://drafts.csswg.org/css-display-4/#valdef-display-table": {"displayText":"table","export":true,"for_":["display","<display-inside>"],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"table","type":"value","url":"https://drafts.csswg.org/css-display-4/#valdef-display-table"}, "https://drafts.csswg.org/css-display-4/#valdef-display-table-column": {"displayText":"table-column","export":true,"for_":["display","<display-internal>"],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"table-column","type":"value","url":"https://drafts.csswg.org/css-display-4/#valdef-display-table-column"}, "https://drafts.csswg.org/css-display-4/#valdef-display-table-column-group": {"displayText":"table-column-group","export":true,"for_":["display","<display-internal>"],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"table-column-group","type":"value","url":"https://drafts.csswg.org/css-display-4/#valdef-display-table-column-group"}, "https://drafts.csswg.org/css-overflow-3/#classic-scrollbars": {"displayText":"classic scrollbars","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-overflow","spec":"css-overflow-3","status":"current","text":"classic scrollbars","type":"dfn","url":"https://drafts.csswg.org/css-overflow-3/#classic-scrollbars"}, "https://drafts.csswg.org/css-overflow-3/#propdef-overflow": {"displayText":"overflow","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-overflow","spec":"css-overflow-3","status":"current","text":"overflow","type":"property","url":"https://drafts.csswg.org/css-overflow-3/#propdef-overflow"}, "https://drafts.csswg.org/css-overflow-3/#propdef-overflow-x": {"displayText":"overflow-x","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-overflow","spec":"css-overflow-3","status":"current","text":"overflow-x","type":"property","url":"https://drafts.csswg.org/css-overflow-3/#propdef-overflow-x"}, "https://drafts.csswg.org/css-overflow-3/#propdef-overflow-y": {"displayText":"overflow-y","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-overflow","spec":"css-overflow-3","status":"current","text":"overflow-y","type":"property","url":"https://drafts.csswg.org/css-overflow-3/#propdef-overflow-y"}, "https://drafts.csswg.org/css-overflow-3/#propdef-scroll-behavior": {"displayText":"scroll-behavior","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-overflow","spec":"css-overflow-3","status":"current","text":"scroll-behavior","type":"property","url":"https://drafts.csswg.org/css-overflow-3/#propdef-scroll-behavior"}, "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/#valdef-overflow-auto": {"displayText":"auto","export":true,"for_":["overflow","overflow-x","overflow-y"],"level":"3","normative":true,"shortname":"css-overflow","spec":"css-overflow-3","status":"current","text":"auto","type":"value","url":"https://drafts.csswg.org/css-overflow-3/#valdef-overflow-auto"}, "https://drafts.csswg.org/css-overflow-3/#valdef-overflow-clip": {"displayText":"clip","export":true,"for_":["overflow","overflow-x","overflow-y"],"level":"3","normative":true,"shortname":"css-overflow","spec":"css-overflow-3","status":"current","text":"clip","type":"value","url":"https://drafts.csswg.org/css-overflow-3/#valdef-overflow-clip"}, "https://drafts.csswg.org/css-overflow-3/#valdef-overflow-visible": {"displayText":"visible","export":true,"for_":["overflow","overflow-x","overflow-y"],"level":"3","normative":true,"shortname":"css-overflow","spec":"css-overflow-3","status":"current","text":"visible","type":"value","url":"https://drafts.csswg.org/css-overflow-3/#valdef-overflow-visible"}, "https://drafts.csswg.org/css-overflow-3/#valdef-scroll-behavior-auto": {"displayText":"auto","export":true,"for_":["scroll-behavior"],"level":"3","normative":true,"shortname":"css-overflow","spec":"css-overflow-3","status":"current","text":"auto","type":"value","url":"https://drafts.csswg.org/css-overflow-3/#valdef-scroll-behavior-auto"}, "https://drafts.csswg.org/css-overflow-3/#valdef-scroll-behavior-smooth": {"displayText":"smooth","export":true,"for_":["scroll-behavior"],"level":"3","normative":true,"shortname":"css-overflow","spec":"css-overflow-3","status":"current","text":"smooth","type":"value","url":"https://drafts.csswg.org/css-overflow-3/#valdef-scroll-behavior-smooth"}, "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/#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-position-3/#valdef-position-static": {"displayText":"static","export":true,"for_":["position"],"level":"3","normative":true,"shortname":"css-position","spec":"css-position-3","status":"current","text":"static","type":"value","url":"https://drafts.csswg.org/css-position-3/#valdef-position-static"}, "https://drafts.csswg.org/css-pseudo-4/#csspseudoelement": {"displayText":"CSSPseudoElement","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-pseudo","spec":"css-pseudo-4","status":"current","text":"CSSPseudoElement","type":"interface","url":"https://drafts.csswg.org/css-pseudo-4/#csspseudoelement"}, "https://drafts.csswg.org/css-scoping-1/#flat-tree": {"displayText":"flat tree","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-scoping","spec":"css-scoping-1","status":"current","text":"flat tree","type":"dfn","url":"https://drafts.csswg.org/css-scoping-1/#flat-tree"}, "https://drafts.csswg.org/css-scroll-snap-1/#propdef-scroll-snap-type": {"displayText":"scroll-snap-type","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-scroll-snap","spec":"css-scroll-snap-1","status":"current","text":"scroll-snap-type","type":"property","url":"https://drafts.csswg.org/css-scroll-snap-1/#propdef-scroll-snap-type"}, "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-scroll-snap-1/#scroll-snap-container": {"displayText":"scroll snap container","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-scroll-snap","spec":"css-scroll-snap-1","status":"current","text":"scroll snap container","type":"dfn","url":"https://drafts.csswg.org/css-scroll-snap-1/#scroll-snap-container"}, "https://drafts.csswg.org/css-scroll-snap-1/#scroll-snap-position": {"displayText":"scroll snap position","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-scroll-snap","spec":"css-scroll-snap-1","status":"current","text":"scroll snap position","type":"dfn","url":"https://drafts.csswg.org/css-scroll-snap-1/#scroll-snap-position"}, "https://drafts.csswg.org/css-scroll-snap-2/#document-dispatch-pending-scrollsnapchange-events": {"displayText":"dispatch pending scrollsnapchange events","export":true,"for_":["Document"],"level":"2","normative":true,"shortname":"css-scroll-snap","spec":"css-scroll-snap-2","status":"current","text":"dispatch pending scrollsnapchange events","type":"dfn","url":"https://drafts.csswg.org/css-scroll-snap-2/#document-dispatch-pending-scrollsnapchange-events"}, "https://drafts.csswg.org/css-scroll-snap-2/#document-dispatch-pending-scrollsnapchanging-events": {"displayText":"dispatch pending scrollsnapchanging events","export":true,"for_":["Document"],"level":"2","normative":true,"shortname":"css-scroll-snap","spec":"css-scroll-snap-2","status":"current","text":"dispatch pending scrollsnapchanging events","type":"dfn","url":"https://drafts.csswg.org/css-scroll-snap-2/#document-dispatch-pending-scrollsnapchanging-events"}, "https://drafts.csswg.org/css-scroll-snap-2/#document-update-scrollsnapchange-targets": {"displayText":"update scrollsnapchange targets","export":true,"for_":["Document"],"level":"2","normative":true,"shortname":"css-scroll-snap","spec":"css-scroll-snap-2","status":"current","text":"update scrollsnapchange targets","type":"dfn","url":"https://drafts.csswg.org/css-scroll-snap-2/#document-update-scrollsnapchange-targets"}, "https://drafts.csswg.org/css-scroll-snap-2/#document-update-scrollsnapchanging-targets": {"displayText":"update scrollsnapchanging targets","export":true,"for_":["Document"],"level":"2","normative":true,"shortname":"css-scroll-snap","spec":"css-scroll-snap-2","status":"current","text":"update scrollsnapchanging targets","type":"dfn","url":"https://drafts.csswg.org/css-scroll-snap-2/#document-update-scrollsnapchanging-targets"}, "https://drafts.csswg.org/css-scroll-snap-2/#eventual-snap-target": {"displayText":"eventual snap target","export":true,"for_":[],"level":"2","normative":true,"shortname":"css-scroll-snap","spec":"css-scroll-snap-2","status":"current","text":"eventual snap target","type":"dfn","url":"https://drafts.csswg.org/css-scroll-snap-2/#eventual-snap-target"}, "https://drafts.csswg.org/css-text-4/#typographic-character-unit": {"displayText":"typographic character unit","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-text","spec":"css-text-4","status":"current","text":"typographic character unit","type":"dfn","url":"https://drafts.csswg.org/css-text-4/#typographic-character-unit"}, "https://drafts.csswg.org/css-ui-4/#propdef-pointer-events": {"displayText":"pointer-events","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-ui","spec":"css-ui-4","status":"current","text":"pointer-events","type":"property","url":"https://drafts.csswg.org/css-ui-4/#propdef-pointer-events"}, "https://drafts.csswg.org/css-values-4/#px": {"displayText":"px","export":true,"for_":["<length>"],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"current","text":"px","type":"value","url":"https://drafts.csswg.org/css-values-4/#px"}, "https://drafts.csswg.org/css-values-4/#reference-pixel": {"displayText":"reference pixel","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"current","text":"reference pixel","type":"dfn","url":"https://drafts.csswg.org/css-values-4/#reference-pixel"}, "https://drafts.csswg.org/css-viewport/#effective-zoom": {"displayText":"effective zoom","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-viewport","spec":"css-viewport-1","status":"current","text":"effective zoom","type":"dfn","url":"https://drafts.csswg.org/css-viewport/#effective-zoom"}, "https://drafts.csswg.org/css-viewport/#scaled": {"displayText":"scaled","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-viewport","spec":"css-viewport-1","status":"current","text":"scaled","type":"dfn","url":"https://drafts.csswg.org/css-viewport/#scaled"}, "https://drafts.csswg.org/css-viewport/#unscaled": {"displayText":"unscaled","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-viewport","spec":"css-viewport-1","status":"current","text":"unscaled","type":"dfn","url":"https://drafts.csswg.org/css-viewport/#unscaled"}, "https://drafts.csswg.org/css-writing-modes-4/#block-end": {"displayText":"block-end","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-4","status":"current","text":"block-end","type":"dfn","url":"https://drafts.csswg.org/css-writing-modes-4/#block-end"}, "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/css-writing-modes-4/#inline-base-direction": {"displayText":"inline base direction","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-4","status":"current","text":"inline base direction","type":"dfn","url":"https://drafts.csswg.org/css-writing-modes-4/#inline-base-direction"}, "https://drafts.csswg.org/css-writing-modes-4/#inline-end": {"displayText":"inline-end","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-4","status":"current","text":"inline-end","type":"dfn","url":"https://drafts.csswg.org/css-writing-modes-4/#inline-end"}, "https://drafts.csswg.org/css2/#canvas": {"displayText":"canvas","export":false,"for_":[],"level":"2","normative":true,"shortname":"css","spec":"css2","status":"current","text":"canvas","type":"dfn","url":"https://drafts.csswg.org/css2/#canvas"}, "https://drafts.csswg.org/css2/#viewport%E2%91%A0": {"displayText":"viewport","export":false,"for_":[],"level":"2","normative":true,"shortname":"css","spec":"css2","status":"current","text":"viewport","type":"dfn","url":"https://drafts.csswg.org/css2/#viewport%E2%91%A0"}, "https://drafts.csswg.org/cssom-1/#cssomstring": {"displayText":"CSSOMString","export":true,"for_":[],"level":"1","normative":true,"shortname":"cssom","spec":"cssom-1","status":"current","text":"CSSOMString","type":"interface","url":"https://drafts.csswg.org/cssom-1/#cssomstring"}, "https://drafts.csswg.org/cssom-1/#parse-a-media-query-list": {"displayText":"parse a media query list","export":true,"for_":[],"level":"1","normative":true,"shortname":"cssom","spec":"cssom-1","status":"current","text":"parse a media query list","type":"dfn","url":"https://drafts.csswg.org/cssom-1/#parse-a-media-query-list"}, "https://drafts.csswg.org/cssom-1/#serialize-a-media-query-list": {"displayText":"serialize a media query list","export":true,"for_":[],"level":"1","normative":true,"shortname":"cssom","spec":"cssom-1","status":"current","text":"serialize a media query list","type":"dfn","url":"https://drafts.csswg.org/cssom-1/#serialize-a-media-query-list"}, "https://drafts.csswg.org/mediaqueries-5/#descdef-media-color": {"displayText":"color","export":true,"for_":["@media"],"level":"5","normative":true,"shortname":"mediaqueries","spec":"mediaqueries-5","status":"current","text":"color","type":"descriptor","url":"https://drafts.csswg.org/mediaqueries-5/#descdef-media-color"}, "https://drafts.csswg.org/selectors-4/#pseudo-element": {"displayText":"pseudo-element","export":true,"for_":[],"level":"4","normative":true,"shortname":"selectors","spec":"selectors-4","status":"current","text":"pseudo-element","type":"dfn","url":"https://drafts.csswg.org/selectors-4/#pseudo-element"}, "https://drafts.fxtf.org/geometry-1/#dictdef-dompointinit": {"displayText":"DOMPointInit","export":true,"for_":[],"level":"1","normative":true,"shortname":"geometry","spec":"geometry-1","status":"current","text":"DOMPointInit","type":"dictionary","url":"https://drafts.fxtf.org/geometry-1/#dictdef-dompointinit"}, "https://drafts.fxtf.org/geometry-1/#dictdef-domquadinit": {"displayText":"DOMQuadInit","export":true,"for_":[],"level":"1","normative":true,"shortname":"geometry","spec":"geometry-1","status":"current","text":"DOMQuadInit","type":"dictionary","url":"https://drafts.fxtf.org/geometry-1/#dictdef-domquadinit"}, "https://drafts.fxtf.org/geometry-1/#dom-domrect-height": {"displayText":"height","export":true,"for_":["DOMRect"],"level":"1","normative":true,"shortname":"geometry","spec":"geometry-1","status":"current","text":"height","type":"attribute","url":"https://drafts.fxtf.org/geometry-1/#dom-domrect-height"}, "https://drafts.fxtf.org/geometry-1/#dom-domrect-width": {"displayText":"width","export":true,"for_":["DOMRect"],"level":"1","normative":true,"shortname":"geometry","spec":"geometry-1","status":"current","text":"width","type":"attribute","url":"https://drafts.fxtf.org/geometry-1/#dom-domrect-width"}, "https://drafts.fxtf.org/geometry-1/#dom-domrect-x": {"displayText":"x","export":true,"for_":["DOMRect"],"level":"1","normative":true,"shortname":"geometry","spec":"geometry-1","status":"current","text":"x","type":"attribute","url":"https://drafts.fxtf.org/geometry-1/#dom-domrect-x"}, "https://drafts.fxtf.org/geometry-1/#dom-domrect-y": {"displayText":"y","export":true,"for_":["DOMRect"],"level":"1","normative":true,"shortname":"geometry","spec":"geometry-1","status":"current","text":"y","type":"attribute","url":"https://drafts.fxtf.org/geometry-1/#dom-domrect-y"}, "https://drafts.fxtf.org/geometry-1/#dompoint": {"displayText":"DOMPoint","export":true,"for_":[],"level":"1","normative":true,"shortname":"geometry","spec":"geometry-1","status":"current","text":"DOMPoint","type":"interface","url":"https://drafts.fxtf.org/geometry-1/#dompoint"}, "https://drafts.fxtf.org/geometry-1/#domquad": {"displayText":"DOMQuad","export":true,"for_":[],"level":"1","normative":true,"shortname":"geometry","spec":"geometry-1","status":"current","text":"DOMQuad","type":"interface","url":"https://drafts.fxtf.org/geometry-1/#domquad"}, "https://drafts.fxtf.org/geometry-1/#domrect": {"displayText":"DOMRect","export":true,"for_":[],"level":"1","normative":true,"shortname":"geometry","spec":"geometry-1","status":"current","text":"DOMRect","type":"interface","url":"https://drafts.fxtf.org/geometry-1/#domrect"}, "https://drafts.fxtf.org/geometry-1/#domrectlist": {"displayText":"DOMRectList","export":true,"for_":[],"level":"1","normative":true,"shortname":"geometry","spec":"geometry-1","status":"current","text":"DOMRectList","type":"interface","url":"https://drafts.fxtf.org/geometry-1/#domrectlist"}, "https://drafts.fxtf.org/geometry-1/#domrectreadonly": {"displayText":"DOMRectReadOnly","export":true,"for_":[],"level":"1","normative":true,"shortname":"geometry","spec":"geometry-1","status":"current","text":"DOMRectReadOnly","type":"interface","url":"https://drafts.fxtf.org/geometry-1/#domrectreadonly"}, "https://html.spec.whatwg.org/multipage/browsers.html#same-origin": {"displayText":"same origin","export":true,"for_":[],"level":"1","normative":true,"shortname":"html","spec":"html","status":"current","text":"same origin","type":"dfn","url":"https://html.spec.whatwg.org/multipage/browsers.html#same-origin"}, "https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#rules-for-parsing-integers": {"displayText":"rules for parsing integers","export":false,"for_":[],"level":"1","normative":true,"shortname":"html","spec":"html","status":"current","text":"rules for parsing integers","type":"dfn","url":"https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#rules-for-parsing-integers"}, "https://html.spec.whatwg.org/multipage/document-sequences.html#auxiliary-browsing-context": {"displayText":"auxiliary browsing context","export":true,"for_":[],"level":"1","normative":true,"shortname":"html","spec":"html","status":"current","text":"auxiliary browsing context","type":"dfn","url":"https://html.spec.whatwg.org/multipage/document-sequences.html#auxiliary-browsing-context"}, "https://html.spec.whatwg.org/multipage/document-sequences.html#fully-active": {"displayText":"fully active","export":true,"for_":["Document"],"level":"1","normative":true,"shortname":"html","spec":"html","status":"current","text":"fully active","type":"dfn","url":"https://html.spec.whatwg.org/multipage/document-sequences.html#fully-active"}, "https://html.spec.whatwg.org/multipage/document-sequences.html#nav-document": {"displayText":"active document","export":true,"for_":["navigable"],"level":"1","normative":true,"shortname":"html","spec":"html","status":"current","text":"active document","type":"dfn","url":"https://html.spec.whatwg.org/multipage/document-sequences.html#nav-document"}, "https://html.spec.whatwg.org/multipage/dom.html#htmlelement": {"displayText":"HTMLElement","export":true,"for_":[],"level":"1","normative":true,"shortname":"html","spec":"html","status":"current","text":"HTMLElement","type":"interface","url":"https://html.spec.whatwg.org/multipage/dom.html#htmlelement"}, "https://html.spec.whatwg.org/multipage/dom.html#the-body-element-2": {"displayText":"the body element","export":true,"for_":[],"level":"1","normative":true,"shortname":"html","spec":"html","status":"current","text":"the body element","type":"dfn","url":"https://html.spec.whatwg.org/multipage/dom.html#the-body-element-2"}, "https://html.spec.whatwg.org/multipage/embedded-content.html#htmlimageelement": {"displayText":"HTMLImageElement","export":true,"for_":[],"level":"1","normative":true,"shortname":"html","spec":"html","status":"current","text":"HTMLImageElement","type":"interface","url":"https://html.spec.whatwg.org/multipage/embedded-content.html#htmlimageelement"}, "https://html.spec.whatwg.org/multipage/infrastructure.html#html-elements": {"displayText":"HTML elements","export":true,"for_":[],"level":"1","normative":true,"shortname":"html","spec":"html","status":"current","text":"html elements","type":"dfn","url":"https://html.spec.whatwg.org/multipage/infrastructure.html#html-elements"}, "https://html.spec.whatwg.org/multipage/infrastructure.html#live": {"displayText":"live","export":false,"for_":[],"level":"1","normative":true,"shortname":"html","spec":"html","status":"current","text":"live","type":"dfn","url":"https://html.spec.whatwg.org/multipage/infrastructure.html#live"}, "https://html.spec.whatwg.org/multipage/nav-history-apis.html#concept-document-window": {"displayText":"associated Document","export":true,"for_":[],"level":"1","normative":true,"shortname":"html","spec":"html","status":"current","text":"associated document","type":"dfn","url":"https://html.spec.whatwg.org/multipage/nav-history-apis.html#concept-document-window"}, "https://html.spec.whatwg.org/multipage/nav-history-apis.html#dom-document-defaultview": {"displayText":"defaultView","export":true,"for_":["Document"],"level":"1","normative":true,"shortname":"html","spec":"html","status":"current","text":"defaultView","type":"attribute","url":"https://html.spec.whatwg.org/multipage/nav-history-apis.html#dom-document-defaultview"}, "https://html.spec.whatwg.org/multipage/nav-history-apis.html#dom-open": {"displayText":"open(url, target, features)","export":true,"for_":["Window"],"level":"1","normative":true,"shortname":"html","spec":"html","status":"current","text":"open(url, target, features)","type":"method","url":"https://html.spec.whatwg.org/multipage/nav-history-apis.html#dom-open"}, "https://html.spec.whatwg.org/multipage/nav-history-apis.html#window": {"displayText":"Window","export":true,"for_":[],"level":"1","normative":true,"shortname":"html","spec":"html","status":"current","text":"Window","type":"interface","url":"https://html.spec.whatwg.org/multipage/nav-history-apis.html#window"}, "https://html.spec.whatwg.org/multipage/nav-history-apis.html#window-bc": {"displayText":"browsing context","export":true,"for_":["Window"],"level":"1","normative":true,"shortname":"html","spec":"html","status":"current","text":"browsing context","type":"dfn","url":"https://html.spec.whatwg.org/multipage/nav-history-apis.html#window-bc"}, "https://html.spec.whatwg.org/multipage/nav-history-apis.html#windowproxy": {"displayText":"WindowProxy","export":true,"for_":[],"level":"1","normative":true,"shortname":"html","spec":"html","status":"current","text":"WindowProxy","type":"interface","url":"https://html.spec.whatwg.org/multipage/nav-history-apis.html#windowproxy"}, "https://html.spec.whatwg.org/multipage/rendering.html#being-rendered": {"displayText":"being rendered","export":true,"for_":[],"level":"1","normative":true,"shortname":"html","spec":"html","status":"current","text":"being rendered","type":"dfn","url":"https://html.spec.whatwg.org/multipage/rendering.html#being-rendered"}, "https://html.spec.whatwg.org/multipage/sections.html#the-body-element": {"displayText":"body","export":true,"for_":[],"level":"1","normative":true,"shortname":"html","spec":"html","status":"current","text":"body","type":"element","url":"https://html.spec.whatwg.org/multipage/sections.html#the-body-element"}, "https://html.spec.whatwg.org/multipage/webappapis.html#concept-relevant-global": {"displayText":"relevant global object","export":true,"for_":[],"level":"1","normative":true,"shortname":"html","spec":"html","status":"current","text":"relevant global object","type":"dfn","url":"https://html.spec.whatwg.org/multipage/webappapis.html#concept-relevant-global"}, "https://html.spec.whatwg.org/multipage/webappapis.html#event-handler-event-type": {"displayText":"event handler event type","export":true,"for_":[],"level":"1","normative":true,"shortname":"html","spec":"html","status":"current","text":"event handler event type","type":"dfn","url":"https://html.spec.whatwg.org/multipage/webappapis.html#event-handler-event-type"}, "https://html.spec.whatwg.org/multipage/webappapis.html#event-handler-idl-attributes": {"displayText":"event handler IDL attribute","export":true,"for_":[],"level":"1","normative":true,"shortname":"html","spec":"html","status":"current","text":"event handler idl attribute","type":"dfn","url":"https://html.spec.whatwg.org/multipage/webappapis.html#event-handler-idl-attributes"}, "https://html.spec.whatwg.org/multipage/webappapis.html#event-handlers": {"displayText":"event handler","export":true,"for_":[],"level":"1","normative":true,"shortname":"html","spec":"html","status":"current","text":"event handler","type":"dfn","url":"https://html.spec.whatwg.org/multipage/webappapis.html#event-handlers"}, "https://html.spec.whatwg.org/multipage/webappapis.html#event-loop": {"displayText":"event loop","export":true,"for_":[],"level":"1","normative":true,"shortname":"html","spec":"html","status":"current","text":"event loop","type":"dfn","url":"https://html.spec.whatwg.org/multipage/webappapis.html#event-loop"}, "https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler": {"displayText":"EventHandler","export":true,"for_":[],"level":"1","normative":true,"shortname":"html","spec":"html","status":"current","text":"EventHandler","type":"typedef","url":"https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler"}, "https://infra.spec.whatwg.org/#list-contain": {"displayText":"contain","export":true,"for_":["list","stack","queue","set"],"level":"1","normative":true,"shortname":"infra","spec":"infra","status":"current","text":"contain","type":"dfn","url":"https://infra.spec.whatwg.org/#list-contain"}, "https://infra.spec.whatwg.org/#map-exists": {"displayText":"exist","export":true,"for_":["map"],"level":"1","normative":true,"shortname":"infra","spec":"infra","status":"current","text":"exist","type":"dfn","url":"https://infra.spec.whatwg.org/#map-exists"}, "https://infra.spec.whatwg.org/#ordered-map": {"displayText":"map","export":true,"for_":[],"level":"1","normative":true,"shortname":"infra","spec":"infra","status":"current","text":"map","type":"dfn","url":"https://infra.spec.whatwg.org/#ordered-map"}, "https://infra.spec.whatwg.org/#string-is": {"displayText":"is","export":true,"for_":["string"],"level":"1","normative":true,"shortname":"infra","spec":"infra","status":"current","text":"is","type":"dfn","url":"https://infra.spec.whatwg.org/#string-is"}, "https://infra.spec.whatwg.org/#tuple": {"displayText":"tuple","export":true,"for_":[],"level":"1","normative":true,"shortname":"infra","spec":"infra","status":"current","text":"tuple","type":"dfn","url":"https://infra.spec.whatwg.org/#tuple"}, "https://svgwg.org/svg2-draft/shapes.html#elementdef-rect": {"displayText":"rect","export":true,"for_":[],"level":"2","normative":true,"shortname":"svg","spec":"svg2","status":"current","text":"rect","type":"element","url":"https://svgwg.org/svg2-draft/shapes.html#elementdef-rect"}, "https://w3c.github.io/uievents/#dictdef-mouseeventinit": {"displayText":"MouseEventInit","export":true,"for_":[],"level":"1","normative":true,"shortname":"uievents","spec":"uievents","status":"current","text":"MouseEventInit","type":"dictionary","url":"https://w3c.github.io/uievents/#dictdef-mouseeventinit"}, "https://w3c.github.io/uievents/#mouseevent": {"displayText":"MouseEvent","export":true,"for_":[],"level":"1","normative":true,"shortname":"uievents","spec":"uievents","status":"current","text":"MouseEvent","type":"interface","url":"https://w3c.github.io/uievents/#mouseevent"}, "https://webidl.spec.whatwg.org/#Exposed": {"displayText":"Exposed","export":true,"for_":[],"level":"1","normative":true,"shortname":"webidl","spec":"webidl","status":"current","text":"Exposed","type":"extended-attribute","url":"https://webidl.spec.whatwg.org/#Exposed"}, "https://webidl.spec.whatwg.org/#NewObject": {"displayText":"NewObject","export":true,"for_":[],"level":"1","normative":true,"shortname":"webidl","spec":"webidl","status":"current","text":"NewObject","type":"extended-attribute","url":"https://webidl.spec.whatwg.org/#NewObject"}, "https://webidl.spec.whatwg.org/#Replaceable": {"displayText":"Replaceable","export":true,"for_":[],"level":"1","normative":true,"shortname":"webidl","spec":"webidl","status":"current","text":"Replaceable","type":"extended-attribute","url":"https://webidl.spec.whatwg.org/#Replaceable"}, "https://webidl.spec.whatwg.org/#SameObject": {"displayText":"SameObject","export":true,"for_":[],"level":"1","normative":true,"shortname":"webidl","spec":"webidl","status":"current","text":"SameObject","type":"extended-attribute","url":"https://webidl.spec.whatwg.org/#SameObject"}, "https://webidl.spec.whatwg.org/#dfn-convert-ecmascript-to-idl-value": {"displayText":"converted to an IDL value","export":true,"for_":[],"level":"1","normative":true,"shortname":"webidl","spec":"webidl","status":"current","text":"converted to an idl value","type":"dfn","url":"https://webidl.spec.whatwg.org/#dfn-convert-ecmascript-to-idl-value"}, "https://webidl.spec.whatwg.org/#idl-boolean": {"displayText":"boolean","export":true,"for_":[],"level":"1","normative":true,"shortname":"webidl","spec":"webidl","status":"current","text":"boolean","type":"interface","url":"https://webidl.spec.whatwg.org/#idl-boolean"}, "https://webidl.spec.whatwg.org/#idl-double": {"displayText":"double","export":true,"for_":[],"level":"1","normative":true,"shortname":"webidl","spec":"webidl","status":"current","text":"double","type":"interface","url":"https://webidl.spec.whatwg.org/#idl-double"}, "https://webidl.spec.whatwg.org/#idl-long": {"displayText":"long","export":true,"for_":[],"level":"1","normative":true,"shortname":"webidl","spec":"webidl","status":"current","text":"long","type":"interface","url":"https://webidl.spec.whatwg.org/#idl-long"}, "https://webidl.spec.whatwg.org/#idl-sequence": {"displayText":"sequence","export":true,"for_":[],"level":"1","normative":true,"shortname":"webidl","spec":"webidl","status":"current","text":"sequence","type":"dfn","url":"https://webidl.spec.whatwg.org/#idl-sequence"}, "https://webidl.spec.whatwg.org/#idl-undefined": {"displayText":"undefined","export":true,"for_":[],"level":"1","normative":true,"shortname":"webidl","spec":"webidl","status":"current","text":"undefined","type":"interface","url":"https://webidl.spec.whatwg.org/#idl-undefined"}, "https://webidl.spec.whatwg.org/#idl-unrestricted-double": {"displayText":"unrestricted double","export":true,"for_":[],"level":"1","normative":true,"shortname":"webidl","spec":"webidl","status":"current","text":"unrestricted double","type":"interface","url":"https://webidl.spec.whatwg.org/#idl-unrestricted-double"}, "https://webidl.spec.whatwg.org/#idl-unsigned-long": {"displayText":"unsigned long","export":true,"for_":[],"level":"1","normative":true,"shortname":"webidl","spec":"webidl","status":"current","text":"unsigned long","type":"interface","url":"https://webidl.spec.whatwg.org/#idl-unsigned-long"}, "https://webidl.spec.whatwg.org/#this": {"displayText":"this","export":true,"for_":[],"level":"1","normative":true,"shortname":"webidl","spec":"webidl","status":"current","text":"this","type":"dfn","url":"https://webidl.spec.whatwg.org/#this"}, }; 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>