widows-interpolation.html (2264B)
1 <!DOCTYPE html> 2 <meta charset="UTF-8"> 3 <title>widows interpolation</title> 4 <link rel="help" href="https://drafts.csswg.org/css-break-3/#widows-orphans"> 5 <meta name="assert" content="widows supports animation by computed value type"> 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 widows: 30; 14 } 15 .target { 16 widows: 10; 17 } 18 </style> 19 20 <body></body> 21 22 <script> 23 test_interpolation({ 24 property: 'widows', 25 from: neutralKeyframe, 26 to: '20', 27 }, [ 28 {at: -3, expect: '1'}, 29 {at: -2.5, expect: '1'}, 30 {at: -0.5, expect: '5'}, 31 {at: 0, expect: '10'}, 32 {at: 0.3, expect: '13'}, 33 {at: 0.6, expect: '16'}, 34 {at: 1, expect: '20'}, 35 {at: 1.5, expect: '25'}, 36 ]); 37 38 test_interpolation({ 39 property: 'widows', 40 from: 'initial', 41 to: '20', 42 }, [ 43 {at: -3, expect: '1'}, 44 {at: -2.5, expect: '1'}, 45 {at: -0.5, expect: '1'}, 46 {at: 0, expect: '2'}, 47 {at: 0.3, expect: '7'}, 48 {at: 0.6, expect: '13'}, 49 {at: 1, expect: '20'}, 50 {at: 1.5, expect: '29'}, 51 ]); 52 53 test_interpolation({ 54 property: 'widows', 55 from: 'inherit', 56 to: '20', 57 }, [ 58 {at: -3, expect: '60'}, 59 {at: -2.5, expect: '55'}, 60 {at: -0.5, expect: '35'}, 61 {at: 0, expect: '30'}, 62 {at: 0.3, expect: '27'}, 63 {at: 0.6, expect: '24'}, 64 {at: 1, expect: '20'}, 65 {at: 1.5, expect: '15'}, 66 ]); 67 68 test_interpolation({ 69 property: 'widows', 70 from: 'unset', 71 to: '20', 72 }, [ 73 {at: -3, expect: '60'}, 74 {at: -2.5, expect: '55'}, 75 {at: -0.5, expect: '35'}, 76 {at: 0, expect: '30'}, 77 {at: 0.3, expect: '27'}, 78 {at: 0.6, expect: '24'}, 79 {at: 1, expect: '20'}, 80 {at: 1.5, expect: '15'}, 81 ]); 82 83 test_interpolation({ 84 property: 'widows', 85 from: '10', 86 to: '20' 87 }, [ 88 {at: -3.0, expect: '1'}, 89 {at: -2.5, expect: '1'}, 90 {at: -0.5, expect: '5'}, 91 {at: 0, expect: '10'}, 92 {at: 0.3, expect: '13'}, 93 {at: 0.6, expect: '16'}, 94 {at: 1, expect: '20'}, 95 {at: 1.5, expect: '25'} 96 ]); 97 98 test_interpolation({ 99 property: 'widows', 100 from: '2', 101 to: '4' 102 }, [ 103 {at: -3.0, expect: '1'}, 104 {at: -2.5, expect: '1'}, 105 {at: -0.5, expect: '1'}, 106 {at: 0, expect: '2'}, 107 {at: 0.3, expect: '3'}, 108 {at: 0.6, expect: '3'}, 109 {at: 1, expect: '4'}, 110 {at: 1.5, expect: '5'} 111 ]); 112 </script>