test_CSSStyleRule_querySelectorAll.html (3866B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>Test CSSStyleRule::QuerySelectorAll</title> 6 <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script> 7 <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css"/> 8 <style> 9 .test-simple { 10 } 11 .test-nested-parent { 12 .test-nested-child { 13 .test-nested-and-non-nested { 14 } 15 } 16 } 17 .test-nested-and-non-nested { 18 } 19 .test-no-match { 20 } 21 </style> 22 <script> 23 SimpleTest.waitForExplicitFinish(); 24 addLoadEvent(doTest); 25 26 function doTest() { 27 let { cssRules } = document.styleSheets[1]; 28 29 info("Testing simple case"); 30 let rule = cssRules[0]; 31 let result = rule.querySelectorAll(document); 32 is(result.length, 2, `2 elements are matching "${rule.selectorText}"`); 33 is( 34 result[0].id, 35 "a", 36 `Got expected id for first element matching "${rule.selectorText}"` 37 ); 38 is( 39 result[1].id, 40 "b", 41 `Got expected id for second element matching "${rule.selectorText}"` 42 ); 43 44 info("Testing nested rule"); 45 rule = cssRules[1].cssRules[0]; 46 result = rule.querySelectorAll(document); 47 is(result.length, 1, `1 element is matching "${rule.selectorText}"`); 48 is( 49 result[0].id, 50 "d", 51 `Got expected id for element matching "${rule.selectorText}"` 52 ); 53 54 info("Testing multi-level deep nested rule"); 55 rule = cssRules[1].cssRules[0].cssRules[0]; 56 result = rule.querySelectorAll(document); 57 // Check that we're not retrieving `f`, as the rule selectorText is `.test-nested-and-non-nested`, 58 // but it is nested inside `.test-nested-child`. 59 is(result.length, 1, `1 element is matching "${rule.selectorText}"`); 60 is( 61 result[0].id, 62 "e", 63 `Got expected id for element matching "${rule.selectorText}"` 64 ); 65 66 info( 67 "Testing rule matching multiple elements with the same class, some nested, some not" 68 ); 69 rule = cssRules[2]; 70 result = rule.querySelectorAll(document); 71 is(result.length, 2, `2 elements are matching "${rule.selectorText}"`); 72 is( 73 result[0].id, 74 "e", 75 `Got expected id for first element matching "${rule.selectorText}"` 76 ); 77 is( 78 result[1].id, 79 "f", 80 `Got expected id for second element matching "${rule.selectorText}"` 81 ); 82 83 info("Testing that search results are limited by the passed root node"); 84 rule = cssRules[2]; 85 result = rule.querySelectorAll(document.querySelector("#c")); 86 is( 87 result.length, 88 1, 89 `An element is matching "${rule.selectorText}" in #c` 90 ); 91 is( 92 result[0].id, 93 "e", 94 `Got expected id for element matching "${rule.selectorText}"` 95 ); 96 97 info("Testing rule with no matching elements"); 98 rule = cssRules[3]; 99 result = rule.querySelectorAll(document); 100 is(result.length, 0, `No elements matching "${rule.selectorText}"`); 101 102 SimpleTest.finish(); 103 } 104 </script> 105 </head> 106 <body> 107 <h1>Test CSSStyleRule::QuerySelectorAll</h1> 108 <p id="display"></p> 109 <div id="content" style="display: none"> 110 <div id="a" class="test-simple"></div> 111 <div id="b" class="test-simple"></div> 112 <div id="c" class="test-nested-parent"> 113 <span id="d" class="test-nested-child"> 114 <b id="e" class="test-nested-and-non-nested"></b> 115 </span> 116 </div> 117 <b id="f" class="test-nested-and-non-nested"></b> 118 </div> 119 <pre id="test"></pre> 120 </body> 121 </html>