row-rule-width-interpolation.html (3056B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>row-rule-width interpolation</title> 6 <link rel="author" title="Javier Contreras" href="mailto:javiercon@chromium.org"> 7 <link rel="help" href="https://drafts.csswg.org/css-gaps-1/#column-row-rule-width"> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <script src="/css/support/interpolation-testcommon.js"></script> 11 <style> 12 .parent { 13 row-rule-style: solid; 14 row-rule-width: 90px; 15 } 16 17 .target { 18 display: flex; 19 row-gap: 10px; 20 row-rule: 10px solid black; 21 column-rule: 10px solid black; 22 } 23 </style> 24 </head> 25 <body> 26 <script> 27 test_interpolation({ 28 property: 'row-rule-width', 29 from: neutralKeyframe, 30 to: '40px', 31 }, [ 32 { at: -0.3, expect: '1px' }, 33 { at: 0, expect: '10px' }, 34 { at: 0.3, expect: '19px' }, 35 { at: 0.6, expect: '28px' }, 36 { at: 1, expect: '40px' }, 37 { at: 1.5, expect: '55px' }, 38 ]); 39 40 test_interpolation({ 41 property: 'row-rule-width', 42 from: 'initial', 43 to: '40px', 44 }, [ 45 { at: -0.3, expect: '0px' }, 46 { at: 0, expect: '3px' }, 47 { at: 0.3, expect: '14px' }, 48 { at: 0.6, expect: '25px' }, 49 { at: 1, expect: '40px' }, 50 { at: 1.5, expect: '58px' }, 51 ]); 52 53 test_interpolation({ 54 property: 'row-rule-width', 55 from: 'inherit', 56 to: '40px', 57 }, [ 58 { at: -0.3, expect: '105px' }, 59 { at: 0, expect: '90px' }, 60 { at: 0.3, expect: '75px' }, 61 { at: 0.6, expect: '60px' }, 62 { at: 1, expect: '40px' }, 63 { at: 1.5, expect: '15px' }, 64 ]); 65 66 test_interpolation({ 67 property: 'row-rule-width', 68 from: 'unset', 69 to: '40px', 70 }, [ 71 { at: -0.3, expect: '0px' }, 72 { at: 0, expect: '3px' }, 73 { at: 0.3, expect: '14px' }, 74 { at: 0.6, expect: '25px' }, 75 { at: 1, expect: '40px' }, 76 { at: 1.5, expect: '58px' }, 77 ]); 78 79 test_interpolation({ 80 property: 'row-rule-width', 81 from: '0px', 82 to: '100px' 83 }, [ 84 { at: -0.3, expect: '0' }, // row-rule-width can't be negative. 85 { at: 0, expect: '0' }, 86 { at: 0.3, expect: '30px' }, 87 { at: 0.6, expect: '60px' }, 88 { at: 1, expect: '100px' }, 89 { at: 1.5, expect: '150px' }, 90 ]); 91 92 test_interpolation({ 93 property: 'row-rule-width', 94 from: 'thin', 95 to: '11px' 96 }, [ 97 { at: -0.3, expect: '0' }, // row-rule-width can't be negative. 98 { at: 0, expect: '1px' }, 99 { at: 0.3, expect: '4px' }, 100 { at: 0.6, expect: '7px' }, 101 { at: 1, expect: '11px' }, 102 { at: 1.5, expect: '16px' }, 103 ]); 104 105 test_interpolation({ 106 property: 'row-rule-width', 107 from: 'thick', 108 to: '15px' 109 }, [ 110 { at: -0.3, expect: '2px' }, 111 { at: 0, expect: '5px' }, 112 { at: 0.3, expect: '8px' }, 113 { at: 0.6, expect: '11px' }, 114 { at: 1, expect: '15px' }, 115 { at: 1.5, expect: '20px' }, 116 ]); 117 </script> 118 </body> 119 </html>