Tests that InspectorCSSAgent API methods work as expected.

H1


=== Computed style property count for body ===
OK

=== Matched rules for body ===
body: [user-agent] {
    ['display':'block'] @[undefined-undefined] style
    ['margin-top':'8px'] @[undefined-undefined] style
    ['margin-right':'8px'] @[undefined-undefined] style
    ['margin-bottom':'8px'] @[undefined-undefined] style
    ['margin-left':'8px'] @[undefined-undefined] style
}
body: [regular, 20:0-20:4] {
    ['property':'imported-media-screen-stylesheet' non-parsed] @[21:4-21:47] active
}
body: [regular, 20:0-20:4] {
    ['property':'imported-media-screen-stylesheet' non-parsed] @[21:4-21:47] active
}
body: [regular, 9:0-9:4] {
    ['font-size':'12px'] @[10:4-10:20] active
    ['foo':'bar !

    important /* !important property not recognized by WebCore */' is-important non-parsed] @[11:4-13:66] active
    ['height':'100% !important' is-important] @[14:4-14:28] active
    ['colorz':'"!important"' non-parsed] @[15:4-15:25] active
    ['important':'!important' non-parsed] @[16:4-16:25] active
    ['color':'yellow'] @[17:4-17:18] active
    ['color':'"badcolor" ! important /* good property with strange value */' is-important non-parsed] @[18:4-18:73] active
}
body.main1: [regular, 21:29-21:67] {
    ['color':'#F00BAA'] @[21:81-21:96] active
    ['zoo':'moo /* not an !important unrecognized property */' non-parsed] @[21:96-21:149] active
}
body.main2: [regular, 23:0-23:10] {
    ['background':'green /* value !important comment */ !important /* no semicolon, very !important */' is-important] @[23:11-23:106] active
    ['background-image':'initial' is-important] @[undefined-undefined] style
    ['background-repeat-x':'initial' is-important] @[undefined-undefined] style
    ['background-repeat-y':'initial' is-important] @[undefined-undefined] style
    ['background-attachment':'initial' is-important] @[undefined-undefined] style
    ['background-position-x':'initial' is-important] @[undefined-undefined] style
    ['background-position-y':'initial' is-important] @[undefined-undefined] style
    ['background-origin':'initial' is-important] @[undefined-undefined] style
    ['background-clip':'initial' is-important] @[undefined-undefined] style
    ['background-color':'green' is-important] @[undefined-undefined] style
    ['background-size':'initial' is-important] @[undefined-undefined] style
}
body.mainpage: [regular, 3:0-3:13] {
    ['text-decoration':'none'] @[4:4-4:26] active
    ['badproperty':'1badvalue1' non-parsed] @[5:5-5:29] active
}
body.mainpage: [regular, 8:0-8:13] {
    ['prop1':'val1' non-parsed] @[9:4-9:16] active
    ['prop2':'val2' non-parsed] @[10:4-10:16] active
}

=== Pseudo rules for body ===
PseudoId=4
body::after: [regular, 26:0-26:11] {
    ['content':'"After body"'] @[27:4-27:26] active
}

=== Inherited styles for body ===
Level=1
[NO STYLE]
html: [user-agent] {
    ['display':'block'] @[undefined-undefined] style
}
html: [regular, 4:0-4:4] {
    ['font-weight':'400'] @[5:4-5:21] active
}

=== Inline style for body ===
['font-weight':'normal'] @[0:0-0:20] active
['width':'85%'] @[0:21-0:32] active
['background-image':'url(bar.png)'] @[0:33-0:63] active
=== BODY with forced :hover ===
body: [user-agent] {
    ['display':'block'] @[undefined-undefined] style
    ['margin-top':'8px'] @[undefined-undefined] style
    ['margin-right':'8px'] @[undefined-undefined] style
    ['margin-bottom':'8px'] @[undefined-undefined] style
    ['margin-left':'8px'] @[undefined-undefined] style
}
body: [regular, 20:0-20:4] {
    ['property':'imported-media-screen-stylesheet' non-parsed] @[21:4-21:47] active
}
body: [regular, 20:0-20:4] {
    ['property':'imported-media-screen-stylesheet' non-parsed] @[21:4-21:47] active
}
body: [regular, 9:0-9:4] {
    ['font-size':'12px'] @[10:4-10:20] active
    ['foo':'bar !

    important /* !important property not recognized by WebCore */' is-important non-parsed] @[11:4-13:66] active
    ['height':'100% !important' is-important] @[14:4-14:28] active
    ['colorz':'"!important"' non-parsed] @[15:4-15:25] active
    ['important':'!important' non-parsed] @[16:4-16:25] active
    ['color':'yellow'] @[17:4-17:18] active
    ['color':'"badcolor" ! important /* good property with strange value */' is-important non-parsed] @[18:4-18:73] active
}
body.main1: [regular, 21:29-21:67] {
    ['color':'#F00BAA'] @[21:81-21:96] active
    ['zoo':'moo /* not an !important unrecognized property */' non-parsed] @[21:96-21:149] active
}
body.main2: [regular, 23:0-23:10] {
    ['background':'green /* value !important comment */ !important /* no semicolon, very !important */' is-important] @[23:11-23:106] active
    ['background-image':'initial' is-important] @[undefined-undefined] style
    ['background-repeat-x':'initial' is-important] @[undefined-undefined] style
    ['background-repeat-y':'initial' is-important] @[undefined-undefined] style
    ['background-attachment':'initial' is-important] @[undefined-undefined] style
    ['background-position-x':'initial' is-important] @[undefined-undefined] style
    ['background-position-y':'initial' is-important] @[undefined-undefined] style
    ['background-origin':'initial' is-important] @[undefined-undefined] style
    ['background-clip':'initial' is-important] @[undefined-undefined] style
    ['background-color':'green' is-important] @[undefined-undefined] style
    ['background-size':'initial' is-important] @[undefined-undefined] style
}
body.mainpage: [regular, 3:0-3:13] {
    ['text-decoration':'none'] @[4:4-4:26] active
    ['badproperty':'1badvalue1' non-parsed] @[5:5-5:29] active
}
body.mainpage: [regular, 8:0-8:13] {
    ['prop1':'val1' non-parsed] @[9:4-9:16] active
    ['prop2':'val2' non-parsed] @[10:4-10:16] active
}
body:hover: [regular, 13:0-13:10] {
    ['color':'#CDE'] @[14:2-14:14] active
}

=== Attributes style for table ===
['width':'50%'] @[undefined-undefined] style

=== Stylesheet-for-inline-style text ===


=== Stylesheet-for-inline-style modification result ===
NotSupportedError

=== All stylesheets ===

StyleSheet: '@charset "UTF-8";

@import url("styles-new-API-1.css");

html {
    font-weight: 400;
}

@media screen {
body {
    font-size: 12px;
    foo: bar !

    important /* !important property not recognized by WebCore */;
    height: 100% !important;
    colorz: "!important";
    important:!important;
    color: yellow;
    color: "badcolor" ! important /* good property with strange value */;
}

/* comment before selector */body.main1/* comment after selector */{/* comment */color: #F00BAA;zoo:moo /* not an !important unrecognized property */}/* comment */

body.main2{background: green /* value !important comment */ !important /* no semicolon, very !important */}
}

body::after  {
    content: "After body";
}

h1 {
    height : 100% ; border: 1px solid; border-width: 2px; background-color : #33FF33; googles: abra; foo: .bar; -moz-goog: 1***; border-width: 0px;
}
'
html: [regular, 4:0-4:4] {
    ['font-weight':'400'] @[5:4-5:21] active
}
body: [regular, 9:0-9:4] {
    ['font-size':'12px'] @[10:4-10:20] active
    ['foo':'bar !

    important /* !important property not recognized by WebCore */' is-important non-parsed] @[11:4-13:66] active
    ['height':'100% !important' is-important] @[14:4-14:28] active
    ['colorz':'"!important"' non-parsed] @[15:4-15:25] active
    ['important':'!important' non-parsed] @[16:4-16:25] active
    ['color':'yellow'] @[17:4-17:18] active
    ['color':'"badcolor" ! important /* good property with strange value */' is-important non-parsed] @[18:4-18:73] active
}
body.main1: [regular, 21:29-21:67] {
    ['color':'#F00BAA'] @[21:81-21:96] active
    ['zoo':'moo /* not an !important unrecognized property */' non-parsed] @[21:96-21:149] active
}
body.main2: [regular, 23:0-23:10] {
    ['background':'green /* value !important comment */ !important /* no semicolon, very !important */' is-important] @[23:11-23:106] active
    ['background-image':'initial' is-important] @[undefined-undefined] style
    ['background-repeat-x':'initial' is-important] @[undefined-undefined] style
    ['background-repeat-y':'initial' is-important] @[undefined-undefined] style
    ['background-attachment':'initial' is-important] @[undefined-undefined] style
    ['background-position-x':'initial' is-important] @[undefined-undefined] style
    ['background-position-y':'initial' is-important] @[undefined-undefined] style
    ['background-origin':'initial' is-important] @[undefined-undefined] style
    ['background-clip':'initial' is-important] @[undefined-undefined] style
    ['background-color':'green' is-important] @[undefined-undefined] style
    ['background-size':'initial' is-important] @[undefined-undefined] style
}
body::after: [regular, 26:0-26:11] {
    ['content':'"After body"'] @[27:4-27:26] active
}
h1: [regular, 30:0-30:2] {
    ['height':'100%'] @[31:4-31:19] active
    ['border':'1px solid'] @[31:20-31:38] active
    ['border-width':'2px'] @[31:39-31:57] inactive
    ['background-color':'#33FF33'] @[31:58-31:85] active
    ['googles':'abra' non-parsed] @[31:86-31:100] active
    ['foo':'.bar' non-parsed] @[31:101-31:111] active
    ['-moz-goog':'1***' non-parsed] @[31:112-31:128] active
    ['border-width':'0px'] @[31:129-31:147] active
    ['border-top-style':'solid'] @[undefined-undefined] style
    ['border-right-style':'solid'] @[undefined-undefined] style
    ['border-bottom-style':'solid'] @[undefined-undefined] style
    ['border-left-style':'solid'] @[undefined-undefined] style
    ['border-top-color':'initial'] @[undefined-undefined] style
    ['border-right-color':'initial'] @[undefined-undefined] style
    ['border-bottom-color':'initial'] @[undefined-undefined] style
    ['border-left-color':'initial'] @[undefined-undefined] style
    ['border-image-source':'initial'] @[undefined-undefined] style
    ['border-image-slice':'initial'] @[undefined-undefined] style
    ['border-image-width':'initial'] @[undefined-undefined] style
    ['border-image-outset':'initial'] @[undefined-undefined] style
    ['border-image-repeat':'initial'] @[undefined-undefined] style
    ['border-top-width':'0px'] @[undefined-undefined] style
    ['border-right-width':'0px'] @[undefined-undefined] style
    ['border-bottom-width':'0px'] @[undefined-undefined] style
    ['border-left-width':'0px'] @[undefined-undefined] style
}

StyleSheet: '@import url(styles-new-API-2.css);

@page { margin: 2cm } /* All margins set to 2cm */

@page :first {
  margin-top: 10cm    /* Top margin on first page 10cm */
}

@media screen {

#absent-id {
}

@font-face {
    font-family: 'TheFont';
    src: url('font.url');
    font-weight: normal;
    font-style: normal;
}

body {
    property: imported-media-screen-stylesheet;
}

}
'
#absent-id: [regular, 10:0-10:10] {
}
body: [regular, 20:0-20:4] {
    ['property':'imported-media-screen-stylesheet' non-parsed] @[21:4-21:47] active
}

StyleSheet: '@import url(styles-new-API-1.css);

@page { margin: 2cm } /* All margins set to 2cm */

@page :first {
  margin-top: 10cm    /* Top margin on first page 10cm */
}

@media screen {

#absent-id {
}

@font-face {
    font-family: 'TheFont';
    src: url('font.url');
    font-weight: normal;
    font-style: normal;
}

body {
    property: imported-media-screen-stylesheet;
}

}
'
#absent-id: [regular, 10:0-10:10] {
}
body: [regular, 20:0-20:4] {
    ['property':'imported-media-screen-stylesheet' non-parsed] @[21:4-21:47] active
}

