LibWeb: Fix off-by-one in CSS calc() "negate" operation
When negating a number, we should subtract it from 0, not 1. :^)
This commit is contained in:
parent
587c44cfbb
commit
e81d4ca1ac
Notes:
sideshowbarker
2024-07-17 04:41:05 +09:00
Author: https://github.com/awesomekling Commit: https://github.com/SerenityOS/serenity/commit/e81d4ca1ac Pull-request: https://github.com/SerenityOS/serenity/pull/18878 Reviewed-by: https://github.com/AtkinsSJ
7 changed files with 38 additions and 12 deletions
5
Tests/LibWeb/Layout/expected/calc-negate-length.txt
Normal file
5
Tests/LibWeb/Layout/expected/calc-negate-length.txt
Normal file
|
@ -0,0 +1,5 @@
|
||||||
|
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
||||||
|
BlockContainer <html> at (0,0) content-size 800x66 [BFC] children: not-inline
|
||||||
|
BlockContainer <body> at (8,8) content-size 784x50 children: not-inline
|
||||||
|
BlockContainer <div.container> at (8,8) content-size 100x50 children: not-inline
|
||||||
|
BlockContainer <div.foo> at (8,8) content-size 99x50 children: not-inline
|
|
@ -103,14 +103,14 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
||||||
Box <div.grid-container> at (8,275.34375) content-size 784x90.9375 [GFC] children: not-inline
|
Box <div.grid-container> at (8,275.34375) content-size 784x90.9375 [GFC] children: not-inline
|
||||||
BlockContainer <(anonymous)> at (8,275.34375) content-size 0x0 [BFC] children: inline
|
BlockContainer <(anonymous)> at (8,275.34375) content-size 0x0 [BFC] children: inline
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <div.grid-item> at (444.699981,285.34375) content-size 337.300018x17.46875 [BFC] children: inline
|
BlockContainer <div.grid-item> at (444.199981,285.34375) content-size 337.800018x17.46875 [BFC] children: inline
|
||||||
line 0 width: 6.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
line 0 width: 6.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||||
frag 0 from TextNode start: 0, length: 1, rect: [444.699981,285.34375 6.34375x17.46875]
|
frag 0 from TextNode start: 0, length: 1, rect: [444.199981,285.34375 6.34375x17.46875]
|
||||||
"1"
|
"1"
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <(anonymous)> at (8,275.34375) content-size 0x0 [BFC] children: inline
|
BlockContainer <(anonymous)> at (8,275.34375) content-size 0x0 [BFC] children: inline
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <div.grid-item> at (18,338.8125) content-size 337.299987x17.46875 [BFC] children: inline
|
BlockContainer <div.grid-item> at (18,338.8125) content-size 337.799987x17.46875 [BFC] children: inline
|
||||||
line 0 width: 8.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
line 0 width: 8.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||||
frag 0 from TextNode start: 0, length: 1, rect: [18,338.8125 8.8125x17.46875]
|
frag 0 from TextNode start: 0, length: 1, rect: [18,338.8125 8.8125x17.46875]
|
||||||
"2"
|
"2"
|
||||||
|
|
|
@ -2,12 +2,12 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
||||||
BlockContainer <html> at (0,0) content-size 800x600 [BFC] children: not-inline
|
BlockContainer <html> at (0,0) content-size 800x600 [BFC] children: not-inline
|
||||||
BlockContainer <body> at (8,8) content-size 784x50.9375 children: not-inline
|
BlockContainer <body> at (8,8) content-size 784x50.9375 children: not-inline
|
||||||
Box <div.container> at (8,8) content-size 784x50.9375 [GFC] children: not-inline
|
Box <div.container> at (8,8) content-size 784x50.9375 [GFC] children: not-inline
|
||||||
BlockContainer <div.item> at (434.699981,8) content-size 357.300018x17.46875 [BFC] children: inline
|
BlockContainer <div.item> at (434.199981,8) content-size 357.800018x17.46875 [BFC] children: inline
|
||||||
line 0 width: 6.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
line 0 width: 6.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||||
frag 0 from TextNode start: 0, length: 1, rect: [434.699981,8 6.34375x17.46875]
|
frag 0 from TextNode start: 0, length: 1, rect: [434.199981,8 6.34375x17.46875]
|
||||||
"1"
|
"1"
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <div.item> at (8,41.46875) content-size 357.299987x17.46875 [BFC] children: inline
|
BlockContainer <div.item> at (8,41.46875) content-size 357.799987x17.46875 [BFC] children: inline
|
||||||
line 0 width: 8.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
line 0 width: 8.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||||
frag 0 from TextNode start: 0, length: 1, rect: [8,41.46875 8.8125x17.46875]
|
frag 0 from TextNode start: 0, length: 1, rect: [8,41.46875 8.8125x17.46875]
|
||||||
"2"
|
"2"
|
||||||
|
|
15
Tests/LibWeb/Layout/input/calc-negate-length.html
Normal file
15
Tests/LibWeb/Layout/input/calc-negate-length.html
Normal file
|
@ -0,0 +1,15 @@
|
||||||
|
<!doctype html><style>
|
||||||
|
body {
|
||||||
|
background: #444;
|
||||||
|
}
|
||||||
|
.container {
|
||||||
|
width: 100px;
|
||||||
|
background: green;
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
|
.foo {
|
||||||
|
width: calc(100% - 1px);
|
||||||
|
background: black;
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
|
</style><div class=container><div class=foo>
|
|
@ -1,4 +1,7 @@
|
||||||
<style>
|
<style>
|
||||||
|
* {
|
||||||
|
font: 16px SerenitySans;
|
||||||
|
}
|
||||||
.grid-container {
|
.grid-container {
|
||||||
display: grid;
|
display: grid;
|
||||||
background-color: lightsalmon;
|
background-color: lightsalmon;
|
||||||
|
|
|
@ -1,4 +1,7 @@
|
||||||
<style>
|
<style>
|
||||||
|
* {
|
||||||
|
font: 16px SerenitySans;
|
||||||
|
}
|
||||||
.container {
|
.container {
|
||||||
display: grid;
|
display: grid;
|
||||||
background-color: lightsalmon;
|
background-color: lightsalmon;
|
||||||
|
|
|
@ -583,22 +583,22 @@ void CalculatedStyleValue::CalculationResult::negate()
|
||||||
{
|
{
|
||||||
m_value.visit(
|
m_value.visit(
|
||||||
[&](Number const& number) {
|
[&](Number const& number) {
|
||||||
m_value = Number { number.type(), 1 - number.value() };
|
m_value = Number { number.type(), 0 - number.value() };
|
||||||
},
|
},
|
||||||
[&](Angle const& angle) {
|
[&](Angle const& angle) {
|
||||||
m_value = Angle { 1 - angle.raw_value(), angle.type() };
|
m_value = Angle { 0 - angle.raw_value(), angle.type() };
|
||||||
},
|
},
|
||||||
[&](Frequency const& frequency) {
|
[&](Frequency const& frequency) {
|
||||||
m_value = Frequency { 1 - frequency.raw_value(), frequency.type() };
|
m_value = Frequency { 0 - frequency.raw_value(), frequency.type() };
|
||||||
},
|
},
|
||||||
[&](Length const& length) {
|
[&](Length const& length) {
|
||||||
m_value = Length { 1 - length.raw_value(), length.type() };
|
m_value = Length { 0 - length.raw_value(), length.type() };
|
||||||
},
|
},
|
||||||
[&](Time const& time) {
|
[&](Time const& time) {
|
||||||
m_value = Time { 1 - time.raw_value(), time.type() };
|
m_value = Time { 0 - time.raw_value(), time.type() };
|
||||||
},
|
},
|
||||||
[&](Percentage const& percentage) {
|
[&](Percentage const& percentage) {
|
||||||
m_value = Percentage { 1 - percentage.value() };
|
m_value = Percentage { 0 - percentage.value() };
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Add table
Reference in a new issue