| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta charset="UTF-8"> |
| <title>CSS Test: @viewport cascading - descriptors cascaded separately</title> |
| <link rel="author" title="Rune Lillesveen" href="mailto:rune@opera.com"> |
| <link rel="help" href="http://www.w3.org/TR/css-device-adapt/#the-viewport-rule"> |
| <meta name="flags" content="visual scroll dom"> |
| <meta name="assert" content="Descriptors are cascaded separately and may stem from different @viewport rules."> |
| <script src="../../../resources/testharness.js" type="text/javascript"></script> |
| <script src="../../../resources/testharnessreport.js" type="text/javascript"></script> |
| <style type="text/css"> |
| body { margin: 0; } |
| html, body, #test { width: 100%; height: 100%; } |
| #log { padding: 1em; display: none; } |
| /* Reset viewport values to initial values to ignore UA stylesheet. */ |
| @viewport { |
| width: auto; |
| height: auto; |
| zoom: auto; |
| min-zoom: auto; |
| max-zoom: auto; |
| user-zoom: zoom; |
| orientation: auto; |
| resolution: auto; |
| } |
| </style> |
| <style type="text/css"> |
| /* CSS for the test below. */ |
| @viewport { width: 300px; height: 300px; } @viewport { height: 500px; } |
| /* Set root element font-size to something different from the initial |
| font-size to make sure 'rem' and 'em' for @viewport is based on the |
| initial font-size, not the root element font-size. */ |
| html { font-size: 2rem; } |
| body { font-size: 0.5rem; } |
| </style> |
| <script type="text/javascript"> |
| var test = async_test("CSS Test: @viewport cascading - descriptors cascaded separately"); |
| window.onload = function(){ |
| |
| var testStyleSheet = document.styleSheets.item(1); |
| |
| /* Initialize an object to store viewport values to be used by the test |
| asserts. */ |
| var viewport = new Object(); |
| |
| /* An element with the same size as the initial containing block. */ |
| var testElm = document.getElementById("test"); |
| |
| if (window.testRunner) { |
| viewport.fontSize = parseInt(getComputedStyle(testElm, "").fontSize); |
| viewport.initialWidth = 320; |
| viewport.initialHeight = 352; |
| |
| var vpString = internals.viewportAsText(document, 1, |
| viewport.initialWidth, |
| viewport.initialHeight); |
| |
| var match = /viewport size (.+)x(.+) scale (.+ )/.exec(vpString); |
| |
| if (match) { |
| viewport.actualWidth = parseFloat(match[1]); |
| viewport.actualHeight = parseFloat(match[2]); |
| viewport.zoom = parseFloat(match[3]); |
| } |
| } |
| else { |
| /* Disable the stylesheet that contains the @viewport to test. */ |
| testStyleSheet.disabled = true; |
| |
| /* Retrieve the initial viewport values before applying the @viewport to |
| test. */ |
| viewport.fontSize = parseInt(getComputedStyle(testElm, "").fontSize); |
| viewport.initialWidth = testElm.offsetWidth; |
| viewport.initialHeight = testElm.offsetHeight; |
| |
| /* Enable the stylesheet that contains the @viewport to test. */ |
| testStyleSheet.disabled = false; |
| |
| /* Retrieve the actual viewport values for the test. */ |
| viewport.actualWidth = testElm.offsetWidth; |
| viewport.actualHeight = testElm.offsetHeight; |
| viewport.zoom = viewport.initialWidth / window.innerWidth; |
| } |
| |
| /* Check viewport values. */ |
| test.step(function(){ |
| assert_equals(viewport.actualWidth, 300); assert_equals(viewport.actualHeight, 500); |
| }); |
| |
| /* Finished. Show the results. */ |
| test.done(); |
| testStyleSheet.disabled = true; |
| document.getElementById("log").style.display = "block"; |
| } |
| </script> |
| </head> |
| <body> |
| <div id="test"> |
| <div id="log"></div> |
| </div> |
| </body> |
| </html> |
