Skip to content
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

[css-masking] Implement mask-border properties #17217

Conversation

nt1m
Copy link
Member

@nt1m nt1m commented Aug 30, 2023

ecf24fd

[css-masking] Implement `mask-border` properties
https://bugs.webkit.org/show_bug.cgi?id=229900
rdar://82991599

Reviewed by Darin Adler.

This patch aliases -webkit-mask-box-image-* to mask-border-*, with a few changes:
- the initial value of mask-border-slice is now `0` instead of `0 fill`
- the `-webkit-mask-box-image` prop is implemented as a separate shorthand that sets the `fill` on the slice property unlike the `mask-border` shorthand

This is similar to how -webkit-border-image and border-image are setup.

Setting the mask shorthand (but not -webkit-mask) now also resets the `mask-border-*` properties as specified.

Also mass rename maskBoxImage in the codebase to maskBorder.

Specification at: https://drafts.fxtf.org/css-masking/#the-mask-border

* LayoutTests/fast/css/getComputedStyle/computed-style-expected.txt:
* LayoutTests/fast/css/getComputedStyle/computed-style-without-renderer-expected.txt:
* LayoutTests/fast/css/getComputedStyle/getComputedStyle-webkit-mask-box-image.html:
* LayoutTests/fast/css/mask-box-image-parsing-expected.txt:
* LayoutTests/fast/css/mask-box-image-parsing.html:
* LayoutTests/fast/css/uri-token-parsing-expected.txt:
* LayoutTests/fast/css/uri-token-parsing.html:
* LayoutTests/fast/masking/parsing-mask-repeat-expected.txt:
* LayoutTests/fast/masking/parsing-mask-repeat.html:
* LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/all-prop-initial-xml-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/css/css-masking/inheritance.sub-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/css/css-masking/mask-shorthand-subproperties-reset-expected.txt: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-masking/mask-shorthand-subproperties-reset.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-masking/parsing/mask-valid.sub-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/css/css-masking/parsing/mask-valid.sub.html:
* LayoutTests/platform/glib/imported/w3c/web-platform-tests/css/css-masking/parsing/mask-valid.sub-expected.txt:
* LayoutTests/platform/gtk/imported/w3c/web-platform-tests/css/css-cascade/all-prop-initial-xml-expected.txt:
* LayoutTests/platform/ios-wk2/imported/w3c/web-platform-tests/css/css-cascade/all-prop-initial-xml-expected.txt:
* LayoutTests/platform/ipad/imported/w3c/web-platform-tests/css/css-cascade/all-prop-initial-xml-expected.txt:
* LayoutTests/platform/mac-wk1/imported/w3c/web-platform-tests/css/css-cascade/all-prop-initial-xml-expected.txt:
* LayoutTests/platform/wpe/imported/w3c/web-platform-tests/css/css-cascade/all-prop-initial-xml-expected.txt:
* LayoutTests/svg/css/getComputedStyle-basic-expected.txt:
* Source/WebCore/animation/CSSPropertyAnimation.cpp:
(WebCore::CSSPropertyAnimationWrapperMap::CSSPropertyAnimationWrapperMap):
* Source/WebCore/css/CSSProperties.json:
* Source/WebCore/css/ComputedStyleExtractor.cpp:
(WebCore::ComputedStyleExtractor::valueForPropertyInStyle const):
* Source/WebCore/css/ShorthandSerializer.cpp:
(WebCore::ShorthandSerializer::serialize):
(WebCore::ShorthandSerializer::serializeBorderImage const):
* Source/WebCore/css/parser/CSSPropertyParser.cpp:
(WebCore::initialValueForLonghand):
(WebCore::isInitialValueForLonghand):
(WebCore::initialValueTextForLonghand):
(WebCore::initialValueIDForLonghand):
(WebCore::CSSPropertyParser::consumeBorderImage):
(WebCore::CSSPropertyParser::consumeBackgroundShorthand):
(WebCore::CSSPropertyParser::parseShorthand):
* Source/WebCore/css/parser/CSSPropertyParserHelpers.cpp:
(WebCore::CSSPropertyParserHelpers::consumeBorderImageComponents):
* Source/WebCore/rendering/InlineBoxPainter.cpp:
(WebCore::InlineBoxPainter::paintMask):
* Source/WebCore/rendering/RenderBox.cpp:
(WebCore::RenderBox::paintMaskImages):
(WebCore::RenderBox::maskClipRect):
(WebCore::RenderBox::imageChanged):
* Source/WebCore/rendering/RenderElement.cpp:
(WebCore::RenderElement::styleDidChange):
(WebCore::RenderElement::willBeDestroyed):
* Source/WebCore/rendering/RenderLayer.cpp:
(WebCore::RenderLayer::calculateClipRects const):
* Source/WebCore/rendering/style/NinePieceImage.cpp:
(WebCore::NinePieceImage::defaultMaskData):
* Source/WebCore/rendering/style/RenderStyle.cpp:
(WebCore::rareDataChangeRequiresLayerRepaint):
* Source/WebCore/rendering/style/RenderStyle.h:
(WebCore::RenderStyle::initialMaskBorderSource):
(WebCore::RenderStyle::initialMaskBoxImageSource): Deleted.
* Source/WebCore/rendering/style/RenderStyleInlines.h:
(WebCore::RenderStyle::hasMask const):
(WebCore::RenderStyle::maskBorder const):
(WebCore::RenderStyle::maskBorderOutsets const):
(WebCore::RenderStyle::maskBorderSource const):
(WebCore::RenderStyle::maskBoxImage const): Deleted.
(WebCore::RenderStyle::maskBoxImageOutsets const): Deleted.
(WebCore::RenderStyle::maskBoxImageSource const): Deleted.
* Source/WebCore/rendering/style/RenderStyleSetters.h:
(WebCore::RenderStyle::setMaskBorder):
(WebCore::RenderStyle::setMaskBorderSource):
(WebCore::RenderStyle::setMaskBoxImage): Deleted.
(WebCore::RenderStyle::setMaskBoxImageSource): Deleted.
* Source/WebCore/rendering/style/StyleRareNonInheritedData.cpp:
(WebCore::StyleRareNonInheritedData::StyleRareNonInheritedData):
(WebCore::StyleRareNonInheritedData::operator== const):
* Source/WebCore/rendering/style/StyleRareNonInheritedData.h:
* Source/WebCore/rendering/style/StyleReflection.h:
(WebCore::StyleReflection::StyleReflection):
* Source/WebCore/rendering/style/WillChangeData.cpp:
(WebCore::WillChangeData::propertyCreatesStackingContext):
* Source/WebCore/style/StyleBuilderConverter.h:
(WebCore::Style::BuilderConverter::convertReflection):
* Source/WebCore/style/StyleBuilderCustom.h:
(WebCore::Style::ApplyPropertyBorderImageModifier::applyInitialValue):
(WebCore::Style::ApplyPropertyBorderImageModifier::getValue):
(WebCore::Style::ApplyPropertyBorderImageModifier::setValue):
* Source/WebCore/style/StylePendingResources.cpp:
(WebCore::Style::loadPendingResources):

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

