<!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>