diff --git a/Libraries/LibWeb/CSS/ResolvedCSSStyleDeclaration.cpp b/Libraries/LibWeb/CSS/ResolvedCSSStyleDeclaration.cpp index 0e7b5f6badd..8c71ffa138a 100644 --- a/Libraries/LibWeb/CSS/ResolvedCSSStyleDeclaration.cpp +++ b/Libraries/LibWeb/CSS/ResolvedCSSStyleDeclaration.cpp @@ -123,6 +123,22 @@ static RefPtr style_value_for_length_box_logical_side(Layou VERIFY_NOT_REACHED(); } +static CSSPixels pixels_for_pixel_box_logical_side(Layout::NodeWithStyle const&, Painting::PixelBox const& box, LogicalSide logical_side) +{ + // FIXME: Actually determine the logical sides based on layout_node's writing-mode and direction. + switch (logical_side) { + case LogicalSide::BlockStart: + return box.top; + case LogicalSide::BlockEnd: + return box.bottom; + case LogicalSide::InlineStart: + return box.left; + case LogicalSide::InlineEnd: + return box.right; + } + VERIFY_NOT_REACHED(); +} + static RefPtr style_value_for_shadow(Vector const& shadow_data) { if (shadow_data.is_empty()) @@ -252,36 +268,68 @@ RefPtr ResolvedCSSStyleDeclaration::style_value_for_propert return style_value_for_size(layout_node.computed_values().height()); } case PropertyID::MarginBlockEnd: + if (auto maybe_used_value = used_value_for_property([&](auto const& paintable_box) { return pixels_for_pixel_box_logical_side(layout_node, paintable_box.box_model().margin, LogicalSide::BlockEnd); }); maybe_used_value.has_value()) + return LengthStyleValue::create(Length::make_px(maybe_used_value.release_value())); return style_value_for_length_box_logical_side(layout_node, layout_node.computed_values().margin(), LogicalSide::BlockEnd); case PropertyID::MarginBlockStart: + if (auto maybe_used_value = used_value_for_property([&](auto const& paintable_box) { return pixels_for_pixel_box_logical_side(layout_node, paintable_box.box_model().margin, LogicalSide::BlockStart); }); maybe_used_value.has_value()) + return LengthStyleValue::create(Length::make_px(maybe_used_value.release_value())); return style_value_for_length_box_logical_side(layout_node, layout_node.computed_values().margin(), LogicalSide::BlockStart); case PropertyID::MarginBottom: + if (auto maybe_used_value = used_value_for_property([](auto const& paintable_box) { return paintable_box.box_model().margin.bottom; }); maybe_used_value.has_value()) + return LengthStyleValue::create(Length::make_px(maybe_used_value.release_value())); return style_value_for_length_percentage(layout_node.computed_values().margin().bottom()); case PropertyID::MarginInlineEnd: + if (auto maybe_used_value = used_value_for_property([&](auto const& paintable_box) { return pixels_for_pixel_box_logical_side(layout_node, paintable_box.box_model().margin, LogicalSide::InlineEnd); }); maybe_used_value.has_value()) + return LengthStyleValue::create(Length::make_px(maybe_used_value.release_value())); return style_value_for_length_box_logical_side(layout_node, layout_node.computed_values().margin(), LogicalSide::InlineEnd); case PropertyID::MarginInlineStart: + if (auto maybe_used_value = used_value_for_property([&](auto const& paintable_box) { return pixels_for_pixel_box_logical_side(layout_node, paintable_box.box_model().margin, LogicalSide::InlineStart); }); maybe_used_value.has_value()) + return LengthStyleValue::create(Length::make_px(maybe_used_value.release_value())); return style_value_for_length_box_logical_side(layout_node, layout_node.computed_values().margin(), LogicalSide::InlineStart); case PropertyID::MarginLeft: + if (auto maybe_used_value = used_value_for_property([](auto const& paintable_box) { return paintable_box.box_model().margin.left; }); maybe_used_value.has_value()) + return LengthStyleValue::create(Length::make_px(maybe_used_value.release_value())); return style_value_for_length_percentage(layout_node.computed_values().margin().left()); case PropertyID::MarginRight: + if (auto maybe_used_value = used_value_for_property([](auto const& paintable_box) { return paintable_box.box_model().margin.right; }); maybe_used_value.has_value()) + return LengthStyleValue::create(Length::make_px(maybe_used_value.release_value())); return style_value_for_length_percentage(layout_node.computed_values().margin().right()); case PropertyID::MarginTop: + if (auto maybe_used_value = used_value_for_property([](auto const& paintable_box) { return paintable_box.box_model().margin.top; }); maybe_used_value.has_value()) + return LengthStyleValue::create(Length::make_px(maybe_used_value.release_value())); return style_value_for_length_percentage(layout_node.computed_values().margin().top()); case PropertyID::PaddingBlockEnd: + if (auto maybe_used_value = used_value_for_property([&](auto const& paintable_box) { return pixels_for_pixel_box_logical_side(layout_node, paintable_box.box_model().padding, LogicalSide::BlockEnd); }); maybe_used_value.has_value()) + return LengthStyleValue::create(Length::make_px(maybe_used_value.release_value())); return style_value_for_length_box_logical_side(layout_node, layout_node.computed_values().padding(), LogicalSide::BlockEnd); case PropertyID::PaddingBlockStart: + if (auto maybe_used_value = used_value_for_property([&](auto const& paintable_box) { return pixels_for_pixel_box_logical_side(layout_node, paintable_box.box_model().padding, LogicalSide::BlockStart); }); maybe_used_value.has_value()) + return LengthStyleValue::create(Length::make_px(maybe_used_value.release_value())); return style_value_for_length_box_logical_side(layout_node, layout_node.computed_values().padding(), LogicalSide::BlockStart); case PropertyID::PaddingBottom: + if (auto maybe_used_value = used_value_for_property([](auto const& paintable_box) { return paintable_box.box_model().padding.bottom; }); maybe_used_value.has_value()) + return LengthStyleValue::create(Length::make_px(maybe_used_value.release_value())); return style_value_for_length_percentage(layout_node.computed_values().padding().bottom()); case PropertyID::PaddingInlineEnd: + if (auto maybe_used_value = used_value_for_property([&](auto const& paintable_box) { return pixels_for_pixel_box_logical_side(layout_node, paintable_box.box_model().padding, LogicalSide::InlineEnd); }); maybe_used_value.has_value()) + return LengthStyleValue::create(Length::make_px(maybe_used_value.release_value())); return style_value_for_length_box_logical_side(layout_node, layout_node.computed_values().padding(), LogicalSide::InlineEnd); case PropertyID::PaddingInlineStart: + if (auto maybe_used_value = used_value_for_property([&](auto const& paintable_box) { return pixels_for_pixel_box_logical_side(layout_node, paintable_box.box_model().padding, LogicalSide::InlineStart); }); maybe_used_value.has_value()) + return LengthStyleValue::create(Length::make_px(maybe_used_value.release_value())); return style_value_for_length_box_logical_side(layout_node, layout_node.computed_values().padding(), LogicalSide::InlineStart); case PropertyID::PaddingLeft: + if (auto maybe_used_value = used_value_for_property([](auto const& paintable_box) { return paintable_box.box_model().padding.left; }); maybe_used_value.has_value()) + return LengthStyleValue::create(Length::make_px(maybe_used_value.release_value())); return style_value_for_length_percentage(layout_node.computed_values().padding().left()); case PropertyID::PaddingRight: + if (auto maybe_used_value = used_value_for_property([](auto const& paintable_box) { return paintable_box.box_model().padding.right; }); maybe_used_value.has_value()) + return LengthStyleValue::create(Length::make_px(maybe_used_value.release_value())); return style_value_for_length_percentage(layout_node.computed_values().padding().right()); case PropertyID::PaddingTop: + if (auto maybe_used_value = used_value_for_property([](auto const& paintable_box) { return paintable_box.box_model().padding.top; }); maybe_used_value.has_value()) + return LengthStyleValue::create(Length::make_px(maybe_used_value.release_value())); return style_value_for_length_percentage(layout_node.computed_values().padding().top()); case PropertyID::Width: { auto maybe_used_width = used_value_for_property([](auto const& paintable_box) { return paintable_box.content_width(); }); diff --git a/Tests/LibWeb/Text/expected/css/calc-coverage.txt b/Tests/LibWeb/Text/expected/css/calc-coverage.txt index 185ebf9bafb..acd742a0298 100644 --- a/Tests/LibWeb/Text/expected/css/calc-coverage.txt +++ b/Tests/LibWeb/Text/expected/css/calc-coverage.txt @@ -94,12 +94,12 @@ line-height: 'calc(2)' -> '32px' line-height: 'calc(2 * var(--n))' -> '64px' margin-bottom: 'calc(2px)' -> '2px' margin-bottom: 'calc(2px * var(--n))' -> '4px' -margin-left: 'calc(2%)' -> '2%' -margin-left: 'calc(2% * var(--n))' -> 'calc(2% * 2)' +margin-left: 'calc(2%)' -> '15.67188px' +margin-left: 'calc(2% * var(--n))' -> '31.375px' margin-right: 'calc(2px)' -> '2px' margin-right: 'calc(2px * var(--n))' -> '4px' -margin-top: 'calc(2%)' -> '2%' -margin-top: 'calc(2% * var(--n))' -> 'calc(2% * 2)' +margin-top: 'calc(2%)' -> '15.67188px' +margin-top: 'calc(2% * var(--n))' -> '31.375px' math-depth: 'calc(2)' -> '2' math-depth: 'calc(2 * var(--n))' -> '4' max-height: 'calc(2px)' -> '2px' @@ -120,12 +120,12 @@ outline-width: 'calc(2px)' -> '2px' outline-width: 'calc(2px * var(--n))' -> '4px' padding-bottom: 'calc(2px)' -> '2px' padding-bottom: 'calc(2px * var(--n))' -> '4px' -padding-left: 'calc(2%)' -> '2%' -padding-left: 'calc(2% * var(--n))' -> 'calc(2% * 2)' +padding-left: 'calc(2%)' -> '15.67188px' +padding-left: 'calc(2% * var(--n))' -> '31.375px' padding-right: 'calc(2px)' -> '2px' padding-right: 'calc(2px * var(--n))' -> '4px' -padding-top: 'calc(2%)' -> '2%' -padding-top: 'calc(2% * var(--n))' -> 'calc(2% * 2)' +padding-top: 'calc(2%)' -> '15.67188px' +padding-top: 'calc(2% * var(--n))' -> '31.375px' r: 'calc(2px)' -> '2px' r: 'calc(2px * var(--n))' -> '4px' right: 'calc(2%)' -> '2%' diff --git a/Tests/LibWeb/Text/expected/css/getComputedStyle-print-all.txt b/Tests/LibWeb/Text/expected/css/getComputedStyle-print-all.txt index e63b0a92240..9417be74338 100644 --- a/Tests/LibWeb/Text/expected/css/getComputedStyle-print-all.txt +++ b/Tests/LibWeb/Text/expected/css/getComputedStyle-print-all.txt @@ -146,9 +146,9 @@ justify-content: normal justify-items: legacy justify-self: auto left: auto -margin-block-end: 8px +margin-block-end: 16px margin-block-start: 8px -margin-bottom: 8px +margin-bottom: 16px margin-inline-end: 8px margin-inline-start: 8px margin-left: 8px diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/CSS2/normal-flow/auto-margins-used-values.txt b/Tests/LibWeb/Text/expected/wpt-import/css/CSS2/normal-flow/auto-margins-used-values.txt new file mode 100644 index 00000000000..cc19824c9df --- /dev/null +++ b/Tests/LibWeb/Text/expected/wpt-import/css/CSS2/normal-flow/auto-margins-used-values.txt @@ -0,0 +1,11 @@ +Harness status: OK + +Found 6 tests + +6 Pass +Pass .box 1 +Pass .box 2 +Pass .box 3 +Pass .box 4 +Pass .box 5 +Pass .box 6 \ No newline at end of file diff --git a/Tests/LibWeb/Text/input/wpt-import/css/CSS2/normal-flow/auto-margins-used-values.html b/Tests/LibWeb/Text/input/wpt-import/css/CSS2/normal-flow/auto-margins-used-values.html new file mode 100644 index 00000000000..021b3a1a454 --- /dev/null +++ b/Tests/LibWeb/Text/input/wpt-import/css/CSS2/normal-flow/auto-margins-used-values.html @@ -0,0 +1,31 @@ + + + + + + + +
+
+
+
+
+
+
+
+
+
+