79f7ffe

Misc iOS, tvOS & watchOS macOS Linux Windows
βœ… πŸ§ͺ style βœ… πŸ›  ios βœ… πŸ›  mac βœ… πŸ›  wpe βœ… πŸ›  wincairo
βœ… πŸ§ͺ bindings βœ… πŸ›  ios-sim βœ… πŸ›  mac-AS-debug   πŸ§ͺ wpe-wk2
βœ… πŸ§ͺ webkitperl βœ… πŸ§ͺ ios-wk2 βœ… πŸ§ͺ api-mac βœ… πŸ›  gtk
βœ… πŸ§ͺ ios-wk2-wpt βœ… πŸ§ͺ mac-wk1   πŸ§ͺ gtk-wk2
βœ… πŸ§ͺ api-ios βœ… πŸ§ͺ mac-wk2 βœ… πŸ§ͺ api-gtk
βœ… πŸ›  tv   πŸ§ͺ mac-AS-debug-wk2
βœ… πŸ›  tv-sim βœ… πŸ§ͺ mac-wk2-stress
  πŸ›  πŸ§ͺ merge βœ… πŸ›  watch
βœ… πŸ›  πŸ§ͺ unsafe-merge βœ… πŸ›  watch-sim

@nt1m nt1m requested a review from graouts as a code owner August 30, 2023 04:41
@nt1m nt1m self-assigned this Aug 30, 2023
@nt1m nt1m added the CSS Cascading Style Sheets implementation label Aug 30, 2023
@webkit-ews-buildbot webkit-ews-buildbot added the merging-blocked Applied to prevent a change from being merged label Aug 30, 2023
@nt1m nt1m removed the merging-blocked Applied to prevent a change from being merged label Aug 30, 2023
@nt1m nt1m changed the title [css-masking] Implement mask-border properties [css-masking] Implement mask-border properties Aug 30, 2023
@nt1m nt1m force-pushed the eng/css-masking-Implement-mask-border-properties branch from 7e47148 to c7e4532 Compare August 30, 2023 06:28
@nt1m nt1m force-pushed the eng/css-masking-Implement-mask-border-properties branch from c7e4532 to 68f5300 Compare August 30, 2023 06:32
@nt1m nt1m requested a review from shallawa August 30, 2023 06:33
@nt1m nt1m changed the title [css-masking] Implement mask-border properties [css-masking] Implement mask-border properties Aug 30, 2023
@nt1m nt1m force-pushed the eng/css-masking-Implement-mask-border-properties branch from 68f5300 to 3aaea52 Compare August 30, 2023 06:34
@webkit-ews-buildbot webkit-ews-buildbot added the merging-blocked Applied to prevent a change from being merged label Aug 30, 2023
@nt1m nt1m removed the merging-blocked Applied to prevent a change from being merged label Aug 30, 2023
@nt1m nt1m force-pushed the eng/css-masking-Implement-mask-border-properties branch from 3aaea52 to 06c386f Compare August 30, 2023 08:48
@nt1m nt1m force-pushed the eng/css-masking-Implement-mask-border-properties branch from 06c386f to 1ebe3d8 Compare August 30, 2023 08:53
@webkit-ews-buildbot webkit-ews-buildbot added the merging-blocked Applied to prevent a change from being merged label Aug 30, 2023
Source/WebCore/animation/CSSPropertyAnimation.cpp Outdated Show resolved Hide resolved
Source/WebCore/css/parser/CSSPropertyParser.cpp Outdated Show resolved Hide resolved
Source/WebCore/css/parser/CSSPropertyParser.cpp Outdated Show resolved Hide resolved
Source/WebCore/css/parser/CSSPropertyParser.cpp Outdated Show resolved Hide resolved
Source/WebCore/style/StyleBuilderCustom.h Outdated Show resolved Hide resolved
@nt1m nt1m removed the merging-blocked Applied to prevent a change from being merged label Aug 30, 2023
@nt1m nt1m force-pushed the eng/css-masking-Implement-mask-border-properties branch from 1ebe3d8 to c53288b Compare August 30, 2023 17:00
@nt1m nt1m added the merge-queue Applied to send a pull request to merge-queue label Aug 30, 2023
@nt1m nt1m removed the merge-queue Applied to send a pull request to merge-queue label Aug 30, 2023
@nt1m nt1m force-pushed the eng/css-masking-Implement-mask-border-properties branch from c53288b to 79f7ffe Compare August 30, 2023 17:10
@nt1m nt1m added merge-queue Applied to send a pull request to merge-queue unsafe-merge-queue Applied to send a pull request to merge-queue, but skip building and testing labels Aug 30, 2023
https://bugs.webkit.org/show_bug.cgi?id=229900
rdar://82991599

