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/CSS: Resolve used value for the inline-size property

Browse source
This commit is contained in:
Tim Ledbetter 2025-03-09 20:28:59 +00:00 • committed by Sam Atkins
parent 1739e2851d
commit 53bf0ef225
Notes: github-actions[bot] 2025-03-10 13:02:08 +00:00
5 changed files with 67 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -243,7 +243,7 @@ RefPtr<CSSStyleValue const> ResolvedCSSStyleDeclaration::style_value_for_propert
// -> block-size
// -> height
// FIXME: -> inline-size
// -> inline-size
// -> margin-block-end
// -> margin-block-start
// -> margin-bottom
@ -277,6 +277,13 @@ RefPtr<CSSStyleValue const> ResolvedCSSStyleDeclaration::style_value_for_propert
return style_value_for_size(Size::make_px(maybe_used_height.release_value()));
return style_value_for_size(layout_node.computed_values().height());
}
case PropertyID::InlineSize: {
auto writing_mode = layout_node.computed_values().writing_mode();
auto is_vertically_oriented = first_is_one_of(writing_mode, WritingMode::VerticalLr, WritingMode::VerticalRl);
if (is_vertically_oriented)
return style_value_for_property(layout_node, PropertyID::Height);
return style_value_for_property(layout_node, PropertyID::Width);
}
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()));

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

@ -374,8 +374,8 @@ All supported properties and their default values exposed from CSSStyleDeclarati
'height': '0px'
'imageRendering': 'auto'
'image-rendering': 'auto'
'inlineSize': 'auto'
'inline-size': 'auto'
'inlineSize': '284px'
'inline-size': '284px'
'inset': 'auto auto auto auto'
'insetBlock': 'auto auto auto auto'
'inset-block': 'auto auto auto auto'

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

@ -137,7 +137,7 @@ grid-template-areas: none
grid-template-columns: auto
grid-template-rows: auto
height: 1932px
inline-size: auto
inline-size: 784px
inset-block-end: auto
inset-block-start: auto
inset-inline-end: auto

12
Tests/LibWeb/Text/expected/wpt-import/css/css-logical/parsing/inline-size-computed.txt Normal file
View file

@ -0,0 +1,12 @@
Harness status: OK
Found 7 tests
7 Pass
Pass Property inline-size value 'auto'
Pass Property inline-size value '10px'
Pass Property inline-size value '20%'
Pass Property inline-size value 'calc(0.5em + 10px)'
Pass Property inline-size value 'calc(-0.5em + 10px)'
Pass Property inline-size value 'min-content'
Pass Property inline-size value 'max-content'

44
Tests/LibWeb/Text/input/wpt-import/css/css-logical/parsing/inline-size-computed.html Normal file
View file

@ -0,0 +1,44 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Logical Properties and Values: getComputedStyle().inlineSize</title>
<link rel="help" href="https://drafts.csswg.org/css-logical-1/#dimension-properties">
<meta name="assert" content="inline-size computed value is an absolute length.">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../css/support/computed-testcommon.js"></script>
<style>
#parent {
width: 200px;
}
#target {
width: 0px;
height: 0px;
font-size: 40px;
}
#child {
width: 60px;
}
</style>
</head>
<body>
<div id="parent">
<div id="target">
<div id="child">
</div>
</div>
</div>
<script>
test_computed_value("inline-size", "auto", "200px"); // parent width
test_computed_value("inline-size", "10px");
test_computed_value("inline-size", "20%", "40px");
test_computed_value("inline-size", "calc(0.5em + 10px)", "30px");
test_computed_value("inline-size", "calc(-0.5em + 10px)", "0px");
test_computed_value("inline-size", "min-content", "60px"); // child width
test_computed_value("inline-size", "max-content", "60px");
</script>
</body>
</html>