<?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 20em</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 20em 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: 20em }
   /* 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 20em");
   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>