sibling-index-keyframe-registered-properties-dynamic.html (5669B)
1 <!DOCTYPE html> 2 <title>CSS Values and Units Test: sibling-index() changing registered custom property values during @keyframes animation</title> 3 <link rel="help" href="https://drafts.csswg.org/css-values-5/#tree-counting"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <style> 7 @property --time { syntax: "<time>"; initial-value: 0s; inherits: false; } 8 @property --angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; } 9 @property --resolution { syntax: "<resolution>"; initial-value: 1dppx; inherits: false; } 10 @property --percentage { syntax: "<percentage>"; initial-value: 0%; inherits: false; } 11 @property --number { syntax: "<number>"; initial-value: 0; inherits: false; } 12 @property --integer { syntax: "<integer>"; initial-value: 0; inherits: false; } 13 @property --length { syntax: "<length>"; initial-value: 0px; inherits: false; } 14 @property --length-percentage { syntax: "<length-percentage>"; initial-value: 0px; inherits: false; } 15 @property --color { syntax: "<color>"; initial-value: black; inherits: false; } 16 @property --list { syntax: "<integer>+"; initial-value: 0; inherits: false; } 17 18 @keyframes --anim { 19 from { 20 --time: calc(2s * sibling-index()); 21 --angle: calc(30deg * sibling-index()); 22 --resolution: calc(1dppx * sibling-index()); 23 --percentage: calc(50% * sibling-index()); 24 --number: sibling-index(); 25 --integer: sibling-index(); 26 --length: calc(sibling-index() * 7px); 27 --length-percentage: calc((sibling-index() * 8px) + (sibling-count() * 5%)); 28 --color: color(srgb 0 calc(0.2 * sibling-index()) 0); 29 --list: 13 sibling-index(); 30 } 31 to { 32 --time: 13s; 33 --angle: 13deg; 34 --resolution: 1dppx; 35 --percentage: 13%; 36 --number: 13; 37 --integer: 13; 38 --length: 13px; 39 --length-percentage: calc(13px + 7%); 40 --color: red; 41 --list: 29 sibling-index(); 42 } 43 } 44 #target { 45 animation: --anim 1000s step-end; 46 } 47 </style> 48 <div> 49 <div id="rm"></div> 50 <div></div> 51 <div id="target"></div> 52 </div> 53 <script> 54 test(() => { 55 assert_equals(getComputedStyle(target).getPropertyValue("--time"), "6s"); 56 }, "Initially, the sibling-index() is 3 for --time"); 57 test(() => { 58 assert_equals(getComputedStyle(target).getPropertyValue("--angle"), "90deg"); 59 }, "Initially, the sibling-index() is 3 for --angle"); 60 test(() => { 61 assert_equals(getComputedStyle(target).getPropertyValue("--resolution"), "3dppx"); 62 }, "Initially, the sibling-index() is 3 for --resolution"); 63 test(() => { 64 assert_equals(getComputedStyle(target).getPropertyValue("--percentage"), "150%"); 65 }, "Initially, the sibling-index() is 3 for --percentage"); 66 test(() => { 67 assert_equals(getComputedStyle(target).getPropertyValue("--number"), "3"); 68 }, "Initially, the sibling-index() is 3 for --number"); 69 test(() => { 70 assert_equals(getComputedStyle(target).getPropertyValue("--integer"), "3"); 71 }, "Initially, the sibling-index() is 3 for --integer"); 72 test(() => { 73 assert_equals(getComputedStyle(target).getPropertyValue("--length"), "21px"); 74 }, "Initially, the sibling-index() is 3 for --length"); 75 test(() => { 76 assert_equals(getComputedStyle(target).getPropertyValue("--length-percentage"), "calc(15% + 24px)"); 77 }, "Initially, the sibling-index() is 3 for --length-percentage"); 78 test(() => { 79 assert_equals(getComputedStyle(target).getPropertyValue("--color"), "color(srgb 0 0.6 0)"); 80 }, "Initially, the sibling-index() is 3 for --color"); 81 test(() => { 82 assert_equals(getComputedStyle(target).getPropertyValue("--list"), "13 3"); 83 }, "Initially, the sibling-index() is 3 for --list"); 84 85 rm.remove(); 86 87 test(() => { 88 assert_equals(getComputedStyle(target).getPropertyValue("--time"), "4s"); 89 }, "Removing a preceding sibling of #target reduces the sibling-index() for --time"); 90 test(() => { 91 assert_equals(getComputedStyle(target).getPropertyValue("--angle"), "60deg"); 92 }, "Removing a preceding sibling of #target reduces the sibling-index() for --angle"); 93 test(() => { 94 assert_equals(getComputedStyle(target).getPropertyValue("--resolution"), "2dppx"); 95 }, "Removing a preceding sibling of #target reduces the sibling-index() for --resolution"); 96 test(() => { 97 assert_equals(getComputedStyle(target).getPropertyValue("--percentage"), "100%"); 98 }, "Removing a preceding sibling of #target reduces the sibling-index() for --percentage"); 99 test(() => { 100 assert_equals(getComputedStyle(target).getPropertyValue("--number"), "2"); 101 }, "Removing a preceding sibling of #target reduces the sibling-index() for --number"); 102 test(() => { 103 assert_equals(getComputedStyle(target).getPropertyValue("--integer"), "2"); 104 }, "Removing a preceding sibling of #target reduces the sibling-index() for --integer"); 105 test(() => { 106 assert_equals(getComputedStyle(target).getPropertyValue("--length"), "14px"); 107 }, "Removing a preceding sibling of #target reduces the sibling-index() for --length"); 108 test(() => { 109 assert_equals(getComputedStyle(target).getPropertyValue("--length-percentage"), "calc(10% + 16px)"); 110 }, "Removing a preceding sibling of #target reduces the sibling-index() for --length-percentage"); 111 test(() => { 112 assert_equals(getComputedStyle(target).getPropertyValue("--color"), "color(srgb 0 0.4 0)"); 113 }, "Removing a preceding sibling of #target reduces the sibling-index() for --color"); 114 test(() => { 115 assert_equals(getComputedStyle(target).getPropertyValue("--list"), "13 2"); 116 }, "Removing a preceding sibling of #target reduces the sibling-index() for --list"); 117 118 </script>