| Index: LayoutTests/css3/device-adapt/opera/constrain-016.html
|
| diff --git a/LayoutTests/css3/device-adapt/opera/constrain-016.html b/LayoutTests/css3/device-adapt/opera/constrain-016.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..ce740a95ca36b99ee7b7c8428401aa34898918c9
|
| --- /dev/null
|
| +++ b/LayoutTests/css3/device-adapt/opera/constrain-016.html
|
| @@ -0,0 +1,107 @@
|
| +<!DOCTYPE html>
|
| +<html>
|
| + <head>
|
| + <meta charset="UTF-8">
|
| + <title>CSS Test: @viewport constrained - height deduced from width and aspect ratio</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 and not height will set a height that makes the actual width/height and initial width/height have the same aspect ratio.">
|
| + <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 { 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 - height deduced from width and aspect ratio");
|
| + 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); assert_equals(Math.round(viewport.actualHeight), Math.round(10000*viewport.initialHeight/viewport.initialWidth));
|
| + });
|
| +
|
| + /* 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>
|
|
|
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