scroll-preserve-3d.html (1068B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <link rel="help" href="https://www.w3.org/TR/cssom-view-1/"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="/resources/testdriver.js"></script> 8 <script src="/resources/testdriver-actions.js"></script> 9 <script src="/resources/testdriver-vendor.js"></script> 10 <style> 11 body, h1 { margin: 20px; } 12 #vp { 13 height: 400px; 14 width: 600px; 15 overflow: scroll; 16 left: 10px; 17 top: 10px; 18 border: 5px solid #8cf; 19 } 20 </style> 21 </head> 22 <body> 23 <div id="vp"> 24 <div style="transform-style: preserve-3d"> 25 <h1 style="height:2000px; transform: translateZ(0)"> 26 Gazing into the stars 27 </h1> 28 </div> 29 </div> 30 <script> 31 promise_test(async () => { 32 let scroll_promise = new Promise((resolve, reject) => { 33 vp.addEventListener("scroll", resolve); 34 }); 35 await new test_driver.Actions().scroll(100, 100, 0, 50).send(); 36 await scroll_promise; 37 assert_true(vp.scrollTop > 0); 38 }, "Element is scrollable over preserve-3d descendant"); 39 </script> 40 </body> 41 </html>