blob: fd794a48936bf234c4e5c7dc3b61f84764ac4aab [file] [log] [blame]
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