StyleSheet: '

/* An inline stylesheet */
body.mainpage {
    text-decoration: none; /* at least one valid property is necessary for WebCore to match a rule */
    ;badproperty: 1badvalue1;
}

body.mainpage {
    prop1: val1;
    prop2: val2;
}

body:hover {
  color: #CDE;
}
'
body.mainpage: [regular, 3:0-3:13] {
    ['text-decoration':'none'] @[4:4-4:26] active
    ['badproperty':'1badvalue1' non-parsed] @[5:5-5:29] active
}
body.mainpage: [regular, 8:0-8:13] {
    ['prop1':'val1' non-parsed] @[9:4-9:16] active
    ['prop2':'val2' non-parsed] @[10:4-10:16] active
}
body:hover: [regular, 13:0-13:10] {
    ['color':'#CDE'] @[14:2-14:14] active
}

=== Last stylesheet patched ===

StyleSheet: 'body.mainpage {    text-decoration: strikethrough;    badproperty: 2badvalue2;}body {    text-align: justify;}'
body.mainpage: [regular, 0:0-0:13] {
    ['text-decoration':'strikethrough' non-parsed] @[0:19-0:50] active
    ['badproperty':'2badvalue2' non-parsed] @[0:54-0:78] active
}
body: [regular, 0:79-0:83] {
    ['text-align':'justify'] @[0:89-0:109] active
}

