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