| <!DOCTYPE html> <!-- webkit-test-runner [ useFlexibleViewport=true ] --> |
| <html> |
| <meta name="viewport" content="width=device-width, initial-scale=1"> |
| <head> |
| <style> |
| html, body { |
| width: 100%; |
| height: 100%; |
| margin: 0; |
| } |
| |
| #large, #medium { |
| position: absolute; |
| top: 0; |
| left: 0; |
| } |
| </style> |
| <script src="../../../resources/ui-helper.js"></script> |
| <script src="../../../resources/js-test.js"></script> |
| <script> |
| jsTestIsAsync = true; |
| |
| async function runTest() { |
| largeElementRectBeforeRemoval = large.getBoundingClientRect(); |
| mediumElementRectBeforeRemoval = medium.getBoundingClientRect(); |
| innerWidthBeforeRemoval = innerWidth; |
| innerHeightBeforeRemoval = innerHeight; |
| |
| large.remove(); |
| |
| mediumElementRectAfterRemoval = medium.getBoundingClientRect(); |
| innerWidthAfterRemoval = innerWidth; |
| innerHeightAfterRemoval = innerHeight; |
| |
| shouldBe("innerWidthBeforeRemoval", "512"); |
| shouldBe("Math.round(largeElementRectBeforeRemoval.width)", "512"); |
| shouldBe("Math.round(largeElementRectBeforeRemoval.height)", "innerHeightBeforeRemoval"); |
| shouldBe("Math.round(mediumElementRectBeforeRemoval.width)", "320"); |
| debug("\nAfter removing large container:\n"); |
| shouldBe("innerWidthAfterRemoval", "320"); |
| shouldBe("Math.round(mediumElementRectAfterRemoval.width)", "320"); |
| shouldBe("Math.round(mediumElementRectAfterRemoval.height)", "innerHeightAfterRemoval"); |
| |
| finishJSTest(); |
| } |
| </script> |
| </head> |
| |
| <body onload="runTest()"> |
| <div id="large" style="width: 160vw; height: 160vh; background-color: blue;"></div> |
| <div id="medium" style="width: 100vw; height: 100vh; background-color: green;"></div> |
| </body> |
| </html> |
