189256 2018-09-03 21:59:32 -0700 feFlood with explicit size in CSS filter doesn't render 2023-04-10 17:56:33 -0700 1 1 1 Unclassified WebKit CSS WebKit Nightly Build Unspecified Unspecified REOPENED P2 Normal --- 1 simon.fraser webkit-unassigned ahmad.saleem792 sabouhallawa simon.fraser oldest_to_newest 1456263 0 simon.fraser 2018-09-03 21:59:32 -0700 Attached test case doesn't render in Safari; it does in FF and Chrome (differently). Oddly, toggling dismay:none on the SVG changes behavior. 1456264 1 348805 simon.fraser 2018-09-03 21:59:52 -0700 Created attachment 348805 Testcase 1947492 2 ahmad.saleem792 2023-04-08 06:22:47 -0700 I am able to reproduce this bug in Safari 16.4 and green rect is on 0,0 while Chrome Canary 114 and Firefox Nightly 113 does not start from 0,0 but has margin around it. 1947677 3 465833 sabouhallawa 2023-04-10 10:53:25 -0700 Created attachment 465833 unclipped filtered element I think the display in WebKit is more correct than Chrome and FireFox. The default filterRegion of the SVGFilter is { -10%, -10%, 110%, 110% }. Because the filtered element dimension is { 100, 100 }, the filterRegion will be extended 10 pixels from all directions. In WebKit, this is drawn with no clipping. But in Chrome and FireFox, the top and the left extended areas are clipped. See the attached new test case where a filtered element is drawn and an another overlay element with the same dimension is drawn on top of it. The overlay element only draws the border. 1947682 4 simon.fraser 2023-04-10 11:09:01 -0700 I don't think this config changed; if our rendering differs from Chrome and Firefox and we think the behavior is correct, we should open a spec issue to have the spec clarify behavior. It's not clear to me that WebKit behavior is correct. 1947791 5 sabouhallawa 2023-04-10 17:26:51 -0700 (In reply to Simon Fraser (smfr) from comment #4) > I don't think this config changed; if our rendering differs from Chrome and > Firefox and we think the behavior is correct, we should open a spec issue to > have the spec clarify behavior. But the specs is clear for applying an SVGFilter on an SVGElement. The geometry of the filterRegion is { -10%, -10%, 110%, 110% }, see https://drafts.fxtf.org/filter-effects/#filter-region. The problem happens when applying the SVGFilter to an HTMLElement. Do we apply the filterRegion geometry outside the HTMLElement border box? > > It's not clear to me that WebKit behavior is correct. I am not sure why the rendering of Chrome and FireFox is correct. They clip the top and left filter extension and they keep the right and the bottom. And I think we need at least to retitle this bug and preferably close this one and open a new one. The original bug was fixed (not drawing the filter itself). We now want to discuss: The filterRegion geometry of the SVGFilter when applied on an HTMLElement. 1947796 6 simon.fraser 2023-04-10 17:56:33 -0700 I’m OK with doing that. 348805 2018-09-03 21:59:52 -0700 2018-09-03 21:59:52 -0700 Testcase reference-filter-set-filter-regions.html text/html 806 simon.fraser PGhlYWQ+CiAgICA8c3R5bGU+CiAgICAgICAgLmJveCB7CiAgICAgICAgICB3aWR0aDogMTAwcHg7 CiAgICAgICAgICBoZWlnaHQ6IDEwMHB4OwogICAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogZ3Jl ZW47CiAgICAgICAgICBmaWx0ZXI6IHVybCgjZmlsdGVyKTsKICAgICAgICB9CiAgICAgICAgCiAg ICAgICAgc3ZnIHsKLyogICAgICAgICAgICBkaXNwbGF5OiBub25lOyAvKiBGbGlwcyBiZWhhdmlv ciBpbiBGaXJlZm94IGFuZCBTYWZhcmkhICovKi8KICAgICAgICB9CiAgICA8L3N0eWxlPgogICAg PHNjcmlwdD4KICAgICAgICBmdW5jdGlvbiBkb1Rlc3QoKQogICAgICAgIHsKICAgICAgICAgICAg dmFyIGJveCA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdib3gnKTsKICAgICAgICAgICAgYm94 LmNsYXNzTGlzdC5hZGQoJ2FuaW1hdGluZycpOwogICAgICAgIH0KICAgICAgICB3aW5kb3cuYWRk RXZlbnRMaXN0ZW5lcignbG9hZCcsIGRvVGVzdCwgZmFsc2UpOwogICAgPC9zY3JpcHQ+CjwvaGVh ZD4KPGJvZHk+CiAgIDxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0 aD0iMCIgaGVpZ2h0PSIwIiB2ZXJzaW9uPSIxLjEiPgogICAgPGRlZnM+CiAgICAgICAgPGZpbHRl ciBpZD0iZmlsdGVyIj4KICAgICAgICAgICAgPGZlRmxvb2QgeD0iMCIgeT0iMCIgd2lkdGg9IjQw MCIgaGVpZ2h0PSI0MDAiIGZsb29kLWNvbG9yPSJncmVlbiIgLz4KICAgICAgICA8L2ZpbHRlcj4K ICAgIDwvZGVmcz4KICA8L3N2Zz4KCiAgPGRpdiBpZD0iYm94IiBjbGFzcz0iYm94Ij48L2Rpdj4K PC9ib2R5Pgo= 465833 2023-04-10 10:53:25 -0700 2023-04-10 10:53:25 -0700 unclipped filtered element test-feFlood.html text/html 880 sabouhallawa PGhlYWQ+CiAgICA8c3R5bGU+CiAgICAgICAgLmNvbnRhaW5lciB7CiAgICAgICAgICAgIHdpZHRo OiAxMDBweDsKICAgICAgICAgICAgaGVpZ2h0OiAxMDBweDsKICAgICAgICAgICAgcG9zaXRpb246 IHJlbGF0aXZlOwogICAgICAgIH0KICAgICAgICAuYm94IHsKICAgICAgICAgICAgd2lkdGg6IDEw MCU7CiAgICAgICAgICAgIGhlaWdodDogMTAwJTsKICAgICAgICAgICAgcG9zaXRpb246IGFic29s dXRlOwogICAgICAgICAgICB0b3A6IDA7CiAgICAgICAgICAgIGxlZnQ6IDA7CiAgICAgICAgfQog ICAgICAgIC5maWx0ZXJlZCB7CiAgICAgICAgICAgIGZpbHRlcjogdXJsKCNmaWx0ZXIpOwogICAg ICAgIH0KICAgICAgICAuYm9yZGVyZWQgewogICAgICAgICAgICB6LWluZGV4OiA5OwogICAgICAg ICAgICBib3JkZXI6IDJweCBzb2xpZCB5ZWxsb3c7CiAgICAgICAgfQogICAgPC9zdHlsZT4KPC9o ZWFkPgo8Ym9keT4KICAgIDxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3 aWR0aD0iMCIgaGVpZ2h0PSIwIiB2ZXJzaW9uPSIxLjEiPgogICAgICAgIDxkZWZzPgogICAgICAg ICAgICA8ZmlsdGVyIGlkPSJmaWx0ZXIiPgogICAgICAgICAgICAgICAgPGZlRmxvb2QgeD0iMCIg eT0iMCIgd2lkdGg9IjQwMCIgaGVpZ2h0PSI0MDAiIGZsb29kLWNvbG9yPSIjMDA1N2UzIiBmbG9v ZC1vcGFjaXR5PSIwLjciLz4KICAgICAgICAgICAgPC9maWx0ZXI+CiAgICAgICAgPC9kZWZzPgog ICAgPC9zdmc+CiAgICA8ZGl2IGNsYXNzPSJjb250YWluZXIiPgogICAgICAgIDxkaXYgY2xhc3M9 ImJveCBmaWx0ZXJlZCI+PC9kaXY+CiAgICAgICAgPGRpdiBjbGFzcz0iYm94IGJvcmRlcmVkIj48 L2Rpdj4KICAgIDwvZGl2Pgo8L2JvZHk+Cg==