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 block-size property

Browse source
This commit is contained in:
Tim Ledbetter 2025-03-09 20:25:34 +00:00 • committed by Sam Atkins
parent 41927ad9d1
commit 1739e2851d
Notes: github-actions[bot] 2025-03-10 13:02:15 +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

@ -241,7 +241,7 @@ RefPtr<CSSStyleValue const> ResolvedCSSStyleDeclaration::style_value_for_propert
return LengthStyleValue::create(Length::make_px(layout_node.computed_values().line_height()));
}
// FIXME: -> block-size
// -> block-size
// -> height
// FIXME: -> inline-size
// -> margin-block-end
@ -264,6 +264,13 @@ RefPtr<CSSStyleValue const> ResolvedCSSStyleDeclaration::style_value_for_propert
// If the property applies to the element or pseudo-element and the resolved value of the
// display property is not none or contents, then the resolved value is the used value.
// Otherwise the resolved value is the computed value.
case PropertyID::BlockSize: {
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::Width);
return style_value_for_property(layout_node, PropertyID::Height);
}
case PropertyID::Height: {
auto maybe_used_height = used_value_for_property([](auto const& paintable_box) { return paintable_box.content_height(); });
if (maybe_used_height.has_value())

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

@ -183,8 +183,8 @@ All supported properties and their default values exposed from CSSStyleDeclarati
'background-repeat': 'repeat'
'backgroundSize': 'auto auto'
'background-size': 'auto auto'
'blockSize': 'auto'
'block-size': 'auto'
'blockSize': '0px'
'block-size': '0px'
'border': 'medium none rgb(0, 0, 0)'
'borderBottom': 'medium none rgb(0, 0, 0)'
'border-bottom': 'medium none rgb(0, 0, 0)'

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

@ -83,7 +83,7 @@ background-position-x: 0%
background-position-y: 0%
background-repeat: repeat
background-size: auto auto
block-size: auto
block-size: 1190px
border-bottom-color: rgb(0, 0, 0)
border-bottom-left-radius: 0px
border-bottom-right-radius: 0px

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

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

44
Tests/LibWeb/Text/input/wpt-import/css/css-logical/parsing/block-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().blockSize</title>
<link rel="help" href="https://drafts.csswg.org/css-logical-1/#dimension-properties">
<meta name="assert" content="block-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 {
height: 300px;
}
#target {
width: 0px;
height: 0px;
font-size: 40px;
}
#child {
height: 80px;
}
</style>
</head>
<body>
<div id="parent">
<div id="target">
<div id="child">
</div>
</div>
</div>
<script>
test_computed_value("block-size", "auto", "80px"); // child height
test_computed_value("block-size", "10px");
test_computed_value("block-size", "20%", "60px");
test_computed_value("block-size", "calc(0.5em + 10px)", "30px");
test_computed_value("block-size", "calc(-0.5em + 10px)", "0px");
test_computed_value("block-size", "min-content", "80px"); // child height
test_computed_value("block-size", "max-content", "80px");
</script>
</body>
</html>