browser_markup_screenshot_node_shadowdom.js (1202B)
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 = `data:text/html;charset=utf8, 7 <test-component></test-component> 8 <script> 9 'use strict'; 10 customElements.define('test-component', class extends HTMLElement { 11 constructor() { 12 super(); 13 let shadowRoot = this.attachShadow({mode: 'open'}); 14 shadowRoot.innerHTML = 15 '<div style="width:30px;height:30px;background:rgb(0, 128, 0)"></div>'; 16 } 17 }); 18 </script>`; 19 20 // Test that the "Screenshot Node" feature works with a node inside a shadow root. 21 add_task(async function () { 22 const { inspector, toolbox } = await openInspectorForURL(encodeURI(TEST_URL)); 23 24 info("Select the green node"); 25 const greenNode = await getNodeFrontInShadowDom( 26 "div", 27 "test-component", 28 inspector 29 ); 30 await selectNode(greenNode, inspector); 31 32 info("Take a screenshot of the green node and verify it looks as expected"); 33 const greenScreenshot = await takeNodeScreenshot(inspector); 34 await assertSingleColorScreenshotImage(greenScreenshot, 30, 30, { 35 r: 0, 36 g: 128, 37 b: 0, 38 }); 39 40 await toolbox.destroy(); 41 });