border-spacing-interpolation.html (2427B)
1 <!DOCTYPE html> 2 <meta charset="UTF-8"> 3 <title>boder-spacing interpolation</title> 4 <link rel="help" href="https://www.w3.org/TR/CSS2/tables.html#separated-borders"> 5 <meta name="assert" content="border-spacing 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 .parent { 13 border-spacing: 30px; 14 } 15 16 .target { 17 width: 50px; 18 height: 50px; 19 background-color: black; 20 display: inline-block; 21 margin: 18px; 22 border-collapse: separate; 23 border-spacing: 10px; 24 } 25 26 .target td { 27 background-color: white; 28 border: 1px solid orange; 29 width: 10px; 30 height: 10px; 31 } 32 33 .expected { 34 background-color: green; 35 } 36 </style> 37 38 <body> 39 <template id="target-template"> 40 <table> 41 <tbody> 42 <tr> 43 <td></td> 44 <td></td> 45 </tr> 46 </tbody> 47 </table> 48 </template> 49 50 <script> 51 test_interpolation({ 52 property: 'border-spacing', 53 from: neutralKeyframe, 54 to: '20px', 55 }, [ 56 {at: -0.3, expect: '7px 7px'}, 57 {at: 0, expect: '10px 10px'}, 58 {at: 0.3, expect: '13px 13px'}, 59 {at: 0.6, expect: '16px 16px'}, 60 {at: 1, expect: '20px 20px'}, 61 {at: 1.5, expect: '25px 25px'}, 62 ]); 63 64 test_interpolation({ 65 property: 'border-spacing', 66 from: 'initial', 67 to: '20px', 68 }, [ 69 {at: -0.3, expect: '0px 0px'}, 70 {at: 0, expect: '0px 0px'}, 71 {at: 0.3, expect: '6px 6px'}, 72 {at: 0.6, expect: '12px 12px'}, 73 {at: 1, expect: '20px 20px'}, 74 {at: 1.5, expect: '30px 30px'}, 75 ]); 76 77 test_interpolation({ 78 property: 'border-spacing', 79 from: 'inherit', 80 to: '20px', 81 }, [ 82 {at: -0.3, expect: '33px 33px'}, 83 {at: 0, expect: '30px 30px'}, 84 {at: 0.3, expect: '27px 27px'}, 85 {at: 0.6, expect: '24px 24px'}, 86 {at: 1, expect: '20px 20px'}, 87 {at: 1.5, expect: '15px 15px'}, 88 ]); 89 90 test_interpolation({ 91 property: 'border-spacing', 92 from: 'unset', 93 to: '20px', 94 }, [ 95 {at: -0.3, expect: '33px 33px'}, 96 {at: 0, expect: '30px 30px'}, 97 {at: 0.3, expect: '27px 27px'}, 98 {at: 0.6, expect: '24px 24px'}, 99 {at: 1, expect: '20px 20px'}, 100 {at: 1.5, expect: '15px 15px'}, 101 ]); 102 103 test_interpolation({ 104 property: 'border-spacing', 105 from: '0px', 106 to: '10px' 107 }, [ 108 {at: -0.3, expect: '0px 0px'}, // Can't be negative. 109 {at: 0, expect: '0px 0px'}, 110 {at: 0.3, expect: '3px 3px'}, 111 {at: 0.6, expect: '6px 6px'}, 112 {at: 1, expect: '10px 10px'}, 113 {at: 1.5, expect: '15px 15px'} 114 ]); 115 </script> 116 </body>