| OLD | NEW |
| (Empty) |
| 1 Tests that InspectorCSSAgent API methods work as expected. | |
| 2 | |
| 3 H1 | |
| 4 | |
| 5 | |
| 6 Running: test_styles | |
| 7 | |
| 8 === Computed style property count for body === | |
| 9 OK | |
| 10 | |
| 11 === Matched rules for body === | |
| 12 body: [user-agent] { | |
| 13 ['display':'block'] @[undefined-undefined] | |
| 14 ['margin-top':'8px'] @[undefined-undefined] | |
| 15 ['margin-right':'8px'] @[undefined-undefined] | |
| 16 ['margin-bottom':'8px'] @[undefined-undefined] | |
| 17 ['margin-left':'8px'] @[undefined-undefined] | |
| 18 } | |
| 19 body: [regular, 20:0-20:4] { | |
| 20 ['property':'imported-media-screen-stylesheet' non-parsed] @[21:4-21:47] | |
| 21 } | |
| 22 body: [regular, 20:0-20:4] { | |
| 23 ['property':'imported-media-screen-stylesheet' non-parsed] @[21:4-21:47] | |
| 24 } | |
| 25 body: [regular, 9:0-9:4] { | |
| 26 ['font-size':'12px'] @[10:4-10:20] | |
| 27 ['foo':'bar ! | |
| 28 | |
| 29 important /* !important property not recognized by WebCore */' is-important
non-parsed] @[11:4-13:66] | |
| 30 ['height':'100% !important' is-important] @[14:4-14:28] | |
| 31 ['colorz':'"!important"' non-parsed] @[15:4-15:25] | |
| 32 ['important':'!important' is-important non-parsed] @[16:4-16:25] | |
| 33 ['color':'yellow'] @[17:4-17:18] | |
| 34 ['color':'"badcolor" ! important /* good property with strange value */' is-
important non-parsed] @[18:4-18:73] | |
| 35 } | |
| 36 body.main1: [regular, 21:29-21:67] { | |
| 37 ['color':'#F00BAA'] @[21:81-21:96] | |
| 38 ['zoo':'moo /* not an !important unrecognized property */' non-parsed] @[21:
96-21:149] | |
| 39 } | |
| 40 body.main2: [regular, 23:0-23:10] { | |
| 41 ['background':'green /* value !important comment */ !important /* no semicol
on, very !important */' is-important] @[23:11-23:106] | |
| 42 ['background-image':'initial' is-important] @[undefined-undefined] | |
| 43 ['background-repeat-x':'initial' is-important] @[undefined-undefined] | |
| 44 ['background-repeat-y':'initial' is-important] @[undefined-undefined] | |
| 45 ['background-attachment':'initial' is-important] @[undefined-undefined] | |
| 46 ['background-position-x':'initial' is-important] @[undefined-undefined] | |
| 47 ['background-position-y':'initial' is-important] @[undefined-undefined] | |
| 48 ['background-origin':'initial' is-important] @[undefined-undefined] | |
| 49 ['background-clip':'initial' is-important] @[undefined-undefined] | |
| 50 ['background-color':'green' is-important] @[undefined-undefined] | |
| 51 ['background-size':'initial' is-important] @[undefined-undefined] | |
| 52 } | |
| 53 body.mainpage: [regular, 3:0-3:13] { | |
| 54 ['text-decoration':'none'] @[4:4-4:26] | |
| 55 ['badproperty':'1badvalue1' non-parsed] @[5:5-5:29] | |
| 56 ['text-decoration-line':'none'] @[undefined-undefined] | |
| 57 ['text-decoration-style':'initial'] @[undefined-undefined] | |
| 58 ['text-decoration-color':'initial'] @[undefined-undefined] | |
| 59 } | |
| 60 body.mainpage: [regular, 8:0-8:13] { | |
| 61 ['prop1':'val1' non-parsed] @[9:4-9:16] | |
| 62 ['prop2':'val2' non-parsed] @[10:4-10:16] | |
| 63 } | |
| 64 | |
| 65 === Pseudo rules for body === | |
| 66 PseudoId=4 | |
| 67 body::after: [regular, 26:0-26:11] { | |
| 68 ['content':'"After body"'] @[27:4-27:26] | |
| 69 } | |
| 70 | |
| 71 === Inherited styles for body === | |
| 72 Level=1 | |
| 73 [NO STYLE] | |
| 74 html: [user-agent] { | |
| 75 ['display':'block'] @[undefined-undefined] | |
| 76 } | |
| 77 :root: [user-agent] { | |
| 78 ['scroll-blocks-on':'start-touch wheel-event'] @[undefined-undefined] | |
| 79 } | |
| 80 html: [regular, 4:0-4:4] { | |
| 81 ['font-weight':'400'] @[5:4-5:21] | |
| 82 } | |
| 83 | |
| 84 === Inline style for body === | |
| 85 ['font-weight':'normal'] @[0:0-0:20] | |
| 86 ['width':'85%'] @[0:21-0:32] | |
| 87 ['background-image':'url(bar.png)'] @[0:33-0:63] | |
| 88 | |
| 89 Running: test_forcedState | |
| 90 === BODY with forced :hover === | |
| 91 body: [user-agent] { | |
| 92 ['display':'block'] @[undefined-undefined] | |
| 93 ['margin-top':'8px'] @[undefined-undefined] | |
| 94 ['margin-right':'8px'] @[undefined-undefined] | |
| 95 ['margin-bottom':'8px'] @[undefined-undefined] | |
| 96 ['margin-left':'8px'] @[undefined-undefined] | |
| 97 } | |
| 98 body: [regular, 20:0-20:4] { | |
| 99 ['property':'imported-media-screen-stylesheet' non-parsed] @[21:4-21:47] | |
| 100 } | |
| 101 body: [regular, 20:0-20:4] { | |
| 102 ['property':'imported-media-screen-stylesheet' non-parsed] @[21:4-21:47] | |
| 103 } | |
| 104 body: [regular, 9:0-9:4] { | |
| 105 ['font-size':'12px'] @[10:4-10:20] | |
| 106 ['foo':'bar ! | |
| 107 | |
| 108 important /* !important property not recognized by WebCore */' is-important
non-parsed] @[11:4-13:66] | |
| 109 ['height':'100% !important' is-important] @[14:4-14:28] | |
| 110 ['colorz':'"!important"' non-parsed] @[15:4-15:25] | |
| 111 ['important':'!important' is-important non-parsed] @[16:4-16:25] | |
| 112 ['color':'yellow'] @[17:4-17:18] | |
| 113 ['color':'"badcolor" ! important /* good property with strange value */' is-
important non-parsed] @[18:4-18:73] | |
| 114 } | |
| 115 body.main1: [regular, 21:29-21:67] { | |
| 116 ['color':'#F00BAA'] @[21:81-21:96] | |
| 117 ['zoo':'moo /* not an !important unrecognized property */' non-parsed] @[21:
96-21:149] | |
| 118 } | |
| 119 body.main2: [regular, 23:0-23:10] { | |
| 120 ['background':'green /* value !important comment */ !important /* no semicol
on, very !important */' is-important] @[23:11-23:106] | |
| 121 ['background-image':'initial' is-important] @[undefined-undefined] | |
| 122 ['background-repeat-x':'initial' is-important] @[undefined-undefined] | |
| 123 ['background-repeat-y':'initial' is-important] @[undefined-undefined] | |
| 124 ['background-attachment':'initial' is-important] @[undefined-undefined] | |
| 125 ['background-position-x':'initial' is-important] @[undefined-undefined] | |
| 126 ['background-position-y':'initial' is-important] @[undefined-undefined] | |
| 127 ['background-origin':'initial' is-important] @[undefined-undefined] | |
| 128 ['background-clip':'initial' is-important] @[undefined-undefined] | |
| 129 ['background-color':'green' is-important] @[undefined-undefined] | |
| 130 ['background-size':'initial' is-important] @[undefined-undefined] | |
| 131 } | |
| 132 body.mainpage: [regular, 3:0-3:13] { | |
| 133 ['text-decoration':'none'] @[4:4-4:26] | |
| 134 ['badproperty':'1badvalue1' non-parsed] @[5:5-5:29] | |
| 135 ['text-decoration-line':'none'] @[undefined-undefined] | |
| 136 ['text-decoration-style':'initial'] @[undefined-undefined] | |
| 137 ['text-decoration-color':'initial'] @[undefined-undefined] | |
| 138 } | |
| 139 body.mainpage: [regular, 8:0-8:13] { | |
| 140 ['prop1':'val1' non-parsed] @[9:4-9:16] | |
| 141 ['prop2':'val2' non-parsed] @[10:4-10:16] | |
| 142 } | |
| 143 body:hover: [regular, 13:0-13:10] { | |
| 144 ['color':'#CDE'] @[14:2-14:14] | |
| 145 } | |
| 146 | |
| 147 Running: test_textNodeComputedStyles | |
| 148 | |
| 149 === Computed style property count for TextNode === | |
| 150 OK | |
| 151 | |
| 152 Running: test_tableStyles | |
| 153 | |
| 154 === Attributes style for table === | |
| 155 ['width':'50%'] @[undefined-undefined] | |
| 156 | |
| 157 === Stylesheet-for-inline-style text === | |
| 158 | |
| 159 | |
| 160 === Stylesheet-for-inline-style modification result === | |
| 161 null | |
| 162 | |
| 163 Running: test_styleSheets | |
| 164 | |
| 165 === All stylesheets === | |
| 166 | |
| 167 StyleSheet: '@import url(styles-new-API-2.css); | |
| 168 | |
| 169 @page { margin: 2cm } /* All margins set to 2cm */ | |
| 170 | |
| 171 @page :first { | |
| 172 margin-top: 10cm /* Top margin on first page 10cm */ | |
| 173 } | |
| 174 | |
| 175 @media screen { | |
| 176 | |
| 177 #absent-id { | |
| 178 } | |
| 179 | |
| 180 @font-face { | |
| 181 font-family: 'TheFont'; | |
| 182 src: url('font.url'); | |
| 183 font-weight: normal; | |
| 184 font-style: normal; | |
| 185 } | |
| 186 | |
| 187 body { | |
| 188 property: imported-media-screen-stylesheet; | |
| 189 } | |
| 190 | |
| 191 } | |
| 192 ' | |
| 193 | |
| 194 StyleSheet: '@import url(styles-new-API-1.css); | |
| 195 | |
| 196 @page { margin: 2cm } /* All margins set to 2cm */ | |
| 197 | |
| 198 @page :first { | |
| 199 margin-top: 10cm /* Top margin on first page 10cm */ | |
| 200 } | |
| 201 | |
| 202 @media screen { | |
| 203 | |
| 204 #absent-id { | |
| 205 } | |
| 206 | |
| 207 @font-face { | |
| 208 font-family: 'TheFont'; | |
| 209 src: url('font.url'); | |
| 210 font-weight: normal; | |
| 211 font-style: normal; | |
| 212 } | |
| 213 | |
| 214 body { | |
| 215 property: imported-media-screen-stylesheet; | |
| 216 } | |
| 217 | |
| 218 } | |
| 219 ' | |
| 220 | |
| 221 StyleSheet: '@charset "UTF-8"; | |
| 222 | |
| 223 @import url("styles-new-API-1.css"); | |
| 224 | |
| 225 html { | |
| 226 font-weight: 400; | |
| 227 } | |
| 228 | |
| 229 @media screen { | |
| 230 body { | |
| 231 font-size: 12px; | |
| 232 foo: bar ! | |
| 233 | |
| 234 important /* !important property not recognized by WebCore */; | |
| 235 height: 100% !important; | |
| 236 colorz: "!important"; | |
| 237 important:!important; | |
| 238 color: yellow; | |
| 239 color: "badcolor" ! important /* good property with strange value */; | |
| 240 } | |
| 241 | |
| 242 /* comment before selector */body.main1/* comment after selector */{/* comment *
/color: #F00BAA;zoo:moo /* not an !important unrecognized property */}/* comment
*/ | |
| 243 | |
| 244 body.main2{background: green /* value !important comment */ !important /* no sem
icolon, very !important */} | |
| 245 } | |
| 246 | |
| 247 body::after { | |
| 248 content: "After body"; | |
| 249 } | |
| 250 | |
| 251 h1 { | |
| 252 height : 100% ; border: 1px solid; border-width: 2px; background-color : #33
FF33; googles: abra; foo: .bar; -moz-goog: 1***; border-width: 0px; /*padding-to
p:1px;*/ | |
| 253 } | |
| 254 ' | |
| 255 | |
| 256 StyleSheet: ' | |
| 257 | |
| 258 /* An inline stylesheet */ | |
| 259 body.mainpage { | |
| 260 text-decoration: none; /* at least one valid property is necessary for WebCo
re to match a rule */ | |
| 261 ;badproperty: 1badvalue1; | |
| 262 } | |
| 263 | |
| 264 body.mainpage { | |
| 265 prop1: val1; | |
| 266 prop2: val2; | |
| 267 } | |
| 268 | |
| 269 body:hover { | |
| 270 color: #CDE; | |
| 271 } | |
| 272 ' | |
| 273 | |
| 274 === Last stylesheet patched === | |
| 275 | |
| 276 StyleSheet: 'body.mainpage { text-decoration: strikethrough; badproperty:
2badvalue2;}body { text-align: justify;}' | |
| 277 | |
| 278 === After selector set === | |
| 279 | |
| 280 StyleSheet: 'html *, body[foo="bar"] { text-decoration: strikethrough; bad
property: 2badvalue2;}body { text-align: justify;}' | |
| 281 | |
| 282 === After style text set === | |
| 283 | |
| 284 StyleSheet: 'html *, body[foo="bar"] { | |
| 285 color: white; background: black; | |
| 286 }body { text-align: justify;}' | |
| 287 | |
| 288 Running: test_addRule | |
| 289 | |
| 290 === Matched rules after rule added === | |
| 291 body: [user-agent] { | |
| 292 ['display':'block'] @[undefined-undefined] | |
| 293 ['margin-top':'8px'] @[undefined-undefined] | |
| 294 ['margin-right':'8px'] @[undefined-undefined] | |
| 295 ['margin-bottom':'8px'] @[undefined-undefined] | |
| 296 ['margin-left':'8px'] @[undefined-undefined] | |
| 297 } | |
| 298 body: [regular, 20:0-20:4] { | |
| 299 ['property':'imported-media-screen-stylesheet' non-parsed] @[21:4-21:47] | |
| 300 } | |
| 301 body: [regular, 20:0-20:4] { | |
| 302 ['property':'imported-media-screen-stylesheet' non-parsed] @[21:4-21:47] | |
| 303 } | |
| 304 body: [regular, 9:0-9:4] { | |
| 305 ['font-size':'12px'] @[10:4-10:20] | |
| 306 ['foo':'bar ! | |
| 307 | |
| 308 important /* !important property not recognized by WebCore */' is-important
non-parsed] @[11:4-13:66] | |
| 309 ['height':'100% !important' is-important] @[14:4-14:28] | |
| 310 ['colorz':'"!important"' non-parsed] @[15:4-15:25] | |
| 311 ['important':'!important' is-important non-parsed] @[16:4-16:25] | |
| 312 ['color':'yellow'] @[17:4-17:18] | |
| 313 ['color':'"badcolor" ! important /* good property with strange value */' is-
important non-parsed] @[18:4-18:73] | |
| 314 } | |
| 315 html *, body[foo="bar"]: [regular, 0:0-0:6; 0:8-0:23] { | |
| 316 ['color':'white'] @[1:4-1:17] | |
| 317 ['background':'black'] @[1:18-1:36] | |
| 318 ['background-image':'initial'] @[undefined-undefined] | |
| 319 ['background-repeat-x':'initial'] @[undefined-undefined] | |
| 320 ['background-repeat-y':'initial'] @[undefined-undefined] | |
| 321 ['background-attachment':'initial'] @[undefined-undefined] | |
| 322 ['background-position-x':'initial'] @[undefined-undefined] | |
| 323 ['background-position-y':'initial'] @[undefined-undefined] | |
| 324 ['background-origin':'initial'] @[undefined-undefined] | |
| 325 ['background-clip':'initial'] @[undefined-undefined] | |
| 326 ['background-color':'black'] @[undefined-undefined] | |
| 327 ['background-size':'initial'] @[undefined-undefined] | |
| 328 } | |
| 329 body: [regular, 2:1-2:5] { | |
| 330 ['text-align':'justify'] @[2:11-2:31] | |
| 331 } | |
| 332 body: [inspector, 0:0-0:4] { | |
| 333 ['font-family':'serif'] @[1:4-1:23] | |
| 334 } | |
| 335 body.main1: [regular, 21:29-21:67] { | |
| 336 ['color':'#F00BAA'] @[21:81-21:96] | |
| 337 ['zoo':'moo /* not an !important unrecognized property */' non-parsed] @[21:
96-21:149] | |
| 338 } | |
| 339 body.main2: [regular, 23:0-23:10] { | |
| 340 ['background':'green /* value !important comment */ !important /* no semicol
on, very !important */' is-important] @[23:11-23:106] | |
| 341 ['background-image':'initial' is-important] @[undefined-undefined] | |
| 342 ['background-repeat-x':'initial' is-important] @[undefined-undefined] | |
| 343 ['background-repeat-y':'initial' is-important] @[undefined-undefined] | |
| 344 ['background-attachment':'initial' is-important] @[undefined-undefined] | |
| 345 ['background-position-x':'initial' is-important] @[undefined-undefined] | |
| 346 ['background-position-y':'initial' is-important] @[undefined-undefined] | |
| 347 ['background-origin':'initial' is-important] @[undefined-undefined] | |
| 348 ['background-clip':'initial' is-important] @[undefined-undefined] | |
| 349 ['background-color':'green' is-important] @[undefined-undefined] | |
| 350 ['background-size':'initial' is-important] @[undefined-undefined] | |
| 351 } | |
| 352 | |
| 353 Running: test_disableProperty | |
| 354 | |
| 355 === After property manipulations === | |
| 356 [text='/* height : 100% ; */'] disabled | |
| 357 ['border':'1px solid'] @[31:26-31:44] | |
| 358 ['border-width':'2px'] @[31:45-31:63] | |
| 359 ['googles':'abra' non-parsed] @[31:65-31:79] | |
| 360 ['foo':'.bar' non-parsed] @[31:80-31:90] | |
| 361 ['-moz-goog':'1***' non-parsed] @[31:91-31:107] | |
| 362 ['font-size':'12px'] @[32:4-32:20] | |
| 363 ['border-width':'1px'] @[33:4-33:22] | |
| 364 [text='/* font-size: 14px; */'] disabled | |
| 365 ['padding-top':'1px'] @[35:4-35:20] | |
| 366 ['border-top-width':'1px'] @[undefined-undefined] | |
| 367 ['border-right-width':'1px'] @[undefined-undefined] | |
| 368 ['border-bottom-width':'1px'] @[undefined-undefined] | |
| 369 ['border-left-width':'1px'] @[undefined-undefined] | |
| 370 ['border-top-style':'solid'] @[undefined-undefined] | |
| 371 ['border-right-style':'solid'] @[undefined-undefined] | |
| 372 ['border-bottom-style':'solid'] @[undefined-undefined] | |
| 373 ['border-left-style':'solid'] @[undefined-undefined] | |
| 374 ['border-top-color':'initial'] @[undefined-undefined] | |
| 375 ['border-right-color':'initial'] @[undefined-undefined] | |
| 376 ['border-bottom-color':'initial'] @[undefined-undefined] | |
| 377 ['border-left-color':'initial'] @[undefined-undefined] | |
| 378 ['border-image-source':'initial'] @[undefined-undefined] | |
| 379 ['border-image-slice':'initial'] @[undefined-undefined] | |
| 380 ['border-image-width':'initial'] @[undefined-undefined] | |
| 381 ['border-image-outset':'initial'] @[undefined-undefined] | |
| 382 ['border-image-repeat':'initial'] @[undefined-undefined] | |
| 383 | |
| 384 === After property enabled === | |
| 385 [text='/* height : 100% ; */'] disabled | |
| 386 ['border':'1px solid'] @[31:26-31:44] | |
| 387 ['border-width':'2px'] @[31:45-31:63] | |
| 388 ['googles':'abra' non-parsed] @[31:65-31:79] | |
| 389 ['foo':'.bar' non-parsed] @[31:80-31:90] | |
| 390 ['-moz-goog':'1***' non-parsed] @[31:91-31:107] | |
| 391 ['font-size':'12px'] @[32:4-32:20] | |
| 392 ['border-width':'1px'] @[33:4-33:22] | |
| 393 ['font-size':'14px'] @[34:4-34:20] | |
| 394 ['padding-top':'1px'] @[35:4-35:20] | |
| 395 ['border-top-width':'1px'] @[undefined-undefined] | |
| 396 ['border-right-width':'1px'] @[undefined-undefined] | |
| 397 ['border-bottom-width':'1px'] @[undefined-undefined] | |
| 398 ['border-left-width':'1px'] @[undefined-undefined] | |
| 399 ['border-top-style':'solid'] @[undefined-undefined] | |
| 400 ['border-right-style':'solid'] @[undefined-undefined] | |
| 401 ['border-bottom-style':'solid'] @[undefined-undefined] | |
| 402 ['border-left-style':'solid'] @[undefined-undefined] | |
| 403 ['border-top-color':'initial'] @[undefined-undefined] | |
| 404 ['border-right-color':'initial'] @[undefined-undefined] | |
| 405 ['border-bottom-color':'initial'] @[undefined-undefined] | |
| 406 ['border-left-color':'initial'] @[undefined-undefined] | |
| 407 ['border-image-source':'initial'] @[undefined-undefined] | |
| 408 ['border-image-slice':'initial'] @[undefined-undefined] | |
| 409 ['border-image-width':'initial'] @[undefined-undefined] | |
| 410 ['border-image-outset':'initial'] @[undefined-undefined] | |
| 411 ['border-image-repeat':'initial'] @[undefined-undefined] | |
| 412 | |
| OLD | NEW |