Reviewed by Darin Adler.

This patch aliases -webkit-mask-box-image-* to mask-border-*, with a few changes:
- the initial value of mask-border-slice is now `0` instead of `0 fill`
- the `-webkit-mask-box-image` prop is implemented as a separate shorthand that sets the `fill` on the slice property unlike the `mask-border` shorthand

This is similar to how -webkit-border-image and border-image are setup.

Setting the mask shorthand (but not -webkit-mask) now also resets the `mask-border-*` properties as specified.

Also mass rename maskBoxImage in the codebase to maskBorder.

Specification at: https://drafts.fxtf.org/css-masking/#the-mask-border

* LayoutTests/fast/css/getComputedStyle/computed-style-expected.txt:
* LayoutTests/fast/css/getComputedStyle/computed-style-without-renderer-expected.txt:
* LayoutTests/fast/css/getComputedStyle/getComputedStyle-webkit-mask-box-image.html:
* LayoutTests/fast/css/mask-box-image-parsing-expected.txt:
* LayoutTests/fast/css/mask-box-image-parsing.html:
* LayoutTests/fast/css/uri-token-parsing-expected.txt:
* LayoutTests/fast/css/uri-token-parsing.html:
* LayoutTests/fast/masking/parsing-mask-repeat-expected.txt:
* LayoutTests/fast/masking/parsing-mask-repeat.html:
* LayoutTests/imported/w3c/web-platform-tests/css/css-cascade/all-prop-initial-xml-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/css/css-masking/inheritance.sub-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/css/css-masking/mask-shorthand-subproperties-reset-expected.txt: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-masking/mask-shorthand-subproperties-reset.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-masking/parsing/mask-valid.sub-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/css/css-masking/parsing/mask-valid.sub.html:
* LayoutTests/platform/glib/imported/w3c/web-platform-tests/css/css-masking/parsing/mask-valid.sub-expected.txt:
* LayoutTests/platform/gtk/imported/w3c/web-platform-tests/css/css-cascade/all-prop-initial-xml-expected.txt:
* LayoutTests/platform/ios-wk2/imported/w3c/web-platform-tests/css/css-cascade/all-prop-initial-xml-expected.txt:
* LayoutTests/platform/ipad/imported/w3c/web-platform-tests/css/css-cascade/all-prop-initial-xml-expected.txt:
* LayoutTests/platform/mac-wk1/imported/w3c/web-platform-tests/css/css-cascade/all-prop-initial-xml-expected.txt:
* LayoutTests/platform/wpe/imported/w3c/web-platform-tests/css/css-cascade/all-prop-initial-xml-expected.txt:
* LayoutTests/svg/css/getComputedStyle-basic-expected.txt:
* Source/WebCore/animation/CSSPropertyAnimation.cpp:
(WebCore::CSSPropertyAnimationWrapperMap::CSSPropertyAnimationWrapperMap):
* Source/WebCore/css/CSSProperties.json:
* Source/WebCore/css/ComputedStyleExtractor.cpp:
(WebCore::ComputedStyleExtractor::valueForPropertyInStyle const):
* Source/WebCore/css/ShorthandSerializer.cpp:
(WebCore::ShorthandSerializer::serialize):
(WebCore::ShorthandSerializer::serializeBorderImage const):
* Source/WebCore/css/parser/CSSPropertyParser.cpp:
(WebCore::initialValueForLonghand):
(WebCore::isInitialValueForLonghand):
(WebCore::initialValueTextForLonghand):
(WebCore::initialValueIDForLonghand):
(WebCore::CSSPropertyParser::consumeBorderImage):
(WebCore::CSSPropertyParser::consumeBackgroundShorthand):
(WebCore::CSSPropertyParser::parseShorthand):
* Source/WebCore/css/parser/CSSPropertyParserHelpers.cpp:
(WebCore::CSSPropertyParserHelpers::consumeBorderImageComponents):
* Source/WebCore/rendering/InlineBoxPainter.cpp:
(WebCore::InlineBoxPainter::paintMask):
* Source/WebCore/rendering/RenderBox.cpp:
(WebCore::RenderBox::paintMaskImages):
(WebCore::RenderBox::maskClipRect):
(WebCore::RenderBox::imageChanged):
* Source/WebCore/rendering/RenderElement.cpp:
(WebCore::RenderElement::styleDidChange):
(WebCore::RenderElement::willBeDestroyed):
* Source/WebCore/rendering/RenderLayer.cpp:
(WebCore::RenderLayer::calculateClipRects const):
* Source/WebCore/rendering/style/NinePieceImage.cpp:
(WebCore::NinePieceImage::defaultMaskData):
* Source/WebCore/rendering/style/RenderStyle.cpp:
(WebCore::rareDataChangeRequiresLayerRepaint):
* Source/WebCore/rendering/style/RenderStyle.h:
(WebCore::RenderStyle::initialMaskBorderSource):
(WebCore::RenderStyle::initialMaskBoxImageSource): Deleted.
* Source/WebCore/rendering/style/RenderStyleInlines.h:
(WebCore::RenderStyle::hasMask const):
(WebCore::RenderStyle::maskBorder const):
(WebCore::RenderStyle::maskBorderOutsets const):
(WebCore::RenderStyle::maskBorderSource const):
(WebCore::RenderStyle::maskBoxImage const): Deleted.
(WebCore::RenderStyle::maskBoxImageOutsets const): Deleted.
(WebCore::RenderStyle::maskBoxImageSource const): Deleted.
* Source/WebCore/rendering/style/RenderStyleSetters.h:
(WebCore::RenderStyle::setMaskBorder):
(WebCore::RenderStyle::setMaskBorderSource):
(WebCore::RenderStyle::setMaskBoxImage): Deleted.
(WebCore::RenderStyle::setMaskBoxImageSource): Deleted.
* Source/WebCore/rendering/style/StyleRareNonInheritedData.cpp:
(WebCore::StyleRareNonInheritedData::StyleRareNonInheritedData):
(WebCore::StyleRareNonInheritedData::operator== const):
* Source/WebCore/rendering/style/StyleRareNonInheritedData.h:
* Source/WebCore/rendering/style/StyleReflection.h:
(WebCore::StyleReflection::StyleReflection):
* Source/WebCore/rendering/style/WillChangeData.cpp:
(WebCore::WillChangeData::propertyCreatesStackingContext):
* Source/WebCore/style/StyleBuilderConverter.h:
(WebCore::Style::BuilderConverter::convertReflection):
* Source/WebCore/style/StyleBuilderCustom.h:
(WebCore::Style::ApplyPropertyBorderImageModifier::applyInitialValue):
(WebCore::Style::ApplyPropertyBorderImageModifier::getValue):
(WebCore::Style::ApplyPropertyBorderImageModifier::setValue):
* Source/WebCore/style/StylePendingResources.cpp:
(WebCore::Style::loadPendingResources):

Canonical link: https://commits.webkit.org/267460@main
@webkit-commit-queue webkit-commit-queue force-pushed the eng/css-masking-Implement-mask-border-properties branch from 79f7ffe to ecf24fd Compare August 30, 2023 18:57
@webkit-commit-queue
Copy link
Collaborator

Committed 267460@main (ecf24fd): https://commits.webkit.org/267460@main

Reviewed commits have been landed. Closing PR #17217 and removing active labels.

@webkit-commit-queue webkit-commit-queue merged commit ecf24fd into WebKit:main Aug 30, 2023
@webkit-commit-queue webkit-commit-queue removed merge-queue Applied to send a pull request to merge-queue unsafe-merge-queue Applied to send a pull request to merge-queue, but skip building and testing labels Aug 30, 2023
@nt1m nt1m deleted the eng/css-masking-Implement-mask-border-properties branch November 3, 2023 01:06
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CSS Cascading Style Sheets implementation
Projects
None yet
5 participants