| OLD | NEW |
|---|
| (Empty) | |
| 1 <!DOCTYPE html> |
| 2 <html> |
| 3 <head> |
| 4 <meta charset="UTF-8"> |
| 5 <title>CSS Test: @viewport accept both percentage and number values for zoom f
actors</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/#viewport-descrip
tors"> |
| 8 <meta name="flags" content="visual scroll dom"> |
| 9 <meta name="assert" content="Descriptors that take zoom factors must accept no
n-negative percentage and number values."> |
| 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 { min-zoom: 1.5; max-zoom: 2; zoom: 170% } |
| 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 accept both percentage and number
values for zoom factors"); |
| 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(testStyleSheet.cssRules.item(0).style.length, 3); |
| 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 |
|---|
Chromium Code Reviews
Issue 16103004:
[css-device-adapt] Imported opera tests from hg.csswg.org (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@master