mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-12-08 06:09:58 +00:00
0553bcb35b
Math functions like abs(), clamp(), round(), etc, can be used by themselves in property values, without wrapping them in calc(). Before this change, we were neglecting to run calc simplification on the generated calculation node trees. By doing that manually after parsing a standalone math function, we score at least a couple hundred WPT points.
47 lines
2 KiB
HTML
47 lines
2 KiB
HTML
<!DOCTYPE html>
|
|
<link rel="help" href="https://drafts.csswg.org/css-values-4/#comp-func">
|
|
<link rel="author" title="Xiaocheng Hu" href="mailto:xiaochengh@chromium.org">
|
|
<script src="../../resources/testharness.js"></script>
|
|
<script src="../../resources/testharnessreport.js"></script>
|
|
<script src="../support/computed-testcommon.js"></script>
|
|
<div id="container" style="font-size: 20px">
|
|
<div id="target"></div>
|
|
<div id="reference"></div>
|
|
</div>
|
|
<script>
|
|
const property = 'letter-spacing';
|
|
|
|
function test_length_equals(value, expected) {
|
|
const reference = document.getElementById('reference');
|
|
reference.style[property] = '';
|
|
reference.style[property] = expected;
|
|
const computed = getComputedStyle(reference)[property];
|
|
test_computed_value(property, value, computed);
|
|
}
|
|
|
|
test_length_equals('clamp(10px, 20px, 30px)', '20px');
|
|
test_length_equals('clamp(10px, 5px, 30px)', '10px');
|
|
test_length_equals('clamp(10px, 35px, 30px)', '30px');
|
|
test_length_equals('clamp(10px, 35px , 30px)', '30px');
|
|
test_length_equals('clamp(10px, 35px /*foo*/, 30px)', '30px');
|
|
test_length_equals('clamp(10px /* foo */ , 35px, 30px)', '30px');
|
|
test_length_equals('clamp(10px , 35px, 30px)', '30px');
|
|
|
|
// clamp(MIN, VAL, MAX) is identical to max(MIN, min(VAL, MAX)),
|
|
// so MIN wins over MAX if they are in the wrong order.
|
|
test_length_equals('clamp(30px, 100px, 20px)', '30px');
|
|
|
|
// also test with negative values
|
|
test_length_equals('clamp(-30px, -20px, -10px)', '-20px');
|
|
test_length_equals('clamp(-30px, -100px, -10px)', '-30px');
|
|
test_length_equals('clamp(-30px, 100px, -10px)', '-10px');
|
|
test_length_equals('clamp(-10px, 100px, -30px)', '-10px');
|
|
test_length_equals('clamp(-10px, -100px, -30px)', '-10px');
|
|
|
|
// and negating the result of clamp
|
|
test_length_equals('calc(0px + clamp(10px, 20px, 30px))', '20px');
|
|
test_length_equals('calc(0px - clamp(10px, 20px, 30px))', '-20px');
|
|
test_length_equals('calc(0px + clamp(30px, 100px, 20px))', '30px');
|
|
test_length_equals('calc(0px - clamp(30px, 100px, 20px))', '-30px');
|
|
|
|
</script>
|