wpt/css/css-masking/clip-path/clip-path-polygon-002.html at master · web-platform-tests/wpt · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!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>