- From: Amelia Bellamy-Royds via GitHub <sysbot+gh@w3.org>
- Date: Wed, 24 Jan 2018 20:24:11 +0000
- To: public-fxtf-archive@w3.org
An initial test case, with filters, for people to start exploring: https://codepen.io/AmeliaBR/pen/qpGQyQ ## Summary of the test: - The three filters each paint a flood color in the defined filter region, and then layer the original element over top. The original element will also be clipped to the filter region. * The blue and green filters are `objectBoundingBox` filters; the filter region is set to 2px wide (in scaled coordinates, this means 2 times the bounding box width) and 50% high (meaning 50% of the bounding box), measured from the 0,0 point of the reference box. The two filters are identical except for the flood color (they're used to distinguish different elements: the blue on normal elements and the green on elements with a rotational transform). * The purple and red filters are both `userSpaceOnUse` filters, with a filter region set to 100px wide (in the user coordinate system) and 50% high (of the user coordinate system's height), measured from the 0,0 point of the reference coordinate system. The purple is used on normal elements and the red on transformed elements. - The SVG containing the filter definitions is absolutely positioned offscreen, and set to 1px square, but with a 20x20 `viewBox`, because if we made it smaller elements would disappear in certain browsers and that wouldn't be very useful, now would it? - A series of 200x50px inline SVGs, each containing a 100%x100% rectangle (with yellow dotted stroke) that has the filter effects applied (and a transform applied, for the green & orange filters). All the SVGs have visible overflow; the cropping you see is from the filter region. - A series of 200x50px divs (with yellow dotted border), with the filter effects and transforms applied. The `transform-origin` is set to `0 0` to match SVG transform behavior. ## Summary of results: ### SVG elements: - All browsers tested are consistent & to-spec for rendering the `objectBoundingBox` effect on untransformed SVG elements (blue flood). The filter region is 1.5 times the rect fill-box width and half its height. Strokes are cropped where they fall outside the fill-box. - Most browsers are consistent & to-spec for `objectBoundingBox` on a transformed SVG element: the transform affects the filter region, so this looks like the previous element but rotated. MS Edge calculates the bounding box of the transformed rect in its parent's untransformed coordinate system before applying the filter. - As mentioned, Firefox is the only browser that is to-spec for `userSpaceOnUse` applied to SVG elements (purple), cropping the filtered rectangle to 100px wide and 50% of _its_ user space height (aka, 25px). All the others calculate the 50% height relative to the 20-unit `viewBox` height of the SVG where the filters were defined, instead of the SVG where the effect is being used. (But they do scale the units back up to full px height, according to the local coordinate system.) - I'm not quite sure what Edge is doing with the user-space, transformed SVG element (red). All the other browsers are consistent with their results for the untransformed case, and then apply the transform to the filtered element. ### CSS boxes: - MS Edge doesn't apply SVG filters to CSS boxes at all, so we don't know how they'd scale them if they did. However, there still seems to be weird rendering issues when both filter and transform are applied to the same box, and some elements disappear. - For `objectBoundingBox` (blue and green), the other browsers are consistent, using the `border-box` as the bounding box, and creating a filter region that is 1.5 times the border-box width and half its height, and adjusting the box for transforms. - For `userSpaceOnUse`, Chrome and Firefox are each consistent with what they do for SVG when it comes to percentages (AKA, they disagree with each other), but are otherwise are using the border-box as the user-space reference box with 1px having its normal meaning. Which means Firefox is consistent with the spec as I'd interpret it (linking to the CSS transforms definition of local coordinate system) for CSS boxes: the reference box is the transform-box, which is always border-box for elements without SVG layout. (But I tested separately, and they don't adjust userSpace for SVG elements when you change `transform-box` to fill-box. So need to decide what to do there.) - Safari seems to ignore all filter-region parameters for user-space filters applied to CSS boxes, and instead clips the flood exactly to the border-box. ## Screenshots of results Chrome (v63):  Firefox (v59):  Safari (v11 on OSX 10.13):  MS Edge (EdgeHTML v16):  -- GitHub Notification of comment by AmeliaBR Please view or discuss this issue at https://github.com/w3c/fxtf-drafts/issues/249#issuecomment-360261852 using your GitHub account
Received on Wednesday, 24 January 2018 20:24:14 UTC