rule-width-interpolation-repeaters.html (5786B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>rule-width interpolation with repeaters</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 row-gap: 40px; 19 column-gap: 40px; 20 row-rule-width: 10px repeat(2, 20px 20px) 20px; 21 row-rule-style: solid; 22 row-rule-color: black; 23 flex-wrap: wrap; 24 column-rule-width: repeat(2, 20px 20px); 25 column-rule-style: solid; 26 column-rule-color: black; 27 } 28 </style> 29 </head> 30 <body> 31 <script> 32 // Valid Interpolations: 33 // Repeaters should expand. 34 test_interpolation({ 35 property: 'row-rule-width', 36 from: neutralKeyframe, 37 to: '20px repeat(2, 30px 30px) 30px', 38 }, [ 39 { at: -0.3, expect: '7px 17px 17px 17px 17px 17px' }, 40 { at: 0, expect: '10px 20px 20px 20px 20px 20px' }, 41 { at: 0.3, expect: '13px 23px 23px 23px 23px 23px' }, 42 { at: 0.6, expect: '16px 26px 26px 26px 26px 26px' }, 43 { at: 1, expect: '20px 30px 30px 30px 30px 30px' }, 44 { at: 1.5, expect: '25px 35px 35px 35px 35px 35px' }, 45 ]); 46 test_interpolation({ 47 property: 'column-rule-width', 48 from: neutralKeyframe, 49 to: 'repeat(2, 30px 30px)', 50 }, [ 51 { at: -0.3, expect: '17px 17px 17px 17px' }, 52 { at: 0, expect: '20px 20px 20px 20px' }, 53 { at: 0.3, expect: '23px 23px 23px 23px' }, 54 { at: 0.6, expect: '26px 26px 26px 26px' }, 55 { at: 1, expect: '30px 30px 30px 30px' }, 56 { at: 1.5, expect: '35px 35px 35px 35px' }, 57 ]); 58 59 // Auto repeaters don't expand. 60 test_interpolation({ 61 property: 'column-rule-width', 62 from: 'repeat(auto, 20px 20px)', 63 to: 'repeat(auto, 30px 30px)', 64 }, [ 65 { at: -0.3, expect: 'repeat(auto, 17px 17px)' }, 66 { at: 0, expect: 'repeat(auto, 20px 20px)' }, 67 { at: 0.3, expect: 'repeat(auto, 23px 23px)' }, 68 { at: 0.6, expect: 'repeat(auto, 26px 26px)' }, 69 { at: 1, expect: 'repeat(auto, 30px 30px)' }, 70 { at: 1.5, expect: 'repeat(auto, 35px 35px)' }, 71 ]); 72 73 // Auto repeaters should interpolate, we apply 74 // lowest common multiple interpolation to the inner values 75 // of auto repeaters. 76 test_interpolation({ 77 property: 'column-rule-width', 78 from: 'repeat(auto, 20px)', 79 to: 'repeat(auto, 30px 30px)', 80 }, [ 81 { at: -0.3, expect: 'repeat(auto, 17px 17px)' }, 82 { at: 0, expect: 'repeat(auto, 20px 20px)' }, 83 { at: 0.3, expect: 'repeat(auto, 23px 23px)' }, 84 { at: 0.6, expect: 'repeat(auto, 26px 26px)' }, 85 { at: 1, expect: 'repeat(auto, 30px 30px)' }, 86 { at: 1.5, expect: 'repeat(auto, 35px 35px)' }, 87 ]); 88 89 // Repeaters should expand. 90 test_interpolation({ 91 property: 'column-rule-width', 92 from: 'repeat(1, 20px)', 93 to: 'repeat(2, 30px 30px)', 94 }, [ 95 { at: -0.3, expect: '17px 17px 17px 17px' }, 96 { at: 0, expect: '20px 20px 20px 20px' }, 97 { at: 0.3, expect: '23px 23px 23px 23px' }, 98 { at: 0.6, expect: '26px 26px 26px 26px' }, 99 { at: 1, expect: '30px 30px 30px 30px' }, 100 { at: 1.5, expect: '35px 35px 35px 35px' }, 101 ]); 102 103 // Repeaters should expand and interpolate with non repeaters. 104 test_interpolation({ 105 property: 'column-rule-width', 106 from: 'repeat(2, 20px)', 107 to: '30px', 108 }, [ 109 { at: -0.3, expect: '17px 17px' }, 110 { at: 0, expect: '20px 20px' }, 111 { at: 0.3, expect: '23px 23px' }, 112 { at: 0.6, expect: '26px 26px' }, 113 { at: 1, expect: '30px 30px' }, 114 { at: 1.5, expect: '35px 35px' }, 115 ]); 116 117 // When auto repeaters are present, we only interpolate if the length 118 // of the `leading` segments match, and the length of the `trailing` 119 // segments match. 120 test_interpolation({ 121 property: 'column-rule-width', 122 from: 'repeat(2, 20px) repeat(auto, 20px) 20px', 123 to: '30px 30px repeat(auto, 30px) 30px', 124 }, [ 125 { at: -0.3, expect: '17px 17px repeat(auto, 17px) 17px' }, 126 { at: 0, expect: '20px 20px repeat(auto, 20px) 20px' }, 127 { at: 0.3, expect: '23px 23px repeat(auto, 23px) 23px' }, 128 { at: 0.6, expect: '26px 26px repeat(auto, 26px) 26px' }, 129 { at: 1, expect: '30px 30px repeat(auto, 30px) 30px' }, 130 { at: 1.5, expect: '35px 35px repeat(auto, 35px) 35px' }, 131 ]); 132 133 // Invalid interpolations: 134 // Shouldn't interpolate, different leading lengths with present auto repeater: 135 test_no_interpolation({ 136 property: 'column-rule-width', 137 from: '20px repeat(auto, 20px)', 138 to: '30px 30px repeat(auto, 30px)', 139 }); 140 141 // Shouldn't interpolate, different trailing lengths with present auto repeater: 142 test_no_interpolation({ 143 property: 'column-rule-width', 144 from: '20px repeat(auto, 20px)', 145 to: '30px repeat(auto, 30px) 30px', 146 }); 147 </script> 148 </body>