Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that expects 20 subtest issues.
- This WPT test may be referenced by the following Test IDs:
- /css/css-values/tree-counting/sibling-index-keyframe-registered-properties-dynamic.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<title>CSS Values and Units Test: sibling-index() changing registered custom property values during @keyframes animation</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
@property --time { syntax: "<time>"; initial-value: 0s; inherits: false; }
@property --angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@property --resolution { syntax: "<resolution>"; initial-value: 1dppx; inherits: false; }
@property --percentage { syntax: "<percentage>"; initial-value: 0%; inherits: false; }
@property --number { syntax: "<number>"; initial-value: 0; inherits: false; }
@property --integer { syntax: "<integer>"; initial-value: 0; inherits: false; }
@property --length { syntax: "<length>"; initial-value: 0px; inherits: false; }
@property --length-percentage { syntax: "<length-percentage>"; initial-value: 0px; inherits: false; }
@property --color { syntax: "<color>"; initial-value: black; inherits: false; }
@property --list { syntax: "<integer>+"; initial-value: 0; inherits: false; }
@keyframes --anim {
from {
--time: calc(2s * sibling-index());
--angle: calc(30deg * sibling-index());
--resolution: calc(1dppx * sibling-index());
--percentage: calc(50% * sibling-index());
--number: sibling-index();
--integer: sibling-index();
--length: calc(sibling-index() * 7px);
--length-percentage: calc((sibling-index() * 8px) + (sibling-count() * 5%));
--color: color(srgb 0 calc(0.2 * sibling-index()) 0);
--list: 13 sibling-index();
}
to {
--time: 13s;
--angle: 13deg;
--resolution: 1dppx;
--percentage: 13%;
--number: 13;
--integer: 13;
--length: 13px;
--length-percentage: calc(13px + 7%);
--color: red;
--list: 29 sibling-index();
}
}
#target {
animation: --anim 1000s step-end;
}
</style>
<div>
<div id="rm"></div>
<div></div>
<div id="target"></div>
</div>
<script>
test(() => {
assert_equals(getComputedStyle(target).getPropertyValue("--time"), "6s");
}, "Initially, the sibling-index() is 3 for --time");
test(() => {
assert_equals(getComputedStyle(target).getPropertyValue("--angle"), "90deg");
}, "Initially, the sibling-index() is 3 for --angle");
test(() => {
assert_equals(getComputedStyle(target).getPropertyValue("--resolution"), "3dppx");
}, "Initially, the sibling-index() is 3 for --resolution");
test(() => {
assert_equals(getComputedStyle(target).getPropertyValue("--percentage"), "150%");
}, "Initially, the sibling-index() is 3 for --percentage");
test(() => {
assert_equals(getComputedStyle(target).getPropertyValue("--number"), "3");
}, "Initially, the sibling-index() is 3 for --number");
test(() => {
assert_equals(getComputedStyle(target).getPropertyValue("--integer"), "3");
}, "Initially, the sibling-index() is 3 for --integer");
test(() => {
assert_equals(getComputedStyle(target).getPropertyValue("--length"), "21px");
}, "Initially, the sibling-index() is 3 for --length");
test(() => {
assert_equals(getComputedStyle(target).getPropertyValue("--length-percentage"), "calc(15% + 24px)");
}, "Initially, the sibling-index() is 3 for --length-percentage");
test(() => {
assert_equals(getComputedStyle(target).getPropertyValue("--color"), "color(srgb 0 0.6 0)");
}, "Initially, the sibling-index() is 3 for --color");
test(() => {
assert_equals(getComputedStyle(target).getPropertyValue("--list"), "13 3");
}, "Initially, the sibling-index() is 3 for --list");
rm.remove();
test(() => {
assert_equals(getComputedStyle(target).getPropertyValue("--time"), "4s");
}, "Removing a preceding sibling of #target reduces the sibling-index() for --time");
test(() => {
assert_equals(getComputedStyle(target).getPropertyValue("--angle"), "60deg");
}, "Removing a preceding sibling of #target reduces the sibling-index() for --angle");
test(() => {
assert_equals(getComputedStyle(target).getPropertyValue("--resolution"), "2dppx");
}, "Removing a preceding sibling of #target reduces the sibling-index() for --resolution");
test(() => {
assert_equals(getComputedStyle(target).getPropertyValue("--percentage"), "100%");
}, "Removing a preceding sibling of #target reduces the sibling-index() for --percentage");
test(() => {
assert_equals(getComputedStyle(target).getPropertyValue("--number"), "2");
}, "Removing a preceding sibling of #target reduces the sibling-index() for --number");
test(() => {
assert_equals(getComputedStyle(target).getPropertyValue("--integer"), "2");
}, "Removing a preceding sibling of #target reduces the sibling-index() for --integer");
test(() => {
assert_equals(getComputedStyle(target).getPropertyValue("--length"), "14px");
}, "Removing a preceding sibling of #target reduces the sibling-index() for --length");
test(() => {
assert_equals(getComputedStyle(target).getPropertyValue("--length-percentage"), "calc(10% + 16px)");
}, "Removing a preceding sibling of #target reduces the sibling-index() for --length-percentage");
test(() => {
assert_equals(getComputedStyle(target).getPropertyValue("--color"), "color(srgb 0 0.4 0)");
}, "Removing a preceding sibling of #target reduces the sibling-index() for --color");
test(() => {
assert_equals(getComputedStyle(target).getPropertyValue("--list"), "13 2");
}, "Removing a preceding sibling of #target reduces the sibling-index() for --list");
</script>