| <!DOCTYPE html> |
| <meta charset="UTF-8"> |
| <body> |
| <script src="resources/interpolation-test.js"></script> |
| <script> |
| assertInterpolation({ |
| property: 'shape-outside', |
| from: 'rectangle(0px, 0px, 100px, 100px)', |
| to: 'rectangle(25px, 25px, 50px, 50px)' |
| }, [ |
| {at: -0.3, is: 'rectangle(-7.5px, -7.5px, 115px, 115px)'}, |
| {at: 0, is: 'rectangle(0px, 0px, 100px, 100px)'}, |
| {at: 0.3, is: 'rectangle(7.5px, 7.5px, 85px, 85px)'}, |
| {at: 0.6, is: 'rectangle(15px, 15px, 70px, 70px)'}, |
| {at: 1, is: 'rectangle(25px, 25px, 50px, 50px)'}, |
| {at: 1.5, is: 'rectangle(37.5px, 37.5px, 25px, 25px)'} |
| ]); |
| |
| assertInterpolation({ |
| property: 'shape-outside', |
| from: 'inset-rectangle(25px, 25px, 100px, 100px)', |
| to: 'inset-rectangle(50px, 50px, 50px, 50px)' |
| }, [ |
| {at: -0.5, is: 'inset-rectangle(12.5px, 12.5px, 125px, 125px)'}, |
| {at: 0, is: 'inset-rectangle(25px, 25px, 100px, 100px)'}, |
| {at: 0.3, is: 'inset-rectangle(32.5px, 32.5px, 85px, 85px)'}, |
| {at: 0.6, is: 'inset-rectangle(40px, 40px, 70px, 70px)'}, |
| {at: 1, is: 'inset-rectangle(50px, 50px, 50px, 50px)'}, |
| {at: 1.5, is: 'inset-rectangle(62.5px, 62.5px, 25px, 25px)'} |
| ]); |
| |
| assertInterpolation({ |
| property: 'shape-outside', |
| from: 'circle(100% at 0% 0%)', |
| to: 'circle(50% at 25% 25%)', |
| }, [ |
| {at: -0.3, is: 'circle(115% at -7.5% -7.5%)'}, |
| {at: 0, is: 'circle(100% at 0% 0%)'}, |
| {at: 0.3, is: 'circle(85% at 7.5% 7.5%)'}, |
| {at: 0.6, is: 'circle(70% at 15% 15%)'}, |
| {at: 1, is: 'circle(50% at 25% 25%)'}, |
| {at: 1.5, is: 'circle(25% at 37.5% 37.5%)'} |
| ]); |
| |
| assertInterpolation({ |
| property: 'shape-outside', |
| from: 'ellipse(100% 100% at 0% 0%)', |
| to: 'ellipse(50% 50% at 25% 25%)', |
| }, [ |
| {at: -0.3, is: 'ellipse(115% 115% at -7.5% -7.5%)'}, |
| {at: 0, is: 'ellipse(100% 100% at 0% 0%)'}, |
| {at: 0.3, is: 'ellipse(85% 85% at 7.5% 7.5%)'}, |
| {at: 0.6, is: 'ellipse(70% 70% at 15% 15%)'}, |
| {at: 1, is: 'ellipse(50% 50% at 25% 25%)'}, |
| {at: 1.5, is: 'ellipse(25% 25% at 37.5% 37.5%)'} |
| ]); |
| |
| assertInterpolation({ |
| property: 'shape-outside', |
| from: 'polygon(nonzero, 0px 0px, 25px 25px, 50px 50px)', |
| to: 'polygon(nonzero, 25px 25px, 50px 50px, 75px 75px)', |
| }, [ |
| {at: -0.3, is: 'polygon(nonzero, -7.5px -7.5px, 17.5px 17.5px, 42.5px 42.5px)'}, |
| {at: 0, is: 'polygon(nonzero, 0px 0px, 25px 25px, 50px 50px)'}, |
| {at: 0.3, is: 'polygon(nonzero, 7.5px 7.5px, 32.5px 32.5px, 57.5px 57.5px)'}, |
| {at: 0.6, is: 'polygon(nonzero, 15px 15px, 40px 40px, 65px 65px)'}, |
| {at: 1, is: 'polygon(nonzero, 25px 25px, 50px 50px, 75px 75px)'}, |
| {at: 1.5, is: 'polygon(nonzero, 37.5px 37.5px, 62.5px 62.5px, 87.5px 87.5px)'} |
| ]); |
| |
| assertInterpolation({ |
| property: 'shape-outside', |
| from: 'polygon(evenodd, 0px 0px, 25px 25px, 50px 50px)', |
| to: 'polygon(nonzero, 25px 25px, 50px 50px, 75px 75px)', |
| }, [ |
| {at: -0.3, is: 'polygon(evenodd, 0px 0px, 25px 25px, 50px 50px)'}, |
| {at: 0, is: 'polygon(evenodd, 0px 0px, 25px 25px, 50px 50px)'}, |
| {at: 0.3, is: 'polygon(evenodd, 0px 0px, 25px 25px, 50px 50px)'}, |
| {at: 0.6, is: 'polygon(nonzero, 25px 25px, 50px 50px, 75px 75px)'}, |
| {at: 1, is: 'polygon(nonzero, 25px 25px, 50px 50px, 75px 75px)'}, |
| {at: 1.5, is: 'polygon(nonzero, 25px 25px, 50px 50px, 75px 75px)'}, |
| ]); |
| |
| assertInterpolation({ |
| property: 'shape-outside', |
| from: 'none', |
| to: 'ellipse(100% 100% at 0% 0%)', |
| }, [ |
| {at: -0.3, is: 'none'}, |
| {at: 0, is: 'none'}, |
| {at: 0.3, is: 'none'}, |
| {at: 0.6, is: 'ellipse(100% 100% at 0% 0%)'}, |
| {at: 1, is: 'ellipse(100% 100% at 0% 0%)'}, |
| {at: 1.5, is: 'ellipse(100% 100% at 0% 0%)'} |
| ]); |
| </script> |
| </body> |
