clip-path-polygon-002.html

mozilla-central/testing/web-platform/tests/css/css-masking/clip-path/clip-path-polygon-002.html

Enable keyboard shortcuts

Source code

File a bug in Core :: Web Painting

Revision control

Copy as Markdown

Other Tools

Test Info:

This WPT test may be referenced by the following Test IDs:
- /css/css-masking/clip-path/clip-path-polygon-002.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<html>

<head>

	<title>CSS Masking: Test clip-path property and polygon function with percentage values</title>

	<link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">

	<link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths">

	<link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path">

	<link rel="match" href="reference/clip-path-rectangle-ref.html">

	<meta name="assert" content="The clip-path property takes the basic shape

	'polygon' for clipping. Test percentage values for arguments. Percentage

	values are relative to specified reference box. If no reference box was

	specified, percentage values are relative to border-box. A number of

	percentage values are specified as coordinates. On pass you should see a

	green square and no red.">

</head>

<body>

	<p>The test passes if there is a green box.</p>

	<div style="width: 150px; height: 100px; border: solid red 50px; background-color: green; clip-path: polygon(20% 25%, 80% 25%, 80% 75%, 20% 75%)"></div>

</body>

</html>