custom-property.html (1054B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <head> 4 <link rel="help" src="https://github.com/w3c/csswg-drafts/issues/7759"> 5 <link rel="match" href="custom-property-ref.html"> 6 <script src="/web-animations/testcommon.js"></script> 7 <script src="/common/reftest-wait.js"></script> 8 <style> 9 html { 10 overflow: hidden; 11 } 12 .spacer { 13 height: 300vh; 14 } 15 .box { 16 position: fixed; 17 left: 0; 18 top: 0; 19 width: 100px; 20 height: 100px; 21 background: black; 22 border: solid red; 23 animation: move auto linear; 24 animation-timeline: scroll(); 25 } 26 27 @keyframes move { 28 to { 29 translate: var(--adjustment); 30 } 31 } 32 </style> 33 </head> 34 <body> 35 <div class="box"></div> 36 <div class='spacer'></div> 37 </body> 38 <script> 39 scroller = document.scrollingElement; 40 scroller.scrollTop 41 = scroller.scrollHeight - scroller.clientHeight; 42 document.documentElement.style.setProperty( 43 '--adjustment', `100px`); 44 waitForCompositorReady().then(takeScreenshot); 45 </script> 46 </html>