@@ -595,6 +595,8 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
595
595
All of the [=view transition pseudo-elements=] are selected
596
596
from their [=ultimate originating element=] , the [=document element=] .
597
597
598
+ The [=view transition tree=] is not exposed to the accessibility tree.
599
+
598
600
<div class="example">
599
601
For example,
600
602
the ''::view-transition-group()'' pseudo-element is attached to the root element selector directly,
@@ -809,7 +811,17 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
809
811
Therefore, the [=view transition layer=] is a sibling of all other content.
810
812
811
813
When a {{Document}} 's [=document/active view transition=]' s [=ViewTransition/phase=] is "`animating`",
812
- the boxes generated by any element in that {{Document}} with [=captured in a view transition=] are [=invisible=] .
814
+ the boxes generated by any element in that {{Document}} with [=captured in a view transition=]
815
+ and its [=element contents=] ,
816
+ except [=ViewTransition/transition root pseudo-element=] 's [=tree/inclusive descendants=] ,
817
+ are not painted (as if they had ''visibility: hidden'' ) and
818
+ do not respond to hit-testing (as if they had ''pointer-events: none'' ).
819
+
820
+ Note: Elements participating in a transition need to skip painting in their DOM location because
821
+ their image is painted in the corresponding ''::view-transition-new()'' pseudo-element instead.
822
+ Similarly, hit-testing is skipped because the element's DOM location does not correspond to where its contents are rendered.
823
+ However, there is no change in how these elements are accessed by assistive technologies or the accessibility tree.
824
+
813
825
814
826
# User Agent Stylesheet # {#ua-styles}
815
827
@@ -1165,6 +1177,12 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
1165
1177
: <dfn>old mix-blend-mode</dfn>
1166
1178
:: Null or a 'mix-blend-mode' , initially null.
1167
1179
1180
+ : <dfn>old backdrop-filter</dfn>
1181
+ :: Null or a 'backdrop-filter' , initially null.
1182
+
1183
+ : <dfn>old color-scheme</dfn>
1184
+ :: Null or a 'color-scheme' , initially null.
1185
+
1168
1186
: <dfn>new element</dfn>
1169
1187
:: an [=/element=] or null. Initially null.
1170
1188
</dl>
@@ -1378,6 +1396,10 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
1378
1396
1379
1397
1. Set |capture|'s [=captured element/old mix-blend-mode=] to the [=computed value=] of ' mix-blend-mode' on |element|.
1380
1398
1399
+ 1. Set |capture|'s [=captured element/old backdrop-filter=] to the [=computed value=] of ' backdrop-filter' on |element|.
1400
+
1401
+ 1. Set |capture|'s [=captured element/old color-scheme=] to the [=computed value=] of ' color-scheme' on |element|.
1402
+
1381
1403
1. Let |transitionName| be the [=computed value=] of 'view-transition-name' for |element|.
1382
1404
1383
1405
1. Set |namedElements|[|transitionName|] to |capture|.
@@ -1503,6 +1525,8 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
1503
1525
1504
1526
1. Let |height| be |capturedElement|'s [=captured element/old height=] .
1505
1527
1528
+ 1. Let |backdropFilter| be |capturedElement|'s [=captured element/old backdrop-filter=] .
1529
+
1506
1530
1. Set |capturedElement|'s [=captured element/group keyframes=] to a new {{CSSKeyframesRule}} representing the following CSS,
1507
1531
and append it to |document|'s [=document/dynamic view transition style sheet=] :
1508
1532
@@ -1513,6 +1537,7 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
1513
1537
transform: <var> transform</var> ;
1514
1538
width: <var> width</var> ;
1515
1539
height: <var> height</var> ;
1540
+ backdrop-filter: <var> backdropFilter</var> ;
1516
1541
}
1517
1542
}
1518
1543
</pre>
@@ -1763,7 +1788,7 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
1763
1788
1764
1789
1. [=map/For each=] |transitionName| → |capturedElement| of |transition|'s [=ViewTransition/named elements=] :
1765
1790
1766
- 1. Let |width|, |height|, |transform|, |writingMode|, |direction|, |textOrientation| and |mixBlendMode | be null.
1791
+ 1. Let |width|, |height|, |transform|, |writingMode|, |direction|, |textOrientation|, |mixBlendMode|, |backdropFilter| and |colorScheme | be null.
1767
1792
1768
1793
1. If |capturedElement|'s [=new element=] is null, then:
1769
1794
@@ -1781,6 +1806,10 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
1781
1806
1782
1807
1. Set |mixBlendMode| to |capturedElement|'s [=captured element/old mix-blend-mode=] .
1783
1808
1809
+ 1. Set |backdropFilter| to |capturedElement|'s [=captured element/old backdrop-filter=] .
1810
+
1811
+ 1. Set |colorScheme| to |capturedElement|'s [=captured element/old color-scheme=] .
1812
+
1784
1813
1. Otherwise:
1785
1814
1786
1815
1. Return failure if any of the following conditions is true:
@@ -1806,6 +1835,10 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
1806
1835
1807
1836
1. Set |mixBlendMode| to the [=computed value=] of 'mix-blend-mode' on |capturedElement|'s [=new element=] .
1808
1837
1838
+ 1. Set |backdropFilter| to the [=computed value=] of 'backdrop-filter' on |capturedElement|'s [=new element=] .
1839
+
1840
+ 1. Set |colorScheme| to the [=computed value=] of 'color-scheme' on |capturedElement|'s [=new element=] .
1841
+
1809
1842
1. If |capturedElement|'s [=captured element/group styles rule=] is null,
1810
1843
then set |capturedElement|'s [=captured element/group styles rule=] to a new {{CSSStyleRule}} representing the following CSS,
1811
1844
and append it to |transition|'s [=relevant global object' s=] [=associated document=] 's [=document/dynamic view transition style sheet=] .
@@ -1822,6 +1855,8 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
1822
1855
direction: <var> direction</var> ;
1823
1856
text-orientation: <var> textOrientation</var> ;
1824
1857
mix-blend-mode: <var> mixBlendMode</var> ;
1858
+ backdrop-filter: <var> backdropFilter</var> ;
1859
+ color-scheme: <var> colorScheme</var> ;
1825
1860
}
1826
1861
</pre>
1827
1862
@@ -1885,6 +1920,10 @@ Changes from <a href="https://www.w3.org/TR/2023/WD-css-view-transitions-1-20230
1885
1920
* 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> .
1886
1921
* Refactor the old capture algorithm to properly set [=captured in a view transition=] before reading the value.
1887
1922
* Make the {{Document/startViewTransition()}} parameter non-nullable. See <a href="https://github.com/w3c/csswg-drafts/issues/9460">issue 9460</a> .
1923
+ * Elements participating in a [=view transition=] are exposed to accessibility tree. See <a href="https://github.com/w3c/csswg-drafts/issues/9365">issue 9365</a> .
1924
+ * The [=view transition tree=] is not exposed to accessibility tree. See <a href="https://github.com/w3c/csswg-drafts/issues/9365">issue 9365</a> .
1925
+ * Animate back-drop filter similar to transform/size. See <a href="https://github.com/w3c/csswg-drafts/issues/9358">issue 9358</a> .
1926
+ * Copy `color-scheme` from DOM element to ''::view-transition-group()'' . See <a href="https://github.com/w3c/csswg-drafts/issues/9276">issue 9276</a> .
1888
1927
1889
1928
<h3 id="changes-since-2022-05-25">
1890
1929
Changes from <a href="https://www.w3.org/TR/2023/WD-css-view-transitions-1-20230525/">2022-05-25 Working Draft</a>
0 commit comments