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]
    }