| <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 top 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> |
