<html>
<head>
<base href="https://bugs.webkit.org/" />
</head>
<body><table border="1" cellspacing="0" cellpadding="8">
<tr>
<th>Bug ID</th>
<td><a class="bz_bug_link
bz_status_NEW "
title="NEW - Weird behavior of css clip-path when trying to create multiple crippling areas using the polygon shape"
href="https://bugs.webkit.org/show_bug.cgi?id=146539">146539</a>
</td>
</tr>
<tr>
<th>Summary</th>
<td>Weird behavior of css clip-path when trying to create multiple crippling areas using the polygon shape
</td>
</tr>
<tr>
<th>Classification</th>
<td>Unclassified
</td>
</tr>
<tr>
<th>Product</th>
<td>WebKit
</td>
</tr>
<tr>
<th>Version</th>
<td>528+ (Nightly build)
</td>
</tr>
<tr>
<th>Hardware</th>
<td>Unspecified
</td>
</tr>
<tr>
<th>OS</th>
<td>Unspecified
</td>
</tr>
<tr>
<th>Status</th>
<td>NEW
</td>
</tr>
<tr>
<th>Severity</th>
<td>Normal
</td>
</tr>
<tr>
<th>Priority</th>
<td>P2
</td>
</tr>
<tr>
<th>Component</th>
<td>CSS
</td>
</tr>
<tr>
<th>Assignee</th>
<td>webkit-unassigned@lists.webkit.org
</td>
</tr>
<tr>
<th>Reporter</th>
<td>sabouhallawa@apple.com
</td>
</tr></table>
<p>
<div>
<pre>Created <span class=""><a href="attachment.cgi?id=255987" name="attach_255987" title="test case">attachment 255987</a> <a href="attachment.cgi?id=255987&action=edit" title="test case">[details]</a></span>
test case
Open the attached test case. It has four <div> elements, each of them clips a red rectangle using a css clip-path. The css clip-paths use polygons to create different multiple clipping areas. A clipping area is closed by returning to the first point. This allows multiple areas to be created by a single polygon shape. The clip-paths in the test case represent the combinations of three clipping areas. When two areas are included, the clipping works fine. But when the three clipping areas are included, something wrong happens. The points of areas connect each other.
I could not the specs that explains how to create multiple clipping areas by a single polygon. If it is not spec-ed, then we still have a bug with the first three cases: the two shapes should not be separated. We may also have a bug in the specs for not providing a way to create a "real path" for the css clip-path.</pre>
</div>
</p>
<hr>
<span>You are receiving this mail because:</span>
<ul>
<li>You are the assignee for the bug.</li>
</ul>
</body>
</html>