| Test the basic cases of style update for attribute selectors for SVG inside a HTML document. |
| |
| On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE". |
| |
| |
| Initial state does not match anything, there are no attributes on the targets. |
| PASS getComputedStyle(document.querySelectorAll("rect")[0]).backgroundColor is "rgb(255, 255, 255)" |
| PASS getComputedStyle(document.querySelectorAll("rect")[1]).backgroundColor is "rgb(255, 255, 255)" |
| PASS getComputedStyle(document.querySelectorAll("rect")[0]).fillOpacity is "1" |
| PASS getComputedStyle(document.querySelectorAll("rect")[1]).fillOpacity is "1" |
| PASS getComputedStyle(document.querySelectorAll("rect")[0]).color is "rgb(0, 0, 0)" |
| PASS getComputedStyle(document.querySelectorAll("rect")[1]).color is "rgb(0, 0, 0)" |
| Adding "lowercase", the background-color should match. |
| PASS getComputedStyle(document.querySelectorAll("rect")[0]).backgroundColor is "rgb(1, 2, 3)" |
| PASS getComputedStyle(document.querySelectorAll("rect")[1]).backgroundColor is "rgb(1, 2, 3)" |
| PASS getComputedStyle(document.querySelectorAll("rect")[0]).fillOpacity is "1" |
| PASS getComputedStyle(document.querySelectorAll("rect")[1]).fillOpacity is "1" |
| PASS getComputedStyle(document.querySelectorAll("rect")[0]).color is "rgb(0, 0, 0)" |
| PASS getComputedStyle(document.querySelectorAll("rect")[1]).color is "rgb(0, 0, 0)" |
| Removing "lowercase", the background-color should no longer match. |
| PASS getComputedStyle(document.querySelectorAll("rect")[0]).backgroundColor is "rgb(255, 255, 255)" |
| PASS getComputedStyle(document.querySelectorAll("rect")[1]).backgroundColor is "rgb(255, 255, 255)" |
| PASS getComputedStyle(document.querySelectorAll("rect")[0]).fillOpacity is "1" |
| PASS getComputedStyle(document.querySelectorAll("rect")[1]).fillOpacity is "1" |
| PASS getComputedStyle(document.querySelectorAll("rect")[0]).color is "rgb(0, 0, 0)" |
| PASS getComputedStyle(document.querySelectorAll("rect")[1]).color is "rgb(0, 0, 0)" |
| Adding "LOWERCASE", the background-color should not match because SVG elements are XML, their attribute names are case sensitive. |
| PASS getComputedStyle(document.querySelectorAll("rect")[0]).backgroundColor is "rgb(255, 255, 255)" |
| PASS getComputedStyle(document.querySelectorAll("rect")[1]).backgroundColor is "rgb(255, 255, 255)" |
| PASS getComputedStyle(document.querySelectorAll("rect")[0]).fillOpacity is "1" |
| PASS getComputedStyle(document.querySelectorAll("rect")[1]).fillOpacity is "1" |
| PASS getComputedStyle(document.querySelectorAll("rect")[0]).color is "rgb(0, 0, 0)" |
| PASS getComputedStyle(document.querySelectorAll("rect")[1]).color is "rgb(0, 0, 0)" |
| Removing "LOWERCASE", the background-color should no longer match. |
| PASS getComputedStyle(document.querySelectorAll("rect")[0]).backgroundColor is "rgb(255, 255, 255)" |
| PASS getComputedStyle(document.querySelectorAll("rect")[1]).backgroundColor is "rgb(255, 255, 255)" |
| PASS getComputedStyle(document.querySelectorAll("rect")[0]).fillOpacity is "1" |
| PASS getComputedStyle(document.querySelectorAll("rect")[1]).fillOpacity is "1" |
| PASS getComputedStyle(document.querySelectorAll("rect")[0]).color is "rgb(0, 0, 0)" |
| PASS getComputedStyle(document.querySelectorAll("rect")[1]).color is "rgb(0, 0, 0)" |
| Adding "LowerCase", the background-color should not match because SVG elements are XML, their attribute names are case sensitive. |
| PASS getComputedStyle(document.querySelectorAll("rect")[0]).backgroundColor is "rgb(255, 255, 255)" |
| PASS getComputedStyle(document.querySelectorAll("rect")[1]).backgroundColor is "rgb(255, 255, 255)" |
| PASS getComputedStyle(document.querySelectorAll("rect")[0]).fillOpacity is "1" |
| PASS getComputedStyle(document.querySelectorAll("rect")[1]).fillOpacity is "1" |
| PASS getComputedStyle(document.querySelectorAll("rect")[0]).color is "rgb(0, 0, 0)" |
| PASS getComputedStyle(document.querySelectorAll("rect")[1]).color is "rgb(0, 0, 0)" |
| Adding "UPPERCASE", the fill-opacity should match. |
| PASS getComputedStyle(document.querySelectorAll("rect")[0]).backgroundColor is "rgb(255, 255, 255)" |
| PASS getComputedStyle(document.querySelectorAll("rect")[1]).backgroundColor is "rgb(255, 255, 255)" |
| PASS getComputedStyle(document.querySelectorAll("rect")[0]).fillOpacity is "0.5" |
| PASS getComputedStyle(document.querySelectorAll("rect")[1]).fillOpacity is "0.5" |
| PASS getComputedStyle(document.querySelectorAll("rect")[0]).color is "rgb(0, 0, 0)" |
| PASS getComputedStyle(document.querySelectorAll("rect")[1]).color is "rgb(0, 0, 0)" |
| Removing "UPPERCASE", the fill-opacity should no longer match. |
| PASS getComputedStyle(document.querySelectorAll("rect")[0]).backgroundColor is "rgb(255, 255, 255)" |
| PASS getComputedStyle(document.querySelectorAll("rect")[1]).backgroundColor is "rgb(255, 255, 255)" |
| PASS getComputedStyle(document.querySelectorAll("rect")[0]).fillOpacity is "1" |
| PASS getComputedStyle(document.querySelectorAll("rect")[1]).fillOpacity is "1" |
| PASS getComputedStyle(document.querySelectorAll("rect")[0]).color is "rgb(0, 0, 0)" |
| PASS getComputedStyle(document.querySelectorAll("rect")[1]).color is "rgb(0, 0, 0)" |
| Adding "uppercase", the fill-opacity should not match because SVG elements are XML, their attribute names are case sensitive. |
| PASS getComputedStyle(document.querySelectorAll("rect")[0]).backgroundColor is "rgb(255, 255, 255)" |
| PASS getComputedStyle(document.querySelectorAll("rect")[1]).backgroundColor is "rgb(255, 255, 255)" |
| PASS getComputedStyle(document.querySelectorAll("rect")[0]).fillOpacity is "1" |
| PASS getComputedStyle(document.querySelectorAll("rect")[1]).fillOpacity is "1" |
| PASS getComputedStyle(document.querySelectorAll("rect")[0]).color is "rgb(0, 0, 0)" |
| PASS getComputedStyle(document.querySelectorAll("rect")[1]).color is "rgb(0, 0, 0)" |
| Removing "uppercase", the fill-opacity should no longer match. |
| PASS getComputedStyle(document.querySelectorAll("rect")[0]).backgroundColor is "rgb(255, 255, 255)" |
| PASS getComputedStyle(document.querySelectorAll("rect")[1]).backgroundColor is "rgb(255, 255, 255)" |
| PASS getComputedStyle(document.querySelectorAll("rect")[0]).fillOpacity is "1" |
| PASS getComputedStyle(document.querySelectorAll("rect")[1]).fillOpacity is "1" |
| PASS getComputedStyle(document.querySelectorAll("rect")[0]).color is "rgb(0, 0, 0)" |
| PASS getComputedStyle(document.querySelectorAll("rect")[1]).color is "rgb(0, 0, 0)" |
| Adding "UpperCase", the fill-opacity should not match because SVG elements are XML, their attribute names are case sensitive. |
| PASS getComputedStyle(document.querySelectorAll("rect")[0]).backgroundColor is "rgb(255, 255, 255)" |
| PASS getComputedStyle(document.querySelectorAll("rect")[1]).backgroundColor is "rgb(255, 255, 255)" |
| PASS getComputedStyle(document.querySelectorAll("rect")[0]).fillOpacity is "1" |
| PASS getComputedStyle(document.querySelectorAll("rect")[1]).fillOpacity is "1" |
| PASS getComputedStyle(document.querySelectorAll("rect")[0]).color is "rgb(0, 0, 0)" |
| PASS getComputedStyle(document.querySelectorAll("rect")[1]).color is "rgb(0, 0, 0)" |
| Adding "CamelCase", the color should match. |
| PASS getComputedStyle(document.querySelectorAll("rect")[0]).backgroundColor is "rgb(255, 255, 255)" |
| PASS getComputedStyle(document.querySelectorAll("rect")[1]).backgroundColor is "rgb(255, 255, 255)" |
| PASS getComputedStyle(document.querySelectorAll("rect")[0]).fillOpacity is "1" |
| PASS getComputedStyle(document.querySelectorAll("rect")[1]).fillOpacity is "1" |
| PASS getComputedStyle(document.querySelectorAll("rect")[0]).color is "rgb(4, 5, 6)" |
| PASS getComputedStyle(document.querySelectorAll("rect")[1]).color is "rgb(4, 5, 6)" |
| Removing "CamelCase", the color should no longer match. |
| PASS getComputedStyle(document.querySelectorAll("rect")[0]).backgroundColor is "rgb(255, 255, 255)" |
| PASS getComputedStyle(document.querySelectorAll("rect")[1]).backgroundColor is "rgb(255, 255, 255)" |
| PASS getComputedStyle(document.querySelectorAll("rect")[0]).fillOpacity is "1" |
| PASS getComputedStyle(document.querySelectorAll("rect")[1]).fillOpacity is "1" |
| PASS getComputedStyle(document.querySelectorAll("rect")[0]).color is "rgb(0, 0, 0)" |
| PASS getComputedStyle(document.querySelectorAll("rect")[1]).color is "rgb(0, 0, 0)" |
| Adding "camelcase", the color should not match because SVG elements are XML, their attribute names are case sensitive. |
| PASS getComputedStyle(document.querySelectorAll("rect")[0]).backgroundColor is "rgb(255, 255, 255)" |
| PASS getComputedStyle(document.querySelectorAll("rect")[1]).backgroundColor is "rgb(255, 255, 255)" |
| PASS getComputedStyle(document.querySelectorAll("rect")[0]).fillOpacity is "1" |
| PASS getComputedStyle(document.querySelectorAll("rect")[1]).fillOpacity is "1" |
| PASS getComputedStyle(document.querySelectorAll("rect")[0]).color is "rgb(0, 0, 0)" |
| PASS getComputedStyle(document.querySelectorAll("rect")[1]).color is "rgb(0, 0, 0)" |
| Removing "camelcase", the color should no longer match. |
| PASS getComputedStyle(document.querySelectorAll("rect")[0]).backgroundColor is "rgb(255, 255, 255)" |
| PASS getComputedStyle(document.querySelectorAll("rect")[1]).backgroundColor is "rgb(255, 255, 255)" |
| PASS getComputedStyle(document.querySelectorAll("rect")[0]).fillOpacity is "1" |
| PASS getComputedStyle(document.querySelectorAll("rect")[1]).fillOpacity is "1" |
| PASS getComputedStyle(document.querySelectorAll("rect")[0]).color is "rgb(0, 0, 0)" |
| PASS getComputedStyle(document.querySelectorAll("rect")[1]).color is "rgb(0, 0, 0)" |
| Adding "CAMELCASE", the color should not match because SVG elements are XML, their attribute names are case sensitive. |
| PASS getComputedStyle(document.querySelectorAll("rect")[0]).backgroundColor is "rgb(255, 255, 255)" |
| PASS getComputedStyle(document.querySelectorAll("rect")[1]).backgroundColor is "rgb(255, 255, 255)" |
| PASS getComputedStyle(document.querySelectorAll("rect")[0]).fillOpacity is "1" |
| PASS getComputedStyle(document.querySelectorAll("rect")[1]).fillOpacity is "1" |
| PASS getComputedStyle(document.querySelectorAll("rect")[0]).color is "rgb(0, 0, 0)" |
| PASS getComputedStyle(document.querySelectorAll("rect")[1]).color is "rgb(0, 0, 0)" |
| PASS successfullyParsed is true |
| |
| TEST COMPLETE |
| |
