| <!DOCTYPE html> |
| <html> |
| <head> |
| <script src="../../resources/js-test-pre.js"></script> |
| </head> |
| <body> |
| <script> |
| description("Test to make sure background-position is parsed correctly.") |
| |
| var testContainer = document.createElement("div"); |
| document.body.appendChild(testContainer); |
| |
| testContainer.innerHTML = '<div style="width:500px;height:500px"><div id="test">hello</div></div>'; |
| |
| e = document.getElementById('test'); |
| style = e.style; |
| computedStyle = window.getComputedStyle(e, null); |
| |
| style.backgroundImage = "url(resources/diamond.png)"; |
| style.backgroundRepeat = "no-repeat"; |
| |
| debug("background-position with one value"); |
| // Initial test. |
| shouldBe("computedStyle.backgroundPosition", "'0% 0%'"); |
| |
| style.backgroundPosition = "70%"; |
| // Second value is assuming to be 'center' |
| shouldBe("style.backgroundPosition", "'70% center'"); |
| shouldBe("computedStyle.backgroundPosition", "'70% 50%'"); |
| |
| style.backgroundPosition = "84px"; |
| shouldBe("style.backgroundPosition", "'84px center'"); |
| shouldBe("computedStyle.backgroundPosition", "'84px 50%'"); |
| |
| style.backgroundPosition = "left"; |
| shouldBe("style.backgroundPosition", "'left center'"); |
| shouldBe("computedStyle.backgroundPosition", "'0% 50%'"); |
| |
| style.backgroundPosition = "right"; |
| shouldBe("style.backgroundPosition", "'right center'"); |
| shouldBe("computedStyle.backgroundPosition", "'100% 50%'"); |
| |
| style.backgroundPosition = "bottom"; |
| shouldBe("style.backgroundPosition", "'center bottom'"); |
| shouldBe("computedStyle.backgroundPosition", "'50% 100%'"); |
| |
| style.backgroundPosition = "top"; |
| shouldBe("style.backgroundPosition", "'center top'"); |
| shouldBe("computedStyle.backgroundPosition", "'50% 0%'"); |
| |
| style.backgroundPosition = "center"; |
| shouldBe("style.backgroundPosition", "'center center'"); |
| shouldBe("computedStyle.backgroundPosition", "'50% 50%'"); |
| |
| debug("background-position with two values"); |
| style.backgroundPosition = "left bottom"; |
| shouldBe("style.backgroundPosition", "'left bottom'"); |
| shouldBe("computedStyle.backgroundPosition", "'0% 100%'"); |
| |
| style.backgroundPosition = "bottom left"; |
| shouldBe("style.backgroundPosition", "'left bottom'"); |
| shouldBe("computedStyle.backgroundPosition", "'0% 100%'"); |
| |
| style.backgroundPosition = "100% bottom"; |
| shouldBe("style.backgroundPosition", "'100% bottom'"); |
| shouldBe("computedStyle.backgroundPosition", "'100% 100%'"); |
| |
| style.backgroundPosition = "100% top"; |
| shouldBe("style.backgroundPosition", "'100% top'"); |
| shouldBe("computedStyle.backgroundPosition", "'100% 0%'"); |
| |
| style.backgroundPosition = "54px bottom"; |
| shouldBe("style.backgroundPosition", "'54px bottom'"); |
| shouldBe("computedStyle.backgroundPosition", "'54px 100%'"); |
| |
| style.backgroundPosition = "center center"; |
| shouldBe("style.backgroundPosition", "'center center'"); |
| shouldBe("computedStyle.backgroundPosition", "'50% 50%'"); |
| |
| style.backgroundPosition = "5% bottom"; |
| shouldBe("style.backgroundPosition", "'5% bottom'"); |
| shouldBe("computedStyle.backgroundPosition", "'5% 100%'"); |
| |
| style.backgroundPosition = "30pt -20px"; |
| shouldBe("style.backgroundPosition", "'30pt -20px'"); |
| shouldBe("computedStyle.backgroundPosition", "'40px -20px'"); |
| |
| style.backgroundPosition = "right center"; |
| shouldBe("style.backgroundPosition", "'right center'"); |
| shouldBe("computedStyle.backgroundPosition", "'100% 50%'"); |
| |
| style.backgroundPosition = "100% 0"; |
| shouldBe("style.backgroundPosition", "'100% 0px'"); |
| shouldBe("computedStyle.backgroundPosition", "'100% 0px'"); |
| |
| style.backgroundPosition = "center right"; |
| shouldBe("style.backgroundPosition", "'right center'"); |
| shouldBe("computedStyle.backgroundPosition", "'100% 50%'"); |
| |
| style.backgroundPosition = "center 50%"; |
| shouldBe("style.backgroundPosition", "'center 50%'"); |
| shouldBe("computedStyle.backgroundPosition", "'50% 50%'"); |
| |
| style.backgroundPosition = "center left"; |
| shouldBe("style.backgroundPosition", "'left center'"); |
| shouldBe("computedStyle.backgroundPosition", "'0% 50%'"); |
| |
| style.backgroundPosition = "-20% center"; |
| shouldBe("style.backgroundPosition", "'-20% center'"); |
| shouldBe("computedStyle.backgroundPosition", "'-20% 50%'"); |
| |
| style.backgroundPosition = "top right"; |
| shouldBe("style.backgroundPosition", "'right top'"); |
| shouldBe("computedStyle.backgroundPosition", "'100% 0%'"); |
| |
| style.backgroundPosition = "50% 50%"; |
| shouldBe("style.backgroundPosition", "'50% 50%'"); |
| shouldBe("computedStyle.backgroundPosition", "'50% 50%'"); |
| |
| debug("background-position invalid with one or two values, no change expected"); |
| style.backgroundPosition = "5 right"; |
| shouldBe("style.backgroundPosition", "'50% 50%'"); |
| shouldBe("computedStyle.backgroundPosition", "'50% 50%'"); |
| |
| style.backgroundPosition = "0 right"; |
| shouldBe("style.backgroundPosition", "'50% 50%'"); |
| shouldBe("computedStyle.backgroundPosition", "'50% 50%'"); |
| |
| style.backgroundPosition = "0px right"; |
| shouldBe("style.backgroundPosition", "'50% 50%'"); |
| shouldBe("computedStyle.backgroundPosition", "'50% 50%'"); |
| |
| style.backgroundPosition = "top 108px"; |
| shouldBe("style.backgroundPosition", "'50% 50%'"); |
| shouldBe("computedStyle.backgroundPosition", "'50% 50%'"); |
| |
| style.backgroundPosition = "top 100%"; |
| shouldBe("style.backgroundPosition", "'50% 50%'"); |
| shouldBe("computedStyle.backgroundPosition", "'50% 50%'"); |
| |
| style.backgroundPosition = "60 50%"; |
| shouldBe("style.backgroundPosition", "'50% 50%'"); |
| shouldBe("computedStyle.backgroundPosition", "'50% 50%'"); |
| |
| style.backgroundPosition = "hidden"; |
| shouldBe("style.backgroundPosition", "'50% 50%'"); |
| shouldBe("computedStyle.backgroundPosition", "'50% 50%'"); |
| |
| style.backgroundPosition = "hidden solid"; |
| shouldBe("style.backgroundPosition", "'50% 50%'"); |
| shouldBe("computedStyle.backgroundPosition", "'50% 50%'"); |
| |
| style.backgroundPosition = "bottombottom"; |
| shouldBe("style.backgroundPosition", "'50% 50%'"); |
| shouldBe("computedStyle.backgroundPosition", "'50% 50%'"); |
| |
| style.backgroundPosition = "left left"; |
| shouldBe("style.backgroundPosition", "'50% 50%'"); |
| shouldBe("computedStyle.backgroundPosition", "'50% 50%'"); |
| |
| style.backgroundPosition = "left right"; |
| shouldBe("style.backgroundPosition", "'50% 50%'"); |
| shouldBe("computedStyle.backgroundPosition", "'50% 50%'"); |
| |
| style.backgroundPosition = "top top"; |
| shouldBe("style.backgroundPosition", "'50% 50%'"); |
| shouldBe("computedStyle.backgroundPosition", "'50% 50%'"); |
| |
| style.backgroundPosition = "50% left"; |
| shouldBe("style.backgroundPosition", "'50% 50%'"); |
| shouldBe("computedStyle.backgroundPosition", "'50% 50%'"); |
| |
| style.backgroundPosition = "50"; |
| shouldBe("style.backgroundPosition", "'50% 50%'"); |
| shouldBe("computedStyle.backgroundPosition", "'50% 50%'"); |
| |
| style.backgroundPosition = "1px+1px"; |
| shouldBe("style.backgroundPosition", "'1px 1px'"); |
| shouldBe("computedStyle.backgroundPosition", "'1px 1px'"); |
| |
| debug("background-position with CSS3 comma separator, one or two values"); |
| style.backgroundImage = "url(resources/diamond.png), url(resources/ring.png)"; |
| style.backgroundRepeat = "no-repeat"; |
| |
| style.backgroundPosition = "50%, 100%"; |
| shouldBe("style.backgroundPosition", "'50% center, 100% center'"); |
| shouldBe("computedStyle.backgroundPosition", "'50% 50%, 100% 50%'"); |
| |
| style.backgroundPosition = "top, bottom"; |
| shouldBe("style.backgroundPosition", "'center top, center bottom'"); |
| shouldBe("computedStyle.backgroundPosition", "'50% 0%, 50% 100%'"); |
| |
| style.backgroundPosition = "right center, 5px bottom"; |
| shouldBe("style.backgroundPosition", "'right center, 5px bottom'"); |
| shouldBe("computedStyle.backgroundPosition", "'100% 50%, 5px 100%'"); |
| |
| style.backgroundPosition = "top left, bottom right"; |
| shouldBe("style.backgroundPosition", "'left top, right bottom'"); |
| shouldBe("computedStyle.backgroundPosition", "'0% 0%, 100% 100%'"); |
| |
| debug("background-position with CSS3 comma separator, with invalid one or two values, no change expected"); |
| style.backgroundPosition = "0 center, right right"; |
| shouldBe("style.backgroundPosition", "'left top, right bottom'"); |
| shouldBe("computedStyle.backgroundPosition", "'0% 0%, 100% 100%'"); |
| |
| style.backgroundPosition = "center right, right right"; |
| shouldBe("style.backgroundPosition", "'left top, right bottom'"); |
| shouldBe("computedStyle.backgroundPosition", "'0% 0%, 100% 100%'"); |
| |
| style.backgroundPosition = "center 20px, solid 20px"; |
| shouldBe("style.backgroundPosition", "'left top, right bottom'"); |
| shouldBe("computedStyle.backgroundPosition", "'0% 0%, 100% 100%'"); |
| |
| debug("background-position with CSS3 four values"); |
| style.backgroundImage = "url(resources/diamond.png)"; |
| style.backgroundPosition = "left 10px top 15px"; |
| shouldBe("style.backgroundPosition", "'left 10px top 15px'"); |
| shouldBe("computedStyle.backgroundPosition", "'left 10px top 15px'"); |
| |
| style.backgroundPosition = "left 10% top 30%"; |
| shouldBe("style.backgroundPosition", "'left 10% top 30%'"); |
| shouldBe("computedStyle.backgroundPosition", "'left 10% top 30%'"); |
| |
| style.backgroundPosition = "top 10% left 30%"; |
| shouldBe("style.backgroundPosition", "'left 30% top 10%'"); |
| shouldBe("computedStyle.backgroundPosition", "'left 30% top 10%'"); |
| |
| style.backgroundPosition = "right top 15px"; |
| shouldBe("style.backgroundPosition", "'right top 15px'"); |
| shouldBe("computedStyle.backgroundPosition", "'100% top 15px'"); |
| |
| style.backgroundPosition = "left 10px center"; |
| shouldBe("style.backgroundPosition", "'left 10px center'"); |
| shouldBe("computedStyle.backgroundPosition", "'left 10px 50%'"); |
| |
| style.backgroundPosition = "center top 20px"; |
| shouldBe("style.backgroundPosition", "'center top 20px'"); |
| shouldBe("computedStyle.backgroundPosition", "'50% top 20px'"); |
| |
| style.backgroundPosition = "top 20px center"; |
| shouldBe("style.backgroundPosition", "'center top 20px'"); |
| shouldBe("computedStyle.backgroundPosition", "'50% top 20px'"); |
| |
| style.backgroundPosition = "center left 30px"; |
| shouldBe("style.backgroundPosition", "'left 30px center'"); |
| shouldBe("computedStyle.backgroundPosition", "'left 30px 50%'"); |
| |
| style.backgroundPosition = ""; |
| shouldBe("style.backgroundPosition", "''"); |
| shouldBe("computedStyle.backgroundPosition", "'0% 0%'"); |
| |
| style.backgroundPosition = "left 20% top"; |
| shouldBe("style.backgroundPosition", "'left 20% top'"); |
| shouldBe("computedStyle.backgroundPosition", "'left 20% 0%'"); |
| |
| debug("background-position with CSS3 invalid four values, no change expected"); |
| style.backgroundPosition = "left center top"; |
| shouldBe("style.backgroundPosition", "'left 20% top'"); |
| shouldBe("computedStyle.backgroundPosition", "'left 20% 0%'"); |
| |
| style.backgroundPosition = "0px right top"; |
| shouldBe("style.backgroundPosition", "'left 20% top'"); |
| shouldBe("computedStyle.backgroundPosition", "'left 20% 0%'"); |
| |
| style.backgroundPosition = "left center top center"; |
| shouldBe("style.backgroundPosition", "'left 20% top'"); |
| shouldBe("computedStyle.backgroundPosition", "'left 20% 0%'"); |
| |
| style.backgroundPosition = "left center top 20%"; |
| shouldBe("style.backgroundPosition", "'left 20% top'"); |
| shouldBe("computedStyle.backgroundPosition", "'left 20% 0%'"); |
| |
| style.backgroundPosition = "center bottom top 20%"; |
| shouldBe("style.backgroundPosition", "'left 20% top'"); |
| shouldBe("computedStyle.backgroundPosition", "'left 20% 0%'"); |
| |
| style.backgroundPosition = "right bottom top"; |
| shouldBe("style.backgroundPosition", "'left 20% top'"); |
| shouldBe("computedStyle.backgroundPosition", "'left 20% 0%'"); |
| |
| style.backgroundPosition = "right bottom solid"; |
| shouldBe("style.backgroundPosition", "'left 20% top'"); |
| shouldBe("computedStyle.backgroundPosition", "'left 20% 0%'"); |
| |
| style.backgroundPosition = "20px bottom top"; |
| shouldBe("style.backgroundPosition", "'left 20% top'"); |
| shouldBe("computedStyle.backgroundPosition", "'left 20% 0%'"); |
| |
| style.backgroundPosition = "20px bottom hidden"; |
| shouldBe("style.backgroundPosition", "'left 20% top'"); |
| shouldBe("computedStyle.backgroundPosition", "'left 20% 0%'"); |
| |
| style.backgroundPosition = "solid dotted bottom top"; |
| shouldBe("style.backgroundPosition", "'left 20% top'"); |
| shouldBe("computedStyle.backgroundPosition", "'left 20% 0%'"); |
| |
| style.backgroundPosition = "top top top top"; |
| shouldBe("style.backgroundPosition", "'left 20% top'"); |
| shouldBe("computedStyle.backgroundPosition", "'left 20% 0%'"); |
| |
| style.backgroundPosition = "left 0px right 20%"; |
| shouldBe("style.backgroundPosition", "'left 20% top'"); |
| shouldBe("computedStyle.backgroundPosition", "'left 20% 0%'"); |
| |
| style.backgroundPosition = "left 30% top 20% center"; |
| shouldBe("style.backgroundPosition", "'left 20% top'"); |
| shouldBe("computedStyle.backgroundPosition", "'left 20% 0%'"); |
| |
| style.backgroundPosition = "20px 30% bottom"; |
| shouldBe("style.backgroundPosition", "'left 20% top'"); |
| shouldBe("computedStyle.backgroundPosition", "'left 20% 0%'"); |
| |
| style.backgroundPosition = "top 0px bottom"; |
| shouldBe("style.backgroundPosition", "'left 20% top'"); |
| shouldBe("computedStyle.backgroundPosition", "'left 20% 0%'"); |
| |
| style.backgroundPosition = "left 0px right"; |
| shouldBe("style.backgroundPosition", "'left 20% top'"); |
| shouldBe("computedStyle.backgroundPosition", "'left 20% 0%'"); |
| |
| style.backgroundPosition = "top 0px bottom 30px top"; |
| shouldBe("style.backgroundPosition", "'left 20% top'"); |
| shouldBe("computedStyle.backgroundPosition", "'left 20% 0%'"); |
| |
| style.backgroundPosition = "left 10px center 15px"; |
| shouldBe("style.backgroundPosition", "'left 20% top'"); |
| shouldBe("computedStyle.backgroundPosition", "'left 20% 0%'"); |
| |
| style.backgroundPosition = "left 10px top center"; |
| shouldBe("style.backgroundPosition", "'left 20% top'"); |
| shouldBe("computedStyle.backgroundPosition", "'left 20% 0%'"); |
| |
| style.backgroundPosition = "center right top 20px"; |
| shouldBe("style.backgroundPosition", "'left 20% top'"); |
| shouldBe("computedStyle.backgroundPosition", "'left 20% 0%'"); |
| |
| style.backgroundPosition = "center 10px center 10px"; |
| shouldBe("style.backgroundPosition", "'left 20% top'"); |
| shouldBe("computedStyle.backgroundPosition", "'left 20% 0%'"); |
| |
| style.backgroundPosition = "top center center"; |
| shouldBe("style.backgroundPosition", "'left 20% top'"); |
| shouldBe("computedStyle.backgroundPosition", "'left 20% 0%'"); |
| |
| style.backgroundPosition = "center 10px center"; |
| shouldBe("style.backgroundPosition", "'left 20% top'"); |
| shouldBe("computedStyle.backgroundPosition", "'left 20% 0%'"); |
| |
| style.backgroundPosition = "center center 10px"; |
| shouldBe("style.backgroundPosition", "'left 20% top'"); |
| shouldBe("computedStyle.backgroundPosition", "'left 20% 0%'"); |
| |
| style.backgroundPosition = "center 0px left 20%"; |
| shouldBe("style.backgroundPosition", "'left 20% top'"); |
| shouldBe("computedStyle.backgroundPosition", "'left 20% 0%'"); |
| |
| style.backgroundPosition = "left center top"; |
| shouldBe("style.backgroundPosition", "'left 20% top'"); |
| shouldBe("computedStyle.backgroundPosition", "'left 20% 0%'"); |
| |
| style.backgroundPosition = "center center center"; |
| shouldBe("style.backgroundPosition", "'left 20% top'"); |
| shouldBe("computedStyle.backgroundPosition", "'left 20% 0%'"); |
| |
| style.backgroundPosition = "top left 50% 50%"; |
| shouldBe("style.backgroundPosition", "'left 20% top'"); |
| shouldBe("computedStyle.backgroundPosition", "'left 20% 0%'"); |
| |
| style.backgroundPosition = "center center center center"; |
| shouldBe("style.backgroundPosition", "'left 20% top'"); |
| shouldBe("computedStyle.backgroundPosition", "'left 20% 0%'"); |
| |
| debug("background-position with CSS3 four values and comma"); |
| style.backgroundImage = "url(resources/diamond.png), url(resources/ring.png)"; |
| |
| style.backgroundPosition = "center, left bottom 20px"; |
| shouldBe("style.backgroundPosition", "'center center, left bottom 20px'"); |
| shouldBe("computedStyle.backgroundPosition", "'50% 50%, 0% bottom 20px'"); |
| |
| style.backgroundPosition = "right 20px bottom 20px, center left"; |
| shouldBe("style.backgroundPosition", "'right 20px bottom 20px, left center'"); |
| shouldBe("computedStyle.backgroundPosition", "'right 20px bottom 20px, 0% 50%'"); |
| |
| style.backgroundPosition = "left 10px top 15px, right 20% bottom 20px"; |
| shouldBe("style.backgroundPosition", "'left 10px top 15px, right 20% bottom 20px'"); |
| shouldBe("computedStyle.backgroundPosition", "'left 10px top 15px, right 20% bottom 20px'"); |
| |
| style.backgroundPosition = "left 10% top, top 0px right"; |
| shouldBe("style.backgroundPosition", "'left 10% top, right top 0px'"); |
| shouldBe("computedStyle.backgroundPosition", "'left 10% 0%, 100% top 0px'"); |
| |
| style.backgroundPosition = "right top 15px, bottom right 20px"; |
| shouldBe("style.backgroundPosition", "'right top 15px, right 20px bottom'"); |
| shouldBe("computedStyle.backgroundPosition", "'100% top 15px, right 20px 100%'"); |
| |
| debug("background-position with invalid CSS3 four values and comma, no change expected"); |
| style.backgroundPosition = "right top 15px, left right 20px"; |
| shouldBe("style.backgroundPosition", "'right top 15px, right 20px bottom'"); |
| shouldBe("computedStyle.backgroundPosition", "'100% top 15px, right 20px 100%'"); |
| |
| style.backgroundPosition = "right left 15px, left bottom 20px"; |
| shouldBe("style.backgroundPosition", "'right top 15px, right 20px bottom'"); |
| shouldBe("computedStyle.backgroundPosition", "'100% top 15px, right 20px 100%'"); |
| |
| style.backgroundPosition = "solid, left bottom 20px"; |
| shouldBe("style.backgroundPosition", "'right top 15px, right 20px bottom'"); |
| shouldBe("computedStyle.backgroundPosition", "'100% top 15px, right 20px 100%'"); |
| |
| debug("background-position inside the background shorthand"); |
| style.background = "top 10% left 30% / 10em gray round fixed border-box"; |
| shouldBe("style.background", "'left 30% top 10% / 10em round fixed border-box border-box gray'"); |
| shouldBe("computedStyle.background", "'rgb(128, 128, 128) none round fixed left 30% top 10% / 160px border-box border-box'"); |
| |
| style.background = "right top 15px / 10em gray round fixed border-box"; |
| shouldBe("style.background", "'right top 15px / 10em round fixed border-box border-box gray'"); |
| shouldBe("computedStyle.background", "'rgb(128, 128, 128) none round fixed 100% top 15px / 160px border-box border-box'"); |
| |
| style.background = "left 10px center / 10em gray round fixed border-box"; |
| shouldBe("style.background", "'left 10px center / 10em round fixed border-box border-box gray'"); |
| shouldBe("computedStyle.background", "'rgb(128, 128, 128) none round fixed left 10px 50% / 160px border-box border-box'"); |
| |
| style.background = "left 10px center round fixed border-box"; |
| shouldBe("style.background", "'left 10px center round fixed border-box border-box'"); |
| shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none round fixed left 10px 50% / auto border-box border-box'"); |
| |
| style.background = "center top 20px round fixed border-box"; |
| shouldBe("style.background", "'center top 20px round fixed border-box border-box'"); |
| shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none round fixed 50% top 20px / auto border-box border-box'"); |
| |
| style.background = "top 20px center round fixed border-box"; |
| shouldBe("style.background", "'center top 20px round fixed border-box border-box'"); |
| shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none round fixed 50% top 20px / auto border-box border-box'"); |
| |
| style.background = "top center round fixed border-box"; |
| shouldBe("style.background", "'center top round fixed border-box border-box'"); |
| shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none round fixed 50% 0% / auto border-box border-box'"); |
| |
| style.background = "50px 60px / 50px round fixed border-box"; |
| shouldBe("style.background", "'50px 60px / 50px round fixed border-box border-box'"); |
| shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none round fixed 50px 60px / 50px border-box border-box'"); |
| |
| style.background = "50px / 50px round fixed border-box"; |
| shouldBe("style.background", "'50px center / 50px round fixed border-box border-box'"); |
| shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none round fixed 50px 50% / 50px border-box border-box'"); |
| |
| style.background = "left top 60px / 50px round fixed border-box"; |
| shouldBe("style.background", "'left top 60px / 50px round fixed border-box border-box'"); |
| shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none round fixed 0% top 60px / 50px border-box border-box'"); |
| |
| style.background = "left -20px top 60px / 50px round fixed border-box"; |
| shouldBe("style.background", "'left -20px top 60px / 50px round fixed border-box border-box'"); |
| shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none round fixed left -20px top 60px / 50px border-box border-box'"); |
| |
| style.background = "border-box left 20px top / 50px round fixed"; |
| shouldBe("style.background", "'left 20px top / 50px round fixed border-box border-box'"); |
| shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none round fixed left 20px 0% / 50px border-box border-box'"); |
| |
| style.background = "border-box round fixed left 20px top / 50px"; |
| shouldBe("style.background", "'left 20px top / 50px round fixed border-box border-box'"); |
| shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none round fixed left 20px 0% / 50px border-box border-box'"); |
| |
| style.background = "border-box round fixed left 20px top 40px / 50px"; |
| shouldBe("style.background", "'left 20px top 40px / 50px round fixed border-box border-box'"); |
| shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none round fixed left 20px top 40px / 50px border-box border-box'"); |
| |
| style.background = "border-box round fixed left 20px top 40px"; |
| shouldBe("style.background", "'left 20px top 40px round fixed border-box border-box'"); |
| shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none round fixed left 20px top 40px / auto border-box border-box'"); |
| |
| style.background = "top 10% left 30% gray round fixed border-box"; |
| shouldBe("style.background", "'left 30% top 10% round fixed border-box border-box gray'"); |
| shouldBe("computedStyle.background", "'rgb(128, 128, 128) none round fixed left 30% top 10% / auto border-box border-box'"); |
| |
| debug("background-position inside the background shorthand, some invalid cases, no changes expected"); |
| style.background = ""; |
| style.background = "top 10% left 30% 50% gray round fixed border-box"; |
| shouldBe("style.background", "''"); |
| // This is the default computed style. |
| shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box'"); |
| |
| style.background = "top 10% solid 30% gray round fixed border-box"; |
| shouldBe("style.background", "''"); |
| shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box'"); |
| |
| style.background = "top 10% left round gray round fixed border-box"; |
| shouldBe("style.background", "''"); |
| shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box'"); |
| |
| style.background = "top 10% top 30% gray round fixed border-box"; |
| shouldBe("style.background", "''"); |
| shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box'"); |
| |
| style.background = "center center center / 10em gray round fixed border-box"; |
| shouldBe("style.background", "''"); |
| shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box'"); |
| |
| style.background = "center center 30px / 10em gray round fixed border-box"; |
| shouldBe("style.background", "''"); |
| shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box'"); |
| |
| style.background = "top center left / 10em gray round fixed border-box"; |
| shouldBe("style.background", "''"); |
| shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box'"); |
| |
| style.background = "50% left / 10em gray round fixed border-box"; |
| shouldBe("style.background", "''"); |
| shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box'"); |
| |
| style.background = "solid / 10em gray round fixed border-box"; |
| shouldBe("style.background", "''"); |
| shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box'"); |
| |
| style.background = "top 10% left 20px 50% 50px gray round fixed border-box"; |
| shouldBe("style.background", "''"); |
| shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box'"); |
| |
| style.background = "20px 20px 30px / 40px gray round fixed border-box"; |
| shouldBe("style.background", "''"); |
| shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box'"); |
| |
| style.background = "20px 20px 30px 60px / 40px gray round fixed border-box"; |
| shouldBe("style.background", "''"); |
| shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box'"); |
| |
| style.background = "20px 20px 30px 60px 70px / 40px gray round fixed border-box"; |
| shouldBe("style.background", "''"); |
| shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box'"); |
| |
| style.background = "20px 20px 30px / 40px gray top left round fixed border-box"; |
| shouldBe("style.background", "''"); |
| shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box'"); |
| |
| document.body.removeChild(testContainer); |
| </script> |
| <script src="../../resources/js-test-post.js"></script> |
| </body> |
| </html> |
