browser_markup_pseudo.js (5521B)
1 /* Any copyright is dedicated to the Public Domain. 2 http://creativecommons.org/publicdomain/zero/1.0/ */ 3 4 "use strict"; 5 6 const TEST_URL = URL_ROOT + "doc_markup_pseudo.html"; 7 8 // Test that reloading the page when an element with sibling pseudo elements is selected 9 // does not result in missing elements in the markup-view after reload. 10 // Non-regression test for bug 1506792. 11 add_task(async function testReload() { 12 const { inspector } = await openInspectorForURL(TEST_URL); 13 14 await selectNode("div", inspector); 15 16 info("Check that the markup-view shows the expected nodes before reload"); 17 await checkMarkupView(inspector); 18 19 await reloadBrowser(); 20 21 info("Check that the markup-view shows the expected nodes after reload"); 22 await checkMarkupView(inspector); 23 }); 24 25 // Test ::before::marker 26 add_task(async function testMarkerOnPseudo() { 27 const { inspector } = await openInspectorForURL(TEST_URL); 28 29 await selectNode("ul", inspector); 30 31 const ulNodeFront = await getNodeFront("ul", inspector); 32 const ulContainer = await getContainerForNodeFront(ulNodeFront, inspector); 33 is( 34 ulContainer.expander.style.visibility, 35 "visible", 36 "Expander button is visible for <ul>" 37 ); 38 39 info("Click on the <ul> parent expander and wait for children"); 40 await toggleContainerByClick(inspector, ulContainer); 41 ok(ulContainer.expanded, "Parent UL container is expanded"); 42 43 const { nodes: ulChildren } = await inspector.walker.children(ulNodeFront); 44 const ulBeforeNodeFront = ulChildren[0]; 45 is( 46 ulBeforeNodeFront.displayName, 47 "::before", 48 "Got expexected ul::before pseudo element" 49 ); 50 const ulBeforeContainer = await getContainerForNodeFront( 51 ulBeforeNodeFront, 52 inspector 53 ); 54 is( 55 ulBeforeContainer.expander.style.visibility, 56 "visible", 57 "Expander button is visible for ul::before" 58 ); 59 60 info("Click on the ul::before expander and wait for children"); 61 await toggleContainerByClick(inspector, ulBeforeContainer); 62 const { nodes: ulBeforeChildren } = 63 await inspector.walker.children(ulBeforeNodeFront); 64 const ulBeforeMarkerNodeFront = ulBeforeChildren[0]; 65 is( 66 ulBeforeMarkerNodeFront.displayName, 67 "::marker", 68 "Got expexected ul::before::marker pseudo element" 69 ); 70 const ulBeforeMarkerContainer = await getContainerForNodeFront( 71 ulBeforeMarkerNodeFront, 72 inspector 73 ); 74 ok(!!ulBeforeMarkerContainer, "Got a container for ::before::marker"); 75 is( 76 ulBeforeMarkerContainer.expander.style.visibility, 77 "hidden", 78 "Expander button is not visible for ul::before::marker" 79 ); 80 81 const ulAfterNodeFront = ulChildren[3]; 82 is( 83 ulAfterNodeFront.displayName, 84 "::after", 85 "Got expexected ul::after pseudo element" 86 ); 87 const ulAfterContainer = await getContainerForNodeFront( 88 ulAfterNodeFront, 89 inspector 90 ); 91 is( 92 ulAfterContainer.expander.style.visibility, 93 "hidden", 94 "Expander button is not visible for ul::after" 95 ); 96 97 await selectNode("dialog", inspector); 98 99 const dialogNodeFront = await getNodeFront("dialog", inspector); 100 const dialogContainer = await getContainerForNodeFront( 101 dialogNodeFront, 102 inspector 103 ); 104 is( 105 ulContainer.expander.style.visibility, 106 "visible", 107 "Expander button is visible for <dialog>" 108 ); 109 110 info("Click on the <dialog> parent expander and wait for children"); 111 await toggleContainerByClick(inspector, dialogContainer); 112 113 let tree = ` 114 html 115 head!ignore-children 116 body 117 article!ignore-children 118 ul!ignore-children 119 dialog 120 p 121 `.trim(); 122 await assertMarkupViewAsTree(tree, "html", inspector); 123 124 info("Show the dialog modal and wait for mutation"); 125 let onMarkupMutation = inspector.once("markupmutation"); 126 await SpecialPowers.spawn(gBrowser.selectedBrowser, [], () => { 127 content.document.querySelector("dialog").showModal(); 128 }); 129 await onMarkupMutation; 130 131 info( 132 "Check that both the ::backdrop and ::before element are now displayed under <dialog>" 133 ); 134 tree = ` 135 html 136 head!ignore-children 137 body 138 article!ignore-children 139 ul!ignore-children 140 dialog 141 ::backdrop 142 ::before 143 p 144 `.trim(); 145 await assertMarkupViewAsTree(tree, "html", inspector); 146 147 info("Hide the dialog modal and wait for mutation"); 148 onMarkupMutation = inspector.once("markupmutation"); 149 await SpecialPowers.spawn(gBrowser.selectedBrowser, [], () => { 150 content.document.querySelector("dialog").close(); 151 }); 152 await onMarkupMutation; 153 154 info( 155 "Check that both the <dialog> ::backdrop and ::before children gets removed" 156 ); 157 tree = ` 158 html 159 head!ignore-children 160 body 161 article!ignore-children 162 ul!ignore-children 163 dialog 164 p 165 `.trim(); 166 await assertMarkupViewAsTree(tree, "html", inspector); 167 }); 168 169 async function checkMarkupView(inspector) { 170 const articleContainer = await getContainerForSelector("article", inspector); 171 ok(articleContainer, "The parent <article> element was found"); 172 173 const childrenContainers = articleContainer.getChildContainers(); 174 const beforeNode = childrenContainers[0].node; 175 const divNode = childrenContainers[1].node; 176 const afterNode = childrenContainers[2].node; 177 178 is( 179 beforeNode.displayName, 180 "::before", 181 "The first child is the ::before pseudo element" 182 ); 183 is(divNode.displayName, "div", "The second child is the <div> element"); 184 is( 185 afterNode.displayName, 186 "::after", 187 "The last child is the ::after pseudo element" 188 ); 189 }