[webkit-changes] [WebKit/WebKit] 75f426: [CSS Masking] SVG masks are not working as 'mask-i...

Thu Sep 28 21:35:29 PDT 2023

  Branch: refs/heads/main
  Home:   https://github.com/WebKit/WebKit
  Commit: 75f4265f6339b84c2552ac0bdf1d27596560f701
      https://github.com/WebKit/WebKit/commit/75f4265f6339b84c2552ac0bdf1d27596560f701
  Author: Said Abou-Hallawa <said at apple.com>
  Date:   2023-09-28 (Thu, 28 Sep 2023)

  Changed paths:
    M LayoutTests/TestExpectations
    A LayoutTests/css3/masking/mask-reference-png-fragment-expected.html
    A LayoutTests/css3/masking/mask-reference-png-fragment.html
    A LayoutTests/css3/masking/resources/red-100x100.png
    A LayoutTests/http/tests/css/css-masking/mask-external-svg-fragment-expected.html
    A LayoutTests/http/tests/css/css-masking/mask-external-svg-fragment.html
    A LayoutTests/http/tests/css/css-masking/mask-external-svg-image-expected.html
    A LayoutTests/http/tests/css/css-masking/mask-external-svg-image.html
    A LayoutTests/http/tests/css/css-masking/mask-external-svg-mask-expected.html
    A LayoutTests/http/tests/css/css-masking/mask-external-svg-mask.html
    A LayoutTests/http/tests/css/css-masking/mask-inline-svg-image-expected.html
    A LayoutTests/http/tests/css/css-masking/mask-inline-svg-image.html
    A LayoutTests/http/tests/css/css-masking/mask-inline-svg-mask-expected.html
    A LayoutTests/http/tests/css/css-masking/mask-inline-svg-mask.html
    A LayoutTests/http/tests/css/css-masking/resources/heart.svg
    A LayoutTests/http/tests/css/css-masking/resources/star-heart-fragments.svg
    A LayoutTests/http/tests/css/css-masking/resources/star-heart-masks.svg
    A LayoutTests/http/tests/css/css-masking/resources/star.svg
    M LayoutTests/imported/w3c/web-platform-tests/css/css-masking/mask-image/mask-opacity-1d.html
    M LayoutTests/platform/mac-wk1/TestExpectations
    M LayoutTests/platform/wpe/TestExpectations
    M Source/WebCore/Sources.txt
    M Source/WebCore/WebCore.xcodeproj/project.pbxproj
    M Source/WebCore/css/CSSImageValue.cpp
    M Source/WebCore/platform/graphics/Image.cpp
    M Source/WebCore/platform/graphics/Image.h
    M Source/WebCore/rendering/BorderPainter.cpp
    M Source/WebCore/rendering/CSSFilter.cpp
    M Source/WebCore/rendering/InlineBoxPainter.cpp
    M Source/WebCore/rendering/ReferencedSVGResources.cpp
    M Source/WebCore/rendering/ReferencedSVGResources.h
    M Source/WebCore/rendering/RenderBox.cpp
    M Source/WebCore/rendering/RenderElement.cpp
    M Source/WebCore/rendering/RenderLayer.cpp
    M Source/WebCore/rendering/RenderLayerBacking.cpp
    M Source/WebCore/rendering/style/FillLayer.cpp
    M Source/WebCore/rendering/style/FillLayer.h
    M Source/WebCore/rendering/style/NinePieceImage.cpp
    M Source/WebCore/rendering/style/StyleCachedImage.cpp
    M Source/WebCore/rendering/style/StyleCachedImage.h
    M Source/WebCore/rendering/style/StyleImage.h
    M Source/WebCore/rendering/style/StyleMultiImage.cpp
    M Source/WebCore/rendering/style/StyleMultiImage.h
    M Source/WebCore/rendering/svg/RenderSVGResourceMasker.cpp
    M Source/WebCore/rendering/svg/RenderSVGResourceMasker.h
    M Source/WebCore/rendering/svg/SVGRenderTreeAsText.cpp
    M Source/WebCore/rendering/svg/SVGResources.cpp
    M Source/WebCore/svg/graphics/SVGImage.cpp
    M Source/WebCore/svg/graphics/SVGImage.h
    A Source/WebCore/svg/graphics/SVGResourceImage.cpp
    A Source/WebCore/svg/graphics/SVGResourceImage.h

  Log Message:
  -----------
  [CSS Masking] SVG masks are not working as 'mask-image'
