width-interpolation.html (3406B)
1 <!DOCTYPE html> 2 <meta charset="UTF-8"> 3 <title>width interpolation</title> 4 <link rel="help" href="https://drafts.csswg.org/css-sizing-3/#propdef-width"> 5 <meta name="assert" content="width supports animation by computed value"> 6 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <script src="/css/support/interpolation-testcommon.js"></script> 10 11 <style> 12 .parent { 13 width: 100px; 14 overflow: visible; 15 } 16 .target { 17 font-size: 16px; 18 background-color: black; 19 width: 10px; 20 height: 10px; 21 } 22 .expected { 23 background-color: green; 24 } 25 </style> 26 27 <body> 28 <template id="target-template"> 29 <div class="container"> 30 <div class="target"></div> 31 </div> 32 </template> 33 </body> 34 35 <script> 36 test_interpolation({ 37 property: 'width', 38 from: neutralKeyframe, 39 to: '40px', 40 }, [ 41 {at: -0.3, expect: '1px'}, 42 {at: 0, expect: '10px'}, 43 {at: 0.3, expect: '19px'}, 44 {at: 0.6, expect: '28px'}, 45 {at: 1, expect: '40px'}, 46 {at: 1.5, expect: '55px'}, 47 ]); 48 49 test_no_interpolation({ 50 property: 'width', 51 from: 'initial', 52 to: '40px', 53 }); 54 55 test_interpolation({ 56 property: 'width', 57 from: 'inherit', 58 to: '40px', 59 }, [ 60 {at: -0.3, expect: '118px'}, 61 {at: 0, expect: '100px'}, 62 {at: 0.3, expect: '82px'}, 63 {at: 0.6, expect: '64px'}, 64 {at: 1, expect: '40px'}, 65 {at: 1.5, expect: '10px'}, 66 ]); 67 68 test_no_interpolation({ 69 property: 'width', 70 from: 'unset', 71 to: '40px', 72 }); 73 74 test_interpolation({ 75 property: 'width', 76 from: '0px', 77 to: '100px', 78 }, [ 79 {at: -0.3, expect: '0px'}, // CSS width can't be negative. 80 {at: 0, expect: '0px'}, 81 {at: 0.3, expect: '30px'}, 82 {at: 0.6, expect: '60px'}, 83 {at: 1, expect: '100px'}, 84 {at: 1.5, expect: '150px'} 85 ]); 86 87 test_interpolation({ 88 property: 'width', 89 from: '10px', 90 to: '100%' 91 }, [ 92 {at: -0.3, expect: '0px'}, // CSS width can't be negative. 93 {at: 0, expect: '10px'}, 94 {at: 0.3, expect: '37px'}, 95 {at: 0.6, expect: '64px'}, 96 {at: 1, expect: '100px'}, 97 {at: 1.5, expect: '145px'} 98 ]); 99 100 test_no_interpolation({ 101 property: 'width', 102 from: 'auto', 103 to: '40px', 104 }); 105 106 // The "vw" unit equals to 1% of the width of the viewport's initial containing 107 // block: 108 // https://developer.mozilla.org/en-US/docs/Web/CSS/length 109 function vw(x) { 110 return (x * window.innerWidth / 100); 111 } 112 113 // In here, 16 is the font-size which is the value of 1em, and vw(10) is the 114 // value of 10vw. The calc here takes the "at" in the next interpolation test 115 // and computes the expected value. 116 function calc(x) { 117 return Math.max(16 + (vw(10) - 16) * x, 0).toFixed(2) + "px"; 118 } 119 120 test_interpolation({ 121 property: 'width', 122 from: '1em', 123 to: '10vw' 124 }, [ 125 {at: -0.3, expect: calc(-0.3)}, 126 {at: 0, expect: calc(0)}, 127 {at: 0.3, expect: calc(0.3)}, 128 {at: 0.6, expect: calc(0.6)}, 129 {at: 1, expect: calc(1)}, 130 {at: 1.5, expect: calc(1.5)} 131 ]); 132 133 test_no_interpolation({ 134 property: 'width', 135 from: 'auto', 136 to: 'fit-content', 137 }); 138 139 test_no_interpolation({ 140 property: 'width', 141 from: 'stretch', 142 to: 'auto', 143 }); 144 145 test_no_interpolation({ 146 property: 'width', 147 from: '30px', 148 to: 'fit-content', 149 }); 150 151 test_no_interpolation({ 152 property: 'width', 153 from: 'max-content', 154 to: 'min-content', 155 }); 156 157 test_no_interpolation({ 158 property: 'width', 159 from: 'max-content', 160 to: neutralKeyframe, 161 }); 162 163 test_no_interpolation({ 164 property: 'width', 165 from: neutralKeyframe, 166 to: 'min-content', 167 }); 168 169 </script> 170 </body>