css/css-values/viewport-units-css2-001.html

<!DOCTYPE html>
<html>
<head>
  <title>CSS Values and Units Test: Checks viewport units against CSS 2.1 properties and the CSSOM</title>
  <meta charset="UTF-8">
  <meta name="assert" content="Testing what happens when one applies and rereads viewport unit lengths to CSS 2.1 properties that accept length values" />
  <link rel="author" title="Christian Schaefer" href="mailto:schaepp@gmx.de">
  <link rel="help" href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths">
  <script src="/resources/testharness.js"></script>
  <script src="/resources/testharnessreport.js"></script>
  <style>
    #div {
      position: relative;
      width: 50vw;
      height: 10vw;
      background: green;
      border: 0 green solid;
      font-size: 4vw;
    }

    #table td {
      border: 1px solid green;
    }
  </style>
</head>
<body>
  <div id="log"></div>

  <p>
    Checks viewport units. Also re-check with zoom in/out.
  </p>

  <div id="div">
    Test the Web Forward!
  </div>

  <table id="table">
    <tbody>
      <tr>
        <td id="td">Test</td>
        <td>T</td>
        <td>W</td>
        <td>F</td>
      </tr>
    </tbody>
  </table>

  <script>

  /* Boilerplate code */

  var camelize = function (str) {
    return str.replace(/\-(\w)/g, function(str, letter){
      return letter.toUpperCase();
    });
  };

  var retrieveComputedStyle = function(element,property){
    var result =
      document
      .defaultView
      .getComputedStyle(element,null)
      .getPropertyValue(property);

    // If there are multiple values, cut down to the first
    result = result.split(' ')[0];

    if(window.console) console.log('Retrieving ' + property + ' property. Result: ' + result);

    return result;
  }

  var testit = function(element,vunit,property,expectedResult){

    element.style[camelize(property)] = '0px';
    element.style[camelize(property)] = lengthAmount + vunit;

    if(window.console) console.log(element.nodeName.toLowerCase() + '.style.' + camelize(property) + ' = ' + lengthAmount + vunit);

    var result = retrieveComputedStyle(element,property);

    // Test against WebKit's getComputedStyle bug, where it does not return absolute values
    // As required here: http://www.w3.org/TR/1998/REC-CSS2-19980512/cascade.html#computed-value
    // If it returns a pixel value, but this value is 0px then it is considered a fail, too.
    var px_result = result.search(/^[-\d\.]+px$/) !== -1 && result !== '0px' ? 'non-zero px-based value' : result;

    // If browser returns pixel value, we compare against our expected pixel value
    if(px_result === 'non-zero px-based value'){
      test(function(){
        assert_equals(Math.round(parseFloat(result.replace(/[^-\d\.]+/g,''))),expectedResult);
      },vunit + ' length applied to ' + property);
    }
    // If not, we compare against the value we set initially
    else {
      test(function(){
        assert_equals(result,lengthAmount + vunit);
      },vunit + ' length applied to ' + property);
    }

    // Does the browser have a bug in getComputedStyle or not?
    test(function(){
      assert_equals(px_result,'non-zero px-based value');
    },vunit + ' length applied to ' + property + ': getComputedStyle returns a non-zero px-based value');

    element.style[camelize(property)] = '';
  }

  var lengthAmount = 10;
  var layoutViewportWidth = document.documentElement.clientWidth;
  var layoutViewportHeight = document.documentElement.clientHeight;

  var viewportUnits = [
     {
       ident: 'vw',
       expectedResult: Math.round(layoutViewportWidth * (lengthAmount / 100))
    }
    ,{
       ident: 'vh',
       expectedResult: Math.round(layoutViewportHeight * (lengthAmount / 100))
    }
    ,{
       ident: 'vmin',
       expectedResult: layoutViewportWidth < layoutViewportHeight ? Math.round(layoutViewportWidth * (lengthAmount / 100)) : Math.round(layoutViewportHeight * (lengthAmount / 100))
    }
    ,{
       ident: 'vmax',
       expectedResult: layoutViewportWidth > layoutViewportHeight ? Math.round(layoutViewportWidth * (lengthAmount / 100)) : Math.round(layoutViewportHeight * (lengthAmount / 100))
    }
  ]

  // List of length accepting properties and which element they map to
  // http://www.w3.org/TR/CSS21/propidx.html
  var lengthAcceptingProperties = [
     {
      name: 'width',
      element: 'div'
    }
    ,{
      name: 'height',
      element: 'div'
    }
    ,{
      name: 'min-width',
      element: 'div'
    }
    ,{
      name: 'min-height',
      element: 'div'
    }
    ,{
      name: 'max-width',
      element: 'div'
    }
    ,{
      name: 'max-height',
      element: 'div'
    }
    ,{
      name: 'margin-top',
      element: 'div'
    }
    ,{
      name: 'padding-top',
      element: 'div'
    }
    ,{
      name: 'border-top-width',
      element: 'div'
    }
    ,{
      name: 'font-size',
      element: 'div'
    }
    ,{
      name: 'line-height',
      element: 'div'
    }
    ,{
      name: 'border-spacing',
      element: 'table'
    }
    ,{
      name: 'top',
      element: 'div'
    }
    ,{
      name: 'right',
      element: 'div'
    }
    ,{
      name: 'bottom',
      element: 'div'
    }
    ,{
      name: 'left',
      element: 'div'
    }
    ,{
      name: 'letter-spacing',
      element: 'div'
    }
    ,{
      name: 'text-indent',
      element: 'div'
    }
    ,{
      name: 'vertical-align',
      element: 'td'
    }
    ,{
      name: 'word-spacing',
      element: 'div'
    }
  ];

  var div = document.getElementById('div');
  var table = document.getElementById('table');
  var td = document.getElementById('td');

  for(unitEntry in viewportUnits){
    for(propertyEntry in lengthAcceptingProperties){

      var vunit = viewportUnits[unitEntry].ident;
      var expectedResult = viewportUnits[unitEntry].expectedResult;
      var property = lengthAcceptingProperties[propertyEntry].name;
      var element = window[lengthAcceptingProperties[propertyEntry].element];

      testit(element,vunit,property,expectedResult);
    }
  }

  </script>
</body>
</html>