<!DOCTYPE HTML>
<html>
<head>
<script src="../../../../resources/js-test.js"></script>
</head>
<body>
  <div class="p"></div>
  <script type="text/javascript">
    function testInkIsValid(stylesheet, target) {
      cssRule = stylesheet.cssRules.item(0);
      shouldBe("cssRule.type", "cssRule.STYLE_RULE");
      declaration = cssRule.style;
      shouldBe("declaration.length", "1");
      shouldBeEqualToString("declaration.getPropertyValue('-webkit-text-decoration-skip')", "auto");
      shouldBeEqualToString("declaration.getPropertyValue('text-decoration-skip')", "auto");
      shouldBeEqualToString("declaration.getPropertyValue('text-decoration-skip-ink')", "auto");
      computedStyle = window.getComputedStyle(target, null);
      shouldBeEqualToString("computedStyle.getPropertyCSSValue('-webkit-text-decoration-skip').cssText", "auto");
      shouldBeEqualToString("computedStyle.getPropertyCSSValue('text-decoration-skip').cssText", "auto");
      shouldBeEqualToString("computedStyle.getPropertyCSSValue('text-decoration-skip-ink').cssText", "auto");
      stylesheet.deleteRule(0);
    }

    function testEmpty(stylesheet, target) {
      cssRule = stylesheet.cssRules.item(0);
      shouldBe("cssRule.type", "cssRule.STYLE_RULE");
      declaration = cssRule.style;
      shouldBe("declaration.length", "0");
      shouldBeEqualToString("declaration.getPropertyValue('-webkit-text-decoration-skip')", "");
      shouldBeEqualToString("declaration.getPropertyValue('text-decoration-skip')", "");
      shouldBeEqualToString("declaration.getPropertyValue('text-decoration-skip-ink')", "");
      computedStyle = window.getComputedStyle(target, null);
      shouldBeEqualToString("computedStyle.getPropertyCSSValue('-webkit-text-decoration-skip').cssText", "auto");
      shouldBeEqualToString("computedStyle.getPropertyCSSValue('text-decoration-skip').cssText", "auto");
      shouldBeEqualToString("computedStyle.getPropertyCSSValue('text-decoration-skip-ink').cssText", "auto");
      stylesheet.deleteRule(0);
    }

    function testInitialIsAuto(stylesheet, target) {
      cssRule = stylesheet.cssRules.item(0);
      shouldBe("cssRule.type", "cssRule.STYLE_RULE");
      declaration = cssRule.style;
      shouldBe("declaration.length", "1");
      shouldBeEqualToString("declaration.getPropertyValue('-webkit-text-decoration-skip')",  "initial");
      shouldBeEqualToString("declaration.getPropertyValue('text-decoration-skip')",  "initial");
      shouldBeEqualToString("declaration.getPropertyValue('text-decoration-skip-ink')",  "initial");
      computedStyle = window.getComputedStyle(target, null);
      shouldBeEqualToString("computedStyle.getPropertyCSSValue('-webkit-text-decoration-skip').cssText", "auto");
      shouldBeEqualToString("computedStyle.getPropertyCSSValue('text-decoration-skip').cssText", "auto");
      shouldBeEqualToString("computedStyle.getPropertyCSSValue('text-decoration-skip-ink').cssText", "auto");
      stylesheet.deleteRule(0);
    }

    function testInvalidRule(stylesheet, target) {
      cssRule = stylesheet.cssRules.item(0);
      shouldBe("cssRule.type", "cssRule.STYLE_RULE");
      declaration = cssRule.style;
      shouldBe("declaration.length", "0");
      computedStyle = window.getComputedStyle(target, null);
      shouldBeEqualToString("computedStyle.getPropertyCSSValue('-webkit-text-decoration-skip').cssText", "auto");
      shouldBeEqualToString("computedStyle.getPropertyCSSValue('text-decoration-skip').cssText", "auto");
      shouldBeEqualToString("computedStyle.getPropertyCSSValue('text-decoration-skip-ink').cssText", "auto");
      stylesheet.deleteRule(0);
    }

    function testNoneIsValid(stylesheet, target) {
      cssRule = stylesheet.cssRules.item(0);
      shouldBe("cssRule.type", "cssRule.STYLE_RULE");
      declaration = cssRule.style;
      shouldBe("declaration.length", "1");
      shouldBeEqualToString("declaration.getPropertyValue('-webkit-text-decoration-skip')", "none");
      shouldBeEqualToString("declaration.getPropertyValue('text-decoration-skip')", "none");
      shouldBeEqualToString("declaration.getPropertyValue('text-decoration-skip-ink')", "none");
      computedStyle = window.getComputedStyle(target, null);
      shouldBeEqualToString("computedStyle.getPropertyCSSValue('-webkit-text-decoration-skip').cssText", "none");
      shouldBeEqualToString("computedStyle.getPropertyCSSValue('text-decoration-skip').cssText", "none");
      shouldBeEqualToString("computedStyle.getPropertyCSSValue('text-decoration-skip-ink').cssText", "none");
      stylesheet.deleteRule(0);
    }

    var styleElement = document.createElement("style");
    document.head.appendChild(styleElement);
    stylesheet = styleElement.sheet;
    var target = document.getElementsByClassName("p")[0];

    debug("Test 1");
    stylesheet.insertRule(".p { }", 0);
    testEmpty(stylesheet, target);

    debug("Test 2");
    stylesheet.insertRule(".p { -webkit-text-decoration-skip: initial; }", 0);
    testInitialIsAuto(stylesheet, target);
    stylesheet.insertRule(".p { text-decoration-skip: initial; }", 0);
    testInitialIsAuto(stylesheet, target);
    stylesheet.insertRule(".p { text-decoration-skip-ink: initial; }", 0);
    testInitialIsAuto(stylesheet, target);

    debug("Test 3");
    stylesheet.insertRule(".p { -webkit-text-decoration-skip: ink; }", 0);
    testInkIsValid(stylesheet, target);
    stylesheet.insertRule(".p { text-decoration-skip: ink; }", 0);
    testInkIsValid(stylesheet, target);
    stylesheet.insertRule(".p { text-decoration-skip-ink: auto; }", 0);
    testInkIsValid(stylesheet, target);

    debug("Test 4");
    stylesheet.insertRule(".p { -webkit-text-decoration-skip: ink ink ink ink ink; }", 0);
    testInvalidRule(stylesheet, target);
    stylesheet.insertRule(".p { text-decoration-skip: ink ink ink ink ink; }", 0);
    testInvalidRule(stylesheet, target);
    stylesheet.insertRule(".p { text-decoration-skip-ink: auto auto auto auto auto; }", 0);
    testInvalidRule(stylesheet, target);

    debug("Test 5");
    stylesheet.insertRule(".p { -webkit-text-decoration-skip: garbage; }", 0);
    testInvalidRule(stylesheet, target);
    stylesheet.insertRule(".p { text-decoration-skip: garbage; }", 0);
    testInvalidRule(stylesheet, target);
    stylesheet.insertRule(".p { text-decoration-skip-ink: garbage; }", 0);
    testInvalidRule(stylesheet, target);

    debug("Test 6");
    stylesheet.insertRule(".p { -webkit-text-decoration-skip: garbage ink; }", 0);
    testInvalidRule(stylesheet, target);
    stylesheet.insertRule(".p { text-decoration-skip: garbage ink; }", 0);
    testInvalidRule(stylesheet, target);
    stylesheet.insertRule(".p { text-decoration-skip-ink: garbage auto; }", 0);
    testInvalidRule(stylesheet, target);

    debug("Test 7");
    stylesheet.insertRule(".p { -webkit-text-decoration-skip: ink garbage; }", 0);
    testInvalidRule(stylesheet, target);
    stylesheet.insertRule(".p { text-decoration-skip: ink garbage; }", 0);
    testInvalidRule(stylesheet, target);
    stylesheet.insertRule(".p { text-decoration-skip-ink: auto garbage; }", 0);
    testInvalidRule(stylesheet, target);
    
    debug("Test 8");
    stylesheet.insertRule(".p { -webkit-text-decoration-skip: garbage ink garbage; }", 0);
    testInvalidRule(stylesheet, target);
    stylesheet.insertRule(".p { text-decoration-skip: garbage ink garbage; }", 0);
    testInvalidRule(stylesheet, target);
    stylesheet.insertRule(".p { text-decoration-skip-ink: garbage auto garbage; }", 0);
    testInvalidRule(stylesheet, target);
    
    debug("Test 9");
    stylesheet.insertRule(".p { -webkit-text-decoration-skip: ink garbage ink; }", 0);
    testInvalidRule(stylesheet, target);
    stylesheet.insertRule(".p { text-decoration-skip: ink garbage ink; }", 0);
    testInvalidRule(stylesheet, target);
    stylesheet.insertRule(".p { text-decoration-skip-ink: auto garbage auto; }", 0);
    testInvalidRule(stylesheet, target);
    
    debug("Test 10");
    stylesheet.insertRule(".p { -webkit-text-decoration-skip: none; }", 0);
    testNoneIsValid(stylesheet, target);
    stylesheet.insertRule(".p { text-decoration-skip: none; }", 0);
    testNoneIsValid(stylesheet, target);
    stylesheet.insertRule(".p { text-decoration-skip-ink: none; }", 0);
    testNoneIsValid(stylesheet, target);
    
    debug("Test 11");
    stylesheet.insertRule(".p { -webkit-text-decoration-skip: ; }", 0);
    testInvalidRule(stylesheet, target);
    stylesheet.insertRule(".p { text-decoration-skip: ; }", 0);
    testInvalidRule(stylesheet, target);
    stylesheet.insertRule(".p { text-decoration-skip-ink: ; }", 0);
    testInvalidRule(stylesheet, target);
  </script>
</body>
</html>