Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(107)

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: LayoutTests/css3/calc/calc-errors.html

Issue 345903005: calc expressions should support time, angle and frequency values. (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: Updated patch Created 6 years, 6 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « no previous file | LayoutTests/css3/calc/calc-errors-expected.txt » ('j') | LayoutTests/css3/calc/calc-with-time-angle-and-frequency-values.html » ('J')
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
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>
« no previous file with comments | « no previous file | LayoutTests/css3/calc/calc-errors-expected.txt » ('j') | LayoutTests/css3/calc/calc-with-time-angle-and-frequency-values.html » ('J')

Powered by Google App Engine
This is Rietveld 408576698