LayoutTests/css3/device-adapt/opera/constrain-009.html - Issue 16103004: [css-device-adapt] Imported opera tests from hg.csswg.org

Side by Side Diff: LayoutTests/css3/device-adapt/opera/constrain-009.html

Issue 16103004: [css-device-adapt] Imported opera tests from hg.csswg.org (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master

Patch Set: Imported snapshot where device-width/height is no longer supported Created 7 years, 6 months ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

View unified diff | Download patch

OLD	NEW
(Empty)
	1 <!DOCTYPE html>

	2 <html>

	3 <head>

	4 <meta charset="UTF-8">

	5 <title>CSS Test: @viewport constrained - width 20em</title>

	6 <link rel="author" title="Rune Lillesveen" href="mailto:rune@opera.com">

	7 <link rel="help" href="http://www.w3.org/TR/css-device-adapt/#constraining-pro cedure">

	8 <meta name="flags" content="visual scroll dom">

	9 <meta name="assert" content="Setting width in @viewport to 20em will set the a ctual viewport width to 20 times the initial font-size.">

	10 <script src="../../../resources/testharness.js" type="text/javascript"></scrip t>

	11 <script src="../../../resources/testharnessreport.js" type="text/javascript">< /script>

	12 <style type="text/css">

	13 body { margin: 0; }

	14 html, body, #test { width: 100%; height: 100%; }

	15 #log { padding: 1em; display: none; }

	16 /* Reset viewport values to initial values to ignore UA stylesheet. */

	17 @-webkit-viewport {

	18 width: auto;

	19 height: auto;

	20 zoom: auto;

	21 min-zoom: auto;

	22 max-zoom: auto;

	23 user-zoom: zoom;

	24 orientation: auto;

	25 resolution: auto;

	26 }

	27 </style>

	28 <style type="text/css">

	29 /* CSS for the test below. */

	30 @-webkit-viewport { width: 20em }

	31 /* Set root element font-size to something different from the initial

	32 font-size to make sure 'rem' and 'em' for @viewport is based on the

	33 initial font-size, not the root element font-size. */

	34 html { font-size: 2rem; }

	35 body { font-size: 0.5rem; }

	36 </style>

	37 <script type="text/javascript">

	38 var test = async_test("CSS Test: @viewport constrained - width 20em");

	39 window.onload = function(){

	40

	41 var testStyleSheet = document.styleSheets.item(1);

	42

	43 /* Initialize an object to store viewport values to be used by the test

	44 asserts. */

	45 var viewport = new Object();

	46

	47 /* An element with the same size as the initial containing block. */

	48 var testElm = document.getElementById("test");

	49

	50 if (window.testRunner) {

	51 viewport.fontSize = parseInt(getComputedStyle(testElm, "").fontSize);

	52 viewport.deviceWidth = 320;

	53 viewport.deviceHeight = 480;

	54 viewport.initialWidth = 320;

	55 viewport.initialHeight = 352;

	56

	57 var vpString = internals.configurationForViewport(document, 1,

	58 viewport.deviceWidth,

	59 viewport.deviceHeight,

	60 viewport.initialWidth,

	61 viewport.initialHeight );

	62

	63 var match = /viewport size (.+)x(.+) scale (.+ )/.exec(vpString);

	64

	65 if (match) {

	66 viewport.actualWidth = parseFloat(match[1]);

	67 viewport.actualHeight = parseFloat(match[2]);

	68 viewport.zoom = parseFloat(match[3]);

	69 }

	70 }

	71 else {

	72 /* Disable the stylesheet that contains the @viewport to test. */

	73 testStyleSheet.disabled = true;

	74

	75 /* Retrieve the initial viewport values before applying the @viewport to

	76 test. */

	77 viewport.fontSize = parseInt(getComputedStyle(testElm, "").fontSize);

	78 viewport.initialWidth = testElm.offsetWidth;

	79 viewport.initialHeight = testElm.offsetHeight;

	80

	81 /* Enable the stylesheet that contains the @viewport to test. */

	82 testStyleSheet.disabled = false;

	83

	84 /* Retrieve the actual viewport values for the test. */

	85 viewport.actualWidth = testElm.offsetWidth;

	86 viewport.actualHeight = testElm.offsetHeight;

	87 viewport.zoom = viewport.initialWidth / window.innerWidth;

	88 }

	89

	90 /* Check viewport values. */

	91 test.step(function(){

	92 assert_equals(viewport.actualWidth, 20*viewport.fontSize);

	93 });

	94

	95 /* Finished. Show the results. */

	96 test.done();

	97 testStyleSheet.disabled = true;

	98 document.getElementById("log").style.display = "block";

	99 }

	100 </script>

	101 </head>

	102 <body>

	103 <div id="test">

	104 <div id="log"></div>

	105 </div>

	106 </body>

	107 </html>

OLD	NEW