
<html>
<body>
<div id="t"></div>
<div id="console"></div>
<script>
function print(message, color) 
{
    var paragraph = document.createElement("div");
    paragraph.appendChild(document.createTextNode(message));
    paragraph.style.fontFamily = "monospace";
    if (color)
        paragraph.style.color = color;
    document.getElementById("console").appendChild(paragraph);
}

function run(a)
{
    print(a);
    try {
        eval(a);
    } catch(e) {
        print(e);
    }
}

function shouldBe(a, b)
{
    var evalA;
    try {
        evalA = eval(a);
    } catch(e) {
        evalA = e;
    }
    
    if (evalA == b)
        print("PASS: " + a + " should be " + b + " and is.", "green");
    else
        print("FAIL: " + a + " should be " + b + " but instead is " + evalA + ".", "red");
}

if (window.testRunner)
    testRunner.dumpAsText();

var t = document.getElementById('t');

run("t.style.backgroundPositionX = '5%';");
shouldBe("t.style.backgroundPosition", "");
shouldBe("t.style.backgroundPositionX", "5%");
shouldBe("t.style.backgroundPositionY", "");
shouldBe("t.style.cssText", "background-position-x: 5%;");
shouldBe("t.getAttribute('style')", "background-position-x: 5%;");

run("t.style.backgroundPositionY = '5%';");
shouldBe("t.style.backgroundPosition", "5% 5%");
shouldBe("t.style.backgroundPositionX", "5%");
shouldBe("t.style.backgroundPositionY", "5%");
shouldBe("t.style.cssText", "background-position: 5% 5%;");
shouldBe("t.getAttribute('style')", "background-position: 5% 5%;");

run("t.style.backgroundPosition = '10% 10%';");
shouldBe("t.style.backgroundPosition", "10% 10%");
shouldBe("t.style.backgroundPositionX", "10%");
shouldBe("t.style.backgroundPositionY", "10%");
shouldBe("t.style.cssText", "background-position: 10% 10%;");
shouldBe("t.getAttribute('style')", "background-position: 10% 10%;");

run("t.style.backgroundPositionX = '20%';");
shouldBe("t.style.backgroundPosition", "20% 10%");
shouldBe("t.style.backgroundPositionX", "20%");
shouldBe("t.style.backgroundPositionY", "10%");
shouldBe("t.style.cssText", "background-position: 20% 10%;");
shouldBe("t.getAttribute('style')", "background-position: 20% 10%;");

run("t.style.backgroundPositionY = '20%';");
shouldBe("t.style.backgroundPosition", "20% 20%");
shouldBe("t.style.backgroundPositionX", "20%");
shouldBe("t.style.backgroundPositionY", "20%");
shouldBe("t.style.cssText", "background-position: 20% 20%;");
shouldBe("t.getAttribute('style')", "background-position: 20% 20%;");

run("t.setAttribute('style', 'background-position: 30% 30%');");
shouldBe("t.style.backgroundPosition", "30% 30%");
shouldBe("t.style.backgroundPositionX", "30%");
shouldBe("t.style.backgroundPositionY", "30%");
shouldBe("t.style.cssText", "background-position: 30% 30%;");
shouldBe("t.getAttribute('style')", "background-position: 30% 30%");

run("t.style.backgroundPositionX = '20%';");
shouldBe("t.style.backgroundPosition", "20% 30%");
shouldBe("t.style.backgroundPositionX", "20%");
shouldBe("t.style.backgroundPositionY", "30%");
shouldBe("t.style.cssText", "background-position: 20% 30%;");
shouldBe("t.getAttribute('style')", "background-position: 20% 30%;");

run("t.style.backgroundPositionY = '20%';");
shouldBe("t.style.backgroundPosition", "20% 20%");
shouldBe("t.style.backgroundPositionX", "20%");
shouldBe("t.style.backgroundPositionY", "20%");
shouldBe("t.style.cssText", "background-position: 20% 20%;");
shouldBe("t.getAttribute('style')", "background-position: 20% 20%;");

