minmax-length-serialize.html (2129B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/css-values-4/#comp-func"> 3 <link rel="help" href="https://drafts.csswg.org/css-values-4/#lengths"> 4 <link rel="help" href="https://drafts.csswg.org/css-values-4/#calc-serialize"> 5 <link rel="author" title="Xiaocheng Hu" href="mailto:xiaochengh@chromium.org"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="../support/serialize-testcommon.js"></script> 9 <div style="width: 100px;"> 10 <div id=target></div> 11 </div> 12 <script> 13 function test_serialization(t,s,c,u, {prop}={}) { 14 test_specified_serialization(prop || 'text-indent', t, s); 15 test_computed_serialization(prop || 'text-indent', t, c); 16 if(u) test_used_serialization(prop || 'margin-left', t, u); 17 } 18 19 test_serialization( 20 'min(1px)', 21 'calc(1px)', 22 '1px'); 23 test_serialization( 24 'min(1in)', 25 'calc(96px)', 26 '96px'); 27 test_serialization( 28 'max(1px)', 29 'calc(1px)', 30 '1px'); 31 test_serialization( 32 'max(1in)', 33 'calc(96px)', 34 '96px'); 35 36 // Values are case-insensitive and serialize as lower case, for example 1Q 37 // serializes as 1q. 38 test_serialization( 39 'min(1PX)', 40 'calc(1px)', 41 '1px'); 42 43 // Arguments simplify down eagerly 44 test_serialization( 45 'min(50px, 1in + 1px)', 46 'calc(50px)', 47 '50px'); 48 test_serialization( 49 'max(50px, 1in + 1px)', 50 'calc(97px)', 51 '97px'); 52 53 // And the entire function simplifies eagerly if possible 54 test_serialization( 55 'calc(1px + min(1in, 100px))', 56 'calc(97px)', 57 '97px'); 58 test_serialization( 59 'calc(1px + max(1in, 100px))', 60 'calc(101px)', 61 '101px'); 62 63 // Computed-value units preserve min()/max() in specified values 64 test_serialization( 65 'min(1px, 1em)', 66 'min(1px, 1em)', 67 '1px'); 68 test_serialization( 69 'calc(min(1px, 1in) + max(100px + 1em, 10px + 1in) + 1px)', 70 'calc(2px + max(1em + 100px, 106px))', 71 '118px'); 72 73 // https://crbug.com/411359798 74 test_serialization( 75 'calc(2 * (.2 * min(1em, 1px)) + 1px)', 76 'calc(1px + (0.4 * min(1em, 1px)))', 77 '1.4px'); 78 79 // Can't test that min()/max() are preserved in computed values with just lengths; 80 // see minmax-length-percentage-serialize for tests of that. 81 </script>