third_party/WebKit/LayoutTests/css3/device-adapt/opera/cascading-002.html

   1 <!DOCTYPE html>
   2 <html>
   3  <head>
   4   <meta charset="UTF-8">
   5   <title>CSS Test: @viewport cascading - !important declaration wins</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/#the-viewport-rule">
   8   <meta name="flags" content="visual scroll dom">
   9   <meta name="assert" content="A preceeding !important declaration wins over a non-important descriptor.">
  10   <script src="../../../resources/testharness.js" type="text/javascript"></script>
  11   <script src="../../../resources/testharnessreport.js" type="text/javascript"></script>
  12   <style type="text/css">
  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    @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">
  29    /* CSS for the test below. */
  30    @viewport { width: 300px !important; width: 500px }
  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">
  38    var test = async_test("CSS Test: @viewport cascading - !important declaration wins");
  39    window.onload = function(){
  40
  41     var testStyleSheet = document.styleSheets.item(1);
  42
  43     /* Initialize an object to store viewport values to be used by the test
  44        asserts. */
  45     var viewport = new Object();
  46
  47     /* An element with the same size as the initial containing block. */
  48     var testElm = document.getElementById("test");
  49
  50     if (window.testRunner) {
  51         viewport.fontSize = parseInt(getComputedStyle(testElm, "").fontSize);
  52         viewport.initialWidth = 320;
  53         viewport.initialHeight = 352;
  54
  55         var vpString = internals.viewportAsText(document, 1,
  56                                                 viewport.initialWidth,
  57                                                 viewport.initialHeight);
  58
  59         var match = /viewport size (.+)x(.+) scale (.+ )/.exec(vpString);
  60
  61         if (match) {
  62             viewport.actualWidth = parseFloat(match[1]);
  63             viewport.actualHeight = parseFloat(match[2]);
  64             viewport.zoom = parseFloat(match[3]);
  65         }
  66     }
  67     else {
  68         /* Disable the stylesheet that contains the @viewport to test. */
  69         testStyleSheet.disabled = true;
  70
  71         /* Retrieve the initial viewport values before applying the @viewport to
  72            test. */
  73         viewport.fontSize = parseInt(getComputedStyle(testElm, "").fontSize);
  74         viewport.initialWidth = testElm.offsetWidth;
  75         viewport.initialHeight = testElm.offsetHeight;
  76
  77         /* Enable the stylesheet that contains the @viewport to test. */
  78         testStyleSheet.disabled = false;
  79
  80         /* Retrieve the actual viewport values for the test. */
  81         viewport.actualWidth = testElm.offsetWidth;
  82         viewport.actualHeight = testElm.offsetHeight;
  83         viewport.zoom = viewport.initialWidth / window.innerWidth;
  84     }
  85
  86     /* Check viewport values. */
  87     test.step(function(){
  88         assert_equals(viewport.actualWidth, 300);
  89     });
  90
  91     /* Finished. Show the results. */
  92     test.done();
  93     testStyleSheet.disabled = true;
  94     document.getElementById("log").style.display = "block";
  95    }
  96   </script>
  97  </head>
  98  <body>
  99   <div id="test">
 100    <div id="log"></div>
 101   </div>
 102  </body>
 103 </html>