<head> <meta name="viewport" content="width=device-width; initial-scale=1.0"> <title>Test that events are delivered with correct coordinates to an iframe inide a perspective transform</title> <script src="apz_test_native_event_utils.js"></script> <script src="apz_test_utils.js"></script> <script src="/tests/SimpleTest/paint_listener.js"></script> <style> html, body { margin: 0; padding: 0; } #outer { margin-top: 50px; margin-left: 50px; perspective: 500px; } #inner { transform: translate3d(0,0,-100px); transform-style: preserve-3d; } iframe { border: 0; background-color: blue; transform: translate3d(0,0,100px); } </style> </head> <body> <div id="outer"> <div id="inner"> <iframe id="iframe" src="https://example.com/tests/gfx/layers/apz/test/mochitest/helper_hittest_iframe_perspective_child.html"></iframe> </div> </div> <script type="application/javascript"> async function test() { // Wait for iframe to receive content transforms. await SpecialPowers.spawn(iframe, [], async () => { await SpecialPowers.contentTransformsReceived(content.window); }); let clickCoordsInChild = { offsetX: 0, offsetY: 0 }; let childMessagePromise = new Promise(resolve => { window.addEventListener("message", event => { let data = JSON.parse(event.data); if ("type" in data && data.type == "got-mouse-down") { clickCoordsInChild = data.coords; resolve(); } }) }); await synthesizeNativeMouseEventWithAPZ({ type: "click", target: outer, offsetX: 100, offsetY: 100 }); await childMessagePromise; is(clickCoordsInChild.offsetX, 100, "x coordinate is correct"); is(clickCoordsInChild.offsetY, 100, "y coordinate is correct"); } waitUntilApzStable() .then(test) .then(subtestDone, subtestFailed); </script> </body>