rule-width-interpolation-multiple-values-002.html (1682B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>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-width: 10px 10px 10px; 21 row-rule-style: solid; 22 row-rule-color: black; 23 flex-wrap: wrap; 24 column-rule-width: 10px 15px 20px; 25 column-rule-style: solid; 26 column-rule-color: black; 27 } 28 </style> 29 </head> 30 <body> 31 <script> 32 test_interpolation({ 33 property: 'row-rule-width', 34 from: neutralKeyframe, 35 to: '40px 40px 40px', 36 }, [ 37 { at: -0.3, expect: '1px 1px 1px' }, 38 { at: 0, expect: '10px 10px 10px' }, 39 { at: 0.3, expect: '19px 19px 19px' }, 40 { at: 0.6, expect: '28px 28px 28px' }, 41 { at: 1, expect: '40px 40px 40px' }, 42 { at: 1.5, expect: '55px 55px 55px' }, 43 ]); 44 45 test_interpolation({ 46 property: 'column-rule-width', 47 from: neutralKeyframe, 48 to: '40px 40px 40px', 49 }, [ 50 { at: -0.3, expect: '1px 7px 14px' }, 51 { at: 0, expect: '10px 15px 20px' }, 52 { at: 0.3, expect: '19px 22px 26px' }, 53 { at: 0.6, expect: '28px 30px 32px' }, 54 { at: 1, expect: '40px 40px 40px' }, 55 { at: 1.5, expect: '55px 52px 50px' }, 56 ]); 57 </script> 58 </body> 59 </html>