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