| Xiaocheng Hu | 74b1ccb | 2019-09-24 08:14:37 | [diff] [blame] | 1 | <!DOCTYPE html> |
| 2 | <link rel="help" href="https://drafts.csswg.org/css-values-4/#comp-func"> |
| 3 | <link rel="author" title="Xiaocheng Hu" href="mailto:[email protected]"> |
| 4 | <script src="/resources/testharness.js"></script> |
| 5 | <script src="/resources/testharnessreport.js"></script> |
| 6 | <script src="../support/computed-testcommon.js"></script> |
| 7 | <div id="container" style="font-size: 20px"> |
| 8 | <div id="target"></div> |
| 9 | <div id="reference"></div> |
| 10 | </div> |
| 11 | <script> |
| 12 | const property = 'letter-spacing'; |
| 13 | |
| 14 | function test_length_equals(value, expected) { |
| 15 | const reference = document.getElementById('reference'); |
| 16 | reference.style[property] = ''; |
| 17 | reference.style[property] = expected; |
| 18 | const computed = getComputedStyle(reference)[property]; |
| 19 | test_computed_value(property, value, computed); |
| 20 | } |
| 21 | |
| 22 | test_length_equals('clamp(10px, 20px, 30px)', '20px'); |
| 23 | test_length_equals('clamp(10px, 5px, 30px)', '10px'); |
| 24 | test_length_equals('clamp(10px, 35px, 30px)', '30px'); |
| Emilio Cobos Álvarez | c332842 | 2021-04-21 15:00:39 | [diff] [blame] | 25 | test_length_equals('clamp(10px, 35px , 30px)', '30px'); |
| 26 | test_length_equals('clamp(10px, 35px /*foo*/, 30px)', '30px'); |
| 27 | test_length_equals('clamp(10px /* foo */ , 35px, 30px)', '30px'); |
| 28 | test_length_equals('clamp(10px , 35px, 30px)', '30px'); |
| Xiaocheng Hu | 74b1ccb | 2019-09-24 08:14:37 | [diff] [blame] | 29 | |
| 30 | // clamp(MIN, VAL, MAX) is identical to max(MIN, min(VAL, MAX)), |
| 31 | // so MIN wins over MAX if they are in the wrong order. |
| 32 | test_length_equals('clamp(30px, 100px, 20px)', '30px'); |
| 33 | |
| 34 | </script> |
