orphans-interpolation.html (1759B)
1 <!DOCTYPE html> 2 <meta charset="UTF-8"> 3 <title>orphans interpolation</title> 4 <link rel="help" href="https://drafts.csswg.org/css-break-3/#widows-orphans"> 5 <meta name="assert" content="orphans 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 orphans: 30; 14 } 15 .target { 16 orphans: 10; 17 } 18 </style> 19 20 <body></body> 21 22 <script> 23 test_interpolation({ 24 property: 'orphans', 25 from: neutralKeyframe, 26 to: '20', 27 }, [ 28 {at: -0.5, expect: '5'}, 29 {at: 0, expect: '10'}, 30 {at: 0.3, expect: '13'}, 31 {at: 0.7, expect: '17'}, 32 {at: 1, expect: '20'}, 33 {at: 1.5, expect: '25'}, 34 ]); 35 36 test_interpolation({ 37 property: 'orphans', 38 from: 'initial', 39 to: '20', 40 }, [ 41 {at: -0.5, expect: '1'}, 42 {at: 0, expect: '2'}, 43 {at: 0.3, expect: '7'}, 44 {at: 0.7, expect: '15'}, 45 {at: 1, expect: '20'}, 46 {at: 1.5, expect: '29'}, 47 ]); 48 49 test_interpolation({ 50 property: 'orphans', 51 from: 'inherit', 52 to: '20', 53 }, [ 54 {at: -0.5, expect: '35'}, 55 {at: 0, expect: '30'}, 56 {at: 0.3, expect: '27'}, 57 {at: 0.7, expect: '23'}, 58 {at: 1, expect: '20'}, 59 {at: 1.5, expect: '15'}, 60 ]); 61 62 test_interpolation({ 63 property: 'orphans', 64 from: 'unset', 65 to: '20', 66 }, [ 67 {at: -0.5, expect: '35'}, 68 {at: 0, expect: '30'}, 69 {at: 0.3, expect: '27'}, 70 {at: 0.7, expect: '23'}, 71 {at: 1, expect: '20'}, 72 {at: 1.5, expect: '15'}, 73 ]); 74 75 test_interpolation({ 76 property: 'orphans', 77 from: '10', 78 to: '1' 79 }, [ 80 {at: -0.5, expect: '15'}, 81 {at: 0, expect: '10'}, 82 {at: 0.3, expect: '7'}, 83 {at: 0.7, expect: '4'}, 84 // Only positive integers are valid 85 {at: 1, expect: '1'}, 86 {at: 1.5, expect: '1'} 87 ]); 88 </script>