Tests that elements panel shows proper styles in the sidebar panel.

border-bottom-left-radius: 5px;
    5px - .foo elements-panel-styles.css:21 -> elements-panel-styles.css:21:7
border-bottom-right-radius: 5px;
    5px - .foo elements-panel-styles.css:21 -> elements-panel-styles.css:21:7
border-top-left-radius: 5px;
    5px - .foo elements-panel-styles.css:21 -> elements-panel-styles.css:21:7
border-top-right-radius: 5px;
    5px - .foo elements-panel-styles.css:21 -> elements-panel-styles.css:21:7
color: rgb(0, 0, 255);
    blue - .foo, .foo::before elements-panel-styles.css:35 -> elements-panel-styles.css:35:21
    OVERLOADED black - .foo elements-panel-styles.css:21 -> elements-panel-styles.css:21:7
    OVERLOADED red - #container elements-panel-styles.css:10 -> elements-panel-styles.css:10:13
    OVERLOADED magenta !important - html elements-panel-styles.css:67 -> elements-panel-styles.css:67:7
content: "[before Foo]";
    "[before Foo]" - .foo, .foo::before elements-panel-styles.css:35 -> elements-panel-styles.css:35:21
display: block;
    OVERLOADED none - element.style
    block !important - .foo, .foo::before elements-panel-styles.css:35 -> elements-panel-styles.css:35:21
    OVERLOADED list-item - .foo elements-panel-styles.css:21 -> elements-panel-styles.css:21:7
    OVERLOADED block - div user agent stylesheet
font-family: serif;
    serif - #container elements-panel-styles.css:10 -> elements-panel-styles.css:10:13
font-size: 14px;
    14px - #container elements-panel-styles.css:10 -> elements-panel-styles.css:10:13
    OVERLOADED 12px - body elements-panel-styles.css:1 -> elements-panel-styles.css:1:7
font-style: italic;
    italic !important - #container .foo elements-panel-styles.css:17 -> elements-panel-styles.css:17:18
    OVERLOADED normal !important - .foo elements-panel-styles.css:21 -> elements-panel-styles.css:21:7
font-weight: 400;
    normal !important - .foo elements-panel-styles.css:21 -> elements-panel-styles.css:21:7
margin-bottom: 2px;
    2px - .foo elements-panel-styles.css:21 -> elements-panel-styles.css:21:7
margin-left: 0px;
    1px - .foo elements-panel-styles.css:21 -> elements-panel-styles.css:21:7
margin-right: 0px;
    0px - .foo elements-panel-styles.css:21 -> elements-panel-styles.css:21:7
margin-top: 10px;
    10px - .foo elements-panel-styles.css:21 -> elements-panel-styles.css:21:7
padding-bottom: 4px;
    4px - .foo elements-panel-styles.css:21 -> elements-panel-styles.css:21:7
padding-left: 4px;
    4px - .foo elements-panel-styles.css:21 -> elements-panel-styles.css:21:7
padding-right: 1px;
    1px - .foo elements-panel-styles.css:21 -> elements-panel-styles.css:21:7
padding-top: 4px;
    4px - .foo elements-panel-styles.css:21 -> elements-panel-styles.css:21:7
text-align: -webkit-left;
    -webkit-left - element.style
text-indent: 0px;
    OVERLOADED 10px - body .foo elements-panel-styles.css:6 -> elements-panel-styles.css:6:12
    0 !important - .foo elements-panel-styles.css:21 -> elements-panel-styles.css:21:7
    OVERLOADED 20px !important - body elements-panel-styles.css:1 -> elements-panel-styles.css:1:7
-webkit-font-smoothing: subpixel-antialiased;
    subpixel-antialiased - element.style
[expanded] 
element.style { ()
/-- overloaded --/     display: none;
    -webkit-font-smoothing: subpixel-antialiased;

[expanded] 
#container .foo { (elements-pa…yles.css:17 -> elements-panel-styles.css:17:18)
    font-style: italic !important;

[expanded] 
body .foo { (elements-pa…tyles.css:6 -> elements-panel-styles.css:6:12)
/-- overloaded --/     text-indent: 10px;

[expanded] 
.foo { (elements-pa…yles.css:59 -> elements-panel-styles.css:59:7)

[expanded] 
.foo, .foo::before { (elements-pa…yles.css:35 -> elements-panel-styles.css:35:21)
    content: "[before Foo]";
    color: blue;
    display: block !important;

[expanded] 
.foo { (elements-pa…yles.css:21 -> elements-panel-styles.css:21:7)
/-- overloaded --/     display: list-item;
/-- overloaded --/     color: black;
    margin-left: 1px;
    margin: 10px 0 2px;
        margin-top: 10px;
        margin-right: 0px;
        margin-bottom: 2px;
    /-- overloaded --/     margin-left: 1px;
    border-radius: 5px;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
        border-bottom-left-radius: 5px;
/-- overloaded --/     font-style: normal !important;
    font-weight: normal !important;
/-- overloaded --/     font-weight: bold;
    padding: 4px;
        padding-top: 4px;
    /-- overloaded --/     padding-right: 1px;
        padding-bottom: 4px;
        padding-left: 4px;
    padding-right: 1px;
    text-indent: 0 !important;

[expanded] 
div[Attributes Style] { ()
    text-align: -webkit-left;

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

======== Inherited from div#container ========
[expanded] 
#container { (elements-pa…yles.css:10 -> elements-panel-styles.css:10:13)
    font-family: serif;
    font-size: 14px;
/-- overloaded --/     color: red;

======== Inherited from body ========
[expanded] 
body { (elements-pa…tyles.css:1 -> elements-panel-styles.css:1:7)
/-- overloaded --/     font-size: 12px;
/-- overloaded --/     text-indent: 20px !important;

======== Inherited from html ========
[expanded] 
html { (elements-pa…yles.css:67 -> elements-panel-styles.css:67:7)
/-- overloaded --/     color: magenta !important;

======== Pseudo ::before element ========
[expanded] 
.foo::before { (elements-pa…yles.css:63 -> elements-panel-styles.css:63:15)

[expanded] 
.foo::before { (elements-pa…yles.css:41 -> elements-panel-styles.css:41:15)
    color: red;

[expanded] 
.foo, .foo::before { (elements-pa…yles.css:35 -> elements-panel-styles.css:35:21)
    content: "[before Foo]";
/-- overloaded --/     color: blue;
    display: block !important;

======== Pseudo ::after element ========
[expanded] 
.foo::after { (elements-pa…yles.css:49 -> elements-panel-styles.css:49:14)
    font-family: courier;
    content: "[after Foo 2]";

[expanded] 
.foo::after { (elements-pa…yles.css:45 -> elements-panel-styles.css:45:14)
/-- overloaded --/     content: "[after Foo]";
    color: green;

======== Pseudo ::marker element ========
[expanded] 
.foo::marker { (elements-pa…yles.css:54 -> elements-panel-styles.css:54:15)
    content: "[marker Foo]";
    color: cyan;