=== After selector set ===

StyleSheet: 'html *, body[foo="bar"] {    text-decoration: strikethrough;    badproperty: 2badvalue2;}body {    text-align: justify;}'
html *, body[foo="bar"]: [regular, 0:0-0:23] {
    ['text-decoration':'strikethrough' non-parsed] @[0:29-0:60] active
    ['badproperty':'2badvalue2' non-parsed] @[0:64-0:88] active
}
body: [regular, 0:89-0:93] {
    ['text-align':'justify'] @[0:99-0:119] active
}

=== After property text set ===

StyleSheet: 'html *, body[foo="bar"] {
    color: white; background: black;
}body {    text-align: justify;}'
html *, body[foo="bar"]: [regular, 0:0-0:23] {
    ['color':'white'] @[1:4-1:17] active
    ['background':'black'] @[1:18-1:36] active
    ['background-image':'initial'] @[undefined-undefined] style
    ['background-repeat-x':'initial'] @[undefined-undefined] style
    ['background-repeat-y':'initial'] @[undefined-undefined] style
    ['background-attachment':'initial'] @[undefined-undefined] style
    ['background-position-x':'initial'] @[undefined-undefined] style
    ['background-position-y':'initial'] @[undefined-undefined] style
    ['background-origin':'initial'] @[undefined-undefined] style
    ['background-clip':'initial'] @[undefined-undefined] style
    ['background-color':'black'] @[undefined-undefined] style
    ['background-size':'initial'] @[undefined-undefined] style
}
body: [regular, 2:1-2:5] {
    ['text-align':'justify'] @[2:11-2:31] active
}

