browser_canvasframe_helper_01.js (5735B)
1 /* Any copyright is dedicated to the Public Domain. 2 http://creativecommons.org/publicdomain/zero/1.0/ */ 3 4 "use strict"; 5 6 // Simple CanvasFrameAnonymousContentHelper tests. 7 8 const TEST_URL = 9 "data:text/html;charset=utf-8,CanvasFrameAnonymousContentHelper test"; 10 11 add_task(async function () { 12 const tab = await addTab(TEST_URL); 13 14 await SpecialPowers.spawn(tab.linkedBrowser, [], async function () { 15 const { require } = ChromeUtils.importESModule( 16 "resource://devtools/shared/loader/Loader.sys.mjs" 17 ); 18 const { 19 HighlighterEnvironment, 20 } = require("resource://devtools/server/actors/highlighters.js"); 21 const { 22 CanvasFrameAnonymousContentHelper, 23 } = require("resource://devtools/server/actors/highlighters/utils/markup.js"); 24 const doc = content.document; 25 26 const nodeBuilder = () => { 27 const root = doc.createElement("div"); 28 const child = doc.createElement("div"); 29 child.style = "width:200px;height:200px;background:red;"; 30 child.id = "child-element"; 31 child.className = "child-element"; 32 child.textContent = "test element"; 33 root.appendChild(child); 34 return root; 35 }; 36 37 info("Building the helper"); 38 const env = new HighlighterEnvironment(); 39 env.initFromWindow(doc.defaultView); 40 const helper = new CanvasFrameAnonymousContentHelper(env, nodeBuilder, { 41 contentRootHostClassName: "testHighlighter", 42 }); 43 await helper.initialize(); 44 45 ok( 46 content.AnonymousContent.isInstance(helper.content), 47 "The helper owns the AnonymousContent object" 48 ); 49 ok( 50 helper.getTextContentForElement, 51 "The helper has the getTextContentForElement method" 52 ); 53 ok( 54 helper.setTextContentForElement, 55 "The helper has the setTextContentForElement method" 56 ); 57 ok( 58 helper.setAttributeForElement, 59 "The helper has the setAttributeForElement method" 60 ); 61 ok( 62 helper.getAttributeForElement, 63 "The helper has the getAttributeForElement method" 64 ); 65 ok( 66 helper.removeAttributeForElement, 67 "The helper has the removeAttributeForElement method" 68 ); 69 ok( 70 helper.addEventListenerForElement, 71 "The helper has the addEventListenerForElement method" 72 ); 73 ok( 74 helper.removeEventListenerForElement, 75 "The helper has the removeEventListenerForElement method" 76 ); 77 ok(helper.getElement, "The helper has the getElement method"); 78 ok(helper.scaleRootElement, "The helper has the scaleRootElement method"); 79 80 is( 81 helper.getTextContentForElement("child-element"), 82 "test element", 83 "The text content was retrieve correctly" 84 ); 85 is( 86 helper.getAttributeForElement("child-element", "id"), 87 "child-element", 88 "The ID attribute was retrieve correctly" 89 ); 90 is( 91 helper.getAttributeForElement("child-element", "class"), 92 "child-element", 93 "The class attribute was retrieve correctly" 94 ); 95 ok( 96 helper.content.root.host.classList.contains("testHighlighter"), 97 `The content root host has the class we passed in the contentRootHostClassName option (Got ${JSON.stringify([...helper.content.root.host.classList])})` 98 ); 99 100 const el = helper.getElement("child-element"); 101 ok(el, "The DOMNode-like element was created"); 102 103 is( 104 el.getTextContent(), 105 "test element", 106 "The text content was retrieve correctly" 107 ); 108 is( 109 el.getAttribute("id"), 110 "child-element", 111 "The ID attribute was retrieve correctly" 112 ); 113 is( 114 el.getAttribute("class"), 115 "child-element", 116 "The class attribute was retrieve correctly" 117 ); 118 119 info("Test the toggle API"); 120 el.classList.toggle("test"); // This will set the class 121 is( 122 el.getAttribute("class"), 123 "child-element test", 124 "After toggling the class 'test', the class attribute contained the 'test' class" 125 ); 126 el.classList.toggle("test"); // This will remove the class 127 is( 128 el.getAttribute("class"), 129 "child-element", 130 "After toggling the class 'test' again, the class attribute removed the 'test' class" 131 ); 132 el.classList.toggle("test", true); // This will set the class 133 is( 134 el.getAttribute("class"), 135 "child-element test", 136 "After toggling the class 'test' again and keeping force=true, the class attribute added the 'test' class" 137 ); 138 el.classList.toggle("test", true); // This will keep the class set 139 is( 140 el.getAttribute("class"), 141 "child-element test", 142 "After toggling the class 'test' again and keeping force=true,the class attribute contained the 'test' class" 143 ); 144 el.classList.toggle("test", false); // This will remove the class 145 is( 146 el.getAttribute("class"), 147 "child-element", 148 "After toggling the class 'test' again and keeping force=false, the class attribute removed the 'test' class" 149 ); 150 el.classList.toggle("test", false); // This will keep the class removed 151 is( 152 el.getAttribute("class"), 153 "child-element", 154 "After toggling the class 'test' again and keeping force=false, the class attribute removed the 'test' class" 155 ); 156 157 info("Destroying the helper"); 158 helper.destroy(); 159 env.destroy(); 160 161 ok( 162 !helper.getTextContentForElement("child-element"), 163 "No text content was retrieved after the helper was destroyed" 164 ); 165 ok( 166 !helper.getAttributeForElement("child-element", "id"), 167 "No ID attribute was retrieved after the helper was destroyed" 168 ); 169 ok( 170 !helper.getAttributeForElement("child-element", "class"), 171 "No class attribute was retrieved after the helper was destroyed" 172 ); 173 }); 174 175 gBrowser.removeCurrentTab(); 176 });