viewport-relative-lengths-scaled-viewport

Viewport units in scaled viewport

WeasyPrint

This browser

Flags
script
Assertion
viewport relative units scale with viewport.

Source

 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>