=== After first style text set ===

StyleSheet: 'html *, body[foo="bar"] {}body {    text-align: justify;}'
html *, body[foo="bar"]: [regular, 0:0-0:23] {
}
body: [regular, 0:26-0:30] {
    ['text-align':'justify'] @[0:36-0:56] active
}

=== After second style text set ===

StyleSheet: 'html *, body[foo="bar"] {color: green; background: red; foo: bar; *baz: bar; /* Comment */ font-weight: bold !important}body {    text-align: justify;}'
html *, body[foo="bar"]: [regular, 0:0-0:23] {
    ['color':'green'] @[0:25-0:38] active
    ['background':'red'] @[0:39-0:55] active
    ['foo':'bar' non-parsed] @[0:56-0:65] active
    ['font-weight':'bold !important' is-important] @[0:91-0:119] active
    ['background-image':'initial'] @[undefined-undefined] style
    ['background-repeat-x':'initial'] @[undefined-undefined] style
    ['background-repeat-y':'initial'] @[undefined-undefined] style
    ['background-attachment':'initial'] @[undefined-undefined] style
    ['background-position-x':'initial'] @[undefined-undefined] style
    ['background-position-y':'initial'] @[undefined-undefined] style
    ['background-origin':'initial'] @[undefined-undefined] style
    ['background-clip':'initial'] @[undefined-undefined] style
    ['background-color':'red'] @[undefined-undefined] style
    ['background-size':'initial'] @[undefined-undefined] style
}
body: [regular, 0:120-0:124] {
    ['text-align':'justify'] @[0:130-0:150] active
}

