Address spec changes re. color-mix.
It was clarified that the percentages are weights, and two weights are
now allowed. Missing percentages are computed as 100% - the other or
50%. Other than that, commas are required etc, which is good since
that's how I implemented it originally.
Differential Revision: https://phabricator.services.mozilla.com/D107295
bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1696434
gecko-commit: 8e55e1c1b7df13639320c274d02edeb10d4f40e6
gecko-reviewers: boris, desktop-theme-reviewers
diff --git a/css/css-color/color-mix-basic-001.tentative.html b/css/css-color/color-mix-basic-001.tentative.html
index a2bcc57..9e3b814 100644
--- a/css/css-color/color-mix-basic-001.tentative.html
+++ b/css/css-color/color-mix-basic-001.tentative.html
@@ -43,16 +43,25 @@
animation.pause();
animation.currentTime = 1000 * animationProgress;
- let value = "color-mix(in srgb, " + from;
- if (animationProgressExplicit) {
- value += " " + (animationProgress * 100) + "%";
- }
- value += ", " + to + ")";
- testElement.style.backgroundColor = "";
- testElement.style.backgroundColor = value;
+ let progress = ` ${animationProgress * 100}%`;
+ let oneMinusProgress = ` ${(1 - animationProgress) * 100}%`;
+ let values = [
+ `color-mix(in srgb, ${from}, ${to} ${progress})`,
+ `color-mix(in srgb, ${from} ${oneMinusProgress}, ${to})`,
+ `color-mix(in srgb, ${from} ${oneMinusProgress}, ${to} ${progress})`,
+ ];
- assert_not_equals(testElement.style.backgroundColor, "", "Should parse " + value);
- assert_equals(testStyle.backgroundColor, refStyle.backgroundColor, "Colors should match");
+ if (animationProgress == 0.5) {
+ values.push(`color-mix(in srgb, ${from}, ${to})`);
+ }
+
+ for (let value of values) {
+ testElement.style.backgroundColor = "";
+ testElement.style.backgroundColor = value;
+
+ assert_not_equals(testElement.style.backgroundColor, "", "Should parse " + value);
+ assert_equals(testStyle.backgroundColor, refStyle.backgroundColor, "Colors should match for " + value);
+ }
}, `From ${from} to ${to} at ${animationProgress}`);
}
</script>
