146539 2015-07-01 20:25:58 -0700 Weird behavior of css clip-path when trying to create multiple clippling areas using the polygon shape 2020-12-02 18:53:12 -0800 1 1 1 Unclassified WebKit CSS 528+ (Nightly build) Unspecified Unspecified NEW InRadar P2 Normal --- 126207 1 sabouhallawa webkit-unassigned dino krit sabouhallawa simon.fraser webkit-bug-importer oldest_to_newest 1106294 0 255987 sabouhallawa 2015-07-01 20:25:58 -0700 Created attachment 255987 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. 1106428 1 webkit-bug-importer 2015-07-02 11:35:13 -0700 <rdar://problem/21656455> 255987 2015-07-01 20:25:58 -0700 2015-07-01 20:25:58 -0700 test case test138.html text/html 1060 sabouhallawa PHN0eWxlPgogIC5ib3ggewogICAgZGlzcGxheTogaW5saW5lLWJsb2NrOwogICAgd2lkdGg6IDcy cHg7CiAgICBoZWlnaHQ6IDcycHg7CiAgICBiYWNrZ3JvdW5kLXNpemU6IDEwMCUgMTAwJTsKICAg IGJhY2tncm91bmQtY29sb3I6IHJlZDsKICB9CgogIC5jbGlwLXRlc3QxMiB7CiAgICAtd2Via2l0 LWNsaXAtcGF0aDogcG9seWdvbigKICAgICAgMjRweCAxOHB4LCAyNHB4IDI2cHgsIDQ4cHggNDFw eCwgNTVweCAzN3B4LCAyNHB4IDE4cHgsCiAgICAgIDEycHggMjJweCwgMTRweCAyMnB4LCA2MnB4 IDUycHgsIDYwcHggNTJweCwgMTJweCAyMnB4CiAgICApOwogIH0KICAgIAogIC5jbGlwLXRlc3Qx MyB7CiAgICAtd2Via2l0LWNsaXAtcGF0aDogcG9seWdvbigKICAgICAgMjRweCAxOHB4LCAyNHB4 IDI2cHgsIDQ4cHggNDFweCwgNTVweCAzN3B4LCAyNHB4IDE4cHgsCiAgICAgIDQ0cHggNDNweCwg MjRweCAzMXB4LCAyNHB4IDU1cHgsIDQ0cHggNDNweAogICAgKTsKICB9CgogIC5jbGlwLXRlc3Qy MyB7CiAgICAtd2Via2l0LWNsaXAtcGF0aDogcG9seWdvbigKICAgICAgMTJweCAyMnB4LCAxNHB4 IDIycHgsIDYycHggNTJweCwgNjBweCA1MnB4LCAxMnB4IDIycHgsCiAgICAgIDQ0cHggNDNweCwg MjRweCAzMXB4LCAyNHB4IDU1cHgsIDQ0cHggNDNweAogICAgKTsKICB9CiAgICAKICAuY2xpcC10 ZXN0MTIzIHsKICAgIC13ZWJraXQtY2xpcC1wYXRoOiBwb2x5Z29uKAogICAgICAyNHB4IDE4cHgs IDI0cHggMjZweCwgNDhweCA0MXB4LCA1NXB4IDM3cHgsIDI0cHggMThweCwKICAgICAgMTJweCAy MnB4LCAxNHB4IDIycHgsIDYycHggNTJweCwgNjBweCA1MnB4LCAxMnB4IDIycHgsCiAgICAgIDQ0 cHggNDNweCwgMjRweCAzMXB4LCAyNHB4IDU1cHgsIDQ0cHggNDNweAogICAgKTsKICB9Cjwvc3R5 bGU+CjxkaXYgY2xhc3M9ImJveCBjbGlwLXRlc3QxMiI+PC9kaXY+CjxkaXYgY2xhc3M9ImJveCBj bGlwLXRlc3QxMyI+PC9kaXY+CjxkaXYgY2xhc3M9ImJveCBjbGlwLXRlc3QyMyI+PC9kaXY+Cjxk aXYgY2xhc3M9ImJveCBjbGlwLXRlc3QxMjMiPjwvZGl2Pg==