Bug 1294863 - Part 3: Add tests for CSS variable registrations changing causing reevaluation of @supports conditions. r?heycam
We add another reftest and extend the Properties & Values API Web Platform Test.
MozReview-Commit-ID: 4SRkOyZ2ZTW
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-properties-and-values/properties-and-values-04-ref.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<head>
+ <meta charset=utf-8>
+ <title>CSS Properties & Values API - Reference #4</title>
+ <style>
+body {
+ color: green;
+}
+ </style>
+</head>
+<body>
+ This text must be green.
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-properties-and-values/properties-and-values-04.html
@@ -0,0 +1,33 @@
+<!doctype html>
+<!--
+ This test will pass in a version of Firefox with Properties &
+ Values disabled, because then all variables parse in @supports
+ conditions regardless of type. It will fail if @supports rules are not refreshed properly.
+-->
+<head>
+ <meta charset=utf-8>
+ <title>CSS Properties & Values API - Test #4</title>
+ <script type="text/javascript">
+ CSS.registerProperty({ name: "--my-property", syntax: "<number>" });
+ </script>
+ <style>
+body {
+ color: red;
+}
+@supports (--my-property: green) {
+ body {
+ color: green;
+ }
+}
+ </style>
+ <script type="text/javascript">
+ window.onload = function () {
+ CSS.unregisterProperty("--my-property");
+ CSS.registerProperty({ name: "--my-property", syntax: "<color>" });
+ };
+ </script>
+</head>
+<body>
+ This text must be green.
+</body>
+</html>
--- a/layout/reftests/css-properties-and-values/reftest.list
+++ b/layout/reftests/css-properties-and-values/reftest.list
@@ -1,6 +1,7 @@
default-preferences pref(layout.css.properties_and_values.enabled,true)
== properties-and-values-01a.html properties-and-values-01-ref.html
== properties-and-values-01b.html properties-and-values-01-ref.html
== properties-and-values-02.html properties-and-values-02-ref.html
== properties-and-values-03.html properties-and-values-03-ref.html
+== properties-and-values-04.html properties-and-values-04-ref.html
--- a/testing/web-platform/tests/css-houdini/properties-and-values.html
+++ b/testing/web-platform/tests/css-houdini/properties-and-values.html
@@ -947,9 +947,62 @@ for (let spec of computedValueTests) {
expected, "computed value equals expected value");
} finally {
child.removeAttribute("style");
CSS.unregisterProperty("--computed");
}
}, "computed value: " + JSON.stringify(spec));
}
+
+test(function () {
+ CSS.registerProperty({ name: "--my-property", syntax: "<number>"});
+ try {
+ let style = document.createElement("style");
+ document.head.appendChild(style);
+ let sheet = style.sheet;
+
+ // Use the rgb() values because this is how we serialize color().
+ sheet.insertRule("#child { color: rgb(255, 0, 0) }", 0);
+ let getColor = () => window.getComputedStyle(child).getPropertyValue("color");
+ assert_equals(getColor(), "rgb(255, 0, 0)",
+ "Initial color of child should be red.");
+
+ sheet.insertRule("@supports (--my-property: 5) { #child { color: rgb(0, 255, 0) } }", 1);
+ assert_equals(getColor(), "rgb(0, 255, 0)",
+ "Correctly-typed declaration in @supports should change color to green.");
+
+ sheet.deleteRule(1);
+ sheet.insertRule("@supports (--my-property: red) { #child { color: rgb(0, 255, 0) } }", 1);
+ assert_equals(getColor(), "rgb(255, 0, 0)",
+ "Wrongly-typed declaration in @supports should revert color to red.");
+
+ CSS.unregisterProperty("--my-property");
+ CSS.registerProperty({ name: "--my-property", syntax: "<color>" });
+ assert_equals(getColor(), "rgb(0, 255, 0)",
+ "The previously wrongly-typed declaration is now correctly-typed.");
+
+ sheet.insertRule("@supports (--my-property: 5px) { #child { color: rgb(0, 0, 255) } }", 2);
+ assert_equals(getColor(), "rgb(0, 255, 0)",
+ "We added another @supports rule with a different type (should have " +
+ "no effect.");
+
+ CSS.unregisterProperty("--my-property");
+ CSS.registerProperty({ name: "--my-property", syntax: "<percentage> | <length>" });
+ assert_equals(getColor(), "rgb(0, 0, 255)",
+ "We registered with yet another type, which should cause us to switch.");
+
+ CSS.unregisterProperty("--my-property");
+ assert_equals(getColor(), "rgb(0, 0, 255)",
+ "Unregistering the property altogether should cause us just to stick " +
+ "with the last supports rule, as with regular variables.");
+ // This behavior is tested by the regular variables tests, too.
+ } finally {
+ try {
+ // Hopefully don't mess up future tests, although this itself might throw.
+ CSS.unregisterProperty("--my-property");
+ } catch (e) {
+ // Don't care.
+ }
+ }
+}, "@supports conditions should be re-checked when we change property " +
+ "registrations.");
</script>