animation-002.html (8052B)
1 <!doctype html> 2 <meta charset=utf-8> 3 <title>Animating CSS logical properties using CSS Animations</title> 4 <link rel="help" href="https://drafts.csswg.org/css-logical/#box"> 5 <meta name="assert" content="The specified values of these properties are separate from the specified values of the parallel physical properties, but the flow-relative and physical properties share computed values."> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="../css-animations/support/testcommon.js"></script> 9 10 <div id="log"></div> 11 <script> 12 'use strict'; 13 14 test(t => { 15 addStyle(t, { 16 '@keyframes anim': 'from { block-size: 0px } to { block-size: 100px }', 17 }); 18 const div = addDiv(t, { style: 'animation: anim 10s -5s paused linear' }); 19 assert_equals(getComputedStyle(div).height, '50px'); 20 }, 'Logical properties can be animated'); 21 22 test(t => { 23 addStyle(t, { 24 '@keyframes anim': 'from { block-size: 0px } to { block-size: 100px }', 25 }); 26 const div = addDiv(t, { 27 style: 'animation: anim 10s -5s paused linear; writing-mode: vertical-rl', 28 }); 29 assert_equals(getComputedStyle(div).width, '50px'); 30 assert_equals(getComputedStyle(div).height, '0px'); 31 }, 'Logical properties in animations respect the writing-mode'); 32 33 test(t => { 34 addStyle(t, { 35 '@keyframes anim': 36 'from { margin-inline-start: 0px } to { margin-inline-start: 100px }', 37 }); 38 const div = addDiv(t, { 39 style: 'animation: anim 10s -5s paused linear; direction: rtl', 40 }); 41 assert_equals(getComputedStyle(div).marginLeft, '0px'); 42 assert_equals(getComputedStyle(div).marginRight, '50px'); 43 }, 'Logical properties in animations respect the direction'); 44 45 test(t => { 46 addStyle(t, { 47 '@keyframes anim': 48 'from { block-size: 0px; height: 200px }' 49 + ' to { block-size: 100px; height: 300px }', 50 }); 51 const div = addDiv(t, { 52 style: 'animation: anim 10s -5s paused linear', 53 }); 54 assert_equals(getComputedStyle(div).height, '250px'); 55 }, 'Declaration order is respected within @keyframes declaration blocks'); 56 57 test(t => { 58 addStyle(t, { 59 '@keyframes anim': 60 'to { margin-top: 200px;' 61 + ' margin-block-start: 100px }' 62 }); 63 const div = addDiv(t, { 64 style: 'animation: anim 10s paused step-start', 65 }); 66 assert_equals(getComputedStyle(div).marginTop, '100px'); 67 }, 'Logical properties are able to override physical properties in' 68 + ' @keyframes declaration blocks'); 69 70 test(t => { 71 addStyle(t, { 72 '@keyframes anim': 73 'to {' 74 + ' margin-inline: 200px;' 75 + ' margin-inline-start: 0px;' 76 + ' margin-inline-start: 100px }', 77 }); 78 const div = addDiv(t, { 79 style: 'animation: anim 10s paused step-start', 80 }); 81 assert_equals(getComputedStyle(div).marginLeft, '100px'); 82 }, 'Declaration order is respected amongst logical properties within' 83 + ' @keyframes declaration blocks'); 84 85 test(t => { 86 addStyle(t, { 87 '@keyframes anim': 'from { block-size: 200px } to { height: 300px }', 88 }); 89 const div = addDiv(t, { 90 style: 'animation: anim 10s -5s paused linear', 91 }); 92 assert_equals(getComputedStyle(div).height, '250px'); 93 }, 'Physical properties and logical properties can be mixed'); 94 95 test(t => { 96 addStyle(t, { 97 '@keyframes anim': 98 'from { height: 100px; block-size: 200px }' 99 + ' to { block-size: 100px; height: 300px }', 100 }); 101 const div = addDiv(t, { 102 style: 'animation: anim 10s -5s paused linear', 103 }); 104 assert_equals(getComputedStyle(div).height, '250px'); 105 }, 'Declaration order is respected on each keyframe individually'); 106 107 test(t => { 108 addStyle(t, { 109 '@keyframes anim': 'from { block-size: 0px } to { block-size: 100px }', 110 }); 111 const div = addDiv(t, { 112 style: 'animation: anim 10s -5s paused linear; width: 0px; height: 0px', 113 }); 114 assert_equals(getComputedStyle(div).width, '0px'); 115 assert_equals(getComputedStyle(div).height, '50px'); 116 117 div.style.writingMode = 'vertical-rl'; 118 assert_equals(getComputedStyle(div).width, '50px'); 119 assert_equals(getComputedStyle(div).height, '0px'); 120 }, 'Animations update when the writing-mode is changed'); 121 122 promise_test(async t => { 123 addStyle(t, { 124 '@keyframes anim': 'from { block-size: 0px } to { block-size: 100px }', 125 }); 126 const div = addDiv(t, { 127 style: 'animation: anim 10s -9.9s linear forwards;' 128 + ' width: 0px; height: 0px', 129 }); 130 const watcher = new EventWatcher(t, div, [ 'animationend' ]); 131 await watcher.wait_for('animationend'); 132 133 assert_equals(getComputedStyle(div).width, '0px'); 134 assert_equals(getComputedStyle(div).height, '100px'); 135 136 div.style.writingMode = 'vertical-rl'; 137 assert_equals(getComputedStyle(div).width, '100px'); 138 assert_equals(getComputedStyle(div).height, '0px'); 139 }, 'Filling animations update when the writing-mode is changed'); 140 141 test(t => { 142 addStyle(t, { 143 '@keyframes anim': 'to { block-size: 100px; height: 200px }', 144 }); 145 const div = addDiv(t, { 146 style: 'animation: anim 10s -5s paused linear; width: 0px; height: 0px', 147 }); 148 // Initially we are interpolating the height from 0 to 200px 149 assert_equals(getComputedStyle(div).width, '0px'); 150 assert_equals(getComputedStyle(div).height, '100px'); 151 152 // But once we change the writing-mode, we will be interpolating *both* 153 // the height (from 0px to 200px) *and* the width (from 0px to 100px). 154 div.style.writingMode = 'vertical-rl'; 155 assert_equals(getComputedStyle(div).width, '50px'); 156 assert_equals(getComputedStyle(div).height, '100px'); 157 }, 'The number of interpolating properties can be increased when the' 158 + ' writing-mode is changed'); 159 160 test(t => { 161 addStyle(t, { 162 '@keyframes anim': 'to { width: 300px; block-size: 200px }', 163 }); 164 const div = addDiv(t, { 165 style: 'animation: anim 10s -5s paused linear; width: 100px; height: 100px', 166 }); 167 // Initially we are interpolating the width (100px -> 300px) and the height 168 // (100px -> 200px). 169 assert_equals(getComputedStyle(div).width, '200px'); 170 assert_equals(getComputedStyle(div).height, '150px'); 171 172 // Once we change the writing-mode, we will be interpolating *only* the 173 // width (100px -> 200px). 174 div.style.writingMode = 'vertical-rl'; 175 assert_equals(getComputedStyle(div).width, '150px'); 176 assert_equals(getComputedStyle(div).height, '100px'); 177 }, 'The number of interpolating properties can be decreased when the' 178 + ' writing-mode is changed'); 179 180 test(t => { 181 addStyle(t, { ':root': '--writingMode: horizontal-tb' }); 182 addStyle(t, { 183 '@keyframes anim': 'from { block-size: 0px } to { block-size: 100px }', 184 }); 185 const div = addDiv(t, { 186 style: 187 'animation: anim 10s -5s paused linear;' 188 + ' width: 0px; height: 0px;' 189 + ' writing-mode: var(--writingMode)' 190 }); 191 assert_equals(getComputedStyle(div).width, '0px'); 192 assert_equals(getComputedStyle(div).height, '50px'); 193 194 div.style.setProperty('--writingMode', 'vertical-rl'); 195 assert_equals(getComputedStyle(div).width, '50px'); 196 assert_equals(getComputedStyle(div).height, '0px'); 197 }, 'Animations update when the writing-mode is changed through a CSS variable'); 198 199 test(t => { 200 addStyle(t, { ':root': '--200px: 200px; --300px: 300px' }); 201 addStyle(t, { 202 '@keyframes anim': 'from { inset-block: var(--200px) } to { inset-block: var(--300px) }', 203 }); 204 const div = addDiv(t, { 205 style: 206 'animation: anim 10s -5s paused linear;' 207 + ' width: 0px; height: 0px;' 208 }); 209 assert_equals(getComputedStyle(div).insetBlockStart, '250px'); 210 }, 'Logical shorthand with variable references animates correctly'); 211 212 test(t => { 213 addStyle(t, { 214 '@keyframes anim': 215 'from { margin-inline-start: 0px } to { margin-inline-start: 100px }', 216 }); 217 const div = addDiv(t, { style: 'animation: anim 10s -5s paused linear' }); 218 assert_equals(getComputedStyle(div).marginLeft, '50px'); 219 assert_equals(getComputedStyle(div).marginRight, '0px'); 220 221 div.style.direction = 'rtl'; 222 assert_equals(getComputedStyle(div).marginLeft, '0px'); 223 assert_equals(getComputedStyle(div).marginRight, '50px'); 224 }, 'Animations update when the direction is changed'); 225 226 </script>