view-timeline-lookup.html (5787B)
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 forwards; 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, '0'); 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>