view-timeline-subject-in-shadow-root-with-timeline-scope.html (1534B)
1 <!DOCTYPE html> 2 <title>A view timeline with its subject in a shadow root can be referenced outside of that shadow root using "timeline-scope"</title> 3 <link rel="help" src="https://drafts.csswg.org/scroll-animations-1/#view-timelines"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <script src="/web-animations/testcommon.js"></script> 7 8 <style> 9 10 #container { 11 timeline-scope: --progress; 12 } 13 14 #shadow { 15 width: 100px; 16 height: 100px; 17 } 18 19 #shadow::part(scroller) { 20 width: 100%; 21 height: 100%; 22 background-color: blue; 23 overflow: scroll; 24 } 25 26 #shadow::part(content) { 27 position: relative; 28 top: 25%; 29 width: 100%; 30 height: 50%; 31 background-color: pink; 32 33 view-timeline: --progress block; 34 } 35 36 #target { 37 position: absolute; 38 width: 10px; 39 height: 100px; 40 background-color: black; 41 42 animation: x linear; 43 animation-timeline: --progress; 44 } 45 46 @keyframes x { 47 from { width: 0 } 48 to { width: 100px } 49 } 50 51 </style> 52 53 <div id="container"> 54 <div id="shadow"></div> 55 <div id="target"></div> 56 </div> 57 58 <script> 59 60 promise_test(async t => { 61 t.add_cleanup(() => container.remove()); 62 63 shadow.attachShadow({ mode: 'open' }).innerHTML = ` 64 <div part="scroller"> 65 <div part="content"></div> 66 </div> 67 `; 68 69 const animation = document.getAnimations()[0]; 70 await animation.ready; 71 assert_equals(getComputedStyle(target).width, '50px'); 72 }, 'A view timeline with its subject in a shadow root can be referenced outside of that shadow root using "timeline-scope"'); 73 74 </script>