-
-
Notifications
You must be signed in to change notification settings - Fork 3.3k
script: support inline SVG by serializing the subtree #38188
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Conversation
🔨 Triggering try run (#16408777082) for Linux (WPT) |
Test results for linux-wpt from try job (#16408777082): Flaky unexpected result (11)
Stable unexpected results that are known to be intermittent (16)
Stable unexpected results (261)
|
|
8479816
to
f073919
Compare
🔨 Triggering try run (#16614675580) for Linux (WPT) |
Test results for linux-wpt from try job (#16614675580): Flaky unexpected result (17)
Stable unexpected results that are known to be intermittent (16)
|
|
Test results for linux-wpt from try job (#16614675580): Flaky unexpected result (17)
Stable unexpected results that are known to be intermittent (16)
|
|
f073919
to
462f4b8
Compare
🔨 Triggering try run (#16714893623) for Linux (WPT) |
Test results for linux-wpt from try job (#16714893623): Flaky unexpected result (24)
Stable unexpected results that are known to be intermittent (17)
|
✨ Try run (#16714893623) succeeded. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We all agree that it's a hack, but it's a pretty straightforward one! Nice work. Just a couple small things here:
462f4b8
to
005d381
Compare
🔨 Triggering try run (#16871551539) for Linux (WPT) |
Test results for linux-wpt from try job (#16871551539): Flaky unexpected result (18)
Stable unexpected results that are known to be intermittent (26)
|
✨ Try run (#16871551539) succeeded. |
This patch adds support for rendering static inline SVG documents in the DOM tree by serializing the SVGElement's subtree and leveraging the existing resvg based SVG stack for rendering. Serialiing the subtree is necessary as resvg's tree representation (roxmltree) is immutable, so we can't construct the tree incrementally. Few other design choices here: 1. The `SVGSVGElement` is now treated as a replaced element and the layout code is responsible for plumbing the serialized SVG source (encoded as a base64 data: url) into the image cache, much like how background images are handled. 2. The serialization is done on the script thread after an initial layout pass. This is necessary because the serialization code asserts that it is invoked from script thread i.e we can't call it from layout workers. 3. The serialized SVG data: url is cached to avoid recomputing it on subsequent layouts. The cache is invalidated when the SVGSVGElement's subtree is mutated. The original SVGSVGElement code was behind the `dom_svg_enabled` pref. This patch also removes the preference and make SVG support using resvg available unconditionally. Below is the analysis of the new test failures: These tests use inline SVG but used to pass by accident. They now fail because they contain SVG with no intrinsic sizing which is not handled by resvg in a way that would allows us to distinguish it from the sized case. The same limitation applies to non-inline SVG. - /css/CSS2/positioning/absolute-replaced-width-003a.xht - /css/CSS2/positioning/absolute-replaced-width-003b.xht - /css/CSS2/positioning/absolute-replaced-width-003c.xht These tests employ CSS styles in the HTML that target the elements in inline SVG, which is not currently supported. - /css/compositing/mix-blend-mode/mix-blend-mode-plus-lighter-svg-basic.html - /css/compositing/mix-blend-mode/mix-blend-mode-plus-lighter-svg.html This is a tentative test that uses the unsupported 'border-shape' CSS property. The ref uses SVG, so it used to pass accidentally. The ref still doesn't render correctly since it also relies on styling SVG elements using CSS classes in the HTML (instead of inline in SVG). - /css/css-borders/tentative/border-shape/border-shape-stroke.html These tests use the attribute 'clip-path=circle(...)' in the test, but this doesn't seem to work in resvg. - /css/css-masking/clip-path/clip-path-borderBox-1b.html - /css/css-masking/clip-path/clip-path-contentBox-1b.html - /css/css-masking/clip-path/clip-path-contentBox-1c.html - /css/css-masking/clip-path/clip-path-fillBox-1b.html - /css/css-masking/clip-path/clip-path-marginBox-1a.html - /css/css-masking/clip-path/clip-path-paddingBox-1b.html - /css/css-masking/clip-path/clip-path-strokeBox-1b.html - /css/css-masking/clip-path/clip-path-strokeBox-1c.html - /css/css-masking/clip-path/clip-path-viewBox-1a.html - /css/css-masking/clip-path/clip-path-viewBox-1b.html - /css/css-masking/clip-path/clip-path-viewBox-1d.html - /css/css-masking/clip-path/svg-clip-path-circle-offset.html - /css/css-masking/clip-path/svg-clip-path-ellipse-offset.html Additionally, the below two tests use a `foreignObject` SVG element which embeds a html div fragment. This is also not supported by resvg. - /css/css-masking/clip-path/clip-path-viewBox-1d.html - /css/css-masking/clip-path/clip-path-fillBox-1b.html The following test fails because of apparent pixel differences between a circle rendered purely using CSS clip-path vs a circle rendered in SVG using resvg. - /css/css-masking/clip-path/clip-path-contentBox-1c.html These tests style the inline SVG elements using CSS in the HTML or separate stylesheet. This is not supported by this implementation. - /css-transforms/document-styles/svg-document-styles-001.html - /css-transforms/document-styles/svg-document-styles-002.html - /css-transforms/document-styles/svg-document-styles-003.html - /css-transforms/document-styles/svg-document-styles-004.html - /css-transforms/document-styles/svg-document-styles-012.html - /css-transforms/external-styles/svg-external-styles-001.html - /css-transforms/external-styles/svg-external-styles-002.html - /css-transforms/external-styles/svg-external-styles-003.html - /css-transforms/external-styles/svg-external-styles-004.html - /css-transforms/external-styles/svg-external-styles-014.html These tests seem like they should pass, but they fail because of what seems like an anti-aliasing issue in the rendering engine. The transformed element has a thin outline which is causing pixel difference with the ref: - /css/css-transforms/group/svg-transform-group-008.html - /css/css-transforms/group/svg-transform-group-009.html - /css/css-transforms/group/svg-transform-nested-009.html - /css/css-transforms/group/svg-transform-nested-013.html - /css/css-transforms/group/svg-transform-nested-014.html - /css/css-transforms/group/svg-transform-nested-018.html - /css/css-transforms/group/svg-transform-nested-019.html - /css/css-transforms/group/svg-transform-nested-008.html The below tests fail because resvg is calculating the wrong size for the 'rect' inside the SVG. The dimensions of the SVG are established via the CSS in the HTML, so it seems resvg is using incorrect coordinates for the children of the svg when explict width/height are not specified in the root svg element. - /css/css-transforms/group/svg-transform-group-011.html - /css/css-transforms/group/svg-transform-nested-021.html - /css/css-transforms/group/svg-transform-nested-029.html All these tests use an SVG that doesn't have width nor height attributes and this causes resvg to use incorrect coordinates for the SVG's children. In addition, the following tests use the CSS syntax for transforms inside the SVG (using style attribute) which is not supported by resvg (it only supports the SVG 1.1 transform syntax). - /css/css-transforms/inline-styles/svg-inline-styles-001.html - /css/css-transforms/inline-styles/svg-inline-styles-002.html - /css/css-transforms/inline-styles/svg-inline-styles-003.html - /css/css-transforms/inline-styles/svg-inline-styles-004.html - /css/css-transforms/inline-styles/svg-inline-styles-012.html In the case of these four tests, the `style` attribute specifies an invalid transform, but resvg doesn't fallback to the transform specified via the `transform` attribute on the same element. - /css/css-transforms/inline-styles/svg-inline-styles-005.html - /css/css-transforms/inline-styles/svg-inline-styles-006.html - /css/css-transforms/inline-styles/svg-inline-styles-010.html - /css/css-transforms/inline-styles/svg-inline-styles-013.html The following test fails because of the lack of width/height in SVG as described above but it also exposes gaps in our CSS tranform implementation. - /css/css-transforms/preserve3d-and-filter-with-perspective.html These tests failure because resvg doesn't handle the SVG without explicit width and height, but specified via CSS in the HTML. In addition, there are pixel differences between the ref due to antialiasing issues. - /css/css-transforms/matrix/svg-matrix-005.html - /css/css-transforms/matrix/svg-matrix-006.html - /css/css-transforms/matrix/svg-matrix-007.html - /css/css-transforms/matrix/svg-matrix-008.html - /css/css-transforms/matrix/svg-matrix-010.html - /css/css-transforms/matrix/svg-matrix-012.html - /css/css-transforms/matrix/svg-matrix-015.html - /css/css-transforms/matrix/svg-matrix-016.html - /css/css-transforms/matrix/svg-matrix-017.html - /css/css-transforms/matrix/svg-matrix-018.html - /css/css-transforms/matrix/svg-matrix-019.html - /css/css-transforms/matrix/svg-matrix-020.html - /css/css-transforms/matrix/svg-matrix-021.html - /css/css-transforms/matrix/svg-matrix-022.html - /css/css-transforms/matrix/svg-matrix-023.html - /css/css-transforms/matrix/svg-matrix-024.html - /css/css-transforms/matrix/svg-matrix-025.html - /css/css-transforms/matrix/svg-matrix-026.html - /css/css-transforms/matrix/svg-matrix-027.html - /css/css-transforms/matrix/svg-matrix-028.html - /css/css-transforms/matrix/svg-matrix-029.html - /css/css-transforms/matrix/svg-matrix-030.html - /css/css-transforms/matrix/svg-matrix-031.html - /css/css-transforms/matrix/svg-matrix-032.html - /css/css-transforms/matrix/svg-matrix-033.html - /css/css-transforms/matrix/svg-matrix-034.html - /css/css-transforms/matrix/svg-matrix-035.html - /css/css-transforms/matrix/svg-matrix-036.html - /css/css-transforms/matrix/svg-matrix-037.html - /css/css-transforms/matrix/svg-matrix-038.html - /css/css-transforms/matrix/svg-matrix-039.html - /css/css-transforms/matrix/svg-matrix-040.html - /css/css-transforms/matrix/svg-matrix-041.html - /css/css-transforms/matrix/svg-matrix-042.html - /css/css-transforms/matrix/svg-matrix-043.html - /css/css-transforms/matrix/svg-matrix-044.html - /css/css-transforms/matrix/svg-matrix-045.html - /css/css-transforms/matrix/svg-matrix-046.html - /css/css-transforms/matrix/svg-matrix-047.html - /css/css-transforms/matrix/svg-matrix-048.html - /css/css-transforms/matrix/svg-matrix-049.html - /css/css-transforms/matrix/svg-matrix-050.html - /css/css-transforms/matrix/svg-matrix-051.html - /css/css-transforms/matrix/svg-matrix-052.html - /css/css-transforms/matrix/svg-matrix-053.html - /css/css-transforms/matrix/svg-matrix-054.html - /css/css-transforms/matrix/svg-matrix-055.html - /css/css-transforms/matrix/svg-matrix-056.html - /css/css-transforms/matrix/svg-matrix-057.html - /css/css-transforms/matrix/svg-matrix-058.html - /css/css-transforms/matrix/svg-matrix-059.html - /css/css-transforms/matrix/svg-matrix-060.html - /css/css-transforms/matrix/svg-matrix-061.html - /css/css-transforms/matrix/svg-matrix-062.html - /css/css-transforms/matrix/svg-matrix-063.html - /css/css-transforms/matrix/svg-matrix-064.html - /css/css-transforms/matrix/svg-matrix-065.html - /css/css-transforms/matrix/svg-matrix-066.html - /css/css-transforms/matrix/svg-matrix-067.html - /css/css-transforms/matrix/svg-matrix-068.html - /css/css-transforms/matrix/svg-matrix-069.html - /css/css-transforms/rotate/svg-rotate-angle-45-001.html - /css/css-transforms/rotate/svg-rotate-angle-45-011.html - /css/css-transforms/rotate/svg-rotate-angle-45-022.html - /css/css-transforms/scale/svg-scale-006.html - /css/css-transforms/scale/svg-scale-007.html These tests seem to be failing due to some sort of antialiasing issue, where a transformed SVG element has a thin border that causes pixel differences compared to the solid colored reference. - /css/css-transforms/skewX/svg-skewx-001.html - /css/css-transforms/skewX/svg-skewx-006.html - /css/css-transforms/skewX/svg-skewx-011.html - /css/css-transforms/skewX/svg-skewx-016.html - /css/css-transforms/skewX/svg-skewx-021.html - /css/css-transforms/skewX/svg-skewxy-001.html - /css/css-transforms/skewY/svg-skewy-001.html - /css/css-transforms/skewY/svg-skewy-006.html - /css/css-transforms/skewY/svg-skewy-011.html - /css/css-transforms/skewY/svg-skewy-016.html - /css/css-transforms/skewY/svg-skewy-021.html These tests specify several SVG attributes such as transform, vector-effect etc via CSS in the HTML (rather than inline in SVG). The current implementation doesn't support this. - /css/css-transforms/transform-box/stroke-box-mutation-001.html - /css/css-transforms/transform-box/stroke-box-mutation-002.html - /css/css-transforms/transform-box/stroke-box-mutation-003.html - /css/css-transforms/transform-box/stroke-box-mutation-004.html - /css/css-transforms/transform-box/svgbox-stroke-box-002.html - /css/css-transforms/transform-box/svgbox-stroke-box-003.html - /css/css-transforms/transform-box/svgbox-stroke-box-004.html - /css/css-transforms/transform-box/svgbox-stroke-box-005.html These tests depend on 'transform-origin' specified on an element inside an SVG, but this transform is influenced by the 'tranform-box' set via CSS in the HTML itself (not the SVG). The current implementation doesn't support styling the SVG using document styles, so these tests just fail. - /css/css-transforms/transform-origin/svg-origin-relative-length-001.html - /css/css-transforms/transform-origin/svg-origin-relative-length-002.html - /css/css-transforms/transform-origin/svg-origin-relative-length-003.html - /css/css-transforms/transform-origin/svg-origin-relative-length-004.html - /css/css-transforms/transform-origin/svg-origin-relative-length-005.html - /css/css-transforms/transform-origin/svg-origin-relative-length-006.html - /css/css-transforms/transform-origin/svg-origin-relative-length-007.html - /css/css-transforms/transform-origin/svg-origin-relative-length-008.html - /css/css-transforms/transform-origin/svg-origin-relative-length-009.html - /css/css-transforms/transform-origin/svg-origin-relative-length-010.html - /css/css-transforms/transform-origin/svg-origin-relative-length-011.html - /css/css-transforms/transform-origin/svg-origin-relative-length-012.html - /css/css-transforms/transform-origin/svg-origin-relative-length-013.html - /css/css-transforms/transform-origin/svg-origin-relative-length-014.html - /css/css-transforms/transform-origin/svg-origin-relative-length-015.html - /css/css-transforms/transform-origin/svg-origin-relative-length-016.html - /css/css-transforms/transform-origin/svg-origin-relative-length-017.html - /css/css-transforms/transform-origin/svg-origin-relative-length-018.html - /css/css-transforms/transform-origin/svg-origin-relative-length-019.html - /css/css-transforms/transform-origin/svg-origin-relative-length-020.html - /css/css-transforms/transform-origin/svg-origin-relative-length-021.html - /css/css-transforms/transform-origin/svg-origin-relative-length-022.html - /css/css-transforms/transform-origin/svg-origin-relative-length-023.html - /css/css-transforms/transform-origin/svg-origin-relative-length-024.html - /css/css-transforms/transform-origin/svg-origin-relative-length-025.html - /css/css-transforms/transform-origin/svg-origin-relative-length-026.html - /css/css-transforms/transform-origin/svg-origin-relative-length-027.html - /css/css-transforms/transform-origin/svg-origin-relative-length-028.html - /css/css-transforms/transform-origin/svg-origin-relative-length-029.html - /css/css-transforms/transform-origin/svg-origin-relative-length-030.html - /css/css-transforms/transform-origin/svg-origin-relative-length-031.html - /css/css-transforms/transform-origin/svg-origin-relative-length-032.html - /css/css-transforms/transform-origin/svg-origin-relative-length-033.html - /css/css-transforms/transform-origin/svg-origin-relative-length-034.html - /css/css-transforms/transform-origin/svg-origin-relative-length-035.html - /css/css-transforms/transform-origin/svg-origin-relative-length-036.html - /css/css-transforms/transform-origin/svg-origin-relative-length-037.html - /css/css-transforms/transform-origin/svg-origin-relative-length-038.html - /css/css-transforms/transform-origin/svg-origin-relative-length-039.html - /css/css-transforms/transform-origin/svg-origin-relative-length-040.html - /css/css-transforms/transform-origin/svg-origin-relative-length-041.html - /css/css-transforms/transform-origin/svg-origin-relative-length-042.html - /css/css-transforms/transform-origin/svg-origin-relative-length-043.html - /css/css-transforms/transform-origin/svg-origin-relative-length-044.html - /css/css-transforms/transform-origin/svg-origin-relative-length-045.html - /css/css-transforms/transform-origin/svg-origin-relative-length-046.html These tests check the fallback behaviour when invalid syntax is encountered in the 'transform-origin' value. resvg doesn't correctly fallback to 0,0 causing the tests to fail. - /css/css-transforms/transform-origin/svg-origin-relative-length-invalid-001.html - /css/css-transforms/transform-origin/svg-origin-relative-length-invalid-002.html - /css/css-transforms/transform-origin/svg-origin-relative-length-invalid-003.html - /css/css-transforms/transform-origin/svg-origin-relative-length-invalid-004.html These tests use unimplemented Canvas APIs like 'beginLayer' and the 'CanvasFilter' constructor and hence fail at runtime. - /html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.tentative.html - /html/canvas/element/filters/2d.filter.layers.gaussianBlur.tentative.html - /html/canvas/element/layers/2d.layer.anisotropic-blur.isotropic.tentative.html - /html/canvas/element/layers/2d.layer.anisotropic-blur.mostly-x.tentative.html - /html/canvas/element/layers/2d.layer.anisotropic-blur.mostly-y.tentative.html - /html/canvas/element/layers/2d.layer.anisotropic-blur.x-only.tentative.html - /html/canvas/element/layers/2d.layer.anisotropic-blur.y-only.tentative.html - /html/canvas/element/layers/2d.layer.css-filters.blur-and-shadow.tentative.html - /html/canvas/element/layers/2d.layer.css-filters.blur.tentative.html - /html/canvas/element/layers/2d.layer.css-filters.shadow.tentative.html - /html/canvas/element/layers/2d.layer.ctm.layer-filter.tentative.html - /html/canvas/offscreen/filters/2d.filter.canvasFilterObject.dropShadow.tentative.html - /html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.tentative.html - /html/canvas/offscreen/filters/2d.filter.layers.dropShadow.tentative.html - /html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.tentative.html - /html/canvas/offscreen/layers/2d.layer.anisotropic-blur.isotropic.tentative.html - /html/canvas/offscreen/layers/2d.layer.anisotropic-blur.mostly-x.tentative.html - /html/canvas/offscreen/layers/2d.layer.anisotropic-blur.mostly-y.tentative.html - /html/canvas/offscreen/layers/2d.layer.anisotropic-blur.x-only.tentative.html - /html/canvas/offscreen/layers/2d.layer.anisotropic-blur.y-only.tentative.html - /html/canvas/offscreen/layers/2d.layer.css-filters.blur-and-shadow.tentative.html - /html/canvas/offscreen/layers/2d.layer.css-filters.blur.tentative.html - /html/canvas/offscreen/layers/2d.layer.css-filters.shadow.tentative.html - /html/canvas/offscreen/layers/2d.layer.ctm.layer-filter.tentative.html These tests fail because resvg doesn't seem to honour the 'translate' CSS property specified on an SVG element using an inline 'style' attribute. - /css/css-transforms/translate/svg-translate-with-units.html - /css/css-transforms/translate/translate-and-transform-attribute-in-svg.html - /css/css-transforms/translate/translate-and-transform-css-property-in-svg.html - /css/css-transforms/translate/translate-in-svg.html These tests seem to fail due to the filter effect implementation in resvg either not being complete or spec compliant. - /css/filter-effects/feconvolve-divisor.html - /css/filter-effects/feconvolve-region-001.html - /css/filter-effects/feconvolve-region-002.html - /css/filter-effects/filter-subregion-01.html - /css/filter-effects/svg-feimage-002.html - /css/filter-effects/svg-feimage-003.html - /css/filter-effects/svg-feimage-004.html - /css/filter-effects/svg-feoffset-001.html The test /css/filter-effects/svg-feimage-004.html should ideally PASS but currently fails because we don't propagate height/width set using CSS in HTML element to the root SVG, so resvg uses the wrong dimensions when rendering the children of the SVG. These failures are due to deficienies in our current implementation i.e we don't support styling SVG elements using CSS in HTML. - /css/css-transforms/gradientTransform/svg-gradientTransform-combination-001.html - /css/selectors/sharing-in-svg-use.html The below test fails as our current implementation relies on resvg to tell us the intrinsic ratio of the SVG, but this doesn't always work correctly. - /css/css-sizing/svg-intrinsic-size-005.html This failure is due to lack of proper fallback to no-op transform in resvg when the `rotate()` syntax is specified with an invalid list e.g `rotate(90,)`. - /css/css-transforms/rotate/svg-rotate-3args-invalid-002.html This test only passes in CI and based on the raw log output, it seems that no text inside the SVG is rendered in the CI. This could be an font stack related issue. - /css/css-display/display-contents-svg-elements.html This test asserts that the CSP blocks loads triggered using `use` elements in SVG. It used to TIMEOUT as without inline SVG support, no CSP violation event was triggered. It fails now since the event is now triggered for the load of the SVG itself (our current implementation loads inline SVGs as serialized base64 data: urls). This doesn't match the blocked URL in the use element though. - /content-security-policy/img-src/svg-use-blocked.tentative.html Signed-off-by: Mukilan Thiyagarajan <mukilan@igalia.com>
005d381
to
43e2c08
Compare
Thanks for the review! I've squashed all the commits to preserve the analysis of test failures into the final commit 43e2c08 |
@mukilan You'll also need to update the PR description so that the analysis is included in the final commit in Servo (which comes entirely from the PR). You might want to try to use wildcards to limit the size of the commit description. |
For the sizing problems, I think it will be best to just ignore the metadata provided by usvg, and instead check the Also inline SVG are special because they can have an intrinsic ratio without intrinsic sizes, and then they stretch, which will need some special handling. |
This patch adds support for rendering static inline SVG documents in the DOM tree by serializing the SVGElement's subtree and leveraging the existing resvg based SVG stack for rendering. Serialiing the subtree is necessary as resvg's tree representation (roxmltree) is immutable, so we can't construct the tree incrementally. Few other design choices here: 1. The `SVGSVGElement` is now treated as a replaced element and the layout code is responsible for plumbing the serialized SVG source (encoded as a base64 data: url) into the image cache, much like how background images are handled. 2. The serialization is done on the script thread after an initial layout pass. This is necessary because the serialization code asserts that it is invoked from script thread i.e we can't call it from layout workers. 3. The serialized SVG data: url is cached to avoid recomputing it on subsequent layouts. The cache is invalidated when the SVGSVGElement's subtree is mutated. The original SVGSVGElement code was behind the `dom_svg_enabled` pref. This patch also removes the preference and make SVG support using resvg available unconditionally. Below is the analysis of the new test failures: These tests use inline SVG but used to pass by accident. They now fail because they contain SVG with no intrinsic sizing which is not handled by resvg in a way that would allows us to distinguish it from the sized case. The same limitation applies to non-inline SVG. - /css/CSS2/positioning/absolute-replaced-width-003a.xht - /css/CSS2/positioning/absolute-replaced-width-003b.xht - /css/CSS2/positioning/absolute-replaced-width-003c.xht These tests employ CSS styles in the HTML that target the elements in inline SVG, which is not currently supported. - /css/compositing/mix-blend-mode/mix-blend-mode-plus-lighter-svg-basic.html - /css/compositing/mix-blend-mode/mix-blend-mode-plus-lighter-svg.html This is a tentative test that uses the unsupported 'border-shape' CSS property. The ref uses SVG, so it used to pass accidentally. The ref still doesn't render correctly since it also relies on styling SVG elements using CSS classes in the HTML (instead of inline in SVG). - /css/css-borders/tentative/border-shape/border-shape-stroke.html These tests use the attribute 'clip-path=circle(...)' in the test, but this doesn't seem to work in resvg. - /css/css-masking/clip-path/clip-path-borderBox-1b.html - /css/css-masking/clip-path/clip-path-contentBox-1b.html - /css/css-masking/clip-path/clip-path-contentBox-1c.html - /css/css-masking/clip-path/clip-path-fillBox-1b.html - /css/css-masking/clip-path/clip-path-marginBox-1a.html - /css/css-masking/clip-path/clip-path-paddingBox-1b.html - /css/css-masking/clip-path/clip-path-strokeBox-1b.html - /css/css-masking/clip-path/clip-path-strokeBox-1c.html - /css/css-masking/clip-path/clip-path-viewBox-1a.html - /css/css-masking/clip-path/clip-path-viewBox-1b.html - /css/css-masking/clip-path/clip-path-viewBox-1d.html - /css/css-masking/clip-path/svg-clip-path-circle-offset.html - /css/css-masking/clip-path/svg-clip-path-ellipse-offset.html Additionally, the below two tests use a `foreignObject` SVG element which embeds a html div fragment. This is also not supported by resvg. - /css/css-masking/clip-path/clip-path-viewBox-1d.html - /css/css-masking/clip-path/clip-path-fillBox-1b.html The following test fails because of apparent pixel differences between a circle rendered purely using CSS clip-path vs a circle rendered in SVG using resvg. - /css/css-masking/clip-path/clip-path-contentBox-1c.html These tests style the inline SVG elements using CSS in the HTML or separate stylesheet. This is not supported by this implementation. - /css-transforms/document-styles/svg-document-styles-{001..004}.html - /css-transforms/document-styles/svg-document-styles-012.html - /css-transforms/external-styles/svg-external-styles-{001..004}.html - /css-transforms/external-styles/svg-external-styles-014.html These tests seem like they should pass, but they fail because of what seems like an anti-aliasing issue in the rendering engine. The transformed element has a thin outline which is causing pixel difference with the ref: - /css/css-transforms/group/svg-transform-group-008.html - /css/css-transforms/group/svg-transform-group-009.html - /css/css-transforms/group/svg-transform-nested-009.html - /css/css-transforms/group/svg-transform-nested-013.html - /css/css-transforms/group/svg-transform-nested-014.html - /css/css-transforms/group/svg-transform-nested-018.html - /css/css-transforms/group/svg-transform-nested-019.html - /css/css-transforms/group/svg-transform-nested-008.html The below tests fail because resvg is calculating the wrong size for the 'rect' inside the SVG. The dimensions of the SVG are established via the CSS in the HTML, so it seems resvg is using incorrect coordinates for the children of the svg when explict width/height are not specified in the root svg element. - /css/css-transforms/group/svg-transform-group-011.html - /css/css-transforms/group/svg-transform-nested-021.html - /css/css-transforms/group/svg-transform-nested-029.html All these tests use an SVG that doesn't have width nor height attributes and this causes resvg to use incorrect coordinates for the SVG's children. In addition, the following tests use the CSS syntax for transforms inside the SVG (using style attribute) which is not supported by resvg (it only supports the SVG 1.1 transform syntax). - /css/css-transforms/inline-styles/svg-inline-styles-{001..004}.html - /css/css-transforms/inline-styles/svg-inline-styles-012.html In the case of these four tests, the `style` attribute specifies an invalid transform, but resvg doesn't fallback to the transform specified via the `transform` attribute on the same element. - /css/css-transforms/inline-styles/svg-inline-styles-005.html - /css/css-transforms/inline-styles/svg-inline-styles-006.html - /css/css-transforms/inline-styles/svg-inline-styles-010.html - /css/css-transforms/inline-styles/svg-inline-styles-013.html The following test fails because of the lack of width/height in SVG as described above but it also exposes gaps in our CSS tranform implementation. - /css/css-transforms/preserve3d-and-filter-with-perspective.html These tests failure because resvg doesn't handle the SVG without explicit width and height, but specified via CSS in the HTML. In addition, there are pixel differences between the ref due to antialiasing issues. - /css/css-transforms/matrix/svg-matrix-{005...008}.html - /css/css-transforms/matrix/svg-matrix-010.html - /css/css-transforms/matrix/svg-matrix-012.html - /css/css-transforms/matrix/svg-matrix-{015..069}.html - /css/css-transforms/rotate/svg-rotate-angle-45-001.html - /css/css-transforms/rotate/svg-rotate-angle-45-011.html - /css/css-transforms/rotate/svg-rotate-angle-45-022.html - /css/css-transforms/scale/svg-scale-006.html - /css/css-transforms/scale/svg-scale-007.html These tests seem to be failing due to some sort of antialiasing issue, where a transformed SVG element has a thin border that causes pixel differences compared to the solid colored reference. - /css/css-transforms/skewX/svg-skewx-001.html - /css/css-transforms/skewX/svg-skewx-006.html - /css/css-transforms/skewX/svg-skewx-011.html - /css/css-transforms/skewX/svg-skewx-016.html - /css/css-transforms/skewX/svg-skewx-021.html - /css/css-transforms/skewX/svg-skewxy-001.html - /css/css-transforms/skewY/svg-skewy-001.html - /css/css-transforms/skewY/svg-skewy-006.html - /css/css-transforms/skewY/svg-skewy-011.html - /css/css-transforms/skewY/svg-skewy-016.html - /css/css-transforms/skewY/svg-skewy-021.html These tests specify several SVG attributes such as transform, vector-effect etc via CSS in the HTML (rather than inline in SVG). The current implementation doesn't support this. - /css/css-transforms/transform-box/stroke-box-mutation-001.html - /css/css-transforms/transform-box/stroke-box-mutation-002.html - /css/css-transforms/transform-box/stroke-box-mutation-003.html - /css/css-transforms/transform-box/stroke-box-mutation-004.html - /css/css-transforms/transform-box/svgbox-stroke-box-002.html - /css/css-transforms/transform-box/svgbox-stroke-box-003.html - /css/css-transforms/transform-box/svgbox-stroke-box-004.html - /css/css-transforms/transform-box/svgbox-stroke-box-005.html These tests depend on 'transform-origin' specified on an element inside an SVG, but this transform is influenced by the 'tranform-box' set via CSS in the HTML itself (not the SVG). The current implementation doesn't support styling the SVG using document styles, so these tests just fail. - /css/css-transforms/transform-origin/svg-origin-relative-length-*.html These tests check the fallback behaviour when invalid syntax is encountered in the 'transform-origin' value. resvg doesn't correctly fallback to 0,0 causing the tests to fail. - /css/css-transforms/transform-origin/svg-origin-relative-length-invalid-001.html - /css/css-transforms/transform-origin/svg-origin-relative-length-invalid-002.html - /css/css-transforms/transform-origin/svg-origin-relative-length-invalid-003.html - /css/css-transforms/transform-origin/svg-origin-relative-length-invalid-004.html These tests use unimplemented Canvas APIs like 'beginLayer' and the 'CanvasFilter' constructor and hence fail at runtime. - /html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.tentative.html - /html/canvas/element/filters/2d.filter.layers.gaussianBlur.tentative.html - /html/canvas/element/layers/2d.layer.anisotropic-blur.isotropic.tentative.html - /html/canvas/element/layers/2d.layer.anisotropic-blur.mostly-x.tentative.html - /html/canvas/element/layers/2d.layer.anisotropic-blur.mostly-y.tentative.html - /html/canvas/element/layers/2d.layer.anisotropic-blur.x-only.tentative.html - /html/canvas/element/layers/2d.layer.anisotropic-blur.y-only.tentative.html - /html/canvas/element/layers/2d.layer.css-filters.blur-and-shadow.tentative.html - /html/canvas/element/layers/2d.layer.css-filters.blur.tentative.html - /html/canvas/element/layers/2d.layer.css-filters.shadow.tentative.html - /html/canvas/element/layers/2d.layer.ctm.layer-filter.tentative.html - /html/canvas/offscreen/filters/2d.filter.canvasFilterObject.dropShadow.tentative.html - /html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.tentative.html - /html/canvas/offscreen/filters/2d.filter.layers.dropShadow.tentative.html - /html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.tentative.html - /html/canvas/offscreen/layers/2d.layer.anisotropic-blur.isotropic.tentative.html - /html/canvas/offscreen/layers/2d.layer.anisotropic-blur.mostly-x.tentative.html - /html/canvas/offscreen/layers/2d.layer.anisotropic-blur.mostly-y.tentative.html - /html/canvas/offscreen/layers/2d.layer.anisotropic-blur.x-only.tentative.html - /html/canvas/offscreen/layers/2d.layer.anisotropic-blur.y-only.tentative.html - /html/canvas/offscreen/layers/2d.layer.css-filters.blur-and-shadow.tentative.html - /html/canvas/offscreen/layers/2d.layer.css-filters.blur.tentative.html - /html/canvas/offscreen/layers/2d.layer.css-filters.shadow.tentative.html - /html/canvas/offscreen/layers/2d.layer.ctm.layer-filter.tentative.html These tests fail because resvg doesn't seem to honour the 'translate' CSS property specified on an SVG element using an inline 'st C1E1 yle' attribute. - /css/css-transforms/translate/svg-translate-with-units.html - /css/css-transforms/translate/translate-and-transform-attribute-in-svg.html - /css/css-transforms/translate/translate-and-transform-css-property-in-svg.html - /css/css-transforms/translate/translate-in-svg.html These tests seem to fail due to the filter effect implementation in resvg either not being complete or spec compliant. - /css/filter-effects/feconvolve-divisor.html - /css/filter-effects/feconvolve-region-001.html - /css/filter-effects/feconvolve-region-002.html - /css/filter-effects/filter-subregion-01.html - /css/filter-effects/svg-feimage-002.html - /css/filter-effects/svg-feimage-003.html - /css/filter-effects/svg-feimage-004.html - /css/filter-effects/svg-feoffset-001.html The test /css/filter-effects/svg-feimage-004.html should ideally PASS but currently fails because we don't propagate height/width set using CSS in HTML element to the root SVG, so resvg uses the wrong dimensions when rendering the children of the SVG. These failures are due to deficienies in our current implementation i.e we don't support styling SVG elements using CSS in HTML. - /css/css-transforms/gradientTransform/svg-gradientTransform-combination-001.html - /css/selectors/sharing-in-svg-use.html The below test fails as our current implementation relies on resvg to tell us the intrinsic ratio of the SVG, but this doesn't always work correctly. - /css/css-sizing/svg-intrinsic-size-005.html This failure is due to lack of proper fallback to no-op transform in resvg when the `rotate()` syntax is specified with an invalid list e.g `rotate(90,)`. - /css/css-transforms/rotate/svg-rotate-3args-invalid-002.html This test only passes in CI and based on the raw log output, it seems that no text inside the SVG is rendered in the CI. This could be an font stack related issue. - /css/css-display/display-contents-svg-elements.html This test asserts that the CSP blocks loads triggered using `use` elements in SVG. It used to TIMEOUT as without inline SVG support, no CSP violation event was triggered. It fails now since the event is now triggered for the load of the SVG itself (our current implementation loads inline SVGs as serialized base64 data: urls). This doesn't match the blocked URL in the use element though. - /content-security-policy/img-src/svg-use-blocked.tentative.html Signed-off-by: Mukilan Thiyagarajan <mukilan@igalia.com> Signed-off-by: Mukilan Thiyagarajan <mukilan@igalia.com>
Thank you everyone involved! Google.com now looks so much better! 😃 |
This patch adds support for rendering static inline SVG documents in the
DOM tree by serializing the SVGElement's subtree and leveraging the
existing resvg based SVG stack for rendering. Serialiing the subtree is
necessary as resvg's tree representation (roxmltree) is immutable, so we
can't construct the tree incrementally.
Few other design choices here:
SVGSVGElement
is now treated as a replaced element and thelayout code is responsible for plumbing the serialized SVG source
(encoded as a base64 data: url) into the image cache, much like how
background images are handled.
layout pass. This is necessary because the serialization code asserts
that it is invoked from script thread i.e we can't call it from layout
workers.
subsequent layouts. The cache is invalidated when the SVGSVGElement's
subtree is mutated.
The original SVGSVGElement code was behind the
dom_svg_enabled
pref.This patch also removes the preference and make SVG support using resvg
available unconditionally.
Below is the analysis of the new test failures:
These tests use inline SVG but used to pass by accident.
They now fail because they contain SVG with no intrinsic
sizing which is not handled by resvg in a way that would
allows us to distinguish it from the sized case. The same
limitation applies to non-inline SVG.
These tests employ CSS styles in the HTML that
target the elements in inline SVG, which is not currently
supported.
This is a tentative test that uses the unsupported 'border-shape' CSS
property. The ref uses SVG, so it used to pass accidentally. The ref
still doesn't render correctly since it also relies on styling SVG
elements using CSS classes in the HTML (instead of inline in SVG).
These tests use the attribute 'clip-path=circle(...)' in the
test, but this doesn't seem to work in resvg.
Additionally, the below two tests use a
foreignObject
SVG element whichembeds a html div fragment. This is also not supported by resvg.
The following test fails because of apparent pixel differences
between a circle rendered purely using CSS clip-path vs a circle
rendered in SVG using resvg.
These tests style the inline SVG elements using CSS in the HTML or
separate stylesheet. This is not supported by this implementation.
These tests seem like they should pass, but they fail because of what
seems like an anti-aliasing issue in the rendering engine. The
transformed element has a thin outline which is causing pixel difference
with the ref:
The below tests fail because resvg is calculating the wrong size for the
'rect' inside the SVG. The dimensions of the SVG are established via the
CSS in the HTML, so it seems resvg is using incorrect coordinates for
the children of the svg when explict width/height are not specified in
the root svg element.
All these tests use an SVG that doesn't have width nor height attributes
and this causes resvg to use incorrect coordinates for the SVG's
children. In addition, the following tests use the CSS syntax for
transforms inside the SVG (using style attribute) which is not supported
by resvg (it only supports the SVG 1.1 transform syntax).
In the case of these four tests, the
style
attribute specifies aninvalid transform, but resvg doesn't fallback to the transform specified
via the
transform
attribute on the same element.The following test fails because of the lack of width/height in SVG as
described above but it also exposes gaps in our CSS tranform
implementation.
These tests failure because resvg doesn't handle the SVG without
explicit width and height, but specified via CSS in the HTML. In
addition, there are pixel differences between the ref due to
antialiasing issues.
These tests seem to be failing due to some sort of antialiasing issue,
where a transformed SVG element has a thin border that causes pixel
differences compared to the solid colored reference.
These tests specify several SVG attributes such as transform,
vector-effect etc via CSS in the HTML (rather than inline in SVG). The
current implementation doesn't support this.
These tests depend on 'transform-origin' specified on an element inside
an SVG, but this transform is influenced by the 'tranform-box' set via
CSS in the HTML itself (not the SVG). The current implementation doesn't
support styling the SVG using document styles, so these tests just fail.
These tests check the fallback behaviour when invalid syntax is
encountered in the 'transform-origin' value. resvg doesn't correctly
fallback to 0,0 causing the tests to fail.
These tests use unimplemented Canvas APIs like 'beginLayer' and
the 'CanvasFilter' constructor and hence fail at runtime.
These tests fail because resvg doesn't seem to honour the 'translate'
CSS property specified on an SVG element using an inline 'style'
attribute.
These tests seem to fail due to the filter effect implementation in
resvg either not being complete or spec compliant.
The test /css/filter-effects/svg-feimage-004.html should ideally PASS
but currently fails because we don't propagate height/width set using
CSS in HTML element to the root SVG, so resvg uses the wrong dimensions
when rendering the children of the SVG.
These failures are due to deficienies in our current implementation
i.e we don't support styling SVG elements using CSS in HTML.
The below test fails as our current implementation relies on resvg to
tell us the intrinsic ratio of the SVG, but this doesn't always work
correctly.
This failure is due to lack of proper fallback to no-op transform in
resvg when the
rotate()
syntax is specified with an invalid list e.grotate(90,)
.This test only passes in CI and based on the raw log output, it seems
that no text inside the SVG is rendered in the CI. This could be an font
stack related issue.
This test asserts that the CSP blocks loads triggered using
use
elements in SVG. It used to TIMEOUT as without inline SVG support, no
CSP violation event was triggered. It fails now since the event is now
triggered for the load of the SVG itself (our current implementation
loads inline SVGs as serialized base64 data: urls). This doesn't match
the blocked URL in the use element though.
Signed-off-by: Mukilan Thiyagarajan mukilan@igalia.com