mirrors/ladybird
0
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-09-03 08:08:43 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 9

LibWeb: Use correct resolved type for round() CSS function

Browse source 
Function is defined as `round(<rounding-strategy>?, A, B?)`

With this change resolved type is `typeof(resolve(A))`, instead of
`typeof(A)`.

For example `round(up, 20%, 1px)` with 200px percentage basis is now
correctly resolved in 40px instead of 40%.

Progress on https://www.notion.so/ landing page.
This commit is contained in:
Aliaksandr Kalenik 2024-09-17 17:51:48 +02:00 • committed by Alexander Kalenik
commit 41e37f0079
Notes: github-actions[bot] 2024-09-17 18:03:27 +00:00
4 changed files with 43 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

15
Tests/LibWeb/Layout/expected/css-round-function-with-percentage-value.txt Normal file
View file

@ -0,0 +1,15 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x600 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x17 children: not-inline
BlockContainer <div.wrapper> at (8,8) content-size 200x17 children: not-inline
BlockContainer <div.box> at (48,8) content-size 100x17 children: inline
frag 0 from TextNode start: 0, length: 1, rect: [48,8 6.34375x17] baseline: 13.296875
"1"
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x600]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x17]
PaintableWithLines (BlockContainer<DIV>.wrapper) [8,8 200x17]
PaintableWithLines (BlockContainer<DIV>.box) [8,8 140x17]
TextPaintable (TextNode<#text>)

11
Tests/LibWeb/Layout/input/css-round-function-with-percentage-value.html Normal file
View file

@ -0,0 +1,11 @@
<style>
.wrapper {
width: 200px;
}
.box {
padding-left: round(up, 20%, 1px);
width: 100px;
background-color: magenta;
}
</style>
<div class="wrapper"><div class="box">1</div></div>

16
Userland/Libraries/LibWeb/CSS/StyleValues/CalculatedStyleValue.cpp
View file

@ -2079,7 +2079,6 @@ bool RoundCalculationNode::contains_percentage() const
CalculatedStyleValue::CalculationResult RoundCalculationNode::resolve(Optional<Length::ResolutionContext const&> context, CalculatedStyleValue::PercentageBasis const& percentage_basis) const CalculatedStyleValue::CalculationResult RoundCalculationNode::resolve(Optional<Length::ResolutionContext const&> context, CalculatedStyleValue::PercentageBasis const& percentage_basis) const
{ {
auto resolved_type = m_x->resolved_type().value();
auto node_a = m_x->resolve(context, percentage_basis); auto node_a = m_x->resolve(context, percentage_basis);
auto node_b = m_y->resolve(context, percentage_basis); auto node_b = m_y->resolve(context, percentage_basis);
@ -2089,6 +2088,8 @@ CalculatedStyleValue::CalculationResult RoundCalculationNode::resolve(Optional<L
auto upper_b = ceil(node_a_value / node_b_value) * node_b_value; auto upper_b = ceil(node_a_value / node_b_value) * node_b_value;
auto lower_b = floor(node_a_value / node_b_value) * node_b_value; auto lower_b = floor(node_a_value / node_b_value) * node_b_value;
auto resolved_type = node_a.resolved_type();
if (m_strategy == RoundingStrategy::Nearest) { if (m_strategy == RoundingStrategy::Nearest) {
auto upper_diff = fabs(upper_b - node_a_value); auto upper_diff = fabs(upper_b - node_a_value);
auto lower_diff = fabs(node_a_value - lower_b); auto lower_diff = fabs(node_a_value - lower_b);
@ -2594,6 +2595,19 @@ void CalculatedStyleValue::CalculationResult::invert()
}); });
} }
CalculatedStyleValue::ResolvedType CalculatedStyleValue::CalculationResult::resolved_type() const
{
return m_value.visit(
[](Number const&) { return ResolvedType::Number; },
[](Angle const&) { return ResolvedType::Angle; },
[](Flex const&) { return ResolvedType::Flex; },
[](Frequency const&) { return ResolvedType::Frequency; },
[](Length const&) { return ResolvedType::Length; },
[](Percentage const&) { return ResolvedType::Percentage; },
[](Resolution const&) { return ResolvedType::Resolution; },
[](Time const&) { return ResolvedType::Time; });
}
String CalculatedStyleValue::to_string() const String CalculatedStyleValue::to_string() const
{ {
// FIXME: Implement this according to https://www.w3.org/TR/css-values-4/#calc-serialize once that stabilizes. // FIXME: Implement this according to https://www.w3.org/TR/css-values-4/#calc-serialize once that stabilizes.

2
Userland/Libraries/LibWeb/CSS/StyleValues/CalculatedStyleValue.h
View file

@ -65,6 +65,8 @@ public:
Value const& value() const { return m_value; } Value const& value() const { return m_value; }
ResolvedType resolved_type() const;
[[nodiscard]] bool operator==(CalculationResult const&) const = default; [[nodiscard]] bool operator==(CalculationResult const&) const = default;
private: private: