diff options
Diffstat (limited to 'layout/inspector/tests/chrome/test_CSSStyleRule_querySelectorAll.html')
-rw-r--r-- | layout/inspector/tests/chrome/test_CSSStyleRule_querySelectorAll.html | 121 |
1 files changed, 121 insertions, 0 deletions
diff --git a/layout/inspector/tests/chrome/test_CSSStyleRule_querySelectorAll.html b/layout/inspector/tests/chrome/test_CSSStyleRule_querySelectorAll.html new file mode 100644 index 0000000000..dcddc5744b --- /dev/null +++ b/layout/inspector/tests/chrome/test_CSSStyleRule_querySelectorAll.html @@ -0,0 +1,121 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <title>Test CSSStyleRule::QuerySelectorAll</title> + <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script> + <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css"/> + <style> + .test-simple { + } + .test-nested-parent { + .test-nested-child { + .test-nested-and-non-nested { + } + } + } + .test-nested-and-non-nested { + } + .test-no-match { + } + </style> + <script> + SimpleTest.waitForExplicitFinish(); + addLoadEvent(doTest); + + function doTest() { + let { cssRules } = document.styleSheets[1]; + + info("Testing simple case"); + let rule = cssRules[0]; + let result = rule.querySelectorAll(document); + is(result.length, 2, `2 elements are matching "${rule.selectorText}"`); + is( + result[0].id, + "a", + `Got expected id for first element matching "${rule.selectorText}"` + ); + is( + result[1].id, + "b", + `Got expected id for second element matching "${rule.selectorText}"` + ); + + info("Testing nested rule"); + rule = cssRules[1].cssRules[0]; + result = rule.querySelectorAll(document); + is(result.length, 1, `1 element is matching "${rule.selectorText}"`); + is( + result[0].id, + "d", + `Got expected id for element matching "${rule.selectorText}"` + ); + + info("Testing multi-level deep nested rule"); + rule = cssRules[1].cssRules[0].cssRules[0]; + result = rule.querySelectorAll(document); + // Check that we're not retrieving `f`, as the rule selectorText is `.test-nested-and-non-nested`, + // but it is nested inside `.test-nested-child`. + is(result.length, 1, `1 element is matching "${rule.selectorText}"`); + is( + result[0].id, + "e", + `Got expected id for element matching "${rule.selectorText}"` + ); + + info( + "Testing rule matching multiple elements with the same class, some nested, some not" + ); + rule = cssRules[2]; + result = rule.querySelectorAll(document); + is(result.length, 2, `2 elements are matching "${rule.selectorText}"`); + is( + result[0].id, + "e", + `Got expected id for first element matching "${rule.selectorText}"` + ); + is( + result[1].id, + "f", + `Got expected id for second element matching "${rule.selectorText}"` + ); + + info("Testing that search results are limited by the passed root node"); + rule = cssRules[2]; + result = rule.querySelectorAll(document.querySelector("#c")); + is( + result.length, + 1, + `An element is matching "${rule.selectorText}" in #c` + ); + is( + result[0].id, + "e", + `Got expected id for element matching "${rule.selectorText}"` + ); + + info("Testing rule with no matching elements"); + rule = cssRules[3]; + result = rule.querySelectorAll(document); + is(result.length, 0, `No elements matching "${rule.selectorText}"`); + + SimpleTest.finish(); + } + </script> + </head> + <body> + <h1>Test CSSStyleRule::QuerySelectorAll</h1> + <p id="display"></p> + <div id="content" style="display: none"> + <div id="a" class="test-simple"></div> + <div id="b" class="test-simple"></div> + <div id="c" class="test-nested-parent"> + <span id="d" class="test-nested-child"> + <b id="e" class="test-nested-and-non-nested"></b> + </span> + </div> + <b id="f" class="test-nested-and-non-nested"></b> + </div> + <pre id="test"></pre> + </body> +</html> |