| <!DOCTYPE html> |
| <html xmlns="http://www.w3.org/1999/xhtml"> |
| <head> |
| <script src="../../resources/js-test-pre.js"></script> |
| <style> |
| @namespace uh url(http://www.w3.org/1999/xhtml); |
| #root div { |
| background-color: rgb(1, 2, 3); |
| color: rgb(1, 2, 3); |
| } |
| #root |div { |
| background-color: rgb(4, 5, 6); |
| } |
| #root uh|div { |
| color: rgb(4, 5, 6); |
| } |
| </style> |
| </head> |
| <body> |
| <div id="root" style="display:none;"> |
| <div data-case="1">Default namespace</div> |
| </div> |
| <script> |
| description("Verify that \"|name\" matches the empty namespace while \"*|name\" and \"name\" match any namespace."); |
| |
| var root = document.getElementById("root"); |
| var elementWithoutNamespace = document.createElementNS("", "div"); |
| elementWithoutNamespace.setAttribute("data-case", "2"); |
| root.appendChild(elementWithoutNamespace); |
| |
| function test(selector, expectedCases) |
| { |
| shouldBe('root.querySelectorAll("' + selector + '").length', '' + expectedCases.length); |
| let queryResult = root.querySelectorAll(selector); |
| for (let i = 0; i < queryResult.length; ++i) { |
| shouldBeEqualToString('root.querySelectorAll("' + selector + '")[' + i + '].getAttribute("data-case")', '' + expectedCases[i]); |
| } |
| } |
| |
| debug("Trivial Selector used as rightmost"); |
| test("|div", [2]); |
| test("*|div", [1, 2]); |
| test("div", [1, 2]); |
| |
| shouldBeEqualToString('getComputedStyle(document.querySelector("[|data-case=\'1\' i]")).color', 'rgb(4, 5, 6)'); |
| shouldBeEqualToString('getComputedStyle(document.querySelector("[|data-case=\'1\' i]")).backgroundColor', 'rgb(1, 2, 3)'); |
| shouldBeEqualToString('getComputedStyle(document.querySelector("[|data-case=\'2\' i]")).color', 'rgb(1, 2, 3)'); |
| shouldBeEqualToString('getComputedStyle(document.querySelector("[|data-case=\'2\' i]")).backgroundColor', 'rgb(4, 5, 6)'); |
| </script> |
| <script src="../../resources/js-test-post.js"></script> |
| </body> |
| </html> |