run("t.style.backgroundPositionY = '0%';");
shouldBe("t.style.backgroundPosition", "20% 0%");
shouldBe("t.style.backgroundPositionX", "20%");
shouldBe("t.style.backgroundPositionY", "0%");
shouldBe("t.style.cssText", "background-position: 20% 0%;");
shouldBe("t.getAttribute('style')", "background-position: 20% 0%;");

run("t.style.backgroundPositionX = '0%';");
shouldBe("t.style.backgroundPosition", "0% 0%");
shouldBe("t.style.backgroundPositionX", "0%");
shouldBe("t.style.backgroundPositionY", "0%");
shouldBe("t.style.cssText", "background-position: 0% 0%;");
shouldBe("t.getAttribute('style')", "background-position: 0% 0%;");

run("t.style.backgroundPosition = 'center';");
shouldBe("t.style.backgroundPosition", "center center");
shouldBe("t.style.backgroundPositionX", "center");
shouldBe("t.style.backgroundPositionY", "center");
shouldBe("t.style.cssText", "background-position: center center;");
shouldBe("t.getAttribute('style')", "background-position: center center;");

run("t.style.backgroundPosition = '0% center';");
shouldBe("t.style.backgroundPosition", "0% center");
shouldBe("t.style.backgroundPositionX", "0%");
shouldBe("t.style.backgroundPositionY", "center");
shouldBe("t.style.cssText", "background-position: 0% center;");
shouldBe("t.getAttribute('style')", "background-position: 0% center;");

run("t.style.backgroundPosition = 'center 0%';");
shouldBe("t.style.backgroundPosition", "center 0%");
shouldBe("t.style.backgroundPositionX", "center");
shouldBe("t.style.backgroundPositionY", "0%");
shouldBe("t.style.cssText", "background-position: center 0%;");
shouldBe("t.getAttribute('style')", "background-position: center 0%;");

run("t.setAttribute('style', 'background-position: 60% 60% !important;');");
shouldBe("t.style.backgroundPosition", "60% 60%");
shouldBe("t.style.backgroundPositionX", "60%");
shouldBe("t.style.backgroundPositionY", "60%");
shouldBe("t.style.cssText", "background-position: 60% 60% !important;");

run("t.setAttribute('style', 'background-position: 10px 15px, 20px 25px, 30px 35px');");
shouldBe("t.style.backgroundPosition", "10px 15px, 20px 25px, 30px 35px");
shouldBe("t.style.backgroundPositionX", "10px, 20px, 30px");
shouldBe("t.style.backgroundPositionY", "15px, 25px, 35px");
shouldBe("t.style.cssText", "background-position: 10px 15px, 20px 25px, 30px 35px;");

run("t.setAttribute('style', 'background-position: bottom 10px right 20px');");
shouldBe("t.style.backgroundPosition", "right 20px bottom 10px");
shouldBe("window.getComputedStyle(t).backgroundPosition", "calc(100% - 20px) calc(100% - 10px)");

run("t.setAttribute('style', 'background-position: top 10px right 20px');");
shouldBe("t.style.backgroundPosition", "right 20px top 10px");
shouldBe("window.getComputedStyle(t).backgroundPosition", "calc(100% - 20px) 10px");

run("t.setAttribute('style', 'background-position: 50% left');"); // Invalid per spec.
shouldBe("t.style.backgroundPosition", "");

run("t.setAttribute('style', 'background-position-x: right 20px');");
shouldBe("window.getComputedStyle(t).backgroundPositionX", "calc(100% - 20px)");

run("t.setAttribute('style', 'background-position: right 20px bottom 10px');");
shouldBe("window.getComputedStyle(t).backgroundPosition", "calc(100% - 20px) calc(100% - 10px)");
shouldBe("window.getComputedStyle(t).backgroundPositionX", "calc(100% - 20px)");

run("t.setAttribute('style', 'background: url(about:blank) 80% 80%;');");
run("t.style.backgroundPositionY = '50px'");
print("style.cssText =");
print(t.style.cssText);
</script>