The test verifies CSS.getMatchedStylesForNode when used concurrently with the CSSOM modifications for internal stylesheets.
Running test: testModifyRule
--------------
Original rule:
*#modifyRule* { regular
box-sizing: border-box; @[2:4-2:27]
box-sizing: border-box; @[undefined-undefined]
}
*#modifyRule* { regular
height: 100%; @[6:4-6:17]
height: 100%; @[undefined-undefined]
}
*#modifyRule* { regular
width: 100%; @[10:4-10:16]
width: 100%; @[undefined-undefined]
}
--------------
Modified rule 1:
*#modifyRule* { regular
box-sizing: border-box; @[0:14-0:37]
color: red; @[0:38-0:49]
box-sizing: border-box; @[undefined-undefined]
color: red; @[undefined-undefined]
}
*#modifyRule* { regular
height: 100%; @[6:4-6:17]
height: 100%; @[undefined-undefined]
}
*#modifyRule* { regular
width: 100%; @[10:4-10:16]
width: 100%; @[undefined-undefined]
}
---------------
Modified rule 3:
*#modifyRule* { regular
box-sizing: border-box; @[0:14-0:37]
color: red; @[0:38-0:49]
box-sizing: border-box; @[undefined-undefined]
color: red; @[undefined-undefined]
}
*#modifyRule* { regular
height: 100%; @[6:4-6:17]
height: 100%; @[undefined-undefined]
}
*#modifyRule* { regular
width: 100%; @[7:15-7:27]
color: blue; @[7:28-7:40]
width: 100%; @[undefined-undefined]
color: blue; @[undefined-undefined]
}
---------------
Modified rule 2:
*#modifyRule* { regular
box-sizing: border-box; @[0:14-0:37]
color: red; @[0:38-0:49]
box-sizing: border-box; @[undefined-undefined]
color: red; @[undefined-undefined]
}
*#modifyRule* { regular
height: 100%; @[0:65-0:78]
color: green; @[0:79-0:92]
height: 100%; @[undefined-undefined]
color: green; @[undefined-undefined]
}
*#modifyRule* { regular
width: 100%; @[0:108-0:120]
color: blue; @[0:121-0:133]
width: 100%; @[undefined-undefined]
color: blue; @[undefined-undefined]
}
---------------
Restored rule 2:
*#modifyRule* { regular
box-sizing: border-box; @[0:14-0:37]
color: red; @[0:38-0:49]
box-sizing: border-box; @[undefined-undefined]
color: red; @[undefined-undefined]
}
*#modifyRule* { regular
height: 100%; @[6:4-6:17]
height: 100%; @[undefined-undefined]
}
*#modifyRule* { regular
width: 100%; @[7:15-7:27]
color: blue; @[7:28-7:40]
width: 100%; @[undefined-undefined]
color: blue; @[undefined-undefined]
}
-----------------
Restored rule 1,3:
*#modifyRule* { regular
box-sizing: border-box; @[2:4-2:27]
box-sizing: border-box; @[undefined-undefined]
}
*#modifyRule* { regular
height: 100%; @[6:4-6:17]
height: 100%; @[undefined-undefined]
}
*#modifyRule* { regular
width: 100%; @[10:4-10:16]
width: 100%; @[undefined-undefined]
}
Running test: testInsertFirstRule
Original rule:
*#insertRule* { regular
box-sizing: border-box; @[2:4-2:27]
box-sizing: border-box; @[undefined-undefined]
}
*#insertRule* { regular
width: 100%; @[6:4-6:16]
width: 100%; @[undefined-undefined]
}
--------------
After inserted rule:
*#insertRule* { regular
color: red; @[0:14-0:25]
color: red; @[undefined-undefined]
}
*#insertRule* { regular
box-sizing: border-box; @[2:4-2:27]
box-sizing: border-box; @[undefined-undefined]
}
*#insertRule* { regular
width: 100%; @[6:4-6:16]
width: 100%; @[undefined-undefined]
}
--------------
Restored rule:
*#insertRule* { regular
box-sizing: border-box; @[2:4-2:27]
box-sizing: border-box; @[undefined-undefined]
}
*#insertRule* { regular
width: 100%; @[6:4-6:16]
width: 100%; @[undefined-undefined]
}
Running test: testInsertMiddleRule
Original rule:
*#insertRule* { regular
box-sizing: border-box; @[2:4-2:27]
box-sizing: border-box; @[undefined-undefined]
}
*#insertRule* { regular
width: 100%; @[6:4-6:16]
width: 100%; @[undefined-undefined]
}
--------------
After inserted rule:
*#insertRule* { regular
box-sizing: border-box; @[2:4-2:27]
box-sizing: border-box; @[undefined-undefined]
}
*#insertRule* { regular
color: red; @[3:15-3:26]
color: red; @[undefined-undefined]
}
*#insertRule* { regular
width: 100%; @[6:4-6:16]
width: 100%; @[undefined-undefined]
}
--------------
Restored rule:
*#insertRule* { regular
box-sizing: border-box; @[2:4-2:27]
box-sizing: border-box; @[undefined-undefined]
}
*#insertRule* { regular
width: 100%; @[6:4-6:16]
width: 100%; @[undefined-undefined]
}
Running test: testInsertLastRule
Original rule:
*#insertRule* { regular
box-sizing: border-box; @[2:4-2:27]
box-sizing: border-box; @[undefined-undefined]
}
*#insertRule* { regular
width: 100%; @[6:4-6:16]
width: 100%; @[undefined-undefined]
}
--------------
After inserted rule:
*#insertRule* { regular
box-sizing: border-box; @[2:4-2:27]
box-sizing: border-box; @[undefined-undefined]
}
*#insertRule* { regular
width: 100%; @[6:4-6:16]
width: 100%; @[undefined-undefined]
}
*#insertRule* { regular
color: red; @[7:15-7:26]
color: red; @[undefined-undefined]
}
--------------
Restored rule:
*#insertRule* { regular
box-sizing: border-box; @[2:4-2:27]
box-sizing: border-box; @[undefined-undefined]
}
*#insertRule* { regular
width: 100%; @[6:4-6:16]
width: 100%; @[undefined-undefined]
}
Running test: testRemoveRule
Original rule:
*#removeRule* { regular
box-sizing: border-box; @[2:4-2:27]
box-sizing: border-box; @[undefined-undefined]
}
*#removeRule* { regular
width: 100%; @[6:4-6:16]
width: 100%; @[undefined-undefined]
}
-------------------
After remove rule 1:
*#removeRule* { regular
width: 100%; @[6:4-6:16]
width: 100%; @[undefined-undefined]
}
-------------------
After remove rule 2: