| <!DOCTYPE html> |
| <html> |
| <head> |
| <script src="../../resources/accessibility-helper.js"></script> |
| <script src="../../resources/js-test.js"></script> |
| <style> |
| body { margin: 0; } |
| #container { |
| position: absolute; |
| top: 100px; |
| left: 10px; |
| } |
| iframe { |
| width: 200px; |
| height: 100px; |
| border: none; |
| } |
| </style> |
| </head> |
| <body> |
| |
| <div id="container"> |
| <iframe id="iframe" onload="runTest()" src="data:text/html,<body style='margin:0'><button id='target' style='width:80px;height:30px'>Click me</button></body>"></iframe> |
| </div> |
| |
| <script> |
| window.jsTestIsAsync = true; |
| |
| var output = "This test verifies that moving a div containing an iframe updates the screen position of elements inside that iframe.\n\n"; |
| |
| var target, initialY, movedY, delta; |
| function runTest() { |
| if (!window.accessibilityController) |
| return; |
| |
| setTimeout(async function() { |
| target = await waitForIframeAccessibilityReady("container", "target"); |
| initialY = target.y; |
| |
| // Move the container div down by 200px. |
| document.getElementById("container").style.top = "300px"; |
| |
| // Wait for the element's absolute screen y to change after the move. |
| await waitFor(() => { |
| target = accessibilityController.accessibleElementById("target"); |
| return target && target.y !== initialY; |
| }); |
| |
| movedY = target.y; |
| delta = Math.abs(movedY - initialY); |
| output += expectNumber("delta", 200, 5); |
| |
| debug(output); |
| finishJSTest(); |
| }, 0); |
| } |
| </script> |
| </body> |
| </html> |
