| <!DOCTYPE html> |
| <link rel="help" href="https://drafts.csswg.org/css-values-4/#comp-func"> |
| <link rel="help" href="https://drafts.csswg.org/css-values-4/#mixed-percentages"> |
| <link rel="help" href="https://drafts.csswg.org/css-values-4/#calc-serialize"> |
| <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/parsing-testcommon.js"></script> |
| <script> |
| const property = 'margin-left'; |
| |
| function test_valid_length_percent(value, expected) { |
| test_valid_value(property, value, expected); |
| } |
| |
| test_valid_length_percent('min(1px + 1%)', 'min(1% + 1px)'); |
| test_valid_length_percent('min(1cm + 1%)', 'min(1% + 1cm)'); |
| test_valid_length_percent('min(1mm + 1%)', 'min(1% + 1mm)'); |
| test_valid_length_percent('min(1Q + 1%)', 'min(1% + 1q)'); |
| test_valid_length_percent('min(1in + 1%)', 'min(1% + 1in)'); |
| test_valid_length_percent('min(1pc + 1%)', 'min(1% + 1pc)'); |
| test_valid_length_percent('min(1pt + 1%)', 'min(1% + 1pt)'); |
| test_valid_length_percent('min(1em + 1%)', 'min(1% + 1em)'); |
| test_valid_length_percent('min(1ex + 1%)', 'min(1% + 1ex)'); |
| test_valid_length_percent('min(1ch + 1%)', 'min(1% + 1ch)'); |
| test_valid_length_percent('min(1rem + 1%)', 'min(1% + 1rem)'); |
| test_valid_length_percent('min(1vh + 1%)', 'min(1% + 1vh)'); |
| test_valid_length_percent('min(1vw + 1%)', 'min(1% + 1vw)'); |
| test_valid_length_percent('min(1vmin + 1%)', 'min(1% + 1vmin)'); |
| test_valid_length_percent('min(1vmax + 1%)', 'min(1% + 1vmax)'); |
| test_valid_length_percent('max(1px + 1%)', 'max(1% + 1px)'); |
| test_valid_length_percent('max(1cm + 1%)', 'max(1% + 1cm)'); |
| test_valid_length_percent('max(1mm + 1%)', 'max(1% + 1mm)'); |
| test_valid_length_percent('max(1Q + 1%)', 'max(1% + 1q)'); |
| test_valid_length_percent('max(1in + 1%)', 'max(1% + 1in)'); |
| test_valid_length_percent('max(1pc + 1%)', 'max(1% + 1pc)'); |
| test_valid_length_percent('max(1pt + 1%)', 'max(1% + 1pt)'); |
| test_valid_length_percent('max(1em + 1%)', 'max(1% + 1em)'); |
| test_valid_length_percent('max(1ex + 1%)', 'max(1% + 1ex)'); |
| test_valid_length_percent('max(1ch + 1%)', 'max(1% + 1ch)'); |
| test_valid_length_percent('max(1rem + 1%)', 'max(1% + 1rem)'); |
| test_valid_length_percent('max(1vh + 1%)', 'max(1% + 1vh)'); |
| test_valid_length_percent('max(1vw + 1%)', 'max(1% + 1vw)'); |
| test_valid_length_percent('max(1vmin + 1%)', 'max(1% + 1vmin)'); |
| test_valid_length_percent('max(1vmax + 1%)', 'max(1% + 1vmax)'); |
| |
| test_valid_length_percent('min(20px, 10%)', 'min(20px, 10%)'); |
| test_valid_length_percent('min(1em, 10%)', 'min(1em, 10%)'); |
| test_valid_length_percent('max(20px, 10%)', 'max(20px, 10%)'); |
| test_valid_length_percent('max(1em, 10%)', 'max(1em, 10%)'); |
| test_valid_length_percent('min(10%, 20px)', 'min(10%, 20px)'); |
| test_valid_length_percent('min(10%, 1em)', 'min(10%, 1em)'); |
| test_valid_length_percent('max(10%, 20px)', 'max(10%, 20px)'); |
| test_valid_length_percent('max(10%, 1em)', 'max(10%, 1em)'); |
| |
| test_valid_length_percent('min(10% + 30px, 5% + 60px)', 'min(10% + 30px, 5% + 60px)') |
| test_valid_length_percent('max(10% + 2em, 5% + 1em)', 'max(10% + 2em, 5% + 1em)') |
| |
| test_valid_length_percent('calc(min(10%) + max(1em) + min(20px))', 'calc(min(10%) + max(1em) + min(20px))'); |
| test_valid_length_percent('calc(max(20px) + min(1em) + max(10%))', 'calc(max(20px) + min(1em) + max(10%))'); |
| test_valid_length_percent('calc(max(10%) + min(1em) + max(20px))', 'calc(max(10%) + min(1em) + max(20px))'); |
| test_valid_length_percent('calc(min(20px) + max(1em) + min(10%))', 'calc(min(20px) + max(1em) + min(10%))'); |
| |
| test_valid_length_percent('calc(20px + min(10%))', 'calc(20px + min(10%))'); |
| test_valid_length_percent('calc(10% + min(20px))', 'calc(10% + min(20px))'); |
| test_valid_length_percent('calc(1em + min(10%))', 'calc(1em + min(10%))'); |
| test_valid_length_percent('calc(10% + min(1em))', 'calc(10% + min(1em))'); |
| test_valid_length_percent('calc(min(10%) + 20px)', 'calc(20px + min(10%))'); |
| test_valid_length_percent('calc(min(20px) + 10%)', 'calc(10% + min(20px))'); |
| test_valid_length_percent('calc(min(10%) + 1em)', 'calc(1em + min(10%))'); |
| test_valid_length_percent('calc(min(1em) + 10%)', 'calc(10% + min(1em))'); |
| test_valid_length_percent('calc(20px + max(10%))', 'calc(20px + max(10%))'); |
| test_valid_length_percent('calc(10% + max(20px))', 'calc(10% + max(20px))'); |
| test_valid_length_percent('calc(1em + max(10%))', 'calc(1em + max(10%))'); |
| test_valid_length_percent('calc(10% + max(1em))', 'calc(10% + max(1em))'); |
| test_valid_length_percent('calc(max(10%) + 20px)', 'calc(20px + max(10%))'); |
| test_valid_length_percent('calc(max(20px) + 10%)', 'calc(10% + max(20px))'); |
| test_valid_length_percent('calc(max(10%) + 1em)', 'calc(1em + max(10%))'); |
| test_valid_length_percent('calc(max(1em) + 10%)', 'calc(10% + max(1em))'); |
| |
| </script> |
