system/serenity
system/serenity
1
0
Fork 0
mirror of https://github.com/SerenityOS/serenity synced 2024-10-06 16:09:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

LibWeb: Create EdgeStyleValue for BackgroundPositionXY with no offset

Browse source 
When specifying either `background-position-x: right` or
`background-position-y: bottom` without an offset value no
EdgeStyleValue was created.

However, the spec says the offset should be optional.

Now, if you do not provide an offset, it creates the EdgeStyleValue
with a default offset of 0 pixels.
This commit is contained in:
Alan Kemp 2023-07-09 22:49:45 +01:00 committed by Sam Atkins
parent 016b31fae2
commit 3fd870a429
4 changed files with 28 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
Base/res/html/misc/background-position-xy.html
View file

@ -15,6 +15,7 @@
<div class="example" style="background-position-x: 25%"></div>
<div class="example" style="background-position-x: 2rem"></div>
<div class="example" style="background-position-x: right 32px"></div>
<div class="example" style="background-position-x: right"></div>
<br>
<br>
<b>background-position-y</b><br>
@ -23,3 +24,4 @@
<div class="example" style="background-position-y: 25%"></div>
<div class="example" style="background-position-y: 2rem"></div>
<div class="example" style="background-position-y: bottom 32px"></div>
<div class="example" style="background-position-y: bottom"></div>

2
Tests/LibWeb/Text/expected/background-position-xy.txt Normal file
View file

@ -0,0 +1,2 @@
right 0px
bottom 0px

21
Tests/LibWeb/Text/input/background-position-xy.html Normal file
View file

@ -0,0 +1,21 @@
<script src="include.js"></script>
<script>
test(() => {
var pos_x = document.getElementById("position-x")
var pos_y = document.getElementById("position-y")
println(getComputedStyle(pos_x).backgroundPositionX)
println(getComputedStyle(pos_y).backgroundPositionY)
});
</script>
<style>
.example {
display: inline-block;
width: 200px;
height: 200px;
border: 1px solid black;
background-repeat: no-repeat;
background-size: 30px 30px;
background-image: linear-gradient(red, red);
}
</style>
<div id="position-x" class="example" style="background-position-x: right"></div><div id="position-y" class="example" style="background-position-y: bottom"></div>

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

@ -4783,7 +4783,9 @@ ErrorOr<RefPtr<StyleValue>> Parser::parse_single_background_position_x_or_y_valu
return EdgeStyleValue::create(relative_edge, *offset);
}
return nullptr;
// If no offset is provided create this element but with an offset of default value of zero
transaction.commit();
return EdgeStyleValue::create(relative_edge, Length::make_px(0));
}
ErrorOr<RefPtr<StyleValue>> Parser::parse_single_background_repeat_value(TokenStream<ComponentValue>& tokens)