row-gap-interpolation.html (1789B)
1 <!DOCTYPE html> 2 <meta charset="UTF-8"> 3 <title>row-gap interpolation</title> 4 <link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-row-gap"> 5 <meta name="assert" content="row-gap supports animation by computed value type"> 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 row-gap: 90px; 14 } 15 .target { 16 row-gap: 10px; 17 } 18 .expected div { 19 opacity: 0.7; 20 } 21 .target > div { 22 height: 20px; 23 background-color: black; 24 } 25 .target.expected > div { 26 background-color: green; 27 } 28 </style> 29 30 <body> 31 <template id='target-template'> 32 <div></div><div></div> 33 </template> 34 </body> 35 36 <script> 37 test_interpolation({ 38 property: 'row-gap', 39 from: neutralKeyframe, 40 to: '40px', 41 }, [ 42 {at: -0.3, expect: '1px'}, 43 {at: 0, expect: '10px'}, 44 {at: 0.3, expect: '19px'}, 45 {at: 0.6, expect: '28px'}, 46 {at: 1, expect: '40px'}, 47 {at: 1.5, expect: '55px'}, 48 ]); 49 50 test_no_interpolation({ 51 property: 'row-gap', 52 from: 'initial', 53 to: '20px', 54 }); 55 56 test_interpolation({ 57 property: 'row-gap', 58 from: 'inherit', 59 to: '20px', 60 }, [ 61 {at: -0.3, expect: '111px'}, 62 {at: 0, expect: '90px'}, 63 {at: 0.3, expect: '69px'}, 64 {at: 0.6, expect: '48px'}, 65 {at: 1, expect: '20px'}, 66 {at: 1.5, expect: '0px'}, 67 ]); 68 69 test_no_interpolation({ 70 property: 'row-gap', 71 from: 'unset', 72 to: '20px', 73 }); 74 75 test_no_interpolation({ 76 property: 'row-gap', 77 from: 'normal', 78 to: '20px', 79 }); 80 81 test_interpolation({ 82 property: 'row-gap', 83 from: '0px', 84 to: '100px' 85 }, [ 86 {at: -0.3, expect: '0'}, // row-gap can't be negative. 87 {at: 0, expect: '0'}, 88 {at: 0.3, expect: '30px'}, 89 {at: 0.6, expect: '60px'}, 90 {at: 1, expect: '100px'}, 91 {at: 1.5, expect: '150px'} 92 ]); 93 </script>