eliott/ladybird
1
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird synced 2026-04-28 10:37:17 +02:00
Code Issues Packages Projects Releases Wiki Activity

LibWeb: Clamp and censor top-level calc results

Browse Source 
We now clamp the values returned from calc into the allowed range (where
we know it) and censor any `NaN`s to `0` both when we resolve and when
we serialize.

Gains us 76 WPT passes.
This commit is contained in:
Callum Law
2025-08-06 16:29:12 +12:00
committed by Sam Atkins
parent bc2ca96f50
commit 778da0175e
Notes: github-actions[bot] 2025-08-11 16:11:10 +00:00 
Author: https://github.com/Calme1709
Commit: https://github.com/LadybirdBrowser/ladybird/commit/778da0175ed
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/5734
Reviewed-by: https://github.com/AtkinsSJ ✅
Reviewed-by: https://github.com/Hendiadyoin1
Reviewed-by: https://github.com/gmta
Reviewed-by: https://github.com/tcl3
15 changed files with 361 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
Tests/LibWeb/Text/input/wpt-import/css/css-values/calc-numbers.html Normal file
View File

@@ -0,0 +1,100 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>CSS Values and Units Test: computed value of 'tab-size' and 'opacity' when specified with calc() function</title>
<!--
Original test is:
https://chromium.googlesource.com/chromium/src/+/c825d655f6aaf73484f9d56e9012793f5b9668cc/third_party/WebKit/LayoutTests/css3/calc/calc-numbers.html
-->
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<link rel="help" href="https://www.w3.org/TR/css-color-3/#transparency">
<link rel="help" href="https://www.w3.org/TR/css-text-3/#tab-size-property">
<link rel="help" href="https://www.w3.org/TR/css3-values/#calc-computed-value">
<link rel="help" href="https://www.w3.org/TR/css3-values/#calc-range">
<meta name="flags" content="invalid">
<meta content="This test verifies how 11 calc() functions are computed for 'opacity' and 'tab-size'." name="assert">
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<div id="target"></div>
<script>
function startTesting()
{
function verifyComputedStyle(property_name, initial_value, specified_value, expected_value, description)
{
var elemTarget = document.getElementById("target");
test(function()
{
elemTarget.style.setProperty(property_name, initial_value);
/*
In exactly 6 out of the 11 sub-tests, the initial_value will
act as a fallback value because the specified value generates
an invalid value. Since we are running 11 consecutive tests
on the same element, then it is necessary to 'reset' its
property to an initial value.
*/
elemTarget.style.setProperty(property_name, specified_value);
assert_equals(getComputedStyle(elemTarget)[property_name], expected_value, specified_value + ' should compute to ' + expected_value);
}, description);
}
/* verifyComputedStyle(property_name, initial_value, specified_value, expected_value, description) */
verifyComputedStyle("tab-size", "initial", "calc(2 * 3)", "6", "testing tab-size: calc(2 * 3)");
verifyComputedStyle("tab-size", "12345", "calc(2 * -4)", "0", "testing tab-size: calc(2 * -4)");
/*
an out-of-range value inside a calc() does not cause
the declaration to become invalid. The value resulting
from an expression must be clamped to the range
allowed in the target context.
https://www.w3.org/TR/css-values-3/#calc-range
*/
verifyComputedStyle("opacity", "initial", "calc(2 / 4)", "0.5", "testing opacity: calc(2 / 4)");
verifyComputedStyle("tab-size", "12345", "calc(2 / 4)", "0.5", "testing tab-size: calc(2 / 4)");
/*
'tab-size' accepts <number> values.
*/
verifyComputedStyle("opacity", "0.9", "calc(2 / 4) * 1px", "0.9", "testing opacity: calc(2 / 4) * 1px");
verifyComputedStyle("opacity", "0.9", "calc(90%)", "0.9", "testing opacity: calc(90%)");
verifyComputedStyle("tab-size", "12345", "calc(1 + 1px)", "12345", "testing tab-size: calc(1 + 1px)");
verifyComputedStyle("tab-size", "12345", "calc(1 + 100%)", "12345", "testing tab-size: calc(1 + 100%)");
verifyComputedStyle("tab-size", "12345", "calc(100%)", "12345", "testing tab-size: calc(100%)");
verifyComputedStyle("tab-size", "12345", "calc(10px) bla", "12345", "testing tab-size: calc(10px) bla");
verifyComputedStyle("tab-size", "12345", "calc(bla) 10px", "12345", "testing tab-size: calc(bla) 10px");
verifyComputedStyle("tab-size", "initial", "calc(10px)", "10px", "testing tab-size: calc(10px)");
/* verifyComputedStyle(property_name, initial_value, specified_value, expected_value, description) */
}
startTesting();
</script>