system/serenity
system/serenity
1
0
Fork 0
mirror of https://github.com/SerenityOS/serenity synced 2024-07-22 02:26:11 +00:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

LibWeb: Allow calculated values for background-size dimensions

Browse source 
This fixes the sizing of the arrow icons displayed to the left of
parent sections on a table of contents on Wikipedia articles, which
are sized using the equation `calc(max(0.75em, 12px))`. Now, the icon
will not expand past the edges of the box they are within, avoiding
clipping the edges of the arrows.
This commit is contained in:
Zaggy1024 2023-09-11 21:36:18 -05:00 committed by Andreas Kling
parent bdb311a434
commit 4cc3c41269
4 changed files with 31 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
Tests/LibWeb/Ref/assets/2x2checkerboard.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 129 B

15
Tests/LibWeb/Ref/background-size-calc.html Normal file
View file

@ -0,0 +1,15 @@
<!DOCTYPE html>
<html>
<head>
<link rel="match" href="reference/background-size-calc-ref.html" />
<style>
span {
display: inline-block;
min-width: 12px;
min-height: 12px;
background-image: url("assets/2x2checkerboard.png");
background-size: calc(max(0.75em, 12px));
}
</style>
</head>
<body><span></span><img src="assets/2x2checkerboard.png">

14
Tests/LibWeb/Ref/reference/background-size-calc-ref.html Normal file
View file

@ -0,0 +1,14 @@
<!DOCTYPE html>
<html>
<head>
<style>
span {
display: inline-block;
min-width: 12px;
min-height: 12px;
background-image: url("../assets/2x2checkerboard.png");
background-size: calc(max(0.75em, 12px));
}
</style>
</head>
<body><span></span><img src="../assets/2x2checkerboard.png">

2
Userland/Libraries/LibWeb/CSS/Parser/Parser.cpp
View file

@ -3169,6 +3169,8 @@ RefPtr<StyleValue> Parser::parse_single_background_size_value(TokenStream<Compon
return LengthPercentage { style_value.as_percentage().percentage() };
if (style_value.is_length())
return LengthPercentage { style_value.as_length().length() };
if (style_value.is_calculated())
return LengthPercentage { style_value.as_calculated() };
return {};
};