test_inspector-pseudoclass-lock.html (5861B)
1 <!DOCTYPE HTML> 2 <html> 3 <!-- 4 https://bugzilla.mozilla.org/show_bug.cgi?id= 5 --> 6 <head> 7 <meta charset="utf-8"> 8 <title>Test for Bug </title> 9 10 <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script> 11 <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css"> 12 <script type="application/javascript" src="inspector-helpers.js"></script> 13 <script type="application/javascript"> 14 "use strict"; 15 16 const { PSEUDO_CLASSES } = require("devtools/shared/css/constants"); 17 18 window.onload = function() { 19 SimpleTest.waitForExplicitFinish(); 20 runNextTest(); 21 }; 22 23 let gInspectee = null; 24 let gWalker = null; 25 26 async function setup() { 27 const url = document.getElementById("inspectorContent").href; 28 const { target, doc } = await attachURL(url); 29 gInspectee = doc; 30 const inspector = await target.getFront("inspector"); 31 ok(inspector.walker, "getWalker() should return an actor."); 32 gWalker = inspector.walker; 33 runNextTest(); 34 } 35 36 function teardown() { 37 gWalker = null; 38 gInspectee = null; 39 } 40 41 function checkChange(change, expectation) { 42 is(change.type, "pseudoClassLock", "Expect a pseudoclass lock change."); 43 const target = change.target; 44 if (expectation.id) { 45 is(target.id, expectation.id, "Expect a change on node id " + expectation.id); 46 } 47 if (expectation.nodeName) { 48 is(target.nodeName, expectation.nodeName, 49 "Expect a change on node name " + expectation.nodeName); 50 } 51 52 is(target.pseudoClassLocks.length, expectation.pseudos.length, 53 "Expect " + expectation.pseudos.length + " pseudoclass locks."); 54 for (let i = 0; i < expectation.pseudos.length; i++) { 55 const pseudo = expectation.pseudos[i]; 56 const enabled = expectation.enabled === undefined ? true : expectation.enabled[i]; 57 ok(target.hasPseudoClassLock(pseudo), "Expect lock: " + pseudo); 58 const rawNode = target.rawNode(); 59 ok(InspectorUtils.hasPseudoClassLock(rawNode, pseudo), 60 "Expect lock in dom: " + pseudo); 61 62 is(rawNode.matches(pseudo), enabled, 63 `Target should match pseudoclass, '${pseudo}', if enabled (with .matches())`); 64 } 65 66 for (const pseudo of PSEUDO_CLASSES) { 67 if (!expectation.pseudos.some(expected => pseudo === expected)) { 68 ok(!target.hasPseudoClassLock(pseudo), "Don't expect lock: " + pseudo); 69 ok(!InspectorUtils.hasPseudoClassLock(target.rawNode(), pseudo), 70 "Don't expect lock in dom: " + pseudo); 71 } 72 } 73 } 74 75 function checkMutations(mutations, expectations) { 76 is(mutations.length, expectations.length, "Should get the right number of mutations."); 77 for (let i = 0; i < mutations.length; i++) { 78 checkChange(mutations[i], expectations[i]); 79 } 80 } 81 82 addTest(function testPseudoClassLock() { 83 let contentNode; 84 let nodeFront; 85 setup(() => { 86 contentNode = gInspectee.querySelector("#b"); 87 return promiseDone(gWalker.querySelector(gWalker.rootNode, "#b").then(front => { 88 nodeFront = front; 89 // Lock the pseudoclass alone, no parents. 90 gWalker.addPseudoClassLock(nodeFront, ":active"); 91 // Expect a single pseudoClassLock mutation. 92 return promiseOnce(gWalker, "mutations"); 93 }).then(mutations => { 94 is(mutations.length, 1, "Should get one mutation"); 95 is(mutations[0].target, nodeFront, "Should be the node we tried to apply to"); 96 checkChange(mutations[0], { 97 id: "b", 98 nodeName: "DIV", 99 pseudos: [":active"], 100 }); 101 }).then(() => { 102 // Now add :hover, this time with parents. 103 gWalker.addPseudoClassLock(nodeFront, ":hover", {parents: true}); 104 return promiseOnce(gWalker, "mutations"); 105 }).then(mutations => { 106 const expectedMutations = [{ 107 id: "b", 108 nodeName: "DIV", 109 pseudos: [":hover", ":active"], 110 }, 111 { 112 id: "longlist", 113 nodeName: "DIV", 114 pseudos: [":hover"], 115 }, 116 { 117 nodeName: "BODY", 118 pseudos: [":hover"], 119 }, 120 { 121 nodeName: "HTML", 122 pseudos: [":hover"], 123 }]; 124 checkMutations(mutations, expectedMutations); 125 }).then(() => { 126 // Now remove the :hover on all parents 127 gWalker.removePseudoClassLock(nodeFront, ":hover", {parents: true}); 128 return promiseOnce(gWalker, "mutations"); 129 }).then(mutations => { 130 const expectedMutations = [{ 131 id: "b", 132 nodeName: "DIV", 133 // Should still have :active on the original node. 134 pseudos: [":active"], 135 }, 136 { 137 id: "longlist", 138 nodeName: "DIV", 139 pseudos: [], 140 }, 141 { 142 nodeName: "BODY", 143 pseudos: [], 144 }, 145 { 146 nodeName: "HTML", 147 pseudos: [], 148 }]; 149 checkMutations(mutations, expectedMutations); 150 }).then(() => { 151 gWalker.addPseudoClassLock(nodeFront, ":hover", {enabled: false}); 152 return promiseOnce(gWalker, "mutations"); 153 }).then(mutations => { 154 is(mutations.length, 1, "Should get one mutation"); 155 is(mutations[0].target, nodeFront, "Should be the node we tried to apply to"); 156 checkChange(mutations[0], { 157 id: "b", 158 nodeName: "DIV", 159 pseudos: [":hover", ":active"], 160 enabled: [false, true], 161 }); 162 }).then(() => { 163 // Now shut down the walker and make sure that clears up the remaining lock. 164 return gWalker.release(); 165 }).then(() => { 166 ok(!InspectorUtils.hasPseudoClassLock(contentNode, ":active"), 167 "Pseudoclass should have been removed during destruction."); 168 teardown(); 169 }).then(runNextTest)); 170 }); 171 }); 172 173 </script> 174 </head> 175 <body> 176 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=">Mozilla Bug </a> 177 <a id="inspectorContent" target="_blank" href="inspector-traversal-data.html">Test Document</a> 178 <p id="display"></p> 179 <div id="content" style="display: none"> 180 181 </div> 182 <pre id="test"> 183 </pre> 184 </body> 185 </html>