LibWeb/CSS: Treat 'mask' as a longhand property

Before this change, an element masked with 'mask-image: url(...)' would
show the mask, but 'mask: url(...)' would not. On e.g. dialogic.nl it
would show white boxes instead of the actual images in the top
navigation bar. We still do not support many of the other mask
properties, but with this change at least the masks show up in both
cases.
This commit is contained in:
Tommy van der Vorst 2025-03-01 11:27:55 +01:00 committed by Sam Atkins
commit 056205aa76
Notes: github-actions[bot] 2025-03-05 12:11:03 +00:00
9 changed files with 127 additions and 86 deletions

View file

@ -1,6 +1,6 @@
All supported properties and their default values exposed from CSSStyleDeclaration from getComputedStyle:
'cssText': ''
'length': '220'
'length': '219'
'parentRule': 'null'
'cssFloat': 'none'
'WebkitAlignContent': 'normal'

View file

@ -156,70 +156,69 @@ All properties associated with getComputedStyle(document.body):
"153": "margin-left",
"154": "margin-right",
"155": "margin-top",
"156": "mask",
"157": "mask-image",
"158": "mask-type",
"159": "max-block-size",
"160": "max-height",
"161": "max-inline-size",
"162": "max-width",
"163": "min-block-size",
"164": "min-height",
"165": "min-inline-size",
"166": "min-width",
"167": "mix-blend-mode",
"168": "object-fit",
"169": "object-position",
"170": "opacity",
"171": "order",
"172": "outline-color",
"173": "outline-offset",
"174": "outline-style",
"175": "outline-width",
"176": "overflow-x",
"177": "overflow-y",
"178": "padding-block-end",
"179": "padding-block-start",
"180": "padding-bottom",
"181": "padding-inline-end",
"182": "padding-inline-start",
"183": "padding-left",
"184": "padding-right",
"185": "padding-top",
"186": "position",
"187": "r",
"188": "right",
"189": "rotate",
"190": "row-gap",
"191": "rx",
"192": "ry",
"193": "scale",
"194": "scrollbar-gutter",
"195": "scrollbar-width",
"196": "stop-color",
"197": "stop-opacity",
"198": "table-layout",
"199": "text-decoration-color",
"200": "text-decoration-style",
"201": "text-decoration-thickness",
"202": "text-overflow",
"203": "top",
"204": "transform",
"205": "transform-box",
"206": "transform-origin",
"207": "transition-delay",
"208": "transition-duration",
"209": "transition-property",
"210": "transition-timing-function",
"211": "translate",
"212": "unicode-bidi",
"213": "user-select",
"214": "vertical-align",
"215": "view-transition-name",
"216": "width",
"217": "x",
"218": "y",
"219": "z-index"
"156": "mask-image",
"157": "mask-type",
"158": "max-block-size",
"159": "max-height",
"160": "max-inline-size",
"161": "max-width",
"162": "min-block-size",
"163": "min-height",
"164": "min-inline-size",
"165": "min-width",
"166": "mix-blend-mode",
"167": "object-fit",
"168": "object-position",
"169": "opacity",
"170": "order",
"171": "outline-color",
"172": "outline-offset",
"173": "outline-style",
"174": "outline-width",
"175": "overflow-x",
"176": "overflow-y",
"177": "padding-block-end",
"178": "padding-block-start",
"179": "padding-bottom",
"180": "padding-inline-end",
"181": "padding-inline-start",
"182": "padding-left",
"183": "padding-right",
"184": "padding-top",
"185": "position",
"186": "r",
"187": "right",
"188": "rotate",
"189": "row-gap",
"190": "rx",
"191": "ry",
"192": "scale",
"193": "scrollbar-gutter",
"194": "scrollbar-width",
"195": "stop-color",
"196": "stop-opacity",
"197": "table-layout",
"198": "text-decoration-color",
"199": "text-decoration-style",
"200": "text-decoration-thickness",
"201": "text-overflow",
"202": "top",
"203": "transform",
"204": "transform-box",
"205": "transform-origin",
"206": "transition-delay",
"207": "transition-duration",
"208": "transition-property",
"209": "transition-timing-function",
"210": "translate",
"211": "unicode-bidi",
"212": "user-select",
"213": "vertical-align",
"214": "view-transition-name",
"215": "width",
"216": "x",
"217": "y",
"218": "z-index"
}
All properties associated with document.body.style by default:
{}

View file

@ -154,7 +154,6 @@ margin-inline-start: 8px
margin-left: 8px
margin-right: 8px
margin-top: 8px
mask: none
mask-image: none
mask-type: luminance
max-block-size: none