src/third_party/WebKit/LayoutTests/inspector/elements/styles/styles-update-from-js.html

   1 <html>
   2 <head>
   3 <style>
   4 .red div:first-child {
   5     background-color: red;
   6 }
   7
   8 div[foo="bar"] + div {
   9     background-color: blue;
  10 }
  11
  12 </style>
  13 <script src="../../../http/tests/inspector/inspector-test.js"></script>
  14 <script src="../../../http/tests/inspector/elements-test.js"></script>
  15 <script>
  16 function modifyStyleAttribute()
  17 {
  18     document.getElementById("container").setAttribute("style", "color: #daC0DE; border: 1px solid black;");
  19 }
  20
  21 function modifyCSSText()
  22 {
  23     document.getElementById("container").style.cssText = "color: #C0FFEE";
  24 }
  25
  26 function modifyParsedAttributes()
  27 {
  28     var style = document.getElementById("container").style;
  29     style.border = "2px dashed green";
  30     style.borderWidth = "3px";
  31 }
  32
  33 function modifyContainerClass()
  34 {
  35     document.getElementById("container").className = "red";
  36 }
  37
  38 function modifyChildAttr()
  39 {
  40     document.getElementById("child").setAttribute("foo", "bar");
  41 }
  42
  43 function test()
  44 {
  45     InspectorTest.runTestSuite([
  46         function testInit(next)
  47         {
  48             InspectorTest.selectNodeAndWaitForStyles("container", next);
  49         },
  50
  51         function testSetStyleAttribute(next)
  52         {
  53             waitAndDumpAttributeAndStyles(next);
  54             InspectorTest.evaluateInPage("modifyStyleAttribute()");
  55         },
  56
  57         function testSetStyleCSSText(next)
  58         {
  59             waitAndDumpAttributeAndStyles(next);
  60             InspectorTest.evaluateInPage("modifyCSSText()");
  61         },
  62
  63         function testSetViaParsedAttributes(next)
  64         {
  65             waitAndDumpAttributeAndStyles(next);
  66             InspectorTest.evaluateInPage("modifyParsedAttributes()");
  67         },
  68
  69         function testSetViaAncestorClass(next)
  70         {
  71             InspectorTest.selectNodeAndWaitForStyles("child", callback);
  72
  73             function callback()
  74             {
  75                 waitAndDumpAttributeAndStyles(next, "child");
  76                 InspectorTest.evaluateInPage("modifyContainerClass()");
  77             }
  78         },
  79
  80         function testSetViaSiblingAttr(next)
  81         {
  82             InspectorTest.selectNodeAndWaitForStyles("childSibling", callback);
  83
  84             function callback()
  85             {
  86                 waitAndDumpAttributeAndStyles(next, "childSibling");
  87                 InspectorTest.evaluateInPage("modifyChildAttr()");
  88             }
  89         }
  90     ]);
  91
  92     function waitAndDumpAttributeAndStyles(next, id)
  93     {
  94         id = id || "container";
  95         function callback()
  96         {
  97             dumpAttributeAndStyles(id);
  98             next();
  99         }
 100         InspectorTest.waitForStyles(id, callback);
 101     }
 102
 103     function dumpAttributeAndStyles(id)
 104     {
 105         var treeElement = findNodeTreeElement(id);
 106         if (!treeElement) {
 107             InspectorTest.addResult("'" + id + "' tree element not found");
 108             return;
 109         }
 110         InspectorTest.addResult(treeElement.listItemElement.textContent.replace(/\u200b/g, ""));
 111         InspectorTest.dumpSelectedElementStyles(true);
 112     }
 113
 114     function findNodeTreeElement(id)
 115     {
 116         InspectorTest.firstElementsTreeOutline()._updateModifiedNodes();
 117         var expandedNode = InspectorTest.expandedNodeWithId(id);
 118         if (!expandedNode) {
 119             InspectorTest.addResult("'" + id + "' node not found");
 120             InspectorTest.completeTest();
 121         }
 122         return InspectorTest.firstElementsTreeOutline().findTreeElement(expandedNode);
 123     }
 124 }
 125 </script>
 126 </head>
 127
 128 <body onload="runTest()">
 129 <p>
 130 Tests that changes to an inline style and ancestor/sibling className from JavaScript are reflected in the Styles pane and Elements tree.
 131 </p>
 132
 133 <div id="container" style="font-weight:bold"><div id="child"></div><div id="childSibling"></div></div>
 134
 135 </body>
 136 </html>