mirror of
https://github.com/servo/servo.git
synced 2025-06-28 02:53:48 +01:00
35 lines
1,010 B
HTML
35 lines
1,010 B
HTML
<!doctype html>
|
|
<title>CSS Container Queries Test: Invalidate style queries and display:contents</title>
|
|
<link rel="help" href="https://drafts.csswg.org/css-contain-3/#style-container">
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<script src="support/cq-testcommon.js"></script>
|
|
<style>
|
|
#container.contents {
|
|
--foo: bar;
|
|
display: contents;
|
|
}
|
|
#target {
|
|
color: red;
|
|
}
|
|
@container style(--foo: bar) {
|
|
#target {
|
|
color: green;
|
|
}
|
|
}
|
|
</style>
|
|
<div id="container">
|
|
<div id="target">This should be green</div>
|
|
</div>
|
|
<script>
|
|
setup(() => assert_implements_container_queries());
|
|
|
|
test(() => {
|
|
assert_equals(getComputedStyle(target).color, "rgb(255, 0, 0)");
|
|
}, "Initially the color is red");
|
|
|
|
test(() => {
|
|
container.className = "contents";
|
|
assert_equals(getComputedStyle(target).color, "rgb(0, 128, 0)");
|
|
}, "After display and --foo changes, style() query causes the color to be green");
|
|
</script>
|