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 constrained - width 200%</title> | 5 <title>CSS Test: @viewport constrained - width 200%</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/#constraining-pro
cedure"> | 7 <link rel="help" href="http://www.w3.org/TR/css-device-adapt/#constraining-pro
cedure"> |
8 <meta name="flags" content="visual scroll dom"> | 8 <meta name="flags" content="visual scroll dom"> |
9 <meta name="assert" content="Setting width in @viewport to 200% will set the a
ctual viewport width to twice the initial-width."> | 9 <meta name="assert" content="Setting width in @viewport to 200% will set the a
ctual viewport width to twice the initial-width."> |
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: 200% } | 30 @viewport { width: 200% } |
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 constrained - width 200%"); | 38 var test = async_test("CSS Test: @viewport constrained - width 200%"); |
39 window.onload = function(){ | 39 window.onload = function(){ |
40 | 40 |
(...skipping 57 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
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 |