shape-outside-composition.html (6976B)
1 <!DOCTYPE html> 2 <meta charset="UTF-8"> 3 <title>shape-outside composition</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 <body> 12 <script> 13 test_composition({ 14 property: 'shape-outside', 15 underlying: 'circle(100px at 25px 25%)', 16 addFrom: 'circle(10px at 25px 75%)', 17 addTo: 'circle(50px at 50px center)', 18 }, [ 19 {at: -0.3, expect: 'circle(98px at 42.5px 107.5%)'}, 20 {at: 0, expect: 'circle(110px at 50px 100%)'}, 21 {at: 0.3, expect: 'circle(122px at 57.5px 92.5%)'}, 22 {at: 0.6, expect: 'circle(134px at 65px 85%)'}, 23 {at: 1, expect: 'circle(150px at 75px 75%)'}, 24 {at: 1.5, expect: 'circle(170px at 87.5px 62.5%)'}, 25 ]); 26 27 test_composition({ 28 property: 'shape-outside', 29 underlying: 'circle(100px at 20px 20%)', 30 addFrom: 'circle(50px at 50px 50%)', 31 replaceTo: 'circle(50% at 150px 150%)', 32 }, [ 33 {at: -0.3, expect: 'circle(calc(195px + -15%) at 46px 46%)'}, 34 {at: 0, expect: 'circle(calc(150px + 0%) at 70px 70%)'}, 35 {at: 0.3, expect: 'circle(calc(105px + 15%) at 94px 94%)'}, 36 {at: 0.6, expect: 'circle(calc(60px + 30%) at 118px 118%)'}, 37 {at: 1, expect: 'circle(50% at 150px 150%)'}, 38 {at: 1.5, expect: 'circle(calc(-75px + 75%) at 190px 190%)'}, 39 ]); 40 41 test_composition({ 42 property: 'shape-outside', 43 underlying: 'circle(farthest-side at 25px 75%)', 44 addFrom: 'circle(farthest-side at 25px 75%)', 45 addTo: 'circle(farthest-side at 50px center)', 46 }, [ 47 {at: 0.25, expect: 'circle(farthest-side at 25px 75%)'}, 48 {at: 0.75, expect: 'circle(farthest-side at 50px 50%)'}, 49 ]); 50 51 test_composition({ 52 property: 'shape-outside', 53 underlying: 'circle(50px at 10px 20px)', 54 addFrom: 'circle(50px at 10px 20px)', 55 addTo: 'circle(farthest-side at 30px 40px)', 56 }, [ 57 {at: 0.25, expect: 'circle(100px at 20px 40px)'}, 58 {at: 0.75, expect: 'circle(farthest-side at 30px 40px)'}, 59 ]); 60 61 test_composition({ 62 property: 'shape-outside', 63 underlying: 'ellipse(10px 20px at 30px 40px)', 64 addFrom: 'ellipse(40px 30px at 20px 10px)', 65 addTo: 'ellipse(140px 130px at 120px 110px)', 66 }, [ 67 {at: -0.3, expect: 'ellipse(20px 20px at 20px 20px)'}, 68 {at: 0, expect: 'ellipse(50px 50px at 50px 50px)'}, 69 {at: 0.3, expect: 'ellipse(80px 80px at 80px 80px)'}, 70 {at: 0.6, expect: 'ellipse(110px 110px at 110px 110px)'}, 71 {at: 1, expect: 'ellipse(150px 150px at 150px 150px)'}, 72 {at: 1.5, expect: 'ellipse(200px 200px at 200px 200px)'}, 73 ]); 74 75 test_composition({ 76 property: 'shape-outside', 77 underlying: 'ellipse(10px 20px at 30px 40px)', 78 replaceFrom: 'ellipse(40px 30px at 20px 10px)', 79 addTo: 'ellipse(40px 30px at 20px 10px)', 80 }, [ 81 {at: -0.3, expect: 'ellipse(37px 24px at 11px -2px)'}, 82 {at: 0, expect: 'ellipse(40px 30px at 20px 10px)'}, 83 {at: 0.3, expect: 'ellipse(43px 36px at 29px 22px)'}, 84 {at: 0.6, expect: 'ellipse(46px 42px at 38px 34px)'}, 85 {at: 1, expect: 'ellipse(50px 50px at 50px 50px)'}, 86 {at: 1.5, expect: 'ellipse(55px 60px at 65px 70px)'}, 87 ]); 88 89 test_composition({ 90 property: 'shape-outside', 91 underlying: 'ellipse(25px 75%)', 92 addFrom: 'ellipse()', 93 addTo: 'ellipse(closest-side farthest-side)', 94 }, [ 95 {at: 0.25, expect: 'ellipse()'}, 96 {at: 0.75, expect: 'ellipse(closest-side farthest-side)'}, 97 ]); 98 99 test_composition({ 100 property: 'shape-outside', 101 underlying: 'inset(20px)', 102 addFrom: 'inset(20px)', 103 addTo: 'inset(40%)', 104 }, [ 105 {at: -0.3, expect: 'inset(calc(46px + -12%))'}, 106 {at: 0, expect: 'inset(calc(40px + 0%))'}, 107 {at: 0.3, expect: 'inset(calc(34px + 12%))'}, 108 {at: 0.6, expect: 'inset(calc(28px + 24%))'}, 109 {at: 1, expect: 'inset(calc(20px + 40%))'}, 110 {at: 1.5, expect: 'inset(calc(10px + 60%))'}, 111 ]); 112 113 test_composition({ 114 property: 'shape-outside', 115 underlying: 'inset(1px 2px 3px 4px round 10px 20px 30px 40px / 50px 60px 70px 80px)', 116 addFrom: 'inset(1px 2px 3px 4px round 10px 20px 30px 40px / 50px 60px 70px 80px)', 117 replaceTo: 'inset(102px 104px 106px 108px round 120px 140px 160px 180px / 200px 220px 240px 260px)', 118 }, [ 119 {at: -0.3, expect: 'inset(-28px -26px -24px -22px round 0px 10px 30px 50px / 70px 90px 110px 130px)'}, 120 {at: 0, expect: 'inset(2px 4px 6px 8px round 20px 40px 60px 80px / 100px 120px 140px 160px)'}, 121 {at: 0.25, expect: 'inset(27px 29px 31px 33px round 45px 65px 85px 105px / 125px 145px 165px 185px)'}, 122 {at: 0.75, expect: 'inset(77px 79px 81px 83px round 95px 115px 135px 155px / 175px 195px 215px 235px)'}, 123 {at: 1, expect: 'inset(102px 104px 106px 108px round 120px 140px 160px 180px / 200px 220px 240px 260px)'}, 124 {at: 1.5, expect: 'inset(152px 154px 156px 158px round 170px 190px 210px 230px / 250px 270px 290px 310px)'}, 125 ]); 126 127 test_composition({ 128 property: 'shape-outside', 129 underlying: 'inset(1px 2px round 100px 200px)', 130 addFrom: 'inset(1px 2px round 100px 200px)', 131 addTo: 'inset(101px 102px 101px 102px)', 132 }, [ 133 {at: -0.3, expect: 'inset(-28px -26px round 230px 460px)'}, 134 {at: 0, expect: 'inset(2px 4px round 200px 400px)'}, 135 {at: 0.3, expect: 'inset(32px 34px round 170px 340px)'}, 136 {at: 0.6, expect: 'inset(62px 64px round 140px 280px)'}, 137 {at: 1, expect: 'inset(102px 104px round 100px 200px)'}, 138 {at: 1.5, expect: 'inset(152px 154px round 50px 100px)'}, 139 ]); 140 141 test_composition({ 142 property: 'shape-outside', 143 underlying: 'polygon(10px 20%, 30px 40%)', 144 addFrom: 'polygon(10px 20%, 30px 40%)', 145 addTo: 'polygon(110px 120%, 130px 140%)', 146 }, [ 147 {at: -0.3, expect: 'polygon(-10px 10%, 30px 50%)'}, 148 {at: 0, expect: 'polygon(20px 40%, 60px 80%)'}, 149 {at: 0.3, expect: 'polygon(50px 70%, 90px 110%)'}, 150 {at: 0.6, expect: 'polygon(80px 100%, 120px 140%)'}, 151 {at: 1, expect: 'polygon(120px 140%, 160px 180%)'}, 152 {at: 1.5, expect: 'polygon(170px 190%, 210px 230%)'}, 153 ]); 154 155 test_composition({ 156 property: 'shape-outside', 157 underlying: 'polygon(evenodd, 10px 20px)', 158 addFrom: 'polygon(evenodd, 10px 20px)', 159 addTo: 'polygon(evenodd, 110px 120px)', 160 }, [ 161 {at: -0.3, expect: 'polygon(evenodd, -10px 10px)'}, 162 {at: 0, expect: 'polygon(evenodd, 20px 40px)'}, 163 {at: 0.3, expect: 'polygon(evenodd, 50px 70px)'}, 164 {at: 0.6, expect: 'polygon(evenodd, 80px 100px)'}, 165 {at: 1, expect: 'polygon(evenodd, 120px 140px)'}, 166 {at: 1.5, expect: 'polygon(evenodd, 170px 190px)'}, 167 ]); 168 169 test_composition({ 170 property: 'shape-outside', 171 underlying: 'polygon(evenodd, 10px 20px)', 172 addFrom: 'polygon(evenodd, 10px 20px)', 173 addTo: 'polygon(nonzero, 30px 40px)', 174 }, [ 175 {at: 0.25, expect: 'polygon(evenodd, 20px 40px)'}, 176 {at: 0.75, expect: 'polygon(30px 40px)'}, 177 ]); 178 179 test_composition({ 180 property: 'shape-outside', 181 underlying: 'polygon(10px 20px, 30px 40px)', 182 addFrom: 'polygon(10px 20px, 30px 40px)', 183 addTo: 'polygon(30px 40px)', 184 }, [ 185 {at: 0.25, expect: 'polygon(20px 40px, 60px 80px)'}, 186 {at: 0.75, expect: 'polygon(30px 40px)'}, 187 ]); 188 </script> 189 </body>