The test verifies functionality of protocol method CSS.setEffectivePropertyValueForNode.
Dumping inline style:
{
padding-top: 55px; @[0:0-0:18]
margin-top: 33px !important; @[0:19-0:47]
--x: foo; @[0:48-0:55]
padding-top: 55px; @[undefined-undefined]
--x: foo; @[undefined-undefined]
margin-top: 33px !important; @[undefined-undefined]
}
Dumping matched rules:
@layer base
*#inspected* { regular
background-color: blue; @[38:8-38:31]
background-color: blue; @[undefined-undefined]
}
*#inspected* { regular
margin-left: 10px !important; @[1:4-1:33]
margin-left: 10px !important; @[undefined-undefined]
}
*#inspected* { regular
padding: 10px 20px 30px 40px; @[6:4-6:33]
padding-top: 50px; @[7:4-7:22]
padding-right: 20px; @[undefined-undefined]
padding-bottom: 30px; @[undefined-undefined]
padding-left: 40px; @[undefined-undefined]
padding-top: 50px; @[undefined-undefined]
}
@media (min-width: 1px)
*#inspected* { regular
padding-left: 5px; @[12:8-12:26]
margin-left: 20px; @[13:8-13:26]
padding-left: 10px; @[14:8-14:27]
margin-top: 15px !important; @[15:8-15:36]
margin-left: 20px; @[undefined-undefined]
padding-left: 10px; @[undefined-undefined]
margin-top: 15px !important; @[undefined-undefined]
}
@supports (display: grid) or (display: inline-grid)
*#inspected* { regular
display: grid; @[32:8-32:22]
display: grid; @[undefined-undefined]
}
@scope (html)
*#inspected* { regular
color: red; @[50:8-50:19]
color: red; @[undefined-undefined]
}
@scope (html) to (.child-div)
*#inspected* { regular
color: lightcyan; @[56:6-56:23]
color: lightcyan; @[undefined-undefined]
}
Dumping inherited rules:
@layer base.nested
*body* { regular
background-color: green; @[42:12-42:36]
background-color: green; @[undefined-undefined]
}
Running test: testBasicPropertyChange
{
padding-top: 55px; @[0:0-0:18]
margin-top: 33px !important; @[0:19-0:47]
--x: foo; @[0:48-0:55]
padding-top: 55px; @[undefined-undefined]
--x: foo; @[undefined-undefined]
margin-top: 33px !important; @[undefined-undefined]
}
@layer base
*#inspected* { regular
background-color: blue; @[38:8-38:31]
background-color: blue; @[undefined-undefined]
}
*#inspected* { regular
margin-left: 10px !important; @[1:4-1:33]
margin-left: 10px !important; @[undefined-undefined]
}
*#inspected* { regular
padding: 10px 20px 30px 40px; @[6:4-6:33]
padding-top: 50px; @[7:4-7:22]
padding-right: 20px; @[undefined-undefined]
padding-bottom: 30px; @[undefined-undefined]
padding-left: 40px; @[undefined-undefined]
padding-top: 50px; @[undefined-undefined]
}
@media (min-width: 1px)
*#inspected* { regular
padding-left: 5px; @[12:8-12:26]
margin-left: 20px; @[13:8-13:26]
padding-left: 101px; @[14:8-14:28]
margin-top: 15px !important; @[15:8-15:36]
margin-left: 20px; @[undefined-undefined]
padding-left: 101px; @[undefined-undefined]
margin-top: 15px !important; @[undefined-undefined]
}
@supports (display: grid) or (display: inline-grid)
*#inspected* { regular
display: grid; @[32:8-32:22]
display: grid; @[undefined-undefined]
}
@scope (html)
*#inspected* { regular
color: red; @[50:8-50:19]
color: red; @[undefined-undefined]
}
@scope (html) to (.child-div)
*#inspected* { regular
color: lightcyan; @[56:6-56:23]
color: lightcyan; @[undefined-undefined]
}
@layer base.nested
*body* { regular
background-color: green; @[42:12-42:36]
background-color: green; @[undefined-undefined]
}
Running test: testChangePropertyInShortHand
{
padding-top: 55px; @[0:0-0:18]
margin-top: 33px !important; @[0:19-0:47]
--x: foo; @[0:48-0:55]
padding-top: 55px; @[undefined-undefined]
--x: foo; @[undefined-undefined]
margin-top: 33px !important; @[undefined-undefined]
}
@layer base
*#inspected* { regular
background-color: blue; @[38:8-38:31]
background-color: blue; @[undefined-undefined]
}
*#inspected* { regular
margin-left: 10px !important; @[1:4-1:33]
margin-left: 10px !important; @[undefined-undefined]
}
*#inspected* { regular
padding: 10px 20px 101px 40px; @[6:4-6:34]
padding-top: 50px; @[7:4-7:22]
padding-right: 20px; @[undefined-undefined]
padding-bottom: 101px; @[undefined-undefined]
padding-left: 40px; @[undefined-undefined]
padding-top: 50px; @[undefined-undefined]
}
@media (min-width: 1px)
*#inspected* { regular
padding-left: 5px; @[12:8-12:26]
margin-left: 20px; @[13:8-13:26]
padding-left: 10px; @[14:8-14:27]
margin-top: 15px !important; @[15:8-15:36]
margin-left: 20px; @[undefined-undefined]
padding-left: 10px; @[undefined-undefined]
margin-top: 15px !important; @[undefined-undefined]
}
@supports (display: grid) or (display: inline-grid)
*#inspected* { regular
display: grid; @[32:8-32:22]
display: grid; @[undefined-undefined]
}
@scope (html)
*#inspected* { regular
color: red; @[50:8-50:19]
color: red; @[undefined-undefined]
}
@scope (html) to (.child-div)
*#inspected* { regular
color: lightcyan; @[56:6-56:23]
color: lightcyan; @[undefined-undefined]
}
@layer base.nested
*body* { regular
background-color: green; @[42:12-42:36]
background-color: green; @[undefined-undefined]
}
Running test: testChangeImportantProperty
{
padding-top: 55px; @[0:0-0:18]
margin-top: 33px !important; @[0:19-0:47]
--x: foo; @[0:48-0:55]
padding-top: 55px; @[undefined-undefined]
--x: foo; @[undefined-undefined]
margin-top: 33px !important; @[undefined-undefined]
}
@layer base
*#inspected* { regular
background-color: blue; @[38:8-38:31]
background-color: blue; @[undefined-undefined]
}
*#inspected* { regular
margin-left: 101px !important; @[1:4-1:34]
margin-left: 101px !important; @[undefined-undefined]
}
*#inspected* { regular
padding: 10px 20px 30px 40px; @[6:4-6:33]
padding-top: 50px; @[7:4-7:22]
padding-right: 20px; @[undefined-undefined]
padding-bottom: 30px; @[undefined-undefined]
padding-left: 40px; @[undefined-undefined]
padding-top: 50px; @[undefined-undefined]
}
@media (min-width: 1px)
*#inspected* { regular
padding-left: 5px; @[12:8-12:26]
margin-left: 20px; @[13:8-13:26]
padding-left: 10px; @[14:8-14:27]
margin-top: 15px !important; @[15:8-15:36]
margin-left: 20px; @[undefined-undefined]
padding-left: 10px; @[undefined-undefined]
margin-top: 15px !important; @[undefined-undefined]
}
@supports (display: grid) or (display: inline-grid)
*#inspected* { regular
display: grid; @[32:8-32:22]
display: grid; @[undefined-undefined]
}
@scope (html)
*#inspected* { regular
color: red; @[50:8-50:19]
color: red; @[undefined-undefined]
}
@scope (html) to (.child-div)
*#inspected* { regular
color: lightcyan; @[56:6-56:23]
color: lightcyan; @[undefined-undefined]
}
@layer base.nested
*body* { regular
background-color: green; @[42:12-42:36]
background-color: green; @[undefined-undefined]
}
Running test: testChangeInlineProperty
{
padding-top: 101px; @[0:0-0:19]
margin-top: 33px !important; @[0:20-0:48]
--x: foo; @[0:49-0:56]
padding-top: 101px; @[undefined-undefined]
--x: foo; @[undefined-undefined]
margin-top: 33px !important; @[undefined-undefined]
}
@layer base
*#inspected* { regular
background-color: blue; @[38:8-38:31]
background-color: blue; @[undefined-undefined]
}
*#inspected* { regular
margin-left: 10px !important; @[1:4-1:33]
margin-left: 10px !important; @[undefined-undefined]
}
*#inspected* { regular
padding: 10px 20px 30px 40px; @[6:4-6:33]
padding-top: 50px; @[7:4-7:22]
padding-right: 20px; @[undefined-undefined]
padding-bottom: 30px; @[undefined-undefined]
padding-left: 40px; @[undefined-undefined]
padding-top: 50px; @[undefined-undefined]
}
@media (min-width: 1px)
*#inspected* { regular
padding-left: 5px; @[12:8-12:26]
margin-left: 20px; @[13:8-13:26]
padding-left: 10px; @[14:8-14:27]
margin-top: 15px !important; @[15:8-15:36]
margin-left: 20px; @[undefined-undefined]
padding-left: 10px; @[undefined-undefined]
margin-top: 15px !important; @[undefined-undefined]
}
@supports (display: grid) or (display: inline-grid)
*#inspected* { regular
display: grid; @[32:8-32:22]
display: grid; @[undefined-undefined]
}
@scope (html)
*#inspected* { regular
color: red; @[50:8-50:19]
color: red; @[undefined-undefined]
}
@scope (html) to (.child-div)
*#inspected* { regular
color: lightcyan; @[56:6-56:23]
color: lightcyan; @[undefined-undefined]
}
@layer base.nested
*body* { regular
background-color: green; @[42:12-42:36]
background-color: green; @[undefined-undefined]
}
Running test: testChangeInlineImportantProperty
{
padding-top: 55px; @[0:0-0:18]
margin-top: 101px !important; @[0:19-0:48]
--x: foo; @[0:49-0:56]
padding-top: 55px; @[undefined-undefined]
--x: foo; @[undefined-undefined]
margin-top: 101px !important; @[undefined-undefined]
}
@layer base
*#inspected* { regular
background-color: blue; @[38:8-38:31]
background-color: blue; @[undefined-undefined]
}
*#inspected* { regular
margin-left: 10px !important; @[1:4-1:33]
margin-left: 10px !important; @[undefined-undefined]
}
*#inspected* { regular
padding: 10px 20px 30px 40px; @[6:4-6:33]
padding-top: 50px; @[7:4-7:22]
padding-right: 20px; @[undefined-undefined]
padding-bottom: 30px; @[undefined-undefined]
padding-left: 40px; @[undefined-undefined]
padding-top: 50px; @[undefined-undefined]
}
@media (min-width: 1px)
*#inspected* { regular
padding-left: 5px; @[12:8-12:26]
margin-left: 20px; @[13:8-13:26]
padding-left: 10px; @[14:8-14:27]
margin-top: 15px !important; @[15:8-15:36]
margin-left: 20px; @[undefined-undefined]
padding-left: 10px; @[undefined-undefined]
margin-top: 15px !important; @[undefined-undefined]
}
@supports (display: grid) or (display: inline-grid)
*#inspected* { regular
display: grid; @[32:8-32:22]
display: grid; @[undefined-undefined]
}
@scope (html)
*#inspected* { regular
color: red; @[50:8-50:19]
color: red; @[undefined-undefined]
}
@scope (html) to (.child-div)
*#inspected* { regular
color: lightcyan; @[56:6-56:23]
color: lightcyan; @[undefined-undefined]
}
@layer base.nested
*body* { regular
background-color: green; @[42:12-42:36]
background-color: green; @[undefined-undefined]
}
Running test: testChangeMissingProperty
{
padding-top: 55px; @[0:0-0:18]
margin-top: 33px !important; @[0:19-0:47]
--x: foo; @[0:48-0:56]
margin-bottom: 101px; @[1:0-1:21]
padding-top: 55px; @[undefined-undefined]
--x: foo; @[undefined-undefined]
margin-bottom: 101px; @[undefined-undefined]
margin-top: 33px !important; @[undefined-undefined]
}
@layer base
*#inspected* { regular
background-color: blue; @[38:8-38:31]
background-color: blue; @[undefined-undefined]
}
*#inspected* { regular
margin-left: 10px !important; @[1:4-1:33]
margin-left: 10px !important; @[undefined-undefined]
}
*#inspected* { regular
padding: 10px 20px 30px 40px; @[6:4-6:33]
padding-top: 50px; @[7:4-7:22]
padding-right: 20px; @[undefined-undefined]
padding-bottom: 30px; @[undefined-undefined]
padding-left: 40px; @[undefined-undefined]
padding-top: 50px; @[undefined-undefined]
}
@media (min-width: 1px)
*#inspected* { regular
padding-left: 5px; @[12:8-12:26]
margin-left: 20px; @[13:8-13:26]
padding-left: 10px; @[14:8-14:27]
margin-top: 15px !important; @[15:8-15:36]
margin-left: 20px; @[undefined-undefined]
padding-left: 10px; @[undefined-undefined]
margin-top: 15px !important; @[undefined-undefined]
}
@supports (display: grid) or (display: inline-grid)
*#inspected* { regular
display: grid; @[32:8-32:22]
display: grid; @[undefined-undefined]
}
@scope (html)
*#inspected* { regular
color: red; @[50:8-50:19]
color: red; @[undefined-undefined]
}
@scope (html) to (.child-div)
*#inspected* { regular
color: lightcyan; @[56:6-56:23]
color: lightcyan; @[undefined-undefined]
}
@layer base.nested
*body* { regular
background-color: green; @[42:12-42:36]
background-color: green; @[undefined-undefined]
}
Running test: testAppendWithSeparator
Dumping inline style:
{
padding-left: 10px; @[0:0-0:18]
padding-left: 10px; @[undefined-undefined]
}
Dumping matched rules:
Dumping inherited rules:
@layer base.nested
*body* { regular
background-color: green; @[42:12-42:36]
background-color: green; @[undefined-undefined]
}
Resulting styles
{
padding-left: 10px; @[0:0-0:19]
padding-right: 101px; @[1:0-1:21]
padding-left: 10px; @[undefined-undefined]
padding-right: 101px; @[undefined-undefined]
}
@layer base.nested
*body* { regular
background-color: green; @[42:12-42:36]
background-color: green; @[undefined-undefined]
}
Running test: testChangeCustomProperty
{
padding-top: 55px; @[0:0-0:18]
margin-top: 33px !important; @[0:19-0:47]
--x: bar; @[0:48-0:57]
padding-top: 55px; @[undefined-undefined]
--x: bar; @[undefined-undefined]
margin-top: 33px !important; @[undefined-undefined]
}
@layer base
*#inspected* { regular
background-color: blue; @[38:8-38:31]
background-color: blue; @[undefined-undefined]
}
*#inspected* { regular
margin-left: 10px !important; @[1:4-1:33]
margin-left: 10px !important; @[undefined-undefined]
}
*#inspected* { regular
padding: 10px 20px 30px 40px; @[6:4-6:33]
padding-top: 50px; @[7:4-7:22]
padding-right: 20px; @[undefined-undefined]
padding-bottom: 30px; @[undefined-undefined]
padding-left: 40px; @[undefined-undefined]
padding-top: 50px; @[undefined-undefined]
}
@media (min-width: 1px)
*#inspected* { regular
padding-left: 5px; @[12:8-12:26]
margin-left: 20px; @[13:8-13:26]
padding-left: 10px; @[14:8-14:27]
margin-top: 15px !important; @[15:8-15:36]
margin-left: 20px; @[undefined-undefined]
padding-left: 10px; @[undefined-undefined]
margin-top: 15px !important; @[undefined-undefined]
}
@supports (display: grid) or (display: inline-grid)
*#inspected* { regular
display: grid; @[32:8-32:22]
display: grid; @[undefined-undefined]
}
@scope (html)
*#inspected* { regular
color: red; @[50:8-50:19]
color: red; @[undefined-undefined]
}
@scope (html) to (.child-div)
*#inspected* { regular
color: lightcyan; @[56:6-56:23]
color: lightcyan; @[undefined-undefined]
}
@layer base.nested
*body* { regular
background-color: green; @[42:12-42:36]
background-color: green; @[undefined-undefined]
}