blob: ed2ede4fedbc277c9fd804765c83ca5f162b535f (
plain)
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>
|
