137 lines
5.2 KiB
HTML
137 lines
5.2 KiB
HTML
<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.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", "right 20px bottom 10px");
|
|
|
|
run("t.setAttribute('style', 'background-position: top 10px right 20px');");
|
|
shouldBe("t.style.backgroundPosition", "right 20px top 10px");
|
|
shouldBe("window.getComputedStyle(t).backgroundPosition", "right 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');"); // This does not parse, but perhaps it should.
|
|
shouldBe("window.getComputedStyle(t).backgroundPositionX", "0%");
|
|
|
|
run("t.setAttribute('style', 'background-position: right 20px bottom 10px');");
|
|
shouldBe("window.getComputedStyle(t).backgroundPosition", "right 20px bottom 10px");
|
|
shouldBe("window.getComputedStyle(t).backgroundPositionX", "20px"); // This is a bug. webkit.org/b/154551
|
|
|
|
run("t.setAttribute('style', 'background: url(about:blank) 80% 80%;');");
|
|
run("t.style.backgroundPositionY = '50px'");
|
|
print("style.cssText =");
|
|
print(t.style.cssText);
|
|
</script>
|