Bug 1852352 [wpt PR 41889] - Bring clip-path-polygon-010.html up-to-d…

…ate with the current spec, a=testonly Automatic update from web-platform-tests Bring clip-path-polygon-010.html up-to-date with the current spec See interop-2023 test change proposal: web-platform-tests/interop#409 Bug: 1457595 Change-Id: I42e93b76005e277ce5cb6ced021b37855d3e185f Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4850602 Auto-Submit: Philip Rogers <pdrchromium.org> Commit-Queue: Xianzhu Wang <wangxianzhuchromium.org> Reviewed-by: Xianzhu Wang <wangxianzhuchromium.org> Cr-Commit-Position: refs/heads/main{#1194938} -- wpt-commits: 4dd18031b2c1975d722f956483a6cd356574629a wpt-pr: 41889 UltraBlame original commit: e871d3ac80fd42c22403854f51de40a15e7d0c81
marco-c · Sep 29, 2023 · 8a18f9e · 8a18f9e
1 parent f42d37f
commit 8a18f9e
Showing 1 changed file with 32 additions and 0 deletions.
diff --git a/testing/web-platform/tests/css/css-masking/clip-path/clip-path-polygon-010.html b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-polygon-010.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>CSS Masking: Test clip-path and polygon with fill-box</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-stripes-001-ref.html">
+	<meta name="assert" content="The clip-path property allows specifying
+	basic shapes and reference boxes. This test checks the usage of the correct
+	reference box. 'fill-box' was specified but is not supported for HTML
+	elements. The used value should be 'content-box' for the polygon() function
+	instead. By mixing percentage and absolute values as coordinates we check
+	the correct used reference box. On success you should see a green
+	vertical stripe next to a lime green vertical stripe. Both should be of equal
+	size.">
+<style>
+div {
+	width: 50px;
+	height: 50px;
+	background-color: green;
+	padding: 25px;
+	margin: 25px;
+	border: red solid 50px;
+	border-left: lime solid 50px;
+}
+</style>
+<body>
+	<p>The test passes if you see a green vertical stripe next to a lime green vertical stripe, both stripes should be of equal size and there should be no red.</p>
+	<div style="clip-path: polygon(-75px -50%, 50% -25px, 25px 150%, -75px 75px) fill-box"></div>
+</body>
+</html>