<!DOCTYPE html>
<html>
<head>
<script src="../../../../resources/js-test.js"></script>
</head>
<body>
<div id="test"></div>
<div id="ancestor"><div id="child"></div></div>

<script>
  function testElementStyle(value)
  {
      shouldBe("element.style.textJustify", "'" + value + "'");
  }

  function testComputedStyle(value)
  {
      computedStyle = window.getComputedStyle(element, null);
      shouldBe("computedStyle.textJustify", "'" + value + "'");
  }

  function valueSettingTest(value)
  {
      debug("Value '" + value + "':");
      element.style.textJustify = value;
      testElementStyle(value);
      testComputedStyle(value);
      debug('');
  }

  function invalidValueSettingTest(value, presettedValue)
  {
      debug("Invalid value test - '" + value + "':");
      element.style.textJustify = value;
      testElementStyle(presettedValue);
      testComputedStyle(presettedValue);
      debug('');
  }

  function ownValueTest(ancestorValue, childValue)
  {
      debug("Value of ancestor is '" + ancestorValue + ", while child is '" + childValue + "':");
      ancestor.style.textJustify = ancestorValue;
      child.style.textJustify = childValue;
      testElementStyle(childValue);
      testComputedStyle(childValue);
      debug('');
  }

  function inheritanceTest(ancestorValue)
  {
      debug("Value of ancestor is '" + ancestorValue + "':");
      ancestor.style.textJustify = ancestorValue;
      expectedInheritedValue = ancestorValue;
      testElementStyle(expectedInheritedValue);
      testComputedStyle(expectedInheritedValue);
      debug('');
  }

  function computedValueSettingTest(value, expectedComputedValue)
  {
      debug("Computed value test - '" + value + "':");
      if (value == 'inherit')
        ancestor.style.textJustify = expectedComputedValue;
      element.style.textJustify = value;
      testElementStyle(value);
      testComputedStyle(expectedComputedValue);
      debug('');
  }

  description("This test checks that text-justify parses properly the properties from CSS 3 Text.");

  element = document.getElementById('test');

  valueSettingTest('none');
  valueSettingTest('inter-word');
  valueSettingTest('distribute');

  presettedValue = 'none'
  debug("Presetted value is none");
  element.style.textJustify = presettedValue;
  invalidValueSettingTest('green', presettedValue);
  invalidValueSettingTest('inline', presettedValue);

  presettedValue = 'distribute'
  debug("Presetted value is distribute");
  element.style.textJustify = presettedValue;
  invalidValueSettingTest('solid', presettedValue);
  invalidValueSettingTest('normal', presettedValue);

  element = document.getElementById('child');
  ancestor = document.getElementById('ancestor');

  computedValueSettingTest('inherit', 'none');
  computedValueSettingTest('inherit', 'distribute');
  computedValueSettingTest('initial', 'auto');

  ownValueTest("inter-word", "distribute");
  ownValueTest("none", "inter-word");
</script>
</body>

</html>