Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(310)

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
OLDNEW
(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>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698