test_styles-modify.html (3283B)
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 {isCssPropertyKnown} = require("devtools/server/actors/css-properties"); 17 18 window.onload = function() { 19 SimpleTest.waitForExplicitFinish(); 20 runNextTest(); 21 }; 22 23 var gWalker = null; 24 var gStyles = null; 25 var gInspectee = null; 26 27 addAsyncTest(async function setup() { 28 const url = document.getElementById("inspectorContent").href; 29 30 const { target, doc } = await attachURL(url); 31 const inspector = await target.getFront("inspector"); 32 gInspectee = doc; 33 34 gWalker = inspector.walker; 35 gStyles = await inspector.getPageStyle(); 36 37 runNextTest(); 38 }); 39 40 addAsyncTest(async function modifyProperties() { 41 const localNode = gInspectee.querySelector("#inheritable-rule-inheritable-style"); 42 43 const node = await gWalker.querySelector(gWalker.rootNode, 44 "#inheritable-rule-inheritable-style"); 45 46 const applied = await gStyles.getApplied(node, 47 { inherited: false, filter: "user" }); 48 49 const elementStyle = applied[0].rule; 50 is(elementStyle.cssText, localNode.style.cssText, "Got expected css text"); 51 52 // Change an existing property... 53 await setProperty(elementStyle, 0, "color", "black"); 54 // Create a new property 55 await setProperty(elementStyle, 1, "background-color", "green"); 56 57 // Create a new property and then change it immediately. 58 await setProperty(elementStyle, 2, "border", "1px solid black"); 59 await setProperty(elementStyle, 2, "border", "2px solid black"); 60 61 is(elementStyle.cssText, 62 "color: black; background-color: green; border: 2px solid black;", 63 "Should have expected cssText"); 64 is(elementStyle.cssText, localNode.style.cssText, 65 "Local node and style front match."); 66 67 // Remove all the properties 68 await removeProperty(elementStyle, 0, "color"); 69 await removeProperty(elementStyle, 0, "background-color"); 70 await removeProperty(elementStyle, 0, "border"); 71 72 is(elementStyle.cssText, "", "Should have expected cssText"); 73 is(elementStyle.cssText, localNode.style.cssText, 74 "Local node and style front match."); 75 76 runNextTest(); 77 }); 78 79 async function setProperty(rule, index, name, value) { 80 const changes = rule.startModifyingProperties(window, isCssPropertyKnown); 81 changes.setProperty(index, name, value); 82 await changes.apply(); 83 } 84 85 async function removeProperty(rule, index, name) { 86 const changes = rule.startModifyingProperties(window, isCssPropertyKnown); 87 changes.removeProperty(index, name); 88 await changes.apply(); 89 } 90 91 addTest(function cleanup() { 92 gStyles = null; 93 gWalker = null; 94 gInspectee = null; 95 runNextTest(); 96 }); 97 98 </script> 99 </head> 100 <body> 101 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=">Mozilla Bug </a> 102 <a id="inspectorContent" target="_blank" href="inspector-styles-data.html">Test Document</a> 103 <p id="display"></p> 104 <div id="content" style="display: none"> 105 106 </div> 107 <pre id="test"> 108 </pre> 109 </body> 110 </html>