<Page>
    <GridLayout columns="*,*" rows="*,*,*,*" automationText="clipPath">
        <StackLayout col="0" colSpan="2" row="0" width="100" height="100" style.backgroundColor="magenta">
            <Button text="no clip-path" width="100" height="100" style="background-image: url('~/ui-tests-app/resources/images/inset-test.png'); background-size: 100% 100%; background-repeat: no-repeat;"/>
        </StackLayout>
        <StackLayout col="0" row="1" width="100" height="100" style.backgroundColor="magenta">
            <Button text="rect" width="100" height="100" style="clip-path: rect(10% 90 90% 10); background-image: url('~/ui-tests-app/resources/images/inset-test.png'); background-size: 100% 100%; background-repeat: no-repeat;"/>
        </StackLayout>
        <StackLayout col="1" row="1" width="100" height="100" style.backgroundColor="magenta">
            <Button text="inset" width="100" height="100" style="clip-path: inset(15%); background-image: url('~/ui-tests-app/resources/images/inset-test.png'); background-size: 100% 100%; background-repeat: no-repeat;"/>
        </StackLayout>
        <StackLayout col="0" row="2" width="100" height="100" style.backgroundColor="magenta">
            <Button text="circle" width="100" height="100" style="clip-path: circle(80% at 55% 40%); background-image: url('~/ui-tests-app/resources/images/inset-test.png'); background-size: 100% 100%; background-repeat: no-repeat;"/>
        </StackLayout>
        <StackLayout col="1" row="2" width="100" height="100" style.backgroundColor="magenta">
            <Button text="ellipse" width="100" height="100" style=" clip-path: ellipse(45% 25% at 45% 55%); background-image: url('~/ui-tests-app/resources/images/inset-test.png'); background-size: 100% 100%; background-repeat: no-repeat;"/>
        </StackLayout>
        <StackLayout col="0" row="3" width="100" height="100" style.backgroundColor="magenta">
            <Button text="polygon"  width="100" height="100" style=" clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);background-image: url('~/ui-tests-app/resources/images/inset-test.png'); background-size: 100% 100%; background-repeat: no-repeat;"/>
        </StackLayout>
        <StackLayout col="1" row="3" width="100" height="100" style.backgroundColor="magenta">
            <Button text="image polygon" width="100" height="100" style=" clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);background-image: url('~/ui-tests-app/resources/images/inset-test.png'); background-size: 100% 100%; background-repeat: no-repeat;"/>
        </StackLayout>
    </GridLayout>
</Page>