testing/web-platform/tests/scroll-animations/css/view-timeline-lookup.html

   1 <!DOCTYPE html>
   2 <title>Named view-timeline lookup</title>
   3 <link rel="help" src="https://drafts.csswg.org/scroll-animations-1/#view-timelines-named">
   4 <script src="/resources/testharness.js"></script>
   5 <script src="/resources/testharnessreport.js"></script>
   6 <script src="/web-animations/testcommon.js"></script>
   7 <script src="support/testcommon.js"></script>
   8 <style>
   9   @keyframes anim {
  10     from { z-index: 0; }
  11     to { z-index: 100; }
  12   }
  13   .scroller {
  14     overflow: auto;
  15     width: 100px;
  16     height: 100px;
  17   }
  18   .scroller > div {
  19     height: 25px;
  20     z-index: -1;
  21   }
  22 </style>
  23 <main id=main></main>
  24 <script>
  25   async function inflate(t, template) {
  26     t.add_cleanup(() => main.replaceChildren());
  27     return runAndWaitForFrameUpdate(() => {
  28       main.append(template.content.cloneNode(true));
  29     });
  30   }
  31 </script>
  32
  33 <template id=timeline_self>
  34   <style>
  35     #target {
  36       height: 0px;
  37       view-timeline: --t1;
  38       animation: anim 1s linear;
  39       animation-timeline: --t1;
  40     }
  41   </style>
  42   <div id=scroller class=scroller>
  43     <div id=target></div>
  44     <div></div>
  45     <div></div>
  46     <div></div>
  47     <div></div>
  48     <div></div>
  49   </div>
  50 </template>
  51 <script>
  52   promise_test(async (t) => {
  53     await inflate(t, timeline_self);
  54     assert_equals(getComputedStyle(target).zIndex, '100');
  55   }, 'view-timeline on self');
  56 </script>
  57
  58 <template id=timeline_preceding_sibling>
  59   <style>
  60     #scroller {
  61       timeline-scope: --t1;
  62     }
  63     #timeline {
  64       height: 0px;
  65       view-timeline: --t1;
  66     }
  67     #target {
  68       animation: anim 1s linear;
  69       animation-timeline: --t1;
  70     }
  71   </style>
  72   <div id=scroller class=scroller>
  73     <div></div>
  74     <div id=timeline></div>
  75     <div></div>
  76     <div></div>
  77     <div id=target></div>
  78     <div></div>
  79     <div></div>
  80   </div>
  81 </template>
  82 <script>
  83   promise_test(async (t) => {
  84     await inflate(t, timeline_preceding_sibling);
  85     assert_equals(getComputedStyle(target).zIndex, '75');
  86   }, 'timeline-scope on preceding sibling');
  87 </script>
  88
  89 <template id=timeline_ancestor>
  90   <style>
  91     #timeline {
  92       height: 0px;
  93       view-timeline: --t1;
  94     }
  95     #target {
  96       animation: anim 1s linear;
  97       animation-timeline: --t1;
  98     }
  99   </style>
 100   <div id=scroller class=scroller>
 101     <div></div>
 102     <div></div>
 103     <div></div>
 104     <div id=timeline>
 105       <div>
 106         <div id=target></div>
 107       </div>
 108     </div>
 109     <div></div>
 110     <div></div>
 111   </div>
 112 </template>
 113 <script>
 114   promise_test(async (t) => {
 115     await inflate(t, timeline_ancestor);
 116     assert_equals(getComputedStyle(target).zIndex, '25');
 117   }, 'view-timeline on ancestor');
 118 </script>
 119
 120 <template id=timeline_ancestor_sibling>
 121   <style>
 122     #scroller {
 123       timeline-scope: --t1;
 124     }
 125     #timeline {
 126       height: 0px;
 127       view-timeline: --t1;
 128     }
 129     #target {
 130       animation: anim 1s linear;
 131       animation-timeline: --t1;
 132     }
 133   </style>
 134   <div id=scroller class=scroller>
 135     <div></div>
 136     <div id=timeline></div>
 137     <div></div>
 138     <div>
 139       <div>
 140         <div id=target></div>
 141       </div>
 142     </div>
 143     <div></div>
 144     <div></div>
 145   </div>
 146 </template>
 147 <script>
 148   promise_test(async (t) => {
 149     await inflate(t, timeline_ancestor_sibling);
 150     assert_equals(getComputedStyle(target).zIndex, '75');
 151   }, 'timeline-scope on ancestor sibling');
 152 </script>
 153
 154 <template id=timeline_ancestor_sibling_conflict>
 155   <style>
 156     #scroller {
 157       timeline-scope: --t1;
 158     }
 159     #timeline1, #timeline2 {
 160       height: 0px;
 161       view-timeline: --t1;
 162     }
 163     #target {
 164       animation: anim 1s linear;
 165       animation-timeline: --t1;
 166     }
 167   </style>
 168   <div id=scroller class=scroller>
 169     <div></div>
 170     <div id=timeline1></div>
 171     <div></div>
 172     <div id=timeline2></div>
 173     <div>
 174       <div>
 175         <div id=target></div>
 176       </div>
 177     </div>
 178     <div></div>
 179     <div></div>
 180   </div>
 181 </template>
 182 <script>
 183   promise_test(async (t) => {
 184     await inflate(t, timeline_ancestor_sibling_conflict);
 185     assert_equals(getComputedStyle(target).zIndex, 'auto');
 186   }, 'timeline-scope on ancestor sibling, conflict remains unresolved');
 187 </script>
 188
 189 <template id=timeline_ancestor_closer_timeline_wins>
 190   <style>
 191     #scroller {
 192       timeline-scope: --t1;
 193     }
 194     #timeline {
 195       height: 0px;
 196       view-timeline: --t1;
 197     }
 198     #parent {
 199       timeline-scope: --t1; /* Inactive */
 200     }
 201     #target {
 202       animation: anim 1s linear;
 203       animation-timeline: --t1;
 204     }
 205   </style>
 206   <div id=scroller class=scroller>
 207     <div></div>
 208     <div id=timeline></div>
 209     <div></div>
 210     <div id=parent>
 211       <div id=target></div>
 212     </div>
 213     <div></div>
 214     <div></div>
 215   </div>
 216 </template>
 217 <script>
 218   promise_test(async (t) => {
 219     await inflate(t, timeline_ancestor_closer_timeline_wins);
 220     assert_equals(getComputedStyle(target).zIndex, 'auto');
 221   }, 'timeline-scope on ancestor sibling, closer timeline wins');
 222 </script>
 223
 224 <template id=timeline_ancestor_scroll_timeline_wins_on_same_element>
 225   <style>
 226     #scroller {
 227       view-timeline: --t1;
 228       view-timeline-inset: 50px;
 229       scroll-timeline: --t1;
 230     }
 231     #target {
 232       animation: anim 1s linear;
 233       animation-timeline: --t1;
 234     }
 235   </style>
 236   <div id=scroller class=scroller>
 237     <div id=target></div>
 238     <div></div>
 239     <div></div>
 240     <div></div>
 241     <div></div>
 242     <div></div>
 243   </div>
 244 </template>
 245 <script>
 246   promise_test(async (t) => {
 247     await inflate(t, timeline_ancestor_scroll_timeline_wins_on_same_element);
 248     // In case of a name conflict on the same element, scroll progress timelines
 249     // take precedence over view progress timelines.
 250     // https://drafts.csswg.org/scroll-animations-1/#timeline-scope
 251     assert_equals(getComputedStyle(target).zIndex, '0');
 252   }, 'view-timeline on ancestor sibling, scroll-timeline wins on same element');
 253 </script>