https://bugs.webkit.org/show_bug.cgi?id=260732
rdar://114465545

Reviewed by Simon Fraser.

Implement CSS masking when it references an SVG masker. There seven cases for
mask-image values that need to be considered:

1. Bitmap image
2. Bitmap image fragment
3. External SVG image
4. External SVG image fragment
5. External SVG image mask
6. Inline data URL image
7. Inline SVG image mask

StyleCachedImage will be adjusted to take into account the seventh case. Functions
like StyleCachedImage::isLoaded() and StyleCachedImage::canRender() will have to
handle the new case where StyleCachedImage represents an inline referenced SVG
masker. So isLoaded() needs to a take a RenderElement to be able to resolve the
imageURL.

A new super-class of GeneratedImage named SVGResourceImage will be introduced to
handle drawing the SVG resource given its renderer. SVGResourceImage will handle
the cases of external and inline SVG resources.

We can't know whether the ID associated with an external image is a fragment ID or
a mask ID in an SVGImage till the CachedImage is loaded. StyleCachedImage::image()
is called only after the image is completely loaded. So it can decide to create
an SVGResourceImage or to let the CachedImage creates its Image.

* LayoutTests/TestExpectations:
Some of the WPT tests have been marked as ImageOnlyFailure in this patch because
the expected results are now working as expected but the tests are not.
Unfortunately the tests and the expected results are both using mask-image. So
without this change they match because they both draw nothing for the masked
elements. With this change, the tests are failing  because the mask geometry
is set to work with content-box only. This can be addressed in a separate patch.

* LayoutTests/css3/masking/mask-reference-png-fragment-expected.html: Added.
* LayoutTests/css3/masking/mask-reference-png-fragment.html: Added.
* LayoutTests/css3/masking/resources/red-100x100.png: Added.
* LayoutTests/http/tests/css/css-masking/mask-external-svg-fragment-expected.html: Added.
* LayoutTests/http/tests/css/css-masking/mask-external-svg-fragment.html: Added.
* LayoutTests/http/tests/css/css-masking/mask-external-svg-image-expected.html: Added.
* LayoutTests/http/tests/css/css-masking/mask-external-svg-image.html: Added.
* LayoutTests/http/tests/css/css-masking/mask-external-svg-mask-expected.html: Added.
* LayoutTests/http/tests/css/css-masking/mask-external-svg-mask.html: Added.
* LayoutTests/http/tests/css/css-masking/mask-inline-svg-image-expected.html: Added.
* LayoutTests/http/tests/css/css-masking/mask-inline-svg-image.html: Added.
* LayoutTests/http/tests/css/css-masking/mask-inline-svg-mask-expected.html: Added.
* LayoutTests/http/tests/css/css-masking/mask-inline-svg-mask.html: Added.
* LayoutTests/http/tests/css/css-masking/resources/heart.svg: Added.
* LayoutTests/http/tests/css/css-masking/resources/star-heart-fragments.svg: Added.
* LayoutTests/http/tests/css/css-masking/resources/star-heart-masks.svg: Added.
* LayoutTests/http/tests/css/css-masking/resources/star.svg: Added.

* LayoutTests/imported/w3c/web-platform-tests/css/css-masking/mask-image/mask-opacity-1d.html:
This tests is now drawing the masked element but with noise around the borders.

