mirrors/ladybird
1
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-04-21 03:55:24 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 10

LibWeb: Let getComputedStyle() show *used* values for margin/padding

Browse source 
We were incorrectly showing *computed* instead of *used* values for
margin and padding when inspected via getComputedStyle().
This commit is contained in:
Andreas Kling 2025-02-21 11:52:37 +01:00 • committed by Andreas Kling
parent cdd2ccac0b
commit a706d0ebf4
Notes: github-actions[bot] 2025-02-22 19:03:09 +00:00
5 changed files with 100 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
Libraries/LibWeb/CSS/ResolvedCSSStyleDeclaration.cpp
View file

@ -123,6 +123,22 @@ static RefPtr<CSSStyleValue const> 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<CSSStyleValue const> style_value_for_shadow(Vector<ShadowData> const& shadow_data)
{
if (shadow_data.is_empty())
@ -252,36 +268,68 @@ RefPtr<CSSStyleValue const> 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(); });

16
Tests/LibWeb/Text/expected/css/calc-coverage.txt
View file

@ -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%'

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

@ -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

11
Tests/LibWeb/Text/expected/wpt-import/css/CSS2/normal-flow/auto-margins-used-values.txt Normal file
View file

@ -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

31
Tests/LibWeb/Text/input/wpt-import/css/CSS2/normal-flow/auto-margins-used-values.html Normal file
View file

@ -0,0 +1,31 @@
<!DOCTYPE html>
<link rel="help" href="https://www.w3.org/TR/CSS22/visudet.html#blockwidth">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../resources/check-layout-th.js"></script>
<style>
.container {
display: flow-root;
width: 100px;
padding: 5px;
box-sizing: border-box;
}
.box {
display: flow-root;
width: 40px;
height: 10px;
background: lime;
}
</style>
<body onload="checkLayout('.box')">
<div class="container">
<div class="box" style="margin: auto;" data-expected-margin-left="25" data-expected-margin-right="25"></div>
<div class="box" style="margin-left: auto;" data-expected-margin-left="50" data-expected-margin-right="0"></div>
<div class="box" style="margin-right: auto;" data-expected-margin-left="0" data-expected-margin-right="50"></div>
</div>
<div class="container" style="direction: rtl;">
<div class="box" style="margin: auto;" data-expected-margin-left="25" data-expected-margin-right="25"></div>
<div class="box" style="margin-left: auto;" data-expected-margin-left="50" data-expected-margin-right="0"></div>
<div class="box" style="margin-right: auto;" data-expected-margin-left="0" data-expected-margin-right="50"></div>
</div>
</body>