calc-serialization-002.html (5886B)
1 <!DOCTYPE html> 2 3 <meta charset="UTF-8"> 4 5 <title>CSS Values and Units: serialization of calc() specified values: 19 arithmetical operations (complex)</title> 6 7 <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> 8 <link rel="help" href="https://www.w3.org/TR/css-values-4/#calc-serialize"> 9 10 <meta content="" name="flags"> 11 <meta content="This test verifies how 19 arithmetical operations of mixed length units in calc() specified values are serialized. Absolute length units (cm, in, mm, pc, pt, q, px), font-relative length units (ex, em, rem), viewport-percentage length units (vh, vmax, vmin, vw) and percentage units are tested. 12 additions, 6 substractions and 1 division are tested." name="assert"> 12 13 <!-- 14 15 Issue 1050968: CSS calc and other math function serialization doesn't follow the spec 16 https://bugs.chromium.org/p/chromium/issues/detail?id=1050968 17 18 --> 19 20 <script src="/resources/testharness.js"></script> 21 22 <script src="/resources/testharnessreport.js"></script> 23 24 <div id="target"></div> 25 26 <script> 27 function startTesting() 28 { 29 30 var targetElement = document.getElementById("target"); 31 32 function verifySerialization(specified_value, serialization_expected, description) 33 { 34 35 test(function() 36 { 37 38 targetElement.style.height = specified_value; 39 40 assert_equals(targetElement.style.height, serialization_expected); 41 42 }, description); 43 } 44 45 /* 46 47 " 48 49 If nodes contains a number, remove it from nodes and append it to ret. 50 51 If nodes contains a percentage, remove it from nodes and append it to ret. 52 53 If nodes contains any dimensions, remove them from nodes, sort them by their units, ordered ASCII case-insensitively, and append them to ret. 54 55 If nodes still contains any items, append them to ret in the same order. 56 57 " 58 https://www.w3.org/TR/css-values-4/#calc-serialize 59 60 */ 61 62 /* 12 Additions */ 63 64 verifySerialization("calc(1vh + 2px + 3%)", "calc(3% + 2px + 1vh)", "testing calc(1vh + 2px + 3%)"); 65 66 verifySerialization("calc(4px + 1vh)", "calc(4px + 1vh)", "testing calc(4px + 1vh)"); 67 68 verifySerialization("calc(5px + 6em + 1vh)", "calc(6em + 5px + 1vh)", "testing calc(5px + 6em + 1vh)"); 69 70 verifySerialization("calc(-8px + 9em + 1vh)", "calc(9em - 8px + 1vh)", "testing calc(-8px + 9em + 1vh)"); 71 72 verifySerialization("calc(1pc + 1in + 1vh + 10%)", "calc(10% + 112px + 1vh)", "testing calc(1pc + 1in + 1vh + 10%)"); 73 74 verifySerialization("calc(25.4q + 1vh + 12%)", "calc(12% + 24px + 1vh)", "testing calc(25.4q + 1vh + 12%)"); 75 76 verifySerialization("calc(1em + 1.27cm + 13% + 3em)", "calc(13% + 4em + 48px)", "testing calc(1em + 1.27cm + 13% + 3em)"); 77 78 /* verifySerialization(specified_value, serialization_expected, description) */ 79 80 verifySerialization("calc(15vw + 16vmin - 17vh)", "calc(-17vh + 16vmin + 15vw)", "testing calc(15vw + 16vmin - 17vh)"); 81 82 verifySerialization("calc(9pt + calc(9rem + 10px))", "calc(22px + 9rem)", "testing calc(9pt + calc(9rem + 10px))"); 83 84 verifySerialization("calc(5pt + 5em + 4pt + 3em)", "calc(8em + 12px)", "testing calc(5pt + 5em + 4pt + 3em)"); 85 86 verifySerialization("calc(4vmin + 0pt + 3pc)", "calc(48px + 4vmin)", "testing calc(4vmin + 0pt + 3pc)"); 87 88 verifySerialization("calc(4vmin + 0pt)", "calc(0px + 4vmin)", "testing calc(4vmin + 0pt)"); 89 90 /* 91 92 More info on the calc(4vmin + 0pt) sub-test: 93 https://github.com/web-platform-tests/wpt/pull/38245#issuecomment-1464215777 94 Date: March 10th 2023 95 96 */ 97 98 /* 6 Substractions */ 99 100 101 verifySerialization("calc(100% - 100% + 1em)", "calc(0% + 1em)", "testing calc(100% - 100% + 1em)"); 102 103 verifySerialization("calc(100% + 1em - 100%)", "calc(0% + 1em)", "testing calc(100% + 1em - 100%)"); 104 105 verifySerialization("calc(1vh - 7px)", "calc(-7px + 1vh)", "testing calc(1vh - 7px)"); 106 107 verifySerialization("calc(5ex - 9ex)", "calc(-4ex)", "testing calc(5ex - 9ex)"); 108 109 /* 110 111 An out-of-range value inside calc() is not syntactically invalid. 112 Inside a calc() function, the resulting summation value can be 113 out of range and can be serialized. 114 115 */ 116 117 verifySerialization("calc(-80px + 25.4mm)", "calc(16px)", "testing calc(-80px + 25.4mm)"); 118 119 /* verifySerialization(specified_value, serialization_expected, description) */ 120 121 /* 122 123 Check distributing multiplication over sums and subs simplification. 124 NOTE: If root contains only two children, one of which is a number 125 (not a percentage or dimension) and the other of which is a Sum 126 whose children are all numeric values, multiply all of the Sum’s 127 children by the number, then return the Sum. So, num * (fn + fn) 128 should not be simplified. 129 130 */ 131 132 verifySerialization("calc(2 * (10px + 1rem))", "calc(20px + 2rem)", "testing calc(2 * (10px + 1rem))"); 133 verifySerialization("calc(2 * (10px - 1rem))", "calc(20px - 2rem)", "testing calc(2 * (10px - 1rem))"); 134 verifySerialization("calc((10px + 1rem) / 2)", "calc(5px + 0.5rem)", "testing calc((10px + 1rem) / 2)"); 135 verifySerialization( 136 "calc(2 * (min(10px, 20%) + max(1rem, 2%)))", 137 "calc(2 * (min(10px, 20%) + max(1rem, 2%)))", 138 "testing calc(2 * (min(10px, 20%) + max(1rem, 2%)))" 139 ); 140 verifySerialization( 141 "calc((min(10px, 20%) + max(1rem, 2%)) * 2)", 142 "calc(2 * (min(10px, 20%) + max(1rem, 2%)))", 143 "testing calc((min(10px, 20%) + max(1rem, 2%)) * 2)" 144 ); 145 146 verifySerialization("calc(1vmin - 14%)", "calc(-14% + 1vmin)", "testing calc(1vmin - 14%)"); 147 148 149 /* 1 Multiplication and division */ 150 151 152 verifySerialization("calc(4 * 3px + 4pc / 8)", "calc(20px)", "testing calc(4 * 3px + 4pc / 8)"); 153 154 /* 155 This calc(4 * 3px + 4pc / 8) test is on purpose last. We want the 156 div#target to occupy 20px and to not cause document box height 157 to be unneedlessly tall. 158 */ 159 160 } 161 162 startTesting(); 163 164 </script>