<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="../../../resources/js-test-pre.js"></script>
</head>
<body>
<script>

description("Test to make sure list-style shorthand property returns CSSValueList properly.")

var testContainer = document.createElement("div");
testContainer.contentEditable = true;
document.body.appendChild(testContainer);

testContainer.innerHTML = '<ul id="test"><li>Coffee</li><li>Tea</li><li>Coca Cola</li></ul>';

e = document.getElementById('test');
computedStyle = window.getComputedStyle(e, null);

e.style.listStyle = "circle outside url(dummy://test.png)";
shouldBe("computedStyle.getPropertyValue('list-style')", "'outside url(\"dummy://test.png\") circle'");
shouldBe("computedStyle.getPropertyCSSValue('list-style').toString()", "'[object CSSValueList]'");
shouldBe("computedStyle.getPropertyCSSValue('list-style').length", "3");
shouldBe("computedStyle.getPropertyCSSValue('list-style').cssText", "'outside url(\"dummy://test.png\") circle'");
shouldBe("computedStyle.getPropertyCSSValue('list-style').item(0).getStringValue()", "'outside'");
shouldBe("computedStyle.getPropertyCSSValue('list-style').item(1).getStringValue()", "'dummy://test.png'");
shouldBe("computedStyle.getPropertyCSSValue('list-style').item(2).getStringValue()", "'circle'");

e.style.listStyle = ""
e.style.listStyle = "a b c";
shouldBe("computedStyle.getPropertyValue('list-style')", "'outside none disc'");
shouldBe("computedStyle.getPropertyCSSValue('list-style').toString()", "'[object CSSValueList]'");
shouldBe("computedStyle.getPropertyCSSValue('list-style').length", "3");
shouldBe("computedStyle.getPropertyCSSValue('list-style').cssText", "'outside none disc'");
shouldBe("computedStyle.getPropertyCSSValue('list-style').item(0).getStringValue()", "'outside'");
shouldBe("computedStyle.getPropertyCSSValue('list-style').item(1).getStringValue()", "'none'");
shouldBe("computedStyle.getPropertyCSSValue('list-style').item(2).getStringValue()", "'disc'");

e.style.listStyle = "circle outside";
shouldBe("computedStyle.getPropertyValue('list-style')", "'outside none circle'")
shouldBe("computedStyle.getPropertyCSSValue('list-style').toString()", "'[object CSSValueList]'");
shouldBe("computedStyle.getPropertyCSSValue('list-style').length", "3");
shouldBe("computedStyle.getPropertyCSSValue('list-style').cssText", "'outside none circle'");
shouldBe("computedStyle.getPropertyCSSValue('list-style').item(0).getStringValue()", "'outside'");
shouldBe("computedStyle.getPropertyCSSValue('list-style').item(1).getStringValue()", "'none'");
shouldBe("computedStyle.getPropertyCSSValue('list-style').item(2).getStringValue()", "'circle'");

e.style.listStyle = "none";
shouldBe("computedStyle.getPropertyValue('list-style')", "'outside none none'")
shouldBe("computedStyle.getPropertyCSSValue('list-style').toString()", "'[object CSSValueList]'");
shouldBe("computedStyle.getPropertyCSSValue('list-style').length", "3");
shouldBe("computedStyle.getPropertyCSSValue('list-style').cssText", "'outside none none'");
shouldBe("computedStyle.getPropertyCSSValue('list-style').item(0).getStringValue()", "'outside'");
shouldBe("computedStyle.getPropertyCSSValue('list-style').item(1).getStringValue()", "'none'");
shouldBe("computedStyle.getPropertyCSSValue('list-style').item(2).getStringValue()", "'none'");

e.style.listStyle = "";
e.style.listStyleType = "circle";
e.style.listStylePosition = "outside";
e.style.listStyleImage = "url(dummy://test.png)";
shouldBe("computedStyle.getPropertyValue('list-style')", "'outside url(\"dummy://test.png\") circle'");
shouldBe("computedStyle.getPropertyCSSValue('list-style').toString()", "'[object CSSValueList]'");
shouldBe("computedStyle.getPropertyCSSValue('list-style').length", "3");
shouldBe("computedStyle.getPropertyCSSValue('list-style').cssText", "'outside url(\"dummy://test.png\") circle'");
shouldBe("computedStyle.getPropertyCSSValue('list-style').item(0).getStringValue()", "'outside'");
shouldBe("computedStyle.getPropertyCSSValue('list-style').item(1).getStringValue()", "'dummy://test.png'");
shouldBe("computedStyle.getPropertyCSSValue('list-style').item(2).getStringValue()", "'circle'");

document.body.removeChild(testContainer);

</script>
<script src="../../../resources/js-test-post.js"></script>
</body>
</html>