scroll-timeline-name-shadow.html (4761B)
1 <!DOCTYPE html> 2 <title>scroll-timeline-name and tree-scoped references</title> 3 <link rel="help" src="https://drafts.csswg.org/scroll-animations-1/#scroll-timelines-named"> 4 <link rel="help" src="https://github.com/w3c/csswg-drafts/issues/8135"> 5 <link rel="help" src="https://github.com/w3c/csswg-drafts/issues/8192"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="/web-animations/testcommon.js"></script> 9 10 <main id=main></main> 11 <script> 12 function inflate(t, template) { 13 t.add_cleanup(() => main.replaceChildren()); 14 main.append(template.content.cloneNode(true)); 15 main.offsetTop; 16 } 17 </script> 18 <style> 19 @keyframes anim { 20 from { z-index: 100; } 21 to { z-index: 100; } 22 } 23 </style> 24 25 <template id=scroll_timeline_host> 26 <style> 27 .target { 28 animation: anim 10s linear; 29 animation-timeline: --timeline; 30 } 31 main > .scroller { 32 scroll-timeline: --timeline x; 33 } 34 </style> 35 <div class=scroller> 36 <div class=scroller> 37 <template shadowrootmode=open shadowrootclonable> 38 <style> 39 :host { 40 scroll-timeline: --timeline y; 41 } 42 </style> 43 <slot></slot> 44 </template> 45 <div class=target></div> 46 </div> 47 </div> 48 <style> 49 </style> 50 </template> 51 <script> 52 promise_test(async (t) => { 53 inflate(t, scroll_timeline_host); 54 let target = main.querySelector('.target'); 55 assert_equals(target.getAnimations().length, 1); 56 let anim = target.getAnimations()[0]; 57 assert_not_equals(anim.timeline, null); 58 assert_equals(anim.timeline.axis, 'y'); 59 }, 'Outer animation can see scroll timeline defined by :host'); 60 </script> 61 62 63 <template id=scroll_timeline_slotted> 64 <style> 65 .target { 66 animation: anim 10s linear; 67 animation-timeline: --timeline; 68 } 69 .host { 70 scroll-timeline: --timeline x; 71 } 72 </style> 73 <div class=host> 74 <template shadowrootmode=open shadowrootclonable> 75 <style> 76 ::slotted(.scroller) { 77 scroll-timeline: --timeline y; 78 } 79 </style> 80 <slot></slot> 81 </template> 82 <div class=scroller> 83 <div class=target></div> 84 </div> 85 </div> 86 <style> 87 </style> 88 </template> 89 <script> 90 promise_test(async (t) => { 91 inflate(t, scroll_timeline_slotted); 92 let target = main.querySelector('.target'); 93 assert_equals(target.getAnimations().length, 1); 94 let anim = target.getAnimations()[0]; 95 assert_not_equals(anim.timeline, null); 96 assert_equals(anim.timeline.axis, 'y'); 97 }, 'Outer animation can see scroll timeline defined by ::slotted'); 98 </script> 99 100 101 <template id=scroll_timeline_part> 102 <style> 103 .host { 104 scroll-timeline: --timeline y; 105 } 106 .host::part(foo) { 107 scroll-timeline: --timeline x; 108 } 109 </style> 110 <div class=host> 111 <template shadowrootmode=open shadowrootclonable> 112 <style> 113 /* Not using 'anim' at document scope, due to https://crbug.com/1334534 */ 114 @keyframes anim2 { 115 from { z-index: 100; background-color: green; } 116 to { z-index: 100; background-color: green; } 117 } 118 .target { 119 animation: anim2 10s linear; 120 animation-timeline: --timeline; 121 } 122 </style> 123 <div part=foo> 124 <div class=target></div> 125 </div> 126 </template> 127 </div> 128 <style> 129 </style> 130 </template> 131 <script> 132 promise_test(async (t) => { 133 inflate(t, scroll_timeline_part); 134 let target = main.querySelector('.host').shadowRoot.querySelector('.target'); 135 assert_equals(target.getAnimations().length, 1); 136 let anim = target.getAnimations()[0]; 137 assert_not_equals(anim.timeline, null); 138 assert_equals(anim.timeline.axis, 'x'); 139 }, 'Inner animation can see scroll timeline defined by ::part'); 140 </script> 141 142 143 <template id=scroll_timeline_shadow> 144 <style> 145 .target { 146 animation: anim 10s linear; 147 animation-timeline: --timeline; 148 } 149 .host { 150 scroll-timeline: --timeline x; 151 } 152 </style> 153 <div class=scroller> 154 <div class=host> 155 <template shadowrootmode=open shadowrootclonable> 156 <style> 157 div { 158 scroll-timeline: --timeline y; 159 } 160 </style> 161 <div> 162 <slot></slot> 163 </div> 164 </template> 165 <div class=target></div> 166 </div> 167 </div> 168 <style> 169 </style> 170 </template> 171 <script> 172 promise_test(async (t) => { 173 inflate(t, scroll_timeline_shadow); 174 let target = main.querySelector('.target'); 175 assert_equals(target.getAnimations().length, 1); 176 let anim = target.getAnimations()[0]; 177 assert_not_equals(anim.timeline, null); 178 assert_equals(anim.timeline.axis, 'y'); 179 }, 'Slotted element can see scroll timeline within the shadow'); 180 </script>