<!DOCTYPE html> <!-- webkit-test-runner [ ShouldIgnoreMetaViewport=true useFlexibleViewport=true ] -->
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../../../../resources/ui-helper.js"></script>
    <script src="../../../../resources/js-test.js"></script>
    <style>
        body, html {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        .bar {
            width: 0;
            height: 100px;
            background: linear-gradient(to right, red 0%, green 50%, blue 100%);
        }
    </style>
</head>
<body>
    <div class="bar"></div>
    <p id="description"></p>
    <p id="console"></p>
    <script>
    jsTestIsAsync = true;
    bar = document.querySelector(".bar");
    bar.style.width = `${innerWidth}px`;

    addEventListener("resize", () => bar.style.width = `${innerWidth}px`);
    addEventListener("load", async () => {
        description("This test verifies that rotating to landscape and back with shouldIgnoreMetaViewport enabled does not cause the initial scale to deviate from its original value. To test manually, load the test page on an appropriately configured device and rotate to landscape and back. The initial scale after rotation should be the same as it was prior to rotation.");

        debug("\nBefore rotation");
        shouldBe("visualViewport.scale", "1");

        await UIHelper.rotateDevice("landscape-right", true);
        await UIHelper.ensurePresentationUpdate();
        debug("\nAfter the first rotation");
        shouldBe("visualViewport.scale", "1");

        await UIHelper.rotateDevice("portrait", true);
        await UIHelper.ensurePresentationUpdate();
        debug("\nAfter the second rotation");
        shouldBe("visualViewport.scale", "1");

        finishJSTest();
    });
    </script>
</body>
</html>