Chromium Code Reviews Chromium Code Reviews
Issue 345903005:
calc expressions should support time, angle and frequency values. (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@master| OLD | NEW |
|---|---|
| 1 <!DOCTYPE HTML> | 1 <!DOCTYPE HTML> |
| 2 <style> | 2 <style> |
| 3 #test div { | 3 div { |
| 4 height: 100px; | 4 height: 100px; |
| 5 width: 100px; | |
| 5 background-color: red; | 6 background-color: red; |
| 6 } | 7 } |
| 7 </style> | 8 </style> |
| 8 | 9 |
| 9 <p> | 10 <p> |
| 10 All boxes below should be 100px * 100px and green. | 11 All boxes below should be 100px * 100px and green. |
| 11 </p> | 12 </p> |
| 12 | 13 |
| 13 <div id="test"> | |
| 14 | |
| 15 <!-- just plain bad --> | 14 <!-- just plain bad --> |
| 16 <div style="width: 100px; width: calc(;">unclosed calc</div> | 15 <div style="width: 100px; width: calc(;">unclosed calc</div> |
| 17 <div style="width: 100px; width: calc( flim;">unclosed calc with garbage</div> | 16 <div style="width: 100px; width: calc( flim;">unclosed calc with garbage</div> |
| 18 <div style="width: 100px; width: calc( flim );">garbage</div> | 17 <div style="width: 100px; width: calc( flim );">garbage</div> |
| 19 | 18 |
| 20 <!-- unsupported units --> | 19 <!-- unsupported units --> |
| 21 <div style="width: 100px; width: calc(10dpi);">dpi</div> | 20 <div style="width: 100px; width: calc(10dpi);">dpi</div> |
| 22 <div style="width: 100px; width: calc(10dpi / 4);">dpi / number</div> | 21 <div style="width: 100px; width: calc(10dpi / 4);">dpi / number</div> |
| 23 <div style="width: 100px; width: calc(5dpi + 5dpi);">dpi + dpi</div> | 22 <div style="width: 100px; width: calc(5dpi + 5dpi);">dpi + dpi</div> |
| 24 | 23 |
| 25 <!-- zero division --> | 24 <!-- zero division --> |
| 26 <div style="width: 100px; width: calc(1ex / 0);">zero division</div> | 25 <div style="width: 100px; width: calc(1ex / 0);">zero division</div> |
| 27 | 26 |
| 28 <!-- wrong combination --> | |
| 29 <div style="width: 100px; width: calc(200);">non length</div> | |
|
Mike Lawther (Google)
2014/07/04 04:36:40
It looks like this test for a single unitless valu
| |
| 30 <div style="width: 100px; width: calc(10 + 10px);">number + length</div> | |
| 31 <div style="width: 100px; width: calc(10px + 10);">length + number</div> | |
| 32 <div style="width: 100px; width: calc(10% + 100);">percent + number</div> | |
| 33 <div style="width: 100px; width: calc(100 + 10%);">number + percent</div> | |
| 34 | |
| 35 <div style="width: 100px; width: calc(300px - 100);">length - number</div> | |
| 36 <div style="width: 100px; width: calc(300 - 100px);">number - length</div> | |
| 37 <div style="width: 100px; width: calc(100% - 10);">percent - number</div> | |
| 38 <div style="width: 100px; width: calc(100 - 10%);">number - percent</div> | |
| 39 | |
| 40 <div style="width: 100px; width: calc(10px*100px);">length * length</div> | |
| 41 <div style="width: 100px; width: calc(10px*100%);">length * percent</div> | |
| 42 <div style="width: 100px; width: calc(10%*100px);">percent * length</div> | |
| 43 <div style="width: 100px; width: calc(10%*100%);">percent * percent</div> | |
| 44 | |
| 45 <div style="width: 100px; width: calc(100/10px);">number / length</div> | |
|
Mike Lawther (Google)
2014/07/04 04:36:40
It also looks like the tests for 'number / length|
| |
| 46 <div style="width: 100px; width: calc(100/10%);">number / percent</div> | |
| 47 <div style="width: 100px; width: calc(100px/10px);">length / length</div> | |
| 48 <div style="width: 100px; width: calc(100px/10%);">length / percent</div> | |
| 49 <div style="width: 100px; width: calc(100%/10px);">percent / length</div> | |
| 50 <div style="width: 100px; width: calc(100%/10%);">percent / percent</div> | |
| 51 | |
| 52 <div style="width: 100px; width: calc(100 mod 10px);">number mod length</div> | |
| 53 <div style="width: 100px; width: calc(100 mod 10%);">number mod percent</div> | |
| 54 <div style="width: 100px; width: calc(100px mod 10px);">length mod length</div> | |
| 55 <div style="width: 100px; width: calc(100px mod 10%);">length mod percent</div> | |
| 56 <div style="width: 100px; width: calc(100% mod 10px);">percent mod length</div> | |
| 57 <div style="width: 100px; width: calc(100% mod 10%);">percent mod percent</div> | |
| 58 | |
| 59 <!-- mod, +, - require whitespaces around the operator --> | 27 <!-- mod, +, - require whitespaces around the operator --> |
| 60 <div style="width: 100px; width: calc(1 mod10 * 200px);">mod10 </div> | 28 <div style="width: 100px; width: calc(1 mod10 * 200px);">mod10 </div> |
| 61 <div style="width: 100px; width: calc(1mod 10 * 200px);">1mod</div> | 29 <div style="width: 100px; width: calc(1mod 10 * 200px);">1mod</div> |
| 62 <div style="width: 100px; width: calc(70px+40px);">70px+40px no whitespace aroun d + </div> | 30 <div style="width: 100px; width: calc(70px+40px);">70px+40px no whitespace aroun d + </div> |
| 63 <div style="width: 100px; width: calc(70px +40px);">70px +40px no whitespace on right of +</div> | 31 <div style="width: 100px; width: calc(70px +40px);">70px +40px no whitespace on right of +</div> |
| 64 <div style="width: 100px; width: calc(70px+ 40px);">70px+ 40px no whitespace on left of +</div> | 32 <div style="width: 100px; width: calc(70px+ 40px);">70px+ 40px no whitespace on left of +</div> |
| 65 <div style="width: 100px; width: calc(70px+-40px);">70px+-40px no whitespace aro und + </div> | 33 <div style="width: 100px; width: calc(70px+-40px);">70px+-40px no whitespace aro und + </div> |
| 66 <div style="width: 100px; width: calc(70px-40px);">70px-40px no whitespace aroun d - </div> | 34 <div style="width: 100px; width: calc(70px-40px);">70px-40px no whitespace aroun d - </div> |
| 67 <div style="width: 100px; width: calc(70px -40px);">70px -40px no whitespace on right of -</div> | 35 <div style="width: 100px; width: calc(70px -40px);">70px -40px no whitespace on right of -</div> |
| 68 <div style="width: 100px; width: calc(70px- 40px);">70px- 40px no whitespace on left of -</div> | 36 <div style="width: 100px; width: calc(70px- 40px);">70px- 40px no whitespace on left of -</div> |
| 69 <div style="width: 100px; width: calc(70px-+40px);">70px-+40px no whitespace aro und - </div> | 37 <div style="width: 100px; width: calc(70px-+40px);">70px-+40px no whitespace aro und - </div> |
| 70 | 38 |
| 71 <!-- too many nests should be rejected to avoid stack overflow --> | 39 <!-- too many nests should be rejected to avoid stack overflow --> |
| 72 <div style="width: 100px; width: calc((((((((((((((((((((((((((((((((((((((((((( (((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((( ((((((200px))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))) ))))))))))))))))))))))))))))))))))))))))))))))))))))))))))));">too many nests</d iv> | 40 <div style="width: 100px; width: calc((((((((((((((((((((((((((((((((((((((((((( (((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((( ((((((200px))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))) ))))))))))))))))))))))))))))))))))))))))))))))))))))))))))));">too many nests</d iv> |
| 73 | 41 |
| 74 <!-- invalid formulas --> | 42 <!-- invalid formulas --> |
| 75 <div style="width: 100px; width: calc(200px*);">end with operator</div> | 43 <div style="width: 100px; width: calc(200px*);">end with operator</div> |
| 76 <div style="width: 100px; width: calc(+ +200px);">start with operator</div> | 44 <div style="width: 100px; width: calc(+ +200px);">start with operator</div> |
| 77 <div style="width: 100px; width: calc();">no expressions</div> | 45 <div style="width: 100px; width: calc();">no expressions</div> |
| 78 <div style="width: 100px; width: calc(100px + + +100px);">too many pluses</div> | 46 <div style="width: 100px; width: calc(100px + + +100px);">too many pluses</div> |
| 79 <div style="width: 100px; width: calc(200px 200px);">no binary operator</div> | 47 <div style="width: 100px; width: calc(200px 200px);">no binary operator</div> |
| 80 <div style="width: 100px; width: calc(100px * * 2);">two binary operators</div> | 48 <div style="width: 100px; width: calc(100px * * 2);">two binary operators</div> |
| 81 <div style="width: 100px; width: calc(100px @ 2);">invalid operator '@'</div> | 49 <div style="width: 100px; width: calc(100px @ 2);">invalid operator '@'</div> |
| 82 <div style="width: 100px; width: calc(1 flim 2);">invalid operator 'flim'</div> | 50 <div style="width: 100px; width: calc(1 flim 2);">invalid operator 'flim'</div> |
| 83 <div style="width: 100px; width: calc(100px @ 2);">invalid operator '@'</div> | 51 <div style="width: 100px; width: calc(100px @ 2);">invalid operator '@'</div> |
| 84 <div style="width: 100px; width: calc(1 flim 2);">invalid operator 'flim'</div> | 52 <div style="width: 100px; width: calc(1 flim 2);">invalid operator 'flim'</div> |
| 85 <div style="width: 100px; width: calc(1 flim (2));">invalid operator 'flim' with parens</div> | 53 <div style="width: 100px; width: calc(1 flim (2));">invalid operator 'flim' with parens</div> |
| 86 | 54 |
| 87 | 55 <script> |
| 88 </div> | |
| 89 | 56 |
| 90 <script> | 57 var categories = ["number", "percentage", "length", "angle", "time", "frequenc y"]; |
| 58 var addoperators = ["+", "-"]; | |
| 59 var muloperators = ["*", "/", "mod"]; | |
| 60 var inputs = { "number" : ["42"], | |
| 61 "percentage": ["42%"], | |
| 62 "length" : ["42px"], | |
| 63 "angle" : ["42deg", "42grad", "42rad", "42turn"], | |
| 64 "time" : ["42s", "42ms"], | |
| 65 "frequency" : ["42Hz", "42kHz"] | |
| 66 }; | |
| 67 | |
| 68 function checkInvalidProperty(element, property, expectedValue, calcExpression) { | |
| 69 var currentValue = getComputedStyle(element).getPropertyValue(property); | |
| 70 var error = []; | |
| 71 if (currentValue != expectedValue) | |
| 72 error.push("expected " + property + " of " + expectedValue + ", but was " + currentValue); | |
| 73 | |
| 74 if (error == "") { | |
| 75 element.style.backgroundColor = "green"; | |
| 76 element.innerHTML = calcExpression + " => PASS"; | |
| 77 } else | |
| 78 element.innerHTML = calcExpression + " => FAIL: " + error.join(", "); | |
| 79 } | |
| 80 | |
| 81 function isValidMul(leftCategory, rightCategory) { | |
| 82 return leftCategory == "number" || rightCategory == "number"; | |
| 83 } | |
| 84 | |
| 85 function isValidAdd(leftCategory, rightCategory) { | |
| 86 return (leftCategory == rightCategory) | |
| 87 || (leftCategory == "percentage" && rightCategory == "length") | |
| 88 || (rightCategory == "percentage" && leftCategory == "length"); | |
| 89 } | |
| 90 | |
| 91 // Generate all the possible wrong combinations for a category. | |
| 92 function generateInvalidCalcsForCategory(category) { | |
| 93 var results = []; | |
| 94 results = results.concat(generateInvalidCalcsForOperator(isValidAdd, categor y, addoperators)); | |
| 95 results = results.concat(generateInvalidCalcsForOperator(isValidMul, categor y, muloperators)); | |
| 96 return results; | |
| 97 } | |
| 98 | |
| 99 // Generate all the possible wrong expressions for an opertor type (additive/mul tiplicative). | |
| 100 function generateInvalidCalcsForOperator(isValid, category, operators) { | |
| 101 var results = []; | |
| 102 for (var i = 0; i < category.length; ++i) { | |
| 103 var leftCategory = category[i]; | |
| 104 for (var j = 0; j < categories.length; ++j) { | |
| 105 var rightCategory = categories[j]; | |
| 106 if (!isValid(leftCategory, rightCategory)) | |
| 107 results = results.concat(generateInvalidCalcExpression(leftCateg ory, rightCategory, operators)); | |
| 108 if (!isValid(rightCategory, leftCategory)) | |
| 109 results = results.concat(generateInvalidCalcExpression(rightCate gory, leftCategory, operators)); | |
| 110 } | |
| 111 } | |
| 112 return results; | |
| 113 } | |
| 114 | |
| 115 // Creating calc expressions with the given left/right categories and operators. | |
| 116 function generateInvalidCalcExpression(leftCategory, rightCategory, operators) { | |
| 117 var results = []; | |
| 118 for (var i = 0; i < inputs[leftCategory].length; ++i) | |
| 119 for (var j = 0; j < inputs[rightCategory].length; ++j) | |
| 120 for (var k = 0; k < operators.length; ++k) | |
| 121 results.push(inputs[leftCategory][i] + " " + operators[k] + " " + inputs[rightCategory][j]); | |
| 122 return results; | |
| 123 } | |
| 124 | |
| 125 // Assigning the generated calc expressions to a suitable CSS property. | |
| 126 function checkWrongCombinations(calcList, property, expected, cssFunction) { | |
| 127 for (var i = 0; i < calcList.length; ++i) { | |
| 128 var calcExpression = "calc(" + calcList[i] + ")"; | |
| 129 var div = document.createElement("div"); | |
| 130 document.body.appendChild(div); | |
| 131 div.style[property] = expected; | |
| 132 div.style[property] = cssFunction ? cssFunction + "(" + calcExpression + ")" : calcExpression; | |
| 133 checkInvalidProperty(div, property, expected, calcList[i]); | |
| 134 } | |
| 135 } | |
| 136 | |
| 91 if (window.testRunner) | 137 if (window.testRunner) |
| 92 testRunner.dumpAsText(); | 138 testRunner.dumpAsText(); |
| 93 | 139 |
| 94 var test = document.getElementById("test"); | 140 // Check the handwritten calc expressions. |
| 95 for (var element = test.firstChild; element; element = element.nextSibling) { | 141 var elements = document.getElementsByTagName("div"); |
| 96 var width = element.offsetWidth; | 142 for (var i = 0; i < elements.length; ++i) |
| 97 var error = []; | 143 checkInvalidProperty(elements[i], "width", "100px", elements[i].innerHTML); |
| 98 if (width != 100) | |
| 99 error.push("expected width of 100, but was " + width); | |
| 100 var height = element.offsetHeight; | |
| 101 if (height != 100) | |
| 102 error.push("expected height of 100, but was " + width); | |
| 103 | 144 |
| 104 if (error == "") { | 145 // Generating anc checking wrong combinations. |
|
Mike Lawther (Google)
2014/07/04 04:36:40
typo: 'anc' -> 'and'
| |
| 105 element.style.backgroundColor = "green"; | 146 var calcsForLength = generateInvalidCalcsForCategory(["number", "percentage", "l ength"]); |
| 106 element.innerHTML += " => PASS"; | 147 var calcsForAngle = generateInvalidCalcsForCategory(["angle"]); |
| 107 } else { | 148 var calcsForTime = generateInvalidCalcsForCategory(["time"]); |
| 108 element.innerHTML += " => FAIL: " + error.join(", "); | 149 var calcsForFrequency = generateInvalidCalcsForCategory(["frequency"]); |
| 109 } | 150 |
| 110 } | 151 checkWrongCombinations(calcsForLength, "width", "100px"); |
| 152 checkWrongCombinations(calcsForAngle, "transform", "matrix(1, 0, 0, 1, 0, 0)", " rotate"); | |
| 153 checkWrongCombinations(calcsForTime, "-webkit-animation-delay", "100s"); | |
| 154 | |
| 111 </script> | 155 </script> |
| OLD | NEW |
