| <?xml version="1.0" encoding="UTF-8"?> |
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
| <html xmlns="http://www.w3.org/1999/xhtml"> |
| <head> |
| <title>CSS Test: @viewport constrained - width 20rem</title> |
| <link rel="author" title="Rune Lillesveen" href="mailto:rune@opera.com"/> |
| <link rel="help" href="http://www.w3.org/TR/css-device-adapt/#constraining-procedure"/> |
| <meta name="flags" content="visual scroll dom" /> |
| <meta name="assert" content="Setting width in @viewport to 20rem will set the actual viewport width to 20 times the initial font-size."/> |
| <script src="../../../resources/testharness.js" type="text/javascript" /> |
| <script src="../../../resources/testharnessreport.js" type="text/javascript" /> |
| <style type="text/css"><![CDATA[ |
| 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. */ |
| @-webkit-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"><![CDATA[ |
| /* CSS for the test below. */ |
| @-webkit-viewport { width: 20rem } |
| /* 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"><![CDATA[ |
| var test = async_test("CSS Test: @viewport constrained - width 20rem"); |
| window.onload = function(){ |
| |
| var testStyleSheet = document.styleSheets.item(1); |
| |
| /* Disable the stylesheet that contains the @viewport to test. */ |
| testStyleSheet.disabled = true; |
| |
| /* 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"); |
| |
| /* Retrieve the initial viewport values before applying the @viewport to |
| test. */ |
| viewport.initialWidth = testElm.offsetWidth; |
| viewport.initialHeight = testElm.offsetHeight; |
| viewport.fontSize = parseInt(getComputedStyle(testElm, "").fontSize); |
| |
| /* 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, 20*viewport.fontSize); |
| }); |
| |
| /* 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> |
