shape-outside-interpolation.html (4204B)
1 <!DOCTYPE html> 2 <meta charset="UTF-8"> 3 <title>shape-outside interpolation</title> 4 <link rel="help" href="https://drafts.csswg.org/css-shapes/#shape-outside-property"> 5 <meta name="assert" content="shape-outside supports animation as <basic-shape> or discrete"> 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 shape-outside: circle(80% at 30% 10%); 14 } 15 .target { 16 shape-outside: circle(60% at 10% 30%); 17 } 18 </style> 19 20 <body></body> 21 22 <script> 23 /* TODO: add inset test once blend() works for it */ 24 25 test_interpolation({ 26 property: 'shape-outside', 27 from: neutralKeyframe, 28 to: 'circle(40% at 20% 20%)', 29 }, [ 30 {at: -0.3, expect: 'circle(66% at 7% 33%)'}, 31 {at: 0, expect: 'circle(60% at 10% 30%)'}, 32 {at: 0.3, expect: 'circle(54% at 13% 27%)'}, 33 {at: 0.6, expect: 'circle(48% at 16% 24%)'}, 34 {at: 1, expect: 'circle(40% at 20% 20%)'}, 35 {at: 1.5, expect: 'circle(30% at 25% 15%)'}, 36 ]); 37 38 test_no_interpolation({ 39 property: 'shape-outside', 40 from: 'initial', 41 to: 'circle(40% at 20% 20%)', 42 }); 43 44 test_interpolation({ 45 property: 'shape-outside', 46 from: 'inherit', 47 to: 'circle(40% at 20% 20%)', 48 }, [ 49 {at: -0.3, expect: 'circle(92% at 33% 7%)'}, 50 {at: 0, expect: 'circle(80% at 30% 10%)'}, 51 {at: 0.3, expect: 'circle(68% at 27% 13%)'}, 52 {at: 0.6, expect: 'circle(56% at 24% 16%)'}, 53 {at: 1, expect: 'circle(40% at 20% 20%)'}, 54 {at: 1.5, expect: 'circle(20% at 15% 25%)'}, 55 ]); 56 57 test_no_interpolation({ 58 property: 'shape-outside', 59 from: 'unset', 60 to: 'circle(40% at 20% 20%)', 61 }); 62 63 test_interpolation({ 64 property: 'shape-outside', 65 from: 'circle(100% at 0% 0%)', 66 to: 'circle(50% at 25% 25%)', 67 }, [ 68 {at: -0.3, expect: 'circle(115% at -7.5% -7.5%)'}, 69 {at: 0, expect: 'circle(100% at 0% 0%)'}, 70 {at: 0.3, expect: 'circle(85% at 7.5% 7.5%)'}, 71 {at: 0.6, expect: 'circle(70% at 15% 15%)'}, 72 {at: 1, expect: 'circle(50% at 25% 25%)'}, 73 {at: 1.5, expect: 'circle(25% at 37.5% 37.5%)'} 74 ]); 75 76 test_interpolation({ 77 property: 'shape-outside', 78 from: 'ellipse(100% 100% at 0% 0%)', 79 to: 'ellipse(50% 50% at 25% 25%)', 80 }, [ 81 {at: -0.3, expect: 'ellipse(115% 115% at -7.5% -7.5%)'}, 82 {at: 0, expect: 'ellipse(100% 100% at 0% 0%)'}, 83 {at: 0.3, expect: 'ellipse(85% 85% at 7.5% 7.5%)'}, 84 {at: 0.6, expect: 'ellipse(70% 70% at 15% 15%)'}, 85 {at: 1, expect: 'ellipse(50% 50% at 25% 25%)'}, 86 {at: 1.5, expect: 'ellipse(25% 25% at 37.5% 37.5%)'} 87 ]); 88 89 test_interpolation({ 90 property: 'shape-outside', 91 from: 'polygon(nonzero, 0px 0px, 25px 25px, 50px 50px)', 92 to: 'polygon(nonzero, 25px 25px, 50px 50px, 75px 75px)', 93 }, [ 94 {at: -0.3, expect: 'polygon(nonzero, -7.5px -7.5px, 17.5px 17.5px, 42.5px 42.5px)'}, 95 {at: 0, expect: 'polygon(nonzero, 0px 0px, 25px 25px, 50px 50px)'}, 96 {at: 0.3, expect: 'polygon(nonzero, 7.5px 7.5px, 32.5px 32.5px, 57.5px 57.5px)'}, 97 {at: 0.6, expect: 'polygon(nonzero, 15px 15px, 40px 40px, 65px 65px)'}, 98 {at: 1, expect: 'polygon(nonzero, 25px 25px, 50px 50px, 75px 75px)'}, 99 {at: 1.5, expect: 'polygon(nonzero, 37.5px 37.5px, 62.5px 62.5px, 87.5px 87.5px)'} 100 ]); 101 102 test_no_interpolation({ 103 property: 'shape-outside', 104 from: 'polygon(evenodd, 0px 0px, 25px 25px, 50px 50px)', 105 to: 'polygon(nonzero, 25px 25px, 50px 50px, 75px 75px)', 106 }); 107 108 test_interpolation({ 109 property: 'shape-outside', 110 from: 'inset(100%)', 111 to: 'inset(120%)', 112 }, [ 113 {at: -0.3, expect: 'inset(94%)'}, 114 {at: 0, expect: 'inset(100%)'}, 115 {at: 0.3, expect: 'inset(106%)'}, 116 {at: 0.6, expect: 'inset(112%)'}, 117 {at: 1, expect: 'inset(120%)'}, 118 {at: 1.5, expect: 'inset(130%)'}, 119 ]); 120 121 test_no_interpolation({ 122 property: 'shape-outside', 123 from: 'none', 124 to: 'ellipse(100% 100% at 0% 0%)', 125 }); 126 127 // TODO: add intermediate keyframe tests when CSS shapes position computed values are cleaned up 128 test_interpolation({ 129 property: 'shape-outside', 130 from: 'circle(25% at right 5% bottom 15px)', 131 to: 'circle(45% at right 25% bottom 35px)', 132 }, [ 133 {at: 0.25, expect: 'circle(30% at 90% calc(-20px + 100%))'}, 134 {at: 0.5, expect: 'circle(35% at 85% calc(-25px + 100%))'}, 135 {at: 0.75, expect: 'circle(40% at 80% calc(-30px + 100%))'}, 136 ]); 137 </script>