blob: 49e714dbc03f2257dd398e7609aa7734968b47bf [file] [log] [blame]
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test: @viewport constrained - width 200%</title>
<link rel="author" title="Rune Lillesveen" href="mailto:rune@opera.com"/>
<link rel="help" href="http://www.w3.org/TR/css-device-adapt/#constraining-procedure"/>
<meta name="flags" content="visual scroll dom" />
<meta name="assert" content="Setting width in @viewport to 200% will set the actual viewport width to twice the initial-width."/>
<script src="../../../resources/testharness.js" type="text/javascript" />
<script src="../../../resources/testharnessreport.js" type="text/javascript" />
<style type="text/css"><![CDATA[
body { margin: 0; }
html, body, #test { width: 100%; height: 100%; }
#log { padding: 1em; display: none; }
/* Reset viewport values to initial values to ignore UA stylesheet. */
@-webkit-viewport {
width: auto;
height: auto;
zoom: auto;
min-zoom: auto;
max-zoom: auto;
user-zoom: zoom;
orientation: auto;
resolution: auto;
}
]]></style>
<style type="text/css"><![CDATA[
/* CSS for the test below. */
@-webkit-viewport { width: 200% }
/* Set root element font-size to something different from the initial
font-size to make sure 'rem' and 'em' for @viewport is based on the
initial font-size, not the root element font-size. */
html { font-size: 2rem; }
body { font-size: 0.5rem; }
]]></style>
<script type="text/javascript"><![CDATA[
var test = async_test("CSS Test: @viewport constrained - width 200%");
window.onload = function(){
var testStyleSheet = document.styleSheets.item(1);
/* Disable the stylesheet that contains the @viewport to test. */
testStyleSheet.disabled = true;
/* Initialize an object to store viewport values to be used by the test
asserts. */
var viewport = new Object();
/* An element with the same size as the initial containing block. */
var testElm = document.getElementById("test");
/* Retrieve the initial viewport values before applying the @viewport to
test. */
viewport.initialWidth = testElm.offsetWidth;
viewport.initialHeight = testElm.offsetHeight;
viewport.fontSize = parseInt(getComputedStyle(testElm, "").fontSize);
/* Enable the stylesheet that contains the @viewport to test. */
testStyleSheet.disabled = false;
/* Retrieve the actual viewport values for the test. */
viewport.actualWidth = testElm.offsetWidth;
viewport.actualHeight = testElm.offsetHeight;
viewport.zoom = viewport.initialWidth / window.innerWidth;
/* Check viewport values. */
test.step(function(){
assert_equals(viewport.actualWidth, 2*viewport.initialWidth);
});
/* Finished. Show the results. */
test.done();
testStyleSheet.disabled = true;
document.getElementById("log").style.display = "block";
}
]]></script>
</head>
<body>
<div id="test">
<div id="log"></div>
</div>
</body>
</html>