1 <!DOCTYPE html>
2 <html><!-- Submitted from TestTWF Paris --><head>
3 <title>CSS Values and Units Test: Viewport units in scaled viewport</title>
4 <meta content="viewport relative units scale with viewport." name="assert">
5 <link href="mailto:eae@chromium.org" rel="author" title="Emil A Eklund">
6 <link href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths" rel="help">
7 <script src="/resources/testharness.js"></script>
8 <script src="/resources/testharnessreport.js"></script>
9 <style>
10 iframe { border: 0; }
11 </style>
12 </head>
13 <body>
14 <div id="log"></div>
15 <iframe src="javascript:void(0)" id="testFrame"></iframe>
16 <script>
17 test(function() {
18 var frameElement = document.getElementById('testFrame');
19 var frameDocument = frameElement.contentDocument;
20
21 var testElement = frameDocument.createElement('div');
22 testElement.style.width = '50vw';
23 testElement.style.height = '50vh';
24 testElement.style.position = 'absolute';
25 testElement.style.left = '0';
26 testElement.style.top = '0';
27 testElement.style.backgroundColor = 'black';
28 frameDocument.body.appendChild(testElement);
29
30 var frameWidth = frameElement.getBoundingClientRect().width;
31 var frameHeight = frameElement.getBoundingClientRect().height;
32 for (var i = 1; i <= 200; i++) {
33 var scale = i / 100;
34 frameDocument.body.style.transform = 'scale(' + scale + ')';
35 var rect = testElement.getBoundingClientRect();
36 var actualWidth = rect.width;
37 var actualHeight = rect.height;
38 var expectedWidth = frameWidth * scale / 2;
39 var expectedHeight = frameHeight * scale / 2;
40
41 assert_approx_equals(actualWidth, expectedWidth, 0.1, '50vw at ' + scale + ' scale');
42 assert_approx_equals(actualHeight, expectedHeight, 0.1, '50vh at ' + scale + ' scale');
43 }
44 }, 'viewport relative units in scaled viewport');
45 </script>
46
47
48 </body></html>