| OLD | NEW |
|---|
| (Empty) |
| 1 <?xml version="1.0" encoding="UTF-8"?> | |
| 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/x
html1/DTD/xhtml1-strict.dtd"> | |
| 3 <html xmlns="http://www.w3.org/1999/xhtml"> | |
| 4 <head> | |
| 5 <title>CSS Test: @viewport constrained - max-width 10000px</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/#constraining-pro
cedure"/> | |
| 8 <meta name="flags" content="visual scroll dom" /> | |
| 9 <meta name="assert" content="Setting max-width in @viewport to a length larger
than the initial viewport width will not change the actual viewport width."/> | |
| 10 <script src="../../../resources/testharness.js" type="text/javascript" /> | |
| 11 <script src="../../../resources/testharnessreport.js" type="text/javascript" /
> | |
| 12 <style type="text/css"><![CDATA[ | |
| 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"><![CDATA[ | |
| 29 /* CSS for the test below. */ | |
| 30 @-webkit-viewport { max-width: 10000px } | |
| 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"><![CDATA[ | |
| 38 var test = async_test("CSS Test: @viewport constrained - max-width 10000px"); | |
| 39 window.onload = function(){ | |
| 40 | |
| 41 var testStyleSheet = document.styleSheets.item(1); | |
| 42 | |
| 43 /* Disable the stylesheet that contains the @viewport to test. */ | |
| 44 testStyleSheet.disabled = true; | |
| 45 | |
| 46 /* Initialize an object to store viewport values to be used by the test | |
| 47 asserts. */ | |
| 48 var viewport = new Object(); | |
| 49 | |
| 50 /* An element with the same size as the initial containing block. */ | |
| 51 var testElm = document.getElementById("test"); | |
| 52 | |
| 53 /* Retrieve the initial viewport values before applying the @viewport to | |
| 54 test. */ | |
| 55 viewport.initialWidth = testElm.offsetWidth; | |
| 56 viewport.initialHeight = testElm.offsetHeight; | |
| 57 viewport.fontSize = parseInt(getComputedStyle(testElm, "").fontSize); | |
| 58 | |
| 59 /* Enable the stylesheet that contains the @viewport to test. */ | |
| 60 testStyleSheet.disabled = false; | |
| 61 | |
| 62 /* Retrieve the actual viewport values for the test. */ | |
| 63 viewport.actualWidth = testElm.offsetWidth; | |
| 64 viewport.actualHeight = testElm.offsetHeight; | |
| 65 viewport.zoom = viewport.initialWidth / window.innerWidth; | |
| 66 | |
| 67 /* Check viewport values. */ | |
| 68 test.step(function(){ | |
| 69 assert_equals(viewport.actualWidth, viewport.initialWidth); | |
| 70 }); | |
| 71 | |
| 72 /* Finished. Show the results. */ | |
| 73 test.done(); | |
| 74 testStyleSheet.disabled = true; | |
| 75 document.getElementById("log").style.display = "block"; | |
| 76 } | |
| 77 ]]></script> | |
| 78 </head> | |
| 79 <body> | |
| 80 <div id="test"> | |
| 81 <div id="log"></div> | |
| 82 </div> | |
| 83 </body> | |
| 84 </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