OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <html> | 2 <html> |
3 <head> | 3 <head> |
4 <meta charset="UTF-8"> | 4 <meta charset="UTF-8"> |
5 <title>CSS Test: @viewport CSSOM - CSSRule.VIEWPORT_RULE</title> | 5 <title>CSS Test: @viewport CSSOM - CSSRule.VIEWPORT_RULE</title> |
6 <link rel="author" title="Rune Lillesveen" href="mailto:rune@opera.com"> | 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/#dom-interfaces"> | 7 <link rel="help" href="http://www.w3.org/TR/css-device-adapt/#dom-interfaces"> |
8 <meta name="flags" content="visual scroll dom"> | 8 <meta name="flags" content="visual scroll dom"> |
9 <meta name="assert" content="CSSRule.VIEWPORT_RULE has the value 15, and the s
tylesheet contains a CSSViewportRule with type value 15."> | 9 <meta name="assert" content="CSSRule.VIEWPORT_RULE has the value 15, and the s
tylesheet contains a CSSViewportRule with type value 15."> |
10 <script src="../../../resources/testharness.js" type="text/javascript"></scrip
t> | 10 <script src="../../../resources/testharness.js" type="text/javascript"></scrip
t> |
11 <script src="../../../resources/testharnessreport.js" type="text/javascript"><
/script> | 11 <script src="../../../resources/testharnessreport.js" type="text/javascript"><
/script> |
12 <style type="text/css"> | 12 <style type="text/css"> |
13 body { margin: 0; } | 13 body { margin: 0; } |
14 html, body, #test { width: 100%; height: 100%; } | 14 html, body, #test { width: 100%; height: 100%; } |
15 #log { padding: 1em; display: none; } | 15 #log { padding: 1em; display: none; } |
16 /* Reset viewport values to initial values to ignore UA stylesheet. */ | 16 /* Reset viewport values to initial values to ignore UA stylesheet. */ |
17 @-webkit-viewport { | 17 @viewport { |
18 width: auto; | 18 width: auto; |
19 height: auto; | 19 height: auto; |
20 zoom: auto; | 20 zoom: auto; |
21 min-zoom: auto; | 21 min-zoom: auto; |
22 max-zoom: auto; | 22 max-zoom: auto; |
23 user-zoom: zoom; | 23 user-zoom: zoom; |
24 orientation: auto; | 24 orientation: auto; |
25 resolution: auto; | 25 resolution: auto; |
26 } | 26 } |
27 </style> | 27 </style> |
28 <style type="text/css"> | 28 <style type="text/css"> |
29 /* CSS for the test below. */ | 29 /* CSS for the test below. */ |
30 @-webkit-viewport { width: auto 1200px; min-height: 700px; max-zoom: 100% } | 30 @viewport { width: auto 1200px; min-height: 700px; max-zoom: 100% } |
31 /* Set root element font-size to something different from the initial | 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 | 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. */ | 33 initial font-size, not the root element font-size. */ |
34 html { font-size: 2rem; } | 34 html { font-size: 2rem; } |
35 body { font-size: 0.5rem; } | 35 body { font-size: 0.5rem; } |
36 </style> | 36 </style> |
37 <script type="text/javascript"> | 37 <script type="text/javascript"> |
38 var test = async_test("CSS Test: @viewport CSSOM - CSSRule.VIEWPORT_RULE"); | 38 var test = async_test("CSS Test: @viewport CSSOM - CSSRule.VIEWPORT_RULE"); |
39 window.onload = function(){ | 39 window.onload = function(){ |
40 | 40 |
(...skipping 41 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
82 testStyleSheet.disabled = false; | 82 testStyleSheet.disabled = false; |
83 | 83 |
84 /* Retrieve the actual viewport values for the test. */ | 84 /* Retrieve the actual viewport values for the test. */ |
85 viewport.actualWidth = testElm.offsetWidth; | 85 viewport.actualWidth = testElm.offsetWidth; |
86 viewport.actualHeight = testElm.offsetHeight; | 86 viewport.actualHeight = testElm.offsetHeight; |
87 viewport.zoom = viewport.initialWidth / window.innerWidth; | 87 viewport.zoom = viewport.initialWidth / window.innerWidth; |
88 } | 88 } |
89 | 89 |
90 /* Check viewport values. */ | 90 /* Check viewport values. */ |
91 test.step(function(){ | 91 test.step(function(){ |
92 assert_equals(CSSRule.WEBKIT_VIEWPORT_RULE, 15); assert_equals(testStyle
Sheet.cssRules.item(0).type, 15); | 92 assert_equals(CSSRule.VIEWPORT_RULE, 15); assert_equals(testStyleSheet.c
ssRules.item(0).type, 15); |
93 }); | 93 }); |
94 | 94 |
95 /* Finished. Show the results. */ | 95 /* Finished. Show the results. */ |
96 test.done(); | 96 test.done(); |
97 testStyleSheet.disabled = true; | 97 testStyleSheet.disabled = true; |
98 document.getElementById("log").style.display = "block"; | 98 document.getElementById("log").style.display = "block"; |
99 } | 99 } |
100 </script> | 100 </script> |
101 </head> | 101 </head> |
102 <body> | 102 <body> |
103 <div id="test"> | 103 <div id="test"> |
104 <div id="log"></div> | 104 <div id="log"></div> |
105 </div> | 105 </div> |
106 </body> | 106 </body> |
107 </html> | 107 </html> |
OLD | NEW |