Tests that changes to an inline style and ancestor/sibling className from JavaScript are reflected in the Styles pane and Elements tree.


Running: testInit

Running: testSetStyleAttribute
<div id="container" style="color: #daC0DE; border: 1px solid black;">…</div>
[expanded] 
element.style  { ()
color: #daC0DE;
border: 1px solid black;
    border-top-color: black;
    border-top-style: solid;
    border-top-width: 1px;
    border-right-color: black;
    border-right-style: solid;
    border-right-width: 1px;
    border-bottom-color: black;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-left-color: black;
    border-left-style: solid;
    border-left-width: 1px;

======== Matched CSS Rules ========
[expanded] 
div  { (user agent stylesheet)
display: block;


Running: testSetStyleCSSText
<div id="container" style="color: rgb(192, 255, 238);">…</div>
[expanded] 
element.style  { ()
color: rgb(192, 255, 238);

======== Matched CSS Rules ========
[expanded] 
div  { (user agent stylesheet)
display: block;


Running: testSetViaParsedAttributes
<div id="container" style="color: rgb(192, 255, 238); border: 3px dashed green;">…</div>
[expanded] 
element.style  { ()
color: rgb(192, 255, 238);
border: 3px dashed green;
    border-top-color: green;
    border-top-style: dashed;
    border-top-width: 3px;
    border-right-color: green;
    border-right-style: dashed;
    border-right-width: 3px;
    border-bottom-color: green;
    border-bottom-style: dashed;
    border-bottom-width: 3px;
    border-left-color: green;
    border-left-style: dashed;
    border-left-width: 3px;

======== Matched CSS Rules ========
[expanded] 
div  { (user agent stylesheet)
display: block;


Running: testSetViaAncestorClass
<div id="child"></div>
[expanded] 
element.style  { ()

======== Matched CSS Rules ========
[expanded] 
.red div:first-child  { (styles-update-from-js.html:4)
background-color: red;

[expanded] 
div  { (user agent stylesheet)
display: block;

======== Inherited from div#container.red ========
[expanded] 
Style Attribute  { ()
color: rgb(192, 255, 238);


Running: testSetViaSiblingAttr
<div id="childSibling"></div>
[expanded] 
element.style  { ()

======== Matched CSS Rules ========
[expanded] 
div[foo="bar"] + div  { (styles-update-from-js.html:8)
background-color: blue;

[expanded] 
div  { (user agent stylesheet)
display: block;

======== Inherited from div#container.red ========
[expanded] 
Style Attribute  { ()
color: rgb(192, 255, 238);