browser_markup_template.js (1649B)
1 /* Any copyright is dedicated to the Public Domain. 2 http://creativecommons.org/publicdomain/zero/1.0/ */ 3 4 "use strict"; 5 6 // Test the markup view displaying the content of a <template> tag. 7 8 add_task(async function () { 9 const TEST_URL = 10 `data:text/html;charset=utf-8,` + 11 encodeURIComponent(` 12 <div id="root"> 13 <template> 14 <p>template content</p> 15 </template> 16 17 <div id="template-container" style="border: 1px solid black"></div> 18 </div> 19 <script> 20 "use strict"; 21 22 const template = document.querySelector("template"); 23 const clone = document.importNode(template.content, true); 24 document.querySelector("#template-container").appendChild(clone); 25 </script>`); 26 27 const EXPECTED_TREE = ` 28 root 29 template 30 #document-fragment 31 p 32 template-container 33 p`; 34 35 const { inspector } = await openInspectorForURL(TEST_URL); 36 const { markup } = inspector; 37 38 await assertMarkupViewAsTree(EXPECTED_TREE, "#root", inspector); 39 40 info("Select the p element under the template ."); 41 const templateFront = await getNodeFront("template", inspector); 42 const templateContainer = markup.getContainer(templateFront); 43 const documentFragmentContainer = templateContainer.getChildContainers()[0]; 44 const pContainer = documentFragmentContainer.getChildContainers()[0]; 45 46 await selectNode(pContainer.node, inspector, "no-reason", false); 47 48 const ruleView = inspector.getPanel("ruleview").view; 49 // We only display the style attribute. 50 is( 51 ruleView.element.querySelectorAll(".ruleview-rule").length, 52 1, 53 "No rules are displayed for this p element" 54 ); 55 });