Index: LayoutTests/css3/calc/calc-errors.html |
diff --git a/LayoutTests/css3/calc/calc-errors.html b/LayoutTests/css3/calc/calc-errors.html |
index 310e495dd217c4f57cfbe141bfd41e924bd54270..e6f9cf9c0cb109cb3bcdf11561daf0dada7ecc8e 100644 |
--- a/LayoutTests/css3/calc/calc-errors.html |
+++ b/LayoutTests/css3/calc/calc-errors.html |
@@ -1,7 +1,8 @@ |
<!DOCTYPE HTML> |
<style> |
-#test div { |
+div { |
height: 100px; |
+ width: 100px; |
background-color: red; |
} |
</style> |
@@ -10,8 +11,6 @@ |
All boxes below should be 100px * 100px and green. |
</p> |
-<div id="test"> |
- |
<!-- just plain bad --> |
<div style="width: 100px; width: calc(;">unclosed calc</div> |
<div style="width: 100px; width: calc( flim;">unclosed calc with garbage</div> |
@@ -25,37 +24,6 @@ |
<!-- zero division --> |
<div style="width: 100px; width: calc(1ex / 0);">zero division</div> |
-<!-- wrong combination --> |
-<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
|
-<div style="width: 100px; width: calc(10 + 10px);">number + length</div> |
-<div style="width: 100px; width: calc(10px + 10);">length + number</div> |
-<div style="width: 100px; width: calc(10% + 100);">percent + number</div> |
-<div style="width: 100px; width: calc(100 + 10%);">number + percent</div> |
- |
-<div style="width: 100px; width: calc(300px - 100);">length - number</div> |
-<div style="width: 100px; width: calc(300 - 100px);">number - length</div> |
-<div style="width: 100px; width: calc(100% - 10);">percent - number</div> |
-<div style="width: 100px; width: calc(100 - 10%);">number - percent</div> |
- |
-<div style="width: 100px; width: calc(10px*100px);">length * length</div> |
-<div style="width: 100px; width: calc(10px*100%);">length * percent</div> |
-<div style="width: 100px; width: calc(10%*100px);">percent * length</div> |
-<div style="width: 100px; width: calc(10%*100%);">percent * percent</div> |
- |
-<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|
|
-<div style="width: 100px; width: calc(100/10%);">number / percent</div> |
-<div style="width: 100px; width: calc(100px/10px);">length / length</div> |
-<div style="width: 100px; width: calc(100px/10%);">length / percent</div> |
-<div style="width: 100px; width: calc(100%/10px);">percent / length</div> |
-<div style="width: 100px; width: calc(100%/10%);">percent / percent</div> |
- |
-<div style="width: 100px; width: calc(100 mod 10px);">number mod length</div> |
-<div style="width: 100px; width: calc(100 mod 10%);">number mod percent</div> |
-<div style="width: 100px; width: calc(100px mod 10px);">length mod length</div> |
-<div style="width: 100px; width: calc(100px mod 10%);">length mod percent</div> |
-<div style="width: 100px; width: calc(100% mod 10px);">percent mod length</div> |
-<div style="width: 100px; width: calc(100% mod 10%);">percent mod percent</div> |
- |
<!-- mod, +, - require whitespaces around the operator --> |
<div style="width: 100px; width: calc(1 mod10 * 200px);">mod10 </div> |
<div style="width: 100px; width: calc(1mod 10 * 200px);">1mod</div> |
@@ -84,28 +52,104 @@ |
<div style="width: 100px; width: calc(1 flim 2);">invalid operator 'flim'</div> |
<div style="width: 100px; width: calc(1 flim (2));">invalid operator 'flim' with parens</div> |
- |
-</div> |
- |
<script> |
-if (window.testRunner) |
- testRunner.dumpAsText(); |
-var test = document.getElementById("test"); |
-for (var element = test.firstChild; element; element = element.nextSibling) { |
- var width = element.offsetWidth; |
+var categories = ["number", "percentage", "length", "angle", "time", "frequency"]; |
+var addoperators = ["+", "-"]; |
+var muloperators = ["*", "/", "mod"]; |
+var inputs = { "number" : ["42"], |
+ "percentage": ["42%"], |
+ "length" : ["42px"], |
+ "angle" : ["42deg", "42grad", "42rad", "42turn"], |
+ "time" : ["42s", "42ms"], |
+ "frequency" : ["42Hz", "42kHz"] |
+ }; |
+ |
+function checkInvalidProperty(element, property, expectedValue, calcExpression) { |
+ var currentValue = getComputedStyle(element).getPropertyValue(property); |
var error = []; |
- if (width != 100) |
- error.push("expected width of 100, but was " + width); |
- var height = element.offsetHeight; |
- if (height != 100) |
- error.push("expected height of 100, but was " + width); |
+ if (currentValue != expectedValue) |
+ error.push("expected " + property + " of " + expectedValue + ", but was " + currentValue); |
if (error == "") { |
element.style.backgroundColor = "green"; |
- element.innerHTML += " => PASS"; |
- } else { |
- element.innerHTML += " => FAIL: " + error.join(", "); |
+ element.innerHTML = calcExpression + " => PASS"; |
+ } else |
+ element.innerHTML = calcExpression + " => FAIL: " + error.join(", "); |
+} |
+ |
+function isValidMul(leftCategory, rightCategory) { |
+ return leftCategory == "number" || rightCategory == "number"; |
+} |
+ |
+function isValidAdd(leftCategory, rightCategory) { |
+ return (leftCategory == rightCategory) |
+ || (leftCategory == "percentage" && rightCategory == "length") |
+ || (rightCategory == "percentage" && leftCategory == "length"); |
+} |
+ |
+// Generate all the possible wrong combinations for a category. |
+function generateInvalidCalcsForCategory(category) { |
+ var results = []; |
+ results = results.concat(generateInvalidCalcsForOperator(isValidAdd, category, addoperators)); |
+ results = results.concat(generateInvalidCalcsForOperator(isValidMul, category, muloperators)); |
+ return results; |
+} |
+ |
+// Generate all the possible wrong expressions for an opertor type (additive/multiplicative). |
+function generateInvalidCalcsForOperator(isValid, category, operators) { |
+ var results = []; |
+ for (var i = 0; i < category.length; ++i) { |
+ var leftCategory = category[i]; |
+ for (var j = 0; j < categories.length; ++j) { |
+ var rightCategory = categories[j]; |
+ if (!isValid(leftCategory, rightCategory)) |
+ results = results.concat(generateInvalidCalcExpression(leftCategory, rightCategory, operators)); |
+ if (!isValid(rightCategory, leftCategory)) |
+ results = results.concat(generateInvalidCalcExpression(rightCategory, leftCategory, operators)); |
+ } |
} |
+ return results; |
+} |
+ |
+// Creating calc expressions with the given left/right categories and operators. |
+function generateInvalidCalcExpression(leftCategory, rightCategory, operators) { |
+ var results = []; |
+ for (var i = 0; i < inputs[leftCategory].length; ++i) |
+ for (var j = 0; j < inputs[rightCategory].length; ++j) |
+ for (var k = 0; k < operators.length; ++k) |
+ results.push(inputs[leftCategory][i] + " " + operators[k] + " " + inputs[rightCategory][j]); |
+ return results; |
} |
+ |
+// Assigning the generated calc expressions to a suitable CSS property. |
+function checkWrongCombinations(calcList, property, expected, cssFunction) { |
+ for (var i = 0; i < calcList.length; ++i) { |
+ var calcExpression = "calc(" + calcList[i] + ")"; |
+ var div = document.createElement("div"); |
+ document.body.appendChild(div); |
+ div.style[property] = expected; |
+ div.style[property] = cssFunction ? cssFunction + "(" + calcExpression + ")" : calcExpression; |
+ checkInvalidProperty(div, property, expected, calcList[i]); |
+ } |
+} |
+ |
+if (window.testRunner) |
+ testRunner.dumpAsText(); |
+ |
+// Check the handwritten calc expressions. |
+var elements = document.getElementsByTagName("div"); |
+for (var i = 0; i < elements.length; ++i) |
+ checkInvalidProperty(elements[i], "width", "100px", elements[i].innerHTML); |
+ |
+// Generating anc checking wrong combinations. |
Mike Lawther (Google)
2014/07/04 04:36:40
typo: 'anc' -> 'and'
|
+var calcsForLength = generateInvalidCalcsForCategory(["number", "percentage", "length"]); |
+var calcsForAngle = generateInvalidCalcsForCategory(["angle"]); |
+var calcsForTime = generateInvalidCalcsForCategory(["time"]); |
+var calcsForFrequency = generateInvalidCalcsForCategory(["frequency"]); |
+ |
+checkWrongCombinations(calcsForLength, "width", "100px"); |
+checkWrongCombinations(calcsForAngle, "transform", "matrix(1, 0, 0, 1, 0, 0)", "rotate"); |
+checkWrongCombinations(calcsForTime, "-webkit-animation-delay", "100s"); |
+ |
</script> |