test_getElementsWithGrid.html (5666B)
1 <!doctype html> 2 <html id="root" class="g"> 3 <head> 4 <meta charset="utf-8"> 5 <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script> 6 <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css" /> 7 <style> 8 .no-match { 9 display: block; 10 } 11 .g { 12 display: grid; 13 } 14 .s { 15 display: subgrid; 16 } 17 .gi { 18 display: inline-grid; 19 } 20 21 .pseudo-grid::after { 22 content: "after"; 23 display: grid; 24 } 25 26 #a_display_contents_element { 27 display: contents; 28 } 29 </style> 30 31 <script> 32 "use strict"; 33 34 SimpleTest.waitForExplicitFinish(); 35 36 function testTargetsAreInElements(targets, elements) { 37 let c = 0; 38 for (let target of targets) { 39 if (c >= elements.length) { 40 ok(false, "We shouldn't have more targets than elements found."); 41 break; 42 } 43 let element = elements[c]; 44 let isMatching = target.assert ? target.assert(element) : (target.id == element.id); 45 let test_function = (target.todo ? todo : ok); 46 47 test_function(isMatching, "Should find " + target.message + "."); 48 49 // Only move to the next element in the elements if this one was a match. 50 // This handles the case of an unexpected element showing up, and prevents 51 // cascading errors in that case. If we've instead screwed up the target 52 // list, then we will get cascading errors. 53 if (isMatching) { 54 ++c; 55 } 56 } 57 58 // Make sure we don't have any extra elements after going through all the targets. 59 is(c, elements.length, "We shouldn't have more elements than we have targets."); 60 } 61 62 function runTests() { 63 // Part 1: Look for all the grid elements starting from the document root. 64 let elementsFromRoot = document.documentElement.getElementsWithGrid(); 65 66 // Check that the expected elements were returned. 67 // Targets are provided in order we expect them to appear. 68 // Has to end in a non-todo element in order for testing logic to work. 69 let targetsFromRoot = [ 70 {id: "root", message: "root with display:grid"}, 71 {id: "a", message: "'plain' grid container with display:grid"}, 72 {id: "b", message: "display:subgrid inside display:grid (to be fixed in Bug 1240834)", todo: true}, 73 {id: "c", message: "'plain' grid container with display:inline-grid"}, 74 {id: "d", message: "display:subgrid inside display:inline-grid (to be fixed in Bug 1240834)", todo: true}, 75 {id: "e", message: "grid container with visibility:hidden"}, 76 {id: "f", message: "grid container inside an element"}, 77 {id: "g", message: "overflow:scroll grid container"}, 78 {id: "h", message: "button as a grid container"}, 79 {id: "i", message: "fieldset as a grid container"}, 80 {id: "k1", message: "grid container containing a grid container"}, 81 {id: "k2", message: "grid container inside a grid container"}, 82 {id: "l", message: "grid container inside a display: contents element"}, 83 {id: "m-in-shadow", message: "grid container inside shadow DOM"}, 84 { 85 assert: element => element.tagName === "_moz_generated_content_after" && element.parentElement.id === "n", 86 message: "grid container inside pseudo element" 87 }, 88 ]; 89 is(elementsFromRoot.length, 13, "Found expected number of elements within document root."); 90 testTargetsAreInElements(targetsFromRoot, elementsFromRoot); 91 92 93 // Part 2: Look for all the grid elements starting from a non-root element. 94 let elementsFromNonRoot = document.getElementById("a_non_root_element").getElementsWithGrid(); 95 96 let targetsFromNonRoot = [ 97 {id: "f", message: "grid container inside an element (from non-root element)"}, 98 ]; 99 is(elementsFromNonRoot.length, 1, "Found expected number of elements from non-root element."); 100 testTargetsAreInElements(targetsFromNonRoot, elementsFromNonRoot); 101 102 // Part 3: Look for all the grid elements starting from a non-root, display contents element. 103 const elementsFromNonRootDisplayContent = document.getElementById("a_display_contents_element").getElementsWithGrid(); 104 const targetsFromDisplayContentsRoot = [ 105 {id: "l", message: "grid container inside a display: contents element"}, 106 ]; 107 is(elementsFromNonRootDisplayContent.length, 1, "Found expected number of elements from non-root element."); 108 testTargetsAreInElements(targetsFromDisplayContentsRoot, elementsFromNonRootDisplayContent); 109 110 SimpleTest.finish(); 111 } 112 </script> 113 <script> 114 // Define custom element 115 class Custom extends HTMLElement { 116 constructor() { 117 super(); 118 const shadow = this.attachShadow({ mode: "open" }); 119 const wrapper = document.createElement("div"); 120 wrapper.setAttribute("id", "m-in-shadow"); 121 wrapper.classList.add("in-shadow"); 122 const style = document.createElement("style"); 123 style.textContent = `.in-shadow { display: grid; }`; 124 shadow.append(style, wrapper); 125 } 126 } 127 128 // Define the new element 129 customElements.define("custom-el", Custom); 130 </script> 131 </head> 132 <body onLoad="runTests();"> 133 134 <div id="a" class="g"> 135 <div class="no-match"></div> 136 <div id="b" class="s"></div> 137 </div> 138 139 <div class="no-match"></div> 140 141 <div id="c" class="gi"> 142 <div id="d" class="s"></div> 143 </div> 144 145 <div id="e" class="g" style="visibility:hidden"></div> 146 147 <div id="a_non_root_element"><div id="f" class="g"></div></div> 148 149 <div class="no-match"></div> 150 151 <div id="g" style="overflow:scroll" class="g"></div> 152 153 <button id="h" class="g"></button> 154 155 <fieldset id="i" class="g"></fieldset> 156 157 <div id="a_display_none_element" style="display:none"><div id="j" class="g"></div></div> 158 159 <div id="k1" class="g"><div id="k2" class="g"></div></div> 160 161 <div id="a_display_contents_element"> 162 <div id="l" class="g"></div> 163 </div> 164 165 <custom-el id="m"></custom-el> 166 167 <div id="n" class="pseudo-grid"></div> 168 169 </body> 170 </html>