mirrors/ladybird
0
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-07-24 18:02:20 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 9

LibWeb/CSS: Implement 'background-blend-mode'

Browse source 
This implements the 'background-blend-mode' CSS property.
This commit is contained in:
Glenn Skrzypczak 2025-03-20 15:36:36 +01:00 • committed by Sam Atkins
parent 1898643ba4
commit a73cd88f0c
Notes: github-actions[bot] 2025-03-28 09:42:07 +00:00
27 changed files with 303 additions and 199 deletions
Download patch file Download diff file Expand all files Collapse all files

1
Libraries/LibWeb/CSS/ComputedValues.h
View file

@ -296,6 +296,7 @@ struct BackgroundLayerData {
CSS::LengthPercentage size_y { CSS::Length::make_auto() }; CSS::LengthPercentage size_y { CSS::Length::make_auto() };
CSS::Repeat repeat_x { CSS::Repeat::Repeat }; CSS::Repeat repeat_x { CSS::Repeat::Repeat };
CSS::Repeat repeat_y { CSS::Repeat::Repeat }; CSS::Repeat repeat_y { CSS::Repeat::Repeat };
CSS::MixBlendMode blend_mode { CSS::MixBlendMode::Normal };
}; };
struct BorderData { struct BorderData {

1
Libraries/LibWeb/CSS/Parser/PropertyParsing.cpp
View file

@ -443,6 +443,7 @@ Parser::ParseErrorOr<NonnullRefPtr<CSSStyleValue>> Parser::parse_css_value(Prope
return parsed_value.release_nonnull(); return parsed_value.release_nonnull();
return ParseError::SyntaxError; return ParseError::SyntaxError;
case PropertyID::BackgroundAttachment: case PropertyID::BackgroundAttachment:
case PropertyID::BackgroundBlendMode:
case PropertyID::BackgroundClip: case PropertyID::BackgroundClip:
case PropertyID::BackgroundImage: case PropertyID::BackgroundImage:
case PropertyID::BackgroundOrigin: case PropertyID::BackgroundOrigin:

8
Libraries/LibWeb/CSS/Properties.json
View file

@ -327,6 +327,14 @@
"background-attachment" "background-attachment"
] ]
}, },
"background-blend-mode": {
"animation-type": "none",
"inherited": false,
"initial": "normal",
"valid-types": [
"mix-blend-mode"
]
},
"background-clip": { "background-clip": {
"affects-layout": false, "affects-layout": false,
"animation-type": "repeatable-list", "animation-type": "repeatable-list",

3
Libraries/LibWeb/Layout/Node.cpp
View file

@ -397,6 +397,7 @@ void NodeWithStyle::apply_style(CSS::ComputedProperties const& computed_style)
auto const& y_positions = computed_style.property(CSS::PropertyID::BackgroundPositionY); auto const& y_positions = computed_style.property(CSS::PropertyID::BackgroundPositionY);
auto const& repeats = computed_style.property(CSS::PropertyID::BackgroundRepeat); auto const& repeats = computed_style.property(CSS::PropertyID::BackgroundRepeat);
auto const& sizes = computed_style.property(CSS::PropertyID::BackgroundSize); auto const& sizes = computed_style.property(CSS::PropertyID::BackgroundSize);
auto const& background_blend_modes = computed_style.property(CSS::PropertyID::BackgroundBlendMode);
auto count_layers = [](auto const& maybe_style_value) -> size_t { auto count_layers = [](auto const& maybe_style_value) -> size_t {
if (maybe_style_value.is_value_list()) if (maybe_style_value.is_value_list())
@ -510,6 +511,8 @@ void NodeWithStyle::apply_style(CSS::ComputedProperties const& computed_style)
layer.repeat_y = repeat_value->as_background_repeat().repeat_y(); layer.repeat_y = repeat_value->as_background_repeat().repeat_y();
} }
layer.blend_mode = CSS::keyword_to_mix_blend_mode(value_for_layer(background_blend_modes, layer_index)->to_keyword()).value_or(CSS::MixBlendMode::Normal);
layers.append(move(layer)); layers.append(move(layer));
} }

20
Libraries/LibWeb/Painting/BackgroundPainting.cpp
View file

