mirror of
https://github.com/servo/servo
synced 2026-04-28 18:37:39 +02:00
48 lines
2.0 KiB
HTML
48 lines
2.0 KiB
HTML
<!DOCTYPE html>
|
|
<html><!-- Submitted from TestTWF Paris --><head>
|
|
<title>CSS Values and Units Test: Viewport units in scaled viewport</title>
|
|
<meta content="viewport relative units scale with viewport." name="assert">
|
|
<link href="mailto:eae@chromium.org" rel="author" title="Emil A Eklund">
|
|
<link href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths" rel="help">
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<style>
|
|
iframe { border: 0; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="log"></div>
|
|
<iframe src="javascript:void(0)" id="testFrame"></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> |