browser_markup_whitespace.js (3895B)
1 /* Any copyright is dedicated to the Public Domain. 2 http://creativecommons.org/publicdomain/zero/1.0/ */ 3 4 "use strict"; 5 6 // Test that whitespace text nodes do show up in the markup-view when needed. 7 8 const TEST_URL = URL_ROOT + "doc_markup_whitespace.html"; 9 10 add_task(async function () { 11 const { inspector } = await openInspectorForURL(TEST_URL); 12 const { markup } = inspector; 13 14 await markup.expandAll(); 15 16 info("Verify the number of child nodes and child elements in body"); 17 18 // Body has 5 element children, but there are 6 text nodes in there too, they come from 19 // the HTML file formatting (spaces and carriage returns). 20 is( 21 await getElementChildNodesCount("body"), 22 11, 23 "The body node has 11 child nodes (includes text nodes)" 24 ); 25 is( 26 await getContentPageElementProperty("body", "childElementCount"), 27 5, 28 "The body node has 5 child elements (only element nodes)" 29 ); 30 31 // In body, there are only block-level elements, so whitespace text nodes do not have 32 // layout, so they should be skipped in the markup-view. 33 info("Check that the body's whitespace text node children aren't shown"); 34 const bodyContainer = markup.getContainer(inspector.selection.nodeFront); 35 let childContainers = bodyContainer.getChildContainers(); 36 is( 37 childContainers.length, 38 5, 39 "Only the element nodes are shown in the markup view" 40 ); 41 42 // div#inline has 3 element children, but there are 4 text nodes in there too, like in 43 // body, they come from spaces and carriage returns in the HTML file. 44 info("Verify the number of child nodes and child elements in div#inline"); 45 is( 46 await getElementChildNodesCount("#inline"), 47 7, 48 "The div#inline node has 7 child nodes (includes text nodes)" 49 ); 50 is( 51 await getContentPageElementProperty("#inline", "childElementCount"), 52 3, 53 "The div#inline node has 3 child elements (only element nodes)" 54 ); 55 56 // Within the inline formatting context in div#inline, the whitespace text nodes between 57 // the images have layout, so they should appear in the markup-view. 58 info("Check that the div#inline's whitespace text node children are shown"); 59 await selectNode("#inline", inspector); 60 let divContainer = markup.getContainer(inspector.selection.nodeFront); 61 childContainers = divContainer.getChildContainers(); 62 is( 63 childContainers.length, 64 5, 65 "Both the element nodes and some text nodes are shown in the markup view" 66 ); 67 68 // div#pre has 2 element children, but there are 3 text nodes in there too, like in 69 // div#inline, they come from spaces and carriage returns in the HTML file. 70 info("Verify the number of child nodes and child elements in div#pre"); 71 is( 72 await getElementChildNodesCount("#pre"), 73 5, 74 "The div#pre node has 5 child nodes (includes text nodes)" 75 ); 76 is( 77 await getContentPageElementProperty("#pre", "childElementCount"), 78 2, 79 "The div#pre node has 2 child elements (only element nodes)" 80 ); 81 82 // Within the inline formatting context in div#pre, the whitespace text nodes between 83 // the images have layout, so they should appear in the markup-view, but since 84 // white-space is set to pre, then the whitespace text nodes before and after the first 85 // and last image should also appear. 86 info("Check that the div#pre's whitespace text node children are shown"); 87 await selectNode("#pre", inspector); 88 divContainer = markup.getContainer(inspector.selection.nodeFront); 89 childContainers = divContainer.getChildContainers(); 90 is( 91 childContainers.length, 92 5, 93 "Both the element nodes and all text nodes are shown in the markup view" 94 ); 95 }); 96 97 function getElementChildNodesCount(selector) { 98 return SpecialPowers.spawn( 99 gBrowser.selectedBrowser, 100 [selector], 101 function (innerSelector) { 102 const node = content.document.querySelector(innerSelector); 103 return node.childNodes.length; 104 } 105 ); 106 }