| 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 |
|---|
Chromium Code Reviews
Issue 16209003:
Unprefix the @viewport rule of CSS Device Adaptation spec (Closed)
Base URL: svn://svn.chromium.org/blink/trunk