minmax-length-percent-serialize.html (3497B)
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/#mixed-percentages"> 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 <link rel="author" title="Tab Atkins-Bittner" href="https://xanthir.com/contact"> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <script src="../support/serialize-testcommon.js"></script> 10 <div style="width: 100px;"> 11 <div id=target></div> 12 </div> 13 <script> 14 function test_serialization(t,s,c,u, {prop}={}) { 15 test_specified_serialization(prop || 'text-indent', t, s); 16 test_computed_serialization(prop || 'text-indent', t, c); 17 if(u) test_used_serialization(prop || 'margin-left', t, u); 18 } 19 20 // If fully resolvable to a number, serialize to a calc() or all the way to a number. 21 test_serialization( 22 'min(1px)', 23 'calc(1px)', 24 '1px', 25 '1px'); 26 test_serialization( 27 'max(1px)', 28 'calc(1px)', 29 '1px', 30 '1px'); 31 32 // If not, keep as the function. 33 test_serialization( 34 'min(1% + 1px)', 35 'calc(1% + 1px)', 36 'calc(1% + 1px)', 37 '2px'); 38 test_serialization( 39 'min(1px + 1%)', 40 'calc(1% + 1px)', 41 'calc(1% + 1px)', 42 '2px'); 43 test_serialization( 44 'max(1px + 1%)', 45 'calc(1% + 1px)', 46 'calc(1% + 1px)', 47 '2px'); 48 49 // Arguments are simplified eagerly as per spec: 50 test_serialization( 51 'min(1px, 2px)', 52 'calc(1px)', 53 '1px', 54 '1px'); 55 56 // Arguments are simplified, but not reordered. 57 test_serialization( 58 'min(20px, 10%)', 59 'min(20px, 10%)', 60 'min(20px, 10%)', 61 '10px'); 62 test_serialization( 63 'min(1em, 10%)', 64 'min(1em, 10%)', 65 'min(16px, 10%)', 66 '10px'); 67 test_serialization( 68 'min(10%, 20px)', 69 'min(10%, 20px)', 70 'min(10%, 20px)', 71 '10px'); 72 test_serialization( 73 'min(10%, 1em)', 74 'min(10%, 1em)', 75 'min(10%, 16px)', 76 '10px'); 77 test_serialization( 78 'max(20px, 10%)', 79 'max(20px, 10%)', 80 'max(20px, 10%)', 81 '20px'); 82 test_serialization( 83 'max(1em, 10%)', 84 'max(1em, 10%)', 85 'max(16px, 10%)', 86 '16px'); 87 test_serialization( 88 'max(10%, 20px)', 89 'max(10%, 20px)', 90 'max(10%, 20px)', 91 '20px'); 92 test_serialization( 93 'max(10%, 1em)', 94 'max(10%, 1em)', 95 'max(10%, 16px)', 96 '16px'); 97 98 // Within an argument, normal sorting occurs 99 test_serialization( 100 'min(10% + 30px, 5em + 5%)', 101 'min(10% + 30px, 5% + 5em)', 102 'min(10% + 30px, 5% + 80px)', 103 '40px'); 104 test_serialization( 105 'max(10% + 30px, 5em + 5%)', 106 'max(10% + 30px, 5% + 5em)', 107 'max(10% + 30px, 5% + 80px)', 108 '85px'); 109 110 // min()/max() are valid inside a calc(), 111 // and retain their relative order 112 test_serialization( 113 'calc(min(10% + 1px) + max(1em + 10%) + min(10% + 20px))', 114 'calc(30% + 1em + 21px)', 115 'calc(30% + 37px)', 116 '67px'); 117 118 // min()/max() can be combined with plain units as well. 119 // While min()/max() maintain their own ordering, 120 // ordinary units will re-sort around them. 121 test_serialization( 122 'calc(1em + max(10% + 20px) + 5% + min(1em + 10%) + 10px)', 123 'calc(25% + 2em + 30px)', 124 'calc(25% + 62px)', 125 '87px'); 126 127 test_serialization( 128 'max((min(10%, 30px) + 10px) * 2 + 10px, 5em + 5%)', 129 'max(10px + (2 * (10px + min(10%, 30px))), 5% + 5em)', 130 'max(10px + (2 * (10px + min(10%, 30px))), 5% + 80px)', 131 '85px', 132 prop='width'); 133 </script>