hit-test-unpainted-element.html (1756B)
1 <!DOCTYPE html> 2 <html class=reftest-wait> 3 <title>View transitions: hit test shared element at the real dom location</title> 4 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> 5 <link rel="author" href="mailto:vmpstr@chromium.org"> 6 <link rel="match" href="hit-test-unpainted-element-ref.html"> 7 8 <script src="/resources/testdriver.js"></script> 9 <script src="/resources/testdriver-actions.js"></script> 10 <script src="/resources/testdriver-vendor.js"></script> 11 <script src="/common/reftest-wait.js"></script> 12 13 <style> 14 html { view-transition-name: none } 15 div { 16 width: 100px; 17 height: 100px; 18 contain: paint; 19 view-transition-name: shared; 20 } 21 .before { 22 position: relative; 23 background: yellow; 24 left: 200px; 25 } 26 .after { 27 background: green; 28 } 29 .after:hover { 30 background: red; 31 } 32 33 html::view-transition-group(shared) { 34 animation-delay: 300s; 35 } 36 html::view-transition-old(shared) { 37 animation: unset; 38 opacity: 0; 39 } 40 html::view-transition-new(shared) { 41 animation: unset; 42 opacity: 1; 43 } 44 </style> 45 46 <div id=target class=before></div> 47 48 <script> 49 failIfNot(document.startViewTransition, "Missing document.startViewTransition"); 50 51 function mouseMoveToTarget(x, y) { 52 return new test_driver.Actions().pointerMove(x, y).send(); 53 } 54 55 async function runTest() { 56 document.startViewTransition(() => { 57 target.classList.toggle("before"); 58 target.classList.toggle("after"); 59 // Ensure that we exit the capture phase before doing the rest of the test, 60 // since we want the animating phase to do hit-testing. 61 requestAnimationFrame(async () => { 62 await mouseMoveToTarget(10, 10); 63 requestAnimationFrame(takeScreenshot); 64 }); 65 }); 66 } 67 68 onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest)); 69 </script>