hit-testing.html (3063B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/"> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <title></title> 8 </head> 9 <script src="/resources/testharness.js"></script> 10 <script src="/resources/testharnessreport.js"></script> 11 <script src="/resources/testdriver.js"></script> 12 <script src="/resources/testdriver-actions.js"></script> 13 <script src="/resources/testdriver-vendor.js"></script> 14 <script src="/web-animations/testcommon.js"></script> 15 <style> 16 * { 17 box-sizing: border-box; 18 } 19 .tr { 20 view-transition-name: demo; 21 } 22 ::view-transition { 23 pointer-events: none; 24 outline: 3px solid orange; 25 } 26 ::view-transition-group(demo) { 27 animation: none; 28 transform: translateX(200px) translateY(30px); 29 outline: 3px dashed gray 30 } 31 .box { 32 position: relative; 33 z-index: 0; 34 will-change: transform; 35 contain: strict; 36 } 37 #scope { 38 background: #eee; 39 position: relative; 40 left: 0px; 41 top: 0px; 42 width: 490px; 43 height: 190px; 44 view-transition-name: none; 45 contain: strict; 46 } 47 .part { 48 left: 50px; 49 top: -70px; 50 width: 120px; 51 height: 120px; 52 background: blue; 53 } 54 .part.state2 { 55 background: lavender; 56 } 57 ::view-transition-old(demo), 58 ::view-transition-new(demo) { 59 animation-duration: 5s; 60 } 61 #behind { 62 left: 20px; 63 top: 20px; 64 width: 120px; 65 height: 120px; 66 background: orange; 67 } 68 </style> 69 <body> 70 <div id=scope class=box> 71 <div id="behind" class="box"></div> 72 <div id="participant" class="part box tr state1"></div> 73 </div> 74 </body> 75 <script> 76 function midpoint(element) { 77 const bounds = element.getBoundingClientRect(); 78 return { 79 x: bounds.x + bounds.width / 2, 80 y: bounds.y + bounds.height / 2 81 }; 82 } 83 84 function clickPromise(target) { 85 return new Promise(async resolve => { 86 document.addEventListener('click', e => { 87 resolve(e.target.id); 88 }, { once: true }); 89 // { origin: target } should suffice, but does not work with the 90 // chrome.gpuBenchmarking implementation of test-driver in this particular 91 // test. 92 const pos = midpoint(target); 93 await new test_driver.Actions() 94 .pointerMove(pos.x, pos.y) 95 .pointerDown() 96 .pointerUp() 97 .send(); 98 }); 99 } 100 101 promise_test(async t => { 102 await waitForCompositorReady(); 103 const vt = scope.startViewTransition(() => { 104 scope.querySelector(".part").classList.toggle("state2"); 105 }); 106 await Promise.all(document.getAnimations().map(a => a.ready)); 107 // The #behind element is initially occluded by the #participant element, 108 // but it moves out of the way once the transition starts. 109 const click_target = await clickPromise(behind); 110 assert_equals(click_target, 'behind'); 111 }, 'A view-transition participant is not a valid target for hit testing'); 112 </script> 113 </html>