outline-width-interpolation.html (2704B)
1 <!DOCTYPE html> 2 <meta charset="UTF-8"> 3 <title>outline-width interpolation</title> 4 <link rel="help" href="https://drafts.csswg.org/css-ui-3/#outline-width"> 5 <meta name="assert" content="outline-width supports animation by computed value"> 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 outline: solid transparent; 14 outline-width: 30px; 15 } 16 .target { 17 width: 50px; 18 height: 50px; 19 background-color: black; 20 display: inline-block; 21 margin: 18px; 22 outline: solid orange; 23 outline-width: 10px; 24 opacity: 0.5; 25 } 26 .expected { 27 background-color: green; 28 } 29 </style> 30 31 <body></body> 32 33 <script> 34 // NOTE: The below tests make assumptions about the values of medium (for unset 35 // and initial) and thick, namely that: 36 // * medium=3px 37 // * thick=3px 38 // 39 // A better version of these tests would dynamically generate the expected values 40 // by querying the computed style from the UA. 41 42 test_interpolation({ 43 property: 'outline-width', 44 from: neutralKeyframe, 45 to: '20px', 46 }, [ 47 {at: -0.3, expect: '7px'}, 48 {at: 0, expect: '10px'}, 49 {at: 0.3, expect: '13px'}, 50 {at: 0.6, expect: '16px'}, 51 {at: 1, expect: '20px'}, 52 {at: 1.5, expect: '25px'}, 53 ]); 54 55 test_interpolation({ 56 property: 'outline-width', 57 from: 'initial', 58 to: '23px', 59 }, [ 60 {at: -0.3, expect: '0px'}, 61 {at: 0, expect: '3px'}, 62 {at: 0.3, expect: '9px'}, 63 {at: 0.6, expect: '15px'}, 64 {at: 1, expect: '23px'}, 65 {at: 1.5, expect: '33px'}, 66 ]); 67 68 test_interpolation({ 69 property: 'outline-width', 70 from: 'inherit', 71 to: '20px', 72 }, [ 73 {at: -0.3, expect: '33px'}, 74 {at: 0, expect: '30px'}, 75 {at: 0.3, expect: '27px'}, 76 {at: 0.6, expect: '24px'}, 77 {at: 1, expect: '20px'}, 78 {at: 1.5, expect: '15px'}, 79 ]); 80 81 test_interpolation({ 82 property: 'outline-width', 83 from: 'unset', 84 to: '23px', 85 }, [ 86 {at: -0.3, expect: '0px'}, 87 {at: 0, expect: '3px'}, 88 {at: 0.3, expect: '9px'}, 89 {at: 0.6, expect: '15px'}, 90 {at: 1, expect: '23px'}, 91 {at: 1.5, expect: '33px'}, 92 ]); 93 94 test_interpolation({ 95 property: 'outline-width', 96 from: '0px', 97 to: '10px', 98 }, [ 99 {at: -0.3, expect: '0px'}, // CSS outline-width can't be negative. 100 {at: 0, expect: '0px'}, 101 {at: 0.3, expect: '3px'}, 102 {at: 0.6, expect: '6px'}, 103 {at: 1, expect: '10px'}, 104 {at: 1.5, expect: '15px'} 105 ]); 106 107 test_interpolation({ 108 property: 'outline-width', 109 from: 'thick', 110 to: '15px', 111 }, [ 112 {at: -2, expect: '0px'}, // CSS outline-width can't be negative. 113 {at: -0.3, expect: '2px'}, 114 {at: 0, expect: '5px'}, 115 {at: 0.3, expect: '8px'}, 116 {at: 0.6, expect: '11px'}, 117 {at: 1, expect: '15px'}, 118 {at: 1.5, expect: '20px'} 119 ]); 120 </script>