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