unattached-subject-inset.html (1794B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <title>Test construction of a view timeline with a detached subject</title> 7 </head> 8 <style type="text/css"> 9 #container { 10 overflow: hidden; 11 height: 200px; 12 width: 200px; 13 } 14 15 #block { 16 background: green; 17 height: 100px; 18 width: 100px; 19 } 20 21 .filler { 22 height: 200px; 23 } 24 </style> 25 <script src="/resources/testharness.js"></script> 26 <script src="/resources/testharnessreport.js"></script> 27 <script src="/web-animations/testcommon.js"></script> 28 <body> 29 <div id="container"> 30 <div class="filler"></div> 31 </div> 32 </body> 33 <script> 34 promise_test(async t => { 35 const element = document.createElement('div'); 36 element.id = 'block'; 37 const timeline = new ViewTimeline({ 38 subject: element, 39 inset: new CSSMathNegate(CSS.px(144)) 40 }); 41 assert_equals(timeline.source, null, 'Null source while detached'); 42 await waitForNextFrame(); 43 const scroller = document.getElementById('container'); 44 scroller.appendChild(element); 45 assert_equals(timeline.source, scroller, 'Source resolved once attached'); 46 await waitForNextFrame(); 47 48 // Start offset = cover 0% 49 // = target offset - viewport height + end side inset 50 // = 200 - 200 + (-144) = -144 51 assert_equals(timeline.startOffset.toString(), CSS.px(-144).toString()); 52 // End offset = cover 100% 53 // = target offset + target height - start side inset 54 // = 200 + 100 - (-144) = 444 55 assert_equals(timeline.endOffset.toString(), CSS.px(444).toString()); 56 }, 'Creating a view timeline with a subject that is not attached to the ' + 57 'document works as expected'); 58 </script> 59 </html>