| <!DOCTYPE html> |
| <script src="resources/responsive-test.js"></script> |
| <script> |
| assertCSSResponsive({ |
| property: 'clip-path', |
| from: neutralKeyframe, |
| to: 'circle(100px at 200px 300px)', |
| configurations: [{ |
| state: {underlying: 'inset(50px)'}, |
| expect: [ |
| {at: 0.25, is: 'inset(50px)'}, |
| {at: 0.75, is: 'circle(100px at 200px 300px)'}, |
| ], |
| }, { |
| state: {underlying: 'circle(200px at 0px 0px)'}, |
| expect: [ |
| {at: 0.25, is: 'circle(175px at 50px 75px)'}, |
| {at: 0.75, is: 'circle(125px at 150px 225px)'}, |
| ], |
| }], |
| }); |
| |
| assertCSSResponsive({ |
| property: 'clip-path', |
| from: 'inherit', |
| to: 'polygon(140px 240px, 340px 440px)', |
| configurations: [{ |
| state: {inherited: 'polygon(100px 200px, 300px 400px, 500px 600px)'}, |
| expect: [ |
| {at: 0.25, is: 'polygon(100px 200px, 300px 400px, 500px 600px)'}, |
| {at: 0.75, is: 'polygon(140px 240px, 340px 440px)'}, |
| ], |
| }, { |
| state: {inherited: 'polygon(100px 200px, 300px 400px)'}, |
| expect: [ |
| {at: 0.25, is: 'polygon(110px 210px, 310px 410px)'}, |
| {at: 0.75, is: 'polygon(130px 230px, 330px 430px)'}, |
| ], |
| }, { |
| state: {inherited: 'url("/clip-source")'}, |
| expect: [ |
| {at: 0.25, is: 'url("/clip-source")'}, |
| {at: 0.75, is: 'polygon(140px 240px, 340px 440px)'}, |
| ], |
| }, { |
| state: {inherited: 'none'}, |
| expect: [ |
| {at: 0.25, is: 'none'}, |
| {at: 0.75, is: 'polygon(140px 240px, 340px 440px)'}, |
| ], |
| }, { |
| state: {inherited: 'polygon(100px 200px, 300px 480px)'}, |
| expect: [ |
| {at: 0.25, is: 'polygon(110px 210px, 310px 470px)'}, |
| {at: 0.75, is: 'polygon(130px 230px, 330px 450px)'}, |
| ], |
| }], |
| }); |
| </script> |