@ -11,6 +11,7 @@
#include <LibWeb/Layout/TextNode.h> #include <LibWeb/Layout/TextNode.h>
#include <LibWeb/Layout/Viewport.h> #include <LibWeb/Layout/Viewport.h>
#include <LibWeb/Painting/BackgroundPainting.h> #include <LibWeb/Painting/BackgroundPainting.h>
#include <LibWeb/Painting/Blending.h>
#include <LibWeb/Painting/DisplayListRecorder.h> #include <LibWeb/Painting/DisplayListRecorder.h>
#include <LibWeb/Painting/PaintableBox.h> #include <LibWeb/Painting/PaintableBox.h>
@ -77,6 +78,11 @@ void paint_background(PaintContext& context, PaintableBox const& paintable_box,
{ {
auto& display_list_recorder = context.display_list_recorder(); auto& display_list_recorder = context.display_list_recorder();
// https://drafts.fxtf.org/compositing/#background-blend-mode
// Background layers must not blend with the content that is behind the element,
// instead they must act as if they are rendered into an isolated group.
display_list_recorder.save_layer();
DisplayListRecorderStateSaver state { display_list_recorder }; DisplayListRecorderStateSaver state { display_list_recorder };
if (resolved_background.needs_text_clip) { if (resolved_background.needs_text_clip) {
auto display_list = compute_text_clip_paths(context, paintable_box, resolved_background.background_rect.location()); auto display_list = compute_text_clip_paths(context, paintable_box, resolved_background.background_rect.location());
@ -267,6 +273,11 @@ void paint_background(PaintContext& context, PaintableBox const& paintable_box,
} }
}; };
Gfx::CompositingAndBlendingOperator compositing_and_blending_operator = mix_blend_mode_to_compositing_and_blending_operator(layer.blend_mode);
if (compositing_and_blending_operator != Gfx::CompositingAndBlendingOperator::Normal) {
display_list_recorder.apply_compositing_and_blending_operator(compositing_and_blending_operator);
}
if (auto color = image.color_if_single_pixel_bitmap(); color.has_value()) { if (auto color = image.color_if_single_pixel_bitmap(); color.has_value()) {
// OPTIMIZATION: If the image is a single pixel, we can just fill the whole area with it. // OPTIMIZATION: If the image is a single pixel, we can just fill the whole area with it.
// However, we must first figure out the real coverage area, taking repeat etc into account. // However, we must first figure out the real coverage area, taking repeat etc into account.
@ -289,7 +300,13 @@ void paint_background(PaintContext& context, PaintableBox const& paintable_box,
image.paint(context, image_device_rect, image_rendering); image.paint(context, image_device_rect, image_rendering);
}); });
} }
if (compositing_and_blending_operator != Gfx::CompositingAndBlendingOperator::Normal) {
display_list_recorder.restore();
}
} }
display_list_recorder.restore();
} }
ResolvedBackground resolve_background_layers(Vector<CSS::BackgroundLayerData> const& layers, PaintableBox const& paintable_box, Color background_color, CSSPixelRect const& border_rect, BorderRadiiData const& border_radii) ResolvedBackground resolve_background_layers(Vector<CSS::BackgroundLayerData> const& layers, PaintableBox const& paintable_box, Color background_color, CSSPixelRect const& border_rect, BorderRadiiData const& border_radii)
@ -404,7 +421,8 @@ ResolvedBackground resolve_background_layers(Vector<CSS::BackgroundLayerData> co
.background_positioning_area = background_positioning_area, .background_positioning_area = background_positioning_area,
.image_rect = image_rect, .image_rect = image_rect,
.repeat_x = layer.repeat_x, .repeat_x = layer.repeat_x,
.repeat_y = layer.repeat_y }); .repeat_y = layer.repeat_y,
.blend_mode = layer.blend_mode });
} }
return ResolvedBackground { return ResolvedBackground {

1
Libraries/LibWeb/Painting/BackgroundPainting.h
View file

@ -24,6 +24,7 @@ struct ResolvedBackgroundLayerData {
CSSPixelRect image_rect; CSSPixelRect image_rect;
CSS::Repeat repeat_x; CSS::Repeat repeat_x;
CSS::Repeat repeat_y; CSS::Repeat repeat_y;
CSS::MixBlendMode blend_mode;
}; };
struct BackgroundBox { struct BackgroundBox {

48
Libraries/LibWeb/Painting/Blending.h Normal file
View file

@ -0,0 +1,48 @@
/*
* Copyright (c) 2025, Glenn Skrzypczak <glenn.skrzypczak@gmail.com>
*
* SPDX-License-Identifier: BSD-2-Clause
*/
#pragma once
#include <LibGfx/CompositingAndBlendingOperator.h>
#include <LibWeb/CSS/Enums.h>
namespace Web::Painting {
#define ENUMERATE_MIX_BLEND_MODES(E) \
E(Normal) \
E(Multiply) \
E(Screen) \
E(Overlay) \
E(Darken) \
E(Lighten) \
E(ColorDodge) \
E(ColorBurn) \
E(HardLight) \
E(SoftLight) \
E(Difference) \
E(Exclusion) \
E(Hue) \
E(Saturation) \
E(Color) \
E(Luminosity) \
E(PlusDarker) \
E(PlusLighter)
static Gfx::CompositingAndBlendingOperator mix_blend_mode_to_compositing_and_blending_operator(CSS::MixBlendMode blend_mode)
{
switch (blend_mode) {
#undef __ENUMERATE
#define __ENUMERATE(blend_mode) \
case CSS::MixBlendMode::blend_mode: \
return Gfx::CompositingAndBlendingOperator::blend_mode;
ENUMERATE_MIX_BLEND_MODES(__ENUMERATE)
#undef __ENUMERATE
default:
VERIFY_NOT_REACHED();
}
}
}

12
Libraries/LibWeb/Painting/SVGSVGPaintable.cpp
View file

@ -5,6 +5,7 @@
*/ */
#include <LibWeb/Layout/ImageBox.h> #include <LibWeb/Layout/ImageBox.h>
#include <LibWeb/Painting/Blending.h>
#include <LibWeb/Painting/DisplayListRecorder.h> #include <LibWeb/Painting/DisplayListRecorder.h>
#include <LibWeb/Painting/SVGSVGPaintable.h> #include <LibWeb/Painting/SVGSVGPaintable.h>
#include <LibWeb/Painting/StackingContext.h> #include <LibWeb/Painting/StackingContext.h>
@ -60,16 +61,7 @@ void SVGSVGPaintable::paint_svg_box(PaintContext& context, PaintableBox const& s
auto const& filter = computed_values.filter(); auto const& filter = computed_values.filter();
auto masking_area = svg_box.get_masking_area(); auto masking_area = svg_box.get_masking_area();
Gfx::CompositingAndBlendingOperator compositing_and_blending_operator; Gfx::CompositingAndBlendingOperator compositing_and_blending_operator = mix_blend_mode_to_compositing_and_blending_operator(computed_values.mix_blend_mode());
switch (computed_values.mix_blend_mode()) {
#undef __ENUMERATE
#define __ENUMERATE(mix_blend_mode) \
case CSS::MixBlendMode::mix_blend_mode: \
compositing_and_blending_operator = Gfx::CompositingAndBlendingOperator::mix_blend_mode; \
break;
ENUMERATE_MIX_BLEND_MODES(__ENUMERATE)
#undef __ENUMERATE
}
auto needs_to_save_state = computed_values.isolation() == CSS::Isolation::Isolate || compositing_and_blending_operator != Gfx::CompositingAndBlendingOperator::Normal || svg_box.has_css_transform() || svg_box.get_masking_area().has_value(); auto needs_to_save_state = computed_values.isolation() == CSS::Isolation::Isolate || compositing_and_blending_operator != Gfx::CompositingAndBlendingOperator::Normal || svg_box.has_css_transform() || svg_box.get_masking_area().has_value();

12
Libraries/LibWeb/Painting/StackingContext.cpp
View file

@ -14,6 +14,7 @@
#include <LibWeb/Layout/Box.h> #include <LibWeb/Layout/Box.h>
#include <LibWeb/Layout/ReplacedBox.h> #include <LibWeb/Layout/ReplacedBox.h>
#include <LibWeb/Layout/Viewport.h> #include <LibWeb/Layout/Viewport.h>
#include <LibWeb/Painting/Blending.h>
#include <LibWeb/Painting/DisplayListRecorder.h> #include <LibWeb/Painting/DisplayListRecorder.h>
#include <LibWeb/Painting/PaintableBox.h> #include <LibWeb/Painting/PaintableBox.h>
#include <LibWeb/Painting/SVGSVGPaintable.h> #include <LibWeb/Painting/SVGSVGPaintable.h>
@ -316,16 +317,7 @@ void StackingContext::paint(PaintContext& context) const
auto transform_matrix = paintable_box().transform(); auto transform_matrix = paintable_box().transform();
auto transform_origin = paintable_box().transform_origin().to_type<float>(); auto transform_origin = paintable_box().transform_origin().to_type<float>();
Gfx::CompositingAndBlendingOperator compositing_and_blending_operator; Gfx::CompositingAndBlendingOperator compositing_and_blending_operator = mix_blend_mode_to_compositing_and_blending_operator(paintable_box().computed_values().mix_blend_mode());
switch (paintable_box().computed_values().mix_blend_mode()) {
#undef __ENUMERATE
#define __ENUMERATE(mix_blend_mode) \
case CSS::MixBlendMode::mix_blend_mode: \
compositing_and_blending_operator = Gfx::CompositingAndBlendingOperator::mix_blend_mode; \
break;
ENUMERATE_MIX_BLEND_MODES(__ENUMERATE)
#undef __ENUMERATE
}
DisplayListRecorder::PushStackingContextParams push_stacking_context_params { DisplayListRecorder::PushStackingContextParams push_stacking_context_params {
.opacity = opacity, .opacity = opacity,

20
Libraries/LibWeb/Painting/StackingContext.h
View file

@ -12,26 +12,6 @@
namespace Web::Painting { namespace Web::Painting {
#define ENUMERATE_MIX_BLEND_MODES(E) \
E(Normal) \
E(Multiply) \
E(Screen) \
E(Overlay) \
E(Darken) \
E(Lighten) \
E(ColorDodge) \
E(ColorBurn) \
E(HardLight) \
E(SoftLight) \
E(Difference) \
E(Exclusion) \
E(Hue) \
E(Saturation) \
E(Color) \
E(Luminosity) \
E(PlusDarker) \
E(PlusLighter)
class StackingContext { class StackingContext {
friend class ViewportPaintable; friend class ViewportPaintable;

23
Tests/LibWeb/Ref/expected/wpt-import/css/compositing/background-blending/reference/background-blend-mode-gradient-image-ref.html Normal file
View file

@ -0,0 +1,23 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Reftest Reference</title>
<link rel="author" title="Mirela Budăeș" href="mailto:mbudaes@adobe.com">
<style>
div {
margin: 5px;
width: 130px;
height: 130px;
background: black;/*rgb(0,0,0);*/
display: block;
float: left;
}
</style>
</head>
<body>
<p>Test passes if there is no red square on the screen. <br>
You should see a black square.</p>
<div></div>
</body>
</html>

33
Tests/LibWeb/Ref/input/wpt-import/css/compositing/background-blending/background-blend-mode-gradient-image.html Normal file
View file

@ -0,0 +1,33 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Test: blending between multiple backgrounds (gradient and image) using background-blend-mode</title>
<link rel="author" title="Mirela Budăeș" href="mailto:mbudaes@adobe.com">
<link rel="reviewer" title="Mihai Balan" href="mailto:mibalan@adobe.com">
<link rel="reviewer" title="Rik Cabanier" href="mailto:cabanier@adobe.com">
<link rel="help" href="https://drafts.fxtf.org/compositing-1/#background-blend-mode">
<meta name="assert" content="Test checks that setting background-blend-mode property for an element with two background layers (a gradient and a png image) results in blending between the two layers.">
<link rel="match" href="../../../../../expected/wpt-import/css/compositing/background-blending/reference/background-blend-mode-gradient-image-ref.html">
<style>
div {
margin: 5px;
width: 130px;
height: 130px;
background: url('support/red.png') no-repeat 0 0 /100% 100%, linear-gradient(to right, lime 50%, blue 51%);
/*lime: rgb(0,255,0);
blue: rgb(0,0,255);*/
display: block;
float: left;
background-blend-mode: multiply, normal;
}
</style>
</head>
<body>
<p>Test passes if there is no red square on the screen. <br>
You should see a black square.</p>
<div></div>
<!-- FIXME: Workaround to ensure CSS background-image is loaded before taking screenshot: https://github.com/LadybirdBrowser/ladybird/issues/3448 -->
<img style="display: none;" src="support/red.png" />
</body>
</html>

BIN
Tests/LibWeb/Ref/input/wpt-import/css/compositing/background-blending/support/red.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.6 KiB

2
Tests/LibWeb/Screenshot/expected/css-background-clip-text-ref.html
View file

@ -16,4 +16,4 @@
3. Right click > "Take Full Screenshot" 3. Right click > "Take Full Screenshot"
4. Update the image below: 4. Update the image below:
--> -->
<img src="../images/css-background-clip-text.png"> <img src="../images/css-background-clip-text-ref.png">

BIN
Tests/LibWeb/Screenshot/images/border-radius-ref.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 330 KiB

After

Width:  |  Height:  |  Size: 382 KiB

Before After
Before After

BIN
Tests/LibWeb/Screenshot/images/clip-path-basic-shapes-ref.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 29 KiB

After

Width:  |  Height:  |  Size: 29 KiB

Before After
Before After

BIN
Tests/LibWeb/Screenshot/images/clip-path-polygon-ref.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.3 KiB

After

Width:  |  Height:  |  Size: 3.3 KiB

Before After
Before After

BIN
Tests/LibWeb/Screenshot/images/clip-path-transformed-ref.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 63 KiB

After

Width:  |  Height:  |  Size: 64 KiB

Before After
Before After

BIN
Tests/LibWeb/Screenshot/images/css-background-clip-text-ref.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 272 KiB

BIN
Tests/LibWeb/Screenshot/images/css-background-clip-text.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 238 KiB

BIN
Tests/LibWeb/Screenshot/images/css-backgrounds-ref.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 90 KiB

After

Width:  |  Height:  |  Size: 108 KiB

Before After
Before After

BIN
Tests/LibWeb/Screenshot/images/css-gradients-ref.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 257 KiB

After

Width:  |  Height:  |  Size: 346 KiB

Before After
Before After

BIN
Tests/LibWeb/Screenshot/images/inline-node-ref.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 18 KiB

Before After
Before After

BIN
Tests/LibWeb/Screenshot/images/nested-boxes-with-hidden-overflow-and-border-radius-ref.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.9 KiB

After

Width:  |  Height:  |  Size: 7.9 KiB

Before After
Before After

311
Tests/LibWeb/Text/expected/css/CSSStyleDeclaration-has-indexed-property-getter.txt
View file

@ -77,161 +77,162 @@ All properties associated with getComputedStyle(document.body):
"74": "aspect-ratio", "74": "aspect-ratio",
"75": "backdrop-filter", "75": "backdrop-filter",
"76": "background-attachment", "76": "background-attachment",
"77": "background-clip", "77": "background-blend-mode",
"78": "background-color", "78": "background-clip",
"79": "background-image", "79": "background-color",
"80": "background-origin", "80": "background-image",
"81": "background-position-x", "81": "background-origin",
"82": "background-position-y", "82": "background-position-x",
"83": "background-repeat", "83": "background-position-y",
"84": "background-size", "84": "background-repeat",
"85": "block-size", "85": "background-size",
"86": "border-block-end-color", "86": "block-size",
"87": "border-block-end-style", "87": "border-block-end-color",
"88": "border-block-end-width", "88": "border-block-end-style",
"89": "border-block-start-color", "89": "border-block-end-width",
"90": "border-block-start-style", "90": "border-block-start-color",
"91": "border-block-start-width", "91": "border-block-start-style",
"92": "border-bottom-color", "92": "border-block-start-width",
"93": "border-bottom-left-radius", "93": "border-bottom-color",
"94": "border-bottom-right-radius", "94": "border-bottom-left-radius",
"95": "border-bottom-style", "95": "border-bottom-right-radius",
"96": "border-bottom-width", "96": "border-bottom-style",
"97": "border-inline-end-color", "97": "border-bottom-width",
"98": "border-inline-end-style", "98": "border-inline-end-color",
"99": "border-inline-end-width", "99": "border-inline-end-style",
"100": "border-inline-start-color", "100": "border-inline-end-width",
"101": "border-inline-start-style", "101": "border-inline-start-color",
"102": "border-inline-start-width", "102": "border-inline-start-style",
"103": "border-left-color", "103": "border-inline-start-width",
"104": "border-left-style", "104": "border-left-color",
"105": "border-left-width", "105": "border-left-style",
"106": "border-right-color", "106": "border-left-width",
"107": "border-right-style", "107": "border-right-color",
"108": "border-right-width", "108": "border-right-style",
"109": "border-top-color", "109": "border-right-width",
"110": "border-top-left-radius", "110": "border-top-color",
"111": "border-top-right-radius", "111": "border-top-left-radius",
"112": "border-top-style", "112": "border-top-right-radius",
"113": "border-top-width", "113": "border-top-style",
"114": "bottom", "114": "border-top-width",
"115": "box-shadow", "115": "bottom",
"116": "box-sizing", "116": "box-shadow",
"117": "clear", "117": "box-sizing",
"118": "clip", "118": "clear",
"119": "clip-path", "119": "clip",
"120": "column-count", "120": "clip-path",
"121": "column-gap", "121": "column-count",
"122": "column-span", "122": "column-gap",
"123": "column-width", "123": "column-span",
"124": "contain", "124": "column-width",
"125": "content", "125": "contain",
"126": "content-visibility", "126": "content",
"127": "counter-increment", "127": "content-visibility",
"128": "counter-reset", "128": "counter-increment",
"129": "counter-set", "129": "counter-reset",
"130": "cx", "130": "counter-set",
"131": "cy", "131": "cx",
"132": "display", "132": "cy",
"133": "filter", "133": "display",
"134": "flex-basis", "134": "filter",
"135": "flex-direction", "135": "flex-basis",
"136": "flex-grow", "136": "flex-direction",
"137": "flex-shrink", "137": "flex-grow",
"138": "flex-wrap", "138": "flex-shrink",
"139": "float", "139": "flex-wrap",
"140": "grid-auto-columns", "140": "float",
"141": "grid-auto-flow", "141": "grid-auto-columns",
"142": "grid-auto-rows", "142": "grid-auto-flow",
"143": "grid-column-end", "143": "grid-auto-rows",
"144": "grid-column-start", "144": "grid-column-end",
"145": "grid-row-end", "145": "grid-column-start",
"146": "grid-row-start", "146": "grid-row-end",
"147": "grid-template-areas", "147": "grid-row-start",
"148": "grid-template-columns", "148": "grid-template-areas",
"149": "grid-template-rows", "149": "grid-template-columns",
"150": "height", "150": "grid-template-rows",
"151": "inline-size", "151": "height",
"152": "inset-block-end", "152": "inline-size",
"153": "inset-block-start", "153": "inset-block-end",
"154": "inset-inline-end", "154": "inset-block-start",
"155": "inset-inline-start", "155": "inset-inline-end",
"156": "isolation", "156": "inset-inline-start",
"157": "justify-content", "157": "isolation",
"158": "justify-items", "158": "justify-content",
"159": "justify-self", "159": "justify-items",
"160": "left", "160": "justify-self",
"161": "margin-block-end", "161": "left",
"162": "margin-block-start", "162": "margin-block-end",
"163": "margin-bottom", "163": "margin-block-start",
"164": "margin-inline-end", "164": "margin-bottom",
"165": "margin-inline-start", "165": "margin-inline-end",
"166": "margin-left", "166": "margin-inline-start",
"167": "margin-right", "167": "margin-left",
"168": "margin-top", "168": "margin-right",
"169": "mask-image", "169": "margin-top",
"170": "mask-type", "170": "mask-image",
"171": "max-block-size", "171": "mask-type",
"172": "max-height", "172": "max-block-size",
"173": "max-inline-size", "173": "max-height",
"174": "max-width", "174": "max-inline-size",
"175": "min-block-size", "175": "max-width",
"176": "min-height", "176": "min-block-size",
"177": "min-inline-size", "177": "min-height",
"178": "min-width", "178": "min-inline-size",
"179": "mix-blend-mode", "179": "min-width",
"180": "object-fit", "180": "mix-blend-mode",
"181": "object-position", "181": "object-fit",
"182": "opacity", "182": "object-position",
"183": "order", "183": "opacity",
"184": "outline-color", "184": "order",
"185": "outline-offset", "185": "outline-color",
"186": "outline-style", "186": "outline-offset",
"187": "outline-width", "187": "outline-style",
"188": "overflow-x", "188": "outline-width",
"189": "overflow-y", "189": "overflow-x",
"190": "padding-block-end", "190": "overflow-y",
"191": "padding-block-start", "191": "padding-block-end",
"192": "padding-bottom", "192": "padding-block-start",
"193": "padding-inline-end", "193": "padding-bottom",
"194": "padding-inline-start", "194": "padding-inline-end",
"195": "padding-left", "195": "padding-inline-start",
"196": "padding-right", "196": "padding-left",
"197": "padding-top", "197": "padding-right",
"198": "position", "198": "padding-top",
"199": "r", "199": "position",
"200": "right", "200": "r",
"201": "rotate", "201": "right",
"202": "row-gap", "202": "rotate",
"203": "rx", "203": "row-gap",
"204": "ry", "204": "rx",
"205": "scale", "205": "ry",
"206": "scrollbar-gutter", "206": "scale",
"207": "scrollbar-width", "207": "scrollbar-gutter",
"208": "stop-color", "208": "scrollbar-width",
"209": "stop-opacity", "209": "stop-color",
"210": "table-layout", "210": "stop-opacity",
"211": "text-decoration-color", "211": "table-layout",
"212": "text-decoration-style", "212": "text-decoration-color",
"213": "text-decoration-thickness", "213": "text-decoration-style",
"214": "text-overflow", "214": "text-decoration-thickness",
"215": "top", "215": "text-overflow",
"216": "transform", "216": "top",
"217": "transform-box", "217": "transform",
"218": "transform-origin", "218": "transform-box",
"219": "transition-delay", "219": "transform-origin",
"220": "transition-duration", "220": "transition-delay",
"221": "transition-property", "221": "transition-duration",
"222": "transition-timing-function", "222": "transition-property",
"223": "translate", "223": "transition-timing-function",
"224": "unicode-bidi", "224": "translate",
"225": "user-select", "225": "unicode-bidi",
"226": "vertical-align", "226": "user-select",
"227": "view-transition-name", "227": "vertical-align",
"228": "width", "228": "view-transition-name",
"229": "x", "229": "width",
"230": "y", "230": "x",
"231": "z-index" "231": "y",
"232": "z-index"
} }
All properties associated with document.body.style by default: All properties associated with document.body.style by default:
{} {}

2
Tests/LibWeb/Text/expected/css/CSSStyleProperties-all-supported-properties-and-default-values.txt
View file

@ -162,6 +162,8 @@ All supported properties and their default values exposed from CSSStylePropertie
'background': 'rgba(0, 0, 0, 0) none 0% 0% auto auto repeat scroll padding-box border-box' 'background': 'rgba(0, 0, 0, 0) none 0% 0% auto auto repeat scroll padding-box border-box'
'backgroundAttachment': 'scroll' 'backgroundAttachment': 'scroll'
'background-attachment': 'scroll' 'background-attachment': 'scroll'
'backgroundBlendMode': 'normal'
'background-blend-mode': 'normal'
'backgroundClip': 'border-box' 'backgroundClip': 'border-box'
'background-clip': 'border-box' 'background-clip': 'border-box'
'backgroundColor': 'rgba(0, 0, 0, 0)' 'backgroundColor': 'rgba(0, 0, 0, 0)'

5
Tests/LibWeb/Text/expected/css/getComputedStyle-print-all.txt
View file

@ -75,6 +75,7 @@ appearance: none
aspect-ratio: auto aspect-ratio: auto
backdrop-filter: none backdrop-filter: none
background-attachment: scroll background-attachment: scroll
background-blend-mode: normal
background-clip: border-box background-clip: border-box
background-color: rgba(0, 0, 0, 0) background-color: rgba(0, 0, 0, 0)
background-image: none background-image: none
@ -83,7 +84,7 @@ background-position-x: 0%
background-position-y: 0% background-position-y: 0%
background-repeat: repeat background-repeat: repeat
background-size: auto auto background-size: auto auto
block-size: 1190px block-size: 1204px
border-block-end-color: rgb(0, 0, 0) border-block-end-color: rgb(0, 0, 0)
border-block-end-style: none border-block-end-style: none
border-block-end-width: medium border-block-end-width: medium
@ -148,7 +149,7 @@ grid-row-start: auto
grid-template-areas: none grid-template-areas: none
grid-template-columns: none grid-template-columns: none
grid-template-rows: none grid-template-rows: none
height: 2100px height: 2114px
inline-size: 784px inline-size: 784px
inset-block-end: auto inset-block-end: auto
inset-block-start: auto inset-block-start: auto