viewport-relative-lengths-scaled-viewport.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /css/css-values/viewport-relative-lengths-scaled-viewport.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<html>

<!-- Submitted from TestTWF Paris -->

  <head>

    <title>CSS Values and Units Test: Viewport units in scaled viewport</title>

    <meta charset="UTF-8">

    <meta name="assert" content="viewport relative units scale with viewport.">

    <link rel="author"  title="Emil A Eklund" href="mailto:eae@chromium.org">

    <link rel="help" href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths">

    <script src="/resources/testharness.js"></script>

    <script src="/resources/testharnessreport.js"></script>

    <style>

      iframe { border: 0; }

    </style>

  </head>

  <body>

    <div id="log"></div>

    <iframe id="testFrame" src="javascript:void(0)"></iframe>

    <script>

      test(function() {

        var frameElement = document.getElementById('testFrame');

        var frameDocument = frameElement.contentDocument;

        var testElement = frameDocument.createElement('div');

        testElement.style.width = '50vw';

        testElement.style.height = '50vh';

        testElement.style.position = 'absolute';

        testElement.style.left = '0';

        testElement.style.top = '0';

        testElement.style.backgroundColor = 'black';

        frameDocument.body.appendChild(testElement);

        var frameWidth = frameElement.getBoundingClientRect().width;

        var frameHeight = frameElement.getBoundingClientRect().height;

        for (var i = 1; i <= 200; i++) {

          var scale = i / 100;

          frameDocument.body.style.transform = 'scale(' + scale + ')';

          var rect = testElement.getBoundingClientRect();

          var actualWidth = rect.width;

          var actualHeight = rect.height;

          var expectedWidth = frameWidth * scale / 2;

          var expectedHeight = frameHeight * scale / 2;

          assert_approx_equals(actualWidth, expectedWidth, 0.1, '50vw at ' + scale + ' scale');

          assert_approx_equals(actualHeight, expectedHeight, 0.1, '50vh at ' + scale + ' scale');

      }, 'viewport relative units in scaled viewport');

    </script>

  </body>

</html>