hit-test-vt-overlay.html (1604B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <style> 8 9 body { margin: 0; } 10 #scope { 11 position: relative; width: 100px; height: 110px; 12 background: white; contain: strict; view-transition-name: none; 13 } 14 #part { 15 position: absolute; top: 10px; left: 10px; 16 width: 50px; height: 50px; background: #8cf; 17 z-index: 1; view-transition-name: foo; 18 } 19 #higher-nonpart { 20 position: absolute; top: 20px; left: 40px; 21 z-index: 2; width: 50px; height: 50px; background: #f88; 22 } 23 #inflow-nonpart { 24 background: #4f8; width: 50px; height: 50px; 25 margin-left: 20px; margin-top: 50px; 26 } 27 ::view-transition { background: rgba(0, 0, 0, 0.1); height: 40px; } 28 ::view-transition-group(*) { animation-play-state: paused; } 29 ::view-transition-new(*) { animation: unset; opacity: 1; } 30 ::view-transition-old(*) { animation: unset; opacity: 0; } 31 32 </style> 33 </head> 34 <body> 35 <div id=scope> 36 <div id=part></div> 37 <div id=higher-nonpart></div> 38 <div id=inflow-nonpart></div> 39 </div> 40 <script> 41 42 promise_test(async t => { 43 await scope.startViewTransition(() => {}).ready; 44 const cases = [ 45 [25, 30, "scope"], 46 [50, 30, "scope"], 47 [75, 30, "scope"], 48 [25, 50, "scope"], 49 [50, 50, "scope"], 50 [75, 50, "higher-nonpart"], 51 [50, 80, "inflow-nonpart"] 52 ]; 53 for (const c of cases) { 54 const [x, y, expected] = c; 55 assert_equals(document.elementFromPoint(x, y).id, 56 expected, `at (${x}, ${y})`); 57 } 58 }); 59 60 </script> 61 </body> 62 </html>