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