* LayoutTests/platform/mac-wk1/TestExpectations:
* LayoutTests/platform/wpe/TestExpectations:
* Source/WebCore/Sources.txt:
* Source/WebCore/WebCore.xcodeproj/project.pbxproj:
* Source/WebCore/css/CSSImageValue.cpp:
* Source/WebCore/platform/graphics/Image.cpp:
(WebCore::operator<<):
* Source/WebCore/platform/graphics/Image.h:
(WebCore::Image::isSVGResourceImage const):
* Source/WebCore/rendering/BorderPainter.cpp:
(WebCore::BorderPainter::paintBorder):
(WebCore::BorderPainter::paintNinePieceImage):
* Source/WebCore/rendering/CSSFilter.cpp:
(WebCore::referenceFilterElement):
* Source/WebCore/rendering/InlineBoxPainter.cpp:
(WebCore::InlineBoxPainter::paintMask):
(WebCore::InlineBoxPainter::paintDecorations):
* Source/WebCore/rendering/ReferencedSVGResources.cpp:
(WebCore::ReferencedSVGResources::referencedRenderResource):
* Source/WebCore/rendering/ReferencedSVGResources.h:
* Source/WebCore/rendering/RenderBox.cpp:
(WebCore::RenderBox::paintMaskImages):
(WebCore::RenderBox::repaintLayerRectsForImage):
* Source/WebCore/rendering/RenderElement.cpp:
(WebCore::RenderElement::borderImageIsLoadedAndCanBeRendered const):
* Source/WebCore/rendering/RenderLayer.cpp:
(WebCore::RenderLayer::setupClipPath):
* Source/WebCore/rendering/RenderLayerBacking.cpp:
(WebCore::canDirectlyCompositeBackgroundBackgroundImage):
(WebCore::hasPaintedBoxDecorationsOrBackgroundImage):
(WebCore::supportsDirectlyCompositedBoxDecorations):
(WebCore::RenderLayerBacking::contentChanged):
* Source/WebCore/rendering/style/FillLayer.cpp:
(WebCore::FillLayer::imagesAreLoaded const):
* Source/WebCore/rendering/style/FillLayer.h:
* Source/WebCore/rendering/style/NinePieceImage.cpp:
(WebCore::NinePieceImage::paint const):
* Source/WebCore/rendering/style/StyleCachedImage.cpp:
(WebCore::StyleCachedImage::uncheckedRenderSVGResource const):
(WebCore::StyleCachedImage::renderSVGResource const):
(WebCore::StyleCachedImage::isRenderSVGResource const):
(WebCore::StyleCachedImage::canRender const):
(WebCore::StyleCachedImage::isLoaded const):
(WebCore::StyleCachedImage::imageSize const):
(WebCore::StyleCachedImage::computeIntrinsicDimensions):
(WebCore::StyleCachedImage::setContainerContextForRenderer):
(WebCore::StyleCachedImage::image const):
* Source/WebCore/rendering/style/StyleCachedImage.h:
* Source/WebCore/rendering/style/StyleImage.h:
(WebCore::StyleImage::isLoaded const):
(WebCore::StyleImage::reresolvedURL const):
* Source/WebCore/rendering/style/StyleMultiImage.cpp:
(WebCore::StyleMultiImage::isLoaded const):
* Source/WebCore/rendering/style/StyleMultiImage.h:
* Source/WebCore/rendering/svg/RenderSVGResourceMasker.cpp:
(WebCore::RenderSVGResourceMasker::applyResource):
(WebCore::RenderSVGResourceMasker::drawContentIntoMaskImage):
(WebCore::RenderSVGResourceMasker::drawContentIntoContext):
* Source/WebCore/rendering/svg/RenderSVGResourceMasker.h:
* Source/WebCore/rendering/svg/SVGRenderTreeAsText.cpp:
(WebCore::writeResources):
* Source/WebCore/rendering/svg/SVGResources.cpp:
(WebCore::SVGResources::buildCachedResources):
* Source/WebCore/svg/graphics/SVGImage.cpp:
(WebCore::SVGImage::rootElement const):
* Source/WebCore/svg/graphics/SVGImage.h:
* Source/WebCore/svg/graphics/SVGResourceImage.cpp: Added.
(WebCore::SVGResourceImage::create):
(WebCore::SVGResourceImage::SVGResourceImage):
(WebCore::SVGResourceImage::draw):
(WebCore::SVGResourceImage::drawPattern):
(WebCore::SVGResourceImage::dump const):
* Source/WebCore/svg/graphics/SVGResourceImage.h: Added.

Canonical link: https://commits.webkit.org/268629@main