CINXE.COM

<!doctype html><html lang="en"> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport"> <title>CSS View Transitions Module Level 1</title> <meta content="ED" name="w3c-status"> <link href="https://www.w3.org/StyleSheets/TR/2021/W3C-ED" rel="stylesheet"> <meta content="Bikeshed version 0781e88e0, updated Fri Feb 14 13:26:46 2025 -0800" name="generator"> <link href="https://www.w3.org/TR/css-view-transitions-1/" rel="canonical"> <link href="https://drafts.csswg.org/csslogo.ico" rel="icon"> <meta content="92032ab38b3b9daa3dd047b670cbfc1e5a3389f0" 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> spec-scaler { display: block; } spec-scaler:not(:defined) > * { display: none; } .spec-slides { width: 100%; height: 100%; border: none; display: block; } .spec-slide-controls { text-align: center; } .main-example-video { display: block; width: 100%; max-width: 702px; height: auto; margin: 0 auto; } /* Put nice boxes around each algorithm. */ [data-algorithm]:not(.heading) { padding: .5em; border: thin solid #ddd; border-radius: .5em; margin: .5em calc(-0.5em - 1px); } [data-algorithm]:not(.heading) > :first-child { margin-top: 0; } [data-algorithm]:not(.heading) > :last-child { margin-bottom: 0; } [data-algorithm] [data-algorithm] { margin: 1em 0; } pre { tab-size: 2; } .domintro { position: relative; color: green; background: #DDFFDD; margin: 2.5em 0 2em 0; padding: 1.5em 1em 0.5em 2em; } .domintro dt, .domintro dt * { color: black; font-size: inherit; } .domintro dd { margin: 0.5em 0 1em 2em; padding: 0; } .domintro dd p { margin: 0.5em 0; } .domintro::before { content: 'For web developers (non-normative)'; background: green; color: white; padding: 0.15em 0.25em; font-style: normal; position: absolute; top: -0.8em; left: -0.8em; } </style> <style>/* Boilerplate: style-autolinks */ .css.css, .property.property, .descriptor.descriptor { color: var(--a-normal-text); font-size: inherit; font-family: inherit; } .css::before, .property::before, .descriptor::before { content: "‘"; } .css::after, .property::after, .descriptor::after { content: "’"; } .property, .descriptor { /* Don't wrap property and descriptor names */ white-space: nowrap; } .type { /* CSS value <type> */ font-style: italic; } pre .property::before, pre .property::after { content: ""; } [data-link-type="property"]::before, [data-link-type="propdesc"]::before, [data-link-type="descriptor"]::before, [data-link-type="value"]::before, [data-link-type="function"]::before, [data-link-type="at-rule"]::before, [data-link-type="selector"]::before, [data-link-type="maybe"]::before { content: "‘"; } [data-link-type="property"]::after, [data-link-type="propdesc"]::after, [data-link-type="descriptor"]::after, [data-link-type="value"]::after, [data-link-type="function"]::after, [data-link-type="at-rule"]::after, [data-link-type="selector"]::after, [data-link-type="maybe"]::after { content: "’"; } [data-link-type].production::before, [data-link-type].production::after, .prod [data-link-type]::before, .prod [data-link-type]::after { content: ""; } [data-link-type=element], [data-link-type=element-attr] { font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace; font-size: .9em; } [data-link-type=element]::before { content: "<" } [data-link-type=element]::after { content: ">" } [data-link-type=biblio] { white-space: pre; } @media (prefers-color-scheme: dark) { :root { --selflink-text: black; --selflink-bg: silver; --selflink-hover-text: white; } } </style> <style>/* Boilerplate: style-colors */ /* Any --*-text not paired with a --*-bg is assumed to have a transparent bg */ :root { color-scheme: light dark; --text: black; --bg: white; --unofficial-watermark: url(https://www.w3.org/StyleSheets/TR/2016/logos/UD-watermark); --logo-bg: #1a5e9a; --logo-active-bg: #c00; --logo-text: white; --tocnav-normal-text: #707070; --tocnav-normal-bg: var(--bg); --tocnav-hover-text: var(--tocnav-normal-text); --tocnav-hover-bg: #f8f8f8; --tocnav-active-text: #c00; --tocnav-active-bg: var(--tocnav-normal-bg); --tocsidebar-text: var(--text); --tocsidebar-bg: #f7f8f9; --tocsidebar-shadow: rgba(0,0,0,.1); --tocsidebar-heading-text: hsla(203,20%,40%,.7); --toclink-text: var(--text); --toclink-underline: #3980b5; --toclink-visited-text: var(--toclink-text); --toclink-visited-underline: #054572; --heading-text: #005a9c; --hr-text: var(--text); --algo-border: #def; --del-text: red; --del-bg: transparent; --ins-text: #080; --ins-bg: transparent; --a-normal-text: #034575; --a-normal-underline: #bbb; --a-visited-text: var(--a-normal-text); --a-visited-underline: #707070; --a-hover-bg: rgba(75%, 75%, 75%, .25); --a-active-text: #c00; --a-active-underline: #c00; --blockquote-border: silver; --blockquote-bg: transparent; --blockquote-text: currentcolor; --issue-border: #e05252; --issue-bg: #fbe9e9; --issue-text: var(--text); --issueheading-text: #831616; --example-border: #e0cb52; --example-bg: #fcfaee; --example-text: var(--text); --exampleheading-text: #574b0f; --note-border: #52e052; --note-bg: #e9fbe9; --note-text: var(--text); --noteheading-text: hsl(120, 70%, 30%); --notesummary-underline: silver; --assertion-border: #aaa; --assertion-bg: #eee; --assertion-text: black; --advisement-border: orange; --advisement-bg: #fec; --advisement-text: var(--text); --advisementheading-text: #b35f00; --warning-border: red; --warning-bg: hsla(40,100%,50%,0.95); --warning-text: var(--text); --amendment-border: #330099; --amendment-bg: #F5F0FF; --amendment-text: var(--text); --amendmentheading-text: #220066; --def-border: #8ccbf2; --def-bg: #def; --def-text: var(--text); --defrow-border: #bbd7e9; --datacell-border: silver; --indexinfo-text: #707070; --indextable-hover-text: black; --indextable-hover-bg: #f7f8f9; --outdatedspec-bg: rgba(0, 0, 0, .5); --outdatedspec-text: black; --outdated-bg: maroon; --outdated-text: white; --outdated-shadow: red; --editedrec-bg: darkorange; } @media (prefers-color-scheme: dark) { :root { --text: #ddd; --bg: black; --unofficial-watermark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cg fill='%23100808' transform='translate(200 200) rotate(-45) translate(-200 -200)' stroke='%23100808' stroke-width='3'%3E%3Ctext x='50%25' y='220' style='font: bold 70px sans-serif; text-anchor: middle; letter-spacing: 6px;'%3EUNOFFICIAL%3C/text%3E%3Ctext x='50%25' y='305' style='font: bold 70px sans-serif; text-anchor: middle; letter-spacing: 6px;'%3EDRAFT%3C/text%3E%3C/g%3E%3C/svg%3E"); --logo-bg: #1a5e9a; --logo-active-bg: #c00; --logo-text: white; --tocnav-normal-text: #999; --tocnav-normal-bg: var(--bg); --tocnav-hover-text: var(--tocnav-normal-text); --tocnav-hover-bg: #080808; --tocnav-active-text: #f44; --tocnav-active-bg: var(--tocnav-normal-bg); --tocsidebar-text: var(--text); --tocsidebar-bg: #080808; --tocsidebar-shadow: rgba(255,255,255,.1); --tocsidebar-heading-text: hsla(203,20%,40%,.7); --toclink-text: var(--text); --toclink-underline: #6af; --toclink-visited-text: var(--toclink-text); --toclink-visited-underline: #054572; --heading-text: #8af; --hr-text: var(--text); --algo-border: #456; --del-text: #f44; --del-bg: transparent; --ins-text: #4a4; --ins-bg: transparent; --a-normal-text: #6af; --a-normal-underline: #555; --a-visited-text: var(--a-normal-text); --a-visited-underline: var(--a-normal-underline); --a-hover-bg: rgba(25%, 25%, 25%, .2); --a-active-text: #f44; --a-active-underline: var(--a-active-text); --borderedblock-bg: rgba(255, 255, 255, .05); --blockquote-border: silver; --blockquote-bg: var(--borderedblock-bg); --blockquote-text: currentcolor; --issue-border: #e05252; --issue-bg: var(--borderedblock-bg); --issue-text: var(--text); --issueheading-text: hsl(0deg, 70%, 70%); --example-border: hsl(50deg, 90%, 60%); --example-bg: var(--borderedblock-bg); --example-text: var(--text); --exampleheading-text: hsl(50deg, 70%, 70%); --note-border: hsl(120deg, 100%, 35%); --note-bg: var(--borderedblock-bg); --note-text: var(--text); --noteheading-text: hsl(120, 70%, 70%); --notesummary-underline: silver; --assertion-border: #444; --assertion-bg: var(--borderedblock-bg); --assertion-text: var(--text); --advisement-border: orange; --advisement-bg: #222218; --advisement-text: var(--text); --advisementheading-text: #f84; --warning-border: red; --warning-bg: hsla(40,100%,20%,0.95); --warning-text: var(--text); --amendment-border: #330099; --amendment-bg: #080010; --amendment-text: var(--text); --amendmentheading-text: #cc00ff; --def-border: #8ccbf2; --def-bg: #080818; --def-text: var(--text); --defrow-border: #136; --datacell-border: silver; --indexinfo-text: #aaa; --indextable-hover-text: var(--text); --indextable-hover-bg: #181818; --outdatedspec-bg: rgba(255, 255, 255, .5); --outdatedspec-text: black; --outdated-bg: maroon; --outdated-text: white; --outdated-shadow: red; --editedrec-bg: darkorange; } /* In case a transparent-bg image doesn't expect to be on a dark bg, which is quite common in practice... */ img { background: white; } } </style> <style>/* Boilerplate: style-counters */ body { counter-reset: example figure issue; } .issue { counter-increment: issue; } .issue:not(.no-marker)::before { content: "Issue " counter(issue); } .example { counter-increment: example; } .example:not(.no-marker)::before { content: "Example " counter(example); } .invalid.example:not(.no-marker)::before, .illegal.example:not(.no-marker)::before { content: "Invalid Example" counter(example); } figcaption { counter-increment: figure; } figcaption:not(.no-marker)::before { content: "Figure " counter(figure) " "; } </style> <style>/* Boilerplate: style-dfn-panel */ :root { --dfnpanel-bg: #ddd; --dfnpanel-text: var(--text); --dfnpanel-target-bg: #ffc; --dfnpanel-target-outline: orange; } @media (prefers-color-scheme: dark) { :root { --dfnpanel-bg: #222; --dfnpanel-text: var(--text); --dfnpanel-target-bg: #333; --dfnpanel-target-outline: silver; } } .dfn-panel { position: absolute; z-index: 35; width: 20em; width: 300px; height: auto; max-height: 500px; overflow: auto; padding: 0.5em 0.75em; font: small Helvetica Neue, sans-serif, Droid Sans Fallback; background: var(--dfnpanel-bg); color: var(--dfnpanel-text); border: outset 0.2em; white-space: normal; /* in case it's moved into a pre */ } .dfn-panel:not(.on) { display: none; } .dfn-panel * { margin: 0; padding: 0; text-indent: 0; } .dfn-panel > b { display: block; } .dfn-panel a { color: var(--dfnpanel-text); } .dfn-panel a:not(:hover) { text-decoration: none !important; border-bottom: none !important; } .dfn-panel a:focus { outline: 5px auto Highlight; outline: 5px auto -webkit-focus-ring-color; } .dfn-panel > b + b { margin-top: 0.25em; } .dfn-panel ul { padding: 0 0 0 1em; list-style: none; } .dfn-panel li a { max-width: calc(300px - 1.5em - 1em); overflow: hidden; text-overflow: ellipsis; } .dfn-panel.activated { display: inline-block; position: fixed; left: 8px; bottom: 2em; margin: 0 auto; max-width: calc(100vw - 1.5em - .4em - .5em); max-height: 30vh; transition: left 1s ease-out, bottom 1s ease-out; } .dfn-panel .link-item:hover { text-decoration: underline; } .dfn-panel .link-item .copy-icon { opacity: 0; } .dfn-panel .link-item:hover .copy-icon, .dfn-panel .link-item .copy-icon:focus { opacity: 1; } .dfn-panel .copy-icon { display: inline-block; margin-right: 0.5em; width: 0.85em; height: 1em; border-radius: 3px; background-color: #ccc; cursor: pointer; } .dfn-panel .copy-icon .icon { width: 100%; height: 100%; background-color: #fff; display: flex; justify-content: center; align-items: center; position: relative; } .dfn-panel .copy-icon .icon::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 1px solid black; background-color: #ccc; opacity: 0.25; transform: translate(3px, -3px); } .dfn-panel .copy-icon:active .icon::before { opacity: 1; } .dfn-paneled[role="button"] { cursor: help; } .highlighted { animation: target-fade 3s; } @keyframes target-fade { from { background-color: var(--dfnpanel-target-bg); outline: 5px solid var(--dfnpanel-target-outline); } to { color: var(--a-normal-text); background-color: transparent; outline: transparent; } } </style> <style>/* Boilerplate: style-idl-highlighting */ pre.idl.highlight { background: var(--borderedblock-bg, var(--def-bg)); } </style> <style>/* Boilerplate: style-issues */ a[href].issue-return { float: right; float: inline-end; color: var(--issueheading-text); font-weight: bold; text-decoration: none; } </style> <style>/* Boilerplate: style-md-lists */ /* This is a weird hack for me not yet following the commonmark spec regarding paragraph and lists. */ [data-md] > :first-child { margin-top: 0; } [data-md] > :last-child { margin-bottom: 0; } </style> <style>/* Boilerplate: style-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">CSS View Transitions Module Level 1</h1> <a href="https://www.w3.org/standards/types/#ED">Editor’s Draft</a>, <time class="dt-updated" datetime="2024-10-22">22 October 2024</time> <details open> <summary>More details about this document</summary> <div data-fill-with="spec-metadata"> <dl> <dt>This version: <dd><a class="u-url" href="https://drafts.csswg.org/css-view-transitions-1/">https://drafts.csswg.org/css-view-transitions-1/</a> <dt>Latest published version: <dd><a href="https://www.w3.org/TR/css-view-transitions-1/">https://www.w3.org/TR/css-view-transitions-1/</a> <dt>Implementation Report: <dd><a href="https://wpt.fyi/results/css/css-view-transitions">https://wpt.fyi/results/css/css-view-transitions</a> <dt>Feedback: <dd><a href="https://github.com/w3c/csswg-drafts/labels/css-view-transitions-1">CSSWG Issues Repository</a> <dt class="editor">Editors: <dd class="editor p-author h-card vcard" data-editor-id="42199"><a class="p-name fn u-url url" href="http://xanthir.com/contact/">Tab Atkins-Bittner</a> (Google) <dd class="editor p-author h-card vcard" data-editor-id="76394">Jake Archibald (Google) <dd class="editor p-author h-card vcard" data-editor-id="122787">Khushal Sagar (Google) <dt>Suggest an Edit for this Spec: <dd><a href="https://github.com/w3c/csswg-drafts/blob/main/css-view-transitions-1/Overview.bs">GitHub Editor</a> </dl> </div> </details> <div data-fill-with="warning"></div> <a href="https://www.w3.org/policies/#copyright">Copyright</a> © 2024 <a href="https://www.w3.org/">World Wide Web Consortium</a>. <abbr title="World Wide Web Consortium">W3C</abbr>® <a href="https://www.w3.org/policies/#Legal_Disclaimer">liability</a>, <a href="https://www.w3.org/policies/#W3C_Trademarks">trademark</a> and <a href="https://www.w3.org/copyright/software-license/" rel="license" title="W3C Software and Document License">permissive document license</a> rules apply. <hr title="Separator for header"> </div> <div class="p-summary" data-fill-with="abstract"> <h2 class="no-num no-toc no-ref heading settled" id="abstract">Abstract</h2> This module defines the View Transition API, along with associated properties and pseudo-elements, which allows developers to create animated visual transitions representing changes in the document state. <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 “css-view-transitions” in the title, like this: “[css-view-transitions] …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=%5Bcss-view-transitions%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="#intro">1 Introduction</a> <ol class="toc"> <li><a href="#separating-transitions">1.1 Separating Visual Transitions from DOM Updates</a> <li><a href="#customizing">1.2 View Transition Customization</a> <li><a href="#lifecycle">1.3 View Transition Lifecycle</a> <li><a href="#transitions-as-enhancements">1.4 Transitions as an enhancement</a> <li><a href="#rendering-model">1.5 Rendering Model</a> <li><a href="#examples">1.6 Examples</a> </ol> <li> <a href="#css-properties">2 CSS properties</a> <ol class="toc"> <li> <a href="#view-transition-name-prop">2.1 Tagging Individually Transitioning Subtrees: the view-transition-name property</a> <ol class="toc"> <li><a href="#named-and-transitioning">2.1.1 Rendering Consolidation</a> </ol> </ol> <li> <a href="#pseudo">3 Pseudo-elements</a> <ol class="toc"> <li><a href="#pseudo-root">3.1 Pseudo-element Trees</a> <li> <a href="#view-transition-pseudos">3.2 View Transition Pseudo-elements</a> <ol class="toc"> <li><a href="#named-view-transition-pseudo">3.2.1 Named View Transition Pseudo-elements</a> <li><a href="#view-transition-pseudo">3.2.2 View Transition Tree Root: the ::view-transition pseudo-element</a> <li><a href="#::view-transition-group">3.2.3 View Transition Named Subtree Root: the ::view-transition-group() pseudo-element</a> <li><a href="#::view-transition-image-pair">3.2.4 View Transition Image Pair Isolation: the ::view-transition-image-pair() pseudo-element</a> <li><a href="#::view-transition-old">3.2.5 View Transition Old State Image: the ::view-transition-old() pseudo-element</a> <li><a href="#::view-transition-new">3.2.6 View Transition New State Image: the ::view-transition-new() pseudo-element</a> </ol> </ol> <li> <a href="#view-transition-rendering">4 View Transition Layout</a> <ol class="toc"> <li><a href="#snapshot-containing-block-concept">4.1 The Snapshot Containing Block</a> <li><a href="#view-transition-stacking-layer">4.2 View Transition Painting Order</a> </ol> <li><a href="#ua-styles">5 User Agent Stylesheet</a> <li> <a href="#api">6 API</a> <ol class="toc"> <li> <a href="#additions-to-document-api">6.1 Additions to <code class="idl">Document</code></a> <ol class="toc"> <li><a href="#ViewTransition-prepare">6.1.1 <code class="idl">startViewTransition()</code> Method Steps</a> </ol> <li> <a href="#the-domtransition-interface">6.2 The <code class="idl">ViewTransition</code> interface</a> <ol class="toc"> <li><a href="#ViewTransition-skipTransition">6.2.1 <code class="idl">skipTransition()</code> Method Steps</a> </ol> </ol> <li> <a href="#algorithms">7 Algorithms</a> <ol class="toc"> <li> <a href="#concepts">7.1 Data Structures</a> <ol class="toc"> <li><a href="#additions-to-document">7.1.1 Additions to <code class="idl">Document</code></a> <li><a href="#elements-concept">7.1.2 Additions to Elements</a> <li><a href="#captured-elements">7.1.3 Captured elements</a> </ol> <li><a href="#perform-pending-transition-operations-algorithm">7.2 Perform pending transition operations</a> <li> <a href="#setup-view-transition-algorithm">7.3 Setup view transition</a> <ol class="toc"> <li><a href="#capture-old-state-algorithm">7.3.1 Capture the old state</a> <li><a href="#capture-new-state-algorithm">7.3.2 Capture the new state</a> <li><a href="#setup-transition-pseudo-elements-algorithm">7.3.3 Setup transition pseudo-elements</a> </ol> <li><a href="#call-dom-update-callback-algorithm">7.4 Call the update callback</a> <li><a href="#skip-the-view-transition-algorithm">7.5 Skip the view transition</a> <li><a href="#page-visibility-change-steps">7.6 View transition page-visibility change steps</a> <li> <a href="#capture-the-image-algorithm">7.7 Capture the image</a> <ol class="toc"> <li><a href="#capture-rendering-characteristics-algorithm">7.7.1 Capture rendering characteristics</a> </ol> <li><a href="#handle-transition-frame-algorithm">7.8 Handle transition frame</a> <li><a href="#style-transition-pseudo-elements-algorithm">7.9 Update pseudo-element styles</a> <li><a href="#clear-view-transition-algorithm">7.10 Clear view transition</a> </ol> <li><a href="#priv"> Privacy Considerations</a> <li><a href="#sec"> Security Considerations</a> <li> <a href="#changes"> Appendix A. Changes</a> <ol class="toc"> <li><a href="#changes-since-2023-05-30"> Changes from 2023-05-30 Working Draft </a> <li><a href="#changes-since-2022-05-25"> Changes from 2022-05-25 Working Draft </a> <li><a href="#changes-since-2022-11-24"> Changes from 2022-11-24 Working Draft </a> <li><a href="#changes-since-2022-10-25"> Changes from 2022-10-25 Working Draft (FPWD) </a> </ol> <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="#property-index"> Property Index</a> <li><a href="#idl-index"> IDL Index</a> </ol> </nav> <main> <script async src="diagrams/resources/scaler.js" type="module"></script> <h2 class="heading settled" data-level="1" id="intro">1. Introduction<a class="self-link" href="#intro"></a></h2> This section is non-normative. This specification introduces a DOM API and associated CSS features that allow developers to create animated visual transitions, called <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="view-transitions">view transitions</dfn> between different states of a <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-document" id="ref-for-concept-document">document</a>. <h3 class="heading settled" data-level="1.1" id="separating-transitions">1.1. Separating Visual Transitions from DOM Updates<a class="self-link" href="#separating-transitions"></a></h3> Traditionally, creating a visual transition between two document states required a period where both states were present in the DOM at the same time. In fact, it usually involved creating a specific DOM structure that could represent both states. For example, if one element was “moving” between containers, that element often needed to exist outside of either container for the period of the transition, to avoid clipping from either container or their ancestor elements. This extra in-between state often resulted in UX and accessibility issues, as the structure of the DOM was compromised for a purely-visual effect. <a data-link-type="dfn" href="#view-transitions" id="ref-for-view-transitions">View Transitions</a> avoid this troublesome in-between state by allowing the DOM to switch between states instantaneously, then performing a customizable visual transition between the two states in another layer, using a static visual capture of the old state, and a live capture of the new state. These captures are represented as a tree of <a data-link-type="dfn" href="https://www.w3.org/TR/CSS21/selector.html#x22" id="ref-for-x22">pseudo-elements</a> (detailed in <a href="#view-transition-pseudos">§ 3.2 View Transition Pseudo-elements</a>), where the old visual state co-exists with the new state, allowing effects such as cross-fading while animating from the old to new size and position. <h3 class="heading settled" data-level="1.2" id="customizing">1.2. View Transition Customization<a class="self-link" href="#customizing"></a></h3> By default, <code>document.<code class="idl"><a data-link-type="idl" href="#dom-document-startviewtransition" id="ref-for-dom-document-startviewtransition">startViewTransition()</a></code></code> creates a <a data-link-type="dfn" href="#view-transitions" id="ref-for-view-transitions①">view transition</a> consisting of a page-wide cross-fade between the two DOM states. Developers can also choose which elements are captured independently using the <a class="property css" data-link-type="property" href="#propdef-view-transition-name" id="ref-for-propdef-view-transition-name">view-transition-name</a> CSS property, allowing these to be animated independently of the rest of the page. Since the transitional state (where both old and new visual captures exist) is represented as pseudo-elements, developers can customize each transition using familiar features such as <a href="https://www.w3.org/TR/css-animations/">CSS Animations</a> and <a href="https://www.w3.org/TR/web-animations/">Web Animations</a>. <h3 class="heading settled" data-level="1.3" id="lifecycle">1.3. View Transition Lifecycle<a class="self-link" href="#lifecycle"></a></h3> A successful <a data-link-type="dfn" href="#view-transitions" id="ref-for-view-transitions②">view transition</a> goes through the following phases: <ol> <li data-md> Developer calls <code>document.<code class="idl"><a data-link-type="idl" href="#dom-document-startviewtransition" id="ref-for-dom-document-startviewtransition①">startViewTransition</a></code>(<code class="idl"><a data-link-type="idl" href="#callbackdef-viewtransitionupdatecallback" id="ref-for-callbackdef-viewtransitionupdatecallback">updateCallback</a></code>)</code>, which returns a <code class="idl"><a data-link-type="idl" href="#viewtransition" id="ref-for-viewtransition">ViewTransition</a></code>, <var>viewTransition</var>. <li data-md> Current state captured as the “old” state. <li data-md> Rendering paused. <li data-md> Developer’s <code class="idl"><a data-link-type="idl" href="#callbackdef-viewtransitionupdatecallback" id="ref-for-callbackdef-viewtransitionupdatecallback①">updateCallback</a></code> function, if provided, is called, which updates the document state. <li data-md> <code><var>viewTransition</var>.<code class="idl"><a data-link-type="idl" href="#dom-viewtransition-updatecallbackdone" id="ref-for-dom-viewtransition-updatecallbackdone">updateCallbackDone</a></code></code> fulfills. <li data-md> Current state captured as the “new” state. <li data-md> Transition pseudo-elements created. See <a href="#view-transition-pseudos">§ 3.2 View Transition Pseudo-elements</a> for an overview of this structure. <li data-md> Rendering unpaused, revealing the transition pseudo-elements. <li data-md> <code><var>viewTransition</var>.<code class="idl"><a data-link-type="idl" href="#dom-viewtransition-ready" id="ref-for-dom-viewtransition-ready">ready</a></code></code> fulfills. <li data-md> Pseudo-elements animate until finished. <li data-md> Transition pseudo-elements removed. <li data-md> <code><var>viewTransition</var>.<code class="idl"><a data-link-type="idl" href="#dom-viewtransition-finished" id="ref-for-dom-viewtransition-finished">finished</a></code></code> fulfills. </ol> <div id="phases-diagram"> <spec-scaler canvasheight="1080" canvaswidth="1920" style="aspect-ratio: 1920/1080"> <iframe class="spec-slides" src="diagrams/phases/phases.html"></iframe> </spec-scaler> <button disabled>Previous</button> <button disabled>Next</button> <script type="module"> const root = document.querySelector('#phases-diagram'); const [previous, next] = root.querySelectorAll('.spec-slide-controls button'); const iframe = root.querySelector('iframe'); next.disabled = false; const updateButtons = (slide) => { next.disabled = !slide.hasNext; previous.disabled = !slide.hasPrevious; }; next.addEventListener('click', async () => { const slide = iframe.contentDocument.querySelector('spec-slide'); await slide.next(); updateButtons(slide); }); previous.addEventListener('click', async () => { const slide = iframe.contentDocument.querySelector('spec-slide'); await slide.previous(); updateButtons(slide); }); </script> </div> <h3 class="heading settled" data-level="1.4" id="transitions-as-enhancements">1.4. Transitions as an enhancement<a class="self-link" href="#transitions-as-enhancements"></a></h3> A key part of the View Transition API design is that an animated transition is a visual enhancement to an underlying document state change. That means a failure to create a visual transition, which can happen due to misconfiguration or device constraints, will not prevent the developer’s <code class="idl"><a data-link-type="idl" href="#callbackdef-viewtransitionupdatecallback" id="ref-for-callbackdef-viewtransitionupdatecallback②">ViewTransitionUpdateCallback</a></code> being called, even if it’s known in advance that the transition animations cannot happen. For example, if the developer calls <code class="idl"><a data-link-type="idl" href="#dom-viewtransition-skiptransition" id="ref-for-dom-viewtransition-skiptransition">skipTransition()</a></code> at the start of the <a href="#lifecycle">view transition lifecycle</a>, the steps relating to the animated transition, such as creating the <a data-link-type="dfn" href="#view-transition-tree" id="ref-for-view-transition-tree">view transition tree</a>, will not happen. However, the <code class="idl"><a data-link-type="idl" href="#callbackdef-viewtransitionupdatecallback" id="ref-for-callbackdef-viewtransitionupdatecallback③">ViewTransitionUpdateCallback</a></code> will still be called. It’s only the visual transition that’s skipped, not the underlying state change. Note: If the DOM change should also be skipped, then that needs to be handled by another feature. <code><code class="idl"><a data-link-type="idl" href="https://wicg.github.io/navigation-api/#navigateevent" id="ref-for-navigateevent">navigateEvent</a></code>.<code class="idl"><a data-link-type="idl" href="https://wicg.github.io/navigation-api/#ref-for-dom-navigateevent-signal①" id="ref-for-ref-for-dom-navigateevent-signal①">signal</a></code></code> is an example of a feature developers could use to handle this. Although the View Transition API allows DOM changes to be asynchronous via the <code class="idl"><a data-link-type="idl" href="#callbackdef-viewtransitionupdatecallback" id="ref-for-callbackdef-viewtransitionupdatecallback④">ViewTransitionUpdateCallback</a></code>, the API is not responsible for queuing or otherwise scheduling DOM changes beyond any scheduling needed for the transition itself. Some asynchronous DOM changes can happen concurrently (e.g if they’re happening within independent components), whereas others need to queue, or abort an earlier change. This is best left to a feature or framework that has a more holistic view of the application. <h3 class="heading settled" data-level="1.5" id="rendering-model">1.5. Rendering Model<a class="self-link" href="#rendering-model"></a></h3> View Transition works by replicating an element’s rendered state using UA generated pseudo-elements. Aspects of the element’s rendering which apply to the element itself or its descendants, for example visual effects like <a class="property css" data-link-type="property" href="https://drafts.fxtf.org/filter-effects-1/#propdef-filter" id="ref-for-propdef-filter">filter</a> or <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> and clipping from <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> or <a class="property css" data-link-type="property" href="https://drafts.fxtf.org/css-masking-1/#propdef-clip-path" id="ref-for-propdef-clip-path">clip-path</a>, are applied when generating its image in <a data-link-type="dfn" href="#capture-the-image" id="ref-for-capture-the-image">Capture the image</a>. However, properties like <a class="property css" data-link-type="property" href="https://drafts.fxtf.org/compositing-2/#propdef-mix-blend-mode" id="ref-for-propdef-mix-blend-mode">mix-blend-mode</a> which define how the element draws when it is embedded can’t be applied to its image. Such properties are applied to the element’s corresponding <a class="css" data-link-type="maybe" href="#selectordef-view-transition-group" id="ref-for-selectordef-view-transition-group">::view-transition-group()</a> pseudo-element, which is meant to generate a box equivalent to the element. If the <a class="css" data-link-type="maybe" href="#selectordef-view-transition-group" id="ref-for-selectordef-view-transition-group①">::view-transition-group()</a> has a corresponding element in the "new" states, the browser keeps the properties copied over to the ::view-transition-group() in sync with the DOM element in the "new" state. If the ::view-transition-group() has a corresponding both in the "old" and "new" state, and the property being copied is interpolatable, the browser also sets up a default animation to animate the property smoothly. <h3 class="heading settled" data-level="1.6" id="examples">1.6. Examples<a class="self-link" href="#examples"></a></h3> <div class="example" id="example-6d7fc030"> <a class="self-link" href="#example-6d7fc030"></a> Taking a page that already updates its content using a pattern like this: <pre class="language-js highlight"><c- a>function</c-> spaNavigate<c- p>(</c->data<c- p>)</c-> <c- p>{</c-> updateTheDOMSomehow<c- p>(</c->data<c- p>);</c-> <c- p>}</c-> </pre> A <a data-link-type="dfn" href="#view-transitions" id="ref-for-view-transitions③">view transition</a> could be added like this: <pre class="language-js highlight"><c- a>function</c-> spaNavigate<c- p>(</c->data<c- p>)</c-> <c- p>{</c-> <c- c1>// Fallback for browsers that don't support this API:</c-> <c- k>if</c-> <c- p>(</c-><c- o>!</c->document<c- p>.</c->startViewTransition<c- p>)</c-> <c- p>{</c-> updateTheDOMSomehow<c- p>(</c->data<c- p>);</c-> <c- k>return</c-><c- p>;</c-> <c- p>}</c-> <c- c1>// With a transition:</c-> document<c- p>.</c->startViewTransition<c- p>(()</c-> <c- p>=></c-> updateTheDOMSomehow<c- p>(</c->data<c- p>));</c-> <c- p>}</c-> </pre> This results in the default transition of a quick cross-fade: <figure> <video class="main-example-video" controls loop muted playsinline src="diagrams/videos/default.mp4" style="aspect-ratio: 1404/738"></video> </figure> The cross-fade is achieved using CSS animations on a <a href="#view-transition-pseudos">tree of pseudo-elements</a>, so customizations can be made using CSS. For example: <pre class="language-css highlight">:<c- nf>:view-transition-old</c-><c- p>(</c->root<c- p>),</c-> :<c- nf>:view-transition-new</c-><c- p>(</c->root<c- p>)</c-> <c- p>{</c-> <c- k>animation-duration</c-><c- p>:</c-> <c- m>5</c-><c- k>s</c-><c- p>;</c-> <c- p>}</c-> </pre> This results in a slower transition: <figure> <video class="main-example-video" controls loop muted playsinline src="diagrams/videos/slow.mp4" style="aspect-ratio: 1404/738"></video> </figure> </div> <div class="example" id="example-b5766389"> <a class="self-link" href="#example-b5766389"></a> Building on the previous example, motion can be added: <pre class="language-css highlight"><c- n>@keyframes</c-> fade-in <c- p>{</c-> from <c- p>{</c-> <c- k>opacity</c-><c- p>:</c-> <c- m>0</c-><c- p>;</c-> <c- p>}</c-> <c- p>}</c-> <c- n>@keyframes</c-> fade-out <c- p>{</c-> to <c- p>{</c-> <c- k>opacity</c-><c- p>:</c-> <c- m>0</c-><c- p>;</c-> <c- p>}</c-> <c- p>}</c-> <c- n>@keyframes</c-> slide-from-right <c- p>{</c-> from <c- p>{</c-> <c- k>transform</c-><c- p>:</c-> <c- nf>translateX</c-><c- p>(</c-><c- m>30</c-><c- k>px</c-><c- p>);</c-> <c- p>}</c-> <c- p>}</c-> <c- n>@keyframes</c-> slide-to-left <c- p>{</c-> to <c- p>{</c-> <c- k>transform</c-><c- p>:</c-> <c- nf>translateX</c-><c- p>(</c-><c- m>-30</c-><c- k>px</c-><c- p>);</c-> <c- p>}</c-> <c- p>}</c-> :<c- nf>:view-transition-old</c-><c- p>(</c->root<c- p>)</c-> <c- p>{</c-> <c- k>animation</c-><c- p>:</c-> <c- m>90</c-><c- k>ms</c-> <c- nf>cubic-bezier</c-><c- p>(</c-><c- m>0.4</c-><c- p>,</c-> <c- m>0</c-><c- p>,</c-> <c- m>1</c-><c- p>,</c-> <c- m>1</c-><c- p>)</c-> both fade-out<c- p>,</c-> <c- m>300</c-><c- k>ms</c-> <c- nf>cubic-bezier</c-><c- p>(</c-><c- m>0.4</c-><c- p>,</c-> <c- m>0</c-><c- p>,</c-> <c- m>0.2</c-><c- p>,</c-> <c- m>1</c-><c- p>)</c-> both slide-to-left<c- p>;</c-> <c- p>}</c-> :<c- nf>:view-transition-new</c-><c- p>(</c->root<c- p>)</c-> <c- p>{</c-> <c- k>animation</c-><c- p>:</c-> <c- m>210</c-><c- k>ms</c-> <c- nf>cubic-bezier</c-><c- p>(</c-><c- m>0</c-><c- p>,</c-> <c- m>0</c-><c- p>,</c-> <c- m>0.2</c-><c- p>,</c-> <c- m>1</c-><c- p>)</c-> <c- m>90</c-><c- k>ms</c-> both fade-in<c- p>,</c-> <c- m>300</c-><c- k>ms</c-> <c- nf>cubic-bezier</c-><c- p>(</c-><c- m>0.4</c-><c- p>,</c-> <c- m>0</c-><c- p>,</c-> <c- m>0.2</c-><c- p>,</c-> <c- m>1</c-><c- p>)</c-> both slide-from-right<c- p>;</c-> <c- p>}</c-> </pre> Here’s the result: <figure> <video class="main-example-video" controls loop muted playsinline src="diagrams/videos/slide.mp4" style="aspect-ratio: 1404/738"></video> </figure> </div> <div class="example" id="example-4377639b"> <a class="self-link" href="#example-4377639b"></a> Building on the previous example, the header and text within the header can be given their own <a class="css" data-link-type="maybe" href="#selectordef-view-transition-group" id="ref-for-selectordef-view-transition-group④">::view-transition-group()</a>s for the transition: <pre class="language-css highlight">.main-header <c- p>{</c-> <c- k>view-transition-name</c-><c- p>:</c-> main-header<c- p>;</c-> <c- p>}</c-> .main-header-text <c- p>{</c-> <c- k>view-transition-name</c-><c- p>:</c-> main-header-text<c- p>;</c-> <c- c>/* Give the element a consistent size, assuming identical text: */</c-> width: fit-content<c- p>;</c-> <c- p>}</c-> </pre> By default, these groups will transition size and position from their “old” to “new” state, while their visual states cross-fade: <figure> <video class="main-example-video" controls loop muted playsinline src="diagrams/videos/header.mp4" style="aspect-ratio: 1404/738"></video> </figure> </div> <div class="example" id="example-6b9396d2"> <a class="self-link" href="#example-6b9396d2"></a> Building on the previous example, let’s say some pages have a sidebar: <figure> <video class="main-example-video" controls loop muted playsinline src="diagrams/videos/bad-sidebar.mp4" style="aspect-ratio: 1404/738"></video> </figure> In this case, things would look better if the sidebar was static if it was in both the “old” and “new” states. Otherwise, it should animate in or out. The <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/selectors-4/#only-child-pseudo" id="ref-for-only-child-pseudo">:only-child</a> pseudo-class can be used to create animations specifically for these states: <pre class="language-css highlight">.sidebar <c- p>{</c-> <c- k>view-transition-name</c-><c- p>:</c-> sidebar<c- p>;</c-> <c- p>}</c-> <c- n>@keyframes</c-> slide-to-right <c- p>{</c-> to <c- p>{</c-> <c- k>transform</c-><c- p>:</c-> <c- nf>translateX</c-><c- p>(</c-><c- m>30</c-><c- k>px</c-><c- p>);</c-> <c- p>}</c-> <c- p>}</c-> <c- c>/* Entry transition */</c-> :<c- nf>:view-transition-new</c-><c- p>(</c->sidebar<c- p>)</c->:only-child <c- p>{</c-> <c- k>animation</c-><c- p>:</c-> <c- m>300</c-><c- k>ms</c-> <c- nf>cubic-bezier</c-><c- p>(</c-><c- m>0</c-><c- p>,</c-> <c- m>0</c-><c- p>,</c-> <c- m>0.2</c-><c- p>,</c-> <c- m>1</c-><c- p>)</c-> both fade-in<c- p>,</c-> <c- m>300</c-><c- k>ms</c-> <c- nf>cubic-bezier</c-><c- p>(</c-><c- m>0.4</c-><c- p>,</c-> <c- m>0</c-><c- p>,</c-> <c- m>0.2</c-><c- p>,</c-> <c- m>1</c-><c- p>)</c-> both slide-from-right<c- p>;</c-> <c- p>}</c-> <c- c>/* Exit transition */</c-> :<c- nf>:view-transition-old</c-><c- p>(</c->sidebar<c- p>)</c->:only-child <c- p>{</c-> <c- k>animation</c-><c- p>:</c-> <c- m>150</c-><c- k>ms</c-> <c- nf>cubic-bezier</c-><c- p>(</c-><c- m>0.4</c-><c- p>,</c-> <c- m>0</c-><c- p>,</c-> <c- m>1</c-><c- p>,</c-> <c- m>1</c-><c- p>)</c-> both fade-out<c- p>,</c-> <c- m>300</c-><c- k>ms</c-> <c- nf>cubic-bezier</c-><c- p>(</c-><c- m>0.4</c-><c- p>,</c-> <c- m>0</c-><c- p>,</c-> <c- m>0.2</c-><c- p>,</c-> <c- m>1</c-><c- p>)</c-> both slide-to-right<c- p>;</c-> <c- p>}</c-> </pre> For cases where the sidebar has both an “old” and “new” state, the default animation is correct. <figure> <video class="main-example-video" controls loop muted playsinline src="diagrams/videos/good-sidebar.mp4" style="aspect-ratio: 1404/738"></video> </figure> </div> <div class="example" id="example-3e1ac75e"> <a class="self-link" href="#example-3e1ac75e"></a> Not building from previous examples this time, let’s say we wanted to create a circular reveal from the user’s cursor. This can’t be done with CSS alone. Firstly, in the CSS, allow the “old” and “new” states to layer on top of one another without the default blending, and prevent the default cross-fade animation: <pre class="language-css highlight">:<c- nf>:view-transition-image-pair</c-><c- p>(</c->root<c- p>)</c-> <c- p>{</c-> <c- k>isolation</c-><c- p>:</c-> auto<c- p>;</c-> <c- p>}</c-> :<c- nf>:view-transition-old</c-><c- p>(</c->root<c- p>),</c-> :<c- nf>:view-transition-new</c-><c- p>(</c->root<c- p>)</c-> <c- p>{</c-> <c- k>animation</c-><c- p>:</c-> none<c- p>;</c-> <c- k>mix-blend-mode</c-><c- p>:</c-> normal<c- p>;</c-> <c- p>}</c-> </pre> Then, the JavaScript: <pre class="language-js highlight"><c- c1>// Store the last click event</c-> <c- a>let</c-> lastClick<c- p>;</c-> addEventListener<c- p>(</c-><c- t>'click'</c-><c- p>,</c-> event <c- p>=></c-> <c- p>(</c->lastClick <c- o>=</c-> event<c- p>));</c-> <c- a>function</c-> spaNavigate<c- p>(</c->data<c- p>)</c-> <c- p>{</c-> <c- c1>// Fallback for browsers that don't support this API:</c-> <c- k>if</c-> <c- p>(</c-><c- o>!</c->document<c- p>.</c->startViewTransition<c- p>)</c-> <c- p>{</c-> updateTheDOMSomehow<c- p>(</c->data<c- p>);</c-> <c- k>return</c-><c- p>;</c-> <c- p>}</c-> <c- c1>// Get the click position, or fallback to the middle of the screen</c-> <c- a>const</c-> x <c- o>=</c-> lastClick<c- o>?</c-><c- p>.</c->clientX <c- o>??</c-> innerWidth <c- o>/</c-> <c- mf>2</c-><c- p>;</c-> <c- a>const</c-> y <c- o>=</c-> lastClick<c- o>?</c-><c- p>.</c->clientY <c- o>??</c-> innerHeight <c- o>/</c-> <c- mf>2</c-><c- p>;</c-> <c- c1>// Get the distance to the furthest corner</c-> <c- a>const</c-> endRadius <c- o>=</c-> Math<c- p>.</c->hypot<c- p>(</c-> Math<c- p>.</c->max<c- p>(</c->x<c- p>,</c-> innerWidth <c- o>-</c-> x<c- p>),</c-> Math<c- p>.</c->max<c- p>(</c->y<c- p>,</c-> innerHeight <c- o>-</c-> y<c- p>)</c-> <c- p>);</c-> <c- c1>// Create a transition:</c-> <c- a>const</c-> transition <c- o>=</c-> document<c- p>.</c->startViewTransition<c- p>(()</c-> <c- p>=></c-> <c- p>{</c-> updateTheDOMSomehow<c- p>(</c->data<c- p>);</c-> <c- p>});</c-> <c- c1>// Wait for the pseudo-elements to be created:</c-> transition<c- p>.</c->ready<c- p>.</c->then<c- p>(()</c-> <c- p>=></c-> <c- p>{</c-> <c- c1>// Animate the root's new view</c-> document<c- p>.</c->documentElement<c- p>.</c->animate<c- p>(</c-> <c- p>{</c-> clipPath<c- o>:</c-> <c- p>[</c-> \<c- sb>`circle(0 at </c-><c- si>${</c->x<c- si>}</c-><c- sb>px </c-><c- si>${</c->y<c- si>}</c-><c- sb>px)\`,</c-> <c- sb> \`circle(</c-><c- si>${</c->endRadius<c- si>}</c-><c- sb>px at </c-><c- si>${</c->x<c- si>}</c-><c- sb>px </c-><c- si>${</c->y<c- si>}</c-><c- sb>px)\`,</c-> <c- sb> ],</c-> <c- sb> },</c-> <c- sb> {</c-> <c- sb> duration: 500,</c-> <c- sb> easing: 'ease-in',</c-> <c- sb> // Specify which pseudo-element to animate</c-> <c- sb> pseudoElement: '::view-transition-new(root)',</c-> <c- sb> }</c-> <c- sb> );</c-> <c- sb> });</c-> <c- sb>}</c-> </pre> And here’s the result: <figure> <video class="main-example-video" controls loop muted playsinline src="diagrams/videos/circle.mp4" style="aspect-ratio: 1404/738"></video> </figure> </div> <h2 class="heading settled" data-level="2" id="css-properties">2. CSS properties<a class="self-link" href="#css-properties"></a></h2> <h3 class="heading settled" data-level="2.1" id="view-transition-name-prop">2.1. Tagging Individually Transitioning Subtrees: the <a class="property css" data-link-type="property" href="#propdef-view-transition-name" id="ref-for-propdef-view-transition-name①">view-transition-name</a> property<a class="self-link" href="#view-transition-name-prop"></a></h3> <table class="def propdef" data-link-for-hint="view-transition-name"> <tbody> <tr> <th>Name: <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-view-transition-name">view-transition-name</dfn> <tr class="value"> <th><a href="https://www.w3.org/TR/css-values/#value-defs">Value:</a> <td class="prod">none <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one">|</a> <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#identifier-value" id="ref-for-identifier-value"><custom-ident></a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#initial-values">Initial:</a> <td>none <tr> <th><a href="https://www.w3.org/TR/css-cascade/#applies-to">Applies to:</a> <td><a href="https://www.w3.org/TR/css-pseudo/#generated-content" title="Includes ::before and ::after pseudo-elements.">all elements</a> <tr> <th><a href="https://www.w3.org/TR/css-cascade/#inherited-property">Inherited:</a> <td>no <tr> <th><a href="https://www.w3.org/TR/css-values/#percentages">Percentages:</a> <td>n/a <tr> <th><a href="https://www.w3.org/TR/css-cascade/#computed">Computed value:</a> <td>as specified <tr> <th><a href="https://www.w3.org/TR/cssom/#serializing-css-values">Canonical order:</a> <td>per grammar <tr> <th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a> <td>discrete </table> Note: though <a class="property css" data-link-type="property" href="#propdef-view-transition-name" id="ref-for-propdef-view-transition-name②">view-transition-name</a> is <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#discrete" id="ref-for-discrete">discretely animatable</a>, animating it doesn’t affect the running view transition. Rather, it’s a way to set its value in a way that can change over time or based on a <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#timeline" id="ref-for-timeline">timeline</a>. An example for using this would be to change the view-transition-name based on <a data-link-type="dfn" href="https://drafts.csswg.org/scroll-animations-1/#scroll-driven-animations" id="ref-for-scroll-driven-animations">scroll-driven animations</a>. The <a class="property css" data-link-type="property" href="#propdef-view-transition-name" id="ref-for-propdef-view-transition-name④">view-transition-name</a> property “tags” an element for <a data-link-type="dfn" href="#captured-in-a-view-transition" id="ref-for-captured-in-a-view-transition">capture in a view transition</a>, tracking it independently in the <a data-link-type="dfn" href="#view-transition-tree" id="ref-for-view-transition-tree①">view transition tree</a> under the specified <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="view-transition-name">view transition name</dfn>. An element so captured is animated independently of the rest of the page. <dl> <dt data-md><dfn class="dfn-paneled css" data-dfn-for="view-transition-name" data-dfn-type="value" data-export id="valdef-view-transition-name-none">none</dfn> <dd data-md> The <a data-link-type="dfn" href="https://drafts.csswg.org/css2/#element" id="ref-for-element">element</a> will not participate independently in a view transition. <dt data-md><dfn class="dfn-paneled css" data-dfn-for="view-transition-name" data-dfn-type="value" data-export id="valdef-view-transition-name-custom-ident"><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#identifier-value" id="ref-for-identifier-value①"><custom-ident></a></dfn> <dd data-md> The <a data-link-type="dfn" href="https://drafts.csswg.org/css2/#element" id="ref-for-element①">element</a> participates independently in a view transition—as either an old or new element—with the specified <a data-link-type="dfn" href="#view-transition-name" id="ref-for-view-transition-name">view transition name</a>. Each <a data-link-type="dfn" href="#view-transition-name" id="ref-for-view-transition-name①">view transition name</a> is a <a data-link-type="dfn" href="https://drafts.csswg.org/css-scoping-1/#css-tree-scoped-name" id="ref-for-css-tree-scoped-name">tree-scoped name</a>. Note: Since currently only document-scoped view transitions are supported, only view transition names that are associated with the document are respected. The values none and auto are excluded from <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#identifier-value" id="ref-for-identifier-value②"><custom-ident></a> here. Note: If this name is not unique (i.e. if two elements simultaneously specify the same <a data-link-type="dfn" href="#view-transition-name" id="ref-for-view-transition-name②">view transition name</a>) then the <a data-link-type="dfn" href="#view-transitions" id="ref-for-view-transitions④">view transition</a> will abort. </dl> Note: For the purposes of this API, if one element has <a data-link-type="dfn" href="#view-transition-name" id="ref-for-view-transition-name③">view transition name</a> foo in the old state, and another element has view transition name foo in the new state, they are treated as representing different visual state of the same element, and will be paired in the <a data-link-type="dfn" href="#view-transition-tree" id="ref-for-view-transition-tree②">view transition tree</a>. This may be confusing, since the elements themselves are not necessarily referring to the same object, but it is a useful model to consider them to be visual states of the same conceptual page entity. 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 <a data-link-type="dfn" href="https://drafts.csswg.org/css-break-4/#fragment" id="ref-for-fragment">fragmented</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/css-contain-2/#skips-its-contents" id="ref-for-skips-its-contents">skipped</a>, or <a data-link-type="dfn" href="https://drafts.csswg.org/css-images-4/#element-not-rendered" id="ref-for-element-not-rendered">not rendered</a>, this property has no effect. See <a href="#algorithms">§ 7 Algorithms</a> for exact details. <div class="algorithm" data-algorithm="document-scoped view transition name"> To get the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="document-scoped-view-transition-name">document-scoped view transition name</dfn> for an <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#element" id="ref-for-element③">Element</a></code> <var>element</var>: <ol> <li data-md> Let <var>scopedViewTransitionName</var> be the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#computed-value" id="ref-for-computed-value">computed value</a> of <a class="property css" data-link-type="property" href="#propdef-view-transition-name" id="ref-for-propdef-view-transition-name⑤">view-transition-name</a> for <var>element</var>. <li data-md> If <var>scopedViewTransitionName</var> is associated with <var>element</var>’s <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-node-document" id="ref-for-concept-node-document">node document</a>, then return <var>scopedViewTransitionName</var>. <li data-md> Otherwise, return <a class="css" data-link-type="maybe" href="#valdef-view-transition-name-none" id="ref-for-valdef-view-transition-name-none">none</a>. </ol> </div> <h4 class="heading settled" data-level="2.1.1" id="named-and-transitioning">2.1.1. Rendering Consolidation<a class="self-link" href="#named-and-transitioning"></a></h4> <a data-link-type="dfn" href="https://drafts.csswg.org/css2/#element" id="ref-for-element④">Elements</a> <a data-link-type="dfn" href="#captured-in-a-view-transition" id="ref-for-captured-in-a-view-transition①">captured in a view transition</a> during a <a data-link-type="dfn" href="#view-transitions" id="ref-for-view-transitions⑤">view transition</a> or whose <a class="property css" data-link-type="property" href="#propdef-view-transition-name" id="ref-for-propdef-view-transition-name⑥">view-transition-name</a> <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#computed-value" id="ref-for-computed-value①">computed value</a> is not <a class="css" data-link-type="maybe" href="#valdef-view-transition-name-none" id="ref-for-valdef-view-transition-name-none①">none</a> (at any time): <ul> <li data-md> Form a <a data-link-type="dfn" href="https://www.w3.org/TR/CSS21/visuren.html#x43" id="ref-for-x43">stacking context</a>. <li data-md> Are <a href="https://drafts.csswg.org/css-transforms-2/#grouping-property-values">flattened in 3D transforms</a>. <li data-md> Form a <a data-link-type="dfn" href="https://drafts.fxtf.org/filter-effects-2/#backdrop-root" id="ref-for-backdrop-root">backdrop root</a>. </ul> <h2 class="heading settled" data-level="3" id="pseudo">3. Pseudo-elements<a class="self-link" href="#pseudo"></a></h2> <h3 class="heading settled" data-level="3.1" id="pseudo-root">3.1. Pseudo-element Trees<a class="self-link" href="#pseudo-root"></a></h3> Note: This is a general definition for trees of pseudo-elements. If other features need this behavior, these definitions will be moved to <a data-link-type="biblio" href="#biblio-css-pseudo-4" title="CSS Pseudo-Elements Module Level 4">[css-pseudo-4]</a>. A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="pseudo-element-root">pseudo-element root</dfn> is a type of <a data-link-type="dfn" href="https://www.w3.org/TR/css-pseudo-4/#tree-abiding" id="ref-for-tree-abiding">tree-abiding pseudo-element</a> that is the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-tree-root" id="ref-for-concept-tree-root">root</a> in a <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-tree" id="ref-for-concept-tree">tree</a> of <a data-link-type="dfn" href="https://drafts.csswg.org/css-pseudo-4/#tree-abiding" id="ref-for-tree-abiding①">tree-abiding pseudo-elements</a>, known as the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="pseudo-element-tree">pseudo-element tree</dfn>. The <a data-link-type="dfn" href="#pseudo-element-tree" id="ref-for-pseudo-element-tree">pseudo-element tree</a> defines the document order of its <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-tree-descendant" id="ref-for-concept-tree-descendant">descendant</a> <a data-link-type="dfn" href="https://drafts.csswg.org/css-pseudo-4/#tree-abiding" id="ref-for-tree-abiding②">tree-abiding pseudo-elements</a>. When a <a data-link-type="dfn" href="https://drafts.csswg.org/selectors-4/#pseudo-element" id="ref-for-pseudo-element">pseudo-element</a> <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-tree-participate" id="ref-for-concept-tree-participate">participates</a> in a <a data-link-type="dfn" href="#pseudo-element-tree" id="ref-for-pseudo-element-tree①">pseudo-element tree</a>, its <a data-link-type="dfn" href="https://drafts.csswg.org/selectors-4/#originating-pseudo-element" id="ref-for-originating-pseudo-element">originating pseudo-element</a> is its <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-tree-parent" id="ref-for-concept-tree-parent">parent</a>. If a <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-tree-descendant" id="ref-for-concept-tree-descendant①">descendant</a> <var>pseudo</var> of a <a data-link-type="dfn" href="#pseudo-element-root" id="ref-for-pseudo-element-root">pseudo-element root</a> has no other <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-tree-sibling" id="ref-for-concept-tree-sibling">siblings</a>, then <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/selectors-4/#only-child-pseudo" id="ref-for-only-child-pseudo①">:only-child</a> matches that <var>pseudo</var>. Note: This means that <code>::view-transition-new(ident):only-child</code> will only select <code>::view-transition-new(ident)</code> if the parent <code>::view-transition-image-pair(ident)</code> contains a single <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-tree-child" id="ref-for-concept-tree-child">child</a>. As in, there is no <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-tree-sibling" id="ref-for-concept-tree-sibling①">sibling</a> <code>::view-transition-old(ident)</code>. <h3 class="heading settled" data-level="3.2" id="view-transition-pseudos">3.2. View Transition Pseudo-elements<a class="self-link" href="#view-transition-pseudos"></a></h3> The visualization of a <a data-link-type="dfn" href="#view-transitions" id="ref-for-view-transitions⑥">view transition</a> is represented as a <a data-link-type="dfn" href="#pseudo-element-tree" id="ref-for-pseudo-element-tree②">pseudo-element tree</a> called the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="view-transition-tree">view transition tree</dfn> composed of the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="view-transition-pseudo-elements">view transition pseudo-elements</dfn> defined below. This tree is built during the <a data-link-type="dfn" href="#setup-transition-pseudo-elements" id="ref-for-setup-transition-pseudo-elements">setup transition pseudo-elements</a> step, and is rooted under a <a class="css" data-link-type="maybe" href="#selectordef-view-transition" id="ref-for-selectordef-view-transition">::view-transition</a> pseudo-element <a data-link-type="dfn" href="https://drafts.csswg.org/selectors-4/#originating-element" id="ref-for-originating-element">originating</a> from the <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#root-element" id="ref-for-root-element">root element</a>. All of the <a data-link-type="dfn" href="#view-transition-pseudo-elements" id="ref-for-view-transition-pseudo-elements">view transition pseudo-elements</a> are selected from their <a data-link-type="dfn" href="https://drafts.csswg.org/selectors-4/#ultimate-originating-element" id="ref-for-ultimate-originating-element">ultimate originating element</a>, the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#document-element" id="ref-for-document-element">document element</a>. The <a data-link-type="dfn" href="#view-transition-tree" id="ref-for-view-transition-tree③">view transition tree</a> is not exposed to the accessibility tree. <div class="example" id="example-f80a7b18"><a class="self-link" href="#example-f80a7b18"></a> For example, the <a class="css" data-link-type="maybe" href="#selectordef-view-transition-group" id="ref-for-selectordef-view-transition-group⑤">::view-transition-group()</a> pseudo-element is attached to the root element selector directly, as in :root::view-transition-group(); it is not attached to its parent, the <a class="css" data-link-type="maybe" href="#selectordef-view-transition" id="ref-for-selectordef-view-transition①">::view-transition</a> pseudo-element. </div> <div class="note" role="note"> Once the user-agent has captured both the “old” and “new” states of the document, it creates a structure of pseudo-elements like the following: <pre>::view-transition ├─ ::view-transition-group(name) │ └─ ::view-transition-image-pair(name) │ ├─ ::view-transition-old(name) │ └─ ::view-transition-new(name) └─ …other groups… </pre> Each element with a <a class="property css" data-link-type="property" href="#propdef-view-transition-name" id="ref-for-propdef-view-transition-name⑦">view-transition-name</a> is captured separately, and a <a class="css" data-link-type="maybe" href="#selectordef-view-transition-group" id="ref-for-selectordef-view-transition-group⑥">::view-transition-group()</a> is created for each unique view-transition-name. For convenience, the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#document-element" id="ref-for-document-element①">document element</a> is given the <a class="property css" data-link-type="property" href="#propdef-view-transition-name" id="ref-for-propdef-view-transition-name⑨">view-transition-name</a> "root" in the <a href="#ua-styles">user-agent style sheet</a>. Either <a class="css" data-link-type="maybe" href="#selectordef-view-transition-old" id="ref-for-selectordef-view-transition-old">::view-transition-old()</a> or <a class="css" data-link-type="maybe" href="#selectordef-view-transition-new" id="ref-for-selectordef-view-transition-new">::view-transition-new()</a> are absent in cases where the capture does not have an “old” or “new” state. Each of the pseudo-elements generated can be targeted by CSS in order to customize its appearance, behavior and/or add animations. This enables full customization of the transition. </div> <h4 class="heading settled" data-level="3.2.1" id="named-view-transition-pseudo">3.2.1. Named View Transition Pseudo-elements<a class="self-link" href="#named-view-transition-pseudo"></a></h4> Several of the <a data-link-type="dfn" href="#view-transition-pseudo-elements" id="ref-for-view-transition-pseudo-elements①">view transition pseudo-elements</a> are <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="named-view-transition-pseudo-elements">named view transition pseudo-elements</dfn>, which are <a data-link-type="dfn" href="https://drafts.csswg.org/selectors-4/#functional-pseudo-element" id="ref-for-functional-pseudo-element">functional</a> <a data-link-type="dfn" href="https://www.w3.org/TR/css-pseudo-4/#tree-abiding" id="ref-for-tree-abiding③">tree-abiding</a> view transition pseudo-elements associated with a <a data-link-type="dfn" href="#view-transition-name" id="ref-for-view-transition-name⑤">view transition name</a>. These pseudo-elements take a <a class="production css" data-link-type="type" href="#typedef-pt-name-selector" id="ref-for-typedef-pt-name-selector"><pt-name-selector></a> as their argument, and their syntax follows the pattern: <pre class="prod">::view-transition-<var>pseudo</var>(<a class="production" data-link-type="type" href="#typedef-pt-name-selector" id="ref-for-typedef-pt-name-selector①"><pt-name-selector></a>) </pre> where <a class="production css" data-link-type="type" href="#typedef-pt-name-selector" id="ref-for-typedef-pt-name-selector②"><pt-name-selector></a> selects a <a data-link-type="dfn" href="#view-transition-name" id="ref-for-view-transition-name⑥">view transition name</a>, and has the following syntax definition: <pre class="prod"><dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-pt-name-selector"><pt-name-selector></dfn> = '*' <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①">|</a> <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#identifier-value" id="ref-for-identifier-value③"><custom-ident></a> </pre> A <a data-link-type="dfn" href="#named-view-transition-pseudo-elements" id="ref-for-named-view-transition-pseudo-elements">named view transition pseudo-element</a> <a data-link-type="dfn" href="https://drafts.csswg.org/selectors-4/#selector" id="ref-for-selector">selector</a> only matches a corresponding <a data-link-type="dfn" href="https://drafts.csswg.org/selectors-4/#pseudo-element" id="ref-for-pseudo-element①">pseudo-element</a> if its <a class="production css" data-link-type="type" href="#typedef-pt-name-selector" id="ref-for-typedef-pt-name-selector③"><pt-name-selector></a> matches that pseudo-element’s <a data-link-type="dfn" href="#view-transition-name" id="ref-for-view-transition-name⑦">view transition name</a>, i.e. if it is either <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/selectors-3/#x" id="ref-for-x">*</a> or a matching <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#identifier-value" id="ref-for-identifier-value④"><custom-ident></a>. Note: The <a data-link-type="dfn" href="#view-transition-name" id="ref-for-view-transition-name⑧">view transition name</a> of a <a data-link-type="dfn" href="#view-transition-pseudo-elements" id="ref-for-view-transition-pseudo-elements③">view transition pseudo-element</a> is set to the <a class="property css" data-link-type="property" href="#propdef-view-transition-name" id="ref-for-propdef-view-transition-name①⓪">view-transition-name</a> that triggered its creation. The specificity of a <a data-link-type="dfn" href="#named-view-transition-pseudo-elements" id="ref-for-named-view-transition-pseudo-elements①">named view transition pseudo-element</a> <a data-link-type="dfn" href="https://drafts.csswg.org/selectors-4/#selector" id="ref-for-selector①">selector</a> with a <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#identifier-value" id="ref-for-identifier-value⑤"><custom-ident></a> argument is equivalent to a <a data-link-type="dfn" href="https://drafts.csswg.org/selectors-4/#type-selector" id="ref-for-type-selector">type selector</a>. The specificity of a named view transition pseudo-element selector with a <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/selectors-3/#x" id="ref-for-x①">*</a> argument is zero. <h4 class="heading settled" data-level="3.2.2" id="view-transition-pseudo">3.2.2. View Transition Tree Root: the <a class="css" data-link-type="maybe" href="#selectordef-view-transition" id="ref-for-selectordef-view-transition②">::view-transition</a> pseudo-element<a class="self-link" href="#view-transition-pseudo"></a></h4> The <dfn class="dfn-paneled css" data-dfn-type="selector" data-export id="selectordef-view-transition">::view-transition</dfn> <a data-link-type="dfn" href="https://drafts.csswg.org/selectors-4/#pseudo-element" id="ref-for-pseudo-element③">pseudo-element</a> is a <a data-link-type="dfn" href="https://www.w3.org/TR/css-pseudo-4/#tree-abiding" id="ref-for-tree-abiding④">tree-abiding pseudo-element</a> that is also a <a data-link-type="dfn" href="#pseudo-element-root" id="ref-for-pseudo-element-root①">pseudo-element root</a>. Its <a data-link-type="dfn" href="https://drafts.csswg.org/selectors-4/#originating-element" id="ref-for-originating-element①">originating element</a> is the document’s <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#document-element" id="ref-for-document-element②">document element</a>, and its <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#containing-block" id="ref-for-containing-block">containing block</a> is the <a data-link-type="dfn" href="#snapshot-containing-block" id="ref-for-snapshot-containing-block">snapshot containing block</a>. Note: This element serves as the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-tree-parent" id="ref-for-concept-tree-parent①">parent</a> of all <a class="css" data-link-type="maybe" href="#selectordef-view-transition-group" id="ref-for-selectordef-view-transition-group⑦">::view-transition-group()</a> pseudo-elements. <h4 class="heading settled" data-level="3.2.3" id="::view-transition-group">3.2.3. View Transition Named Subtree Root: the <a class="css" data-link-type="maybe" href="#selectordef-view-transition-group" id="ref-for-selectordef-view-transition-group⑧">::view-transition-group()</a> pseudo-element<a class="self-link" href="#::view-transition-group"></a></h4> The <dfn class="dfn-paneled css" data-dfn-type="selector" data-export id="selectordef-view-transition-group">::view-transition-group()</dfn> <a data-link-type="dfn" href="https://drafts.csswg.org/selectors-4/#pseudo-element" id="ref-for-pseudo-element④">pseudo-element</a> is a <a data-link-type="dfn" href="#named-view-transition-pseudo-elements" id="ref-for-named-view-transition-pseudo-elements③">named view transition pseudo-element</a> that represents a matching named <a data-link-type="dfn" href="#view-transitions" id="ref-for-view-transitions⑦">view transition</a> capture. A <a class="css" data-link-type="maybe" href="#selectordef-view-transition-group" id="ref-for-selectordef-view-transition-group⑨">::view-transition-group()</a> pseudo-element is generated for each <a data-link-type="dfn" href="#view-transition-name" id="ref-for-view-transition-name⑨">view transition name</a> as a <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-tree-child" id="ref-for-concept-tree-child①">child</a> of the <a class="css" data-link-type="maybe" href="#selectordef-view-transition" id="ref-for-selectordef-view-transition③">::view-transition</a> pseudo-element, and contains a corresponding <a class="css" data-link-type="maybe" href="#selectordef-view-transition-image-pair" id="ref-for-selectordef-view-transition-image-pair">::view-transition-image-pair()</a>. <div class="note" role="note"> This element initially mirrors the size and position of the “old” element, or the “new” element if there isn’t an “old” element. If there’s both an “old” and “new” state, styles in the <a data-link-type="dfn" href="#document-dynamic-view-transition-style-sheet" id="ref-for-document-dynamic-view-transition-style-sheet">dynamic view transition style sheet</a> animate this pseudo-element’s <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-sizing-3/#propdef-width" id="ref-for-propdef-width">width</a> and <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-sizing-3/#propdef-height" id="ref-for-propdef-height">height</a> from the size of the old element’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-box-4/#border-box" id="ref-for-border-box">border box</a> to that of the new element’s border box. Also the element’s <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-transforms-1/#propdef-transform" id="ref-for-propdef-transform">transform</a> is animated from the old element’s screen space transform to the new element’s screen space transform. This style is generated dynamically since the values of animated properties are determined at the time that the transition begins. </div> <h4 class="heading settled" data-level="3.2.4" id="::view-transition-image-pair">3.2.4. View Transition Image Pair Isolation: the <a class="css" data-link-type="maybe" href="#selectordef-view-transition-image-pair" id="ref-for-selectordef-view-transition-image-pair①">::view-transition-image-pair()</a> pseudo-element<a class="self-link" href="#::view-transition-image-pair"></a></h4> The <dfn class="dfn-paneled css" data-dfn-type="selector" data-export id="selectordef-view-transition-image-pair">::view-transition-image-pair()</dfn> <a data-link-type="dfn" href="https://drafts.csswg.org/selectors-4/#pseudo-element" id="ref-for-pseudo-element⑦">pseudo-element</a> is a <a data-link-type="dfn" href="#named-view-transition-pseudo-elements" id="ref-for-named-view-transition-pseudo-elements④">named view transition pseudo-element</a> that represents a pair of corresponding old/new <a data-link-type="dfn" href="#view-transitions" id="ref-for-view-transitions⑧">view transition</a> captures. This pseudo-element is a <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-tree-child" id="ref-for-concept-tree-child②">child</a> of the corresponding <a class="css" data-link-type="maybe" href="#selectordef-view-transition-group" id="ref-for-selectordef-view-transition-group①⓪">::view-transition-group()</a> pseudo-element and contains a corresponding <a class="css" data-link-type="maybe" href="#selectordef-view-transition-old" id="ref-for-selectordef-view-transition-old①">::view-transition-old()</a> pseudo-element and/or a corresponding <a class="css" data-link-type="maybe" href="#selectordef-view-transition-new" id="ref-for-selectordef-view-transition-new①">::view-transition-new()</a> pseudo-element (in that order). <div class="note" role="note"> This element exists to provide <a class="css" data-link-type="propdesc" href="https://drafts.fxtf.org/compositing-2/#propdef-isolation" id="ref-for-propdef-isolation">isolation: isolate</a> for its children, and is always present as a <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-tree-child" id="ref-for-concept-tree-child③">child</a> of each <a class="css" data-link-type="maybe" href="#selectordef-view-transition-group" id="ref-for-selectordef-view-transition-group①①">::view-transition-group()</a>. This isolation allows the image pair to be blended with non-normal blend modes without affecting other visual outputs. </div> <h4 class="heading settled" data-level="3.2.5" id="::view-transition-old">3.2.5. View Transition Old State Image: the <a class="css" data-link-type="maybe" href="#selectordef-view-transition-old" id="ref-for-selectordef-view-transition-old②">::view-transition-old()</a> pseudo-element<a class="self-link" href="#::view-transition-old"></a></h4> The <dfn class="dfn-paneled css" data-dfn-type="selector" data-export id="selectordef-view-transition-old">::view-transition-old()</dfn> <a data-link-type="dfn" href="https://drafts.csswg.org/selectors-4/#pseudo-element" id="ref-for-pseudo-element⑧">pseudo-element</a> is an empty <a data-link-type="dfn" href="#named-view-transition-pseudo-elements" id="ref-for-named-view-transition-pseudo-elements⑤">named view transition pseudo-element</a> that represents a visual snapshot of the “old” state as a <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#replaced-element" id="ref-for-replaced-element">replaced element</a>; it is omitted if there’s no “old” state to represent. Each <a class="css" data-link-type="maybe" href="#selectordef-view-transition-old" id="ref-for-selectordef-view-transition-old③">::view-transition-old()</a> pseudo-element is a <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-tree-child" id="ref-for-concept-tree-child④">child</a> of the corresponding <a class="css" data-link-type="maybe" href="#selectordef-view-transition-image-pair" id="ref-for-selectordef-view-transition-image-pair②">::view-transition-image-pair()</a> pseudo-element. <div class="note" role="note"> <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/selectors-4/#only-child-pseudo" id="ref-for-only-child-pseudo②">:only-child</a> can be used to match cases where this element is the only element in the <a class="css" data-link-type="maybe" href="#selectordef-view-transition-image-pair" id="ref-for-selectordef-view-transition-image-pair③">::view-transition-image-pair()</a>. The appearance of this element can be manipulated with <code>object-*</code> properties in the same way that other replaced elements can be. </div> Note: The content and <a data-link-type="dfn" href="https://drafts.csswg.org/css-images-3/#natural-dimensions" id="ref-for-natural-dimensions">natural dimensions</a> of the image are captured in <a data-link-type="dfn" href="#capture-the-image" id="ref-for-capture-the-image①">capture the image</a>, and set in <a data-link-type="dfn" href="#setup-transition-pseudo-elements" id="ref-for-setup-transition-pseudo-elements①">setup transition pseudo-elements</a>. Note: Additional styles in the <a data-link-type="dfn" href="#document-dynamic-view-transition-style-sheet" id="ref-for-document-dynamic-view-transition-style-sheet①">dynamic view transition style sheet</a> added to animate these pseudo-elements are detailed in <a data-link-type="dfn" href="#setup-transition-pseudo-elements" id="ref-for-setup-transition-pseudo-elements②">setup transition pseudo-elements</a> and <a data-link-type="dfn" href="#update-pseudo-element-styles" id="ref-for-update-pseudo-element-styles">update pseudo-element styles</a>. <h4 class="heading settled" data-level="3.2.6" id="::view-transition-new">3.2.6. View Transition New State Image: the <a class="css" data-link-type="maybe" href="#selectordef-view-transition-new" id="ref-for-selectordef-view-transition-new②">::view-transition-new()</a> pseudo-element<a class="self-link" href="#::view-transition-new"></a></h4> The <dfn class="dfn-paneled css" data-dfn-type="selector" data-export id="selectordef-view-transition-new">::view-transition-new()</dfn> <a data-link-type="dfn" href="https://drafts.csswg.org/selectors-4/#pseudo-element" id="ref-for-pseudo-element⑨">pseudo-element</a> (like the analogous <a class="css" data-link-type="maybe" href="#selectordef-view-transition-old" id="ref-for-selectordef-view-transition-old④">::view-transition-old()</a> pseudo-element) is an empty <a data-link-type="dfn" href="#named-view-transition-pseudo-elements" id="ref-for-named-view-transition-pseudo-elements⑥">named view transition pseudo-element</a> that represents a visual snapshot of the “new” state as a <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#replaced-element" id="ref-for-replaced-element①">replaced element</a>; it is omitted if there’s no “new” state to represent. Each <a class="css" data-link-type="maybe" href="#selectordef-view-transition-new" id="ref-for-selectordef-view-transition-new③">::view-transition-new()</a> pseudo-element is a <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-tree-child" id="ref-for-concept-tree-child⑤">child</a> of the corresponding <a class="css" data-link-type="maybe" href="#selectordef-view-transition-image-pair" id="ref-for-selectordef-view-transition-image-pair④">::view-transition-image-pair()</a> pseudo-element. Note: The content and <a data-link-type="dfn" href="https://drafts.csswg.org/css-images-3/#natural-dimensions" id="ref-for-natural-dimensions①">natural dimensions</a> of the image are captured in <a data-link-type="dfn" href="#capture-the-image" id="ref-for-capture-the-image②">capture the image</a>, then set and updated in <a data-link-type="dfn" href="#setup-transition-pseudo-elements" id="ref-for-setup-transition-pseudo-elements③">setup transition pseudo-elements</a> and <a data-link-type="dfn" href="#update-pseudo-element-styles" id="ref-for-update-pseudo-element-styles①">update pseudo-element styles</a>. <h2 class="heading settled" data-level="4" id="view-transition-rendering">4. View Transition Layout<a class="self-link" href="#view-transition-rendering"></a></h2> The <a data-link-type="dfn" href="#view-transition-pseudo-elements" id="ref-for-view-transition-pseudo-elements④">view transition pseudo-elements</a> are styled, laid out, and rendered like normal elements, except that they originate in the <a data-link-type="dfn" href="#snapshot-containing-block" id="ref-for-snapshot-containing-block①">snapshot containing block</a> rather than 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 are painted in the <a data-link-type="dfn" href="#view-transition-layer" id="ref-for-view-transition-layer">view transition layer</a> above the rest of the document. <h3 class="heading settled" data-level="4.1" id="snapshot-containing-block-concept">4.1. The Snapshot Containing Block<a class="self-link" href="#snapshot-containing-block-concept"></a></h3> The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="snapshot-containing-block">snapshot containing block</dfn> is a rectangle that covers all areas of the window that could potentially display page content (and is therefore consistent regardless of root scrollbars or <a data-link-type="dfn" href="https://drafts.csswg.org/css-viewport/#interactive-widget" id="ref-for-interactive-widget">interactive widgets</a>). This makes it likely to be consistent for the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#document-element" id="ref-for-document-element③">document element</a>’s <a data-link-type="dfn" href="#captured-element-old-image" id="ref-for-captured-element-old-image">old image</a> and <a data-link-type="dfn" href="#captured-element-new-element" id="ref-for-captured-element-new-element">new element</a>. Within a <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/document-sequences.html#child-navigable" id="ref-for-child-navigable">child navigable</a>, the <a data-link-type="dfn" href="#snapshot-containing-block" id="ref-for-snapshot-containing-block②">snapshot containing block</a> is the union of the navigable’s <a data-link-type="dfn">viewport</a> with any <a data-link-type="dfn" href="https://drafts.csswg.org/css-overflow-3/#scrollbar-gutter" id="ref-for-scrollbar-gutter">scrollbar gutters</a>. <figure> <img alt="A diagram of a phone screen, including a top status bar, a browser URL bar, web-content area with a floating scrollbar, a virtual keyboard, and a bottom bar with an OS back button" height="335" src="diagrams/phone-browser.svg" width="200"> <img alt="The previous diagram, but highlights the area that's the 'snapshot containing block', which includes everything except the top status bar and the bottom bar with the OS back button" height="335" src="diagrams/phone-browser-snapshot-root.svg" width="200"> <figcaption> An example of the <a data-link-type="dfn" href="#snapshot-containing-block" id="ref-for-snapshot-containing-block③">snapshot containing block</a> on a mobile OS. The snapshot includes the URL bar, as this can be scrolled away. The keyboard is included as this appears and disappears. The top and bottom bars are part of the OS rather than the browser, so they’re not included in the snapshot containing block. </figcaption> </figure> <figure> <img alt="A diagram of a desktop browser window, including a tab bar, a URL bar, and a web-content area featuring both horizontal and vertical scrollbars" height="79" src="diagrams/desktop-browser.svg" style="height:auto; width: 600px" width="132"> <img alt="The previous diagram, but highlights the area that's the 'snapshot containing block', which includes the web content area and the scrollbars" height="79" src="diagrams/desktop-browser-snapshot-root.svg" style="height:auto; width: 600px" width="132"> <figcaption> An example of the <a data-link-type="dfn" href="#snapshot-containing-block" id="ref-for-snapshot-containing-block④">snapshot containing block</a> on a desktop OS. This includes the scrollbars, but does not include the URL bar, as web content never appears in that area. </figcaption> </figure> The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="snapshot-containing-block-origin">snapshot containing block origin</dfn> refers to the top-left corner of the <a data-link-type="dfn" href="#snapshot-containing-block" id="ref-for-snapshot-containing-block⑤">snapshot containing block</a>. The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="snapshot-containing-block-size">snapshot containing block size</dfn> refers to the width and height of the <a data-link-type="dfn" href="#snapshot-containing-block" id="ref-for-snapshot-containing-block⑥">snapshot containing block</a> as a <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#tuple" id="ref-for-tuple">tuple</a> of two numbers. The <a data-link-type="dfn" href="#snapshot-containing-block" id="ref-for-snapshot-containing-block⑦">snapshot containing block</a> is considered to be an <a data-link-type="dfn" href="https://drafts.csswg.org/css-position-3/#absolute-positioning-containing-block" id="ref-for-absolute-positioning-containing-block">absolute positioning containing block</a> and a <a data-link-type="dfn" href="https://drafts.csswg.org/css-position-3/#fixed-positioning-containing-block" id="ref-for-fixed-positioning-containing-block">fixed positioning containing block</a> for <a class="css" data-link-type="maybe" href="#selectordef-view-transition" id="ref-for-selectordef-view-transition④">::view-transition</a> and its descendants. <h3 class="heading settled" data-level="4.2" id="view-transition-stacking-layer">4.2. View Transition Painting Order<a class="self-link" href="#view-transition-stacking-layer"></a></h3> This specification introduces a new stacking layer, the <a data-link-type="dfn" href="#view-transition-layer" id="ref-for-view-transition-layer①">view transition layer</a>, to the end of the painting order established in <a href="https://www.w3.org/TR/CSS22/zindex.html">CSS2§E Elaborate Description of Stacking Contexts</a>. <a data-link-type="biblio" href="#biblio-css2" title="Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification">[CSS2]</a> The <a class="css" data-link-type="maybe" href="#selectordef-view-transition" id="ref-for-selectordef-view-transition⑤">::view-transition</a> pseudo-element generates a new stacking context, called the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="view-transition-layer">view transition layer</dfn>, which paints after all other content of the document (including any content rendered in the <a data-link-type="dfn" href="https://drafts.csswg.org/css-position-4/#document-top-layer" id="ref-for-document-top-layer">top layer</a>), after any filters and effects that are applied to such content. (It is not subject to such filters or effects, except insofar as they affect the rendered contents of the <a class="css" data-link-type="maybe" href="#selectordef-view-transition-old" id="ref-for-selectordef-view-transition-old⑤">::view-transition-old()</a> and <a class="css" data-link-type="maybe" href="#selectordef-view-transition-new" id="ref-for-selectordef-view-transition-new④">::view-transition-new()</a> pseudo-elements.) Note: The intent of the feature is to be able to capture the contents of the page, which includes the top layer elements. In order to accomplish that, the <a data-link-type="dfn" href="#view-transition-layer" id="ref-for-view-transition-layer②">view transition layer</a> cannot be a part of the captured stacking contexts, since that results in a circular dependency. Therefore, the view transition layer is a sibling of all other content. When a <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document" id="ref-for-document">Document</a></code>’s <a data-link-type="dfn" href="#document-active-view-transition" id="ref-for-document-active-view-transition">active view transition</a>’s <a data-link-type="dfn" href="#viewtransition-phase" id="ref-for-viewtransition-phase">phase</a> is "<code>animating</code>", the boxes generated by any element in that <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document" id="ref-for-document①">Document</a></code> with <a data-link-type="dfn" href="#captured-in-a-view-transition" id="ref-for-captured-in-a-view-transition②">captured in a view transition</a> and its <a data-link-type="dfn" href="https://drafts.csswg.org/css-contain-2/#element-contents" id="ref-for-element-contents">element contents</a>, except <a data-link-type="dfn" href="#viewtransition-transition-root-pseudo-element" id="ref-for-viewtransition-transition-root-pseudo-element">transition root pseudo-element</a>’s <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-tree-inclusive-descendant" id="ref-for-concept-tree-inclusive-descendant">inclusive descendants</a>, are not painted (as if they had <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-display-4/#propdef-visibility" id="ref-for-propdef-visibility">visibility: hidden</a>) and do not respond to hit-testing (as if they had <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-ui-4/#propdef-pointer-events" id="ref-for-propdef-pointer-events">pointer-events: none</a>). Note: Elements participating in a transition need to skip painting in their DOM location because their image is painted in the corresponding <a class="css" data-link-type="maybe" href="#selectordef-view-transition-new" id="ref-for-selectordef-view-transition-new⑤">::view-transition-new()</a> pseudo-element instead. Similarly, hit-testing is skipped because the element’s DOM location does not correspond to where its contents are rendered. However, there is no change in how these elements are accessed by assistive technologies or the accessibility tree. <h2 class="heading settled" data-level="5" id="ua-styles">5. User Agent Stylesheet<a class="self-link" href="#ua-styles"></a></h2> The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="global-view-transition-user-agent-style-sheet">global view transition user agent style sheet</dfn> is a <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#cascade-origin-ua" id="ref-for-cascade-origin-ua">user-agent origin</a> style sheet containing the following rules: <pre class="language-css highlight">:root <c- p>{</c-> <c- k>view-transition-name</c-><c- p>:</c-> root<c- p>;</c-> <c- p>}</c-> :root::view-transition <c- p>{</c-> <c- k>position</c-><c- p>:</c-> fixed<c- p>;</c-> <c- k>inset</c-><c- p>:</c-> <c- m>0</c-><c- p>;</c-> <c- p>}</c-> :root:<c- nf>:view-transition-group</c-><c- p>(</c->*<c- p>)</c-> <c- p>{</c-> <c- k>position</c-><c- p>:</c-> absolute<c- p>;</c-> <c- k>top</c-><c- p>:</c-> <c- m>0</c-><c- p>;</c-> <c- k>left</c-><c- p>:</c-> <c- m>0</c-><c- p>;</c-> <c- k>animation-duration</c-><c- p>:</c-> <c- m>0.25</c-><c- k>s</c-><c- p>;</c-> <c- k>animation-fill-mode</c-><c- p>:</c-> both<c- p>;</c-> <c- p>}</c-> :root:<c- nf>:view-transition-image-pair</c-><c- p>(</c->*<c- p>)</c-> <c- p>{</c-> <c- k>position</c-><c- p>:</c-> absolute<c- p>;</c-> <c- k>inset</c-><c- p>:</c-> <c- m>0</c-><c- p>;</c-> <c- k>animation-duration</c-><c- p>:</c-> inherit<c- p>;</c-> <c- k>animation-fill-mode</c-><c- p>:</c-> inherit<c- p>;</c-> <c- k>animation-delay</c-><c- p>:</c-> inherit<c- p>;</c-> <c- p>}</c-> :root:<c- nf>:view-transition-old</c-><c- p>(</c->*<c- p>),</c-> :root:<c- nf>:view-transition-new</c-><c- p>(</c->*<c- p>)</c-> <c- p>{</c-> <c- k>position</c-><c- p>:</c-> absolute<c- p>;</c-> <c- k>inset-block-start</c-><c- p>:</c-> <c- m>0</c-><c- p>;</c-> <c- k>inline-size</c-><c- p>:</c-> <c- m>100</c-><c- k>%</c-><c- p>;</c-> <c- k>block-size</c-><c- p>:</c-> auto<c- p>;</c-> <c- k>animation-duration</c-><c- p>:</c-> inherit<c- p>;</c-> <c- k>animation-fill-mode</c-><c- p>:</c-> inherit<c- p>;</c-> <c- k>animation-delay</c-><c- p>:</c-> inherit<c- p>;</c-> <c- p>}</c-> <c- c>/* Default cross-fade transition */</c-> <c- n>@keyframes</c-> -ua-view-transition-fade-out <c- p>{</c-> to <c- p>{</c-> <c- k>opacity</c-><c- p>:</c-> <c- m>0</c-><c- p>;</c-> <c- p>}</c-> <c- p>}</c-> <c- n>@keyframes</c-> -ua-view-transition-fade-in <c- p>{</c-> from <c- p>{</c-> <c- k>opacity</c-><c- p>:</c-> <c- m>0</c-><c- p>;</c-> <c- p>}</c-> <c- p>}</c-> <c- c>/* Keyframes for blending when there are 2 images */</c-> <c- n>@keyframes</c-> -ua-mix-blend-mode-plus-lighter <c- p>{</c-> from <c- p>{</c-> <c- k>mix-blend-mode</c-><c- p>:</c-> plus-lighter <c- p>}</c-> to <c- p>{</c-> <c- k>mix-blend-mode</c-><c- p>:</c-> plus-lighter <c- p>}</c-> <c- p>}</c-> </pre> <details class="note"> <summary>Explanatory Summary</summary> This UA style sheet does several things: <ul> <li data-md> Lay out <a class="css" data-link-type="maybe" href="#selectordef-view-transition" id="ref-for-selectordef-view-transition⑥">::view-transition</a> to cover the entire <a data-link-type="dfn" href="#snapshot-containing-block" id="ref-for-snapshot-containing-block⑧">snapshot containing block</a> so that each :view-transition-group() child can lay out relative to it. <li data-md> Give the <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#root-element" id="ref-for-root-element①">root element</a> a default <a data-link-type="dfn" href="#view-transition-name" id="ref-for-view-transition-name①⓪">view transition name</a>, to allow it to be independently selected. <li data-md> Reduce layout interference from the <a class="css" data-link-type="maybe" href="#selectordef-view-transition-image-pair" id="ref-for-selectordef-view-transition-image-pair⑤">::view-transition-image-pair()</a> pseudo-element so that authors can essentially treat <a class="css" data-link-type="maybe" href="#selectordef-view-transition-old" id="ref-for-selectordef-view-transition-old⑥">::view-transition-old()</a> and <a class="css" data-link-type="maybe" href="#selectordef-view-transition-new" id="ref-for-selectordef-view-transition-new⑥">::view-transition-new()</a> as direct children of <a class="css" data-link-type="maybe" href="#selectordef-view-transition-group" id="ref-for-selectordef-view-transition-group①②">::view-transition-group()</a> for most purposes. <li data-md> Inherit animation timing through the tree so that by default, the animation timing set on a <a class="css" data-link-type="maybe" href="#selectordef-view-transition-group" id="ref-for-selectordef-view-transition-group①③">::view-transition-group()</a> will dictate the animation timing of all its descendants. <li data-md> Style the element captures <a class="css" data-link-type="maybe" href="#selectordef-view-transition-old" id="ref-for-selectordef-view-transition-old⑦">::view-transition-old()</a> and <a class="css" data-link-type="maybe" href="#selectordef-view-transition-new" id="ref-for-selectordef-view-transition-new⑦">::view-transition-new()</a> to match the size and position set on <a class="css" data-link-type="maybe" href="#selectordef-view-transition-group" id="ref-for-selectordef-view-transition-group①④">::view-transition-group()</a> (insofar as possible without breaking their aspect ratios) as it interpolates between them. Since the sizing of these elements depends on the mapping between logical and physical coordinates, <a data-link-type="dfn" href="#document-dynamic-view-transition-style-sheet" id="ref-for-document-dynamic-view-transition-style-sheet②">dynamic view transition style sheet</a> copies relevant styles from the DOM elements. <li data-md> Set up a default quarter-second cross-fade animation for each <a class="css" data-link-type="maybe" href="#selectordef-view-transition-group" id="ref-for-selectordef-view-transition-group①⑤">::view-transition-group()</a>. </ul> </details> Additional styles are dynamically added to the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#cascade-origin-ua" id="ref-for-cascade-origin-ua①">user-agent origin</a> during a <a data-link-type="dfn" href="#view-transitions" id="ref-for-view-transitions⑨">view transition</a> through the <a data-link-type="dfn" href="#document-dynamic-view-transition-style-sheet" id="ref-for-document-dynamic-view-transition-style-sheet③">dynamic view transition style sheet</a>. <h2 class="heading settled" data-level="6" id="api">6. API<a class="self-link" href="#api"></a></h2> <h3 class="heading settled" data-level="6.1" id="additions-to-document-api">6.1. Additions to <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document" id="ref-for-document②">Document</a></code><a class="self-link" href="#additions-to-document-api"></a></h3> <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="#viewtransition" id="ref-for-viewtransition①"><c- n>ViewTransition</c-></a> <a class="idl-code" data-link-type="method" href="#dom-document-startviewtransition" id="ref-for-dom-document-startviewtransition②"><c- g>startViewTransition</c-></a>(<c- b>optional</c-> <a data-link-type="idl-name" href="#callbackdef-viewtransitionupdatecallback" id="ref-for-callbackdef-viewtransitionupdatecallback⑤"><c- n>ViewTransitionUpdateCallback</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="Document/startViewTransition(updateCallback), Document/startViewTransition()" data-dfn-type="argument" data-export id="dom-document-startviewtransition-updatecallback-updatecallback"><code><c- g>updateCallback</c-></code></dfn>); }; <c- b>callback</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="callback" data-export id="callbackdef-viewtransitionupdatecallback"><code><c- g>ViewTransitionUpdateCallback</c-></code></dfn> = <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-promise" id="ref-for-idl-promise"><c- b>Promise</c-></a><<a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-any" id="ref-for-idl-any"><c- b>any</c-></a>> (); </pre> <dl class="domintro non-normative"> <dt data-md><code><code class="idl"><a data-link-type="idl" href="#viewtransition" id="ref-for-viewtransition②">viewTransition</a></code> = <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document" id="ref-for-document④">document</a></code>.<code class="idl"><a data-link-type="idl" href="#dom-document-startviewtransition" id="ref-for-dom-document-startviewtransition③">startViewTransition</a></code>(<code class="idl"><a data-link-type="idl" href="#callbackdef-viewtransitionupdatecallback" id="ref-for-callbackdef-viewtransitionupdatecallback⑥">updateCallback</a></code>)</code> <dd data-md> Starts a new <a data-link-type="dfn" href="#view-transitions" id="ref-for-view-transitions①⓪">view transition</a> (canceling the <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document" id="ref-for-document⑤">document</a></code>’s existing <a data-link-type="dfn" href="#document-active-view-transition" id="ref-for-document-active-view-transition①">active view transition</a>, if any). <code class="idl"><a data-link-type="idl" href="#callbackdef-viewtransitionupdatecallback" id="ref-for-callbackdef-viewtransitionupdatecallback⑦">updateCallback</a></code>, if provided, is called asynchronously, once the current state of the document is captured. Then, when the promise returned by <code class="idl"><a data-link-type="idl" href="#callbackdef-viewtransitionupdatecallback" id="ref-for-callbackdef-viewtransitionupdatecallback⑧">updateCallback</a></code> fulfills, the new state of the document is captured and the transition is initiated. Note that <code class="idl"><a data-link-type="idl" href="#callbackdef-viewtransitionupdatecallback" id="ref-for-callbackdef-viewtransitionupdatecallback⑨">updateCallback</a></code>, if provided, is always called, even if the transition cannot happen (e.g. due to duplicate <code>view-transition-name</code> values). The transition is an enhancement around the state change, so a failure to create a transition never prevents the state change. See <a href="#transitions-as-enhancements">§ 1.4 Transitions as an enhancement</a> for more details on this principle. If the promise returned by <code class="idl"><a data-link-type="idl" href="#callbackdef-viewtransitionupdatecallback" id="ref-for-callbackdef-viewtransitionupdatecallback①⓪">updateCallback</a></code> rejects, the transition is skipped. </dl> <h4 class="heading settled" data-level="6.1.1" id="ViewTransition-prepare">6.1.1. <code class="idl"><a data-link-type="idl" href="#dom-document-startviewtransition" id="ref-for-dom-document-startviewtransition④">startViewTransition()</a></code> Method Steps<a class="self-link" href="#ViewTransition-prepare"></a></h4> <div class="algorithm" data-algorithm="startViewTransition(updateCallback)" data-algorithm-for="Document"> The <a data-link-type="dfn" href="https://webidl.spec.whatwg.org/#method-steps" id="ref-for-method-steps">method steps</a> for <dfn class="dfn-paneled idl-code" data-dfn-for="Document" data-dfn-type="method" data-export data-lt="startViewTransition(updateCallback)|startViewTransition()" id="dom-document-startviewtransition"><code>startViewTransition(<var>updateCallback</var>)</code></dfn> are as follows: <ol> <li data-md> Let <var>transition</var> be a new <code class="idl"><a data-link-type="idl" href="#viewtransition" id="ref-for-viewtransition③">ViewTransition</a></code> object in <a data-link-type="dfn" href="https://webidl.spec.whatwg.org/#this" id="ref-for-this">this’s</a> <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-relevant-realm" id="ref-for-concept-relevant-realm">relevant Realm</a>. <li data-md> If <var>updateCallback</var> is provided, set <var>transition</var>’s <a data-link-type="dfn" href="#viewtransition-update-callback" id="ref-for-viewtransition-update-callback">update callback</a> to <var>updateCallback</var>. <li data-md> Let <var>document</var> be <a data-link-type="dfn" href="https://webidl.spec.whatwg.org/#this" id="ref-for-this①">this’s</a> <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’s</a> <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>. <li data-md> If <var>document</var>’s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/interaction.html#visibility-state" id="ref-for-visibility-state">visibility state</a> is "<code>hidden</code>", then <a data-link-type="dfn" href="#skip-the-view-transition" id="ref-for-skip-the-view-transition">skip</a> <var>transition</var> with an "<code class="idl"><a data-link-type="idl" href="https://webidl.spec.whatwg.org/#invalidstateerror" id="ref-for-invalidstateerror">InvalidStateError</a></code>" <code class="idl"><a data-link-type="idl" href="https://webidl.spec.whatwg.org/#idl-DOMException" id="ref-for-idl-DOMException">DOMException</a></code>, and return <var>transition</var>. <li data-md> If <var>document</var>’s <a data-link-type="dfn" href="#document-active-view-transition" id="ref-for-document-active-view-transition②">active view transition</a> is not null, then <a data-link-type="dfn" href="#skip-the-view-transition" id="ref-for-skip-the-view-transition①">skip that view transition</a> with an "<code class="idl"><a data-link-type="idl" href="https://webidl.spec.whatwg.org/#aborterror" id="ref-for-aborterror">AbortError</a></code>" <code class="idl"><a data-link-type="idl" href="https://webidl.spec.whatwg.org/#idl-DOMException" id="ref-for-idl-DOMException①">DOMException</a></code> in <a data-link-type="dfn" href="https://webidl.spec.whatwg.org/#this" id="ref-for-this②">this’s</a> <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-relevant-realm" id="ref-for-concept-relevant-realm①">relevant Realm</a>. Note: This can result in two asynchronous <a data-link-type="dfn" href="#viewtransition-update-callback" id="ref-for-viewtransition-update-callback①">update callbacks</a> running concurrently (and therefore possibly out of sequence): one for the <var>document</var>’s current <a data-link-type="dfn" href="#document-active-view-transition" id="ref-for-document-active-view-transition③">active view transition</a>, and another for this <var>transition</var>. As per the <a href="#transitions-as-enhancements">design of this feature</a>, it’s assumed that the developer is using another feature or framework to correctly schedule these DOM changes. <li data-md> Set <var>document</var>’s <a data-link-type="dfn" href="#document-active-view-transition" id="ref-for-document-active-view-transition④">active view transition</a> to <var>transition</var>. Note: The <a data-link-type="dfn" href="#view-transitions" id="ref-for-view-transitions①①">view transition</a> process continues in <a data-link-type="dfn" href="#setup-view-transition" id="ref-for-setup-view-transition">setup view transition</a>, via <a data-link-type="dfn" href="#perform-pending-transition-operations" id="ref-for-perform-pending-transition-operations">perform pending transition operations</a>. <li data-md> Return <var>transition</var>. </ol> </div> <h3 class="heading settled" data-level="6.2" id="the-domtransition-interface">6.2. The <code class="idl"><a data-link-type="idl" href="#viewtransition" id="ref-for-viewtransition④">ViewTransition</a></code> interface<a class="self-link" href="#the-domtransition-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="viewtransition"><code><c- g>ViewTransition</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-promise" id="ref-for-idl-promise①"><c- b>Promise</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>> <dfn class="dfn-paneled idl-code" data-dfn-for="ViewTransition" data-dfn-type="attribute" data-export data-readonly data-type="Promise<undefined>" id="dom-viewtransition-updatecallbackdone"><code><c- g>updateCallbackDone</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-promise" id="ref-for-idl-promise②"><c- b>Promise</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>> <dfn class="dfn-paneled idl-code" data-dfn-for="ViewTransition" data-dfn-type="attribute" data-export data-readonly data-type="Promise<undefined>" id="dom-viewtransition-ready"><code><c- g>ready</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-promise" id="ref-for-idl-promise③"><c- b>Promise</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>> <dfn class="dfn-paneled idl-code" data-dfn-for="ViewTransition" data-dfn-type="attribute" data-export data-readonly data-type="Promise<undefined>" id="dom-viewtransition-finished"><code><c- g>finished</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-viewtransition-skiptransition" id="ref-for-dom-viewtransition-skiptransition①"><c- g>skipTransition</c-></a>(); }; </pre> The <code class="idl"><a data-link-type="idl" href="#viewtransition" id="ref-for-viewtransition⑤">ViewTransition</a></code> interface represents and controls a single same-document <a data-link-type="dfn" href="#view-transitions" id="ref-for-view-transitions①②">view transition</a>, i.e. a transition where the starting and ending document are the same, possibly with changes to the document’s DOM structure. <dl class="domintro non-normative"> <dt data-md><code><code class="idl"><a data-link-type="idl" href="#viewtransition" id="ref-for-viewtransition⑥">viewTransition</a></code>.<code class="idl"><a data-link-type="idl" href="#dom-viewtransition-updatecallbackdone" id="ref-for-dom-viewtransition-updatecallbackdone①">updateCallbackDone</a></code></code> <dd data-md> A promise that fulfills when the promise returned by <code class="idl"><a data-link-type="idl" href="#callbackdef-viewtransitionupdatecallback" id="ref-for-callbackdef-viewtransitionupdatecallback①①">updateCallback</a></code> fulfills, or rejects when it rejects. Note: The View Transition API wraps a DOM change and creates a visual transition. However, sometimes you don’t care about the success/failure of the transition animation, you just want to know if and when the DOM change happens. <code class="idl"><a data-link-type="idl" href="#dom-viewtransition-updatecallbackdone" id="ref-for-dom-viewtransition-updatecallbackdone②">updateCallbackDone</a></code> is for that use-case.) <dt data-md><code><code class="idl"><a data-link-type="idl" href="#viewtransition" id="ref-for-viewtransition⑦">viewTransition</a></code>.<code class="idl"><a data-link-type="idl" href="#dom-viewtransition-ready" id="ref-for-dom-viewtransition-ready①">ready</a></code></code> <dd data-md> A promise that fulfills once the pseudo-elements for the transition are created, and the animation is about to start. It rejects if the transition cannot begin. This can be due to misconfiguration, such as duplicate <a class="property css" data-link-type="property" href="#propdef-view-transition-name" id="ref-for-propdef-view-transition-name①①">view-transition-name</a>s, or if <code class="idl"><a data-link-type="idl" href="#dom-viewtransition-updatecallbackdone" id="ref-for-dom-viewtransition-updatecallbackdone③">updateCallbackDone</a></code> returns a rejected promise. The point that <code class="idl"><a data-link-type="idl" href="#dom-viewtransition-ready" id="ref-for-dom-viewtransition-ready②">ready</a></code> fulfills is the ideal opportunity to animate the <a data-link-type="dfn" href="#view-transition-pseudo-elements" id="ref-for-view-transition-pseudo-elements⑤">view transition pseudo-elements</a> with the <a href="https://drafts.csswg.org/web-animations-1/#extensions-to-the-element-interface">Web Animation API</a>. <dt data-md><code><code class="idl"><a data-link-type="idl" href="#viewtransition" id="ref-for-viewtransition⑧">viewTransition</a></code>.<code class="idl"><a data-link-type="idl" href="#dom-viewtransition-finished" id="ref-for-dom-viewtransition-finished①">finished</a></code></code> <dd data-md> A promise that fulfills once the end state is fully visible and interactive to the user. It only rejects if <code class="idl"><a data-link-type="idl" href="#callbackdef-viewtransitionupdatecallback" id="ref-for-callbackdef-viewtransitionupdatecallback①②">updateCallback</a></code> returns a rejected promise, as this indicates the end state wasn’t created. Otherwise, if a transition fails to begin, or is skipped (by <code class="idl"><a data-link-type="idl" href="#dom-viewtransition-skiptransition" id="ref-for-dom-viewtransition-skiptransition②">skipTransition()</a></code>), the end state is still reached, so <code class="idl"><a data-link-type="idl" href="#dom-viewtransition-finished" id="ref-for-dom-viewtransition-finished②">finished</a></code> fulfills. <dt data-md><code><code class="idl"><a data-link-type="idl" href="#viewtransition" id="ref-for-viewtransition⑨">viewTransition</a></code>.<code class="idl"><a data-link-type="idl" href="#dom-viewtransition-skiptransition" id="ref-for-dom-viewtransition-skiptransition③">skipTransition</a></code>()</code> <dd data-md> Immediately finish the transition, or prevent it starting. This never prevents <code class="idl"><a data-link-type="idl" href="#callbackdef-viewtransitionupdatecallback" id="ref-for-callbackdef-viewtransitionupdatecallback①③">updateCallback</a></code> being called, as the DOM change is independent of the transition. See <a href="#transitions-as-enhancements">§ 1.4 Transitions as an enhancement</a> for more details on this principle. If this is called before <code class="idl"><a data-link-type="idl" href="#dom-viewtransition-ready" id="ref-for-dom-viewtransition-ready③">ready</a></code> resolves, <code class="idl"><a data-link-type="idl" href="#dom-viewtransition-ready" id="ref-for-dom-viewtransition-ready④">ready</a></code> will reject. If <code class="idl"><a data-link-type="idl" href="#dom-viewtransition-finished" id="ref-for-dom-viewtransition-finished③">finished</a></code> hasn’t resolved, it will fulfill or reject along with <code class="idl"><a data-link-type="idl" href="#dom-viewtransition-updatecallbackdone" id="ref-for-dom-viewtransition-updatecallbackdone④">updateCallbackDone</a></code>. </dl> A <code class="idl"><a data-link-type="idl" href="#viewtransition" id="ref-for-viewtransition①⓪">ViewTransition</a></code> has the following: <dl> <dt data-md><dfn class="dfn-paneled" data-dfn-for="ViewTransition" data-dfn-type="dfn" data-noexport id="viewtransition-named-elements">named elements</dfn> <dd data-md> a <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#ordered-map" id="ref-for-ordered-map">map</a>, whose keys are <a data-link-type="dfn" href="#view-transition-name" id="ref-for-view-transition-name①①">view transition names</a> and whose values are <a data-link-type="dfn" href="#captured-element" id="ref-for-captured-element">captured elements</a>. Initially a new map. Note: Since this is associated to the <code class="idl"><a data-link-type="idl" href="#viewtransition" id="ref-for-viewtransition①①">ViewTransition</a></code>, it will be cleaned up when <a data-link-type="dfn" href="#clear-view-transition" id="ref-for-clear-view-transition">Clear view transition</a> is called. <dt data-md><dfn class="dfn-paneled" data-dfn-for="ViewTransition" data-dfn-type="dfn" data-noexport id="viewtransition-phase">phase</dfn> <dd data-md> One of the following ordered phases, initially "<code>pending-capture</code>": <ol> <li data-md> "<code>pending-capture</code>". <li data-md> "<code>update-callback-called</code>". <li data-md> "<code>animating</code>". <li data-md> "<code>done</code>". </ol> Note: For the most part, a developer using this API does not need to worry about the different phases, since they progress automatically. It is, however, important to understand what steps happen in each of the phases: when the snapshots are captured, when pseudo-element DOM is created, etc. The description of the phases below tries to be as precise as possible, with an intent to provide an unambiguous set of steps for implementors to follow in order to produce a spec-compliant implementation. <dt data-md><dfn class="dfn-paneled" data-dfn-for="ViewTransition" data-dfn-type="dfn" data-noexport id="viewtransition-update-callback">update callback</dfn> <dd data-md> a <code class="idl"><a data-link-type="idl" href="#callbackdef-viewtransitionupdatecallback" id="ref-for-callbackdef-viewtransitionupdatecallback①④">ViewTransitionUpdateCallback</a></code> or null. Initially null. <dt data-md><dfn class="dfn-paneled" data-dfn-for="ViewTransition" data-dfn-type="dfn" data-noexport id="viewtransition-ready-promise">ready promise</dfn> <dd data-md> a <code class="idl"><a data-link-type="idl" href="https://webidl.spec.whatwg.org/#idl-promise" id="ref-for-idl-promise④">Promise</a></code>. Initially <a data-link-type="dfn" href="https://webidl.spec.whatwg.org/#a-new-promise" id="ref-for-a-new-promise">a new promise</a> in <a data-link-type="dfn" href="https://webidl.spec.whatwg.org/#this" id="ref-for-this③">this’s</a> <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-relevant-realm" id="ref-for-concept-relevant-realm②">relevant Realm</a>. <dt data-md><dfn class="dfn-paneled" data-dfn-for="ViewTransition" data-dfn-type="dfn" data-noexport id="viewtransition-update-callback-done-promise">update callback done promise</dfn> <dd data-md> a <code class="idl"><a data-link-type="idl" href="https://webidl.spec.whatwg.org/#idl-promise" id="ref-for-idl-promise⑤">Promise</a></code>. Initially <a data-link-type="dfn" href="https://webidl.spec.whatwg.org/#a-new-promise" id="ref-for-a-new-promise①">a new promise</a> in <a data-link-type="dfn" href="https://webidl.spec.whatwg.org/#this" id="ref-for-this④">this’s</a> <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-relevant-realm" id="ref-for-concept-relevant-realm③">relevant Realm</a>. Note: The <a data-link-type="dfn" href="#viewtransition-ready-promise" id="ref-for-viewtransition-ready-promise">ready promise</a> and <a data-link-type="dfn" href="#viewtransition-update-callback-done-promise" id="ref-for-viewtransition-update-callback-done-promise">update callback done promise</a> are immediately created, so rejections will cause <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/indices.html#event-unhandledrejection" id="ref-for-event-unhandledrejection">unhandledrejection</a></code>s unless they’re <a data-link-type="dfn" href="https://webidl.spec.whatwg.org/#mark-a-promise-as-handled" id="ref-for-mark-a-promise-as-handled">handled</a>, even if the getters such as <code class="idl"><a data-link-type="idl" href="#dom-viewtransition-updatecallbackdone" id="ref-for-dom-viewtransition-updatecallbackdone⑤">updateCallbackDone</a></code> are not accessed. <dt data-md><dfn class="dfn-paneled" data-dfn-for="ViewTransition" data-dfn-type="dfn" data-noexport id="viewtransition-finished-promise">finished promise</dfn> <dd data-md> a <code class="idl"><a data-link-type="idl" href="https://webidl.spec.whatwg.org/#idl-promise" id="ref-for-idl-promise⑥">Promise</a></code>. Initially <a data-link-type="dfn" href="https://webidl.spec.whatwg.org/#a-new-promise" id="ref-for-a-new-promise②">a new promise</a> in <a data-link-type="dfn" href="https://webidl.spec.whatwg.org/#this" id="ref-for-this⑤">this’s</a> <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-relevant-realm" id="ref-for-concept-relevant-realm④">relevant Realm</a>, <a data-link-type="dfn" href="https://webidl.spec.whatwg.org/#mark-a-promise-as-handled" id="ref-for-mark-a-promise-as-handled①">marked as handled</a>. Note: This is <a data-link-type="dfn" href="https://webidl.spec.whatwg.org/#mark-a-promise-as-handled" id="ref-for-mark-a-promise-as-handled②">marked as handled</a> to prevent duplicate <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/indices.html#event-unhandledrejection" id="ref-for-event-unhandledrejection①">unhandledrejection</a></code>s, as this promise only ever rejects along with the <a data-link-type="dfn" href="#viewtransition-update-callback-done-promise" id="ref-for-viewtransition-update-callback-done-promise①">update callback done promise</a>. <dt data-md><dfn class="dfn-paneled" data-dfn-for="ViewTransition" data-dfn-type="dfn" data-noexport id="viewtransition-transition-root-pseudo-element">transition root pseudo-element</dfn> <dd data-md> a <a class="css" data-link-type="maybe" href="#selectordef-view-transition" id="ref-for-selectordef-view-transition⑦">::view-transition</a>. Initially a new ::view-transition. <dt data-md><dfn class="dfn-paneled" data-dfn-for="ViewTransition" data-dfn-type="dfn" data-noexport id="viewtransition-initial-snapshot-containing-block-size">initial snapshot containing block size</dfn> <dd data-md> a <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#tuple" id="ref-for-tuple①">tuple</a> of two numbers (width and height), or null. Initially null. Note: This is used to detect changes in the <a data-link-type="dfn" href="#snapshot-containing-block-size" id="ref-for-snapshot-containing-block-size">snapshot containing block size</a>, which causes the transition to <a data-link-type="dfn" href="#skip-the-view-transition" id="ref-for-skip-the-view-transition②">skip</a>. <a href="https://github.com/w3c/csswg-drafts/issues/8045">Discussion of this behavior</a>. </dl> The <code class="idl"><a data-link-type="idl" href="#dom-viewtransition-finished" id="ref-for-dom-viewtransition-finished④">finished</a></code> <a data-link-type="dfn" href="https://webidl.spec.whatwg.org/#getter-steps" id="ref-for-getter-steps">getter steps</a> are to return <a data-link-type="dfn" href="https://webidl.spec.whatwg.org/#this" id="ref-for-this⑥">this’s</a> <a data-link-type="dfn" href="#viewtransition-finished-promise" id="ref-for-viewtransition-finished-promise">finished promise</a>. The <code class="idl"><a data-link-type="idl" href="#dom-viewtransition-ready" id="ref-for-dom-viewtransition-ready⑤">ready</a></code> <a data-link-type="dfn" href="https://webidl.spec.whatwg.org/#getter-steps" id="ref-for-getter-steps①">getter steps</a> are to return <a data-link-type="dfn" href="https://webidl.spec.whatwg.org/#this" id="ref-for-this⑦">this’s</a> <a data-link-type="dfn" href="#viewtransition-ready-promise" id="ref-for-viewtransition-ready-promise①">ready promise</a>. The <code class="idl"><a data-link-type="idl" href="#dom-viewtransition-updatecallbackdone" id="ref-for-dom-viewtransition-updatecallbackdone⑥">updateCallbackDone</a></code> <a data-link-type="dfn" href="https://webidl.spec.whatwg.org/#getter-steps" id="ref-for-getter-steps②">getter steps</a> are to return <a data-link-type="dfn" href="https://webidl.spec.whatwg.org/#this" id="ref-for-this⑧">this’s</a> <a data-link-type="dfn" href="#viewtransition-update-callback-done-promise" id="ref-for-viewtransition-update-callback-done-promise②">update callback done promise</a>. <h4 class="heading settled" data-level="6.2.1" id="ViewTransition-skipTransition">6.2.1. <code class="idl"><a data-link-type="idl" href="#dom-viewtransition-skiptransition" id="ref-for-dom-viewtransition-skiptransition④">skipTransition()</a></code> Method Steps<a class="self-link" href="#ViewTransition-skipTransition"></a></h4> <div class="algorithm" data-algorithm="dom-viewtransition-skipTransition"> The <a data-link-type="dfn" href="https://webidl.spec.whatwg.org/#method-steps" id="ref-for-method-steps①">method steps</a> for <dfn class="dfn-paneled idl-code" data-dfn-for="ViewTransition" data-dfn-type="method" data-export id="dom-viewtransition-skiptransition"><code>skipTransition()</code></dfn> are: <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="#viewtransition-phase" id="ref-for-viewtransition-phase①">phase</a> is not "<code>done</code>", then <a data-link-type="dfn" href="#skip-the-view-transition" id="ref-for-skip-the-view-transition③">skip the view transition</a> for this with an "<code class="idl"><a data-link-type="idl" href="https://webidl.spec.whatwg.org/#aborterror" id="ref-for-aborterror①">AbortError</a></code>" <code class="idl"><a data-link-type="idl" href="https://webidl.spec.whatwg.org/#idl-DOMException" id="ref-for-idl-DOMException②">DOMException</a></code>. </ol> </div> <h2 class="heading settled" data-level="7" id="algorithms">7. Algorithms<a class="self-link" href="#algorithms"></a></h2> <h3 class="heading settled" data-level="7.1" id="concepts">7.1. Data Structures<a class="self-link" href="#concepts"></a></h3> <h4 class="heading settled" data-level="7.1.1" id="additions-to-document">7.1.1. Additions to <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document" id="ref-for-document⑥">Document</a></code><a class="self-link" href="#additions-to-document"></a></h4> A <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document" id="ref-for-document⑦">Document</a></code> additionally has: <dl> <dt data-md><dfn class="dfn-paneled" data-dfn-for="document" data-dfn-type="dfn" data-noexport id="document-active-view-transition">active view transition</dfn> <dd data-md> a <code class="idl"><a data-link-type="idl" href="#viewtransition" id="ref-for-viewtransition①②">ViewTransition</a></code> or null. Initially null. <dt data-md><dfn class="dfn-paneled" data-dfn-for="document" data-dfn-type="dfn" data-noexport id="document-rendering-suppression-for-view-transitions">rendering suppression for view transitions</dfn> <dd data-md> a boolean. Initially false. While a <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document" id="ref-for-document⑧">Document</a></code>’s <a data-link-type="dfn" href="#document-rendering-suppression-for-view-transitions" id="ref-for-document-rendering-suppression-for-view-transitions">rendering suppression for view transitions</a> is true, all pointer hit testing must target its <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#document-element" id="ref-for-document-element④">document element</a>, ignoring all other <a data-link-type="dfn" href="https://drafts.csswg.org/css2/#element" id="ref-for-element⑤">elements</a>. Note: This does not affect pointers that are <a data-link-type="dfn" href="https://w3c.github.io/pointerevents/#dfn-pointer-capture" id="ref-for-dfn-pointer-capture">captured</a>. <dt data-md><dfn class="dfn-paneled" data-dfn-for="document" data-dfn-type="dfn" data-noexport id="document-dynamic-view-transition-style-sheet">dynamic view transition style sheet</dfn> <dd data-md> a <a data-link-type="dfn" href="https://drafts.csswg.org/css-2022/#style-sheet" id="ref-for-style-sheet">style sheet</a>. Initially a new style sheet in the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#cascade-origin-ua" id="ref-for-cascade-origin-ua②">user-agent origin</a>, ordered after the <a data-link-type="dfn" href="#global-view-transition-user-agent-style-sheet" id="ref-for-global-view-transition-user-agent-style-sheet">global view transition user agent style sheet</a>. Note: This is used to hold dynamic styles relating to transitions. <dt data-md><dfn class="dfn-paneled" data-dfn-for="document" data-dfn-type="dfn" data-noexport id="document-show-view-transition-tree">show view transition tree</dfn> <dd data-md> A boolean. Initially false. When this is true, <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="#document-active-view-transition" id="ref-for-document-active-view-transition⑤">active view transition</a>’s <a data-link-type="dfn" href="#viewtransition-transition-root-pseudo-element" id="ref-for-viewtransition-transition-root-pseudo-element①">transition root pseudo-element</a> renders as a child of this’s <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#document-element" id="ref-for-document-element⑤">document element</a>, with this’s document element is its <a data-link-type="dfn" href="https://drafts.csswg.org/selectors-4/#originating-element" id="ref-for-originating-element②">originating element</a>. Note: The position of the <a data-link-type="dfn" href="#viewtransition-transition-root-pseudo-element" id="ref-for-viewtransition-transition-root-pseudo-element②">transition root pseudo-element</a> within the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#document-element" id="ref-for-document-element⑦">document element</a> does not matter, as the transition root pseudo-element’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#containing-block" id="ref-for-containing-block①">containing block</a> is the <a data-link-type="dfn" href="#snapshot-containing-block" id="ref-for-snapshot-containing-block⑨">snapshot containing block</a>. </dl> <h4 class="heading settled" data-level="7.1.2" id="elements-concept">7.1.2. Additions to Elements<a class="self-link" href="#elements-concept"></a></h4> <a data-link-type="dfn" href="https://drafts.csswg.org/css2/#element" id="ref-for-element⑥">Elements</a> have a <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="captured-in-a-view-transition">captured in a view transition</dfn> boolean, initially false. Note: This spec uses CSS’s definition of <a data-link-type="dfn" href="https://drafts.csswg.org/css2/#element" id="ref-for-element⑦">element</a>, which includes <a data-link-type="dfn" href="https://www.w3.org/TR/CSS21/selector.html#x22" id="ref-for-x22①">pseudo-elements</a>. <h4 class="heading settled" data-level="7.1.3" id="captured-elements">7.1.3. <a data-link-type="dfn" href="#captured-element" id="ref-for-captured-element①">Captured elements</a><a class="self-link" href="#captured-elements"></a></h4> A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="captured-element">captured element</dfn> is a <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#struct" id="ref-for-struct">struct</a> with the following: <dl> <dt data-md><dfn class="dfn-paneled" data-dfn-for="captured element" data-dfn-type="dfn" data-noexport id="captured-element-old-image">old image</dfn> <dd data-md> an 2D bitmap or null. Initially null. <dt data-md><dfn class="dfn-paneled" data-dfn-for="captured element" data-dfn-type="dfn" data-noexport id="captured-element-old-width">old width</dfn> <dt data-md><dfn class="dfn-paneled" data-dfn-for="captured element" data-dfn-type="dfn" data-noexport id="captured-element-old-height">old height</dfn> <dd data-md> an <code class="idl"><a data-link-type="idl" href="https://webidl.spec.whatwg.org/#idl-unrestricted-double" id="ref-for-idl-unrestricted-double">unrestricted double</a></code>, initially zero. <dt data-md><dfn class="dfn-paneled" data-dfn-for="captured element" data-dfn-type="dfn" data-noexport id="captured-element-old-transform">old transform</dfn> <dd data-md> a <a class="css" data-link-type="type" data-xref-type="css-type" href="https://drafts.csswg.org/css-transforms-2/#typedef-transform-function" id="ref-for-typedef-transform-function"><transform-function></a>, initially the <a data-link-type="dfn" href="https://drafts.csswg.org/css-transforms-1/#identity-transform-function" id="ref-for-identity-transform-function">identity transform function</a>. <dt data-md><dfn class="dfn-paneled" data-dfn-for="captured element" data-dfn-type="dfn" data-noexport id="captured-element-old-writing-mode">old writing-mode</dfn> <dd data-md> Null or a <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-writing-modes-4/#propdef-writing-mode" id="ref-for-propdef-writing-mode">writing-mode</a>, initially null. <dt data-md><dfn class="dfn-paneled" data-dfn-for="captured element" data-dfn-type="dfn" data-noexport id="captured-element-old-direction">old direction</dfn> <dd data-md> Null or a <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-direction" id="ref-for-propdef-direction">direction</a>, initially null. <dt data-md><dfn class="dfn-paneled" data-dfn-for="captured element" data-dfn-type="dfn" data-noexport id="captured-element-old-text-orientation">old text-orientation</dfn> <dd data-md> Null or a <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-writing-modes-4/#propdef-text-orientation" id="ref-for-propdef-text-orientation">text-orientation</a>, initially null. <dt data-md><dfn class="dfn-paneled" data-dfn-for="captured element" data-dfn-type="dfn" data-noexport id="captured-element-old-mix-blend-mode">old mix-blend-mode</dfn> <dd data-md> Null or a <a class="property css" data-link-type="property" href="https://drafts.fxtf.org/compositing-2/#propdef-mix-blend-mode" id="ref-for-propdef-mix-blend-mode①">mix-blend-mode</a>, initially null. <dt data-md><dfn class="dfn-paneled" data-dfn-for="captured element" data-dfn-type="dfn" data-noexport id="captured-element-old-backdrop-filter">old backdrop-filter</dfn> <dd data-md> Null or a <a class="property css" data-link-type="property" href="https://drafts.fxtf.org/filter-effects-2/#propdef-backdrop-filter" id="ref-for-propdef-backdrop-filter">backdrop-filter</a>, initially null. <dt data-md><dfn class="dfn-paneled" data-dfn-for="captured element" data-dfn-type="dfn" data-noexport id="captured-element-old-color-scheme">old color-scheme</dfn> <dd data-md> Null or a <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-color-adjust-1/#propdef-color-scheme" id="ref-for-propdef-color-scheme">color-scheme</a>, initially null. <dt data-md><dfn class="dfn-paneled" data-dfn-for="captured element" data-dfn-type="dfn" data-noexport id="captured-element-new-element">new element</dfn> <dd data-md> an <a data-link-type="dfn" href="https://drafts.csswg.org/css2/#element" id="ref-for-element⑧">element</a> or null. Initially null. </dl> In addition, a <a data-link-type="dfn" href="#captured-element" id="ref-for-captured-element②">captured element</a> has the following <dfn class="dfn-paneled" data-dfn-for="captured element" data-dfn-type="dfn" data-noexport id="captured-element-style-definitions">style definitions</dfn>: <dl> <dt data-md><dfn class="dfn-paneled" data-dfn-for="captured element" data-dfn-type="dfn" data-noexport id="captured-element-group-keyframes">group keyframes</dfn> <dd data-md> A <code class="idl"><a data-link-type="idl" href="https://drafts.csswg.org/css-animations-1/#csskeyframesrule" id="ref-for-csskeyframesrule">CSSKeyframesRule</a></code> or null. Initially null. <dt data-md><dfn class="dfn-paneled" data-dfn-for="captured element" data-dfn-type="dfn" data-noexport id="captured-element-group-animation-name-rule">group animation name rule</dfn> <dd data-md> A <code class="idl"><a data-link-type="idl" href="https://drafts.csswg.org/cssom-1/#cssstylerule" id="ref-for-cssstylerule">CSSStyleRule</a></code> or null. Initially null. <dt data-md><dfn class="dfn-paneled" data-dfn-for="captured element" data-dfn-type="dfn" data-noexport id="captured-element-group-styles-rule">group styles rule</dfn> <dd data-md> A <code class="idl"><a data-link-type="idl" href="https://drafts.csswg.org/cssom-1/#cssstylerule" id="ref-for-cssstylerule①">CSSStyleRule</a></code> or null. Initially null. <dt data-md><dfn class="dfn-paneled" data-dfn-for="captured element" data-dfn-type="dfn" data-noexport id="captured-element-image-pair-isolation-rule">image pair isolation rule</dfn> <dd data-md> A <code class="idl"><a data-link-type="idl" href="https://drafts.csswg.org/cssom-1/#cssstylerule" id="ref-for-cssstylerule②">CSSStyleRule</a></code> or null. Initially null. <dt data-md><dfn class="dfn-paneled" data-dfn-for="captured element" data-dfn-type="dfn" data-noexport id="captured-element-image-animation-name-rule">image animation name rule</dfn> <dd data-md> A <code class="idl"><a data-link-type="idl" href="https://drafts.csswg.org/cssom-1/#cssstylerule" id="ref-for-cssstylerule③">CSSStyleRule</a></code> or null. Initially null. </dl> Note: These are used to update, and later remove styles from a <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-document" id="ref-for-concept-document①">document</a>’s <a data-link-type="dfn" href="#document-dynamic-view-transition-style-sheet" id="ref-for-document-dynamic-view-transition-style-sheet④">dynamic view transition style sheet</a>. <h3 class="heading settled" data-level="7.2" id="perform-pending-transition-operations-algorithm">7.2. <a data-link-type="dfn" href="#perform-pending-transition-operations" id="ref-for-perform-pending-transition-operations①">Perform pending transition operations</a><a class="self-link" href="#perform-pending-transition-operations-algorithm"></a></h3> <div class="algorithm" data-algorithm="perform pending transition operations"> <div class="note" role="note">This algorithm is invoked as a part of <a href="https://html.spec.whatwg.org/#event-loop-processing-model:perform-pending-transition-operations">update the rendering loop</a> in the html spec.</div> To <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="perform-pending-transition-operations">perform pending transition operations</dfn> given a <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document" id="ref-for-document⑨">Document</a></code> <var>document</var>, perform the following steps: <ol> <li data-md> If <var>document</var>’s <a data-link-type="dfn" href="#document-active-view-transition" id="ref-for-document-active-view-transition⑥">active view transition</a> is not null, then: <ol> <li data-md> If <var>document</var>’s <a data-link-type="dfn" href="#document-active-view-transition" id="ref-for-document-active-view-transition⑦">active view transition</a>’s <a data-link-type="dfn" href="#viewtransition-phase" id="ref-for-viewtransition-phase②">phase</a> is "<code>pending-capture</code>", then <a data-link-type="dfn" href="#setup-view-transition" id="ref-for-setup-view-transition①">setup view transition</a> for <var>document</var>’s active view transition. <li data-md> Otherwise, if <var>document</var>’s <a data-link-type="dfn" href="#document-active-view-transition" id="ref-for-document-active-view-transition⑨">active view transition</a>’s <a data-link-type="dfn" href="#viewtransition-phase" id="ref-for-viewtransition-phase③">phase</a> is "<code>animating</code>", then <a data-link-type="dfn" href="#handle-transition-frame" id="ref-for-handle-transition-frame">handle transition frame</a> for <var>document</var>’s active view transition. </ol> </ol> </div> <h3 class="heading settled" data-level="7.3" id="setup-view-transition-algorithm">7.3. <a data-link-type="dfn" href="#setup-view-transition" id="ref-for-setup-view-transition②">Setup view transition</a><a class="self-link" href="#setup-view-transition-algorithm"></a></h3> <div class="algorithm" data-algorithm="setup view transition"> To <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="setup-view-transition">setup view transition</dfn> for a <code class="idl"><a data-link-type="idl" href="#viewtransition" id="ref-for-viewtransition①③">ViewTransition</a></code> <var>transition</var>, perform the following steps: Note: This algorithm captures the current state of the document, calls the transition’s <code class="idl"><a data-link-type="idl" href="#callbackdef-viewtransitionupdatecallback" id="ref-for-callbackdef-viewtransitionupdatecallback①⑤">ViewTransitionUpdateCallback</a></code>, then captures the new state of the document. <ol> <li data-md> Let <var>document</var> be <var>transition</var>’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’s</a> <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>. <li data-md> <a data-link-type="dfn" href="#capture-the-old-state" id="ref-for-capture-the-old-state">Capture the old state</a> for <var>transition</var>. If failure is returned, then <a data-link-type="dfn" href="#skip-the-view-transition" id="ref-for-skip-the-view-transition④">skip the view transition</a> for <var>transition</var> with an "<code class="idl"><a data-link-type="idl" href="https://webidl.spec.whatwg.org/#invalidstateerror" id="ref-for-invalidstateerror①">InvalidStateError</a></code>" <code class="idl"><a data-link-type="idl" href="https://webidl.spec.whatwg.org/#idl-DOMException" id="ref-for-idl-DOMException③">DOMException</a></code> in <var>transition</var>’s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-relevant-realm" id="ref-for-concept-relevant-realm⑤">relevant Realm</a>, and return. <li data-md> Set <var>document</var>’s <a data-link-type="dfn" href="#document-rendering-suppression-for-view-transitions" id="ref-for-document-rendering-suppression-for-view-transitions①">rendering suppression for view transitions</a> to true. <li data-md> <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#queue-a-global-task" id="ref-for-queue-a-global-task">Queue a global task</a> on the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#dom-manipulation-task-source" id="ref-for-dom-manipulation-task-source">DOM manipulation task source</a>, given <var>transition</var>’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>, to perform the following steps: Note: A task is queued here because the texture read back in <a data-link-type="dfn" href="#capture-the-image" id="ref-for-capture-the-image③">capturing the image</a> may be async, although the render steps in the HTML spec act as if it’s synchronous. <ol> <li data-md> If <var>transition</var>’s <a data-link-type="dfn" href="#viewtransition-phase" id="ref-for-viewtransition-phase④">phase</a> is "<code>done</code>", then abort these steps. Note: This happens if <var>transition</var> was <a data-link-type="dfn" href="#skip-the-view-transition" id="ref-for-skip-the-view-transition⑤">skipped</a> before this point. <li data-md> <a data-link-type="dfn" href="#call-the-update-callback" id="ref-for-call-the-update-callback">call the update callback</a>. </ol> </ol> </div> <div class="algorithm" data-algorithm="activate view transition"> To <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="activate-view-transition">activate view transition</dfn> for a <code class="idl"><a data-link-type="idl" href="#viewtransition" id="ref-for-viewtransition①④">ViewTransition</a></code> <var>transition</var>, perform the following steps: <ol> <li data-md> If <var>transition</var>’s <a data-link-type="dfn" href="#viewtransition-phase" id="ref-for-viewtransition-phase⑤">phase</a> is "<code>done</code>", then return. Note: This happens if <var>transition</var> was <a data-link-type="dfn" href="#skip-the-view-transition" id="ref-for-skip-the-view-transition⑥">skipped</a> before this point. <li data-md> Set <a data-link-type="dfn" href="#document-rendering-suppression-for-view-transitions" id="ref-for-document-rendering-suppression-for-view-transitions②">rendering suppression for view transitions</a> to false. <li data-md> If <var>transition</var>’s <a data-link-type="dfn" href="#viewtransition-initial-snapshot-containing-block-size" id="ref-for-viewtransition-initial-snapshot-containing-block-size">initial snapshot containing block size</a> is not equal to the <a data-link-type="dfn" href="#snapshot-containing-block-size" id="ref-for-snapshot-containing-block-size①">snapshot containing block size</a>, then <a data-link-type="dfn" href="#skip-the-view-transition" id="ref-for-skip-the-view-transition⑦">skip the view transition</a> for <var>transition</var>, and return. <li data-md> <a data-link-type="dfn" href="#capture-the-new-state" id="ref-for-capture-the-new-state">Capture the new state</a> for <var>transition</var>. If failure is returned, then <a data-link-type="dfn" href="#skip-the-view-transition" id="ref-for-skip-the-view-transition⑧">skip the view transition</a> for <var>transition</var> with an "<code class="idl"><a data-link-type="idl" href="https://webidl.spec.whatwg.org/#invalidstateerror" id="ref-for-invalidstateerror②">InvalidStateError</a></code>" <code class="idl"><a data-link-type="idl" href="https://webidl.spec.whatwg.org/#idl-DOMException" id="ref-for-idl-DOMException④">DOMException</a></code> in <var>transition</var>’s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-relevant-realm" id="ref-for-concept-relevant-realm⑥">relevant Realm</a>, and return. <li data-md> <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#list-iterate" id="ref-for-list-iterate">For each</a> <var>capturedElement</var> of <var>transition</var>’s <a data-link-type="dfn" href="#viewtransition-named-elements" id="ref-for-viewtransition-named-elements">named elements</a>' <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#map-getting-the-values" id="ref-for-map-getting-the-values">values</a>: <ol> <li data-md> If <var>capturedElement</var>’s <a data-link-type="dfn" href="#captured-element-new-element" id="ref-for-captured-element-new-element①">new element</a> is not null, then set <var>capturedElement</var>’s new element’s <a data-link-type="dfn" href="#captured-in-a-view-transition" id="ref-for-captured-in-a-view-transition③">captured in a view transition</a> to true. </ol> <li data-md> <a data-link-type="dfn" href="#setup-transition-pseudo-elements" id="ref-for-setup-transition-pseudo-elements④">Setup transition pseudo-elements</a> for <var>transition</var>. <li data-md> <a data-link-type="dfn" href="#update-pseudo-element-styles" id="ref-for-update-pseudo-element-styles②">Update pseudo-element styles</a> for <var>transition</var>. If failure is returned, then <a data-link-type="dfn" href="#skip-the-view-transition" id="ref-for-skip-the-view-transition⑨">skip the view transition</a> for <var>transition</var> with an "<code class="idl"><a data-link-type="idl" href="https://webidl.spec.whatwg.org/#invalidstateerror" id="ref-for-invalidstateerror③">InvalidStateError</a></code>" <code class="idl"><a data-link-type="idl" href="https://webidl.spec.whatwg.org/#idl-DOMException" id="ref-for-idl-DOMException⑤">DOMException</a></code> in <var>transition</var>’s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-relevant-realm" id="ref-for-concept-relevant-realm⑦">relevant Realm</a>, and return. Note: The above steps will require running document lifecycle phases, to compute information calculated during style/layout. <li data-md> Set <var>transition</var>’s <a data-link-type="dfn" href="#viewtransition-phase" id="ref-for-viewtransition-phase⑥">phase</a> to "<code>animating</code>". <li data-md> <a data-link-type="dfn" href="https://webidl.spec.whatwg.org/#resolve" id="ref-for-resolve">Resolve</a> <var>transition</var>’s <a data-link-type="dfn" href="#viewtransition-ready-promise" id="ref-for-viewtransition-ready-promise②">ready promise</a>. </ol> </div> <h4 class="heading settled" data-level="7.3.1" id="capture-old-state-algorithm">7.3.1. <a data-link-type="dfn" href="#capture-the-old-state" id="ref-for-capture-the-old-state①">Capture the old state</a><a class="self-link" href="#capture-old-state-algorithm"></a></h4> <div class="algorithm" data-algorithm="capture the old state"> To <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="capture-the-old-state">capture the old state</dfn> for <code class="idl"><a data-link-type="idl" href="#viewtransition" id="ref-for-viewtransition①⑤">ViewTransition</a></code> <var>transition</var>: <ol> <li data-md> Let <var>document</var> be <var>transition</var>’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’s</a> <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>. <li data-md> Let <var>namedElements</var> be <var>transition</var>’s <a data-link-type="dfn" href="#viewtransition-named-elements" id="ref-for-viewtransition-named-elements①">named elements</a>. <li data-md> Let <var>usedTransitionNames</var> be a new <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#ordered-set" id="ref-for-ordered-set">set</a> of strings. <li data-md> Let <var>captureElements</var> be a new <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#list" id="ref-for-list">list</a> of elements. <li data-md> If the <a data-link-type="dfn" href="#snapshot-containing-block-size" id="ref-for-snapshot-containing-block-size②">snapshot containing block size</a> exceeds an <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#implementation-defined" id="ref-for-implementation-defined">implementation-defined</a> maximum, then return failure. <li data-md> Set <var>transition</var>’s <a data-link-type="dfn" href="#viewtransition-initial-snapshot-containing-block-size" id="ref-for-viewtransition-initial-snapshot-containing-block-size①">initial snapshot containing block size</a> to the <a data-link-type="dfn" href="#snapshot-containing-block-size" id="ref-for-snapshot-containing-block-size③">snapshot containing block size</a>. <li data-md> <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#list-iterate" id="ref-for-list-iterate①">For each</a> <var>element</var> of every <a data-link-type="dfn" href="https://drafts.csswg.org/css2/#element" id="ref-for-element⑨">element</a> that is <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#connected" id="ref-for-connected">connected</a>, and has a <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-node-document" id="ref-for-concept-node-document①">node document</a> equal to <var>document</var>, in <a href="https://drafts.csswg.org/css2/#painting-order">paint order</a>: <div class="note" role="note">We iterate in paint order to ensure that this order is cached in <var>namedElements</var>. This defines the DOM order for ::view-transition-group pseudo-elements, such that the element at the bottom of the paint stack generates the first pseudo child of ::view-transition.</div> <ol> <li data-md> If any <a data-link-type="dfn" href="https://drafts.csswg.org/css-scoping-1/#flat-tree" id="ref-for-flat-tree">flat tree</a> ancestor of this <var>element</var> <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>, then <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#iteration-continue" id="ref-for-iteration-continue">continue</a>. <li data-md> If <var>element</var> has more than one <a data-link-type="dfn" href="https://drafts.csswg.org/css-break-4/#box-fragment" id="ref-for-box-fragment">box fragment</a>, then <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#iteration-continue" id="ref-for-iteration-continue①">continue</a>. Note: We might want to enable transitions for fragmented elements in future versions. See <a href="https://github.com/w3c/csswg-drafts/issues/8900">#8900</a>. Note: <a data-link-type="dfn" href="https://drafts.csswg.org/css-break-4/#box-fragment" id="ref-for-box-fragment①">box fragment</a> here does not refer to fragmentation of <a href="https://www.w3.org/TR/CSS2/visuren.html#inline-boxes">inline boxes</a> across <a href="https://www.w3.org/TR/CSS2/visuren.html#line-box">line boxes</a>. Such inlines can participate in a transition. <li data-md> Let <var>transitionName</var> be the <var>element</var>’s <a data-link-type="dfn" href="#document-scoped-view-transition-name" id="ref-for-document-scoped-view-transition-name">document-scoped view transition name</a>. <li data-md> If <var>transitionName</var> is <a class="css" data-link-type="maybe" href="#valdef-view-transition-name-none" id="ref-for-valdef-view-transition-name-none②">none</a>, or <var>element</var> is <a data-link-type="dfn" href="https://drafts.csswg.org/css-images-4/#element-not-rendered" id="ref-for-element-not-rendered①">not rendered</a>, then <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#iteration-continue" id="ref-for-iteration-continue②">continue</a>. <li data-md> If <var>usedTransitionNames</var> <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#list-contain" id="ref-for-list-contain">contains</a> <var>transitionName</var>, then: <ol> <li data-md> <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#list-iterate" id="ref-for-list-iterate②">For each</a> <var>element</var> in <var>captureElements</var>: <ol> <li data-md> Set <var>element</var>’s <a data-link-type="dfn" href="#captured-in-a-view-transition" id="ref-for-captured-in-a-view-transition④">captured in a view transition</a> to false. </ol> <li data-md> return failure. </ol> <li data-md> <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#set-append" id="ref-for-set-append">Append</a> <var>transitionName</var> to <var>usedTransitionNames</var>. <li data-md> Set <var>element</var>’s <a data-link-type="dfn" href="#captured-in-a-view-transition" id="ref-for-captured-in-a-view-transition⑤">captured in a view transition</a> to true. <li data-md> <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#list-append" id="ref-for-list-append">Append</a> <var>element</var> to <var>captureElements</var>. </ol> <div class="note" role="note">The algorithm continues in a separate loop to ensure that <a data-link-type="dfn" href="#captured-in-a-view-transition" id="ref-for-captured-in-a-view-transition⑥">captured in a view transition</a> is set on all elements participating in this capture before it is read by future steps in the algorithm.</div> <li data-md> <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#list-iterate" id="ref-for-list-iterate③">For each</a> <var>element</var> in <var>captureElements</var>: <ol> <li data-md> Let <var>capture</var> be a new <a data-link-type="dfn" href="#captured-element" id="ref-for-captured-element③">captured element</a> struct. <li data-md> Set <var>capture</var>’s <a data-link-type="dfn" href="#captured-element-old-image" id="ref-for-captured-element-old-image①">old image</a> to the result of <a data-link-type="dfn" href="#capture-the-image" id="ref-for-capture-the-image④">capturing the image</a> of <var>element</var>. <li data-md> Let <var>originalRect</var> be <a data-link-type="dfn" href="#snapshot-containing-block" id="ref-for-snapshot-containing-block①⓪">snapshot containing block</a> if <var>element</var> is the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#document-element" id="ref-for-document-element⑧">document element</a>, otherwise, the element|'s <a data-link-type="dfn" href="https://drafts.csswg.org/css-box-4/#border-box" id="ref-for-border-box②">border box</a>. <li data-md> Set <var>capture</var>’s <a data-link-type="dfn" href="#captured-element-old-width" id="ref-for-captured-element-old-width">old width</a> to <var>originalRect</var>’s <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>. <li data-md> Set <var>capture</var>’s <a data-link-type="dfn" href="#captured-element-old-height" id="ref-for-captured-element-old-height">old height</a> to <var>originalRect</var>’s <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>. <li data-md> Set <var>capture</var>’s <a data-link-type="dfn" href="#captured-element-old-transform" id="ref-for-captured-element-old-transform">old transform</a> to a <a class="css" data-link-type="type" data-xref-type="css-type" href="https://drafts.csswg.org/css-transforms-2/#typedef-transform-function" id="ref-for-typedef-transform-function①"><transform-function></a> that would map <var>element</var>’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-box-4/#border-box" id="ref-for-border-box③">border box</a> from the <a data-link-type="dfn" href="#snapshot-containing-block-origin" id="ref-for-snapshot-containing-block-origin">snapshot containing block origin</a> to its current visual position. <li data-md> Set <var>capture</var>’s <a data-link-type="dfn" href="#captured-element-old-writing-mode" id="ref-for-captured-element-old-writing-mode">old writing-mode</a> to the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#computed-value" id="ref-for-computed-value②">computed value</a> of <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-writing-modes-4/#propdef-writing-mode" id="ref-for-propdef-writing-mode①">writing-mode</a> on <var>element</var>. <li data-md> Set <var>capture</var>’s <a data-link-type="dfn" href="#captured-element-old-direction" id="ref-for-captured-element-old-direction">old direction</a> to the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#computed-value" id="ref-for-computed-value③">computed value</a> of <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-direction" id="ref-for-propdef-direction①">direction</a> on <var>element</var>. <li data-md> Set <var>capture</var>’s <a data-link-type="dfn" href="#captured-element-old-text-orientation" id="ref-for-captured-element-old-text-orientation">old text-orientation</a> to the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#computed-value" id="ref-for-computed-value④">computed value</a> of <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-writing-modes-4/#propdef-text-orientation" id="ref-for-propdef-text-orientation①">text-orientation</a> on <var>element</var>. <li data-md> Set <var>capture</var>’s <a data-link-type="dfn" href="#captured-element-old-mix-blend-mode" id="ref-for-captured-element-old-mix-blend-mode">old mix-blend-mode</a> to the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#computed-value" id="ref-for-computed-value⑤">computed value</a> of <a class="property css" data-link-type="property" href="https://drafts.fxtf.org/compositing-2/#propdef-mix-blend-mode" id="ref-for-propdef-mix-blend-mode②">mix-blend-mode</a> on <var>element</var>. <li data-md> Set <var>capture</var>’s <a data-link-type="dfn" href="#captured-element-old-backdrop-filter" id="ref-for-captured-element-old-backdrop-filter">old backdrop-filter</a> to the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#computed-value" id="ref-for-computed-value⑥">computed value</a> of <a class="property css" data-link-type="property" href="https://drafts.fxtf.org/filter-effects-2/#propdef-backdrop-filter" id="ref-for-propdef-backdrop-filter①">backdrop-filter</a> on <var>element</var>. <li data-md> Set <var>capture</var>’s <a data-link-type="dfn" href="#captured-element-old-color-scheme" id="ref-for-captured-element-old-color-scheme">old color-scheme</a> to the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#computed-value" id="ref-for-computed-value⑦">computed value</a> of <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-color-adjust-1/#propdef-color-scheme" id="ref-for-propdef-color-scheme①">color-scheme</a> on <var>element</var>. <li data-md> Let <var>transitionName</var> be the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#computed-value" id="ref-for-computed-value⑧">computed value</a> of <a class="property css" data-link-type="property" href="#propdef-view-transition-name" id="ref-for-propdef-view-transition-name①②">view-transition-name</a> for <var>element</var>. <li data-md> Set <var>namedElements</var>[<var>transitionName</var>] to <var>capture</var>. </ol> <li data-md> <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#list-iterate" id="ref-for-list-iterate④">For each</a> <var>element</var> in <var>captureElements</var>: <ol> <li data-md> Set <var>element</var>’s <a data-link-type="dfn" href="#captured-in-a-view-transition" id="ref-for-captured-in-a-view-transition⑦">captured in a view transition</a> to false. </ol> </ol> </div> <h4 class="heading settled" data-level="7.3.2" id="capture-new-state-algorithm">7.3.2. <a data-link-type="dfn" href="#capture-the-new-state" id="ref-for-capture-the-new-state①">Capture the new state</a><a class="self-link" href="#capture-new-state-algorithm"></a></h4> <div class="algorithm" data-algorithm="capture the new state"> To <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="capture-the-new-state">capture the new state</dfn> for <code class="idl"><a data-link-type="idl" href="#viewtransition" id="ref-for-viewtransition①⑥">ViewTransition</a></code> <var>transition</var>: <ol> <li data-md> Let <var>document</var> be <var>transition</var>’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’s</a> <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>. <li data-md> Let <var>namedElements</var> be <var>transition</var>’s <a data-link-type="dfn" href="#viewtransition-named-elements" id="ref-for-viewtransition-named-elements②">named elements</a>. <li data-md> Let <var>usedTransitionNames</var> be a new <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#ordered-set" id="ref-for-ordered-set①">set</a> of strings. <li data-md> <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#list-iterate" id="ref-for-list-iterate⑤">For each</a> <var>element</var> of every <a data-link-type="dfn" href="https://drafts.csswg.org/css2/#element" id="ref-for-element①⓪">element</a> that is <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#connected" id="ref-for-connected①">connected</a>, and has a <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-node-document" id="ref-for-concept-node-document②">node document</a> equal to <var>document</var>, in <a href="https://drafts.csswg.org/css2/#painting-order">paint order</a>: <ol> <li data-md> If any <a data-link-type="dfn" href="https://drafts.csswg.org/css-scoping-1/#flat-tree" id="ref-for-flat-tree①">flat tree</a> ancestor of this <var>element</var> <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>, then <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#iteration-continue" id="ref-for-iteration-continue③">continue</a>. <li data-md> Let <var>transitionName</var> be <var>element</var>’s <a data-link-type="dfn" href="#document-scoped-view-transition-name" id="ref-for-document-scoped-view-transition-name①">document-scoped view transition name</a>. <li data-md> If <var>transitionName</var> is <a class="css" data-link-type="maybe" href="#valdef-view-transition-name-none" id="ref-for-valdef-view-transition-name-none③">none</a>, or <var>element</var> is <a data-link-type="dfn" href="https://drafts.csswg.org/css-images-4/#element-not-rendered" id="ref-for-element-not-rendered②">not rendered</a>, then <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#iteration-continue" id="ref-for-iteration-continue④">continue</a>. <li data-md> If <var>element</var> has more than one <a data-link-type="dfn" href="https://drafts.csswg.org/css-break-4/#box-fragment" id="ref-for-box-fragment②">box fragment</a>, then <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#iteration-continue" id="ref-for-iteration-continue⑤">continue</a>. <li data-md> If <var>usedTransitionNames</var> <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#list-contain" id="ref-for-list-contain①">contains</a> <var>transitionName</var>, then return failure. <li data-md> <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#set-append" id="ref-for-set-append①">Append</a> <var>transitionName</var> to <var>usedTransitionNames</var>. <li data-md> If <var>namedElements</var>[<var>transitionName</var>] does not <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#map-exists" id="ref-for-map-exists">exist</a>, then set <var>namedElements</var>[<var>transitionName</var>] to a new <a data-link-type="dfn" href="#captured-element" id="ref-for-captured-element④">captured element</a> struct. Note: We intentionally add this struct to the end of this ordered map. This implies than names which only exist in the new DOM (entry animations) will be painted on top of names only in the old DOM (exit animations) and names in both DOMs (paired animations). This might not be the right layering for all cases. See <a href="https://github.com/w3c/csswg-drafts/issues/8941">issue 8941</a>. <li data-md> Set <var>namedElements</var>[<var>transitionName</var>]'s <a data-link-type="dfn" href="#captured-element-new-element" id="ref-for-captured-element-new-element③">new element</a> to <var>element</var>. </ol> </ol> </div> <h4 class="heading settled" data-level="7.3.3" id="setup-transition-pseudo-elements-algorithm">7.3.3. <a data-link-type="dfn" href="#setup-transition-pseudo-elements" id="ref-for-setup-transition-pseudo-elements⑤">Setup transition pseudo-elements</a><a class="self-link" href="#setup-transition-pseudo-elements-algorithm"></a></h4> <div class="algorithm" data-algorithm="setup transition pseudo-elements"> To <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="setup-transition-pseudo-elements">setup transition pseudo-elements</dfn> for a <code class="idl"><a data-link-type="idl" href="#viewtransition" id="ref-for-viewtransition①⑦">ViewTransition</a></code> <var>transition</var>: Note: This algorithm constructs the pseudo-element tree for the transition, and generates initial styles. The structure of the pseudo-tree is covered at a higher level in <a href="#view-transition-pseudos">§ 3.2 View Transition Pseudo-elements</a>. <ol> <li data-md> Let <var>document</var> be <a data-link-type="dfn" href="https://webidl.spec.whatwg.org/#this" id="ref-for-this①④">this’s</a> <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’s</a> <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>. <li data-md> Set <var>document</var>’s <a data-link-type="dfn" href="#document-show-view-transition-tree" id="ref-for-document-show-view-transition-tree">show view transition tree</a> to true. <li data-md> <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#map-iterate" id="ref-for-map-iterate">For each</a> <var>transitionName</var> → <var>capturedElement</var> of <var>transition</var>’s <a data-link-type="dfn" href="#viewtransition-named-elements" id="ref-for-viewtransition-named-elements③">named elements</a>: <ol> <li data-md> Let <var>group</var> be a new <a class="css" data-link-type="maybe" href="#selectordef-view-transition-group" id="ref-for-selectordef-view-transition-group①⑥">::view-transition-group()</a>, with its <a data-link-type="dfn" href="#view-transition-name" id="ref-for-view-transition-name①②">view transition name</a> set to <var>transitionName</var>. <li data-md> Append <var>group</var> to <var>transition</var>’s <a data-link-type="dfn" href="#viewtransition-transition-root-pseudo-element" id="ref-for-viewtransition-transition-root-pseudo-element④">transition root pseudo-element</a>. <li data-md> Let <var>imagePair</var> be a new <a class="css" data-link-type="maybe" href="#selectordef-view-transition-image-pair" id="ref-for-selectordef-view-transition-image-pair⑥">::view-transition-image-pair()</a>, with its <a data-link-type="dfn" href="#view-transition-name" id="ref-for-view-transition-name①③">view transition name</a> set to <var>transitionName</var>. <li data-md> Append <var>imagePair</var> to <var>group</var>. <li data-md> If <var>capturedElement</var>’s <a data-link-type="dfn" href="#captured-element-old-image" id="ref-for-captured-element-old-image②">old image</a> is not null, then: <ol> <li data-md> Let <var>old</var> be a new <a class="css" data-link-type="maybe" href="#selectordef-view-transition-old" id="ref-for-selectordef-view-transition-old⑧">::view-transition-old()</a>, with its <a data-link-type="dfn" href="#view-transition-name" id="ref-for-view-transition-name①④">view transition name</a> set to <var>transitionName</var>, displaying <var>capturedElement</var>’s <a data-link-type="dfn" href="#captured-element-old-image" id="ref-for-captured-element-old-image③">old image</a> as its <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#replaced-element" id="ref-for-replaced-element②">replaced</a> content. <li data-md> Append <var>old</var> to <var>imagePair</var>. </ol> <li data-md> If <var>capturedElement</var>’s <a data-link-type="dfn" href="#captured-element-new-element" id="ref-for-captured-element-new-element④">new element</a> is not null, then: <ol> <li data-md> Let <var>new</var> be a new <a class="css" data-link-type="maybe" href="#selectordef-view-transition-new" id="ref-for-selectordef-view-transition-new⑧">::view-transition-new()</a>, with its <a data-link-type="dfn" href="#view-transition-name" id="ref-for-view-transition-name①⑤">view transition name</a> set to <var>transitionName</var>. Note: The styling of this pseudo is handled in <a data-link-type="dfn" href="#update-pseudo-element-styles" id="ref-for-update-pseudo-element-styles③">update pseudo-element styles</a>. <li data-md> Append <var>new</var> to <var>imagePair</var>. </ol> <li data-md> If <var>capturedElement</var>’s <a data-link-type="dfn" href="#captured-element-old-image" id="ref-for-captured-element-old-image④">old image</a> is null, then: <ol> <li data-md> <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#assert" id="ref-for-assert">Assert</a>: <var>capturedElement</var>’s <a data-link-type="dfn" href="#captured-element-new-element" id="ref-for-captured-element-new-element⑤">new element</a> is not null. <li data-md> Set <var>capturedElement</var>’s <a data-link-type="dfn" href="#captured-element-image-animation-name-rule" id="ref-for-captured-element-image-animation-name-rule">image animation name rule</a> to a new <code class="idl"><a data-link-type="idl" href="https://drafts.csswg.org/cssom-1/#cssstylerule" id="ref-for-cssstylerule④">CSSStyleRule</a></code> representing the following CSS, and append it to <var>document</var>’s <a data-link-type="dfn" href="#document-dynamic-view-transition-style-sheet" id="ref-for-document-dynamic-view-transition-style-sheet⑤">dynamic view transition style sheet</a>: <pre class="highlight">:root:<c- nf>:view-transition-new</c-><c- p>(</c-><var>transitionName</var><c- p>)</c-> <c- p>{</c-> <c- k>animation-name</c-><c- p>:</c-> -ua-view-transition-fade-in<c- p>;</c-> <c- p>}</c-> </pre> Note: The above code example contains variables to be replaced. </ol> <li data-md> If <var>capturedElement</var>’s <a data-link-type="dfn" href="#captured-element-new-element" id="ref-for-captured-element-new-element⑥">new element</a> is null, then: <ol> <li data-md> <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#assert" id="ref-for-assert①">Assert</a>: <var>capturedElement</var>’s <a data-link-type="dfn" href="#captured-element-old-image" id="ref-for-captured-element-old-image⑤">old image</a> is not null. <li data-md> Set <var>capturedElement</var>’s <a data-link-type="dfn" href="#captured-element-image-animation-name-rule" id="ref-for-captured-element-image-animation-name-rule①">image animation name rule</a> to a new <code class="idl"><a data-link-type="idl" href="https://drafts.csswg.org/cssom-1/#cssstylerule" id="ref-for-cssstylerule⑤">CSSStyleRule</a></code> representing the following CSS, and append it to <var>document</var>’s <a data-link-type="dfn" href="#document-dynamic-view-transition-style-sheet" id="ref-for-document-dynamic-view-transition-style-sheet⑥">dynamic view transition style sheet</a>: <pre class="highlight">:root:<c- nf>:view-transition-old</c-><c- p>(</c-><var>transitionName</var><c- p>)</c-> <c- p>{</c-> <c- k>animation-name</c-><c- p>:</c-> -ua-view-transition-fade-out<c- p>;</c-> <c- p>}</c-> </pre> Note: The above code example contains variables to be replaced. </ol> <li data-md> If both of <var>capturedElement</var>’s <a data-link-type="dfn" href="#captured-element-old-image" id="ref-for-captured-element-old-image⑥">old image</a> and <a data-link-type="dfn" href="#captured-element-new-element" id="ref-for-captured-element-new-element⑦">new element</a> are not null, then: <ol> <li data-md> Let <var>transform</var> be <var>capturedElement</var>’s <a data-link-type="dfn" href="#captured-element-old-transform" id="ref-for-captured-element-old-transform①">old transform</a>. <li data-md> Let <var>width</var> be <var>capturedElement</var>’s <a data-link-type="dfn" href="#captured-element-old-width" id="ref-for-captured-element-old-width①">old width</a>. <li data-md> Let <var>height</var> be <var>capturedElement</var>’s <a data-link-type="dfn" href="#captured-element-old-height" id="ref-for-captured-element-old-height①">old height</a>. <li data-md> Let <var>backdropFilter</var> be <var>capturedElement</var>’s <a data-link-type="dfn" href="#captured-element-old-backdrop-filter" id="ref-for-captured-element-old-backdrop-filter①">old backdrop-filter</a>. <li data-md> Set <var>capturedElement</var>’s <a data-link-type="dfn" href="#captured-element-group-keyframes" id="ref-for-captured-element-group-keyframes">group keyframes</a> to a new <code class="idl"><a data-link-type="idl" href="https://drafts.csswg.org/css-animations-1/#csskeyframesrule" id="ref-for-csskeyframesrule①">CSSKeyframesRule</a></code> representing the following CSS, and append it to <var>document</var>’s <a data-link-type="dfn" href="#document-dynamic-view-transition-style-sheet" id="ref-for-document-dynamic-view-transition-style-sheet⑦">dynamic view transition style sheet</a>: <pre class="highlight"><c- n>@keyframes</c-> -ua-view-transition-group-anim-<var>transitionName</var> <c- p>{</c-> from <c- p>{</c-> <c- k>transform</c-><c- p>:</c-> <var>transform</var><c- p>;</c-> <c- k>width</c-><c- p>:</c-> <var>width</var><c- p>;</c-> <c- k>height</c-><c- p>:</c-> <var>height</var><c- p>;</c-> <c- k>backdrop-filter</c-><c- p>:</c-> <var>backdropFilter</var><c- p>;</c-> <c- p>}</c-> <c- p>}</c-> </pre> Note: The above code example contains variables to be replaced. <li data-md> Set <var>capturedElement</var>’s <a data-link-type="dfn" href="#captured-element-group-animation-name-rule" id="ref-for-captured-element-group-animation-name-rule">group animation name rule</a> to a new <code class="idl"><a data-link-type="idl" href="https://drafts.csswg.org/cssom-1/#cssstylerule" id="ref-for-cssstylerule⑥">CSSStyleRule</a></code> representing the following CSS, and append it to <var>document</var>’s <a data-link-type="dfn" href="#document-dynamic-view-transition-style-sheet" id="ref-for-document-dynamic-view-transition-style-sheet⑧">dynamic view transition style sheet</a>: <pre class="highlight">:root:<c- nf>:view-transition-group</c-><c- p>(</c-><var>transitionName</var><c- p>)</c-> <c- p>{</c-> <c- k>animation-name</c-><c- p>:</c-> -ua-view-transition-group-anim-<var>transitionName</var><c- p>;</c-> <c- p>}</c-> </pre> Note: The above code example contains variables to be replaced. <li data-md> Set <var>capturedElement</var>’s <a data-link-type="dfn" href="#captured-element-image-pair-isolation-rule" id="ref-for-captured-element-image-pair-isolation-rule">image pair isolation rule</a> to a new <code class="idl"><a data-link-type="idl" href="https://drafts.csswg.org/cssom-1/#cssstylerule" id="ref-for-cssstylerule⑦">CSSStyleRule</a></code> representing the following CSS, and append it to <var>document</var>’s <a data-link-type="dfn" href="#document-dynamic-view-transition-style-sheet" id="ref-for-document-dynamic-view-transition-style-sheet⑨">dynamic view transition style sheet</a>: <pre class="highlight">:root:<c- nf>:view-transition-image-pair</c-><c- p>(</c-><var>transitionName</var><c- p>)</c-> <c- p>{</c-> <c- k>isolation</c-><c- p>:</c-> isolate<c- p>;</c-> <c- p>}</c-> </pre> Note: The above code example contains variables to be replaced. <li data-md> Set <var>capturedElement</var>’s <a data-link-type="dfn" href="#captured-element-image-animation-name-rule" id="ref-for-captured-element-image-animation-name-rule②">image animation name rule</a> to a new <code class="idl"><a data-link-type="idl" href="https://drafts.csswg.org/cssom-1/#cssstylerule" id="ref-for-cssstylerule⑧">CSSStyleRule</a></code> representing the following CSS, and append it to <var>document</var>’s <a data-link-type="dfn" href="#document-dynamic-view-transition-style-sheet" id="ref-for-document-dynamic-view-transition-style-sheet①⓪">dynamic view transition style sheet</a>: <pre class="highlight">:root:<c- nf>:view-transition-old</c-><c- p>(</c-><var>transitionName</var><c- p>)</c-> <c- p>{</c-> <c- k>animation-name</c-><c- p>:</c-> -ua-view-transition-fade-out<c- p>,</c-> -ua-mix-blend-mode-plus-lighter<c- p>;</c-> <c- p>}</c-> :root:<c- nf>:view-transition-new</c-><c- p>(</c-><var>transitionName</var><c- p>)</c-> <c- p>{</c-> <c- k>animation-name</c-><c- p>:</c-> -ua-view-transition-fade-in<c- p>,</c-> -ua-mix-blend-mode-plus-lighter<c- p>;</c-> <c- p>}</c-> </pre> Note: The above code example contains variables to be replaced. Note: <a class="css" data-link-type="propdesc" href="https://drafts.fxtf.org/compositing-2/#propdef-mix-blend-mode" id="ref-for-propdef-mix-blend-mode③">mix-blend-mode: plus-lighter</a> ensures that the blending of identical pixels from the old and new images results in the same color value as those pixels, and achieves a “correct” cross-fade. </ol> </ol> </ol> </div> <h3 class="heading settled" data-level="7.4" id="call-dom-update-callback-algorithm">7.4. <a data-link-type="dfn" href="#call-the-update-callback" id="ref-for-call-the-update-callback①">Call the update callback</a><a class="self-link" href="#call-dom-update-callback-algorithm"></a></h3> <div class="algorithm" data-algorithm="call the update callback"> To <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="call-the-update-callback">call the update callback</dfn> of a <code class="idl"><a data-link-type="idl" href="#viewtransition" id="ref-for-viewtransition①⑧">ViewTransition</a></code> <var>transition</var>: Note: This is guaranteed to happen for every <code class="idl"><a data-link-type="idl" href="#viewtransition" id="ref-for-viewtransition①⑨">ViewTransition</a></code>, even if the transition is <a data-link-type="dfn" href="#skip-the-view-transition" id="ref-for-skip-the-view-transition①⓪">skipped</a>. The reasons for this are discussed in <a href="#transitions-as-enhancements">§ 1.4 Transitions as an enhancement</a>. <ol> <li data-md> <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#assert" id="ref-for-assert②">Assert</a>: <var>transition</var>’s <a data-link-type="dfn" href="#viewtransition-phase" id="ref-for-viewtransition-phase⑦">phase</a> is "<code>done</code>", or before "<code>update-callback-called</code>". <li data-md> If <var>transition</var>’s <a data-link-type="dfn" href="#viewtransition-phase" id="ref-for-viewtransition-phase⑧">phase</a> is not "<code>done</code>", then set <var>transition</var>’s phase to "<code>update-callback-called</code>". <li data-md> Let <var>callbackPromise</var> be null. <li data-md> If <var>transition</var>’s <a data-link-type="dfn" href="#viewtransition-update-callback" id="ref-for-viewtransition-update-callback②">update callback</a> is null, then set <var>callbackPromise</var> to <a data-link-type="dfn" href="https://webidl.spec.whatwg.org/#a-promise-resolved-with" id="ref-for-a-promise-resolved-with">a promise resolved with</a> undefined, in <var>transition</var>’s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-relevant-realm" id="ref-for-concept-relevant-realm⑧">relevant Realm</a>. <li data-md> Otherwise, set <var>callbackPromise</var> to the result of <a data-link-type="dfn" href="https://webidl.spec.whatwg.org/#invoke-a-callback-function" id="ref-for-invoke-a-callback-function">invoking</a> <var>transition</var>’s <a data-link-type="dfn" href="#viewtransition-update-callback" id="ref-for-viewtransition-update-callback③">update callback</a>. <li data-md> Let <var>fulfillSteps</var> be to following steps: <ol> <li data-md> <a data-link-type="dfn" href="https://webidl.spec.whatwg.org/#resolve" id="ref-for-resolve①">Resolve</a> <var>transition</var>’s <a data-link-type="dfn" href="#viewtransition-update-callback-done-promise" id="ref-for-viewtransition-update-callback-done-promise③">update callback done promise</a> with undefined. <li data-md> <a data-link-type="dfn" href="#activate-view-transition" id="ref-for-activate-view-transition">Activate</a> <var>transition</var>. </ol> <li data-md> Let <var>rejectSteps</var> be the following steps given <var>reason</var>: <ol> <li data-md> <a data-link-type="dfn" href="https://webidl.spec.whatwg.org/#reject" id="ref-for-reject">Reject</a> <var>transition</var>’s <a data-link-type="dfn" href="#viewtransition-update-callback-done-promise" id="ref-for-viewtransition-update-callback-done-promise④">update callback done promise</a> with <var>reason</var>. <li data-md> If <var>transition</var>’s <a data-link-type="dfn" href="#viewtransition-phase" id="ref-for-viewtransition-phase①⓪">phase</a> is "<code>done</code>", then return. Note: This happens if <var>transition</var> was <a data-link-type="dfn" href="#skip-the-view-transition" id="ref-for-skip-the-view-transition①①">skipped</a> before this point. <li data-md> <a data-link-type="dfn" href="https://webidl.spec.whatwg.org/#mark-a-promise-as-handled" id="ref-for-mark-a-promise-as-handled③">Mark as handled</a> <var>transition</var>’s <a data-link-type="dfn" href="#viewtransition-ready-promise" id="ref-for-viewtransition-ready-promise③">ready promise</a>. Note: <var>transition</var>’s <a data-link-type="dfn" href="#viewtransition-update-callback-done-promise" id="ref-for-viewtransition-update-callback-done-promise⑤">update callback done promise</a> will provide the <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/indices.html#event-unhandledrejection" id="ref-for-event-unhandledrejection②">unhandledrejection</a></code>. This step avoids a duplicate. <li data-md> <a data-link-type="dfn" href="#skip-the-view-transition" id="ref-for-skip-the-view-transition①②">Skip the view transition</a> <var>transition</var> with <var>reason</var>. </ol> <li data-md> <a data-link-type="dfn" href="https://webidl.spec.whatwg.org/#dfn-perform-steps-once-promise-is-settled" id="ref-for-dfn-perform-steps-once-promise-is-settled">React</a> to <var>callbackPromise</var> with <var>fulfillSteps</var> and <var>rejectSteps</var>. <li data-md> To skip a transition after a timeout, the user agent may perform the following steps <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/infrastructure.html#in-parallel" id="ref-for-in-parallel">in parallel</a>: <ol> <li data-md> Wait for an implementation-defined <a data-link-type="dfn" href="https://w3c.github.io/hr-time/#dfn-duration" id="ref-for-dfn-duration">duration</a>. <li data-md> <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#queue-a-global-task" id="ref-for-queue-a-global-task①">Queue a global task</a> on the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#dom-manipulation-task-source" id="ref-for-dom-manipulation-task-source①">DOM manipulation task source</a>, given <var>transition</var>’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>, to perform the following steps: <ol> <li data-md> If <var>transition</var>’s <a data-link-type="dfn" href="#viewtransition-phase" id="ref-for-viewtransition-phase①①">phase</a> is "<code>done</code>", then return. Note: This happens if <var>transition</var> was <a data-link-type="dfn" href="#skip-the-view-transition" id="ref-for-skip-the-view-transition①③">skipped</a> before this point. <li data-md> <a data-link-type="dfn" href="#skip-the-view-transition" id="ref-for-skip-the-view-transition①④">Skip</a> <var>transition</var> with a "<code class="idl"><a data-link-type="idl" href="https://webidl.spec.whatwg.org/#timeouterror" id="ref-for-timeouterror">TimeoutError</a></code>" <code class="idl"><a data-link-type="idl" href="https://webidl.spec.whatwg.org/#idl-DOMException" id="ref-for-idl-DOMException⑥">DOMException</a></code>. </ol> </ol> </ol> </div> <h3 class="heading settled" data-level="7.5" id="skip-the-view-transition-algorithm">7.5. <a data-link-type="dfn" href="#skip-the-view-transition" id="ref-for-skip-the-view-transition①⑤">Skip the view transition</a><a class="self-link" href="#skip-the-view-transition-algorithm"></a></h3> <div class="algorithm" data-algorithm="skip the view transition"> To <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="skip-the-view-transition">skip the view transition</dfn> for <code class="idl"><a data-link-type="idl" href="#viewtransition" id="ref-for-viewtransition②⓪">ViewTransition</a></code> <var>transition</var> with reason <var>reason</var>: <ol> <li data-md> Let <var>document</var> be <var>transition</var>’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’s</a> <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>. <li data-md> <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#assert" id="ref-for-assert③">Assert</a>: <var>transition</var>’s <a data-link-type="dfn" href="#viewtransition-phase" id="ref-for-viewtransition-phase①②">phase</a> is not "<code>done</code>". <li data-md> If <var>transition</var>’s <a data-link-type="dfn" href="#viewtransition-phase" id="ref-for-viewtransition-phase①③">phase</a> is before "<code>update-callback-called</code>", then <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#queue-a-global-task" id="ref-for-queue-a-global-task②">queue a global task</a> on the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#dom-manipulation-task-source" id="ref-for-dom-manipulation-task-source②">DOM manipulation task source</a>, given <var>transition</var>’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>, to <a data-link-type="dfn" href="#call-the-update-callback" id="ref-for-call-the-update-callback②">call the update callback</a> of <var>transition</var>. <li data-md> Set <a data-link-type="dfn" href="#document-rendering-suppression-for-view-transitions" id="ref-for-document-rendering-suppression-for-view-transitions③">rendering suppression for view transitions</a> to false. <li data-md> If <var>document</var>’s <a data-link-type="dfn" href="#document-active-view-transition" id="ref-for-document-active-view-transition①①">active view transition</a> is <var>transition</var>, <a data-link-type="dfn" href="#clear-view-transition" id="ref-for-clear-view-transition①">Clear view transition</a> <var>transition</var>. <li data-md> Set <var>transition</var>’s <a data-link-type="dfn" href="#viewtransition-phase" id="ref-for-viewtransition-phase①④">phase</a> to "<code>done</code>". <li data-md> <a data-link-type="dfn" href="https://webidl.spec.whatwg.org/#reject" id="ref-for-reject①">Reject</a> <var>transition</var>’s <a data-link-type="dfn" href="#viewtransition-ready-promise" id="ref-for-viewtransition-ready-promise④">ready promise</a> with <var>reason</var>. Note: The <a data-link-type="dfn" href="#viewtransition-ready-promise" id="ref-for-viewtransition-ready-promise⑤">ready promise</a> may already be resolved at this point, if <code class="idl"><a data-link-type="idl" href="#dom-viewtransition-skiptransition" id="ref-for-dom-viewtransition-skiptransition⑤">skipTransition()</a></code> is called after we start animating. In that case, this step is a no-op. <li data-md> <a data-link-type="dfn" href="https://webidl.spec.whatwg.org/#resolve" id="ref-for-resolve②">Resolve</a> <var>transition</var>’s <a data-link-type="dfn" href="#viewtransition-finished-promise" id="ref-for-viewtransition-finished-promise①">finished promise</a> with the result of <a data-link-type="dfn" href="https://webidl.spec.whatwg.org/#dfn-perform-steps-once-promise-is-settled" id="ref-for-dfn-perform-steps-once-promise-is-settled①">reacting</a> to <var>transition</var>’s <a data-link-type="dfn" href="#viewtransition-update-callback-done-promise" id="ref-for-viewtransition-update-callback-done-promise⑥">update callback done promise</a>: <ul> <li data-md> If the promise was fulfilled, then return undefined. </ul> Note: Since the rejection of <var>transition</var>’s <a data-link-type="dfn" href="#viewtransition-update-callback-done-promise" id="ref-for-viewtransition-update-callback-done-promise⑦">update callback done promise</a> isn’t explicitly handled here, if <var>transition</var>’s update callback done promise rejects, then <var>transition</var>’s <a data-link-type="dfn" href="#viewtransition-finished-promise" id="ref-for-viewtransition-finished-promise②">finished promise</a> will reject with the same reason. </ol> </div> <h3 class="heading settled" data-level="7.6" id="page-visibility-change-steps">7.6. View transition page-visibility change steps<a class="self-link" href="#page-visibility-change-steps"></a></h3> <div class="algorithm" data-algorithm="view transition page-visibility change steps"> The <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="view-transition-page-visibility-change-steps">view transition page-visibility change steps</dfn> given <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document" id="ref-for-document①⓪">Document</a></code> <var>document</var> are: <ol> <li data-md> <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#queue-a-global-task" id="ref-for-queue-a-global-task③">Queue a global task</a> on the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#dom-manipulation-task-source" id="ref-for-dom-manipulation-task-source③">DOM manipulation task source</a>, given <var>document</var>’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>, to perform the following steps: <ol> <li data-md> If <var>document</var>’s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/interaction.html#visibility-state" id="ref-for-visibility-state①">visibility state</a> is "<code>hidden</code>", then: <ol> <li data-md> If <var>document</var>’s <a data-link-type="dfn" href="#document-active-view-transition" id="ref-for-document-active-view-transition①②">active view transition</a> is not null, then <a data-link-type="dfn" href="#skip-the-view-transition" id="ref-for-skip-the-view-transition①⑥">skip</a> <var>document</var>’s active view transition with an "<code class="idl"><a data-link-type="idl" href="https://webidl.spec.whatwg.org/#invalidstateerror" id="ref-for-invalidstateerror④">InvalidStateError</a></code>" <code class="idl"><a data-link-type="idl" href="https://webidl.spec.whatwg.org/#idl-DOMException" id="ref-for-idl-DOMException⑦">DOMException</a></code>. </ol> <li data-md> Otherwise, <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#assert" id="ref-for-assert④">assert</a>: <a data-link-type="dfn" href="#document-active-view-transition" id="ref-for-document-active-view-transition①④">active view transition</a> is null. </ol> </ol> Note: this is called from the HTML spec. </div> <h3 class="heading settled" data-level="7.7" id="capture-the-image-algorithm">7.7. <a data-link-type="dfn" href="#capture-the-image" id="ref-for-capture-the-image⑤">Capture the image</a><a class="self-link" href="#capture-the-image-algorithm"></a></h3> <div class="algorithm" data-algorithm="capture the image"> To <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="capture the image|capturing the image" data-noexport id="capture-the-image">capture the image</dfn> given an <a data-link-type="dfn" href="https://drafts.csswg.org/css2/#element" id="ref-for-element①①">element</a> <var>element</var>, perform the following steps. They return an image. <ol> <li data-md> If <var>element</var> is the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#document-element" id="ref-for-document-element⑨">document element</a>, then: <ol> <li data-md> Render the region of document (including its <a data-link-type="dfn" href="https://drafts.csswg.org/css-backgrounds-3/#canvas-background" id="ref-for-canvas-background">canvas background</a> and any <a data-link-type="dfn" href="https://drafts.csswg.org/css-position-4/#document-top-layer" id="ref-for-document-top-layer①">top layer</a> content) that intersects the <a data-link-type="dfn" href="#snapshot-containing-block" id="ref-for-snapshot-containing-block①①">snapshot containing block</a>, on a transparent canvas the size of the snapshot containing block, following the <a data-link-type="dfn" href="#capture-rendering-characteristics" id="ref-for-capture-rendering-characteristics">capture rendering characteristics</a>, and these additional characteristics: <ul> <li data-md> Areas outside <var>element</var>’s <a data-link-type="dfn" href="https://drafts.csswg.org/cssom-view-1/#scrolling-box" id="ref-for-scrolling-box">scrolling box</a> should be rendered as if they were scrolled to, without moving or resizing the <a data-link-type="dfn" href="https://drafts.csswg.org/cssom-view-1/#layout-viewport" id="ref-for-layout-viewport">layout viewport</a>. This must not trigger events related to scrolling or resizing, such as <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/IntersectionObserver/#intersectionobserver" id="ref-for-intersectionobserver">IntersectionObserver</a></code>s. <figure> <img alt="A phone browser window, showing a URL bar, a fixed-position element directly beneath it, and some page content beneath that. A scroll bar indicates the page has been scrolled significantly." height="297" src="diagrams/phone-browser-with-url.svg" width="202"> <img alt="The captured snapshot. It shows that content beneath the URL bar was included in the capture." height="297" src="diagrams/phone-browser-without-url.svg" width="202"> <figcaption> An example of what the user sees compared to the captured snapshot. This example assumes the root is the only element with a transition name. </figcaption> </figure> <li data-md> Areas that cannot be scrolled to (i.e. they are out of scrolling bounds), should render the <a data-link-type="dfn" href="https://drafts.csswg.org/css-backgrounds-3/#canvas-background" id="ref-for-canvas-background①">canvas background</a>. <figure> <img alt="A phone browser window, showing a URL bar, and some content beneath. A scroll bar indicates the page is scrolled to the top." height="297" src="diagrams/phone-browser-scrolled-to-top-with-url.svg" width="202"> <img alt="The captured snapshot. It shows the area underneath the URL bar as the same color as the rest of the document." height="297" src="diagrams/phone-browser-scrolled-to-top-without-url.svg" width="202"> <figcaption> An example of what the user sees compared to the captured snapshot. This example assumes the root is the only element with a transition name. </figcaption> </figure> </ul> <li data-md> Return this canvas as an image. The natural size of the image is equal to the <a data-link-type="dfn" href="#snapshot-containing-block" id="ref-for-snapshot-containing-block①③">snapshot containing block</a>. </ol> <li data-md> Otherwise: <ol> <li data-md> Render <var>element</var> and its <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-tree-descendant" id="ref-for-concept-tree-descendant②">descendants</a>, at the same size it appears in its <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-node-document" id="ref-for-concept-node-document③">node document</a>, over an infinite transparent canvas, following the <a data-link-type="dfn" href="#capture-rendering-characteristics" id="ref-for-capture-rendering-characteristics①">capture rendering characteristics</a>. <li data-md> Return the portion of this canvas that includes <var>element</var>’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-overflow-3/#ink-overflow-rectangle" id="ref-for-ink-overflow-rectangle">ink overflow rectangle</a> as an image. The <a data-link-type="dfn" href="https://drafts.csswg.org/css-images-3/#natural-dimensions" id="ref-for-natural-dimensions②">natural dimensions</a> of this image must be those of its <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-4/#principal-box" id="ref-for-principal-box①">principal</a> <a data-link-type="dfn" href="https://drafts.csswg.org/css-box-4/#border-box" id="ref-for-border-box④">border box</a>, and its origin must correspond to that border box’s origin, such that the image represents the contents of this border box and any captured <a data-link-type="dfn" href="https://drafts.csswg.org/css-overflow-3/#ink-overflow" id="ref-for-ink-overflow">ink overflow</a> is represented outside these bounds. Note: When this image is rendered as a <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#replaced-element" id="ref-for-replaced-element③">replaced element</a> at its <a data-link-type="dfn" href="https://drafts.csswg.org/css-images-3/#natural-size" id="ref-for-natural-size">natural size</a>, it will display with the size and contents of 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>, with any captured <a data-link-type="dfn" href="https://drafts.csswg.org/css-overflow-3/#ink-overflow" id="ref-for-ink-overflow①">ink overflow</a> overflowing its <a data-link-type="dfn" href="https://drafts.csswg.org/css-box-4/#content-box" id="ref-for-content-box">content box</a>. </ol> </ol> </div> <h4 class="heading settled" data-level="7.7.1" id="capture-rendering-characteristics-algorithm">7.7.1. <a data-link-type="dfn" href="#capture-rendering-characteristics" id="ref-for-capture-rendering-characteristics②">Capture rendering characteristics</a><a class="self-link" href="#capture-rendering-characteristics-algorithm"></a></h4> <div class="algorithm" data-algorithm="capture rendering characteristics"> The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="capture-rendering-characteristics">capture rendering characteristics</dfn> are as follows: <ul> <li data-md> If the referenced element has a transform applied to it (or its ancestors), then the transform is ignored. Note: This transform is applied to the snapshot using the <code>transform</code> property of the associated ::view-transition-group pseudo-element. <li data-md> Effects applied on the element and its descendants, such as <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> and <a class="property css" data-link-type="property" href="https://drafts.fxtf.org/filter-effects-1/#propdef-filter" id="ref-for-propdef-filter①">filter</a>, are applied to the capture. Effects applied to the element from its ancestors are ignored. <li data-md> Implementations may clip the rendered contents if the <a data-link-type="dfn" href="https://drafts.csswg.org/css-overflow-3/#ink-overflow-rectangle" id="ref-for-ink-overflow-rectangle①">ink overflow rectangle</a> exceeds some <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#implementation-defined" id="ref-for-implementation-defined①">implementation-defined</a> maximum. However, the captured image should include, at the very least, the contents of <var>element</var> that intersect with the <a data-link-type="dfn" href="#snapshot-containing-block" id="ref-for-snapshot-containing-block①④">snapshot containing block</a>. Implementations may adjust the rasterization quality to account for elements with a large <a data-link-type="dfn" href="https://drafts.csswg.org/css-overflow-3/#ink-overflow-region" id="ref-for-ink-overflow-region">ink overflow area</a> that are transformed into view. <li data-md> Implementations may also adjust the rasterization quality for elements whose <a data-link-type="dfn" href="https://drafts.csswg.org/css-overflow-3/#ink-overflow-rectangle" id="ref-for-ink-overflow-rectangle②">ink overflow rectangle</a> does not intersect with the <a data-link-type="dfn" href="#snapshot-containing-block" id="ref-for-snapshot-containing-block①⑤">snapshot containing block</a>. To avoid a broken experience if the element ends up becoming visible, the captured image should include, at the very least, some low-quality representation of the contents rather than transparent pixels. Note: This allows efficiency in resource usage and rasterization performance for elements that are away from the viewport and might not become visible at all, while maintaining a visual effect close enough to the author’s intent. <li data-md> <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#list-iterate" id="ref-for-list-iterate⑥">For each</a> <var>descendant</var> of <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-shadow-including-descendant" id="ref-for-concept-shadow-including-descendant">shadow-including descendant</a> <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#element" id="ref-for-element①②">Element</a></code> and <a data-link-type="dfn" href="https://drafts.csswg.org/selectors-4/#pseudo-element" id="ref-for-pseudo-element①⓪">pseudo-element</a> of <var>element</var>, if <var>descendant</var> is <a data-link-type="dfn" href="#captured-in-a-view-transition" id="ref-for-captured-in-a-view-transition⑧">captured in a view transition</a>, then skip painting <var>descendant</var>. Note: This is necessary since the descendant will generate its own snapshot which will be displayed and animated independently. </ul> </div> <h3 class="heading settled" data-level="7.8" id="handle-transition-frame-algorithm">7.8. <a data-link-type="dfn" href="#handle-transition-frame" id="ref-for-handle-transition-frame①">Handle transition frame</a><a class="self-link" href="#handle-transition-frame-algorithm"></a></h3> <div class="algorithm" data-algorithm="handle transition frame"> To <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="handle-transition-frame">handle transition frame</dfn> given a <code class="idl"><a data-link-type="idl" href="#viewtransition" id="ref-for-viewtransition②①">ViewTransition</a></code> <var>transition</var>: <ol> <li data-md> Let <var>document</var> be <var>transition</var>’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’s</a> <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>. <li data-md> Let <var>hasActiveAnimations</var> be a boolean, initially false. <li data-md> <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#list-iterate" id="ref-for-list-iterate⑦">For each</a> <var>element</var> of <var>transition</var>’s <a data-link-type="dfn" href="#viewtransition-transition-root-pseudo-element" id="ref-for-viewtransition-transition-root-pseudo-element⑤">transition root pseudo-element</a>’s <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-tree-inclusive-descendant" id="ref-for-concept-tree-inclusive-descendant①">inclusive descendants</a>: <ol> <li data-md> For each <var>animation</var> whose <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#timeline" id="ref-for-timeline①">timeline</a> is a <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#document-timeline" id="ref-for-document-timeline">document timeline</a> associated with <var>document</var>, and contains at least one <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-associated-effect" id="ref-for-animation-associated-effect">associated effect</a> whose <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#keyframe-effect-effect-target" id="ref-for-keyframe-effect-effect-target">effect target</a> is <var>element</var>, set <var>hasActiveAnimations</var> to true if any of the following conditions is true: <ul> <li data-md> <var>animation</var>’s <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#animation-play-state" id="ref-for-animation-play-state">play state</a> is <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#play-state-paused" id="ref-for-play-state-paused">paused</a> or <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#play-state-running" id="ref-for-play-state-running">running</a>. <li data-md> <var>document</var>’s <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations-1/#pending-animation-event-queue" id="ref-for-pending-animation-event-queue">pending animation event queue</a> has any events associated with <var>animation</var>. </ul> </ol> <li data-md> If <var>hasActiveAnimations</var> is false: <ol> <li data-md> Set <var>transition</var>’s <a data-link-type="dfn" href="#viewtransition-phase" id="ref-for-viewtransition-phase①⑤">phase</a> to "<code>done</code>". <li data-md> <a data-link-type="dfn" href="#clear-view-transition" id="ref-for-clear-view-transition②">Clear view transition</a> <var>transition</var>. <li data-md> <a data-link-type="dfn" href="https://webidl.spec.whatwg.org/#resolve" id="ref-for-resolve③">Resolve</a> <var>transition</var>’s <a data-link-type="dfn" href="#viewtransition-finished-promise" id="ref-for-viewtransition-finished-promise③">finished promise</a>. <li data-md> Return. </ol> <li data-md> If <var>transition</var>’s <a data-link-type="dfn" href="#viewtransition-initial-snapshot-containing-block-size" id="ref-for-viewtransition-initial-snapshot-containing-block-size②">initial snapshot containing block size</a> is not equal to the <a data-link-type="dfn" href="#snapshot-containing-block-size" id="ref-for-snapshot-containing-block-size④">snapshot containing block size</a>, then <a data-link-type="dfn" href="#skip-the-view-transition" id="ref-for-skip-the-view-transition①⑦">skip the view transition</a> for <var>transition</var> with an "<code class="idl"><a data-link-type="idl" href="https://webidl.spec.whatwg.org/#invalidstateerror" id="ref-for-invalidstateerror⑤">InvalidStateError</a></code>" <code class="idl"><a data-link-type="idl" href="https://webidl.spec.whatwg.org/#idl-DOMException" id="ref-for-idl-DOMException⑧">DOMException</a></code> in <var>transition</var>’s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-relevant-realm" id="ref-for-concept-relevant-realm⑨">relevant Realm</a>, and return. <li data-md> <a data-link-type="dfn" href="#update-pseudo-element-styles" id="ref-for-update-pseudo-element-styles④">Update pseudo-element styles</a> for <var>transition</var>. If failure is returned, then <a data-link-type="dfn" href="#skip-the-view-transition" id="ref-for-skip-the-view-transition①⑧">skip the view transition</a> for <var>transition</var> with an "<code class="idl"><a data-link-type="idl" href="https://webidl.spec.whatwg.org/#invalidstateerror" id="ref-for-invalidstateerror⑥">InvalidStateError</a></code>" <code class="idl"><a data-link-type="idl" href="https://webidl.spec.whatwg.org/#idl-DOMException" id="ref-for-idl-DOMException⑨">DOMException</a></code> in <var>transition</var>’s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-relevant-realm" id="ref-for-concept-relevant-realm①⓪">relevant Realm</a>, and return. Note: The above implies that a change in incoming element’s size or position will cause a new keyframe to be generated. This can cause a visual jump. We could retarget smoothly but don’t have a use-case to justify the complexity. See <a href="https://github.com/w3c/csswg-drafts/issues/7813">issue 7813</a> for details. </ol> </div> <h3 class="heading settled" data-level="7.9" id="style-transition-pseudo-elements-algorithm">7.9. <a data-link-type="dfn" href="#update-pseudo-element-styles" id="ref-for-update-pseudo-element-styles⑤">Update pseudo-element styles</a><a class="self-link" href="#style-transition-pseudo-elements-algorithm"></a></h3> <div class="algorithm" data-algorithm="update pseudo-element styles"> To <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="update-pseudo-element-styles">update pseudo-element styles</dfn> for a <code class="idl"><a data-link-type="idl" href="#viewtransition" id="ref-for-viewtransition②②">ViewTransition</a></code> <var>transition</var>: <ol> <li data-md> <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#map-iterate" id="ref-for-map-iterate①">For each</a> <var>transitionName</var> → <var>capturedElement</var> of <var>transition</var>’s <a data-link-type="dfn" href="#viewtransition-named-elements" id="ref-for-viewtransition-named-elements④">named elements</a>: <ol> <li data-md> Let <var>width</var>, <var>height</var>, <var>transform</var>, <var>writingMode</var>, <var>direction</var>, <var>textOrientation</var>, <var>mixBlendMode</var>, <var>backdropFilter</var> and <var>colorScheme</var> be null. <li data-md> If <var>capturedElement</var>’s <a data-link-type="dfn" href="#captured-element-new-element" id="ref-for-captured-element-new-element⑧">new element</a> is null, then: <ol> <li data-md> Set <var>width</var> to <var>capturedElement</var>’s <a data-link-type="dfn" href="#captured-element-old-width" id="ref-for-captured-element-old-width②">old width</a>. <li data-md> Set <var>height</var> to <var>capturedElement</var>’s <a data-link-type="dfn" href="#captured-element-old-height" id="ref-for-captured-element-old-height②">old height</a>. <li data-md> Set <var>transform</var> to <var>capturedElement</var>’s <a data-link-type="dfn" href="#captured-element-old-transform" id="ref-for-captured-element-old-transform②">old transform</a>. <li data-md> Set <var>writingMode</var> to <var>capturedElement</var>’s <a data-link-type="dfn" href="#captured-element-old-writing-mode" id="ref-for-captured-element-old-writing-mode①">old writing-mode</a>. <li data-md> Set <var>direction</var> to <var>capturedElement</var>’s <a data-link-type="dfn" href="#captured-element-old-direction" id="ref-for-captured-element-old-direction①">old direction</a>. <li data-md> Set <var>textOrientation</var> to <var>capturedElement</var>’s <a data-link-type="dfn" href="#captured-element-old-text-orientation" id="ref-for-captured-element-old-text-orientation①">old text-orientation</a>. <li data-md> Set <var>mixBlendMode</var> to <var>capturedElement</var>’s <a data-link-type="dfn" href="#captured-element-old-mix-blend-mode" id="ref-for-captured-element-old-mix-blend-mode①">old mix-blend-mode</a>. <li data-md> Set <var>backdropFilter</var> to <var>capturedElement</var>’s <a data-link-type="dfn" href="#captured-element-old-backdrop-filter" id="ref-for-captured-element-old-backdrop-filter②">old backdrop-filter</a>. <li data-md> Set <var>colorScheme</var> to <var>capturedElement</var>’s <a data-link-type="dfn" href="#captured-element-old-color-scheme" id="ref-for-captured-element-old-color-scheme①">old color-scheme</a>. </ol> <li data-md> Otherwise: <ol> <li data-md> Return failure if any of the following conditions is true: <ul> <li data-md> <var>capturedElement</var>’s <a data-link-type="dfn" href="#captured-element-new-element" id="ref-for-captured-element-new-element⑨">new element</a> has a <a data-link-type="dfn" href="https://drafts.csswg.org/css-scoping-1/#flat-tree" id="ref-for-flat-tree②">flat tree</a> ancestor that <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>. <li data-md> <var>capturedElement</var>’s <a data-link-type="dfn" href="#captured-element-new-element" id="ref-for-captured-element-new-element①⓪">new element</a> is <a data-link-type="dfn" href="https://drafts.csswg.org/css-images-4/#element-not-rendered" id="ref-for-element-not-rendered③">not rendered</a>. <li data-md> <var>capturedElement</var> has more than one <a data-link-type="dfn" href="https://drafts.csswg.org/css-break-4/#box-fragment" id="ref-for-box-fragment③">box fragment</a>. </ul> Note: Other rendering constraints are enforced via <var>capturedElement</var>’s <a data-link-type="dfn" href="#captured-element-new-element" id="ref-for-captured-element-new-element①①">new element</a> being <a data-link-type="dfn" href="#captured-in-a-view-transition" id="ref-for-captured-in-a-view-transition⑨">captured in a view transition</a>. <li data-md> Let <var>newRect</var> be <a data-link-type="dfn" href="#snapshot-containing-block" id="ref-for-snapshot-containing-block①⑥">snapshot containing block</a> if <var>capturedElement</var> is the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#document-element" id="ref-for-document-element①⓪">document element</a>, otherwise, <var>capturedElement</var>’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-box-4/#border-box" id="ref-for-border-box⑦">border box</a>. <li data-md> Set <var>width</var> to the current width of <var>newRect</var>. <li data-md> Set <var>height</var> to the current height of <var>newRect</var>. <li data-md> Set <var>transform</var> to a transform that would map <var>newRect</var> from the <a data-link-type="dfn" href="#snapshot-containing-block-origin" id="ref-for-snapshot-containing-block-origin①">snapshot containing block origin</a> to its current visual position. <li data-md> Set <var>writingMode</var> to the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#computed-value" id="ref-for-computed-value⑨">computed value</a> of <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-writing-modes-4/#propdef-writing-mode" id="ref-for-propdef-writing-mode②">writing-mode</a> on <var>capturedElement</var>’s <a data-link-type="dfn" href="#captured-element-new-element" id="ref-for-captured-element-new-element①②">new element</a>. <li data-md> Set <var>direction</var> to the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#computed-value" id="ref-for-computed-value①⓪">computed value</a> of <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-direction" id="ref-for-propdef-direction②">direction</a> on <var>capturedElement</var>’s <a data-link-type="dfn" href="#captured-element-new-element" id="ref-for-captured-element-new-element①③">new element</a>. <li data-md> Set <var>textOrientation</var> to the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#computed-value" id="ref-for-computed-value①①">computed value</a> of <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-writing-modes-4/#propdef-text-orientation" id="ref-for-propdef-text-orientation②">text-orientation</a> on <var>capturedElement</var>’s <a data-link-type="dfn" href="#captured-element-new-element" id="ref-for-captured-element-new-element①④">new element</a>. <li data-md> Set <var>mixBlendMode</var> to the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#computed-value" id="ref-for-computed-value①②">computed value</a> of <a class="property css" data-link-type="property" href="https://drafts.fxtf.org/compositing-2/#propdef-mix-blend-mode" id="ref-for-propdef-mix-blend-mode④">mix-blend-mode</a> on <var>capturedElement</var>’s <a data-link-type="dfn" href="#captured-element-new-element" id="ref-for-captured-element-new-element①⑤">new element</a>. <li data-md> Set <var>backdropFilter</var> to the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#computed-value" id="ref-for-computed-value①③">computed value</a> of <a class="property css" data-link-type="property" href="https://drafts.fxtf.org/filter-effects-2/#propdef-backdrop-filter" id="ref-for-propdef-backdrop-filter②">backdrop-filter</a> on <var>capturedElement</var>’s <a data-link-type="dfn" href="#captured-element-new-element" id="ref-for-captured-element-new-element①⑥">new element</a>. <li data-md> Set <var>colorScheme</var> to the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#computed-value" id="ref-for-computed-value①④">computed value</a> of <a class="property css" data-link-type="property" href="https://drafts.csswg.org/css-color-adjust-1/#propdef-color-scheme" id="ref-for-propdef-color-scheme②">color-scheme</a> on <var>capturedElement</var>’s <a data-link-type="dfn" href="#captured-element-new-element" id="ref-for-captured-element-new-element①⑦">new element</a>. </ol> <li data-md> If <var>capturedElement</var>’s <a data-link-type="dfn" href="#captured-element-group-styles-rule" id="ref-for-captured-element-group-styles-rule">group styles rule</a> is null, then set <var>capturedElement</var>’s group styles rule to a new <code class="idl"><a data-link-type="idl" href="https://drafts.csswg.org/cssom-1/#cssstylerule" id="ref-for-cssstylerule⑨">CSSStyleRule</a></code> representing the following CSS, and append it to <var>transition</var>’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’s</a> <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>’s <a data-link-type="dfn" href="#document-dynamic-view-transition-style-sheet" id="ref-for-document-dynamic-view-transition-style-sheet①①">dynamic view transition style sheet</a>. Otherwise, update <var>capturedElement</var>’s <a data-link-type="dfn" href="#captured-element-group-styles-rule" id="ref-for-captured-element-group-styles-rule②">group styles rule</a> to match the following CSS: <pre class="highlight">:root:<c- nf>:view-transition-group</c-><c- p>(</c-><var>transitionName</var><c- p>)</c-> <c- p>{</c-> <c- k>width</c-><c- p>:</c-> <var>width</var><c- p>;</c-> <c- k>height</c-><c- p>:</c-> <var>height</var><c- p>;</c-> <c- k>transform</c-><c- p>:</c-> <var>transform</var><c- p>;</c-> <c- k>writing-mode</c-><c- p>:</c-> <var>writingMode</var><c- p>;</c-> <c- k>direction</c-><c- p>:</c-> <var>direction</var><c- p>;</c-> <c- k>text-orientation</c-><c- p>:</c-> <var>textOrientation</var><c- p>;</c-> <c- k>mix-blend-mode</c-><c- p>:</c-> <var>mixBlendMode</var><c- p>;</c-> <c- k>backdrop-filter</c-><c- p>:</c-> <var>backdropFilter</var><c- p>;</c-> <c- k>color-scheme</c-><c- p>:</c-> <var>colorScheme</var><c- p>;</c-> <c- p>}</c-> </pre> Note: The above code example contains variables to be replaced. <li data-md> If <var>capturedElement</var>’s <a data-link-type="dfn" href="#captured-element-new-element" id="ref-for-captured-element-new-element①⑧">new element</a> is not null, then: <ol> <li data-md> Let <var>new</var> be the <a class="css" data-link-type="maybe" href="#selectordef-view-transition-new" id="ref-for-selectordef-view-transition-new⑨">::view-transition-new()</a> with the <a data-link-type="dfn" href="#view-transition-name" id="ref-for-view-transition-name①⑥">view transition name</a> <var>transitionName</var>. <li data-md> Set <var>new</var>’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#replaced-element" id="ref-for-replaced-element④">replaced element</a> content to the result of <a data-link-type="dfn" href="#capture-the-image" id="ref-for-capture-the-image⑥">capturing the image</a> of <var>capturedElement</var>’s <a data-link-type="dfn" href="#captured-element-new-element" id="ref-for-captured-element-new-element①⑨">new element</a>. </ol> </ol> </ol> This algorithm must be executed to update styles in <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-5/#cascade-origin-ua" id="ref-for-cascade-origin-ua③">user-agent origin</a> if its effects can be observed by a web API. Note: An example of such a web API is <code>window.getComputedStyle(document.documentElement, "::view-transition")</code>. </div> <h3 class="heading settled" data-level="7.10" id="clear-view-transition-algorithm">7.10. <a data-link-type="dfn" href="#clear-view-transition" id="ref-for-clear-view-transition③">Clear view transition</a><a class="self-link" href="#clear-view-transition-algorithm"></a></h3> <div class="algorithm" data-algorithm="clear view transition"> To <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="clear-view-transition">clear view transition</dfn> of a <code class="idl"><a data-link-type="idl" href="#viewtransition" id="ref-for-viewtransition②③">ViewTransition</a></code> <var>transition</var>: <ol> <li data-md> Let <var>document</var> be <var>transition</var>’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’s</a> <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>. <li data-md> <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#assert" id="ref-for-assert⑤">Assert</a>: <var>document</var>’s <a data-link-type="dfn" href="#document-active-view-transition" id="ref-for-document-active-view-transition①⑤">active view transition</a> is <var>transition</var>. <li data-md> <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#list-iterate" id="ref-for-list-iterate⑧">For each</a> <var>capturedElement</var> of <var>transition</var>’s <a data-link-type="dfn" href="#viewtransition-named-elements" id="ref-for-viewtransition-named-elements⑤">named elements</a>' <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#map-getting-the-values" id="ref-for-map-getting-the-values①">values</a>: <ol> <li data-md> If <var>capturedElement</var>’s <a data-link-type="dfn" href="#captured-element-new-element" id="ref-for-captured-element-new-element②⓪">new element</a> is not null, then set <var>capturedElement</var>’s new element’s <a data-link-type="dfn" href="#captured-in-a-view-transition" id="ref-for-captured-in-a-view-transition①⓪">captured in a view transition</a> to false. <li data-md> <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#list-iterate" id="ref-for-list-iterate⑨">For each</a> <var>style</var> of <var>capturedElement</var>’s <a data-link-type="dfn" href="#captured-element-style-definitions" id="ref-for-captured-element-style-definitions">style definitions</a>: <ol> <li data-md> If <var>style</var> is not null, and <var>style</var> is in <var>document</var>’s <a data-link-type="dfn" href="#document-dynamic-view-transition-style-sheet" id="ref-for-document-dynamic-view-transition-style-sheet①②">dynamic view transition style sheet</a>, then remove <var>style</var> from <var>document</var>’s dynamic view transition style sheet. </ol> </ol> <li data-md> Set <var>document</var>’s <a data-link-type="dfn" href="#document-show-view-transition-tree" id="ref-for-document-show-view-transition-tree①">show view transition tree</a> to false. <li data-md> Set <var>document</var>’s <a data-link-type="dfn" href="#document-active-view-transition" id="ref-for-document-active-view-transition①⑥">active view transition</a> to null. </ol> </div> <h2 class="no-num heading settled" id="priv">Privacy Considerations<a class="self-link" href="#priv"></a></h2> This specification introduces no new privacy considerations. <h2 class="no-num heading settled" id="sec">Security Considerations<a class="self-link" href="#sec"></a></h2> The images generated using <a data-link-type="dfn" href="#capture-the-image" id="ref-for-capture-the-image⑦">capture the image</a> algorithm could contain cross-origin data (if the Document is embedding cross-origin resources) or sensitive information like visited links. The implementations must ensure this data can not be accessed by the Document. This should be feasible since access to this data should already be prevented in the default rendering of the Document. <h2 class="no-num non-normative heading settled" id="changes">Appendix A. Changes<a class="self-link" href="#changes"></a></h2> This appendix is informative. <h3 class="heading settled" id="changes-since-2023-05-30"> Changes from <a href="https://www.w3.org/TR/2023/WD-css-view-transitions-1-20230530/">2023-05-30 Working Draft</a> <a class="self-link" href="#changes-since-2023-05-30"></a></h3> <ul> <li data-md> Use a keyframe to add plus-lighter blending during cross-fade. See <a href="https://github.com/w3c/csswg-drafts/issues/8924">issue 8924</a>. <li data-md> Add mix-blend-mode to list of properties copied over to the ::view-transition-group. See <a href="https://github.com/w3c/csswg-drafts/issues/8962">issue 8962</a>. <li data-md> Add text-orientation to list of properties copied over to the ::view-transition-group. See <a href="https://github.com/w3c/csswg-drafts/issues/8230">issue 8230</a>. <li data-md> Refactor the old capture algorithm to properly set <a data-link-type="dfn" href="#captured-in-a-view-transition" id="ref-for-captured-in-a-view-transition①①">captured in a view transition</a> before reading the value. <li data-md> Make the <code class="idl"><a data-link-type="idl" href="#dom-document-startviewtransition" id="ref-for-dom-document-startviewtransition⑤">startViewTransition()</a></code> parameter non-nullable. See <a href="https://github.com/w3c/csswg-drafts/issues/9460">issue 9460</a>. <li data-md> Elements participating in a <a data-link-type="dfn" href="#view-transitions" id="ref-for-view-transitions①③">view transition</a> are exposed to accessibility tree. See <a href="https://github.com/w3c/csswg-drafts/issues/9365">issue 9365</a>. <li data-md> The <a data-link-type="dfn" href="#view-transition-tree" id="ref-for-view-transition-tree④">view transition tree</a> is not exposed to accessibility tree. See <a href="https://github.com/w3c/csswg-drafts/issues/9365">issue 9365</a>. <li data-md> Animate back-drop filter similar to transform/size. See <a href="https://github.com/w3c/csswg-drafts/issues/9358">issue 9358</a>. <li data-md> Copy <code>color-scheme</code> from DOM element to <a class="css" data-link-type="maybe" href="#selectordef-view-transition-group" id="ref-for-selectordef-view-transition-group①⑦">::view-transition-group()</a>. See <a href="https://github.com/w3c/csswg-drafts/issues/9276">issue 9276</a>. <li data-md> Expose auto-skip view transition for a <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document" id="ref-for-document①①">Document</a></code>, to allow having outbound cross-document transitions preceed programmatic view transiitons. see <a href="https://github.com/w3c/csswg-drafts/issues/9512">issue 9512</a>. <li data-md> Add a note about why <a class="property css" data-link-type="property" href="#propdef-view-transition-name" id="ref-for-propdef-view-transition-name①③">view-transition-name</a> should be animatable. <li data-md> <code>view-transition-name: auto</code> should be an invalid value. See <a href="https://github.com/w3c/csswg-drafts/issues/9639">issue 9639</a>. <li data-md> Add note to explain paint order for entry animations. See <a href="https://github.com/w3c/csswg-drafts/issues/9672">issue 9672</a>. <li data-md> Add note to explain how the named elements are cleaned up. See <a href="https://github.com/w3c/csswg-drafts/issues/9669">issue 9669</a>. <li data-md> Refactor algorithm to clarify timing, especially of `updateCallbackDone. See <a href="https://github.com/w3c/csswg-drafts/issues/9762">issue 9762</a>. <li data-md> Add animation-delay inherit to UA stylesheet rules for (::view-transition) -image-pair, -old, and -new. See <a href="https://github.com/w3c/csswg-drafts/issues/9817">issue 9817</a>. <li data-md> Auto-skip animation when document is hidden. See <a href="https://github.com/w3c/csswg-drafts/issues/9543">issue 9543</a>. <li data-md> Remove references to cross-document view-transitions, to keep the L1 spec clean. See <a href="https://github.com/w3c/csswg-drafts/issues/9886">Issue 9886</a>. <li data-md> Export an algorithm to skip the active transition when the page is hidden. See <a href="https://github.com/w3c/csswg-drafts/issues/9543">issue 9543</a>. <li data-md> Use snapshot containing block when capturing new state for document element. See <a href="https://github.com/w3c/csswg-drafts/issues/10177">issue #10177</a>. <li data-md> Fix algorithm for dispatching updateDOMCallback promise. <li data-md> Scope view transition names to matching tree context. See <a href="https://github.com/w3c/csswg-drafts/issues/10145">issue 10145</a>. <li data-md> Fix scoping to match name instead of element. See <a href="https://github.com/w3c/csswg-drafts/issues/10145">issue 10145</a>. <li data-md> Add a rendering characteristics note about out-of-viewport elements. See <a href="https://github.com/w3c/csswg-drafts/issues/8282">issue 8282</a>. <li data-md> Swap the order of invoking the update callback and setting the phase. See <a href="https://github.com/w3c/csswg-drafts/issues/10822">issue 10822</a>. </ul> <h3 class="heading settled" id="changes-since-2022-05-25"> Changes from <a href="https://www.w3.org/TR/2023/WD-css-view-transitions-1-20230525/">2022-05-25 Working Draft</a> <a class="self-link" href="#changes-since-2022-05-25"></a></h3> <ul> <li data-md> Fix typo in ::view-transition-new user agent style sheet. See <a href="https://github.com/w3c/csswg-drafts/pull/8879">PR</a>. </ul> <h3 class="heading settled" id="changes-since-2022-11-24"> Changes from <a href="https://www.w3.org/TR/2022/WD-css-view-transitions-1-20221124/">2022-11-24 Working Draft</a> <a class="self-link" href="#changes-since-2022-11-24"></a></h3> <ul> <li data-md> Pointer events resolve to the documentElement when rendering is suppressed. See <a href="https://github.com/w3c/csswg-drafts/issues/7797">issue 7797</a>. <li data-md> Add rendering constraints to elements participating in a transition. See <a href="https://github.com/w3c/csswg-drafts/issues/8139">issue 8139</a> and <a href="https://github.com/w3c/csswg-drafts/issues/7882">issue 7882</a>. <li data-md> Remove html specifics from UA stylesheet to support ViewTransitions on SVG Documents. <li data-md> Rename updateDOMCallback to <code class="idl"><a data-link-type="idl" href="#callbackdef-viewtransitionupdatecallback" id="ref-for-callbackdef-viewtransitionupdatecallback①⑥">ViewTransitionUpdateCallback</a></code>. See <a href="https://github.com/w3c/csswg-drafts/issues/8144">issue 8144</a>. <li data-md> Rename snapshot viewport to <a data-link-type="dfn" href="#snapshot-containing-block" id="ref-for-snapshot-containing-block①⑦">snapshot containing block</a>. <li data-md> Skip the transition if viewport size changes. See <a href="https://github.com/w3c/csswg-drafts/issues/8045">issue 8045</a>. <li data-md> Add support for :only-child. See <a href="https://github.com/w3c/csswg-drafts/issues/8057">issue 8057</a>. <li data-md> Add concept of a tree of pseudo-elements under <a data-link-type="dfn" href="#pseudo-element-root" id="ref-for-pseudo-element-root②">pseudo-element root</a>. See <a href="https://github.com/w3c/csswg-drafts/issues/8113">issue 8113</a>. <li data-md> When skipping a transition, the <code class="idl"><a data-link-type="idl" href="#callbackdef-viewtransitionupdatecallback" id="ref-for-callbackdef-viewtransitionupdatecallback①⑦">ViewTransitionUpdateCallback</a></code> is called in own task rather than synchronously. See <a href="https://github.com/w3c/csswg-drafts/issues/7904">issue 7904</a> <li data-md> When capturing images, at least the in-viewport part of the image should be captured, downscale if needed. See <a href="https://github.com/w3c/csswg-drafts/issues/8561">issue 8561</a>. <li data-md> Applying the <a data-link-type="dfn" href="https://drafts.csswg.org/css-overflow-3/#ink-overflow" id="ref-for-ink-overflow②">ink overflow</a> to the captured image is implementation defined, and doesn’t affect the image’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-images-3/#natural-size" id="ref-for-natural-size①">natural size</a>. See <a href="https://github.com/w3c/csswg-drafts/issues/8597">issue 8597</a>. <li data-md> Fragmented elements don’t participate in view transitions. See <a href="https://github.com/w3c/csswg-drafts/issues/8339">issue 8339</a>. <li data-md> Rename "snapshot root" to "snapshot containing block", and make it an <a data-link-type="dfn" href="https://drafts.csswg.org/css-position-3/#absolute-positioning-containing-block" id="ref-for-absolute-positioning-containing-block①">absolute positioning containing block</a> and a <a data-link-type="dfn" href="https://drafts.csswg.org/css-position-3/#fixed-positioning-containing-block" id="ref-for-fixed-positioning-containing-block①">fixed positioning containing block</a> for its descendants. See <a href="https://github.com/w3c/csswg-drafts/issues/8505">issue 8505</a>. </ul> <h3 class="heading settled" id="changes-since-2022-10-25"> Changes from <a href="https://www.w3.org/TR/2022/WD-css-view-transitions-1-20221025/">2022-10-25 Working Draft (FPWD)</a> <a class="self-link" href="#changes-since-2022-10-25"></a></h3> <ul> <li data-md> Add <a data-link-type="dfn" href="#document-dynamic-view-transition-style-sheet" id="ref-for-document-dynamic-view-transition-style-sheet①④">dynamic view transition style sheet</a> concept for dynamically generated UA styles scoped to the current Document. <li data-md> Add snapshot viewport concept. See <a href="https://github.com/w3c/csswg-drafts/issues/7859">issue 7859</a>. <li data-md> Clarify timing for resolving/rejecting promises when skipping the transition. See <a href="https://github.com/w3c/csswg-drafts/issues/7956">issue 7956</a>. <li data-md> Elements under a content-visibility:auto element that skips its contents are ignored. See <a href="https://github.com/w3c/csswg-drafts/issues/7874">issue 7874</a>. <li data-md> UA styles on the pseudo-DOM stay in sync with author DOM for any developer observable API. See <a href="https://github.com/w3c/csswg-drafts/issues/7812">issue 7812</a>. <li data-md> Suppress rendering during updateCallback. See <a href="https://github.com/w3c/csswg-drafts/issues/7784">issue 7784</a>. <li data-md> Changes in size/position of elements in the new Document generate new UA animation keyframes. See <a href="https://github.com/w3c/csswg-drafts/issues/7813">issue 7813</a>. <li data-md> Scope keyframes to user agent stylesheets using -ua- prefix. See <a href="https://github.com/w3c/csswg-drafts/issues/7560">issue 7560</a>. <li data-md> Update pseudo element names to view-transition*. See <a href="https://github.com/w3c/csswg-drafts/issues/7960">issue 7960</a>. <li data-md> Update selector syntax for pseudo-elements. See <a href="https://github.com/w3c/csswg-drafts/issues/7788">issue 7788</a>. <li data-md> Add sections for security/privacy considerations. </ul> </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="#activate-view-transition">activate view transition</a>, in § 7.3 <li><a href="#document-active-view-transition">active view transition</a>, in § 7.1.1 <li><a href="#call-the-update-callback">call the update callback</a>, in § 7.4 <li><a href="#captured-element">captured element</a>, in § 7.1.3 <li><a href="#captured-in-a-view-transition">captured in a view transition</a>, in § 7.1.2 <li><a href="#capture-rendering-characteristics">capture rendering characteristics</a>, in § 7.7.1 <li><a href="#capture-the-image">capture the image</a>, in § 7.7 <li><a href="#capture-the-new-state">capture the new state</a>, in § 7.3.2 <li><a href="#capture-the-old-state">capture the old state</a>, in § 7.3.1 <li><a href="#capture-the-image">capturing the image</a>, in § 7.7 <li><a href="#clear-view-transition">clear view transition</a>, in § 7.10 <li><a href="#valdef-view-transition-name-custom-ident"><custom-ident></a>, in § 2.1 <li><a href="#document-scoped-view-transition-name">document-scoped view transition name</a>, in § 2.1 <li><a href="#document-dynamic-view-transition-style-sheet">dynamic view transition style sheet</a>, in § 7.1.1 <li><a href="#dom-viewtransition-finished">finished</a>, in § 6.2 <li><a href="#viewtransition-finished-promise">finished promise</a>, in § 6.2 <li><a href="#global-view-transition-user-agent-style-sheet">global view transition user agent style sheet</a>, in § 5 <li><a href="#captured-element-group-animation-name-rule">group animation name rule</a>, in § 7.1.3 <li><a href="#captured-element-group-keyframes">group keyframes</a>, in § 7.1.3 <li><a href="#captured-element-group-styles-rule">group styles rule</a>, in § 7.1.3 <li><a href="#handle-transition-frame">handle transition frame</a>, in § 7.8 <li><a href="#captured-element-image-animation-name-rule">image animation name rule</a>, in § 7.1.3 <li><a href="#captured-element-image-pair-isolation-rule">image pair isolation rule</a>, in § 7.1.3 <li><a href="#viewtransition-initial-snapshot-containing-block-size">initial snapshot containing block size</a>, in § 6.2 <li><a href="#viewtransition-named-elements">named elements</a>, in § 6.2 <li><a href="#named-view-transition-pseudo-elements">named view transition pseudo-elements</a>, in § 3.2.1 <li><a href="#captured-element-new-element">new element</a>, in § 7.1.3 <li><a href="#valdef-view-transition-name-none">none</a>, in § 2.1 <li><a href="#captured-element-old-backdrop-filter">old backdrop-filter</a>, in § 7.1.3 <li><a href="#captured-element-old-color-scheme">old color-scheme</a>, in § 7.1.3 <li><a href="#captured-element-old-direction">old direction</a>, in § 7.1.3 <li><a href="#captured-element-old-height">old height</a>, in § 7.1.3 <li><a href="#captured-element-old-image">old image</a>, in § 7.1.3 <li><a href="#captured-element-old-mix-blend-mode">old mix-blend-mode</a>, in § 7.1.3 <li><a href="#captured-element-old-text-orientation">old text-orientation</a>, in § 7.1.3 <li><a href="#captured-element-old-transform">old transform</a>, in § 7.1.3 <li><a href="#captured-element-old-width">old width</a>, in § 7.1.3 <li><a href="#captured-element-old-writing-mode">old writing-mode</a>, in § 7.1.3 <li><a href="#perform-pending-transition-operations">perform pending transition operations</a>, in § 7.2 <li><a href="#viewtransition-phase">phase</a>, in § 6.2 <li><a href="#pseudo-element-root">pseudo-element root</a>, in § 3.1 <li><a href="#pseudo-element-tree">pseudo-element tree</a>, in § 3.1 <li><a href="#typedef-pt-name-selector"><pt-name-selector></a>, in § 3.2.1 <li><a href="#dom-viewtransition-ready">ready</a>, in § 6.2 <li><a href="#viewtransition-ready-promise">ready promise</a>, in § 6.2 <li><a href="#document-rendering-suppression-for-view-transitions">rendering suppression for view transitions</a>, in § 7.1.1 <li><a href="#setup-transition-pseudo-elements">setup transition pseudo-elements</a>, in § 7.3.3 <li><a href="#setup-view-transition">setup view transition</a>, in § 7.3 <li><a href="#document-show-view-transition-tree">show view transition tree</a>, in § 7.1.1 <li><a href="#skip-the-view-transition">skip the view transition</a>, in § 7.5 <li><a href="#dom-viewtransition-skiptransition">skipTransition()</a>, in § 6.2.1 <li><a href="#snapshot-containing-block">snapshot containing block</a>, in § 4.1 <li><a href="#snapshot-containing-block-origin">snapshot containing block origin</a>, in § 4.1 <li><a href="#snapshot-containing-block-size">snapshot containing block size</a>, in § 4.1 <li><a href="#dom-document-startviewtransition">startViewTransition()</a>, in § 6.1.1 <li><a href="#dom-document-startviewtransition">startViewTransition(updateCallback)</a>, in § 6.1.1 <li><a href="#captured-element-style-definitions">style definitions</a>, in § 7.1.3 <li><a href="#viewtransition-transition-root-pseudo-element">transition root pseudo-element</a>, in § 6.2 <li><a href="#viewtransition-update-callback">update callback</a>, in § 6.2 <li><a href="#dom-viewtransition-updatecallbackdone">updateCallbackDone</a>, in § 6.2 <li><a href="#viewtransition-update-callback-done-promise">update callback done promise</a>, in § 6.2 <li><a href="#update-pseudo-element-styles">update pseudo-element styles</a>, in § 7.9 <li><a href="#selectordef-view-transition">::view-transition</a>, in § 3.2.2 <li><a href="#viewtransition">ViewTransition</a>, in § 6.2 <li><a href="#selectordef-view-transition-group">::view-transition-group()</a>, in § 3.2.3 <li><a href="#selectordef-view-transition-image-pair">::view-transition-image-pair()</a>, in § 3.2.4 <li><a href="#view-transition-layer">view transition layer</a>, in § 4.2 <li><a href="#view-transition-name">view transition name</a>, in § 2.1 <li><a href="#propdef-view-transition-name">view-transition-name</a>, in § 2.1 <li><a href="#selectordef-view-transition-new">::view-transition-new()</a>, in § 3.2.6 <li><a href="#selectordef-view-transition-old">::view-transition-old()</a>, in § 3.2.5 <li><a href="#view-transition-page-visibility-change-steps">view transition page-visibility change steps</a>, in § 7.6 <li><a href="#view-transition-pseudo-elements">view transition pseudo-elements</a>, in § 3.2 <li><a href="#view-transitions">view transitions</a>, in § 1 <li><a href="#view-transition-tree">view transition tree</a>, in § 3.2 <li><a href="#callbackdef-viewtransitionupdatecallback">ViewTransitionUpdateCallback</a>, in § 6.1 </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">[]</a> defines the following terms: <ul> <li>NavigateEvent <li>signal </ul> <li> <a data-link-type="biblio">[COMPOSITING-2]</a> defines the following terms: <ul> <li>isolation <li>mix-blend-mode </ul> <li> <a data-link-type="biblio">[CSS-2022]</a> defines the following terms: <ul> <li>style sheet </ul> <li> <a data-link-type="biblio">[CSS-ANIMATIONS-1]</a> defines the following terms: <ul> <li>CSSKeyframesRule </ul> <li> <a data-link-type="biblio">[CSS-BACKGROUNDS-3]</a> defines the following terms: <ul> <li>canvas background </ul> <li> <a data-link-type="biblio">[CSS-BOX-4]</a> defines the following terms: <ul> <li>border box <li>content box </ul> <li> <a data-link-type="biblio">[CSS-BREAK-4]</a> defines the following terms: <ul> <li>box fragment <li>fragment </ul> <li> <a data-link-type="biblio">[CSS-CASCADE-5]</a> defines the following terms: <ul> <li>computed value <li>user-agent origin </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-COLOR-ADJUST-1]</a> defines the following terms: <ul> <li>color-scheme </ul> <li> <a data-link-type="biblio">[CSS-CONTAIN-2]</a> defines the following terms: <ul> <li>element contents <li>skips its contents </ul> <li> <a data-link-type="biblio">[CSS-DISPLAY-3]</a> defines the following terms: <ul> <li>containing block <li>replaced element </ul> <li> <a data-link-type="biblio">[CSS-DISPLAY-4]</a> defines the following terms: <ul> <li>initial containing block <li>principal box <li>root element <li>visibility </ul> <li> <a data-link-type="biblio">[CSS-IMAGES-3]</a> defines the following terms: <ul> <li>natural dimension <li>natural size </ul> <li> <a data-link-type="biblio">[CSS-IMAGES-4]</a> defines the following terms: <ul> <li>element-not-rendered </ul> <li> <a data-link-type="biblio">[CSS-MASKING-1]</a> defines the following terms: <ul> <li>clip-path </ul> <li> <a data-link-type="biblio">[CSS-OVERFLOW-3]</a> defines the following terms: <ul> <li>ink overflow <li>ink overflow area <li>ink overflow rectangle <li>overflow <li>scrollbar gutter </ul> <li> <a data-link-type="biblio">[CSS-POSITION-3]</a> defines the following terms: <ul> <li>absolute positioning containing block <li>fixed positioning containing block </ul> <li> <a data-link-type="biblio">[CSS-POSITION-4]</a> defines the following terms: <ul> <li>top layer </ul> <li> <a data-link-type="biblio">[CSS-PSEUDO-4]</a> defines the following terms: <ul> <li>tree-abiding pseudo-element <li>tree-abiding pseudo-elements </ul> <li> <a data-link-type="biblio">[CSS-SCOPING-1]</a> defines the following terms: <ul> <li>flat tree <li>tree-scoped name </ul> <li> <a data-link-type="biblio">[CSS-SIZING-3]</a> defines the following terms: <ul> <li>height <li>width </ul> <li> <a data-link-type="biblio">[CSS-TRANSFORMS-1]</a> defines the following terms: <ul> <li>identity transform function <li>transform </ul> <li> <a data-link-type="biblio">[CSS-TRANSFORMS-2]</a> defines the following terms: <ul> <li><transform-function> </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><custom-ident> <li>| </ul> <li> <a data-link-type="biblio">[CSS-VIEWPORT-1]</a> defines the following terms: <ul> <li>interactive-widget </ul> <li> <a data-link-type="biblio">[CSS-WRITING-MODES-3]</a> defines the following terms: <ul> <li>direction </ul> <li> <a data-link-type="biblio">[CSS-WRITING-MODES-4]</a> defines the following terms: <ul> <li>text-orientation <li>writing-mode </ul> <li> <a data-link-type="biblio">[CSS2]</a> defines the following terms: <ul> <li>pseudo-elements <li>stacking context </ul> <li> <a data-link-type="biblio">[CSS22]</a> defines the following terms: <ul> <li>element </ul> <li> <a data-link-type="biblio">[CSSOM-1]</a> defines the following terms: <ul> <li>CSSStyleRule </ul> <li> <a data-link-type="biblio">[CSSOM-VIEW-1]</a> defines the following terms: <ul> <li>layout viewport <li>scrolling box </ul> <li> <a data-link-type="biblio">[DOM]</a> defines the following terms: <ul> <li>Document <li>Element <li>child <li>connected <li>descendant <li>document <li>document element <li>inclusive descendant <li>node document <li>parent <li>participate <li>root <li>shadow-including descendant <li>sibling <li>tree </ul> <li> <a data-link-type="biblio">[FILTER-EFFECTS-1]</a> defines the following terms: <ul> <li>filter </ul> <li> <a data-link-type="biblio">[FILTER-EFFECTS-2]</a> defines the following terms: <ul> <li>Backdrop Root <li>backdrop-filter </ul> <li> <a data-link-type="biblio">[GEOMETRY-1]</a> defines the following terms: <ul> <li>height <li>width </ul> <li> <a data-link-type="biblio">[HR-TIME-3]</a> defines the following terms: <ul> <li>duration </ul> <li> <a data-link-type="biblio">[HTML]</a> defines the following terms: <ul> <li>associated Document <li>child navigable <li>DOM manipulation task source <li>in parallel <li>queue a global task <li>relevant global object <li>relevant realm <li>unhandledrejection <li>visibility state </ul> <li> <a data-link-type="biblio">[INFRA]</a> defines the following terms: <ul> <li>append (for list) <li>append (for set) <li>assert <li>contain <li>continue <li>exist <li>for each (for list) <li>for each (for map) <li>implementation-defined <li>list <li>map <li>set <li>struct <li>tuple <li>values </ul> <li> <a data-link-type="biblio">[INTERSECTION-OBSERVER]</a> defines the following terms: <ul> <li>IntersectionObserver </ul> <li> <a data-link-type="biblio">[POINTEREVENTS3]</a> defines the following terms: <ul> <li>pointer capture </ul> <li> <a data-link-type="biblio">[SCROLL-ANIMATIONS-1]</a> defines the following terms: <ul> <li>scroll-driven animations </ul> <li> <a data-link-type="biblio">[SELECTORS-3]</a> defines the following terms: <ul> <li>* </ul> <li> <a data-link-type="biblio">[SELECTORS-4]</a> defines the following terms: <ul> <li>:only-child <li>functional pseudo-element <li>originating element <li>originating pseudo-element <li>pseudo-element <li>selector <li>type selector <li>ultimate originating element </ul> <li> <a data-link-type="biblio">[WEB-ANIMATIONS-1]</a> defines the following terms: <ul> <li>associated effect <li>discrete <li>document timeline <li>effect target <li>paused <li>pending animation event queue <li>play state <li>running <li>timeline </ul> <li> <a data-link-type="biblio">[WEBIDL]</a> defines the following terms: <ul> <li>AbortError <li>DOMException <li>Exposed <li>InvalidStateError <li>Promise <li>TimeoutError <li>a new promise <li>a promise resolved with <li>any <li>getter steps <li>invoke <li>mark as handled <li>method steps <li>react <li>reacting <li>reject <li>resolve <li>this <li>undefined <li>unrestricted double </ul> </ul> <h2 class="no-num no-ref heading settled" id="references">References<a class="self-link" href="#references"></a></h2> <h3 class="no-num no-ref heading settled" id="normative">Normative References<a class="self-link" href="#normative"></a></h3> <dl> <dt id="biblio-compositing-2">[COMPOSITING-2] <dd><a href="https://drafts.fxtf.org/compositing-2/"><cite>Compositing and Blending Level 2</cite></a>. Editor's Draft. URL: <a href="https://drafts.fxtf.org/compositing-2/">https://drafts.fxtf.org/compositing-2/</a> <dt id="biblio-css-2022">[CSS-2022] <dd>Tab Atkins Jr.; Elika Etemad; Florian Rivoal. <a href="https://drafts.csswg.org/css-2022/"><cite>CSS Snapshot 2022</cite></a>. URL: <a href="https://drafts.csswg.org/css-2022/">https://drafts.csswg.org/css-2022/</a> <dt id="biblio-css-animations-1">[CSS-ANIMATIONS-1] <dd>David Baron; et al. <a href="https://drafts.csswg.org/css-animations/"><cite>CSS Animations Level 1</cite></a>. URL: <a href="https://drafts.csswg.org/css-animations/">https://drafts.csswg.org/css-animations/</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-cascade-5">[CSS-CASCADE-5] <dd>Elika Etemad; Miriam Suzanne; Tab Atkins Jr.. <a href="https://drafts.csswg.org/css-cascade-5/"><cite>CSS Cascading and Inheritance Level 5</cite></a>. URL: <a href="https://drafts.csswg.org/css-cascade-5/">https://drafts.csswg.org/css-cascade-5/</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-color-adjust-1">[CSS-COLOR-ADJUST-1] <dd>Elika Etemad; et al. <a href="https://drafts.csswg.org/css-color-adjust-1/"><cite>CSS Color Adjustment Module Level 1</cite></a>. URL: <a href="https://drafts.csswg.org/css-color-adjust-1/">https://drafts.csswg.org/css-color-adjust-1/</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-display-3">[CSS-DISPLAY-3] <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://drafts.csswg.org/css-display/"><cite>CSS Display Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-display/">https://drafts.csswg.org/css-display/</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-images-3">[CSS-IMAGES-3] <dd>Tab Atkins Jr.; Elika Etemad; Lea Verou. <a href="https://drafts.csswg.org/css-images-3/"><cite>CSS Images Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-images-3/">https://drafts.csswg.org/css-images-3/</a> <dt id="biblio-css-images-4">[CSS-IMAGES-4] <dd>Tab Atkins Jr.; Elika Etemad; Lea Verou. <a href="https://drafts.csswg.org/css-images-4/"><cite>CSS Images Module Level 4</cite></a>. URL: <a href="https://drafts.csswg.org/css-images-4/">https://drafts.csswg.org/css-images-4/</a> <dt id="biblio-css-masking-1">[CSS-MASKING-1] <dd>Dirk Schulze; Brian Birtles; Tab Atkins Jr.. <a href="https://drafts.fxtf.org/css-masking-1/"><cite>CSS Masking Module Level 1</cite></a>. URL: <a href="https://drafts.fxtf.org/css-masking-1/">https://drafts.fxtf.org/css-masking-1/</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-position-4">[CSS-POSITION-4] <dd><a href="https://drafts.csswg.org/css-position-4/"><cite>CSS Positioned Layout Module Level 4</cite></a>. Editor's Draft. URL: <a href="https://drafts.csswg.org/css-position-4/">https://drafts.csswg.org/css-position-4/</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-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-transforms-2">[CSS-TRANSFORMS-2] <dd>Tab Atkins Jr.; et al. <a href="https://drafts.csswg.org/css-transforms-2/"><cite>CSS Transforms Module Level 2</cite></a>. URL: <a href="https://drafts.csswg.org/css-transforms-2/">https://drafts.csswg.org/css-transforms-2/</a> <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-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-viewport-1">[CSS-VIEWPORT-1] <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-writing-modes-3">[CSS-WRITING-MODES-3] <dd>Elika Etemad; Koji Ishii. <a href="https://drafts.csswg.org/css-writing-modes-3/"><cite>CSS Writing Modes Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-writing-modes-3/">https://drafts.csswg.org/css-writing-modes-3/</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-css22">[CSS22] <dd>Bert Bos. <a href="https://drafts.csswg.org/css2/"><cite>Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification</cite></a>. URL: <a href="https://drafts.csswg.org/css2/">https://drafts.csswg.org/css2/</a> <dt id="biblio-cssom-1">[CSSOM-1] <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-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> <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-filter-effects-1">[FILTER-EFFECTS-1] <dd>Dirk Schulze; Dean Jackson. <a href="https://drafts.fxtf.org/filter-effects-1/"><cite>Filter Effects Module Level 1</cite></a>. URL: <a href="https://drafts.fxtf.org/filter-effects-1/">https://drafts.fxtf.org/filter-effects-1/</a> <dt id="biblio-filter-effects-2">[FILTER-EFFECTS-2] <dd><a href="https://drafts.fxtf.org/filter-effects-2/"><cite>Filter Effects Module Level 2</cite></a>. Editor's Draft. URL: <a href="https://drafts.fxtf.org/filter-effects-2/">https://drafts.fxtf.org/filter-effects-2/</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-hr-time-3">[HR-TIME-3] <dd>Yoav Weiss. <a href="https://w3c.github.io/hr-time/"><cite>High Resolution Time</cite></a>. URL: <a href="https://w3c.github.io/hr-time/">https://w3c.github.io/hr-time/</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-intersection-observer">[INTERSECTION-OBSERVER] <dd>Stefan Zager; Emilio Cobos Álvarez; Traian Captan. <a href="https://w3c.github.io/IntersectionObserver/"><cite>Intersection Observer</cite></a>. URL: <a href="https://w3c.github.io/IntersectionObserver/">https://w3c.github.io/IntersectionObserver/</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-3">[SELECTORS-3] <dd>Tantek Çelik; et al. <a href="https://drafts.csswg.org/selectors-3/"><cite>Selectors Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/selectors-3/">https://drafts.csswg.org/selectors-3/</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-web-animations-1">[WEB-ANIMATIONS-1] <dd>Brian Birtles; et al. <a href="https://drafts.csswg.org/web-animations-1/"><cite>Web Animations</cite></a>. URL: <a href="https://drafts.csswg.org/web-animations-1/">https://drafts.csswg.org/web-animations-1/</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-sizing-3">[CSS-SIZING-3] <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://drafts.csswg.org/css-sizing-3/"><cite>CSS Box Sizing Module Level 3</cite></a>. URL: <a href="https://drafts.csswg.org/css-sizing-3/">https://drafts.csswg.org/css-sizing-3/</a> <dt id="biblio-pointerevents3">[POINTEREVENTS3] <dd>Patrick Lauke; Robert Flack. <a href="https://w3c.github.io/pointerevents/"><cite>Pointer Events</cite></a>. URL: <a href="https://w3c.github.io/pointerevents/">https://w3c.github.io/pointerevents/</a> <dt id="biblio-scroll-animations-1">[SCROLL-ANIMATIONS-1] <dd>Brian Birtles; et al. <a href="https://drafts.csswg.org/scroll-animations-1/"><cite>Scroll-driven Animations</cite></a>. URL: <a href="https://drafts.csswg.org/scroll-animations-1/">https://drafts.csswg.org/scroll-animations-1/</a> </dl> <h2 class="no-num no-ref heading settled" id="property-index">Property Index<a class="self-link" href="#property-index"></a></h2> <div class="big-element-wrapper"> <table class="index"> <thead> <tr> <th scope="col">Name <th scope="col">Value <th scope="col">Initial <th scope="col">Applies to <th scope="col">Inh. <th scope="col">%ages <th scope="col">Animation type <th scope="col">Canonical order <th scope="col">Computed value <tbody> <tr> <th scope="row"><a class="css" data-link-type="property" href="#propdef-view-transition-name" id="ref-for-propdef-view-transition-name①④">view-transition-name</a> <td>none | <custom-ident> <td>none <td>all elements <td>no <td>n/a <td>discrete <td>per grammar <td>as specified </table> </div> <h2 class="no-num no-ref heading settled" id="idl-index">IDL Index<a class="self-link" href="#idl-index"></a></h2> <pre class="idl highlight def"><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="#viewtransition"><c- n>ViewTransition</c-></a> <a class="idl-code" data-link-type="method" href="#dom-document-startviewtransition"><c- g>startViewTransition</c-></a>(<c- b>optional</c-> <a data-link-type="idl-name" href="#callbackdef-viewtransitionupdatecallback"><c- n>ViewTransitionUpdateCallback</c-></a> <a href="#dom-document-startviewtransition-updatecallback-updatecallback"><code><c- g>updateCallback</c-></code></a>); }; <c- b>callback</c-> <a href="#callbackdef-viewtransitionupdatecallback"><code><c- g>ViewTransitionUpdateCallback</c-></code></a> = <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-promise"><c- b>Promise</c-></a><<a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-any"><c- b>any</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="#viewtransition"><code><c- g>ViewTransition</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-promise"><c- b>Promise</c-></a><<a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-undefined"><c- b>undefined</c-></a>> <a data-readonly data-type="Promise<undefined>" href="#dom-viewtransition-updatecallbackdone"><code><c- g>updateCallbackDone</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-promise"><c- b>Promise</c-></a><<a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-undefined"><c- b>undefined</c-></a>> <a data-readonly data-type="Promise<undefined>" href="#dom-viewtransition-ready"><code><c- g>ready</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-promise"><c- b>Promise</c-></a><<a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-undefined"><c- b>undefined</c-></a>> <a data-readonly data-type="Promise<undefined>" href="#dom-viewtransition-finished"><code><c- g>finished</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-viewtransition-skiptransition"><c- g>skipTransition</c-></a>(); }; </pre> <details class="mdn-anno unpositioned" data-anno-for="dom-document-startviewtransition"> <summary>⚠MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/startViewTransition" title="The startViewTransition() method of the View Transitions API starts a new view transition and returns a ViewTransition object to represent it.">Document/startViewTransition</a> In only one current engine. <div class="support"> FirefoxNoneSafariNoneChrome111+ <hr> Opera?Edge111+ <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-viewtransition-finished"> <summary>⚠MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/API/ViewTransition/finished" title="The finished read-only property of the ViewTransition interface is a Promise that fulfills once the transition animation is finished, and the new page view is visible and interactive to the user.">ViewTransition/finished</a> In only one current engine. <div class="support"> FirefoxNoneSafariNoneChrome111+ <hr> Opera?Edge111+ <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-viewtransition-ready"> <summary>⚠MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/API/ViewTransition/ready" title="The ready read-only property of the ViewTransition interface is a Promise that fulfills once the pseudo-element tree is created and the transition animation is about to start.">ViewTransition/ready</a> In only one current engine. <div class="support"> FirefoxNoneSafariNoneChrome111+ <hr> Opera?Edge111+ <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-viewtransition-skiptransition"> <summary>⚠MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/API/ViewTransition/skipTransition" title="The skipTransition() method of the ViewTransition interface skips the animation part of the view transition, but doesn't skip running the document.startViewTransition() callback that updates the DOM.">ViewTransition/skipTransition</a> In only one current engine. <div class="support"> FirefoxNoneSafariNoneChrome111+ <hr> Opera?Edge111+ <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-viewtransition-updatecallbackdone"> <summary>⚠MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/API/ViewTransition/updateCallbackDone" title="The updateCallbackDone read-only property of the ViewTransition interface is a Promise that fulfills when the promise returned by the document.startViewTransition()'s callback fulfills, or rejects when it rejects.">ViewTransition/updateCallbackDone</a> In only one current engine. <div class="support"> FirefoxNoneSafariNoneChrome111+ <hr> Opera?Edge111+ <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="viewtransition"> <summary>⚠MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/API/ViewTransition" title="The ViewTransition interface of the View Transitions API represents a view transition, and provides functionality to react to the transition reaching different states (e.g. ready to run the animation, or animation finished) or skip the transition altogether.">ViewTransition</a> In only one current engine. <div class="support"> FirefoxNoneSafariNoneChrome111+ <hr> Opera?Edge111+ <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="view-transition-name-prop"> <summary>⚠MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/view-transition-name" title="The view-transition-name CSS property provides the selected element with a distinct identifying name (a <custom-ident>) and causes it to participate in a separate view transition from the root view transition — or no view transition if the none value is specified.">view-transition-name</a> In only one current engine. <div class="support"> FirefoxNoneSafariNoneChrome111+ <hr> Opera?Edge111+ <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="::view-transition-group"> <summary>⚠MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::view-transition-group" title="The ::view-transition-group CSS pseudo-element represents a single view transition group.">::view-transition-group</a> In only one current engine. <div class="support"> FirefoxNoneSafariNoneChrome111+ <hr> Opera?Edge111+ <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="::view-transition-image-pair"> <summary>⚠MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::view-transition-image-pair" title="The ::view-transition-image-pair CSS pseudo-element represents a container for a view transition's "old" and "new" view states — before and after the transition.">::view-transition-image-pair</a> In only one current engine. <div class="support"> FirefoxNoneSafariNoneChrome111+ <hr> Opera?Edge111+ <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="::view-transition-new"> <summary>⚠MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::view-transition-new" title="The ::view-transition-new CSS pseudo-element represents the "new" view state of a view transition — a live representation of the new view, after the transition.">::view-transition-new</a> In only one current engine. <div class="support"> FirefoxNoneSafariNoneChrome111+ <hr> Opera?Edge111+ <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="::view-transition-old"> <summary>⚠MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::view-transition-old" title="The ::view-transition-old CSS pseudo-element represents the "old" view state of a view transition — a static screenshot of the old view, before the transition.">::view-transition-old</a> In only one current engine. <div class="support"> FirefoxNoneSafariNoneChrome111+ <hr> Opera?Edge111+ <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="selectordef-view-transition"> <summary>⚠MDN</summary> <div class="feature"> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::view-transition" title="The ::view-transition CSS pseudo-element represents the root of the view transitions overlay, which contains all view transitions and sits over the top of all other page content.">::view-transition</a> In only one current engine. <div class="support"> FirefoxNoneSafariNoneChrome111+ <hr> Opera?Edge111+ <hr> Edge (Legacy)?IENone <hr> Firefox for Android?iOS Safari?Chrome for Android?Android WebView?Samsung Internet?Opera Mobile? </div> </div> </details> <script>/* Boilerplate: script-dom-helper */ "use strict"; function query(sel) { return document.querySelector(sel); } function queryAll(sel) { return [...document.querySelectorAll(sel)]; } function iter(obj) { if(!obj) return []; var it = obj[Symbol.iterator]; if(it) return it; return Object.entries(obj); } function mk(tagname, attrs, ...children) { const el = document.createElement(tagname); for(const [k,v] of iter(attrs)) { if(k.slice(0,3) == "_on") { const eventName = k.slice(3); el.addEventListener(eventName, v); } else if(k[0] == "_") { // property, not attribute el[k.slice(1)] = v; } else { if(v === false || v == null) { continue; } else if(v === true) { el.setAttribute(k, ""); continue; } else { el.setAttribute(k, v); } } } append(el, children); return el; } /* Create shortcuts for every known HTML element */ [ "a", "abbr", "acronym", "address", "applet", "area", "article", "aside", "audio", "b", "base", "basefont", "bdo", "big", "blockquote", "body", "br", "button", "canvas", "caption", "center", "cite", "code", "col", "colgroup", "datalist", "dd", "del", "details", "dfn", "dialog", "div", "dl", "dt", "em", "embed", "fieldset", "figcaption", "figure", "font", "footer", "form", "frame", "frameset", "head", "header", "h1", "h2", "h3", "h4", "h5", "h6", "hr", "html", "i", "iframe", "img", "input", "ins", "kbd", "label", "legend", "li", "link", "main", "map", "mark", "meta", "meter", "nav", "nobr", "noscript", "object", "ol", "optgroup", "option", "output", "p", "param", "pre", "progress", "q", "s", "samp", "script", "section", "select", "small", "source", "span", "strike", "strong", "style", "sub", "summary", "sup", "table", "tbody", "td", "template", "textarea", "tfoot", "th", "thead", "time", "title", "tr", "u", "ul", "var", "video", "wbr", "xmp", ].forEach(tagname=>{ mk[tagname] = (...args) => mk(tagname, ...args); }); function* nodesFromChildList(children) { for(const child of children.flat(Infinity)) { if(child instanceof Node) { yield child; } else { yield new Text(child); } } } function append(el, ...children) { for(const child of nodesFromChildList(children)) { if(el instanceof Node) el.appendChild(child); else el.push(child); } return el; } function insertAfter(el, ...children) { for(const child of nodesFromChildList(children)) { el.parentNode.insertBefore(child, el.nextSibling); } return el; } function clearContents(el) { el.innerHTML = ""; return el; } function parseHTML(markup) { if(markup.toLowerCase().trim().indexOf('<!doctype') === 0) { const doc = document.implementation.createHTMLDocument(""); doc.documentElement.innerHTML = markup; return doc; } else { const el = mk.template({}); el.innerHTML = markup; return el.content; } }</script> <script>/* Boilerplate: script-dfn-panel */ "use strict"; { let dfnPanelData = { "00427b5a": {"dfnID":"00427b5a","dfnText":"document timeline","external":true,"refSections":[{"refs":[{"id":"ref-for-document-timeline"}],"title":"7.8. Handle transition frame"}],"url":"https://drafts.csswg.org/web-animations-1/#document-timeline"}, "0812e39f": {"dfnID":"0812e39f","dfnText":"ink overflow","external":true,"refSections":[{"refs":[{"id":"ref-for-ink-overflow"},{"id":"ref-for-ink-overflow\u2460"}],"title":"7.7. Capture the image"},{"refs":[{"id":"ref-for-ink-overflow\u2461"}],"title":"\nChanges from 2022-11-24 Working Draft\n"}],"url":"https://drafts.csswg.org/css-overflow-3/#ink-overflow"}, "0bc2c86d": {"dfnID":"0bc2c86d","dfnText":"originating pseudo-element","external":true,"refSections":[{"refs":[{"id":"ref-for-originating-pseudo-element"}],"title":"3.1. Pseudo-element Trees"}],"url":"https://drafts.csswg.org/selectors-4/#originating-pseudo-element"}, "0e8de730": {"dfnID":"0e8de730","dfnText":"tuple","external":true,"refSections":[{"refs":[{"id":"ref-for-tuple"}],"title":"4.1. The Snapshot Containing Block"},{"refs":[{"id":"ref-for-tuple\u2460"}],"title":"6.2. The ViewTransition interface"}],"url":"https://infra.spec.whatwg.org/#tuple"}, "0ea71fc8": {"dfnID":"0ea71fc8","dfnText":"pending animation event queue","external":true,"refSections":[{"refs":[{"id":"ref-for-pending-animation-event-queue"}],"title":"7.8. Handle transition frame"}],"url":"https://drafts.csswg.org/web-animations-1/#pending-animation-event-queue"}, "0ebcaeb1": {"dfnID":"0ebcaeb1","dfnText":"pointer capture","external":true,"refSections":[{"refs":[{"id":"ref-for-dfn-pointer-capture"}],"title":"7.1.1. Additions to Document"}],"url":"https://w3c.github.io/pointerevents/#dfn-pointer-capture"}, "10ce5f6f": {"dfnID":"10ce5f6f","dfnText":"invoke","external":true,"refSections":[{"refs":[{"id":"ref-for-invoke-a-callback-function"}],"title":"7.4. Call the update callback"}],"url":"https://webidl.spec.whatwg.org/#invoke-a-callback-function"}, "116848ac": {"dfnID":"116848ac","dfnText":"reacting","external":true,"refSections":[{"refs":[{"id":"ref-for-dfn-perform-steps-once-promise-is-settled"}],"title":"7.4. Call the update callback"},{"refs":[{"id":"ref-for-dfn-perform-steps-once-promise-is-settled\u2460"}],"title":"7.5. Skip the view transition"}],"url":"https://webidl.spec.whatwg.org/#dfn-perform-steps-once-promise-is-settled"}, "1171257a": {"dfnID":"1171257a","dfnText":"mark as handled","external":true,"refSections":[{"refs":[{"id":"ref-for-mark-a-promise-as-handled"},{"id":"ref-for-mark-a-promise-as-handled\u2460"},{"id":"ref-for-mark-a-promise-as-handled\u2461"}],"title":"6.2. The ViewTransition interface"},{"refs":[{"id":"ref-for-mark-a-promise-as-handled\u2462"}],"title":"7.4. Call the update callback"}],"url":"https://webidl.spec.whatwg.org/#mark-a-promise-as-handled"}, "11e0b87f": {"dfnID":"11e0b87f","dfnText":"unrestricted double","external":true,"refSections":[{"refs":[{"id":"ref-for-idl-unrestricted-double"}],"title":"7.1.3. Captured elements"}],"url":"https://webidl.spec.whatwg.org/#idl-unrestricted-double"}, "1243a891": {"dfnID":"1243a891","dfnText":"exist","external":true,"refSections":[{"refs":[{"id":"ref-for-map-exists"}],"title":"7.3.2. Capture the new state"}],"url":"https://infra.spec.whatwg.org/#map-exists"}, "12d6b9a8": {"dfnID":"12d6b9a8","dfnText":"values","external":true,"refSections":[{"refs":[{"id":"ref-for-map-getting-the-values"}],"title":"7.3. Setup view transition"},{"refs":[{"id":"ref-for-map-getting-the-values\u2460"}],"title":"7.10. Clear view transition"}],"url":"https://infra.spec.whatwg.org/#map-getting-the-values"}, "12f8fb07": {"dfnID":"12f8fb07","dfnText":"visibility","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-visibility"}],"title":"4.2. View Transition Painting Order"}],"url":"https://drafts.csswg.org/css-display-4/#propdef-visibility"}, "14c62133": {"dfnID":"14c62133","dfnText":"scrollbar gutter","external":true,"refSections":[{"refs":[{"id":"ref-for-scrollbar-gutter"}],"title":"4.1. The Snapshot Containing Block"}],"url":"https://drafts.csswg.org/css-overflow-3/#scrollbar-gutter"}, "15e48c39": {"dfnID":"15e48c39","dfnText":"set","external":true,"refSections":[{"refs":[{"id":"ref-for-ordered-set"}],"title":"7.3.1. Capture the old state"},{"refs":[{"id":"ref-for-ordered-set\u2460"}],"title":"7.3.2. Capture the new state"}],"url":"https://infra.spec.whatwg.org/#ordered-set"}, "16a52cab": {"dfnID":"16a52cab","dfnText":"tree-abiding pseudo-elements","external":true,"refSections":[{"refs":[{"id":"ref-for-tree-abiding\u2460"},{"id":"ref-for-tree-abiding\u2461"}],"title":"3.1. Pseudo-element Trees"}],"url":"https://drafts.csswg.org/css-pseudo-4/#tree-abiding"}, "16d07e10": {"dfnID":"16d07e10","dfnText":"for each (for list)","external":true,"refSections":[{"refs":[{"id":"ref-for-list-iterate"}],"title":"7.3. Setup view transition"},{"refs":[{"id":"ref-for-list-iterate\u2460"},{"id":"ref-for-list-iterate\u2461"},{"id":"ref-for-list-iterate\u2462"},{"id":"ref-for-list-iterate\u2463"}],"title":"7.3.1. Capture the old state"},{"refs":[{"id":"ref-for-list-iterate\u2464"}],"title":"7.3.2. Capture the new state"},{"refs":[{"id":"ref-for-list-iterate\u2465"}],"title":"7.7.1. Capture rendering characteristics"},{"refs":[{"id":"ref-for-list-iterate\u2466"}],"title":"7.8. Handle transition frame"},{"refs":[{"id":"ref-for-list-iterate\u2467"},{"id":"ref-for-list-iterate\u2468"}],"title":"7.10. Clear view transition"}],"url":"https://infra.spec.whatwg.org/#list-iterate"}, "187be130": {"dfnID":"187be130","dfnText":"play state","external":true,"refSections":[{"refs":[{"id":"ref-for-animation-play-state"}],"title":"7.8. Handle transition frame"}],"url":"https://drafts.csswg.org/web-animations-1/#animation-play-state"}, "2161cf2b": {"dfnID":"2161cf2b","dfnText":"pseudo-elements","external":true,"refSections":[{"refs":[{"id":"ref-for-x22"}],"title":"1.1. Separating Visual Transitions from DOM Updates"},{"refs":[{"id":"ref-for-x22\u2460"}],"title":"7.1.2. Additions to Elements"}],"url":"https://www.w3.org/TR/CSS21/selector.html#x22"}, "22109b0e": {"dfnID":"22109b0e","dfnText":"flat tree","external":true,"refSections":[{"refs":[{"id":"ref-for-flat-tree"}],"title":"7.3.1. Capture the old state"},{"refs":[{"id":"ref-for-flat-tree\u2460"}],"title":"7.3.2. Capture the new state"},{"refs":[{"id":"ref-for-flat-tree\u2461"}],"title":"7.9. Update pseudo-element styles"}],"url":"https://drafts.csswg.org/css-scoping-1/#flat-tree"}, "296f3551": {"dfnID":"296f3551","dfnText":"Element","external":true,"refSections":[{"refs":[{"id":"ref-for-element\u2462"}],"title":"2.1. Tagging Individually Transitioning Subtrees: the view-transition-name property"},{"refs":[{"id":"ref-for-element\u2460\u2461"}],"title":"7.7.1. Capture rendering characteristics"}],"url":"https://dom.spec.whatwg.org/#element"}, "2bc52ca2": {"dfnID":"2bc52ca2","dfnText":"NavigateEvent","external":true,"refSections":[{"refs":[{"id":"ref-for-navigateevent"}],"title":"1.4. Transitions as an enhancement"}],"url":"https://wicg.github.io/navigation-api/#navigateevent"}, "2e965368": {"dfnID":"2e965368","dfnText":"functional pseudo-element","external":true,"refSections":[{"refs":[{"id":"ref-for-functional-pseudo-element"}],"title":"3.2.1. Named View Transition Pseudo-elements"}],"url":"https://drafts.csswg.org/selectors-4/#functional-pseudo-element"}, "2f0ba72c": {"dfnID":"2f0ba72c","dfnText":"document element","external":true,"refSections":[{"refs":[{"id":"ref-for-document-element"},{"id":"ref-for-document-element\u2460"}],"title":"3.2. View Transition Pseudo-elements"},{"refs":[{"id":"ref-for-document-element\u2461"}],"title":"3.2.2. View Transition Tree Root: the ::view-transition pseudo-element"},{"refs":[{"id":"ref-for-document-element\u2462"}],"title":"4.1. The Snapshot Containing Block"},{"refs":[{"id":"ref-for-document-element\u2463"},{"id":"ref-for-document-element\u2464"},{"id":"ref-for-document-element\u2465"},{"id":"ref-for-document-element\u2466"}],"title":"7.1.1. Additions to Document"},{"refs":[{"id":"ref-for-document-element\u2467"}],"title":"7.3.1. Capture the old state"},{"refs":[{"id":"ref-for-document-element\u2468"}],"title":"7.7. Capture the image"},{"refs":[{"id":"ref-for-document-element\u2460\u24ea"}],"title":"7.9. Update pseudo-element styles"}],"url":"https://dom.spec.whatwg.org/#document-element"}, "3024958b": {"dfnID":"3024958b","dfnText":"method steps","external":true,"refSections":[{"refs":[{"id":"ref-for-method-steps"}],"title":"6.1.1. startViewTransition() Method Steps"},{"refs":[{"id":"ref-for-method-steps\u2460"}],"title":"6.2.1. skipTransition() Method Steps"}],"url":"https://webidl.spec.whatwg.org/#method-steps"}, "31c41a75": {"dfnID":"31c41a75","dfnText":"Backdrop Root","external":true,"refSections":[{"refs":[{"id":"ref-for-backdrop-root"}],"title":"2.1.1. Rendering Consolidation"}],"url":"https://drafts.fxtf.org/filter-effects-2/#backdrop-root"}, "32b3558b": {"dfnID":"32b3558b","dfnText":"height","external":true,"refSections":[{"refs":[{"id":"ref-for-dom-domrect-height"}],"title":"7.3.1. Capture the old state"}],"url":"https://drafts.fxtf.org/geometry-1/#dom-domrect-height"}, "32c45571": {"dfnID":"32c45571","dfnText":"type selector","external":true,"refSections":[{"refs":[{"id":"ref-for-type-selector"}],"title":"3.2.1. Named View Transition Pseudo-elements"}],"url":"https://drafts.csswg.org/selectors-4/#type-selector"}, "3349d69f": {"dfnID":"3349d69f","dfnText":"associated Document","external":true,"refSections":[{"refs":[{"id":"ref-for-concept-document-window"}],"title":"6.1.1. startViewTransition() Method Steps"},{"refs":[{"id":"ref-for-concept-document-window\u2460"}],"title":"7.3. Setup view transition"},{"refs":[{"id":"ref-for-concept-document-window\u2461"}],"title":"7.3.1. Capture the old state"},{"refs":[{"id":"ref-for-concept-document-window\u2462"}],"title":"7.3.2. Capture the new state"},{"refs":[{"id":"ref-for-concept-document-window\u2463"}],"title":"7.3.3. Setup transition pseudo-elements"},{"refs":[{"id":"ref-for-concept-document-window\u2464"}],"title":"7.5. Skip the view transition"},{"refs":[{"id":"ref-for-concept-document-window\u2465"}],"title":"7.8. Handle transition frame"},{"refs":[{"id":"ref-for-concept-document-window\u2466"}],"title":"7.9. Update pseudo-element styles"},{"refs":[{"id":"ref-for-concept-document-window\u2467"}],"title":"7.10. Clear view transition"}],"url":"https://html.spec.whatwg.org/multipage/nav-history-apis.html#concept-document-window"}, "33cbcfca": {"dfnID":"33cbcfca","dfnText":"selector","external":true,"refSections":[{"refs":[{"id":"ref-for-selector"},{"id":"ref-for-selector\u2460"},{"id":"ref-for-selector\u2461"}],"title":"3.2.1. Named View Transition Pseudo-elements"}],"url":"https://drafts.csswg.org/selectors-4/#selector"}, "385326d7": {"dfnID":"385326d7","dfnText":"writing-mode","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-writing-mode"}],"title":"7.1.3. Captured elements"},{"refs":[{"id":"ref-for-propdef-writing-mode\u2460"}],"title":"7.3.1. Capture the old state"},{"refs":[{"id":"ref-for-propdef-writing-mode\u2461"}],"title":"7.9. Update pseudo-element styles"}],"url":"https://drafts.csswg.org/css-writing-modes-4/#propdef-writing-mode"}, "3b90bdcd": {"dfnID":"3b90bdcd","dfnText":"resolve","external":true,"refSections":[{"refs":[{"id":"ref-for-resolve"}],"title":"7.3. Setup view transition"},{"refs":[{"id":"ref-for-resolve\u2460"}],"title":"7.4. Call the update callback"},{"refs":[{"id":"ref-for-resolve\u2461"}],"title":"7.5. Skip the view transition"},{"refs":[{"id":"ref-for-resolve\u2462"}],"title":"7.8. Handle transition frame"}],"url":"https://webidl.spec.whatwg.org/#resolve"}, "3bd4bbe9": {"dfnID":"3bd4bbe9","dfnText":"text-orientation","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-text-orientation"}],"title":"7.1.3. Captured elements"},{"refs":[{"id":"ref-for-propdef-text-orientation\u2460"}],"title":"7.3.1. Capture the old state"},{"refs":[{"id":"ref-for-propdef-text-orientation\u2461"}],"title":"7.9. Update pseudo-element styles"}],"url":"https://drafts.csswg.org/css-writing-modes-4/#propdef-text-orientation"}, "3c7a8d55": {"dfnID":"3c7a8d55","dfnText":"ink overflow rectangle","external":true,"refSections":[{"refs":[{"id":"ref-for-ink-overflow-rectangle"}],"title":"7.7. Capture the image"},{"refs":[{"id":"ref-for-ink-overflow-rectangle\u2460"},{"id":"ref-for-ink-overflow-rectangle\u2461"}],"title":"7.7.1. Capture rendering characteristics"}],"url":"https://drafts.csswg.org/css-overflow-3/#ink-overflow-rectangle"}, "3fca5a9e": {"dfnID":"3fca5a9e","dfnText":"map","external":true,"refSections":[{"refs":[{"id":"ref-for-ordered-map"},{"id":"ref-for-ordered-map\u2460"}],"title":"6.2. The ViewTransition interface"}],"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"}],"title":"6.1.1. startViewTransition() Method Steps"},{"refs":[{"id":"ref-for-this\u2462"},{"id":"ref-for-this\u2463"},{"id":"ref-for-this\u2464"},{"id":"ref-for-this\u2465"},{"id":"ref-for-this\u2466"},{"id":"ref-for-this\u2467"}],"title":"6.2. The ViewTransition interface"},{"refs":[{"id":"ref-for-this\u2468"},{"id":"ref-for-this\u2460\u24ea"}],"title":"6.2.1. skipTransition() Method Steps"},{"refs":[{"id":"ref-for-this\u2460\u2460"},{"id":"ref-for-this\u2460\u2461"},{"id":"ref-for-this\u2460\u2462"}],"title":"7.1.1. Additions to Document"},{"refs":[{"id":"ref-for-this\u2460\u2463"}],"title":"7.3.3. Setup transition pseudo-elements"}],"url":"https://webidl.spec.whatwg.org/#this"}, "4186822a": {"dfnID":"4186822a","dfnText":"scrolling box","external":true,"refSections":[{"refs":[{"id":"ref-for-scrolling-box"}],"title":"7.7. Capture the image"}],"url":"https://drafts.csswg.org/cssom-view-1/#scrolling-box"}, "45209803": {"dfnID":"45209803","dfnText":"for each (for map)","external":true,"refSections":[{"refs":[{"id":"ref-for-map-iterate"}],"title":"7.3.3. Setup transition pseudo-elements"},{"refs":[{"id":"ref-for-map-iterate\u2460"}],"title":"7.9. Update pseudo-element styles"}],"url":"https://infra.spec.whatwg.org/#map-iterate"}, "46c6a718": {"dfnID":"46c6a718","dfnText":"content box","external":true,"refSections":[{"refs":[{"id":"ref-for-content-box"}],"title":"7.7. Capture the image"}],"url":"https://drafts.csswg.org/css-box-4/#content-box"}, "48438eb3": {"dfnID":"48438eb3","dfnText":"queue a global task","external":true,"refSections":[{"refs":[{"id":"ref-for-queue-a-global-task"}],"title":"7.3. Setup view transition"},{"refs":[{"id":"ref-for-queue-a-global-task\u2460"}],"title":"7.4. Call the update callback"},{"refs":[{"id":"ref-for-queue-a-global-task\u2461"}],"title":"7.5. Skip the view transition"},{"refs":[{"id":"ref-for-queue-a-global-task\u2462"}],"title":"7.6. View transition page-visibility change steps"}],"url":"https://html.spec.whatwg.org/multipage/webappapis.html#queue-a-global-task"}, "4b2c8c72": {"dfnID":"4b2c8c72","dfnText":"duration","external":true,"refSections":[{"refs":[{"id":"ref-for-dfn-duration"}],"title":"7.4. Call the update callback"}],"url":"https://w3c.github.io/hr-time/#dfn-duration"}, "504c1ddb": {"dfnID":"504c1ddb","dfnText":"containing block","external":true,"refSections":[{"refs":[{"id":"ref-for-containing-block"}],"title":"3.2.2. View Transition Tree Root: the ::view-transition pseudo-element"},{"refs":[{"id":"ref-for-containing-block\u2460"}],"title":"7.1.1. Additions to Document"}],"url":"https://drafts.csswg.org/css-display-3/#containing-block"}, "5216e1a0": {"dfnID":"5216e1a0","dfnText":"node document","external":true,"refSections":[{"refs":[{"id":"ref-for-concept-node-document"}],"title":"2.1. Tagging Individually Transitioning Subtrees: the view-transition-name property"},{"refs":[{"id":"ref-for-concept-node-document\u2460"}],"title":"7.3.1. Capture the old state"},{"refs":[{"id":"ref-for-concept-node-document\u2461"}],"title":"7.3.2. Capture the new state"},{"refs":[{"id":"ref-for-concept-node-document\u2462"}],"title":"7.7. Capture the image"}],"url":"https://dom.spec.whatwg.org/#concept-node-document"}, "53275e46": {"dfnID":"53275e46","dfnText":"append (for list)","external":true,"refSections":[{"refs":[{"id":"ref-for-list-append"}],"title":"7.3.1. Capture the old state"}],"url":"https://infra.spec.whatwg.org/#list-append"}, "53a193f1": {"dfnID":"53a193f1","dfnText":"*","external":true,"refSections":[{"refs":[{"id":"ref-for-x"},{"id":"ref-for-x\u2460"}],"title":"3.2.1. Named View Transition Pseudo-elements"}],"url":"https://drafts.csswg.org/selectors-3/#x"}, "54fa0afb": {"dfnID":"54fa0afb","dfnText":"backdrop-filter","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-backdrop-filter"}],"title":"7.1.3. Captured elements"},{"refs":[{"id":"ref-for-propdef-backdrop-filter\u2460"}],"title":"7.3.1. Capture the old state"},{"refs":[{"id":"ref-for-propdef-backdrop-filter\u2461"}],"title":"7.9. Update pseudo-element styles"}],"url":"https://drafts.fxtf.org/filter-effects-2/#propdef-backdrop-filter"}, "559a1521": {"dfnID":"559a1521","dfnText":"isolation","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-isolation"}],"title":"3.2.4. View Transition Image Pair Isolation: the ::view-transition-image-pair() pseudo-element"}],"url":"https://drafts.fxtf.org/compositing-2/#propdef-isolation"}, "55e6f293": {"dfnID":"55e6f293","dfnText":"associated effect","external":true,"refSections":[{"refs":[{"id":"ref-for-animation-associated-effect"}],"title":"7.8. Handle transition frame"}],"url":"https://drafts.csswg.org/web-animations-1/#animation-associated-effect"}, "58df5166": {"dfnID":"58df5166","dfnText":"participate","external":true,"refSections":[{"refs":[{"id":"ref-for-concept-tree-participate"}],"title":"3.1. Pseudo-element Trees"}],"url":"https://dom.spec.whatwg.org/#concept-tree-participate"}, "5991ccfb": {"dfnID":"5991ccfb","dfnText":"relevant realm","external":true,"refSections":[{"refs":[{"id":"ref-for-concept-relevant-realm"},{"id":"ref-for-concept-relevant-realm\u2460"}],"title":"6.1.1. startViewTransition() Method Steps"},{"refs":[{"id":"ref-for-concept-relevant-realm\u2461"},{"id":"ref-for-concept-relevant-realm\u2462"},{"id":"ref-for-concept-relevant-realm\u2463"}],"title":"6.2. The ViewTransition interface"},{"refs":[{"id":"ref-for-concept-relevant-realm\u2464"},{"id":"ref-for-concept-relevant-realm\u2465"},{"id":"ref-for-concept-relevant-realm\u2466"}],"title":"7.3. Setup view transition"},{"refs":[{"id":"ref-for-concept-relevant-realm\u2467"}],"title":"7.4. Call the update callback"},{"refs":[{"id":"ref-for-concept-relevant-realm\u2468"},{"id":"ref-for-concept-relevant-realm\u2460\u24ea"}],"title":"7.8. Handle transition frame"}],"url":"https://html.spec.whatwg.org/multipage/webappapis.html#concept-relevant-realm"}, "5a7dff27": {"dfnID":"5a7dff27","dfnText":"scroll-driven animations","external":true,"refSections":[{"refs":[{"id":"ref-for-scroll-driven-animations"}],"title":"2.1. Tagging Individually Transitioning Subtrees: the view-transition-name property"}],"url":"https://drafts.csswg.org/scroll-animations-1/#scroll-driven-animations"}, "5bc8bd12": {"dfnID":"5bc8bd12","dfnText":"direction","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-direction"}],"title":"7.1.3. Captured elements"},{"refs":[{"id":"ref-for-propdef-direction\u2460"}],"title":"7.3.1. Capture the old state"},{"refs":[{"id":"ref-for-propdef-direction\u2461"}],"title":"7.9. Update pseudo-element styles"}],"url":"https://drafts.csswg.org/css-writing-modes-3/#propdef-direction"}, "5e7582d3": {"dfnID":"5e7582d3","dfnText":"width","external":true,"refSections":[{"refs":[{"id":"ref-for-dom-domrect-width"}],"title":"7.3.1. Capture the old state"}],"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"}],"title":"6.2. The ViewTransition interface"}],"url":"https://webidl.spec.whatwg.org/#idl-undefined"}, "6052f41c": {"dfnID":"6052f41c","dfnText":"CSSStyleRule","external":true,"refSections":[{"refs":[{"id":"ref-for-cssstylerule"},{"id":"ref-for-cssstylerule\u2460"},{"id":"ref-for-cssstylerule\u2461"},{"id":"ref-for-cssstylerule\u2462"}],"title":"7.1.3. Captured elements"},{"refs":[{"id":"ref-for-cssstylerule\u2463"},{"id":"ref-for-cssstylerule\u2464"},{"id":"ref-for-cssstylerule\u2465"},{"id":"ref-for-cssstylerule\u2466"},{"id":"ref-for-cssstylerule\u2467"}],"title":"7.3.3. Setup transition pseudo-elements"},{"refs":[{"id":"ref-for-cssstylerule\u2468"}],"title":"7.9. Update pseudo-element styles"}],"url":"https://drafts.csswg.org/cssom-1/#cssstylerule"}, "609d221d": {"dfnID":"609d221d","dfnText":"paused","external":true,"refSections":[{"refs":[{"id":"ref-for-play-state-paused"}],"title":"7.8. Handle transition frame"}],"url":"https://drafts.csswg.org/web-animations-1/#play-state-paused"}, "60fce434": {"dfnID":"60fce434","dfnText":"<transform-function>","external":true,"refSections":[{"refs":[{"id":"ref-for-typedef-transform-function"}],"title":"7.1.3. Captured elements"},{"refs":[{"id":"ref-for-typedef-transform-function\u2460"}],"title":"7.3.1. Capture the old state"}],"url":"https://drafts.csswg.org/css-transforms-2/#typedef-transform-function"}, "63fe4250": {"dfnID":"63fe4250","dfnText":"user-agent origin","external":true,"refSections":[{"refs":[{"id":"ref-for-cascade-origin-ua"},{"id":"ref-for-cascade-origin-ua\u2460"}],"title":"5. User Agent Stylesheet"},{"refs":[{"id":"ref-for-cascade-origin-ua\u2461"}],"title":"7.1.1. Additions to Document"},{"refs":[{"id":"ref-for-cascade-origin-ua\u2462"}],"title":"7.9. Update pseudo-element styles"}],"url":"https://drafts.csswg.org/css-cascade-5/#cascade-origin-ua"}, "644cdfa3": {"dfnID":"644cdfa3","dfnText":"element contents","external":true,"refSections":[{"refs":[{"id":"ref-for-element-contents"}],"title":"4.2. View Transition Painting Order"}],"url":"https://drafts.csswg.org/css-contain-2/#element-contents"}, "649608b9": {"dfnID":"649608b9","dfnText":"list","external":true,"refSections":[{"refs":[{"id":"ref-for-list"}],"title":"7.3.1. Capture the old state"}],"url":"https://infra.spec.whatwg.org/#list"}, "68019d7a": {"dfnID":"68019d7a","dfnText":"height","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-height"}],"title":"3.2.3. View Transition Named Subtree Root: the ::view-transition-group() pseudo-element"}],"url":"https://drafts.csswg.org/css-sizing-3/#propdef-height"}, "6c6b1005": {"dfnID":"6c6b1005","dfnText":"any","external":true,"refSections":[{"refs":[{"id":"ref-for-idl-any"}],"title":"6.1. Additions to Document"}],"url":"https://webidl.spec.whatwg.org/#idl-any"}, "6ec67710": {"dfnID":"6ec67710","dfnText":"|","external":true,"refSections":[{"refs":[{"id":"ref-for-comb-one"}],"title":"2.1. Tagging Individually Transitioning Subtrees: the view-transition-name property"},{"refs":[{"id":"ref-for-comb-one\u2460"}],"title":"3.2.1. Named View Transition Pseudo-elements"}],"url":"https://drafts.csswg.org/css-values-4/#comb-one"}, "73bc6606": {"dfnID":"73bc6606","dfnText":"pointer-events","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-pointer-events"}],"title":"4.2. View Transition Painting Order"}],"url":"https://drafts.csswg.org/css-ui-4/#propdef-pointer-events"}, "750a2f08": {"dfnID":"750a2f08","dfnText":"react","external":true,"refSections":[{"refs":[{"id":"ref-for-dfn-perform-steps-once-promise-is-settled"}],"title":"7.4. Call the update callback"},{"refs":[{"id":"ref-for-dfn-perform-steps-once-promise-is-settled\u2460"}],"title":"7.5. Skip the view transition"}],"url":"https://webidl.spec.whatwg.org/#dfn-perform-steps-once-promise-is-settled"}, "778f8dbd": {"dfnID":"778f8dbd","dfnText":"tree-scoped name","external":true,"refSections":[{"refs":[{"id":"ref-for-css-tree-scoped-name"}],"title":"2.1. Tagging Individually Transitioning Subtrees: the view-transition-name property"}],"url":"https://drafts.csswg.org/css-scoping-1/#css-tree-scoped-name"}, "77b4c09a": {"dfnID":"77b4c09a","dfnText":"assert","external":true,"refSections":[{"refs":[{"id":"ref-for-assert"},{"id":"ref-for-assert\u2460"}],"title":"7.3.3. Setup transition pseudo-elements"},{"refs":[{"id":"ref-for-assert\u2461"}],"title":"7.4. Call the update callback"},{"refs":[{"id":"ref-for-assert\u2462"}],"title":"7.5. Skip the view transition"},{"refs":[{"id":"ref-for-assert\u2463"}],"title":"7.6. View transition page-visibility change steps"},{"refs":[{"id":"ref-for-assert\u2464"}],"title":"7.10. Clear view transition"}],"url":"https://infra.spec.whatwg.org/#assert"}, "77f17203": {"dfnID":"77f17203","dfnText":"clip-path","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-clip-path"}],"title":"1.5. Rendering Model"}],"url":"https://drafts.fxtf.org/css-masking-1/#propdef-clip-path"}, "797018a7": {"dfnID":"797018a7","dfnText":"InvalidStateError","external":true,"refSections":[{"refs":[{"id":"ref-for-invalidstateerror"}],"title":"6.1.1. startViewTransition() Method Steps"},{"refs":[{"id":"ref-for-invalidstateerror\u2460"},{"id":"ref-for-invalidstateerror\u2461"},{"id":"ref-for-invalidstateerror\u2462"}],"title":"7.3. Setup view transition"},{"refs":[{"id":"ref-for-invalidstateerror\u2463"}],"title":"7.6. View transition page-visibility change steps"},{"refs":[{"id":"ref-for-invalidstateerror\u2464"},{"id":"ref-for-invalidstateerror\u2465"}],"title":"7.8. Handle transition frame"}],"url":"https://webidl.spec.whatwg.org/#invalidstateerror"}, "7df798b5": {"dfnID":"7df798b5","dfnText":"skips its contents","external":true,"refSections":[{"refs":[{"id":"ref-for-skips-its-contents"}],"title":"2.1. Tagging Individually Transitioning Subtrees: the view-transition-name property"},{"refs":[{"id":"ref-for-skips-its-contents\u2460"}],"title":"7.3.1. Capture the old state"},{"refs":[{"id":"ref-for-skips-its-contents\u2461"}],"title":"7.3.2. Capture the new state"},{"refs":[{"id":"ref-for-skips-its-contents\u2462"}],"title":"7.9. Update pseudo-element styles"}],"url":"https://drafts.csswg.org/css-contain-2/#skips-its-contents"}, "7fd5d6f8": {"dfnID":"7fd5d6f8","dfnText":"effect target","external":true,"refSections":[{"refs":[{"id":"ref-for-keyframe-effect-effect-target"}],"title":"7.8. Handle transition frame"}],"url":"https://drafts.csswg.org/web-animations-1/#keyframe-effect-effect-target"}, "80eb9508": {"dfnID":"80eb9508","dfnText":"principal box","external":true,"refSections":[{"refs":[{"id":"ref-for-principal-box"}],"title":"2.1. Tagging Individually Transitioning Subtrees: the view-transition-name property"},{"refs":[{"id":"ref-for-principal-box\u2460"},{"id":"ref-for-principal-box\u2461"}],"title":"7.7. Capture the image"}],"url":"https://drafts.csswg.org/css-display-4/#principal-box"}, "82805a4e": {"dfnID":"82805a4e","dfnText":"originating element","external":true,"refSections":[{"refs":[{"id":"ref-for-originating-element"}],"title":"3.2. View Transition Pseudo-elements"},{"refs":[{"id":"ref-for-originating-element\u2460"}],"title":"3.2.2. View Transition Tree Root: the ::view-transition pseudo-element"},{"refs":[{"id":"ref-for-originating-element\u2461"}],"title":"7.1.1. Additions to Document"}],"url":"https://drafts.csswg.org/selectors-4/#originating-element"}, "83120856": {"dfnID":"83120856","dfnText":"CSSKeyframesRule","external":true,"refSections":[{"refs":[{"id":"ref-for-csskeyframesrule"}],"title":"7.1.3. Captured elements"},{"refs":[{"id":"ref-for-csskeyframesrule\u2460"}],"title":"7.3.3. Setup transition pseudo-elements"}],"url":"https://drafts.csswg.org/css-animations-1/#csskeyframesrule"}, "833154f2": {"dfnID":"833154f2","dfnText":"getter steps","external":true,"refSections":[{"refs":[{"id":"ref-for-getter-steps"},{"id":"ref-for-getter-steps\u2460"},{"id":"ref-for-getter-steps\u2461"}],"title":"6.2. The ViewTransition interface"}],"url":"https://webidl.spec.whatwg.org/#getter-steps"}, "84f47c16": {"dfnID":"84f47c16","dfnText":"child","external":true,"refSections":[{"refs":[{"id":"ref-for-concept-tree-child"}],"title":"3.1. Pseudo-element Trees"},{"refs":[{"id":"ref-for-concept-tree-child\u2460"}],"title":"3.2.3. View Transition Named Subtree Root: the ::view-transition-group() pseudo-element"},{"refs":[{"id":"ref-for-concept-tree-child\u2461"},{"id":"ref-for-concept-tree-child\u2462"}],"title":"3.2.4. View Transition Image Pair Isolation: the ::view-transition-image-pair() pseudo-element"},{"refs":[{"id":"ref-for-concept-tree-child\u2463"}],"title":"3.2.5. View Transition Old State Image: the ::view-transition-old() pseudo-element"},{"refs":[{"id":"ref-for-concept-tree-child\u2464"}],"title":"3.2.6. View Transition New State Image: the ::view-transition-new() pseudo-element"}],"url":"https://dom.spec.whatwg.org/#concept-tree-child"}, "85394472": {"dfnID":"85394472","dfnText":"Document","external":true,"refSections":[{"refs":[{"id":"ref-for-document"},{"id":"ref-for-document\u2460"}],"title":"4.2. View Transition Painting Order"},{"refs":[{"id":"ref-for-document\u2461"},{"id":"ref-for-document\u2462"},{"id":"ref-for-document\u2463"},{"id":"ref-for-document\u2464"}],"title":"6.1. Additions to Document"},{"refs":[{"id":"ref-for-document\u2465"},{"id":"ref-for-document\u2466"},{"id":"ref-for-document\u2467"}],"title":"7.1.1. Additions to Document"},{"refs":[{"id":"ref-for-document\u2468"}],"title":"7.2. Perform pending transition operations"},{"refs":[{"id":"ref-for-document\u2460\u24ea"}],"title":"7.6. View transition page-visibility change steps"},{"refs":[{"id":"ref-for-document\u2460\u2460"}],"title":"\nChanges from 2023-05-30 Working Draft\n"}],"url":"https://dom.spec.whatwg.org/#document"}, "860300d4": {"dfnID":"860300d4","dfnText":"implementation-defined","external":true,"refSections":[{"refs":[{"id":"ref-for-implementation-defined"}],"title":"7.3.1. Capture the old state"},{"refs":[{"id":"ref-for-implementation-defined\u2460"}],"title":"7.7.1. Capture rendering characteristics"}],"url":"https://infra.spec.whatwg.org/#implementation-defined"}, "86928bde": {"dfnID":"86928bde","dfnText":"overflow","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-overflow"}],"title":"1.5. Rendering Model"}],"url":"https://drafts.csswg.org/css-overflow-3/#propdef-overflow"}, "88643fe0": {"dfnID":"88643fe0","dfnText":"width","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-width"}],"title":"3.2.3. View Transition Named Subtree Root: the ::view-transition-group() pseudo-element"}],"url":"https://drafts.csswg.org/css-sizing-3/#propdef-width"}, "889e932f": {"dfnID":"889e932f","dfnText":"Exposed","external":true,"refSections":[{"refs":[{"id":"ref-for-Exposed"}],"title":"6.2. The ViewTransition interface"}],"url":"https://webidl.spec.whatwg.org/#Exposed"}, "8baec6ed": {"dfnID":"8baec6ed","dfnText":"timeline","external":true,"refSections":[{"refs":[{"id":"ref-for-timeline"}],"title":"2.1. Tagging Individually Transitioning Subtrees: the view-transition-name property"},{"refs":[{"id":"ref-for-timeline\u2460"}],"title":"7.8. Handle transition frame"}],"url":"https://drafts.csswg.org/web-animations-1/#timeline"}, "8d0ede2c": {"dfnID":"8d0ede2c","dfnText":"initial containing block","external":true,"refSections":[{"refs":[{"id":"ref-for-initial-containing-block"}],"title":"4. View Transition Layout"}],"url":"https://drafts.csswg.org/css-display-4/#initial-containing-block"}, "8dc5385c": {"dfnID":"8dc5385c","dfnText":"running","external":true,"refSections":[{"refs":[{"id":"ref-for-play-state-running"}],"title":"7.8. Handle transition frame"}],"url":"https://drafts.csswg.org/web-animations-1/#play-state-running"}, "8f59bb58": {"dfnID":"8f59bb58","dfnText":"top layer","external":true,"refSections":[{"refs":[{"id":"ref-for-document-top-layer"}],"title":"4.2. View Transition Painting Order"},{"refs":[{"id":"ref-for-document-top-layer\u2460"}],"title":"7.7. Capture the image"}],"url":"https://drafts.csswg.org/css-position-4/#document-top-layer"}, "8f5c2179": {"dfnID":"8f5c2179","dfnText":"a promise resolved with","external":true,"refSections":[{"refs":[{"id":"ref-for-a-promise-resolved-with"}],"title":"7.4. Call the update callback"}],"url":"https://webidl.spec.whatwg.org/#a-promise-resolved-with"}, "91bfbe18": {"dfnID":"91bfbe18","dfnText":"opacity","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-opacity"}],"title":"1.5. Rendering Model"},{"refs":[{"id":"ref-for-propdef-opacity\u2460"}],"title":"7.7.1. Capture rendering characteristics"}],"url":"https://drafts.csswg.org/css-color-4/#propdef-opacity"}, "93ed342d": {"dfnID":"93ed342d","dfnText":"interactive-widget","external":true,"refSections":[{"refs":[{"id":"ref-for-interactive-widget"}],"title":"4.1. The Snapshot Containing Block"}],"url":"https://drafts.csswg.org/css-viewport/#interactive-widget"}, "945f60e5": {"dfnID":"945f60e5","dfnText":"canvas background","external":true,"refSections":[{"refs":[{"id":"ref-for-canvas-background"},{"id":"ref-for-canvas-background\u2460"}],"title":"7.7. Capture the image"}],"url":"https://drafts.csswg.org/css-backgrounds-3/#canvas-background"}, "9638f92b": {"dfnID":"9638f92b","dfnText":"connected","external":true,"refSections":[{"refs":[{"id":"ref-for-connected"}],"title":"7.3.1. Capture the old state"},{"refs":[{"id":"ref-for-connected\u2460"}],"title":"7.3.2. Capture the new state"}],"url":"https://dom.spec.whatwg.org/#connected"}, "984221ca": {"dfnID":"984221ca","dfnText":"struct","external":true,"refSections":[{"refs":[{"id":"ref-for-struct"}],"title":"7.1.3. Captured elements"}],"url":"https://infra.spec.whatwg.org/#struct"}, "9bdefa58": {"dfnID":"9bdefa58","dfnText":"fragment","external":true,"refSections":[{"refs":[{"id":"ref-for-fragment"}],"title":"2.1. Tagging Individually Transitioning Subtrees: the view-transition-name property"}],"url":"https://drafts.csswg.org/css-break-4/#fragment"}, "9be179f5": {"dfnID":"9be179f5","dfnText":"IntersectionObserver","external":true,"refSections":[{"refs":[{"id":"ref-for-intersectionobserver"}],"title":"7.7. Capture the image"}],"url":"https://w3c.github.io/IntersectionObserver/#intersectionobserver"}, "9bfc28f6": {"dfnID":"9bfc28f6","dfnText":"pseudo-element","external":true,"refSections":[{"refs":[{"id":"ref-for-pseudo-element"}],"title":"3.1. Pseudo-element Trees"},{"refs":[{"id":"ref-for-pseudo-element\u2460"},{"id":"ref-for-pseudo-element\u2461"}],"title":"3.2.1. Named View Transition Pseudo-elements"},{"refs":[{"id":"ref-for-pseudo-element\u2462"}],"title":"3.2.2. View Transition Tree Root: the ::view-transition pseudo-element"},{"refs":[{"id":"ref-for-pseudo-element\u2463"},{"id":"ref-for-pseudo-element\u2464"},{"id":"ref-for-pseudo-element\u2465"}],"title":"3.2.3. View Transition Named Subtree Root: the ::view-transition-group() pseudo-element"},{"refs":[{"id":"ref-for-pseudo-element\u2466"}],"title":"3.2.4. View Transition Image Pair Isolation: the ::view-transition-image-pair() pseudo-element"},{"refs":[{"id":"ref-for-pseudo-element\u2467"}],"title":"3.2.5. View Transition Old State Image: the ::view-transition-old() pseudo-element"},{"refs":[{"id":"ref-for-pseudo-element\u2468"}],"title":"3.2.6. View Transition New State Image: the ::view-transition-new() pseudo-element"},{"refs":[{"id":"ref-for-pseudo-element\u2460\u24ea"}],"title":"7.7.1. Capture rendering characteristics"}],"url":"https://drafts.csswg.org/selectors-4/#pseudo-element"}, "9c1b838f": {"dfnID":"9c1b838f","dfnText":"element-not-rendered","external":true,"refSections":[{"refs":[{"id":"ref-for-element-not-rendered"}],"title":"2.1. Tagging Individually Transitioning Subtrees: the view-transition-name property"},{"refs":[{"id":"ref-for-element-not-rendered\u2460"}],"title":"7.3.1. Capture the old state"},{"refs":[{"id":"ref-for-element-not-rendered\u2461"}],"title":"7.3.2. Capture the new state"},{"refs":[{"id":"ref-for-element-not-rendered\u2462"}],"title":"7.9. Update pseudo-element styles"}],"url":"https://drafts.csswg.org/css-images-4/#element-not-rendered"}, "9cd25054": {"dfnID":"9cd25054","dfnText":"computed value","external":true,"refSections":[{"refs":[{"id":"ref-for-computed-value"}],"title":"2.1. Tagging Individually Transitioning Subtrees: the view-transition-name property"},{"refs":[{"id":"ref-for-computed-value\u2460"}],"title":"2.1.1. Rendering Consolidation"},{"refs":[{"id":"ref-for-computed-value\u2461"},{"id":"ref-for-computed-value\u2462"},{"id":"ref-for-computed-value\u2463"},{"id":"ref-for-computed-value\u2464"},{"id":"ref-for-computed-value\u2465"},{"id":"ref-for-computed-value\u2466"},{"id":"ref-for-computed-value\u2467"}],"title":"7.3.1. Capture the old state"},{"refs":[{"id":"ref-for-computed-value\u2468"},{"id":"ref-for-computed-value\u2460\u24ea"},{"id":"ref-for-computed-value\u2460\u2460"},{"id":"ref-for-computed-value\u2460\u2461"},{"id":"ref-for-computed-value\u2460\u2462"},{"id":"ref-for-computed-value\u2460\u2463"}],"title":"7.9. Update pseudo-element styles"}],"url":"https://drafts.csswg.org/css-cascade-5/#computed-value"}, "9f184b64": {"dfnID":"9f184b64","dfnText":"filter","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-filter"}],"title":"1.5. Rendering Model"},{"refs":[{"id":"ref-for-propdef-filter\u2460"}],"title":"7.7.1. Capture rendering characteristics"}],"url":"https://drafts.fxtf.org/filter-effects-1/#propdef-filter"}, "a3331757": {"dfnID":"a3331757","dfnText":"signal","external":true,"refSections":[{"refs":[{"id":"ref-for-ref-for-dom-navigateevent-signal\u2460"}],"title":"1.4. Transitions as an enhancement"}],"url":"https://wicg.github.io/navigation-api/#ref-for-dom-navigateevent-signal\u2460"}, "a3b18719": {"dfnID":"a3b18719","dfnText":"append (for set)","external":true,"refSections":[{"refs":[{"id":"ref-for-set-append"}],"title":"7.3.1. Capture the old state"},{"refs":[{"id":"ref-for-set-append\u2460"}],"title":"7.3.2. Capture the new state"}],"url":"https://infra.spec.whatwg.org/#set-append"}, "a50c2771": {"dfnID":"a50c2771","dfnText":"stacking context","external":true,"refSections":[{"refs":[{"id":"ref-for-x43"}],"title":"2.1.1. Rendering Consolidation"}],"url":"https://www.w3.org/TR/CSS21/visuren.html#x43"}, "a72449dd": {"dfnID":"a72449dd","dfnText":"in parallel","external":true,"refSections":[{"refs":[{"id":"ref-for-in-parallel"}],"title":"7.4. Call the update callback"}],"url":"https://html.spec.whatwg.org/multipage/infrastructure.html#in-parallel"}, "a973e0fe": {"dfnID":"a973e0fe","dfnText":"document","external":true,"refSections":[{"refs":[{"id":"ref-for-concept-document"}],"title":"1. Introduction"},{"refs":[{"id":"ref-for-concept-document\u2460"}],"title":"7.1.3. Captured elements"}],"url":"https://dom.spec.whatwg.org/#concept-document"}, "activate-view-transition": {"dfnID":"activate-view-transition","dfnText":"activate view transition","external":false,"refSections":[{"refs":[{"id":"ref-for-activate-view-transition"}],"title":"7.4. Call the update callback"}],"url":"#activate-view-transition"}, "ad10ee29": {"dfnID":"ad10ee29","dfnText":"sibling","external":true,"refSections":[{"refs":[{"id":"ref-for-concept-tree-sibling"},{"id":"ref-for-concept-tree-sibling\u2460"}],"title":"3.1. Pseudo-element Trees"}],"url":"https://dom.spec.whatwg.org/#concept-tree-sibling"}, "ae8def21": {"dfnID":"ae8def21","dfnText":"contain","external":true,"refSections":[{"refs":[{"id":"ref-for-list-contain"}],"title":"7.3.1. Capture the old state"},{"refs":[{"id":"ref-for-list-contain\u2460"}],"title":"7.3.2. Capture the new state"}],"url":"https://infra.spec.whatwg.org/#list-contain"}, "b262501e": {"dfnID":"b262501e","dfnText":"reject","external":true,"refSections":[{"refs":[{"id":"ref-for-reject"}],"title":"7.4. Call the update callback"},{"refs":[{"id":"ref-for-reject\u2460"}],"title":"7.5. Skip the view transition"}],"url":"https://webidl.spec.whatwg.org/#reject"}, "b4485d57": {"dfnID":"b4485d57","dfnText":"absolute positioning containing block","external":true,"refSections":[{"refs":[{"id":"ref-for-absolute-positioning-containing-block"}],"title":"4.1. The Snapshot Containing Block"},{"refs":[{"id":"ref-for-absolute-positioning-containing-block\u2460"}],"title":"\nChanges from 2022-11-24 Working Draft\n"}],"url":"https://drafts.csswg.org/css-position-3/#absolute-positioning-containing-block"}, "b4c365f8": {"dfnID":"b4c365f8","dfnText":"visibility state","external":true,"refSections":[{"refs":[{"id":"ref-for-visibility-state"}],"title":"6.1.1. startViewTransition() Method Steps"},{"refs":[{"id":"ref-for-visibility-state\u2460"}],"title":"7.6. View transition page-visibility change steps"}],"url":"https://html.spec.whatwg.org/multipage/interaction.html#visibility-state"}, "b5ecbd4e": {"dfnID":"b5ecbd4e","dfnText":"tree-abiding pseudo-element","external":true,"refSections":[{"refs":[{"id":"ref-for-tree-abiding"}],"title":"3.1. Pseudo-element Trees"},{"refs":[{"id":"ref-for-tree-abiding\u2462"}],"title":"3.2.1. Named View Transition Pseudo-elements"},{"refs":[{"id":"ref-for-tree-abiding\u2463"}],"title":"3.2.2. View Transition Tree Root: the ::view-transition pseudo-element"}],"url":"https://www.w3.org/TR/css-pseudo-4/#tree-abiding"}, "bdbd19d1": {"dfnID":"bdbd19d1","dfnText":"Promise","external":true,"refSections":[{"refs":[{"id":"ref-for-idl-promise"}],"title":"6.1. Additions to Document"},{"refs":[{"id":"ref-for-idl-promise\u2460"},{"id":"ref-for-idl-promise\u2461"},{"id":"ref-for-idl-promise\u2462"},{"id":"ref-for-idl-promise\u2463"},{"id":"ref-for-idl-promise\u2464"},{"id":"ref-for-idl-promise\u2465"}],"title":"6.2. The ViewTransition interface"}],"url":"https://webidl.spec.whatwg.org/#idl-promise"}, "c373c5f8": {"dfnID":"c373c5f8","dfnText":"color-scheme","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-color-scheme"}],"title":"7.1.3. Captured elements"},{"refs":[{"id":"ref-for-propdef-color-scheme\u2460"}],"title":"7.3.1. Capture the old state"},{"refs":[{"id":"ref-for-propdef-color-scheme\u2461"}],"title":"7.9. Update pseudo-element styles"}],"url":"https://drafts.csswg.org/css-color-adjust-1/#propdef-color-scheme"}, "c3bd6e1d": {"dfnID":"c3bd6e1d","dfnText":"box fragment","external":true,"refSections":[{"refs":[{"id":"ref-for-box-fragment"},{"id":"ref-for-box-fragment\u2460"}],"title":"7.3.1. Capture the old state"},{"refs":[{"id":"ref-for-box-fragment\u2461"}],"title":"7.3.2. Capture the new state"},{"refs":[{"id":"ref-for-box-fragment\u2462"}],"title":"7.9. Update pseudo-element styles"}],"url":"https://drafts.csswg.org/css-break-4/#box-fragment"}, "c6027972": {"dfnID":"c6027972","dfnText":"fixed positioning containing block","external":true,"refSections":[{"refs":[{"id":"ref-for-fixed-positioning-containing-block"}],"title":"4.1. The Snapshot Containing Block"},{"refs":[{"id":"ref-for-fixed-positioning-containing-block\u2460"}],"title":"\nChanges from 2022-11-24 Working Draft\n"}],"url":"https://drafts.csswg.org/css-position-3/#fixed-positioning-containing-block"}, "call-the-update-callback": {"dfnID":"call-the-update-callback","dfnText":"call the update callback","external":false,"refSections":[{"refs":[{"id":"ref-for-call-the-update-callback"}],"title":"7.3. Setup view transition"},{"refs":[{"id":"ref-for-call-the-update-callback\u2460"}],"title":"7.4. Call the update callback"},{"refs":[{"id":"ref-for-call-the-update-callback\u2461"}],"title":"7.5. Skip the view transition"}],"url":"#call-the-update-callback"}, "callbackdef-viewtransitionupdatecallback": {"dfnID":"callbackdef-viewtransitionupdatecallback","dfnText":"ViewTransitionUpdateCallback","external":false,"refSections":[{"refs":[{"id":"ref-for-callbackdef-viewtransitionupdatecallback"},{"id":"ref-for-callbackdef-viewtransitionupdatecallback\u2460"}],"title":"1.3. View Transition Lifecycle"},{"refs":[{"id":"ref-for-callbackdef-viewtransitionupdatecallback\u2461"},{"id":"ref-for-callbackdef-viewtransitionupdatecallback\u2462"},{"id":"ref-for-callbackdef-viewtransitionupdatecallback\u2463"}],"title":"1.4. Transitions as an enhancement"},{"refs":[{"id":"ref-for-callbackdef-viewtransitionupdatecallback\u2464"},{"id":"ref-for-callbackdef-viewtransitionupdatecallback\u2465"},{"id":"ref-for-callbackdef-viewtransitionupdatecallback\u2466"},{"id":"ref-for-callbackdef-viewtransitionupdatecallback\u2467"},{"id":"ref-for-callbackdef-viewtransitionupdatecallback\u2468"},{"id":"ref-for-callbackdef-viewtransitionupdatecallback\u2460\u24ea"}],"title":"6.1. Additions to Document"},{"refs":[{"id":"ref-for-callbackdef-viewtransitionupdatecallback\u2460\u2460"},{"id":"ref-for-callbackdef-viewtransitionupdatecallback\u2460\u2461"},{"id":"ref-for-callbackdef-viewtransitionupdatecallback\u2460\u2462"},{"id":"ref-for-callbackdef-viewtransitionupdatecallback\u2460\u2463"}],"title":"6.2. The ViewTransition interface"},{"refs":[{"id":"ref-for-callbackdef-viewtransitionupdatecallback\u2460\u2464"}],"title":"7.3. Setup view transition"},{"refs":[{"id":"ref-for-callbackdef-viewtransitionupdatecallback\u2460\u2465"},{"id":"ref-for-callbackdef-viewtransitionupdatecallback\u2460\u2466"}],"title":"\nChanges from 2022-11-24 Working Draft\n"}],"url":"#callbackdef-viewtransitionupdatecallback"}, "capture-rendering-characteristics": {"dfnID":"capture-rendering-characteristics","dfnText":"capture rendering characteristics","external":false,"refSections":[{"refs":[{"id":"ref-for-capture-rendering-characteristics"},{"id":"ref-for-capture-rendering-characteristics\u2460"}],"title":"7.7. Capture the image"},{"refs":[{"id":"ref-for-capture-rendering-characteristics\u2461"}],"title":"7.7.1. Capture rendering characteristics"}],"url":"#capture-rendering-characteristics"}, "capture-the-image": {"dfnID":"capture-the-image","dfnText":"capture the image","external":false,"refSections":[{"refs":[{"id":"ref-for-capture-the-image"}],"title":"1.5. Rendering Model"},{"refs":[{"id":"ref-for-capture-the-image\u2460"}],"title":"3.2.5. View Transition Old State Image: the ::view-transition-old() pseudo-element"},{"refs":[{"id":"ref-for-capture-the-image\u2461"}],"title":"3.2.6. View Transition New State Image: the ::view-transition-new() pseudo-element"},{"refs":[{"id":"ref-for-capture-the-image\u2462"}],"title":"7.3. Setup view transition"},{"refs":[{"id":"ref-for-capture-the-image\u2463"}],"title":"7.3.1. Capture the old state"},{"refs":[{"id":"ref-for-capture-the-image\u2464"}],"title":"7.7. Capture the image"},{"refs":[{"id":"ref-for-capture-the-image\u2465"}],"title":"7.9. Update pseudo-element styles"},{"refs":[{"id":"ref-for-capture-the-image\u2466"}],"title":"Security Considerations"}],"url":"#capture-the-image"}, "capture-the-new-state": {"dfnID":"capture-the-new-state","dfnText":"capture the new state","external":false,"refSections":[{"refs":[{"id":"ref-for-capture-the-new-state"}],"title":"7.3. Setup view transition"},{"refs":[{"id":"ref-for-capture-the-new-state\u2460"}],"title":"7.3.2. Capture the new state"}],"url":"#capture-the-new-state"}, "capture-the-old-state": {"dfnID":"capture-the-old-state","dfnText":"capture the old state","external":false,"refSections":[{"refs":[{"id":"ref-for-capture-the-old-state"}],"title":"7.3. Setup view transition"},{"refs":[{"id":"ref-for-capture-the-old-state\u2460"}],"title":"7.3.1. Capture the old state"}],"url":"#capture-the-old-state"}, "captured-element": {"dfnID":"captured-element","dfnText":"captured element","external":false,"refSections":[{"refs":[{"id":"ref-for-captured-element"}],"title":"6.2. The ViewTransition interface"},{"refs":[{"id":"ref-for-captured-element\u2460"},{"id":"ref-for-captured-element\u2461"}],"title":"7.1.3. Captured elements"},{"refs":[{"id":"ref-for-captured-element\u2462"}],"title":"7.3.1. Capture the old state"},{"refs":[{"id":"ref-for-captured-element\u2463"}],"title":"7.3.2. Capture the new state"}],"url":"#captured-element"}, "captured-element-group-animation-name-rule": {"dfnID":"captured-element-group-animation-name-rule","dfnText":"group animation name rule","external":false,"refSections":[{"refs":[{"id":"ref-for-captured-element-group-animation-name-rule"}],"title":"7.3.3. Setup transition pseudo-elements"}],"url":"#captured-element-group-animation-name-rule"}, "captured-element-group-keyframes": {"dfnID":"captured-element-group-keyframes","dfnText":"group keyframes","external":false,"refSections":[{"refs":[{"id":"ref-for-captured-element-group-keyframes"}],"title":"7.3.3. Setup transition pseudo-elements"}],"url":"#captured-element-group-keyframes"}, "captured-element-group-styles-rule": {"dfnID":"captured-element-group-styles-rule","dfnText":"group styles rule","external":false,"refSections":[{"refs":[{"id":"ref-for-captured-element-group-styles-rule"},{"id":"ref-for-captured-element-group-styles-rule\u2460"},{"id":"ref-for-captured-element-group-styles-rule\u2461"}],"title":"7.9. Update pseudo-element styles"}],"url":"#captured-element-group-styles-rule"}, "captured-element-image-animation-name-rule": {"dfnID":"captured-element-image-animation-name-rule","dfnText":"image animation name rule","external":false,"refSections":[{"refs":[{"id":"ref-for-captured-element-image-animation-name-rule"},{"id":"ref-for-captured-element-image-animation-name-rule\u2460"},{"id":"ref-for-captured-element-image-animation-name-rule\u2461"}],"title":"7.3.3. Setup transition pseudo-elements"}],"url":"#captured-element-image-animation-name-rule"}, "captured-element-image-pair-isolation-rule": {"dfnID":"captured-element-image-pair-isolation-rule","dfnText":"image pair isolation rule","external":false,"refSections":[{"refs":[{"id":"ref-for-captured-element-image-pair-isolation-rule"}],"title":"7.3.3. Setup transition pseudo-elements"}],"url":"#captured-element-image-pair-isolation-rule"}, "captured-element-new-element": {"dfnID":"captured-element-new-element","dfnText":"new element","external":false,"refSections":[{"refs":[{"id":"ref-for-captured-element-new-element"}],"title":"4.1. The Snapshot Containing Block"},{"refs":[{"id":"ref-for-captured-element-new-element\u2460"},{"id":"ref-for-captured-element-new-element\u2461"}],"title":"7.3. Setup view transition"},{"refs":[{"id":"ref-for-captured-element-new-element\u2462"}],"title":"7.3.2. Capture the new state"},{"refs":[{"id":"ref-for-captured-element-new-element\u2463"},{"id":"ref-for-captured-element-new-element\u2464"},{"id":"ref-for-captured-element-new-element\u2465"},{"id":"ref-for-captured-element-new-element\u2466"}],"title":"7.3.3. Setup transition pseudo-elements"},{"refs":[{"id":"ref-for-captured-element-new-element\u2467"},{"id":"ref-for-captured-element-new-element\u2468"},{"id":"ref-for-captured-element-new-element\u2460\u24ea"},{"id":"ref-for-captured-element-new-element\u2460\u2460"},{"id":"ref-for-captured-element-new-element\u2460\u2461"},{"id":"ref-for-captured-element-new-element\u2460\u2462"},{"id":"ref-for-captured-element-new-element\u2460\u2463"},{"id":"ref-for-captured-element-new-element\u2460\u2464"},{"id":"ref-for-captured-element-new-element\u2460\u2465"},{"id":"ref-for-captured-element-new-element\u2460\u2466"},{"id":"ref-for-captured-element-new-element\u2460\u2467"},{"id":"ref-for-captured-element-new-element\u2460\u2468"}],"title":"7.9. Update pseudo-element styles"},{"refs":[{"id":"ref-for-captured-element-new-element\u2461\u24ea"},{"id":"ref-for-captured-element-new-element\u2461\u2460"}],"title":"7.10. Clear view transition"}],"url":"#captured-element-new-element"}, "captured-element-old-backdrop-filter": {"dfnID":"captured-element-old-backdrop-filter","dfnText":"old backdrop-filter","external":false,"refSections":[{"refs":[{"id":"ref-for-captured-element-old-backdrop-filter"}],"title":"7.3.1. Capture the old state"},{"refs":[{"id":"ref-for-captured-element-old-backdrop-filter\u2460"}],"title":"7.3.3. Setup transition pseudo-elements"},{"refs":[{"id":"ref-for-captured-element-old-backdrop-filter\u2461"}],"title":"7.9. Update pseudo-element styles"}],"url":"#captured-element-old-backdrop-filter"}, "captured-element-old-color-scheme": {"dfnID":"captured-element-old-color-scheme","dfnText":"old color-scheme","external":false,"refSections":[{"refs":[{"id":"ref-for-captured-element-old-color-scheme"}],"title":"7.3.1. Capture the old state"},{"refs":[{"id":"ref-for-captured-element-old-color-scheme\u2460"}],"title":"7.9. Update pseudo-element styles"}],"url":"#captured-element-old-color-scheme"}, "captured-element-old-direction": {"dfnID":"captured-element-old-direction","dfnText":"old direction","external":false,"refSections":[{"refs":[{"id":"ref-for-captured-element-old-direction"}],"title":"7.3.1. Capture the old state"},{"refs":[{"id":"ref-for-captured-element-old-direction\u2460"}],"title":"7.9. Update pseudo-element styles"}],"url":"#captured-element-old-direction"}, "captured-element-old-height": {"dfnID":"captured-element-old-height","dfnText":"old height","external":false,"refSections":[{"refs":[{"id":"ref-for-captured-element-old-height"}],"title":"7.3.1. Capture the old state"},{"refs":[{"id":"ref-for-captured-element-old-height\u2460"}],"title":"7.3.3. Setup transition pseudo-elements"},{"refs":[{"id":"ref-for-captured-element-old-height\u2461"}],"title":"7.9. Update pseudo-element styles"}],"url":"#captured-element-old-height"}, "captured-element-old-image": {"dfnID":"captured-element-old-image","dfnText":"old image","external":false,"refSections":[{"refs":[{"id":"ref-for-captured-element-old-image"}],"title":"4.1. The Snapshot Containing Block"},{"refs":[{"id":"ref-for-captured-element-old-image\u2460"}],"title":"7.3.1. Capture the old state"},{"refs":[{"id":"ref-for-captured-element-old-image\u2461"},{"id":"ref-for-captured-element-old-image\u2462"},{"id":"ref-for-captured-element-old-image\u2463"},{"id":"ref-for-captured-element-old-image\u2464"},{"id":"ref-for-captured-element-old-image\u2465"}],"title":"7.3.3. Setup transition pseudo-elements"}],"url":"#captured-element-old-image"}, "captured-element-old-mix-blend-mode": {"dfnID":"captured-element-old-mix-blend-mode","dfnText":"old mix-blend-mode","external":false,"refSections":[{"refs":[{"id":"ref-for-captured-element-old-mix-blend-mode"}],"title":"7.3.1. Capture the old state"},{"refs":[{"id":"ref-for-captured-element-old-mix-blend-mode\u2460"}],"title":"7.9. Update pseudo-element styles"}],"url":"#captured-element-old-mix-blend-mode"}, "captured-element-old-text-orientation": {"dfnID":"captured-element-old-text-orientation","dfnText":"old text-orientation","external":false,"refSections":[{"refs":[{"id":"ref-for-captured-element-old-text-orientation"}],"title":"7.3.1. Capture the old state"},{"refs":[{"id":"ref-for-captured-element-old-text-orientation\u2460"}],"title":"7.9. Update pseudo-element styles"}],"url":"#captured-element-old-text-orientation"}, "captured-element-old-transform": {"dfnID":"captured-element-old-transform","dfnText":"old transform","external":false,"refSections":[{"refs":[{"id":"ref-for-captured-element-old-transform"}],"title":"7.3.1. Capture the old state"},{"refs":[{"id":"ref-for-captured-element-old-transform\u2460"}],"title":"7.3.3. Setup transition pseudo-elements"},{"refs":[{"id":"ref-for-captured-element-old-transform\u2461"}],"title":"7.9. Update pseudo-element styles"}],"url":"#captured-element-old-transform"}, "captured-element-old-width": {"dfnID":"captured-element-old-width","dfnText":"old width","external":false,"refSections":[{"refs":[{"id":"ref-for-captured-element-old-width"}],"title":"7.3.1. Capture the old state"},{"refs":[{"id":"ref-for-captured-element-old-width\u2460"}],"title":"7.3.3. Setup transition pseudo-elements"},{"refs":[{"id":"ref-for-captured-element-old-width\u2461"}],"title":"7.9. Update pseudo-element styles"}],"url":"#captured-element-old-width"}, "captured-element-old-writing-mode": {"dfnID":"captured-element-old-writing-mode","dfnText":"old writing-mode","external":false,"refSections":[{"refs":[{"id":"ref-for-captured-element-old-writing-mode"}],"title":"7.3.1. Capture the old state"},{"refs":[{"id":"ref-for-captured-element-old-writing-mode\u2460"}],"title":"7.9. Update pseudo-element styles"}],"url":"#captured-element-old-writing-mode"}, "captured-element-style-definitions": {"dfnID":"captured-element-style-definitions","dfnText":"style definitions","external":false,"refSections":[{"refs":[{"id":"ref-for-captured-element-style-definitions"}],"title":"7.10. Clear view transition"}],"url":"#captured-element-style-definitions"}, "captured-in-a-view-transition": {"dfnID":"captured-in-a-view-transition","dfnText":"captured in a view transition","external":false,"refSections":[{"refs":[{"id":"ref-for-captured-in-a-view-transition"}],"title":"2.1. Tagging Individually Transitioning Subtrees: the view-transition-name property"},{"refs":[{"id":"ref-for-captured-in-a-view-transition\u2460"}],"title":"2.1.1. Rendering Consolidation"},{"refs":[{"id":"ref-for-captured-in-a-view-transition\u2461"}],"title":"4.2. View Transition Painting Order"},{"refs":[{"id":"ref-for-captured-in-a-view-transition\u2462"}],"title":"7.3. Setup view transition"},{"refs":[{"id":"ref-for-captured-in-a-view-transition\u2463"},{"id":"ref-for-captured-in-a-view-transition\u2464"},{"id":"ref-for-captured-in-a-view-transition\u2465"},{"id":"ref-for-captured-in-a-view-transition\u2466"}],"title":"7.3.1. Capture the old state"},{"refs":[{"id":"ref-for-captured-in-a-view-transition\u2467"}],"title":"7.7.1. Capture rendering characteristics"},{"refs":[{"id":"ref-for-captured-in-a-view-transition\u2468"}],"title":"7.9. Update pseudo-element styles"},{"refs":[{"id":"ref-for-captured-in-a-view-transition\u2460\u24ea"}],"title":"7.10. Clear view transition"},{"refs":[{"id":"ref-for-captured-in-a-view-transition\u2460\u2460"}],"title":"\nChanges from 2023-05-30 Working Draft\n"}],"url":"#captured-in-a-view-transition"}, "cc682c89": {"dfnID":"cc682c89","dfnText":"root element","external":true,"refSections":[{"refs":[{"id":"ref-for-root-element"}],"title":"3.2. View Transition Pseudo-elements"},{"refs":[{"id":"ref-for-root-element\u2460"}],"title":"5. User Agent Stylesheet"}],"url":"https://drafts.csswg.org/css-display-4/#root-element"}, "clear-view-transition": {"dfnID":"clear-view-transition","dfnText":"clear view transition","external":false,"refSections":[{"refs":[{"id":"ref-for-clear-view-transition"}],"title":"6.2. The ViewTransition interface"},{"refs":[{"id":"ref-for-clear-view-transition\u2460"}],"title":"7.5. Skip the view transition"},{"refs":[{"id":"ref-for-clear-view-transition\u2461"}],"title":"7.8. Handle transition frame"},{"refs":[{"id":"ref-for-clear-view-transition\u2462"}],"title":"7.10. Clear view transition"}],"url":"#clear-view-transition"}, "d25dfb2c": {"dfnID":"d25dfb2c","dfnText":"AbortError","external":true,"refSections":[{"refs":[{"id":"ref-for-aborterror"}],"title":"6.1.1. startViewTransition() Method Steps"},{"refs":[{"id":"ref-for-aborterror\u2460"}],"title":"6.2.1. skipTransition() Method Steps"}],"url":"https://webidl.spec.whatwg.org/#aborterror"}, "d3936525": {"dfnID":"d3936525","dfnText":"natural dimension","external":true,"refSections":[{"refs":[{"id":"ref-for-natural-dimensions"}],"title":"3.2.5. View Transition Old State Image: the ::view-transition-old() pseudo-element"},{"refs":[{"id":"ref-for-natural-dimensions\u2460"}],"title":"3.2.6. View Transition New State Image: the ::view-transition-new() pseudo-element"},{"refs":[{"id":"ref-for-natural-dimensions\u2461"}],"title":"7.7. Capture the image"}],"url":"https://drafts.csswg.org/css-images-3/#natural-dimensions"}, "d3ea1b3d": {"dfnID":"d3ea1b3d","dfnText":"style sheet","external":true,"refSections":[{"refs":[{"id":"ref-for-style-sheet"},{"id":"ref-for-style-sheet\u2460"}],"title":"7.1.1. Additions to Document"}],"url":"https://drafts.csswg.org/css-2022/#style-sheet"}, "d729a9ff": {"dfnID":"d729a9ff","dfnText":"parent","external":true,"refSections":[{"refs":[{"id":"ref-for-concept-tree-parent"}],"title":"3.1. Pseudo-element Trees"},{"refs":[{"id":"ref-for-concept-tree-parent\u2460"}],"title":"3.2.2. View Transition Tree Root: the ::view-transition pseudo-element"}],"url":"https://dom.spec.whatwg.org/#concept-tree-parent"}, "d99f286c": {"dfnID":"d99f286c","dfnText":"ultimate originating element","external":true,"refSections":[{"refs":[{"id":"ref-for-ultimate-originating-element"}],"title":"3.2. View Transition Pseudo-elements"}],"url":"https://drafts.csswg.org/selectors-4/#ultimate-originating-element"}, "da8b8e0e": {"dfnID":"da8b8e0e","dfnText":"descendant","external":true,"refSections":[{"refs":[{"id":"ref-for-concept-tree-descendant"},{"id":"ref-for-concept-tree-descendant\u2460"}],"title":"3.1. Pseudo-element Trees"},{"refs":[{"id":"ref-for-concept-tree-descendant\u2461"}],"title":"7.7. Capture the image"}],"url":"https://dom.spec.whatwg.org/#concept-tree-descendant"}, "dacde8b5": {"dfnID":"dacde8b5","dfnText":"a new promise","external":true,"refSections":[{"refs":[{"id":"ref-for-a-new-promise"},{"id":"ref-for-a-new-promise\u2460"},{"id":"ref-for-a-new-promise\u2461"}],"title":"6.2. The ViewTransition interface"}],"url":"https://webidl.spec.whatwg.org/#a-new-promise"}, "dca2de17": {"dfnID":"dca2de17","dfnText":"DOMException","external":true,"refSections":[{"refs":[{"id":"ref-for-idl-DOMException"},{"id":"ref-for-idl-DOMException\u2460"}],"title":"6.1.1. startViewTransition() Method Steps"},{"refs":[{"id":"ref-for-idl-DOMException\u2461"}],"title":"6.2.1. skipTransition() Method Steps"},{"refs":[{"id":"ref-for-idl-DOMException\u2462"},{"id":"ref-for-idl-DOMException\u2463"},{"id":"ref-for-idl-DOMException\u2464"}],"title":"7.3. Setup view transition"},{"refs":[{"id":"ref-for-idl-DOMException\u2465"}],"title":"7.4. Call the update callback"},{"refs":[{"id":"ref-for-idl-DOMException\u2466"}],"title":"7.6. View transition page-visibility change steps"},{"refs":[{"id":"ref-for-idl-DOMException\u2467"},{"id":"ref-for-idl-DOMException\u2468"}],"title":"7.8. Handle transition frame"}],"url":"https://webidl.spec.whatwg.org/#idl-DOMException"}, "document-active-view-transition": {"dfnID":"document-active-view-transition","dfnText":"active view transition","external":false,"refSections":[{"refs":[{"id":"ref-for-document-active-view-transition"}],"title":"4.2. View Transition Painting Order"},{"refs":[{"id":"ref-for-document-active-view-transition\u2460"}],"title":"6.1. Additions to Document"},{"refs":[{"id":"ref-for-document-active-view-transition\u2461"},{"id":"ref-for-document-active-view-transition\u2462"},{"id":"ref-for-document-active-view-transition\u2463"}],"title":"6.1.1. startViewTransition() Method Steps"},{"refs":[{"id":"ref-for-document-active-view-transition\u2464"}],"title":"7.1.1. Additions to Document"},{"refs":[{"id":"ref-for-document-active-view-transition\u2465"},{"id":"ref-for-document-active-view-transition\u2466"},{"id":"ref-for-document-active-view-transition\u2467"},{"id":"ref-for-document-active-view-transition\u2468"},{"id":"ref-for-document-active-view-transition\u2460\u24ea"}],"title":"7.2. Perform pending transition operations"},{"refs":[{"id":"ref-for-document-active-view-transition\u2460\u2460"}],"title":"7.5. Skip the view transition"},{"refs":[{"id":"ref-for-document-active-view-transition\u2460\u2461"},{"id":"ref-for-document-active-view-transition\u2460\u2462"},{"id":"ref-for-document-active-view-transition\u2460\u2463"}],"title":"7.6. View transition page-visibility change steps"},{"refs":[{"id":"ref-for-document-active-view-transition\u2460\u2464"},{"id":"ref-for-document-active-view-transition\u2460\u2465"}],"title":"7.10. Clear view transition"}],"url":"#document-active-view-transition"}, "document-dynamic-view-transition-style-sheet": {"dfnID":"document-dynamic-view-transition-style-sheet","dfnText":"dynamic view transition style sheet","external":false,"refSections":[{"refs":[{"id":"ref-for-document-dynamic-view-transition-style-sheet"}],"title":"3.2.3. View Transition Named Subtree Root: the ::view-transition-group() pseudo-element"},{"refs":[{"id":"ref-for-document-dynamic-view-transition-style-sheet\u2460"}],"title":"3.2.5. View Transition Old State Image: the ::view-transition-old() pseudo-element"},{"refs":[{"id":"ref-for-document-dynamic-view-transition-style-sheet\u2461"},{"id":"ref-for-document-dynamic-view-transition-style-sheet\u2462"}],"title":"5. User Agent Stylesheet"},{"refs":[{"id":"ref-for-document-dynamic-view-transition-style-sheet\u2463"}],"title":"7.1.3. Captured elements"},{"refs":[{"id":"ref-for-document-dynamic-view-transition-style-sheet\u2464"},{"id":"ref-for-document-dynamic-view-transition-style-sheet\u2465"},{"id":"ref-for-document-dynamic-view-transition-style-sheet\u2466"},{"id":"ref-for-document-dynamic-view-transition-style-sheet\u2467"},{"id":"ref-for-document-dynamic-view-transition-style-sheet\u2468"},{"id":"ref-for-document-dynamic-view-transition-style-sheet\u2460\u24ea"}],"title":"7.3.3. Setup transition pseudo-elements"},{"refs":[{"id":"ref-for-document-dynamic-view-transition-style-sheet\u2460\u2460"}],"title":"7.9. Update pseudo-element styles"},{"refs":[{"id":"ref-for-document-dynamic-view-transition-style-sheet\u2460\u2461"},{"id":"ref-for-document-dynamic-view-transition-style-sheet\u2460\u2462"}],"title":"7.10. Clear view transition"},{"refs":[{"id":"ref-for-document-dynamic-view-transition-style-sheet\u2460\u2463"}],"title":"\nChanges from 2022-10-25 Working Draft (FPWD)\n"}],"url":"#document-dynamic-view-transition-style-sheet"}, "document-rendering-suppression-for-view-transitions": {"dfnID":"document-rendering-suppression-for-view-transitions","dfnText":"rendering suppression for view transitions","external":false,"refSections":[{"refs":[{"id":"ref-for-document-rendering-suppression-for-view-transitions"}],"title":"7.1.1. Additions to Document"},{"refs":[{"id":"ref-for-document-rendering-suppression-for-view-transitions\u2460"},{"id":"ref-for-document-rendering-suppression-for-view-transitions\u2461"}],"title":"7.3. Setup view transition"},{"refs":[{"id":"ref-for-document-rendering-suppression-for-view-transitions\u2462"}],"title":"7.5. Skip the view transition"}],"url":"#document-rendering-suppression-for-view-transitions"}, "document-scoped-view-transition-name": {"dfnID":"document-scoped-view-transition-name","dfnText":"document-scoped view transition name","external":false,"refSections":[{"refs":[{"id":"ref-for-document-scoped-view-transition-name"}],"title":"7.3.1. Capture the old state"},{"refs":[{"id":"ref-for-document-scoped-view-transition-name\u2460"}],"title":"7.3.2. Capture the new state"}],"url":"#document-scoped-view-transition-name"}, "document-show-view-transition-tree": {"dfnID":"document-show-view-transition-tree","dfnText":"show view transition tree","external":false,"refSections":[{"refs":[{"id":"ref-for-document-show-view-transition-tree"}],"title":"7.3.3. Setup transition pseudo-elements"},{"refs":[{"id":"ref-for-document-show-view-transition-tree\u2460"}],"title":"7.10. Clear view transition"}],"url":"#document-show-view-transition-tree"}, "dom-document-startviewtransition": {"dfnID":"dom-document-startviewtransition","dfnText":"startViewTransition(updateCallback)","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-document-startviewtransition"}],"title":"1.2. View Transition Customization"},{"refs":[{"id":"ref-for-dom-document-startviewtransition\u2460"}],"title":"1.3. View Transition Lifecycle"},{"refs":[{"id":"ref-for-dom-document-startviewtransition\u2461"},{"id":"ref-for-dom-document-startviewtransition\u2462"}],"title":"6.1. Additions to Document"},{"refs":[{"id":"ref-for-dom-document-startviewtransition\u2463"}],"title":"6.1.1. startViewTransition() Method Steps"},{"refs":[{"id":"ref-for-dom-document-startviewtransition\u2464"}],"title":"\nChanges from 2023-05-30 Working Draft\n"}],"url":"#dom-document-startviewtransition"}, "dom-document-startviewtransition-updatecallback-updatecallback": {"dfnID":"dom-document-startviewtransition-updatecallback-updatecallback","dfnText":"updateCallback","external":false,"refSections":[],"url":"#dom-document-startviewtransition-updatecallback-updatecallback"}, "dom-viewtransition-finished": {"dfnID":"dom-viewtransition-finished","dfnText":"finished","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-viewtransition-finished"}],"title":"1.3. View Transition Lifecycle"},{"refs":[{"id":"ref-for-dom-viewtransition-finished\u2460"},{"id":"ref-for-dom-viewtransition-finished\u2461"},{"id":"ref-for-dom-viewtransition-finished\u2462"},{"id":"ref-for-dom-viewtransition-finished\u2463"}],"title":"6.2. The ViewTransition interface"}],"url":"#dom-viewtransition-finished"}, "dom-viewtransition-ready": {"dfnID":"dom-viewtransition-ready","dfnText":"ready","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-viewtransition-ready"}],"title":"1.3. View Transition Lifecycle"},{"refs":[{"id":"ref-for-dom-viewtransition-ready\u2460"},{"id":"ref-for-dom-viewtransition-ready\u2461"},{"id":"ref-for-dom-viewtransition-ready\u2462"},{"id":"ref-for-dom-viewtransition-ready\u2463"},{"id":"ref-for-dom-viewtransition-ready\u2464"}],"title":"6.2. The ViewTransition interface"}],"url":"#dom-viewtransition-ready"}, "dom-viewtransition-skiptransition": {"dfnID":"dom-viewtransition-skiptransition","dfnText":"skipTransition()","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-viewtransition-skiptransition"}],"title":"1.4. Transitions as an enhancement"},{"refs":[{"id":"ref-for-dom-viewtransition-skiptransition\u2460"},{"id":"ref-for-dom-viewtransition-skiptransition\u2461"},{"id":"ref-for-dom-viewtransition-skiptransition\u2462"}],"title":"6.2. The ViewTransition interface"},{"refs":[{"id":"ref-for-dom-viewtransition-skiptransition\u2463"}],"title":"6.2.1. skipTransition() Method Steps"},{"refs":[{"id":"ref-for-dom-viewtransition-skiptransition\u2464"}],"title":"7.5. Skip the view transition"}],"url":"#dom-viewtransition-skiptransition"}, "dom-viewtransition-updatecallbackdone": {"dfnID":"dom-viewtransition-updatecallbackdone","dfnText":"updateCallbackDone","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-viewtransition-updatecallbackdone"}],"title":"1.3. View Transition Lifecycle"},{"refs":[{"id":"ref-for-dom-viewtransition-updatecallbackdone\u2460"},{"id":"ref-for-dom-viewtransition-updatecallbackdone\u2461"},{"id":"ref-for-dom-viewtransition-updatecallbackdone\u2462"},{"id":"ref-for-dom-viewtransition-updatecallbackdone\u2463"},{"id":"ref-for-dom-viewtransition-updatecallbackdone\u2464"},{"id":"ref-for-dom-viewtransition-updatecallbackdone\u2465"}],"title":"6.2. The ViewTransition interface"}],"url":"#dom-viewtransition-updatecallbackdone"}, "e10e7eb7": {"dfnID":"e10e7eb7","dfnText":"DOM manipulation task source","external":true,"refSections":[{"refs":[{"id":"ref-for-dom-manipulation-task-source"}],"title":"7.3. Setup view transition"},{"refs":[{"id":"ref-for-dom-manipulation-task-source\u2460"}],"title":"7.4. Call the update callback"},{"refs":[{"id":"ref-for-dom-manipulation-task-source\u2461"}],"title":"7.5. Skip the view transition"},{"refs":[{"id":"ref-for-dom-manipulation-task-source\u2462"}],"title":"7.6. View transition page-visibility change steps"}],"url":"https://html.spec.whatwg.org/multipage/webappapis.html#dom-manipulation-task-source"}, "e1e30b02": {"dfnID":"e1e30b02","dfnText":":only-child","external":true,"refSections":[{"refs":[{"id":"ref-for-only-child-pseudo"}],"title":"1.6. Examples"},{"refs":[{"id":"ref-for-only-child-pseudo\u2460"}],"title":"3.1. Pseudo-element Trees"},{"refs":[{"id":"ref-for-only-child-pseudo\u2461"}],"title":"3.2.5. View Transition Old State Image: the ::view-transition-old() pseudo-element"}],"url":"https://drafts.csswg.org/selectors-4/#only-child-pseudo"}, "e2142df0": {"dfnID":"e2142df0","dfnText":"ink overflow area","external":true,"refSections":[{"refs":[{"id":"ref-for-ink-overflow-region"}],"title":"7.7.1. Capture rendering characteristics"}],"url":"https://drafts.csswg.org/css-overflow-3/#ink-overflow-region"}, "e274345c": {"dfnID":"e274345c","dfnText":"<custom-ident>","external":true,"refSections":[{"refs":[{"id":"ref-for-identifier-value"},{"id":"ref-for-identifier-value\u2460"},{"id":"ref-for-identifier-value\u2461"}],"title":"2.1. Tagging Individually Transitioning Subtrees: the view-transition-name property"},{"refs":[{"id":"ref-for-identifier-value\u2462"},{"id":"ref-for-identifier-value\u2463"},{"id":"ref-for-identifier-value\u2464"}],"title":"3.2.1. Named View Transition Pseudo-elements"}],"url":"https://drafts.csswg.org/css-values-4/#identifier-value"}, "e2e08d07": {"dfnID":"e2e08d07","dfnText":"transform","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-transform"}],"title":"3.2.3. View Transition Named Subtree Root: the ::view-transition-group() pseudo-element"}],"url":"https://drafts.csswg.org/css-transforms-1/#propdef-transform"}, "e3ec4d32": {"dfnID":"e3ec4d32","dfnText":"discrete","external":true,"refSections":[{"refs":[{"id":"ref-for-discrete"}],"title":"2.1. Tagging Individually Transitioning Subtrees: the view-transition-name property"}],"url":"https://drafts.csswg.org/web-animations-1/#discrete"}, "e6cc3311": {"dfnID":"e6cc3311","dfnText":"tree","external":true,"refSections":[{"refs":[{"id":"ref-for-concept-tree"}],"title":"3.1. Pseudo-element Trees"}],"url":"https://dom.spec.whatwg.org/#concept-tree"}, "e8163b52": {"dfnID":"e8163b52","dfnText":"mix-blend-mode","external":true,"refSections":[{"refs":[{"id":"ref-for-propdef-mix-blend-mode"}],"title":"1.5. Rendering Model"},{"refs":[{"id":"ref-for-propdef-mix-blend-mode\u2460"}],"title":"7.1.3. Captured elements"},{"refs":[{"id":"ref-for-propdef-mix-blend-mode\u2461"}],"title":"7.3.1. Capture the old state"},{"refs":[{"id":"ref-for-propdef-mix-blend-mode\u2462"}],"title":"7.3.3. Setup transition pseudo-elements"},{"refs":[{"id":"ref-for-propdef-mix-blend-mode\u2463"}],"title":"7.9. Update pseudo-element styles"}],"url":"https://drafts.fxtf.org/compositing-2/#propdef-mix-blend-mode"}, "e8b75507": {"dfnID":"e8b75507","dfnText":"element","external":true,"refSections":[{"refs":[{"id":"ref-for-element"},{"id":"ref-for-element\u2460"},{"id":"ref-for-element\u2461"}],"title":"2.1. Tagging Individually Transitioning Subtrees: the view-transition-name property"},{"refs":[{"id":"ref-for-element\u2463"}],"title":"2.1.1. Rendering Consolidation"},{"refs":[{"id":"ref-for-element\u2464"}],"title":"7.1.1. Additions to Document"},{"refs":[{"id":"ref-for-element\u2465"},{"id":"ref-for-element\u2466"}],"title":"7.1.2. Additions to Elements"},{"refs":[{"id":"ref-for-element\u2467"}],"title":"7.1.3. Captured elements"},{"refs":[{"id":"ref-for-element\u2468"}],"title":"7.3.1. Capture the old state"},{"refs":[{"id":"ref-for-element\u2460\u24ea"}],"title":"7.3.2. Capture the new state"},{"refs":[{"id":"ref-for-element\u2460\u2460"}],"title":"7.7. Capture the image"}],"url":"https://drafts.csswg.org/css2/#element"}, "e99bd18e": {"dfnID":"e99bd18e","dfnText":"relevant global object","external":true,"refSections":[{"refs":[{"id":"ref-for-concept-relevant-global"}],"title":"6.1.1. startViewTransition() Method Steps"},{"refs":[{"id":"ref-for-concept-relevant-global\u2460"},{"id":"ref-for-concept-relevant-global\u2461"}],"title":"7.3. Setup view transition"},{"refs":[{"id":"ref-for-concept-relevant-global\u2462"}],"title":"7.3.1. Capture the old state"},{"refs":[{"id":"ref-for-concept-relevant-global\u2463"}],"title":"7.3.2. Capture the new state"},{"refs":[{"id":"ref-for-concept-relevant-global\u2464"}],"title":"7.3.3. Setup transition pseudo-elements"},{"refs":[{"id":"ref-for-concept-relevant-global\u2465"}],"title":"7.4. Call the update callback"},{"refs":[{"id":"ref-for-concept-relevant-global\u2466"},{"id":"ref-for-concept-relevant-global\u2467"}],"title":"7.5. Skip the view transition"},{"refs":[{"id":"ref-for-concept-relevant-global\u2468"}],"title":"7.6. View transition page-visibility change steps"},{"refs":[{"id":"ref-for-concept-relevant-global\u2460\u24ea"}],"title":"7.8. Handle transition frame"},{"refs":[{"id":"ref-for-concept-relevant-global\u2460\u2460"}],"title":"7.9. Update pseudo-element styles"},{"refs":[{"id":"ref-for-concept-relevant-global\u2460\u2461"}],"title":"7.10. Clear view transition"}],"url":"https://html.spec.whatwg.org/multipage/webappapis.html#concept-relevant-global"}, "ed3eb665": {"dfnID":"ed3eb665","dfnText":"natural size","external":true,"refSections":[{"refs":[{"id":"ref-for-natural-size"}],"title":"7.7. Capture the image"},{"refs":[{"id":"ref-for-natural-size\u2460"}],"title":"\nChanges from 2022-11-24 Working Draft\n"}],"url":"https://drafts.csswg.org/css-images-3/#natural-size"}, "f0ba495b": {"dfnID":"f0ba495b","dfnText":"TimeoutError","external":true,"refSections":[{"refs":[{"id":"ref-for-timeouterror"}],"title":"7.4. Call the update callback"}],"url":"https://webidl.spec.whatwg.org/#timeouterror"}, "f1041b37": {"dfnID":"f1041b37","dfnText":"unhandledrejection","external":true,"refSections":[{"refs":[{"id":"ref-for-event-unhandledrejection"},{"id":"ref-for-event-unhandledrejection\u2460"}],"title":"6.2. The ViewTransition interface"},{"refs":[{"id":"ref-for-event-unhandledrejection\u2461"}],"title":"7.4. Call the update callback"}],"url":"https://html.spec.whatwg.org/multipage/indices.html#event-unhandledrejection"}, "f23dc013": {"dfnID":"f23dc013","dfnText":"child navigable","external":true,"refSections":[{"refs":[{"id":"ref-for-child-navigable"}],"title":"4.1. The Snapshot Containing Block"}],"url":"https://html.spec.whatwg.org/multipage/document-sequences.html#child-navigable"}, "f598742d": {"dfnID":"f598742d","dfnText":"border box","external":true,"refSections":[{"refs":[{"id":"ref-for-border-box"},{"id":"ref-for-border-box\u2460"}],"title":"3.2.3. View Transition Named Subtree Root: the ::view-transition-group() pseudo-element"},{"refs":[{"id":"ref-for-border-box\u2461"},{"id":"ref-for-border-box\u2462"}],"title":"7.3.1. Capture the old state"},{"refs":[{"id":"ref-for-border-box\u2463"},{"id":"ref-for-border-box\u2464"},{"id":"ref-for-border-box\u2465"}],"title":"7.7. Capture the image"},{"refs":[{"id":"ref-for-border-box\u2466"}],"title":"7.9. Update pseudo-element styles"}],"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"}],"title":"3.1. Pseudo-element Trees"}],"url":"https://dom.spec.whatwg.org/#concept-tree-root"}, "f937b7b6": {"dfnID":"f937b7b6","dfnText":"continue","external":true,"refSections":[{"refs":[{"id":"ref-for-iteration-continue"},{"id":"ref-for-iteration-continue\u2460"},{"id":"ref-for-iteration-continue\u2461"}],"title":"7.3.1. Capture the old state"},{"refs":[{"id":"ref-for-iteration-continue\u2462"},{"id":"ref-for-iteration-continue\u2463"},{"id":"ref-for-iteration-continue\u2464"}],"title":"7.3.2. Capture the new state"}],"url":"https://infra.spec.whatwg.org/#iteration-continue"}, "f9d909f7": {"dfnID":"f9d909f7","dfnText":"inclusive descendant","external":true,"refSections":[{"refs":[{"id":"ref-for-concept-tree-inclusive-descendant"}],"title":"4.2. View Transition Painting Order"},{"refs":[{"id":"ref-for-concept-tree-inclusive-descendant\u2460"}],"title":"7.8. Handle transition frame"}],"url":"https://dom.spec.whatwg.org/#concept-tree-inclusive-descendant"}, "fafa15bc": {"dfnID":"fafa15bc","dfnText":"layout viewport","external":true,"refSections":[{"refs":[{"id":"ref-for-layout-viewport"}],"title":"7.7. Capture the image"}],"url":"https://drafts.csswg.org/cssom-view-1/#layout-viewport"}, "fd0dd860": {"dfnID":"fd0dd860","dfnText":"replaced element","external":true,"refSections":[{"refs":[{"id":"ref-for-replaced-element"}],"title":"3.2.5. View Transition Old State Image: the ::view-transition-old() pseudo-element"},{"refs":[{"id":"ref-for-replaced-element\u2460"}],"title":"3.2.6. View Transition New State Image: the ::view-transition-new() pseudo-element"},{"refs":[{"id":"ref-for-replaced-element\u2461"}],"title":"7.3.3. Setup transition pseudo-elements"},{"refs":[{"id":"ref-for-replaced-element\u2462"}],"title":"7.7. Capture the image"},{"refs":[{"id":"ref-for-replaced-element\u2463"}],"title":"7.9. Update pseudo-element styles"}],"url":"https://drafts.csswg.org/css-display-3/#replaced-element"}, "fd32e3c9": {"dfnID":"fd32e3c9","dfnText":"shadow-including descendant","external":true,"refSections":[{"refs":[{"id":"ref-for-concept-shadow-including-descendant"}],"title":"7.7.1. Capture rendering characteristics"}],"url":"https://dom.spec.whatwg.org/#concept-shadow-including-descendant"}, "fdf79120": {"dfnID":"fdf79120","dfnText":"identity transform function","external":true,"refSections":[{"refs":[{"id":"ref-for-identity-transform-function"}],"title":"7.1.3. Captured elements"}],"url":"https://drafts.csswg.org/css-transforms-1/#identity-transform-function"}, "global-view-transition-user-agent-style-sheet": {"dfnID":"global-view-transition-user-agent-style-sheet","dfnText":"global view transition user agent style sheet","external":false,"refSections":[{"refs":[{"id":"ref-for-global-view-transition-user-agent-style-sheet"}],"title":"7.1.1. Additions to Document"}],"url":"#global-view-transition-user-agent-style-sheet"}, "handle-transition-frame": {"dfnID":"handle-transition-frame","dfnText":"handle transition frame","external":false,"refSections":[{"refs":[{"id":"ref-for-handle-transition-frame"}],"title":"7.2. Perform pending transition operations"},{"refs":[{"id":"ref-for-handle-transition-frame\u2460"}],"title":"7.8. Handle transition frame"}],"url":"#handle-transition-frame"}, "named-view-transition-pseudo-elements": {"dfnID":"named-view-transition-pseudo-elements","dfnText":"named view transition pseudo-elements","external":false,"refSections":[{"refs":[{"id":"ref-for-named-view-transition-pseudo-elements"},{"id":"ref-for-named-view-transition-pseudo-elements\u2460"},{"id":"ref-for-named-view-transition-pseudo-elements\u2461"}],"title":"3.2.1. Named View Transition Pseudo-elements"},{"refs":[{"id":"ref-for-named-view-transition-pseudo-elements\u2462"}],"title":"3.2.3. View Transition Named Subtree Root: the ::view-transition-group() pseudo-element"},{"refs":[{"id":"ref-for-named-view-transition-pseudo-elements\u2463"}],"title":"3.2.4. View Transition Image Pair Isolation: the ::view-transition-image-pair() pseudo-element"},{"refs":[{"id":"ref-for-named-view-transition-pseudo-elements\u2464"}],"title":"3.2.5. View Transition Old State Image: the ::view-transition-old() pseudo-element"},{"refs":[{"id":"ref-for-named-view-transition-pseudo-elements\u2465"}],"title":"3.2.6. View Transition New State Image: the ::view-transition-new() pseudo-element"}],"url":"#named-view-transition-pseudo-elements"}, "perform-pending-transition-operations": {"dfnID":"perform-pending-transition-operations","dfnText":"perform pending transition operations","external":false,"refSections":[{"refs":[{"id":"ref-for-perform-pending-transition-operations"}],"title":"6.1.1. startViewTransition() Method Steps"},{"refs":[{"id":"ref-for-perform-pending-transition-operations\u2460"}],"title":"7.2. Perform pending transition operations"}],"url":"#perform-pending-transition-operations"}, "propdef-view-transition-name": {"dfnID":"propdef-view-transition-name","dfnText":"view-transition-name","external":false,"refSections":[{"refs":[{"id":"ref-for-propdef-view-transition-name"}],"title":"1.2. View Transition Customization"},{"refs":[{"id":"ref-for-propdef-view-transition-name\u2460"},{"id":"ref-for-propdef-view-transition-name\u2461"},{"id":"ref-for-propdef-view-transition-name\u2462"},{"id":"ref-for-propdef-view-transition-name\u2463"},{"id":"ref-for-propdef-view-transition-name\u2464"}],"title":"2.1. Tagging Individually Transitioning Subtrees: the view-transition-name property"},{"refs":[{"id":"ref-for-propdef-view-transition-name\u2465"}],"title":"2.1.1. Rendering Consolidation"},{"refs":[{"id":"ref-for-propdef-view-transition-name\u2466"},{"id":"ref-for-propdef-view-transition-name\u2467"},{"id":"ref-for-propdef-view-transition-name\u2468"}],"title":"3.2. View Transition Pseudo-elements"},{"refs":[{"id":"ref-for-propdef-view-transition-name\u2460\u24ea"}],"title":"3.2.1. Named View Transition Pseudo-elements"},{"refs":[{"id":"ref-for-propdef-view-transition-name\u2460\u2460"}],"title":"6.2. The ViewTransition interface"},{"refs":[{"id":"ref-for-propdef-view-transition-name\u2460\u2461"}],"title":"7.3.1. Capture the old state"},{"refs":[{"id":"ref-for-propdef-view-transition-name\u2460\u2462"}],"title":"\nChanges from 2023-05-30 Working Draft\n"}],"url":"#propdef-view-transition-name"}, "pseudo-element-root": {"dfnID":"pseudo-element-root","dfnText":"pseudo-element root","external":false,"refSections":[{"refs":[{"id":"ref-for-pseudo-element-root"}],"title":"3.1. Pseudo-element Trees"},{"refs":[{"id":"ref-for-pseudo-element-root\u2460"}],"title":"3.2.2. View Transition Tree Root: the ::view-transition pseudo-element"},{"refs":[{"id":"ref-for-pseudo-element-root\u2461"}],"title":"\nChanges from 2022-11-24 Working Draft\n"}],"url":"#pseudo-element-root"}, "pseudo-element-tree": {"dfnID":"pseudo-element-tree","dfnText":"pseudo-element tree","external":false,"refSections":[{"refs":[{"id":"ref-for-pseudo-element-tree"},{"id":"ref-for-pseudo-element-tree\u2460"}],"title":"3.1. Pseudo-element Trees"},{"refs":[{"id":"ref-for-pseudo-element-tree\u2461"}],"title":"3.2. View Transition Pseudo-elements"}],"url":"#pseudo-element-tree"}, "selectordef-view-transition": {"dfnID":"selectordef-view-transition","dfnText":"::view-transition","external":false,"refSections":[{"refs":[{"id":"ref-for-selectordef-view-transition"},{"id":"ref-for-selectordef-view-transition\u2460"}],"title":"3.2. View Transition Pseudo-elements"},{"refs":[{"id":"ref-for-selectordef-view-transition\u2461"}],"title":"3.2.2. View Transition Tree Root: the ::view-transition pseudo-element"},{"refs":[{"id":"ref-for-selectordef-view-transition\u2462"}],"title":"3.2.3. View Transition Named Subtree Root: the ::view-transition-group() pseudo-element"},{"refs":[{"id":"ref-for-selectordef-view-transition\u2463"}],"title":"4.1. The Snapshot Containing Block"},{"refs":[{"id":"ref-for-selectordef-view-transition\u2464"}],"title":"4.2. View Transition Painting Order"},{"refs":[{"id":"ref-for-selectordef-view-transition\u2465"}],"title":"5. User Agent Stylesheet"},{"refs":[{"id":"ref-for-selectordef-view-transition\u2466"},{"id":"ref-for-selectordef-view-transition\u2467"}],"title":"6.2. The ViewTransition interface"}],"url":"#selectordef-view-transition"}, "selectordef-view-transition-group": {"dfnID":"selectordef-view-transition-group","dfnText":"::view-transition-group()","external":false,"refSections":[{"refs":[{"id":"ref-for-selectordef-view-transition-group"},{"id":"ref-for-selectordef-view-transition-group\u2460"},{"id":"ref-for-selectordef-view-transition-group\u2461"},{"id":"ref-for-selectordef-view-transition-group\u2462"}],"title":"1.5. Rendering Model"},{"refs":[{"id":"ref-for-selectordef-view-transition-group\u2463"}],"title":"1.6. Examples"},{"refs":[{"id":"ref-for-selectordef-view-transition-group\u2464"},{"id":"ref-for-selectordef-view-transition-group\u2465"}],"title":"3.2. View Transition Pseudo-elements"},{"refs":[{"id":"ref-for-selectordef-view-transition-group\u2466"}],"title":"3.2.2. View Transition Tree Root: the ::view-transition pseudo-element"},{"refs":[{"id":"ref-for-selectordef-view-transition-group\u2467"},{"id":"ref-for-selectordef-view-transition-group\u2468"}],"title":"3.2.3. View Transition Named Subtree Root: the ::view-transition-group() pseudo-element"},{"refs":[{"id":"ref-for-selectordef-view-transition-group\u2460\u24ea"},{"id":"ref-for-selectordef-view-transition-group\u2460\u2460"}],"title":"3.2.4. View Transition Image Pair Isolation: the ::view-transition-image-pair() pseudo-element"},{"refs":[{"id":"ref-for-selectordef-view-transition-group\u2460\u2461"},{"id":"ref-for-selectordef-view-transition-group\u2460\u2462"},{"id":"ref-for-selectordef-view-transition-group\u2460\u2463"},{"id":"ref-for-selectordef-view-transition-group\u2460\u2464"}],"title":"5. User Agent Stylesheet"},{"refs":[{"id":"ref-for-selectordef-view-transition-group\u2460\u2465"}],"title":"7.3.3. Setup transition pseudo-elements"},{"refs":[{"id":"ref-for-selectordef-view-transition-group\u2460\u2466"}],"title":"\nChanges from 2023-05-30 Working Draft\n"}],"url":"#selectordef-view-transition-group"}, "selectordef-view-transition-image-pair": {"dfnID":"selectordef-view-transition-image-pair","dfnText":"::view-transition-image-pair()","external":false,"refSections":[{"refs":[{"id":"ref-for-selectordef-view-transition-image-pair"}],"title":"3.2.3. View Transition Named Subtree Root: the ::view-transition-group() pseudo-element"},{"refs":[{"id":"ref-for-selectordef-view-transition-image-pair\u2460"}],"title":"3.2.4. View Transition Image Pair Isolation: the ::view-transition-image-pair() pseudo-element"},{"refs":[{"id":"ref-for-selectordef-view-transition-image-pair\u2461"},{"id":"ref-for-selectordef-view-transition-image-pair\u2462"}],"title":"3.2.5. View Transition Old State Image: the ::view-transition-old() pseudo-element"},{"refs":[{"id":"ref-for-selectordef-view-transition-image-pair\u2463"}],"title":"3.2.6. View Transition New State Image: the ::view-transition-new() pseudo-element"},{"refs":[{"id":"ref-for-selectordef-view-transition-image-pair\u2464"}],"title":"5. User Agent Stylesheet"},{"refs":[{"id":"ref-for-selectordef-view-transition-image-pair\u2465"}],"title":"7.3.3. Setup transition pseudo-elements"}],"url":"#selectordef-view-transition-image-pair"}, "selectordef-view-transition-new": {"dfnID":"selectordef-view-transition-new","dfnText":"::view-transition-new()","external":false,"refSections":[{"refs":[{"id":"ref-for-selectordef-view-transition-new"}],"title":"3.2. View Transition Pseudo-elements"},{"refs":[{"id":"ref-for-selectordef-view-transition-new\u2460"}],"title":"3.2.4. View Transition Image Pair Isolation: the ::view-transition-image-pair() pseudo-element"},{"refs":[{"id":"ref-for-selectordef-view-transition-new\u2461"},{"id":"ref-for-selectordef-view-transition-new\u2462"}],"title":"3.2.6. View Transition New State Image: the ::view-transition-new() pseudo-element"},{"refs":[{"id":"ref-for-selectordef-view-transition-new\u2463"},{"id":"ref-for-selectordef-view-transition-new\u2464"}],"title":"4.2. View Transition Painting Order"},{"refs":[{"id":"ref-for-selectordef-view-transition-new\u2465"},{"id":"ref-for-selectordef-view-transition-new\u2466"}],"title":"5. User Agent Stylesheet"},{"refs":[{"id":"ref-for-selectordef-view-transition-new\u2467"}],"title":"7.3.3. Setup transition pseudo-elements"},{"refs":[{"id":"ref-for-selectordef-view-transition-new\u2468"}],"title":"7.9. Update pseudo-element styles"}],"url":"#selectordef-view-transition-new"}, "selectordef-view-transition-old": {"dfnID":"selectordef-view-transition-old","dfnText":"::view-transition-old()","external":false,"refSections":[{"refs":[{"id":"ref-for-selectordef-view-transition-old"}],"title":"3.2. View Transition Pseudo-elements"},{"refs":[{"id":"ref-for-selectordef-view-transition-old\u2460"}],"title":"3.2.4. View Transition Image Pair Isolation: the ::view-transition-image-pair() pseudo-element"},{"refs":[{"id":"ref-for-selectordef-view-transition-old\u2461"},{"id":"ref-for-selectordef-view-transition-old\u2462"}],"title":"3.2.5. View Transition Old State Image: the ::view-transition-old() pseudo-element"},{"refs":[{"id":"ref-for-selectordef-view-transition-old\u2463"}],"title":"3.2.6. View Transition New State Image: the ::view-transition-new() pseudo-element"},{"refs":[{"id":"ref-for-selectordef-view-transition-old\u2464"}],"title":"4.2. View Transition Painting Order"},{"refs":[{"id":"ref-for-selectordef-view-transition-old\u2465"},{"id":"ref-for-selectordef-view-transition-old\u2466"}],"title":"5. User Agent Stylesheet"},{"refs":[{"id":"ref-for-selectordef-view-transition-old\u2467"}],"title":"7.3.3. Setup transition pseudo-elements"}],"url":"#selectordef-view-transition-old"}, "setup-transition-pseudo-elements": {"dfnID":"setup-transition-pseudo-elements","dfnText":"setup transition pseudo-elements","external":false,"refSections":[{"refs":[{"id":"ref-for-setup-transition-pseudo-elements"}],"title":"3.2. View Transition Pseudo-elements"},{"refs":[{"id":"ref-for-setup-transition-pseudo-elements\u2460"},{"id":"ref-for-setup-transition-pseudo-elements\u2461"}],"title":"3.2.5. View Transition Old State Image: the ::view-transition-old() pseudo-element"},{"refs":[{"id":"ref-for-setup-transition-pseudo-elements\u2462"}],"title":"3.2.6. View Transition New State Image: the ::view-transition-new() pseudo-element"},{"refs":[{"id":"ref-for-setup-transition-pseudo-elements\u2463"}],"title":"7.3. Setup view transition"},{"refs":[{"id":"ref-for-setup-transition-pseudo-elements\u2464"}],"title":"7.3.3. Setup transition pseudo-elements"}],"url":"#setup-transition-pseudo-elements"}, "setup-view-transition": {"dfnID":"setup-view-transition","dfnText":"setup view transition","external":false,"refSections":[{"refs":[{"id":"ref-for-setup-view-transition"}],"title":"6.1.1. startViewTransition() Method Steps"},{"refs":[{"id":"ref-for-setup-view-transition\u2460"}],"title":"7.2. Perform pending transition operations"},{"refs":[{"id":"ref-for-setup-view-transition\u2461"}],"title":"7.3. Setup view transition"}],"url":"#setup-view-transition"}, "skip-the-view-transition": {"dfnID":"skip-the-view-transition","dfnText":"skip the view transition","external":false,"refSections":[{"refs":[{"id":"ref-for-skip-the-view-transition"},{"id":"ref-for-skip-the-view-transition\u2460"}],"title":"6.1.1. startViewTransition() Method Steps"},{"refs":[{"id":"ref-for-skip-the-view-transition\u2461"}],"title":"6.2. The ViewTransition interface"},{"refs":[{"id":"ref-for-skip-the-view-transition\u2462"}],"title":"6.2.1. skipTransition() Method Steps"},{"refs":[{"id":"ref-for-skip-the-view-transition\u2463"},{"id":"ref-for-skip-the-view-transition\u2464"},{"id":"ref-for-skip-the-view-transition\u2465"},{"id":"ref-for-skip-the-view-transition\u2466"},{"id":"ref-for-skip-the-view-transition\u2467"},{"id":"ref-for-skip-the-view-transition\u2468"}],"title":"7.3. Setup view transition"},{"refs":[{"id":"ref-for-skip-the-view-transition\u2460\u24ea"},{"id":"ref-for-skip-the-view-transition\u2460\u2460"},{"id":"ref-for-skip-the-view-transition\u2460\u2461"},{"id":"ref-for-skip-the-view-transition\u2460\u2462"},{"id":"ref-for-skip-the-view-transition\u2460\u2463"}],"title":"7.4. Call the update callback"},{"refs":[{"id":"ref-for-skip-the-view-transition\u2460\u2464"}],"title":"7.5. Skip the view transition"},{"refs":[{"id":"ref-for-skip-the-view-transition\u2460\u2465"}],"title":"7.6. View transition page-visibility change steps"},{"refs":[{"id":"ref-for-skip-the-view-transition\u2460\u2466"},{"id":"ref-for-skip-the-view-transition\u2460\u2467"}],"title":"7.8. Handle transition frame"}],"url":"#skip-the-view-transition"}, "snapshot-containing-block": {"dfnID":"snapshot-containing-block","dfnText":"snapshot containing block","external":false,"refSections":[{"refs":[{"id":"ref-for-snapshot-containing-block"}],"title":"3.2.2. View Transition Tree Root: the ::view-transition pseudo-element"},{"refs":[{"id":"ref-for-snapshot-containing-block\u2460"}],"title":"4. View Transition Layout"},{"refs":[{"id":"ref-for-snapshot-containing-block\u2461"},{"id":"ref-for-snapshot-containing-block\u2462"},{"id":"ref-for-snapshot-containing-block\u2463"},{"id":"ref-for-snapshot-containing-block\u2464"},{"id":"ref-for-snapshot-containing-block\u2465"},{"id":"ref-for-snapshot-containing-block\u2466"}],"title":"4.1. The Snapshot Containing Block"},{"refs":[{"id":"ref-for-snapshot-containing-block\u2467"}],"title":"5. User Agent Stylesheet"},{"refs":[{"id":"ref-for-snapshot-containing-block\u2468"}],"title":"7.1.1. Additions to Document"},{"refs":[{"id":"ref-for-snapshot-containing-block\u2460\u24ea"}],"title":"7.3.1. Capture the old state"},{"refs":[{"id":"ref-for-snapshot-containing-block\u2460\u2460"},{"id":"ref-for-snapshot-containing-block\u2460\u2461"},{"id":"ref-for-snapshot-containing-block\u2460\u2462"}],"title":"7.7. Capture the image"},{"refs":[{"id":"ref-for-snapshot-containing-block\u2460\u2463"},{"id":"ref-for-snapshot-containing-block\u2460\u2464"}],"title":"7.7.1. Capture rendering characteristics"},{"refs":[{"id":"ref-for-snapshot-containing-block\u2460\u2465"}],"title":"7.9. Update pseudo-element styles"},{"refs":[{"id":"ref-for-snapshot-containing-block\u2460\u2466"}],"title":"\nChanges from 2022-11-24 Working Draft\n"}],"url":"#snapshot-containing-block"}, "snapshot-containing-block-origin": {"dfnID":"snapshot-containing-block-origin","dfnText":"snapshot containing block origin","external":false,"refSections":[{"refs":[{"id":"ref-for-snapshot-containing-block-origin"}],"title":"7.3.1. Capture the old state"},{"refs":[{"id":"ref-for-snapshot-containing-block-origin\u2460"}],"title":"7.9. Update pseudo-element styles"}],"url":"#snapshot-containing-block-origin"}, "snapshot-containing-block-size": {"dfnID":"snapshot-containing-block-size","dfnText":"snapshot containing block size","external":false,"refSections":[{"refs":[{"id":"ref-for-snapshot-containing-block-size"}],"title":"6.2. The ViewTransition interface"},{"refs":[{"id":"ref-for-snapshot-containing-block-size\u2460"}],"title":"7.3. Setup view transition"},{"refs":[{"id":"ref-for-snapshot-containing-block-size\u2461"},{"id":"ref-for-snapshot-containing-block-size\u2462"}],"title":"7.3.1. Capture the old state"},{"refs":[{"id":"ref-for-snapshot-containing-block-size\u2463"}],"title":"7.8. Handle transition frame"}],"url":"#snapshot-containing-block-size"}, "typedef-pt-name-selector": {"dfnID":"typedef-pt-name-selector","dfnText":"<pt-name-selector>","external":false,"refSections":[{"refs":[{"id":"ref-for-typedef-pt-name-selector"},{"id":"ref-for-typedef-pt-name-selector\u2460"},{"id":"ref-for-typedef-pt-name-selector\u2461"},{"id":"ref-for-typedef-pt-name-selector\u2462"}],"title":"3.2.1. Named View Transition Pseudo-elements"}],"url":"#typedef-pt-name-selector"}, "update-pseudo-element-styles": {"dfnID":"update-pseudo-element-styles","dfnText":"update pseudo-element styles","external":false,"refSections":[{"refs":[{"id":"ref-for-update-pseudo-element-styles"}],"title":"3.2.5. View Transition Old State Image: the ::view-transition-old() pseudo-element"},{"refs":[{"id":"ref-for-update-pseudo-element-styles\u2460"}],"title":"3.2.6. View Transition New State Image: the ::view-transition-new() pseudo-element"},{"refs":[{"id":"ref-for-update-pseudo-element-styles\u2461"}],"title":"7.3. Setup view transition"},{"refs":[{"id":"ref-for-update-pseudo-element-styles\u2462"}],"title":"7.3.3. Setup transition pseudo-elements"},{"refs":[{"id":"ref-for-update-pseudo-element-styles\u2463"}],"title":"7.8. Handle transition frame"},{"refs":[{"id":"ref-for-update-pseudo-element-styles\u2464"}],"title":"7.9. Update pseudo-element styles"}],"url":"#update-pseudo-element-styles"}, "valdef-view-transition-name-custom-ident": {"dfnID":"valdef-view-transition-name-custom-ident","dfnText":"<custom-ident>","external":false,"refSections":[],"url":"#valdef-view-transition-name-custom-ident"}, "valdef-view-transition-name-none": {"dfnID":"valdef-view-transition-name-none","dfnText":"none","external":false,"refSections":[{"refs":[{"id":"ref-for-valdef-view-transition-name-none"}],"title":"2.1. Tagging Individually Transitioning Subtrees: the view-transition-name property"},{"refs":[{"id":"ref-for-valdef-view-transition-name-none\u2460"}],"title":"2.1.1. Rendering Consolidation"},{"refs":[{"id":"ref-for-valdef-view-transition-name-none\u2461"}],"title":"7.3.1. Capture the old state"},{"refs":[{"id":"ref-for-valdef-view-transition-name-none\u2462"}],"title":"7.3.2. Capture the new state"}],"url":"#valdef-view-transition-name-none"}, "view-transition-layer": {"dfnID":"view-transition-layer","dfnText":"view transition layer","external":false,"refSections":[{"refs":[{"id":"ref-for-view-transition-layer"}],"title":"4. View Transition Layout"},{"refs":[{"id":"ref-for-view-transition-layer\u2460"},{"id":"ref-for-view-transition-layer\u2461"},{"id":"ref-for-view-transition-layer\u2462"}],"title":"4.2. View Transition Painting Order"}],"url":"#view-transition-layer"}, "view-transition-name": {"dfnID":"view-transition-name","dfnText":"view transition name","external":false,"refSections":[{"refs":[{"id":"ref-for-view-transition-name"},{"id":"ref-for-view-transition-name\u2460"},{"id":"ref-for-view-transition-name\u2461"},{"id":"ref-for-view-transition-name\u2462"},{"id":"ref-for-view-transition-name\u2463"}],"title":"2.1. Tagging Individually Transitioning Subtrees: the view-transition-name property"},{"refs":[{"id":"ref-for-view-transition-name\u2464"},{"id":"ref-for-view-transition-name\u2465"},{"id":"ref-for-view-transition-name\u2466"},{"id":"ref-for-view-transition-name\u2467"}],"title":"3.2.1. Named View Transition Pseudo-elements"},{"refs":[{"id":"ref-for-view-transition-name\u2468"}],"title":"3.2.3. View Transition Named Subtree Root: the ::view-transition-group() pseudo-element"},{"refs":[{"id":"ref-for-view-transition-name\u2460\u24ea"}],"title":"5. User Agent Stylesheet"},{"refs":[{"id":"ref-for-view-transition-name\u2460\u2460"}],"title":"6.2. The ViewTransition interface"},{"refs":[{"id":"ref-for-view-transition-name\u2460\u2461"},{"id":"ref-for-view-transition-name\u2460\u2462"},{"id":"ref-for-view-transition-name\u2460\u2463"},{"id":"ref-for-view-transition-name\u2460\u2464"}],"title":"7.3.3. Setup transition pseudo-elements"},{"refs":[{"id":"ref-for-view-transition-name\u2460\u2465"}],"title":"7.9. Update pseudo-element styles"}],"url":"#view-transition-name"}, "view-transition-page-visibility-change-steps": {"dfnID":"view-transition-page-visibility-change-steps","dfnText":"view transition page-visibility change steps","external":false,"refSections":[],"url":"#view-transition-page-visibility-change-steps"}, "view-transition-pseudo-elements": {"dfnID":"view-transition-pseudo-elements","dfnText":"view transition pseudo-elements","external":false,"refSections":[{"refs":[{"id":"ref-for-view-transition-pseudo-elements"}],"title":"3.2. View Transition Pseudo-elements"},{"refs":[{"id":"ref-for-view-transition-pseudo-elements\u2460"},{"id":"ref-for-view-transition-pseudo-elements\u2461"},{"id":"ref-for-view-transition-pseudo-elements\u2462"}],"title":"3.2.1. Named View Transition Pseudo-elements"},{"refs":[{"id":"ref-for-view-transition-pseudo-elements\u2463"}],"title":"4. View Transition Layout"},{"refs":[{"id":"ref-for-view-transition-pseudo-elements\u2464"}],"title":"6.2. The ViewTransition interface"}],"url":"#view-transition-pseudo-elements"}, "view-transition-tree": {"dfnID":"view-transition-tree","dfnText":"view transition tree","external":false,"refSections":[{"refs":[{"id":"ref-for-view-transition-tree"}],"title":"1.4. Transitions as an enhancement"},{"refs":[{"id":"ref-for-view-transition-tree\u2460"},{"id":"ref-for-view-transition-tree\u2461"}],"title":"2.1. Tagging Individually Transitioning Subtrees: the view-transition-name property"},{"refs":[{"id":"ref-for-view-transition-tree\u2462"}],"title":"3.2. View Transition Pseudo-elements"},{"refs":[{"id":"ref-for-view-transition-tree\u2463"}],"title":"\nChanges from 2023-05-30 Working Draft\n"}],"url":"#view-transition-tree"}, "view-transitions": {"dfnID":"view-transitions","dfnText":"view transitions","external":false,"refSections":[{"refs":[{"id":"ref-for-view-transitions"}],"title":"1.1. Separating Visual Transitions from DOM Updates"},{"refs":[{"id":"ref-for-view-transitions\u2460"}],"title":"1.2. View Transition Customization"},{"refs":[{"id":"ref-for-view-transitions\u2461"}],"title":"1.3. View Transition Lifecycle"},{"refs":[{"id":"ref-for-view-transitions\u2462"}],"title":"1.6. Examples"},{"refs":[{"id":"ref-for-view-transitions\u2463"}],"title":"2.1. Tagging Individually Transitioning Subtrees: the view-transition-name property"},{"refs":[{"id":"ref-for-view-transitions\u2464"}],"title":"2.1.1. Rendering Consolidation"},{"refs":[{"id":"ref-for-view-transitions\u2465"}],"title":"3.2. View Transition Pseudo-elements"},{"refs":[{"id":"ref-for-view-transitions\u2466"}],"title":"3.2.3. View Transition Named Subtree Root: the ::view-transition-group() pseudo-element"},{"refs":[{"id":"ref-for-view-transitions\u2467"}],"title":"3.2.4. View Transition Image Pair Isolation: the ::view-transition-image-pair() pseudo-element"},{"refs":[{"id":"ref-for-view-transitions\u2468"}],"title":"5. User Agent Stylesheet"},{"refs":[{"id":"ref-for-view-transitions\u2460\u24ea"}],"title":"6.1. Additions to Document"},{"refs":[{"id":"ref-for-view-transitions\u2460\u2460"}],"title":"6.1.1. startViewTransition() Method Steps"},{"refs":[{"id":"ref-for-view-transitions\u2460\u2461"}],"title":"6.2. The ViewTransition interface"},{"refs":[{"id":"ref-for-view-transitions\u2460\u2462"}],"title":"\nChanges from 2023-05-30 Working Draft\n"}],"url":"#view-transitions"}, "viewtransition": {"dfnID":"viewtransition","dfnText":"ViewTransition","external":false,"refSections":[{"refs":[{"id":"ref-for-viewtransition"}],"title":"1.3. View Transition Lifecycle"},{"refs":[{"id":"ref-for-viewtransition\u2460"},{"id":"ref-for-viewtransition\u2461"}],"title":"6.1. Additions to Document"},{"refs":[{"id":"ref-for-viewtransition\u2462"}],"title":"6.1.1. startViewTransition() Method Steps"},{"refs":[{"id":"ref-for-viewtransition\u2463"},{"id":"ref-for-viewtransition\u2464"},{"id":"ref-for-viewtransition\u2465"},{"id":"ref-for-viewtransition\u2466"},{"id":"ref-for-viewtransition\u2467"},{"id":"ref-for-viewtransition\u2468"},{"id":"ref-for-viewtransition\u2460\u24ea"},{"id":"ref-for-viewtransition\u2460\u2460"}],"title":"6.2. The ViewTransition interface"},{"refs":[{"id":"ref-for-viewtransition\u2460\u2461"}],"title":"7.1.1. Additions to Document"},{"refs":[{"id":"ref-for-viewtransition\u2460\u2462"},{"id":"ref-for-viewtransition\u2460\u2463"}],"title":"7.3. Setup view transition"},{"refs":[{"id":"ref-for-viewtransition\u2460\u2464"}],"title":"7.3.1. Capture the old state"},{"refs":[{"id":"ref-for-viewtransition\u2460\u2465"}],"title":"7.3.2. Capture the new state"},{"refs":[{"id":"ref-for-viewtransition\u2460\u2466"}],"title":"7.3.3. Setup transition pseudo-elements"},{"refs":[{"id":"ref-for-viewtransition\u2460\u2467"},{"id":"ref-for-viewtransition\u2460\u2468"}],"title":"7.4. Call the update callback"},{"refs":[{"id":"ref-for-viewtransition\u2461\u24ea"}],"title":"7.5. Skip the view transition"},{"refs":[{"id":"ref-for-viewtransition\u2461\u2460"}],"title":"7.8. Handle transition frame"},{"refs":[{"id":"ref-for-viewtransition\u2461\u2461"}],"title":"7.9. Update pseudo-element styles"},{"refs":[{"id":"ref-for-viewtransition\u2461\u2462"}],"title":"7.10. Clear view transition"}],"url":"#viewtransition"}, "viewtransition-finished-promise": {"dfnID":"viewtransition-finished-promise","dfnText":"finished promise","external":false,"refSections":[{"refs":[{"id":"ref-for-viewtransition-finished-promise"}],"title":"6.2. The ViewTransition interface"},{"refs":[{"id":"ref-for-viewtransition-finished-promise\u2460"},{"id":"ref-for-viewtransition-finished-promise\u2461"}],"title":"7.5. Skip the view transition"},{"refs":[{"id":"ref-for-viewtransition-finished-promise\u2462"}],"title":"7.8. Handle transition frame"}],"url":"#viewtransition-finished-promise"}, "viewtransition-initial-snapshot-containing-block-size": {"dfnID":"viewtransition-initial-snapshot-containing-block-size","dfnText":"initial snapshot containing block size","external":false,"refSections":[{"refs":[{"id":"ref-for-viewtransition-initial-snapshot-containing-block-size"}],"title":"7.3. Setup view transition"},{"refs":[{"id":"ref-for-viewtransition-initial-snapshot-containing-block-size\u2460"}],"title":"7.3.1. Capture the old state"},{"refs":[{"id":"ref-for-viewtransition-initial-snapshot-containing-block-size\u2461"}],"title":"7.8. Handle transition frame"}],"url":"#viewtransition-initial-snapshot-containing-block-size"}, "viewtransition-named-elements": {"dfnID":"viewtransition-named-elements","dfnText":"named elements","external":false,"refSections":[{"refs":[{"id":"ref-for-viewtransition-named-elements"}],"title":"7.3. Setup view transition"},{"refs":[{"id":"ref-for-viewtransition-named-elements\u2460"}],"title":"7.3.1. Capture the old state"},{"refs":[{"id":"ref-for-viewtransition-named-elements\u2461"}],"title":"7.3.2. Capture the new state"},{"refs":[{"id":"ref-for-viewtransition-named-elements\u2462"}],"title":"7.3.3. Setup transition pseudo-elements"},{"refs":[{"id":"ref-for-viewtransition-named-elements\u2463"}],"title":"7.9. Update pseudo-element styles"},{"refs":[{"id":"ref-for-viewtransition-named-elements\u2464"}],"title":"7.10. Clear view transition"}],"url":"#viewtransition-named-elements"}, "viewtransition-phase": {"dfnID":"viewtransition-phase","dfnText":"phase","external":false,"refSections":[{"refs":[{"id":"ref-for-viewtransition-phase"}],"title":"4.2. View Transition Painting Order"},{"refs":[{"id":"ref-for-viewtransition-phase\u2460"}],"title":"6.2.1. skipTransition() Method Steps"},{"refs":[{"id":"ref-for-viewtransition-phase\u2461"},{"id":"ref-for-viewtransition-phase\u2462"}],"title":"7.2. Perform pending transition operations"},{"refs":[{"id":"ref-for-viewtransition-phase\u2463"},{"id":"ref-for-viewtransition-phase\u2464"},{"id":"ref-for-viewtransition-phase\u2465"}],"title":"7.3. Setup view transition"},{"refs":[{"id":"ref-for-viewtransition-phase\u2466"},{"id":"ref-for-viewtransition-phase\u2467"},{"id":"ref-for-viewtransition-phase\u2468"},{"id":"ref-for-viewtransition-phase\u2460\u24ea"},{"id":"ref-for-viewtransition-phase\u2460\u2460"}],"title":"7.4. Call the update callback"},{"refs":[{"id":"ref-for-viewtransition-phase\u2460\u2461"},{"id":"ref-for-viewtransition-phase\u2460\u2462"},{"id":"ref-for-viewtransition-phase\u2460\u2463"}],"title":"7.5. Skip the view transition"},{"refs":[{"id":"ref-for-viewtransition-phase\u2460\u2464"}],"title":"7.8. Handle transition frame"}],"url":"#viewtransition-phase"}, "viewtransition-ready-promise": {"dfnID":"viewtransition-ready-promise","dfnText":"ready promise","external":false,"refSections":[{"refs":[{"id":"ref-for-viewtransition-ready-promise"},{"id":"ref-for-viewtransition-ready-promise\u2460"}],"title":"6.2. The ViewTransition interface"},{"refs":[{"id":"ref-for-viewtransition-ready-promise\u2461"}],"title":"7.3. Setup view transition"},{"refs":[{"id":"ref-for-viewtransition-ready-promise\u2462"}],"title":"7.4. Call the update callback"},{"refs":[{"id":"ref-for-viewtransition-ready-promise\u2463"},{"id":"ref-for-viewtransition-ready-promise\u2464"}],"title":"7.5. Skip the view transition"}],"url":"#viewtransition-ready-promise"}, "viewtransition-transition-root-pseudo-element": {"dfnID":"viewtransition-transition-root-pseudo-element","dfnText":"transition root pseudo-element","external":false,"refSections":[{"refs":[{"id":"ref-for-viewtransition-transition-root-pseudo-element"}],"title":"4.2. View Transition Painting Order"},{"refs":[{"id":"ref-for-viewtransition-transition-root-pseudo-element\u2460"},{"id":"ref-for-viewtransition-transition-root-pseudo-element\u2461"},{"id":"ref-for-viewtransition-transition-root-pseudo-element\u2462"}],"title":"7.1.1. Additions to Document"},{"refs":[{"id":"ref-for-viewtransition-transition-root-pseudo-element\u2463"}],"title":"7.3.3. Setup transition pseudo-elements"},{"refs":[{"id":"ref-for-viewtransition-transition-root-pseudo-element\u2464"}],"title":"7.8. Handle transition frame"}],"url":"#viewtransition-transition-root-pseudo-element"}, "viewtransition-update-callback": {"dfnID":"viewtransition-update-callback","dfnText":"update callback","external":false,"refSections":[{"refs":[{"id":"ref-for-viewtransition-update-callback"},{"id":"ref-for-viewtransition-update-callback\u2460"}],"title":"6.1.1. startViewTransition() Method Steps"},{"refs":[{"id":"ref-for-viewtransition-update-callback\u2461"},{"id":"ref-for-viewtransition-update-callback\u2462"}],"title":"7.4. Call the update callback"}],"url":"#viewtransition-update-callback"}, "viewtransition-update-callback-done-promise": {"dfnID":"viewtransition-update-callback-done-promise","dfnText":"update callback done promise","external":false,"refSections":[{"refs":[{"id":"ref-for-viewtransition-update-callback-done-promise"},{"id":"ref-for-viewtransition-update-callback-done-promise\u2460"},{"id":"ref-for-viewtransition-update-callback-done-promise\u2461"}],"title":"6.2. The ViewTransition interface"},{"refs":[{"id":"ref-for-viewtransition-update-callback-done-promise\u2462"},{"id":"ref-for-viewtransition-update-callback-done-promise\u2463"},{"id":"ref-for-viewtransition-update-callback-done-promise\u2464"}],"title":"7.4. Call the update callback"},{"refs":[{"id":"ref-for-viewtransition-update-callback-done-promise\u2465"},{"id":"ref-for-viewtransition-update-callback-done-promise\u2466"},{"id":"ref-for-viewtransition-update-callback-done-promise\u2467"}],"title":"7.5. Skip the view transition"}],"url":"#viewtransition-update-callback-done-promise"}, }; 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 = { "#activate-view-transition": {"displayText":"activate view transition","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-view-transitions","spec":"css-view-transitions-1","status":"local","text":"activate view transition","type":"dfn","url":"#activate-view-transition"}, "#call-the-update-callback": {"displayText":"call the update callback","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-view-transitions","spec":"css-view-transitions-1","status":"local","text":"call the update callback","type":"dfn","url":"#call-the-update-callback"}, "#callbackdef-viewtransitionupdatecallback": {"displayText":"ViewTransitionUpdateCallback","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-view-transitions","spec":"css-view-transitions-1","status":"local","text":"ViewTransitionUpdateCallback","type":"callback","url":"#callbackdef-viewtransitionupdatecallback"}, "#capture-rendering-characteristics": {"displayText":"capture rendering characteristics","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-view-transitions","spec":"css-view-transitions-1","status":"local","text":"capture rendering characteristics","type":"dfn","url":"#capture-rendering-characteristics"}, "#capture-the-image": {"displayText":"capture the image","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-view-transitions","spec":"css-view-transitions-1","status":"local","text":"capture the image","type":"dfn","url":"#capture-the-image"}, "#capture-the-new-state": {"displayText":"capture the new state","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-view-transitions","spec":"css-view-transitions-1","status":"local","text":"capture the new state","type":"dfn","url":"#capture-the-new-state"}, "#capture-the-old-state": {"displayText":"capture the old state","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-view-transitions","spec":"css-view-transitions-1","status":"local","text":"capture the old state","type":"dfn","url":"#capture-the-old-state"}, "#captured-element": {"displayText":"captured element","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-view-transitions","spec":"css-view-transitions-1","status":"local","text":"captured element","type":"dfn","url":"#captured-element"}, "#captured-element-group-animation-name-rule": {"displayText":"group animation name rule","export":true,"for_":["captured element"],"level":"1","normative":true,"shortname":"css-view-transitions","spec":"css-view-transitions-1","status":"local","text":"group animation name rule","type":"dfn","url":"#captured-element-group-animation-name-rule"}, "#captured-element-group-keyframes": {"displayText":"group keyframes","export":true,"for_":["captured element"],"level":"1","normative":true,"shortname":"css-view-transitions","spec":"css-view-transitions-1","status":"local","text":"group keyframes","type":"dfn","url":"#captured-element-group-keyframes"}, "#captured-element-group-styles-rule": {"displayText":"group styles rule","export":true,"for_":["captured element"],"level":"1","normative":true,"shortname":"css-view-transitions","spec":"css-view-transitions-1","status":"local","text":"group styles rule","type":"dfn","url":"#captured-element-group-styles-rule"}, "#captured-element-image-animation-name-rule": {"displayText":"image animation name rule","export":true,"for_":["captured element"],"level":"1","normative":true,"shortname":"css-view-transitions","spec":"css-view-transitions-1","status":"local","text":"image animation name rule","type":"dfn","url":"#captured-element-image-animation-name-rule"}, "#captured-element-image-pair-isolation-rule": {"displayText":"image pair isolation rule","export":true,"for_":["captured element"],"level":"1","normative":true,"shortname":"css-view-transitions","spec":"css-view-transitions-1","status":"local","text":"image pair isolation rule","type":"dfn","url":"#captured-element-image-pair-isolation-rule"}, "#captured-element-new-element": {"displayText":"new element","export":true,"for_":["captured element"],"level":"1","normative":true,"shortname":"css-view-transitions","spec":"css-view-transitions-1","status":"local","text":"new element","type":"dfn","url":"#captured-element-new-element"}, "#captured-element-old-backdrop-filter": {"displayText":"old backdrop-filter","export":true,"for_":["captured element"],"level":"1","normative":true,"shortname":"css-view-transitions","spec":"css-view-transitions-1","status":"local","text":"old backdrop-filter","type":"dfn","url":"#captured-element-old-backdrop-filter"}, "#captured-element-old-color-scheme": {"displayText":"old color-scheme","export":true,"for_":["captured element"],"level":"1","normative":true,"shortname":"css-view-transitions","spec":"css-view-transitions-1","status":"local","text":"old color-scheme","type":"dfn","url":"#captured-element-old-color-scheme"}, "#captured-element-old-direction": {"displayText":"old direction","export":true,"for_":["captured element"],"level":"1","normative":true,"shortname":"css-view-transitions","spec":"css-view-transitions-1","status":"local","text":"old direction","type":"dfn","url":"#captured-element-old-direction"}, "#captured-element-old-height": {"displayText":"old height","export":true,"for_":["captured element"],"level":"1","normative":true,"shortname":"css-view-transitions","spec":"css-view-transitions-1","status":"local","text":"old height","type":"dfn","url":"#captured-element-old-height"}, "#captured-element-old-image": {"displayText":"old image","export":true,"for_":["captured element"],"level":"1","normative":true,"shortname":"css-view-transitions","spec":"css-view-transitions-1","status":"local","text":"old image","type":"dfn","url":"#captured-element-old-image"}, "#captured-element-old-mix-blend-mode": {"displayText":"old mix-blend-mode","export":true,"for_":["captured element"],"level":"1","normative":true,"shortname":"css-view-transitions","spec":"css-view-transitions-1","status":"local","text":"old mix-blend-mode","type":"dfn","url":"#captured-element-old-mix-blend-mode"}, "#captured-element-old-text-orientation": {"displayText":"old text-orientation","export":true,"for_":["captured element"],"level":"1","normative":true,"shortname":"css-view-transitions","spec":"css-view-transitions-1","status":"local","text":"old text-orientation","type":"dfn","url":"#captured-element-old-text-orientation"}, "#captured-element-old-transform": {"displayText":"old transform","export":true,"for_":["captured element"],"level":"1","normative":true,"shortname":"css-view-transitions","spec":"css-view-transitions-1","status":"local","text":"old transform","type":"dfn","url":"#captured-element-old-transform"}, "#captured-element-old-width": {"displayText":"old width","export":true,"for_":["captured element"],"level":"1","normative":true,"shortname":"css-view-transitions","spec":"css-view-transitions-1","status":"local","text":"old width","type":"dfn","url":"#captured-element-old-width"}, "#captured-element-old-writing-mode": {"displayText":"old writing-mode","export":true,"for_":["captured element"],"level":"1","normative":true,"shortname":"css-view-transitions","spec":"css-view-transitions-1","status":"local","text":"old writing-mode","type":"dfn","url":"#captured-element-old-writing-mode"}, "#captured-element-style-definitions": {"displayText":"style definitions","export":true,"for_":["captured element"],"level":"1","normative":true,"shortname":"css-view-transitions","spec":"css-view-transitions-1","status":"local","text":"style definitions","type":"dfn","url":"#captured-element-style-definitions"}, "#captured-in-a-view-transition": {"displayText":"captured in a view transition","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-view-transitions","spec":"css-view-transitions-1","status":"local","text":"captured in a view transition","type":"dfn","url":"#captured-in-a-view-transition"}, "#clear-view-transition": {"displayText":"clear view transition","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-view-transitions","spec":"css-view-transitions-1","status":"local","text":"clear view transition","type":"dfn","url":"#clear-view-transition"}, "#document-active-view-transition": {"displayText":"active view transition","export":true,"for_":["document"],"level":"1","normative":true,"shortname":"css-view-transitions","spec":"css-view-transitions-1","status":"local","text":"active view transition","type":"dfn","url":"#document-active-view-transition"}, "#document-dynamic-view-transition-style-sheet": {"displayText":"dynamic view transition style sheet","export":true,"for_":["document"],"level":"1","normative":true,"shortname":"css-view-transitions","spec":"css-view-transitions-1","status":"local","text":"dynamic view transition style sheet","type":"dfn","url":"#document-dynamic-view-transition-style-sheet"}, "#document-rendering-suppression-for-view-transitions": {"displayText":"rendering suppression for view transitions","export":true,"for_":["document"],"level":"1","normative":true,"shortname":"css-view-transitions","spec":"css-view-transitions-1","status":"local","text":"rendering suppression for view transitions","type":"dfn","url":"#document-rendering-suppression-for-view-transitions"}, "#document-scoped-view-transition-name": {"displayText":"document-scoped view transition name","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-view-transitions","spec":"css-view-transitions-1","status":"local","text":"document-scoped view transition name","type":"dfn","url":"#document-scoped-view-transition-name"}, "#document-show-view-transition-tree": {"displayText":"show view transition tree","export":true,"for_":["document"],"level":"1","normative":true,"shortname":"css-view-transitions","spec":"css-view-transitions-1","status":"local","text":"show view transition tree","type":"dfn","url":"#document-show-view-transition-tree"}, "#dom-document-startviewtransition": {"displayText":"startViewTransition()","export":true,"for_":["Document"],"level":"1","normative":true,"shortname":"css-view-transitions","spec":"css-view-transitions-1","status":"local","text":"startViewTransition()","type":"method","url":"#dom-document-startviewtransition"}, "#dom-viewtransition-finished": {"displayText":"finished","export":true,"for_":["ViewTransition"],"level":"1","normative":true,"shortname":"css-view-transitions","spec":"css-view-transitions-1","status":"local","text":"finished","type":"attribute","url":"#dom-viewtransition-finished"}, "#dom-viewtransition-ready": {"displayText":"ready","export":true,"for_":["ViewTransition"],"level":"1","normative":true,"shortname":"css-view-transitions","spec":"css-view-transitions-1","status":"local","text":"ready","type":"attribute","url":"#dom-viewtransition-ready"}, "#dom-viewtransition-skiptransition": {"displayText":"skipTransition()","export":true,"for_":["ViewTransition"],"level":"1","normative":true,"shortname":"css-view-transitions","spec":"css-view-transitions-1","status":"local","text":"skipTransition()","type":"method","url":"#dom-viewtransition-skiptransition"}, "#dom-viewtransition-updatecallbackdone": {"displayText":"updateCallbackDone","export":true,"for_":["ViewTransition"],"level":"1","normative":true,"shortname":"css-view-transitions","spec":"css-view-transitions-1","status":"local","text":"updateCallbackDone","type":"attribute","url":"#dom-viewtransition-updatecallbackdone"}, "#global-view-transition-user-agent-style-sheet": {"displayText":"global view transition user agent style sheet","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-view-transitions","spec":"css-view-transitions-1","status":"local","text":"global view transition user agent style sheet","type":"dfn","url":"#global-view-transition-user-agent-style-sheet"}, "#handle-transition-frame": {"displayText":"handle transition frame","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-view-transitions","spec":"css-view-transitions-1","status":"local","text":"handle transition frame","type":"dfn","url":"#handle-transition-frame"}, "#named-view-transition-pseudo-elements": {"displayText":"named view transition pseudo-elements","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-view-transitions","spec":"css-view-transitions-1","status":"local","text":"named view transition pseudo-elements","type":"dfn","url":"#named-view-transition-pseudo-elements"}, "#perform-pending-transition-operations": {"displayText":"perform pending transition operations","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-view-transitions","spec":"css-view-transitions-1","status":"local","text":"perform pending transition operations","type":"dfn","url":"#perform-pending-transition-operations"}, "#propdef-view-transition-name": {"displayText":"view-transition-name","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-view-transitions","spec":"css-view-transitions-1","status":"local","text":"view-transition-name","type":"property","url":"#propdef-view-transition-name"}, "#pseudo-element-root": {"displayText":"pseudo-element root","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-view-transitions","spec":"css-view-transitions-1","status":"local","text":"pseudo-element root","type":"dfn","url":"#pseudo-element-root"}, "#pseudo-element-tree": {"displayText":"pseudo-element tree","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-view-transitions","spec":"css-view-transitions-1","status":"local","text":"pseudo-element tree","type":"dfn","url":"#pseudo-element-tree"}, "#selectordef-view-transition": {"displayText":"::view-transition","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-view-transitions","spec":"css-view-transitions-1","status":"local","text":"::view-transition","type":"selector","url":"#selectordef-view-transition"}, "#selectordef-view-transition-group": {"displayText":"::view-transition-group()","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-view-transitions","spec":"css-view-transitions-1","status":"local","text":"::view-transition-group()","type":"selector","url":"#selectordef-view-transition-group"}, "#selectordef-view-transition-image-pair": {"displayText":"::view-transition-image-pair()","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-view-transitions","spec":"css-view-transitions-1","status":"local","text":"::view-transition-image-pair()","type":"selector","url":"#selectordef-view-transition-image-pair"}, "#selectordef-view-transition-new": {"displayText":"::view-transition-new()","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-view-transitions","spec":"css-view-transitions-1","status":"local","text":"::view-transition-new()","type":"selector","url":"#selectordef-view-transition-new"}, "#selectordef-view-transition-old": {"displayText":"::view-transition-old()","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-view-transitions","spec":"css-view-transitions-1","status":"local","text":"::view-transition-old()","type":"selector","url":"#selectordef-view-transition-old"}, "#setup-transition-pseudo-elements": {"displayText":"setup transition pseudo-elements","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-view-transitions","spec":"css-view-transitions-1","status":"local","text":"setup transition pseudo-elements","type":"dfn","url":"#setup-transition-pseudo-elements"}, "#setup-view-transition": {"displayText":"setup view transition","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-view-transitions","spec":"css-view-transitions-1","status":"local","text":"setup view transition","type":"dfn","url":"#setup-view-transition"}, "#skip-the-view-transition": {"displayText":"skip the view transition","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-view-transitions","spec":"css-view-transitions-1","status":"local","text":"skip the view transition","type":"dfn","url":"#skip-the-view-transition"}, "#snapshot-containing-block": {"displayText":"snapshot containing block","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-view-transitions","spec":"css-view-transitions-1","status":"local","text":"snapshot containing block","type":"dfn","url":"#snapshot-containing-block"}, "#snapshot-containing-block-origin": {"displayText":"snapshot containing block origin","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-view-transitions","spec":"css-view-transitions-1","status":"local","text":"snapshot containing block origin","type":"dfn","url":"#snapshot-containing-block-origin"}, "#snapshot-containing-block-size": {"displayText":"snapshot containing block size","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-view-transitions","spec":"css-view-transitions-1","status":"local","text":"snapshot containing block size","type":"dfn","url":"#snapshot-containing-block-size"}, "#typedef-pt-name-selector": {"displayText":"<pt-name-selector>","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-view-transitions","spec":"css-view-transitions-1","status":"local","text":"<pt-name-selector>","type":"type","url":"#typedef-pt-name-selector"}, "#update-pseudo-element-styles": {"displayText":"update pseudo-element styles","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-view-transitions","spec":"css-view-transitions-1","status":"local","text":"update pseudo-element styles","type":"dfn","url":"#update-pseudo-element-styles"}, "#valdef-view-transition-name-none": {"displayText":"none","export":true,"for_":["view-transition-name"],"level":"1","normative":true,"shortname":"css-view-transitions","spec":"css-view-transitions-1","status":"local","text":"none","type":"value","url":"#valdef-view-transition-name-none"}, "#view-transition-layer": {"displayText":"view transition layer","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-view-transitions","spec":"css-view-transitions-1","status":"local","text":"view transition layer","type":"dfn","url":"#view-transition-layer"}, "#view-transition-name": {"displayText":"view transition name","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-view-transitions","spec":"css-view-transitions-1","status":"local","text":"view transition name","type":"dfn","url":"#view-transition-name"}, "#view-transition-pseudo-elements": {"displayText":"view transition pseudo-elements","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-view-transitions","spec":"css-view-transitions-1","status":"local","text":"view transition pseudo-elements","type":"dfn","url":"#view-transition-pseudo-elements"}, "#view-transition-tree": {"displayText":"view transition tree","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-view-transitions","spec":"css-view-transitions-1","status":"local","text":"view transition tree","type":"dfn","url":"#view-transition-tree"}, "#view-transitions": {"displayText":"view transitions","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-view-transitions","spec":"css-view-transitions-1","status":"local","text":"view transitions","type":"dfn","url":"#view-transitions"}, "#viewtransition": {"displayText":"ViewTransition","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-view-transitions","spec":"css-view-transitions-1","status":"local","text":"ViewTransition","type":"interface","url":"#viewtransition"}, "#viewtransition-finished-promise": {"displayText":"finished promise","export":true,"for_":["ViewTransition"],"level":"1","normative":true,"shortname":"css-view-transitions","spec":"css-view-transitions-1","status":"local","text":"finished promise","type":"dfn","url":"#viewtransition-finished-promise"}, "#viewtransition-initial-snapshot-containing-block-size": {"displayText":"initial snapshot containing block size","export":true,"for_":["ViewTransition"],"level":"1","normative":true,"shortname":"css-view-transitions","spec":"css-view-transitions-1","status":"local","text":"initial snapshot containing block size","type":"dfn","url":"#viewtransition-initial-snapshot-containing-block-size"}, "#viewtransition-named-elements": {"displayText":"named elements","export":true,"for_":["ViewTransition"],"level":"1","normative":true,"shortname":"css-view-transitions","spec":"css-view-transitions-1","status":"local","text":"named elements","type":"dfn","url":"#viewtransition-named-elements"}, "#viewtransition-phase": {"displayText":"phase","export":true,"for_":["ViewTransition"],"level":"1","normative":true,"shortname":"css-view-transitions","spec":"css-view-transitions-1","status":"local","text":"phase","type":"dfn","url":"#viewtransition-phase"}, "#viewtransition-ready-promise": {"displayText":"ready promise","export":true,"for_":["ViewTransition"],"level":"1","normative":true,"shortname":"css-view-transitions","spec":"css-view-transitions-1","status":"local","text":"ready promise","type":"dfn","url":"#viewtransition-ready-promise"}, "#viewtransition-transition-root-pseudo-element": {"displayText":"transition root pseudo-element","export":true,"for_":["ViewTransition"],"level":"1","normative":true,"shortname":"css-view-transitions","spec":"css-view-transitions-1","status":"local","text":"transition root pseudo-element","type":"dfn","url":"#viewtransition-transition-root-pseudo-element"}, "#viewtransition-update-callback": {"displayText":"update callback","export":true,"for_":["ViewTransition"],"level":"1","normative":true,"shortname":"css-view-transitions","spec":"css-view-transitions-1","status":"local","text":"update callback","type":"dfn","url":"#viewtransition-update-callback"}, "#viewtransition-update-callback-done-promise": {"displayText":"update callback done promise","export":true,"for_":["ViewTransition"],"level":"1","normative":true,"shortname":"css-view-transitions","spec":"css-view-transitions-1","status":"local","text":"update callback done promise","type":"dfn","url":"#viewtransition-update-callback-done-promise"}, "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-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-shadow-including-descendant": {"displayText":"shadow-including descendant","export":true,"for_":[],"level":"1","normative":true,"shortname":"dom","spec":"dom","status":"current","text":"shadow-including descendant","type":"dfn","url":"https://dom.spec.whatwg.org/#concept-shadow-including-descendant"}, "https://dom.spec.whatwg.org/#concept-tree": {"displayText":"tree","export":true,"for_":[],"level":"1","normative":true,"shortname":"dom","spec":"dom","status":"current","text":"tree","type":"dfn","url":"https://dom.spec.whatwg.org/#concept-tree"}, "https://dom.spec.whatwg.org/#concept-tree-child": {"displayText":"child","export":true,"for_":["tree"],"level":"1","normative":true,"shortname":"dom","spec":"dom","status":"current","text":"child","type":"dfn","url":"https://dom.spec.whatwg.org/#concept-tree-child"}, "https://dom.spec.whatwg.org/#concept-tree-descendant": {"displayText":"descendant","export":true,"for_":["tree"],"level":"1","normative":true,"shortname":"dom","spec":"dom","status":"current","text":"descendant","type":"dfn","url":"https://dom.spec.whatwg.org/#concept-tree-descendant"}, "https://dom.spec.whatwg.org/#concept-tree-inclusive-descendant": {"displayText":"inclusive descendant","export":true,"for_":["tree"],"level":"1","normative":true,"shortname":"dom","spec":"dom","status":"current","text":"inclusive descendant","type":"dfn","url":"https://dom.spec.whatwg.org/#concept-tree-inclusive-descendant"}, "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-participate": {"displayText":"participate","export":true,"for_":["tree"],"level":"1","normative":true,"shortname":"dom","spec":"dom","status":"current","text":"participate","type":"dfn","url":"https://dom.spec.whatwg.org/#concept-tree-participate"}, "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/#concept-tree-sibling": {"displayText":"sibling","export":true,"for_":["tree"],"level":"1","normative":true,"shortname":"dom","spec":"dom","status":"current","text":"sibling","type":"dfn","url":"https://dom.spec.whatwg.org/#concept-tree-sibling"}, "https://dom.spec.whatwg.org/#connected": {"displayText":"connected","export":true,"for_":[],"level":"1","normative":true,"shortname":"dom","spec":"dom","status":"current","text":"connected","type":"dfn","url":"https://dom.spec.whatwg.org/#connected"}, "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/#document-element": {"displayText":"document element","export":true,"for_":[],"level":"1","normative":true,"shortname":"dom","spec":"dom","status":"current","text":"document element","type":"dfn","url":"https://dom.spec.whatwg.org/#document-element"}, "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://drafts.csswg.org/css-2022/#style-sheet": {"displayText":"style sheet","export":true,"for_":[],"level":"2022","normative":true,"shortname":"css","spec":"css-2022","status":"current","text":"style sheet","type":"dfn","url":"https://drafts.csswg.org/css-2022/#style-sheet"}, "https://drafts.csswg.org/css-animations-1/#csskeyframesrule": {"displayText":"CSSKeyframesRule","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-animations","spec":"css-animations-1","status":"current","text":"CSSKeyframesRule","type":"interface","url":"https://drafts.csswg.org/css-animations-1/#csskeyframesrule"}, "https://drafts.csswg.org/css-backgrounds-3/#canvas-background": {"displayText":"canvas background","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-backgrounds","spec":"css-backgrounds-3","status":"current","text":"canvas background","type":"dfn","url":"https://drafts.csswg.org/css-backgrounds-3/#canvas-background"}, "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/#content-box": {"displayText":"content box","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-box","spec":"css-box-4","status":"current","text":"content box","type":"dfn","url":"https://drafts.csswg.org/css-box-4/#content-box"}, "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-break-4/#fragment": {"displayText":"fragment","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-break","spec":"css-break-4","status":"current","text":"fragment","type":"dfn","url":"https://drafts.csswg.org/css-break-4/#fragment"}, "https://drafts.csswg.org/css-cascade-5/#cascade-origin-ua": {"displayText":"user-agent origin","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-cascade","spec":"css-cascade-5","status":"current","text":"user-agent origin","type":"dfn","url":"https://drafts.csswg.org/css-cascade-5/#cascade-origin-ua"}, "https://drafts.csswg.org/css-cascade-5/#computed-value": {"displayText":"computed value","export":true,"for_":[],"level":"5","normative":true,"shortname":"css-cascade","spec":"css-cascade-5","status":"current","text":"computed value","type":"dfn","url":"https://drafts.csswg.org/css-cascade-5/#computed-value"}, "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-color-adjust-1/#propdef-color-scheme": {"displayText":"color-scheme","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-color-adjust","spec":"css-color-adjust-1","status":"current","text":"color-scheme","type":"property","url":"https://drafts.csswg.org/css-color-adjust-1/#propdef-color-scheme"}, "https://drafts.csswg.org/css-contain-2/#element-contents": {"displayText":"element contents","export":true,"for_":[],"level":"2","normative":true,"shortname":"css-contain","spec":"css-contain-2","status":"current","text":"element contents","type":"dfn","url":"https://drafts.csswg.org/css-contain-2/#element-contents"}, "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-3/#containing-block": {"displayText":"containing block","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-display","spec":"css-display-3","status":"current","text":"containing block","type":"dfn","url":"https://drafts.csswg.org/css-display-3/#containing-block"}, "https://drafts.csswg.org/css-display-3/#replaced-element": {"displayText":"replaced element","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-display","spec":"css-display-3","status":"current","text":"replaced element","type":"dfn","url":"https://drafts.csswg.org/css-display-3/#replaced-element"}, "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/#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-visibility": {"displayText":"visibility","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-display","spec":"css-display-4","status":"current","text":"visibility","type":"property","url":"https://drafts.csswg.org/css-display-4/#propdef-visibility"}, "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-images-3/#natural-dimensions": {"displayText":"natural dimension","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-images","spec":"css-images-3","status":"current","text":"natural dimension","type":"dfn","url":"https://drafts.csswg.org/css-images-3/#natural-dimensions"}, "https://drafts.csswg.org/css-images-3/#natural-size": {"displayText":"natural size","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-images","spec":"css-images-3","status":"current","text":"natural size","type":"dfn","url":"https://drafts.csswg.org/css-images-3/#natural-size"}, "https://drafts.csswg.org/css-images-4/#element-not-rendered": {"displayText":"element-not-rendered","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-images","spec":"css-images-4","status":"current","text":"element-not-rendered","type":"dfn","url":"https://drafts.csswg.org/css-images-4/#element-not-rendered"}, "https://drafts.csswg.org/css-overflow-3/#ink-overflow": {"displayText":"ink overflow","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-overflow","spec":"css-overflow-3","status":"current","text":"ink overflow","type":"dfn","url":"https://drafts.csswg.org/css-overflow-3/#ink-overflow"}, "https://drafts.csswg.org/css-overflow-3/#ink-overflow-rectangle": {"displayText":"ink overflow rectangle","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-overflow","spec":"css-overflow-3","status":"current","text":"ink overflow rectangle","type":"dfn","url":"https://drafts.csswg.org/css-overflow-3/#ink-overflow-rectangle"}, "https://drafts.csswg.org/css-overflow-3/#ink-overflow-region": {"displayText":"ink overflow area","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-overflow","spec":"css-overflow-3","status":"current","text":"ink overflow area","type":"dfn","url":"https://drafts.csswg.org/css-overflow-3/#ink-overflow-region"}, "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/#scrollbar-gutter": {"displayText":"scrollbar gutter","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-overflow","spec":"css-overflow-3","status":"current","text":"scrollbar gutter","type":"dfn","url":"https://drafts.csswg.org/css-overflow-3/#scrollbar-gutter"}, "https://drafts.csswg.org/css-position-3/#absolute-positioning-containing-block": {"displayText":"absolute positioning containing block","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-position","spec":"css-position-3","status":"current","text":"absolute positioning containing block","type":"dfn","url":"https://drafts.csswg.org/css-position-3/#absolute-positioning-containing-block"}, "https://drafts.csswg.org/css-position-3/#fixed-positioning-containing-block": {"displayText":"fixed positioning containing block","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-position","spec":"css-position-3","status":"current","text":"fixed positioning containing block","type":"dfn","url":"https://drafts.csswg.org/css-position-3/#fixed-positioning-containing-block"}, "https://drafts.csswg.org/css-position-4/#document-top-layer": {"displayText":"top layer","export":true,"for_":["Document"],"level":"4","normative":true,"shortname":"css-position","spec":"css-position-4","status":"current","text":"top layer","type":"dfn","url":"https://drafts.csswg.org/css-position-4/#document-top-layer"}, "https://drafts.csswg.org/css-pseudo-4/#tree-abiding": {"displayText":"tree-abiding pseudo-elements","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-pseudo","spec":"css-pseudo-4","status":"current","text":"tree-abiding pseudo-elements","type":"dfn","url":"https://drafts.csswg.org/css-pseudo-4/#tree-abiding"}, "https://drafts.csswg.org/css-scoping-1/#css-tree-scoped-name": {"displayText":"tree-scoped name","export":true,"for_":["CSS"],"level":"1","normative":true,"shortname":"css-scoping","spec":"css-scoping-1","status":"current","text":"tree-scoped name","type":"dfn","url":"https://drafts.csswg.org/css-scoping-1/#css-tree-scoped-name"}, "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-sizing-3/#propdef-height": {"displayText":"height","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-sizing","spec":"css-sizing-3","status":"current","text":"height","type":"property","url":"https://drafts.csswg.org/css-sizing-3/#propdef-height"}, "https://drafts.csswg.org/css-sizing-3/#propdef-width": {"displayText":"width","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-sizing","spec":"css-sizing-3","status":"current","text":"width","type":"property","url":"https://drafts.csswg.org/css-sizing-3/#propdef-width"}, "https://drafts.csswg.org/css-transforms-1/#identity-transform-function": {"displayText":"identity transform function","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-transforms","spec":"css-transforms-1","status":"current","text":"identity transform function","type":"dfn","url":"https://drafts.csswg.org/css-transforms-1/#identity-transform-function"}, "https://drafts.csswg.org/css-transforms-1/#propdef-transform": {"displayText":"transform","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-transforms","spec":"css-transforms-1","status":"current","text":"transform","type":"property","url":"https://drafts.csswg.org/css-transforms-1/#propdef-transform"}, "https://drafts.csswg.org/css-transforms-2/#typedef-transform-function": {"displayText":"<transform-function>","export":true,"for_":[],"level":"2","normative":true,"shortname":"css-transforms","spec":"css-transforms-2","status":"current","text":"<transform-function>","type":"type","url":"https://drafts.csswg.org/css-transforms-2/#typedef-transform-function"}, "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/#comb-one": {"displayText":"|","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"current","text":"|","type":"grammar","url":"https://drafts.csswg.org/css-values-4/#comb-one"}, "https://drafts.csswg.org/css-values-4/#identifier-value": {"displayText":"<custom-ident>","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-values","spec":"css-values-4","status":"current","text":"<custom-ident>","type":"type","url":"https://drafts.csswg.org/css-values-4/#identifier-value"}, "https://drafts.csswg.org/css-viewport/#interactive-widget": {"displayText":"interactive-widget","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-viewport","spec":"css-viewport-1","status":"current","text":"interactive-widget","type":"dfn","url":"https://drafts.csswg.org/css-viewport/#interactive-widget"}, "https://drafts.csswg.org/css-writing-modes-3/#propdef-direction": {"displayText":"direction","export":true,"for_":[],"level":"3","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-3","status":"current","text":"direction","type":"property","url":"https://drafts.csswg.org/css-writing-modes-3/#propdef-direction"}, "https://drafts.csswg.org/css-writing-modes-4/#propdef-text-orientation": {"displayText":"text-orientation","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-4","status":"current","text":"text-orientation","type":"property","url":"https://drafts.csswg.org/css-writing-modes-4/#propdef-text-orientation"}, "https://drafts.csswg.org/css-writing-modes-4/#propdef-writing-mode": {"displayText":"writing-mode","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-writing-modes","spec":"css-writing-modes-4","status":"current","text":"writing-mode","type":"property","url":"https://drafts.csswg.org/css-writing-modes-4/#propdef-writing-mode"}, "https://drafts.csswg.org/css2/#element": {"displayText":"element","export":false,"for_":[],"level":"1","normative":true,"shortname":"css","spec":"css22","status":"current","text":"element","type":"dfn","url":"https://drafts.csswg.org/css2/#element"}, "https://drafts.csswg.org/cssom-1/#cssstylerule": {"displayText":"CSSStyleRule","export":true,"for_":[],"level":"1","normative":true,"shortname":"cssom","spec":"cssom-1","status":"current","text":"CSSStyleRule","type":"interface","url":"https://drafts.csswg.org/cssom-1/#cssstylerule"}, "https://drafts.csswg.org/cssom-view-1/#layout-viewport": {"displayText":"layout viewport","export":true,"for_":[],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"current","text":"layout viewport","type":"dfn","url":"https://drafts.csswg.org/cssom-view-1/#layout-viewport"}, "https://drafts.csswg.org/cssom-view-1/#scrolling-box": {"displayText":"scrolling box","export":true,"for_":[],"level":"1","normative":true,"shortname":"cssom-view","spec":"cssom-view-1","status":"current","text":"scrolling box","type":"dfn","url":"https://drafts.csswg.org/cssom-view-1/#scrolling-box"}, "https://drafts.csswg.org/scroll-animations-1/#scroll-driven-animations": {"displayText":"scroll-driven animations","export":true,"for_":[],"level":"1","normative":true,"shortname":"scroll-animations","spec":"scroll-animations-1","status":"current","text":"scroll-driven animations","type":"dfn","url":"https://drafts.csswg.org/scroll-animations-1/#scroll-driven-animations"}, "https://drafts.csswg.org/selectors-3/#x": {"displayText":"*","export":true,"for_":[],"level":"3","normative":true,"shortname":"selectors","spec":"selectors-3","status":"current","text":"*","type":"selector","url":"https://drafts.csswg.org/selectors-3/#x"}, "https://drafts.csswg.org/selectors-4/#functional-pseudo-element": {"displayText":"functional pseudo-element","export":true,"for_":[],"level":"4","normative":true,"shortname":"selectors","spec":"selectors-4","status":"current","text":"functional pseudo-element","type":"dfn","url":"https://drafts.csswg.org/selectors-4/#functional-pseudo-element"}, "https://drafts.csswg.org/selectors-4/#only-child-pseudo": {"displayText":":only-child","export":true,"for_":[],"level":"4","normative":true,"shortname":"selectors","spec":"selectors-4","status":"current","text":":only-child","type":"selector","url":"https://drafts.csswg.org/selectors-4/#only-child-pseudo"}, "https://drafts.csswg.org/selectors-4/#originating-element": {"displayText":"originating element","export":true,"for_":[],"level":"4","normative":true,"shortname":"selectors","spec":"selectors-4","status":"current","text":"originating element","type":"dfn","url":"https://drafts.csswg.org/selectors-4/#originating-element"}, "https://drafts.csswg.org/selectors-4/#originating-pseudo-element": {"displayText":"originating pseudo-element","export":true,"for_":[],"level":"4","normative":true,"shortname":"selectors","spec":"selectors-4","status":"current","text":"originating pseudo-element","type":"dfn","url":"https://drafts.csswg.org/selectors-4/#originating-pseudo-element"}, "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.csswg.org/selectors-4/#selector": {"displayText":"selector","export":true,"for_":[],"level":"4","normative":true,"shortname":"selectors","spec":"selectors-4","status":"current","text":"selector","type":"dfn","url":"https://drafts.csswg.org/selectors-4/#selector"}, "https://drafts.csswg.org/selectors-4/#type-selector": {"displayText":"type selector","export":true,"for_":[],"level":"4","normative":true,"shortname":"selectors","spec":"selectors-4","status":"current","text":"type selector","type":"dfn","url":"https://drafts.csswg.org/selectors-4/#type-selector"}, "https://drafts.csswg.org/selectors-4/#ultimate-originating-element": {"displayText":"ultimate originating element","export":true,"for_":[],"level":"4","normative":true,"shortname":"selectors","spec":"selectors-4","status":"current","text":"ultimate originating element","type":"dfn","url":"https://drafts.csswg.org/selectors-4/#ultimate-originating-element"}, "https://drafts.csswg.org/web-animations-1/#animation-associated-effect": {"displayText":"associated effect","export":true,"for_":["animation"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"current","text":"associated effect","type":"dfn","url":"https://drafts.csswg.org/web-animations-1/#animation-associated-effect"}, "https://drafts.csswg.org/web-animations-1/#animation-play-state": {"displayText":"play state","export":true,"for_":["animation"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"current","text":"play state","type":"dfn","url":"https://drafts.csswg.org/web-animations-1/#animation-play-state"}, "https://drafts.csswg.org/web-animations-1/#discrete": {"displayText":"discrete","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"current","text":"discrete","type":"dfn","url":"https://drafts.csswg.org/web-animations-1/#discrete"}, "https://drafts.csswg.org/web-animations-1/#document-timeline": {"displayText":"document timeline","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"current","text":"document timeline","type":"dfn","url":"https://drafts.csswg.org/web-animations-1/#document-timeline"}, "https://drafts.csswg.org/web-animations-1/#keyframe-effect-effect-target": {"displayText":"effect target","export":true,"for_":["keyframe effect"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"current","text":"effect target","type":"dfn","url":"https://drafts.csswg.org/web-animations-1/#keyframe-effect-effect-target"}, "https://drafts.csswg.org/web-animations-1/#pending-animation-event-queue": {"displayText":"pending animation event queue","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"current","text":"pending animation event queue","type":"dfn","url":"https://drafts.csswg.org/web-animations-1/#pending-animation-event-queue"}, "https://drafts.csswg.org/web-animations-1/#play-state-paused": {"displayText":"paused","export":true,"for_":["play state"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"current","text":"paused","type":"dfn","url":"https://drafts.csswg.org/web-animations-1/#play-state-paused"}, "https://drafts.csswg.org/web-animations-1/#play-state-running": {"displayText":"running","export":true,"for_":["play state"],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"current","text":"running","type":"dfn","url":"https://drafts.csswg.org/web-animations-1/#play-state-running"}, "https://drafts.csswg.org/web-animations-1/#timeline": {"displayText":"timeline","export":true,"for_":[],"level":"1","normative":true,"shortname":"web-animations","spec":"web-animations-1","status":"current","text":"timeline","type":"dfn","url":"https://drafts.csswg.org/web-animations-1/#timeline"}, "https://drafts.fxtf.org/compositing-2/#propdef-isolation": {"displayText":"isolation","export":true,"for_":[],"level":"2","normative":true,"shortname":"compositing","spec":"compositing-2","status":"current","text":"isolation","type":"property","url":"https://drafts.fxtf.org/compositing-2/#propdef-isolation"}, "https://drafts.fxtf.org/compositing-2/#propdef-mix-blend-mode": {"displayText":"mix-blend-mode","export":true,"for_":[],"level":"2","normative":true,"shortname":"compositing","spec":"compositing-2","status":"current","text":"mix-blend-mode","type":"property","url":"https://drafts.fxtf.org/compositing-2/#propdef-mix-blend-mode"}, "https://drafts.fxtf.org/css-masking-1/#propdef-clip-path": {"displayText":"clip-path","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-masking","spec":"css-masking-1","status":"current","text":"clip-path","type":"property","url":"https://drafts.fxtf.org/css-masking-1/#propdef-clip-path"}, "https://drafts.fxtf.org/filter-effects-1/#propdef-filter": {"displayText":"filter","export":true,"for_":[],"level":"1","normative":true,"shortname":"filter-effects","spec":"filter-effects-1","status":"current","text":"filter","type":"property","url":"https://drafts.fxtf.org/filter-effects-1/#propdef-filter"}, "https://drafts.fxtf.org/filter-effects-2/#backdrop-root": {"displayText":"Backdrop Root","export":true,"for_":[],"level":"2","normative":true,"shortname":"filter-effects","spec":"filter-effects-2","status":"current","text":"backdrop root","type":"dfn","url":"https://drafts.fxtf.org/filter-effects-2/#backdrop-root"}, "https://drafts.fxtf.org/filter-effects-2/#propdef-backdrop-filter": {"displayText":"backdrop-filter","export":true,"for_":[],"level":"2","normative":true,"shortname":"filter-effects","spec":"filter-effects-2","status":"current","text":"backdrop-filter","type":"property","url":"https://drafts.fxtf.org/filter-effects-2/#propdef-backdrop-filter"}, "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://html.spec.whatwg.org/multipage/document-sequences.html#child-navigable": {"displayText":"child navigable","export":true,"for_":[],"level":"1","normative":true,"shortname":"html","spec":"html","status":"current","text":"child navigable","type":"dfn","url":"https://html.spec.whatwg.org/multipage/document-sequences.html#child-navigable"}, "https://html.spec.whatwg.org/multipage/indices.html#event-unhandledrejection": {"displayText":"unhandledrejection","export":true,"for_":["Window","WorkerGlobalScope"],"level":"1","normative":true,"shortname":"html","spec":"html","status":"current","text":"unhandledrejection","type":"event","url":"https://html.spec.whatwg.org/multipage/indices.html#event-unhandledrejection"}, "https://html.spec.whatwg.org/multipage/infrastructure.html#in-parallel": {"displayText":"in parallel","export":true,"for_":[],"level":"1","normative":true,"shortname":"html","spec":"html","status":"current","text":"in parallel","type":"dfn","url":"https://html.spec.whatwg.org/multipage/infrastructure.html#in-parallel"}, "https://html.spec.whatwg.org/multipage/interaction.html#visibility-state": {"displayText":"visibility state","export":true,"for_":["Document"],"level":"1","normative":true,"shortname":"html","spec":"html","status":"current","text":"visibility state","type":"dfn","url":"https://html.spec.whatwg.org/multipage/interaction.html#visibility-state"}, "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/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#concept-relevant-realm": {"displayText":"relevant realm","export":true,"for_":[],"level":"1","normative":true,"shortname":"html","spec":"html","status":"current","text":"relevant realm","type":"dfn","url":"https://html.spec.whatwg.org/multipage/webappapis.html#concept-relevant-realm"}, "https://html.spec.whatwg.org/multipage/webappapis.html#dom-manipulation-task-source": {"displayText":"DOM manipulation task source","export":true,"for_":[],"level":"1","normative":true,"shortname":"html","spec":"html","status":"current","text":"dom manipulation task source","type":"dfn","url":"https://html.spec.whatwg.org/multipage/webappapis.html#dom-manipulation-task-source"}, "https://html.spec.whatwg.org/multipage/webappapis.html#queue-a-global-task": {"displayText":"queue a global task","export":true,"for_":[],"level":"1","normative":true,"shortname":"html","spec":"html","status":"current","text":"queue a global task","type":"dfn","url":"https://html.spec.whatwg.org/multipage/webappapis.html#queue-a-global-task"}, "https://infra.spec.whatwg.org/#assert": {"displayText":"assert","export":true,"for_":[],"level":"1","normative":true,"shortname":"infra","spec":"infra","status":"current","text":"assert","type":"dfn","url":"https://infra.spec.whatwg.org/#assert"}, "https://infra.spec.whatwg.org/#implementation-defined": {"displayText":"implementation-defined","export":true,"for_":[],"level":"1","normative":true,"shortname":"infra","spec":"infra","status":"current","text":"implementation-defined","type":"dfn","url":"https://infra.spec.whatwg.org/#implementation-defined"}, "https://infra.spec.whatwg.org/#iteration-continue": {"displayText":"continue","export":true,"for_":["iteration"],"level":"1","normative":true,"shortname":"infra","spec":"infra","status":"current","text":"continue","type":"dfn","url":"https://infra.spec.whatwg.org/#iteration-continue"}, "https://infra.spec.whatwg.org/#list": {"displayText":"list","export":true,"for_":[],"level":"1","normative":true,"shortname":"infra","spec":"infra","status":"current","text":"list","type":"dfn","url":"https://infra.spec.whatwg.org/#list"}, "https://infra.spec.whatwg.org/#list-append": {"displayText":"append","export":true,"for_":["list"],"level":"1","normative":true,"shortname":"infra","spec":"infra","status":"current","text":"append","type":"dfn","url":"https://infra.spec.whatwg.org/#list-append"}, "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/#list-iterate": {"displayText":"for each","export":true,"for_":["list","set"],"level":"1","normative":true,"shortname":"infra","spec":"infra","status":"current","text":"for each","type":"dfn","url":"https://infra.spec.whatwg.org/#list-iterate"}, "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/#map-getting-the-values": {"displayText":"values","export":true,"for_":["map"],"level":"1","normative":true,"shortname":"infra","spec":"infra","status":"current","text":"values","type":"dfn","url":"https://infra.spec.whatwg.org/#map-getting-the-values"}, "https://infra.spec.whatwg.org/#map-iterate": {"displayText":"for each","export":true,"for_":["map"],"level":"1","normative":true,"shortname":"infra","spec":"infra","status":"current","text":"for each","type":"dfn","url":"https://infra.spec.whatwg.org/#map-iterate"}, "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/#ordered-set": {"displayText":"set","export":true,"for_":[],"level":"1","normative":true,"shortname":"infra","spec":"infra","status":"current","text":"set","type":"dfn","url":"https://infra.spec.whatwg.org/#ordered-set"}, "https://infra.spec.whatwg.org/#set-append": {"displayText":"append","export":true,"for_":["set"],"level":"1","normative":true,"shortname":"infra","spec":"infra","status":"current","text":"append","type":"dfn","url":"https://infra.spec.whatwg.org/#set-append"}, "https://infra.spec.whatwg.org/#struct": {"displayText":"struct","export":true,"for_":[],"level":"1","normative":true,"shortname":"infra","spec":"infra","status":"current","text":"struct","type":"dfn","url":"https://infra.spec.whatwg.org/#struct"}, "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://w3c.github.io/IntersectionObserver/#intersectionobserver": {"displayText":"IntersectionObserver","export":true,"for_":[],"level":"1","normative":true,"shortname":"intersection-observer","spec":"intersection-observer","status":"current","text":"IntersectionObserver","type":"interface","url":"https://w3c.github.io/IntersectionObserver/#intersectionobserver"}, "https://w3c.github.io/hr-time/#dfn-duration": {"displayText":"duration","export":true,"for_":[],"level":"3","normative":true,"shortname":"hr-time","spec":"hr-time-3","status":"current","text":"duration","type":"dfn","url":"https://w3c.github.io/hr-time/#dfn-duration"}, "https://w3c.github.io/pointerevents/#dfn-pointer-capture": {"displayText":"pointer capture","export":true,"for_":[],"level":"3","normative":true,"shortname":"pointerevents","spec":"pointerevents3","status":"current","text":"pointer capture","type":"dfn","url":"https://w3c.github.io/pointerevents/#dfn-pointer-capture"}, "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/#a-new-promise": {"displayText":"a new promise","export":true,"for_":[],"level":"1","normative":true,"shortname":"webidl","spec":"webidl","status":"current","text":"a new promise","type":"dfn","url":"https://webidl.spec.whatwg.org/#a-new-promise"}, "https://webidl.spec.whatwg.org/#a-promise-resolved-with": {"displayText":"a promise resolved with","export":true,"for_":[],"level":"1","normative":true,"shortname":"webidl","spec":"webidl","status":"current","text":"a promise resolved with","type":"dfn","url":"https://webidl.spec.whatwg.org/#a-promise-resolved-with"}, "https://webidl.spec.whatwg.org/#aborterror": {"displayText":"AbortError","export":true,"for_":[],"level":"1","normative":true,"shortname":"webidl","spec":"webidl","status":"current","text":"AbortError","type":"exception","url":"https://webidl.spec.whatwg.org/#aborterror"}, "https://webidl.spec.whatwg.org/#dfn-perform-steps-once-promise-is-settled": {"displayText":"react","export":true,"for_":["promise"],"level":"1","normative":true,"shortname":"webidl","spec":"webidl","status":"current","text":"react","type":"dfn","url":"https://webidl.spec.whatwg.org/#dfn-perform-steps-once-promise-is-settled"}, "https://webidl.spec.whatwg.org/#getter-steps": {"displayText":"getter steps","export":true,"for_":[],"level":"1","normative":true,"shortname":"webidl","spec":"webidl","status":"current","text":"getter steps","type":"dfn","url":"https://webidl.spec.whatwg.org/#getter-steps"}, "https://webidl.spec.whatwg.org/#idl-DOMException": {"displayText":"DOMException","export":true,"for_":[],"level":"1","normative":true,"shortname":"webidl","spec":"webidl","status":"current","text":"DOMException","type":"interface","url":"https://webidl.spec.whatwg.org/#idl-DOMException"}, "https://webidl.spec.whatwg.org/#idl-any": {"displayText":"any","export":true,"for_":[],"level":"1","normative":true,"shortname":"webidl","spec":"webidl","status":"current","text":"any","type":"interface","url":"https://webidl.spec.whatwg.org/#idl-any"}, "https://webidl.spec.whatwg.org/#idl-promise": {"displayText":"Promise","export":true,"for_":[],"level":"1","normative":true,"shortname":"webidl","spec":"webidl","status":"current","text":"Promise","type":"interface","url":"https://webidl.spec.whatwg.org/#idl-promise"}, "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/#invalidstateerror": {"displayText":"InvalidStateError","export":true,"for_":[],"level":"1","normative":true,"shortname":"webidl","spec":"webidl","status":"current","text":"InvalidStateError","type":"exception","url":"https://webidl.spec.whatwg.org/#invalidstateerror"}, "https://webidl.spec.whatwg.org/#invoke-a-callback-function": {"displayText":"invoke","export":true,"for_":[],"level":"1","normative":true,"shortname":"webidl","spec":"webidl","status":"current","text":"invoke","type":"dfn","url":"https://webidl.spec.whatwg.org/#invoke-a-callback-function"}, "https://webidl.spec.whatwg.org/#mark-a-promise-as-handled": {"displayText":"mark as handled","export":true,"for_":[],"level":"1","normative":true,"shortname":"webidl","spec":"webidl","status":"current","text":"mark as handled","type":"dfn","url":"https://webidl.spec.whatwg.org/#mark-a-promise-as-handled"}, "https://webidl.spec.whatwg.org/#method-steps": {"displayText":"method steps","export":true,"for_":[],"level":"1","normative":true,"shortname":"webidl","spec":"webidl","status":"current","text":"method steps","type":"dfn","url":"https://webidl.spec.whatwg.org/#method-steps"}, "https://webidl.spec.whatwg.org/#reject": {"displayText":"reject","export":true,"for_":[],"level":"1","normative":true,"shortname":"webidl","spec":"webidl","status":"current","text":"reject","type":"dfn","url":"https://webidl.spec.whatwg.org/#reject"}, "https://webidl.spec.whatwg.org/#resolve": {"displayText":"resolve","export":true,"for_":[],"level":"1","normative":true,"shortname":"webidl","spec":"webidl","status":"current","text":"resolve","type":"dfn","url":"https://webidl.spec.whatwg.org/#resolve"}, "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"}, "https://webidl.spec.whatwg.org/#timeouterror": {"displayText":"TimeoutError","export":true,"for_":[],"level":"1","normative":true,"shortname":"webidl","spec":"webidl","status":"current","text":"TimeoutError","type":"exception","url":"https://webidl.spec.whatwg.org/#timeouterror"}, "https://wicg.github.io/navigation-api/#navigateevent": {"displayText":"NavigateEvent","export":true,"for_":[],"level":"1","normative":true,"shortname":"css-view-transitions","spec":"","status":"anchor-block","text":"NavigateEvent","type":"interface","url":"https://wicg.github.io/navigation-api/#navigateevent"}, "https://wicg.github.io/navigation-api/#ref-for-dom-navigateevent-signal①": {"displayText":"signal","export":true,"for_":["NavigateEvent"],"level":"1","normative":true,"shortname":"css-view-transitions","spec":"","status":"anchor-block","text":"signal","type":"interface","url":"https://wicg.github.io/navigation-api/#ref-for-dom-navigateevent-signal\u2460"}, "https://www.w3.org/TR/CSS21/selector.html#x22": {"displayText":"pseudo-elements","export":true,"for_":[],"level":"1","normative":true,"shortname":"css","spec":"css21","status":"current","text":"pseudo-elements","type":"dfn","url":"https://www.w3.org/TR/CSS21/selector.html#x22"}, "https://www.w3.org/TR/CSS21/visuren.html#x43": {"displayText":"stacking context","export":true,"for_":[],"level":"1","normative":true,"shortname":"css","spec":"css21","status":"current","text":"stacking context","type":"dfn","url":"https://www.w3.org/TR/CSS21/visuren.html#x43"}, "https://www.w3.org/TR/css-pseudo-4/#tree-abiding": {"displayText":"tree-abiding pseudo-element","export":true,"for_":[],"level":"4","normative":true,"shortname":"css-pseudo","spec":"css-pseudo-4","status":"snapshot","text":"tree-abiding pseudo-element","type":"dfn","url":"https://www.w3.org/TR/css-pseudo-4/#tree-abiding"}, }; 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 ref = refsData[url]; if(!ref) return; hideAllRefHints(); // Only display one at this time. const refHint = mkRefHint(link, ref); append(document.body, refHint); link.setAttribute("aria-expanded", "true"); positionRefHint(refHint); } function setupRefHintEventListeners(link, refHint) { if (refHint.teardownEventListeners) return; // Add event handlers to hide the refHint after the user moves away // from both the link and refHint, if not hovering either within one second. let timeout = null; const startHidingRefHint = (event) => { if (timeout) { clearTimeout(timeout); } timeout = setTimeout(() => { hideRefHint(refHint); }, 1000); } const resetHidingRefHint = (event) => { if (timeout) clearTimeout(timeout); timeout = null; }; link.addEventListener("mouseleave", startHidingRefHint); link.addEventListener("mouseenter", resetHidingRefHint); link.addEventListener("blur", startHidingRefHint); link.addEventListener("focus", resetHidingRefHint); refHint.addEventListener("mouseleave", startHidingRefHint); refHint.addEventListener("mouseenter", resetHidingRefHint); refHint.addEventListener("blur", startHidingRefHint); refHint.addEventListener("focus", resetHidingRefHint); refHint.teardownEventListeners = () => { // remove event listeners resetHidingRefHint(); link.removeEventListener("mouseleave", startHidingRefHint); link.removeEventListener("mouseenter", resetHidingRefHint); link.removeEventListener("blur", startHidingRefHint); link.removeEventListener("focus", resetHidingRefHint); refHint.removeEventListener("mouseleave", startHidingRefHint); refHint.removeEventListener("mouseenter", resetHidingRefHint); refHint.removeEventListener("blur", startHidingRefHint); refHint.removeEventListener("focus", resetHidingRefHint); }; } function positionRefHint(refHint) { const link = refHint.forLink; const linkPos = getBounds(link); refHint.style.top = linkPos.bottom + "px"; refHint.style.left = linkPos.left + "px"; const panelPos = refHint.getBoundingClientRect(); const panelMargin = 8; const maxRight = document.body.parentNode.clientWidth - panelMargin; if (panelPos.right > maxRight) { const overflowAmount = panelPos.right - maxRight; const newLeft = Math.max(panelMargin, linkPos.left - overflowAmount); refHint.style.left = newLeft + "px"; } } // TODO: shared util // Returns the root-level absolute position {left and top} of element. function getBounds(el, relativeTo=document.body) { const relativeRect = relativeTo.getBoundingClientRect(); const elRect = el.getBoundingClientRect(); const top = elRect.top - relativeRect.top; const left = elRect.left - relativeRect.left; return { top, left, bottom: top + elRect.height, right: left + elRect.width, } } function showRefHintListener(e) { // If the target isn't in a link (or is a link), // just ignore it. let link = e.target.closest("a"); if(!link) return; // If the target is in a ref-hint panel // (aka a link in the already-open one), // also just ignore it. if(link.closest(".ref-hint")) return; // Otherwise, show the panel for the link. showRefHint(link); } function hideAllHintsListener(e) { // If the click is inside a ref-hint panel, ignore it. if(e.target.closest(".ref-hint")) return; // Otherwise, close all the current panels. hideAllRefHints(); } document.addEventListener("DOMContentLoaded", () => { document.body.addEventListener("mousedown", showRefHintListener); document.body.addEventListener("focus", showRefHintListener); document.body.addEventListener("click", hideAllHintsListener); }); window.addEventListener("resize", () => { // Hide any open ref hint. hideAllRefHints(); }); } </script> <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>