Index: LayoutTests/css3/device-adapt/opera/constrain-004.html |
diff --git a/LayoutTests/css3/device-adapt/opera/constrain-004.html b/LayoutTests/css3/device-adapt/opera/constrain-004.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..36496acbfc201004ab20fb2b0a30e6a5d17f3d54 |
--- /dev/null |
+++ b/LayoutTests/css3/device-adapt/opera/constrain-004.html |
@@ -0,0 +1,107 @@ |
+<!DOCTYPE html> |
+<html> |
+ <head> |
+ <meta charset="UTF-8"> |
+ <title>CSS Test: @viewport constrained - min-width 10000px</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 min-width in @viewport to a length larger than the initial viewport width will set the actual viewport width to that length."> |
+ <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. */ |
+ @-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"> |
+ /* CSS for the test below. */ |
+ @-webkit-viewport { min-width: 10000px } |
+ /* 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 constrained - min-width 10000px"); |
+ 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.deviceWidth = 320; |
+ viewport.deviceHeight = 480; |
+ viewport.initialWidth = 320; |
+ viewport.initialHeight = 352; |
+ |
+ var vpString = internals.configurationForViewport(document, 1, |
+ viewport.deviceWidth, |
+ viewport.deviceHeight, |
+ 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, 10000); |
+ }); |
+ |
+ /* 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> |