| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta charset="utf-8"/> |
| <meta name="viewport" content="width=device-width"/> |
| <title>Resize iframe after orientation change</title> |
| <style type="text/css"> |
| body, div, iframe { |
| margin: 0; |
| padding: 0; |
| border: 0; |
| overflow: hidden; |
| } |
| </style> |
| <script src="../../../../resources/js-test.js"></script> |
| <script> |
| if (window.testRunner) { |
| testRunner.waitUntilDone(); |
| testRunner.dumpAsText(); |
| } |
| function rotateDevice(orientation) |
| { |
| return new Promise(resolve => { |
| testRunner.runUIScript(` |
| (function() { |
| uiController.simulateRotation("${orientation}", function() { |
| uiController.doAfterVisibleContentRectUpdate(function () { |
| uiController.uiScriptComplete(); |
| }) |
| }); |
| })();`, resolve); |
| }); |
| } |
| |
| async function runTest() { |
| if (!window.testRunner || !testRunner.runUIScript) |
| return; |
| await rotateDevice("landscape-right"); |
| await rotateDevice("portrait"); |
| var output = document.getElementById("output"); |
| var outer = document.getElementById("outer"); |
| shouldBe("document.getElementById('frame').scrollWidth", "outer.scrollWidth"); |
| shouldBe("document.getElementById('frame').contentDocument.getElementById('inner').scrollWidth", "outer.scrollWidth"); |
| testRunner.notifyDone(); |
| } |
| </script> |
| </head> |
| <body> |
| <p>Each time the viewport is resized, the outer div (green), |
| iframe (orange) and inner div (pink) should take the full viewport |
| width:</p> |
| <div id="outer" style="width: 100%; height: 200px; |
| border-top: 5px solid lightgreen; |
| border-bottom: 5px solid lightgreen; |
| background: linear-gradient(to right, cyan, blue)"> |
| <iframe id="frame" onload="runTest()" style="width: 100%; height: 100px; |
| border-top: 5px solid orange; |
| border-bottom: 5px solid orange; |
| background: linear-gradient(to right, cyan, blue)" |
| srcdoc=" |
| <html> |
| <head> |
| <meta name='viewport' content='width=device-width'/> |
| <script type='text/javascript'> |
| window.addEventListener('resize', function() { |
| document.getElementById('inner').style.width = |
| window.innerWidth + 'px'; |
| }); |
| </script> |
| </head> |
| <body style='margin: 0; padding: 0; overflow: hidden;'> |
| <div id='inner' |
| style='width: 50px; height: 50px; |
| border-top: 5px solid pink; |
| border-bottom: 5px solid pink; |
| background: linear-gradient(to right, cyan, blue)'> |
| </div> |
| </body> |
| </html>"></iframe> |
| </div> |
| </body> |
| </html> |
