34 lines
1 KiB
HTML
34 lines
1 KiB
HTML
<!doctype html>
|
|
<title>getAnimations depending on container query</title>
|
|
<link rel="help" href="https://drafts.csswg.org/css-conditional-5/#animated-containers">
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<script src="support/cq-testcommon.js"></script>
|
|
<style>
|
|
#container {
|
|
container-type: inline-size;
|
|
width: 100px;
|
|
}
|
|
#div { color: red; }
|
|
@keyframes test {
|
|
from { color: green; }
|
|
to { color: green; }
|
|
}
|
|
@container (min-width: 200px) {
|
|
#div { animation: test 1s linear forwards; }
|
|
}
|
|
</style>
|
|
<div id=container>
|
|
<div id=div>Green</div>
|
|
</div>
|
|
<script>
|
|
setup(() => assert_implements_size_container_queries());
|
|
|
|
test(() => {
|
|
assert_equals(getComputedStyle(div).color, 'rgb(255, 0, 0)');
|
|
|
|
container.style = 'width:300px';
|
|
assert_equals(div.getAnimations().length, 1);
|
|
assert_equals(getComputedStyle(div).color, 'rgb(0, 128, 0)');
|
|
}, 'Calling getAnimations updates layout of parent frame if needed');
|
|
</script>
|