<!DOCTYPE html>

  <meta charset="UTF-8">

  <title>CSS Text Test: computed value of 'tab-size'</title>

  <!--

  Issue 463: [css-text] The computed value and animation type of tab-size
  https://github.com/w3c/csswg-drafts/issues/463

  -->

  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
  <link rel="help" href="https://www.w3.org/TR/css-text-3/#tab-size-property">

  <meta content="This test checks that the computed value of 'tab-size' is a number when it is specified as such or is a length (absolute or relative) when it is specified as such." name="assert">

  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">

  <script src="/resources/testharness.js"></script>

  <script src="/resources/testharnessreport.js"></script>

  <style>
  div#target
    {
      font-family: Ahem;
      font-size: 20px;
    }
  </style>

  <div id="target">A</div>

  <div id="log"></div>

  <script>
  function startTesting()
  {

  var targetElement = document.getElementById("target");

    function verifyComputedStyle(property_name, specified_value, expected_value, description)
    {

    test(function()
      {

      targetElement.style.setProperty(property_name, "initial");

      /*
      The purpose of setting the property to its initial value
      is to act as a fallback value in case the specified value
      fails. Since we are running 11 consecutive tests on the
      same element, then it is necessary to 'reset' its property
      to an initial value.
      */

      targetElement.style.setProperty(property_name, specified_value);

      assert_equals(getComputedStyle(targetElement)[property_name], expected_value);

      }, description);
    }

    function compareValueCloseTo(property_name, specified_value, epsilon, expected_value, description)
    {

    test(function()
      {

      targetElement.style.setProperty(property_name, "initial");

      targetElement.style.setProperty(property_name, specified_value);

      var computedSpecifiedValue = parseFloat(getComputedStyle(targetElement)[property_name]);

      assert_true(isFinite(computedSpecifiedValue)); /* We can not accept NaN as value */

      targetElement.style.setProperty(property_name, expected_value);

      var computedExpectedValue = parseFloat(getComputedStyle(targetElement)[property_name]);

      assert_array_approx_equals(computedSpecifiedValue, computedExpectedValue, epsilon);

    } , description);

  }

    verifyComputedStyle("tab-size", "4", "4", "testing tab-size: 4");

 /* verifyComputedStyle(property_name, initial_value, specified_value, expected_value, description) */

  /* absolute length units: in, cm, mm, pt, pc, Q, px */

    verifyComputedStyle("tab-size", "0.5in", "48px", "testing tab-size: 0.5in");

    verifyComputedStyle("tab-size", "2.54cm", "96px", "testing tab-size: 2.54cm");

    verifyComputedStyle("tab-size", "25.4mm", "96px", "testing tab-size: 25.4mm");

    verifyComputedStyle("tab-size", "18pt", "24px", "testing tab-size: 18pt");

    verifyComputedStyle("tab-size", "5pc", "80px", "testing tab-size: 5pc");

    verifyComputedStyle("tab-size", "101.6Q", "96px", "testing tab-size: 101.6Q");

    verifyComputedStyle("tab-size", "7px", "7px", "testing tab-size: 7px");

 /* verifyComputedStyle(property_name, specified_value, expected_value, description) */

  /* relative length units: em, ex, rem */

    verifyComputedStyle("tab-size", "1em", "20px", "testing tab-size: 1em");

 /* compareValueCloseTo(property_name, specified_value, epsilon, expected_value, description)  */

    compareValueCloseTo("tab-size", "2ex", 0.001, "32px", "testing tab-size: 2ex");

    /*
    For this sub-test, we set the tolerance precision (epsilon)
    to (0.001 === 1 thousandth).
    */

    verifyComputedStyle("tab-size", "3rem", "48px", "testing tab-size: 3rem");

  /*

  NOT tested are: vw, vh, vmin, vmax and ch units

    verifyComputedStyle("tab-size", "4vw", "?px", "testing tab-size: 4vw");

    verifyComputedStyle("tab-size", "5vh", "?px", "testing tab-size: 5vh");

    verifyComputedStyle("tab-size", "6vmin", "?px", "testing tab-size: 6vmin");

    verifyComputedStyle("tab-size", "7vmax", "?px", "testing tab-size: 7vmax");

    verifyComputedStyle("tab-size", "8ch", "?px", "testing tab-size: 8ch");

  */

  }

  startTesting();

  </script>
