LibWeb: Use correct percentage basis when resolving line height

This commit is contained in:
Tim Ledbetter 2025-10-12 23:58:47 +01:00 committed by Sam Atkins
parent 078bc1a471
commit 701ef22952
Notes: github-actions[bot] 2025-10-13 09:19:19 +00:00
3 changed files with 34 additions and 3 deletions

View file

@ -3601,7 +3601,7 @@ NonnullRefPtr<StyleValue const> StyleComputer::compute_line_height(NonnullRefPtr
// NOTE: We also support calc()'d numbers
if (specified_value->is_calculated() && specified_value->as_calculated().resolves_to_number())
return NumberStyleValue::create(specified_value->as_calculated().resolve_number(CalculationResolutionContext::from_computation_context(computation_context)).value());
return NumberStyleValue::create(specified_value->as_calculated().resolve_number(CalculationResolutionContext::from_computation_context(computation_context, Length(1, LengthUnit::Em))).value());
// <percentage [0,∞]>
if (specified_value->is_percentage())

View file

@ -1,8 +1,8 @@
Harness status: OK
Found 25 tests
Found 35 tests
19 Pass
29 Pass
6 Fail
Pass min(1em, 110px / 10px * 1px) should be used-value-equivalent to 10px
Pass max(10px, 110px / 10px * 1px) should be used-value-equivalent to 11px
@ -14,6 +14,16 @@ Pass calc(10em / 1em) should be used-value-equivalent to 10
Pass calc(10em / 1rem) should be used-value-equivalent to 10
Pass calc(10em / 1px) should be used-value-equivalent to 100
Pass calc(1px / 10em * NaN) should be used-value-equivalent to 0
Pass calc(10% / 1px) should be used-value-equivalent to 1
Pass calc(1% * 100% / 10%) should be used-value-equivalent to 10%
Pass calc(10% / 10%) should be used-value-equivalent to 1
Pass calc((10% * 1%) / 1px) should be used-value-equivalent to 10px
Pass calc(10% * 10% / 1px * 10deg / 1deg / 10px) should be used-value-equivalent to 1
Pass calc(10% * 10% / 1px * 1deg / 1deg) should be used-value-equivalent to 1px
Pass calc(1px * 2deg / 1deg) should be used-value-equivalent to 2px
Pass calc(1px * 3deg / 1deg / 1px) should be used-value-equivalent to 3
Pass e.style['width'] = "calc((1% * 1deg) / 1px)" should not set the property value
Pass e.style['width'] = "calc((1% * 1% * 1%) / 1px)" should not set the property value
Pass Property width value 'calc(1px * 10em / 0em)'
Pass Property width value 'calc(1px / 1px * 10em * infinity)'
Fail Property margin-left value 'calc(1px * 10em / -0em)'

View file

@ -5,6 +5,7 @@
<script src="../../resources/testharnessreport.js"></script>
<script src="../../css/support/numeric-testcommon.js"></script>
<script src="../../css/support/computed-testcommon.js"></script>
<script src="../support/parsing-testcommon.js"></script>
<style>
:root {
font-size: 10px;
@ -41,6 +42,26 @@ test_math_used("calc(10em / 1rem)", "10", {"prop": "z-index"});
test_math_used("calc(10em / 1px)", "100", {"prop": "z-index"});
test_math_used("calc(1px / 10em * NaN)", "0", {"prop": "z-index"});
// 10% -> 1px; 1px / 1px -> 1.
test_math_used("calc(10% / 1px)", "1", {"prop": "line-height"});
// 1% * 100% / 10% -> 10%.
test_math_used("calc(1% * 100% / 10%)", "10%", {"prop": "line-height"});
// 10% / 10% -> 1.
test_math_used("calc(10% / 10%)", "1", {"prop": "line-height"});
// 10% -> 1px; 1% -> 0.1px; 1px / 0.1px / 1px -> 10px.
test_math_used("calc((10% * 1%) / 1px)", "10px");
// 10% -> 1px; 1px * 1px / 1px * 10deg / 1deg / 10px -> 1.
test_math_used("calc(10% * 10% / 1px * 10deg / 1deg / 10px)", "1", {"prop": "line-height"});
// 10% -> 1px; 1px * 1px / 1px * 1deg / 1deg -> 1px.
test_math_used("calc(10% * 10% / 1px * 1deg / 1deg)", "1px", {"prop": "line-height"});
// 1px * 2deg / 1deg -> 2px.
test_math_used("calc(1px * 2deg / 1deg)", "2px", {"prop": "line-height"});
// 1px * 3deg / 1deg / 1px -> 3.
test_math_used("calc(1px * 3deg / 1deg / 1px)", "3", {"prop": "line-height"});
test_invalid_value("width", "calc((1% * 1deg) / 1px)");
test_invalid_value("width", "calc((1% * 1% * 1%) / 1px)");
testComputedValueGreaterOrLowerThan("width", "calc(1px * 10em / 0em)", REALLY_LARGE);
testComputedValueGreaterOrLowerThan("width", "calc(1px / 1px * 10em * infinity)", REALLY_LARGE);
testComputedValueGreaterOrLowerThan("margin-left", "calc(1px * 10em / -0em)", REALLY_LARGE_NEGATIVE);