<!DOCTYPE html>
<html>
<style>
* { font-size: 16px; }
div { font-size: 8px; }
</style>
<body>
<script src="../../resources/js-test-pre.js"></script>
<script>
description('Test parsing, element style and computed style for paint-order property.');

function computedStyle(property, value) {
    var div = document.createElement("div");
    document.body.appendChild(div);
    div.style.setProperty(property, value);
    var computedValue = getComputedStyle(div).getPropertyValue(property);
    document.body.removeChild(div);
    return computedValue;
}

function innerStyle(property, value) {
    var div = document.createElement("div");
    div.style.setProperty(property, value);
    return div.style.getPropertyValue(property);
}

function testComputed(property, value, expected) {
    shouldBeEqualToString('computedStyle("' + property + '", "' + value + '")', expected);
}

function testInner(property, value, expected) {
    if (expected === null)
        expected = "";
    shouldBeEqualToString('innerStyle("' + property + '", "' + value + '")', expected);
}

function negativeTest(property, value) {
    testInner(property, value, null);
    testComputed(property, value, 'normal');
}

// Test element style.
testInner("paint-order", "normal", "normal");
testInner("paint-order", "fill", "fill");
testInner("paint-order", "stroke", "stroke");
testInner("paint-order", "markers", "markers");
testInner("paint-order", "fill stroke", "fill");
testInner("paint-order", "fill stroke markers", "fill");
testInner("paint-order", "fill markers", "fill markers");
testInner("paint-order", "fill markers stroke", "fill markers");
testInner("paint-order", "stroke fill", "stroke");
testInner("paint-order", "stroke fill markers", "stroke");
testInner("paint-order", "stroke markers", "stroke markers");
testInner("paint-order", "stroke markers fill", "stroke markers");
testInner("paint-order", "stroke fill", "stroke");
testInner("paint-order", "stroke fill markers", "stroke");
testInner("paint-order", "stroke markers", "stroke markers");
testInner("paint-order", "stroke markers fill", "stroke markers");

// Test computed style.
testComputed("paint-order", "normal", "normal");
testComputed("paint-order", "fill", "fill");
testComputed("paint-order", "stroke", "stroke");
testComputed("paint-order", "markers", "markers");
testComputed("paint-order", "fill stroke", "fill");
testComputed("paint-order", "fill stroke markers", "fill");
testComputed("paint-order", "fill markers", "fill markers");
testComputed("paint-order", "fill markers stroke", "fill markers");
testComputed("paint-order", "stroke fill", "stroke");
testComputed("paint-order", "stroke fill markers", "stroke");
testComputed("paint-order", "stroke markers", "stroke markers");
testComputed("paint-order", "stroke markers fill", "stroke markers");
testComputed("paint-order", "stroke fill", "stroke");
testComputed("paint-order", "stroke fill markers", "stroke");
testComputed("paint-order", "stroke markers", "stroke markers");
testComputed("paint-order", "stroke markers fill", "stroke markers");

// Negative tests.
negativeTest("paint-order", "normal fill");
negativeTest("paint-order", "normal stroke");
negativeTest("paint-order", "normal markers");
negativeTest("paint-order", "fill fill");
negativeTest("paint-order", "stroke stroke");
negativeTest("paint-order", "markers markers");
negativeTest("paint-order", "markers fill markers");
negativeTest("paint-order", "markers stroke markers");

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