aspect-ratio-interpolation.html (3206B)
1 <!DOCTYPE html> 2 <meta charset="UTF-8"> 3 <title>aspect-ratio interpolation</title> 4 <link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio"> 5 <meta name="assert" content="aspect-ratio supports animation"> 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 .target { 13 font-size: 16px; 14 background-color: black; 15 width: 10px; 16 aspect-ratio: 0.5; 17 } 18 </style> 19 20 <body> 21 <template id="target-template"> 22 <div class="container"> 23 <div class="target"></div> 24 </div> 25 </template> 26 </body> 27 28 <script> 29 test_interpolation({ 30 property: 'aspect-ratio', 31 from: '0.5', 32 to: '2', 33 }, [ 34 {at: -0.5, expect: '0.25 / 1'}, 35 {at: 0, expect: '0.5 / 1'}, 36 {at: 0.5, expect: '1 / 1'}, 37 {at: 1, expect: '2 / 1'}, 38 {at: 1.5, expect: '4 / 1'} 39 ]); 40 41 test_interpolation({ 42 property: 'aspect-ratio', 43 from: '1 / 2', 44 to: '2 / 1', 45 }, [ 46 {at: -0.5, expect: '0.25 / 1'}, 47 {at: 0, expect: '0.5 / 1'}, 48 {at: 0.5, expect: '1 / 1'}, 49 {at: 1, expect: '2 / 1'}, 50 {at: 1.5, expect: '4 / 1'} 51 ]); 52 53 // Test neutral keyframe 54 test_interpolation({ 55 property: 'aspect-ratio', 56 from: '', 57 to: '2 / 1', 58 }, [ 59 {at: -0.5, expect: '0.25 / 1'}, 60 {at: 0, expect: '0.5 / 1'}, 61 {at: 0.5, expect: '1 / 1'}, 62 {at: 1, expect: '2 / 1'}, 63 {at: 1.5, expect: '4 / 1'} 64 ]); 65 66 test_interpolation({ 67 property: 'aspect-ratio', 68 from: 'auto 1 / 2', 69 to: 'auto 2 / 1', 70 }, [ 71 {at: -0.5, expect: 'auto 0.25 / 1'}, 72 {at: 0, expect: 'auto 0.5 / 1'}, 73 {at: 0.5, expect: 'auto 1 / 1'}, 74 {at: 1, expect: 'auto 2 / 1'}, 75 {at: 1.5, expect: 'auto 4 / 1'} 76 ]); 77 78 test_no_interpolation({ 79 property: 'aspect-ratio', 80 from: 'auto', 81 to: '2 / 1', 82 }); 83 84 test_no_interpolation({ 85 property: 'aspect-ratio', 86 from: 'auto 1 / 1', 87 to: '2 / 1', 88 }); 89 90 // If either number in the ratio is 0 or infinite, it represents a degenerate 91 // ratio and will not be interpolated: 92 // https://drafts.csswg.org/css-values-4/#combine-ratio 93 test_no_interpolation({ 94 property: 'aspect-ratio', 95 from: '1 / 0', 96 to: '1 / 1', 97 }); 98 test_no_interpolation({ 99 property: 'aspect-ratio', 100 from: '1 / 1', 101 to: '0 / 1', 102 }); 103 104 // Addition of <ratio>s is not possible. 105 // https://drafts.csswg.org/css-values/#combine-ratio 106 // 107 // And if a value type does not define a specific procedure for addition or is 108 // defined as not additive, its addition operation is simply Vresult = Va. 109 // (The first value is Va, the second value is Vb, and the result is Vresult.) 110 // https://drafts.csswg.org/css-values-4/#not-additive, 111 // 112 // So in this test case: 113 // 1. The 1st keyframe: { aspectRatio: 0.5/1, composite: 'replace', offset: 0 } 114 // 2. The 2nd keyframe: { aspectRatio: 1/1, composite: 'add', offset: 1 } 115 // and the underlying value is 2/1. Based on the spec, the composited from_value 116 // is 0.5/1 (because we just replace it), and the composited to_value is 2/1 117 // (because we use Va as the result value). 118 test_composition({ 119 property: 'aspect-ratio', 120 underlying: '2 / 1', 121 replaceFrom: '0.5 / 1', 122 addTo: '1 / 1', 123 }, [ 124 {at: 0, expect: '0.5 / 1'}, 125 {at: 0.5, expect: '1 / 1'}, 126 {at: 1, expect: '2 / 1'} 127 ]); 128 129 </script> 130 </body>