Merge pull request #11636 from ewilligers/css-color-parsing
[css-color] Parsing color and opacity
diff --git a/css/css-color/parsing/color-invalid.html b/css/css-color/parsing/color-invalid.html
new file mode 100644
index 0000000..978eb89
--- /dev/null
+++ b/css/css-color/parsing/color-invalid.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Color Module Level 3: parsing color with invalid values</title>
+<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+<link rel="help" href="https://www.w3.org/TR/css-color-3/#color0">
+<meta name="assert" content="color supports only the grammar '<color>'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="resources/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_invalid_value("color", "auto");
+test_invalid_value("color", "123");
+test_invalid_value("color", "#12");
+test_invalid_value("color", "#123456789");
+test_invalid_value("color", "rgb");
+test_invalid_value("color", "rgb(1)");
+test_invalid_value("color", "rgb(1,2,3,4,5)");
+test_invalid_value("color", "hsla(1,2,3,4,5)");
+test_invalid_value("color", "rgb(10%, 20, 30%)");
+test_invalid_value("color", "rgba(-2, 300, 400%, -0.5)");
+</script>
+</body>
+</html>
diff --git a/css/css-color/parsing/color-valid.html b/css/css-color/parsing/color-valid.html
new file mode 100644
index 0000000..76e8484
--- /dev/null
+++ b/css/css-color/parsing/color-valid.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Color Module Level 3: parsing color with valid values</title>
+<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+<link rel="help" href="https://www.w3.org/TR/css-color-3/#color0">
+<meta name="assert" content="color supports the full grammar '<color>'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="resources/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_valid_value("color", "currentcolor"); // Edge serializes as currentColor.
+test_valid_value("color", "transparent");
+test_valid_value("color", "red");
+test_valid_value("color", "magenta");
+test_valid_value("color", "#234", "rgb(34, 51, 68)");
+test_valid_value("color", "#FEDCBA", "rgb(254, 220, 186)");
+test_valid_value("color", "rgb(2, 3, 4)");
+test_valid_value("color", "rgb(100%, 0%, 0%)", "rgb(255, 0, 0)");
+test_valid_value("color", "rgba(2, 3, 4, 0.5)"); // Safari serializes alpha-value 0.498039
+test_valid_value("color", "hsl(120, 100%, 50%)", ["rgb(0, 255, 0)", "hsl(120, 100%, 50%)"]);
+test_valid_value("color", "hsla(120, 100%, 50%, 0.25)", ["rgba(0, 255, 0, 0.25)", "hsla(120, 100%, 50%, 0.25)"]); // Safari serializes alpha-value 0.247059
+test_valid_value("color", "rgb(-2, 3, 4)", "rgb(0, 3, 4)");
+test_valid_value("color", "rgb(100, 200, 300)", "rgb(100, 200, 255)");
+test_valid_value("color", "rgb(20, 10, 0, -10)", "rgba(20, 10, 0, 0)"); // Not supported by Edge/Safari.
+test_valid_value("color", "rgb(100%, 200%, 300%)", "rgb(255, 255, 255)");
+</script>
+</body>
+</html>
diff --git a/css/css-color/parsing/opacity-invalid.html b/css/css-color/parsing/opacity-invalid.html
new file mode 100644
index 0000000..955903f
--- /dev/null
+++ b/css/css-color/parsing/opacity-invalid.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS opacity Module Level 3: parsing opacity with invalid values</title>
+<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+<link rel="help" href="https://www.w3.org/TR/css-color-3/#opacity">
+<meta name="assert" content="opacity supports only the grammar '<alphavalue>'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="resources/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_invalid_value("opacity", "auto");
+test_invalid_value("opacity", "10px");
+test_invalid_value("opacity", "0 1");
+</script>
+</body>
+</html>
diff --git a/css/css-color/parsing/opacity-valid.html b/css/css-color/parsing/opacity-valid.html
new file mode 100644
index 0000000..738c3d0
--- /dev/null
+++ b/css/css-color/parsing/opacity-valid.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS opacity Module Level 3: parsing opacity with valid values</title>
+<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+<link rel="help" href="https://www.w3.org/TR/css-color-3/#opacity">
+<meta name="assert" content="opacity supports the full grammar '<alphavalue>'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="resources/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_valid_value("opacity", "1");
+test_valid_value("opacity", "0.5");
+test_valid_value("opacity", "0");
+test_valid_value("opacity", "-2");
+test_valid_value("opacity", "3");
+</script>
+</body>
+</html>
diff --git a/css/css-color/parsing/resources/parsing-testcommon.js b/css/css-color/parsing/resources/parsing-testcommon.js
new file mode 100644
index 0000000..b075882
--- /dev/null
+++ b/css/css-color/parsing/resources/parsing-testcommon.js
@@ -0,0 +1,39 @@
+'use strict';
+
+// serializedValue can be the expected serialization of value,
+// or an array of permitted serializations,
+// or omitted if value should serialize as value.
+function test_valid_value(property, value, serializedValue) {
+ if (arguments.length < 3)
+ serializedValue = value;
+
+ var stringifiedValue = JSON.stringify(value);
+
+ test(function(){
+ var div = document.createElement('div');
+ div.style[property] = value;
+ assert_not_equals(div.style.getPropertyValue(property), "", "property should be set");
+
+ var div = document.createElement('div');
+ div.style[property] = value;
+ var readValue = div.style.getPropertyValue(property);
+ if (serializedValue instanceof Array)
+ assert_in_array(readValue, serializedValue, "serialization should be sound");
+ else
+ assert_equals(readValue, serializedValue, "serialization should be canonical");
+
+ div.style[property] = readValue;
+ assert_equals(div.style.getPropertyValue(property), readValue, "serialization should round-trip");
+
+ }, "e.style['" + property + "'] = " + stringifiedValue + " should set the property value");
+}
+
+function test_invalid_value(property, value) {
+ var stringifiedValue = JSON.stringify(value);
+
+ test(function(){
+ var div = document.createElement('div');
+ div.style[property] = value;
+ assert_equals(div.style.getPropertyValue(property), "");
+ }, "e.style['" + property + "'] = " + stringifiedValue + " should not set the property value");
+}
