Test CSS.getMatchedStylesForNode and CSS.setContainerQueryText methods for container queries in a constructed stylesheet
@container (min-width: 100px)
*.item* { regular
font-size: 1px; @[8:6-8:21]
font-size: 1px; @[undefined-undefined]
}
==== Style sheet text ====
#parent {
width: 200px;
contain: layout style size;
}
@container (max-width: 300px) {
.item {
font-size: 1px;
}
}
#named-container {
width: 300px;
container-name: container-1;
container-type: inline-size;
}
@container container-1 (max-width: 300px) {
.item {
color: #abc;
}
}
Dumping matched rules:
@container (max-width: 300px)
*.item* { regular
font-size: 1px; @[8:6-8:21]
font-size: 1px; @[undefined-undefined]
}
@container container-1 (max-width: 300px)
*.item* { regular
color: #abc; @[20:6-20:18]
color: rgb(170, 187, 204); @[undefined-undefined]
}
Dumping inherited rules:
*#parent* { regular
width: 200px; @[2:4-2:17]
contain: layout style size; @[3:4-3:31]
width: 200px; @[undefined-undefined]
contain: size layout style; @[undefined-undefined]
}
*#named-container* { regular
width: 300px; @[13:4-13:17]
container-name: container-1; @[14:4-14:32]
container-type: inline-size; @[15:4-15:32]
width: 300px; @[undefined-undefined]
container-name: container-1; @[undefined-undefined]
container-type: inline-size; @[undefined-undefined]
}