hit-test-unrelated-element.html (1817B)
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-unrelated-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 #target { 16 width: 100px; 17 height: 100px; 18 contain: paint; 19 background: blue; 20 view-transition-name: shared; 21 } 22 #target.before { 23 position: relative; 24 left: 200px; 25 } 26 27 #unrelated { 28 width: 100px; 29 height: 100px; 30 background: red; 31 position: relative; 32 top: 200px; 33 left: 200px; 34 } 35 #unrelated:hover { 36 background: green; 37 } 38 39 html::view-transition { 40 pointer-events: none; 41 } 42 html::view-transition-group(*) { 43 pointer-events: auto; 44 } 45 46 html::view-transition-group(shared) { 47 animation-delay: 300s; 48 } 49 html::view-transition-old(shared) { 50 animation: unset; 51 opacity: 0; 52 } 53 html::view-transition-new(shared) { 54 animation: unset; 55 opacity: 1; 56 } 57 </style> 58 59 <div id=target class=before></div> 60 <div id=unrelated></div> 61 62 <script> 63 failIfNot(document.startViewTransition, "Missing document.startViewTransition"); 64 65 function mouseMoveToTarget(x, y) { 66 return new test_driver.Actions().pointerMove(x, y).send(); 67 } 68 69 async function runTest() { 70 document.startViewTransition(() => { 71 target.classList.toggle("before"); 72 requestAnimationFrame(async () => { 73 await mouseMoveToTarget(210, 310); 74 requestAnimationFrame(takeScreenshot); 75 }); 76 }); 77 } 78 79 onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest)); 80 </script>