outline-width-composition.html (2082B)
1 <!DOCTYPE html> 2 <meta charset="UTF-8"> 3 <title>outline-width composition</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 <body> 12 <style> 13 .target { 14 /* If outline-style is none (the default), the computed style of outline-width is 0. */ 15 outline-style: solid; 16 } 17 </style> 18 <script> 19 test_composition({ 20 property: 'outline-width', 21 underlying: '50px', 22 addFrom: '100px', 23 addTo: '200px', 24 }, [ 25 {at: -0.3, expect: '120px'}, 26 {at: 0, expect: '150px'}, 27 {at: 0.5, expect: '200px'}, 28 {at: 1, expect: '250px'}, 29 {at: 1.5, expect: '300px'}, 30 ]); 31 32 test_composition({ 33 property: 'outline-width', 34 underlying: '100px', 35 addFrom: '10px', 36 addTo: '2px', 37 }, [ 38 {at: -0.5, expect: '114px'}, 39 {at: 0, expect: '110px'}, 40 {at: 0.5, expect: '106px'}, 41 {at: 1, expect: '102px'}, 42 {at: 1.5, expect: '98px'}, // Value clamping should happen after composition. 43 ]); 44 45 test_composition({ 46 property: 'outline-width', 47 underlying: '10em', 48 addFrom: '100px', 49 addTo: '20em', 50 }, [ 51 {at: -0.3, expect: 'calc(130px + 4em)'}, 52 {at: 0, expect: 'calc(100px + 10em)'}, 53 {at: 0.5, expect: 'calc(50px + 20em)'}, 54 {at: 1, expect: '30em'}, 55 {at: 1.5, expect: 'calc(-50px + 40em)'}, 56 ]); 57 58 test_composition({ 59 property: 'outline-width', 60 underlying: '50px', 61 addFrom: '100px', 62 replaceTo: '200px', 63 }, [ 64 {at: -0.3, expect: '135px'}, 65 {at: 0, expect: '150px'}, 66 {at: 0.5, expect: '175px'}, 67 {at: 1, expect: '200px'}, 68 {at: 1.5, expect: '225px'}, 69 ]); 70 71 test_composition({ 72 property: 'outline-width', 73 underlying: 'thick', // 5px 74 addFrom: '11px', 75 addTo: 'thin', // 1px 76 }, [ 77 {at: -0.3, expect: '19px'}, 78 {at: 0, expect: '16px'}, 79 {at: 0.5, expect: '11px'}, 80 {at: 1, expect: '6px'}, 81 {at: 1.5, expect: '1px'}, 82 {at: 2, expect: '0px'}, // CSS outline-width can't be negative. 83 ]); 84 </script> 85 </body>