=== Matched rules after rule added ===
body: [user-agent] {
    ['display':'block'] @[undefined-undefined] style
    ['margin-top':'8px'] @[undefined-undefined] style
    ['margin-right':'8px'] @[undefined-undefined] style
    ['margin-bottom':'8px'] @[undefined-undefined] style
    ['margin-left':'8px'] @[undefined-undefined] style
}
body: [regular, 20:0-20:4] {
    ['property':'imported-media-screen-stylesheet' non-parsed] @[21:4-21:47] active
}
body: [regular, 20:0-20:4] {
    ['property':'imported-media-screen-stylesheet' non-parsed] @[21:4-21:47] active
}
body: [regular, 9:0-9:4] {
    ['font-size':'12px'] @[10:4-10:20] active
    ['foo':'bar !

    important /* !important property not recognized by WebCore */' is-important non-parsed] @[11:4-13:66] active
    ['height':'100% !important' is-important] @[14:4-14:28] active
    ['colorz':'"!important"' non-parsed] @[15:4-15:25] active
    ['important':'!important' non-parsed] @[16:4-16:25] active
    ['color':'yellow'] @[17:4-17:18] active
    ['color':'"badcolor" ! important /* good property with strange value */' is-important non-parsed] @[18:4-18:73] active
}
html *, body[foo="bar"]: [regular, 0:0-0:23] {
    ['color':'green'] @[0:25-0:38] active
    ['background':'red'] @[0:39-0:55] active
    ['foo':'bar' non-parsed] @[0:56-0:65] active
    ['font-weight':'bold !important' is-important] @[0:91-0:119] active
    ['background-image':'initial'] @[undefined-undefined] style
    ['background-repeat-x':'initial'] @[undefined-undefined] style
    ['background-repeat-y':'initial'] @[undefined-undefined] style
    ['background-attachment':'initial'] @[undefined-undefined] style
    ['background-position-x':'initial'] @[undefined-undefined] style
    ['background-position-y':'initial'] @[undefined-undefined] style
    ['background-origin':'initial'] @[undefined-undefined] style
    ['background-clip':'initial'] @[undefined-undefined] style
    ['background-color':'red'] @[undefined-undefined] style
    ['background-size':'initial'] @[undefined-undefined] style
}
body: [regular, 0:120-0:124] {
    ['text-align':'justify'] @[0:130-0:150] active
}
body: [inspector, 0:0-0:4] {
    ['font-family':'serif'] @[1:4-1:23] active
}
body.main1: [regular, 21:29-21:67] {
    ['color':'#F00BAA'] @[21:81-21:96] active
    ['zoo':'moo /* not an !important unrecognized property */' non-parsed] @[21:96-21:149] active
}
body.main2: [regular, 23:0-23:10] {
    ['background':'green /* value !important comment */ !important /* no semicolon, very !important */' is-important] @[23:11-23:106] active
    ['background-image':'initial' is-important] @[undefined-undefined] style
    ['background-repeat-x':'initial' is-important] @[undefined-undefined] style
    ['background-repeat-y':'initial' is-important] @[undefined-undefined] style
    ['background-attachment':'initial' is-important] @[undefined-undefined] style
    ['background-position-x':'initial' is-important] @[undefined-undefined] style
    ['background-position-y':'initial' is-important] @[undefined-undefined] style
    ['background-origin':'initial' is-important] @[undefined-undefined] style
    ['background-clip':'initial' is-important] @[undefined-undefined] style
    ['background-color':'green' is-important] @[undefined-undefined] style
    ['background-size':'initial' is-important] @[undefined-undefined] style
}

=== After property manipulations ===
[text='height : 100% ;'] disabled
['border':'1px solid'] @[30:5-30:23] active
['border-width':'2px'] @[30:24-30:42] inactive
['googles':'abra' non-parsed] @[30:44-30:58] active
['foo':'.bar' non-parsed] @[30:59-30:69] active
['-moz-goog':'1***' non-parsed] @[30:70-30:86] active
['font-size':'12px'] @[31:4-31:20] active
['border-width':'1px'] @[32:4-32:22] active
[text='font-size: 14px;'] disabled
['border-top-width':'1px'] @[undefined-undefined] style
['border-right-width':'1px'] @[undefined-undefined] style
['border-bottom-width':'1px'] @[undefined-undefined] style
['border-left-width':'1px'] @[undefined-undefined] style
['border-top-style':'solid'] @[undefined-undefined] style
['border-right-style':'solid'] @[undefined-undefined] style
['border-bottom-style':'solid'] @[undefined-undefined] style
['border-left-style':'solid'] @[undefined-undefined] style
['border-top-color':'initial'] @[undefined-undefined] style
['border-right-color':'initial'] @[undefined-undefined] style
['border-bottom-color':'initial'] @[undefined-undefined] style
['border-left-color':'initial'] @[undefined-undefined] style
['border-image-source':'initial'] @[undefined-undefined] style
['border-image-slice':'initial'] @[undefined-undefined] style
['border-image-width':'initial'] @[undefined-undefined] style
['border-image-outset':'initial'] @[undefined-undefined] style
['border-image-repeat':'initial'] @[undefined-undefined] style

=== After property enabled ===
[text='height : 100% ;'] disabled
['border':'1px solid'] @[30:5-30:23] active
['border-width':'2px'] @[30:24-30:42] inactive
['googles':'abra' non-parsed] @[30:44-30:58] active
['foo':'.bar' non-parsed] @[30:59-30:69] active
['-moz-goog':'1***' non-parsed] @[30:70-30:86] active
['font-size':'12px'] @[31:4-31:20] inactive
['border-width':'1px'] @[32:4-32:22] active
['font-size':'14px'] @[33:4-33:20] active
['border-top-width':'1px'] @[undefined-undefined] style
['border-right-width':'1px'] @[undefined-undefined] style
['border-bottom-width':'1px'] @[undefined-undefined] style
['border-left-width':'1px'] @[undefined-undefined] style
['border-top-style':'solid'] @[undefined-undefined] style
['border-right-style':'solid'] @[undefined-undefined] style
['border-bottom-style':'solid'] @[undefined-undefined] style
['border-left-style':'solid'] @[undefined-undefined] style
['border-top-color':'initial'] @[undefined-undefined] style
['border-right-color':'initial'] @[undefined-undefined] style
['border-bottom-color':'initial'] @[undefined-undefined] style
['border-left-color':'initial'] @[undefined-undefined] style
['border-image-source':'initial'] @[undefined-undefined] style
['border-image-slice':'initial'] @[undefined-undefined] style
['border-image-width':'initial'] @[undefined-undefined] style
['border-image-outset':'initial'] @[undefined-undefined] style
['border-image-repeat':'initial'] @[undefined-undefined] style