Adding upstream version 115.8.0esr.upstream/115.8.0esr

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
author: Daniel Baumann <daniel.baumann@progress-linux.org> 2024-04-19 01:47:29 +0000
committer: Daniel Baumann <daniel.baumann@progress-linux.org> 2024-04-19 01:47:29 +0000
commit: 0ebf5bdf043a27fd3dfb7f92e0cb63d88954c44d (patch)
tree: a31f07c9bcca9d56ce61e9a1ffd30ef350d513aa /testing/web-platform/tests/css/css-images/parsing
parent: Initial commit. (diff)
download: firefox-esr-0ebf5bdf043a27fd3dfb7f92e0cb63d88954c44d.tar.xz
firefox-esr-0ebf5bdf043a27fd3dfb7f92e0cb63d88954c44d.zip
19 files changed, 684 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-images/parsing/gradient-interpolation-method-computed.html b/testing/web-platform/tests/css/css-images/parsing/gradient-interpolation-method-computed.html
new file mode 100644
index 0000000000..9593a59777
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/parsing/gradient-interpolation-method-computed.html
@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Images Module Level 4: parsing gradients with color interpolation methods</title>
+<link rel="author" title="Sam Weinig" href="mailto:weinig@apple.com">
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#gradients">
+<link rel="help" href="https://drafts.csswg.org/css-color-4/#color-interpolation-method">
+<meta name="assert" content="gradients supports the addition of color-interpolation-method to the grammar">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+</head>
+<body>
+<div id="target"></div>
+<div id="computedStyleTarget"></div>
+<script>
+
+const LINEAR_GRADIENT_SPECIFIERS = [
+    { input: '30deg' },
+    { input: 'to right bottom' },
+];
+
+const RADIAL_GRADIENT_SPECIFIERS = [
+    { input: '50px' },
+    { input: 'ellipse 50% 40em', output: '50% 40em' },
+    { input: 'at right center' },
+];
+
+const CONIC_GRADIENT_SPECIFIERS = [
+    { input: 'from 30deg' },
+    { input: 'at left 10px top 50em' },
+];
+
+const legacy_stops = "red, blue"
+const non_legacy_stops = "color(srgb 1 0 0), blue"
+
+// getComputedStyle can return different values than input
+function get_computed_style_value_for_stops(stops) {
+  const div = document.getElementById("computedStyleTarget");
+  computedColors = [];
+  stops.split(",").forEach(stop => {
+    div.style["color"] = stop;
+    computedColors.push(getComputedStyle(div)["color"]);
+  });
+  return computedColors.join(", ");
+}
+const legacy_stops_computed_style = get_computed_style_value_for_stops(legacy_stops);
+const non_legacy_stops_computed_style = get_computed_style_value_for_stops(non_legacy_stops);
+
+function test_gradients_no_specified_interpolation_method(gradientFunction, specifiers, stops, computed_stops)
+{
+    for (const specifier of specifiers) {
+        const input = specifier.input
+        const output = specifier.output ? specifier.output : specifier.input
+        test_computed_value(`background-image`, `${gradientFunction}(${input}, ${stops})`, `${gradientFunction}(${output}, ${computed_stops})`)
+    }
+}
+
+function test_gradients(gradientFunction, colorInterpolationMethod, colorInterpolationMethodResult, specifiers, stops, computed_stops) {
+    const resultForNoSpecifierCase = (colorInterpolationMethodResult == "") ? "" : `in ${colorInterpolationMethodResult}, `
+    test_computed_value(`background-image`, `${gradientFunction}(in ${colorInterpolationMethod}, ${stops})`, `${gradientFunction}(${resultForNoSpecifierCase}${computed_stops})`)
+
+    for (const specifier of specifiers) {
+        const input = specifier.input
+        const output = specifier.output ? specifier.output : specifier.input
+        const result = colorInterpolationMethodResult == "" ? ", " : ` in ${colorInterpolationMethodResult}, `
+        test_computed_value(`background-image`, `${gradientFunction}(${input} in ${colorInterpolationMethod}, ${stops})`, `${gradientFunction}(${output}${result}${computed_stops})`)
+        test_computed_value(`background-image`, `${gradientFunction}(in ${colorInterpolationMethod} ${input}, ${stops})`, `${gradientFunction}(${output}${result}${computed_stops})`)
+    }
+}
+
+function test_gradient_with_interpolation_method(gradientFunction, colorInterpolationMethod, colorInterpolationMethodResult, specifiers, stops, computed_stops) {
+    const colorInterpolationMethodResultForLegacyStops = (colorInterpolationMethodResult == "srgb") ? "" : colorInterpolationMethodResult;
+    test_gradients(gradientFunction, colorInterpolationMethod, colorInterpolationMethodResultForLegacyStops, specifiers, legacy_stops, legacy_stops_computed_style);
+
+    const colorInterpolationMethodResultForNonLegacyStops = (colorInterpolationMethodResult == "oklab") ? "" : colorInterpolationMethodResult;
+    test_gradients(gradientFunction, colorInterpolationMethod, colorInterpolationMethodResultForNonLegacyStops, specifiers, non_legacy_stops, non_legacy_stops_computed_style);
+}
+
+function test_each_interpolation_method(gradientFunction, specifiers) {
+    test_gradients_no_specified_interpolation_method(gradientFunction, specifiers, legacy_stops, legacy_stops_computed_style);
+    test_gradients_no_specified_interpolation_method(gradientFunction, specifiers, non_legacy_stops, non_legacy_stops_computed_style);
+
+    for (const colorSpace of [ "lab", "oklab", "srgb", "srgb-linear", "xyz", "xyz-d50", "xyz-d65" ]) {
+        const colorInterpolationMethod = colorSpace
+        const colorInterpolationMethodResult = colorSpace == "xyz" ? "xyz-d65" : colorInterpolationMethod
+
+        test_gradient_with_interpolation_method(gradientFunction, colorInterpolationMethod, colorInterpolationMethodResult, specifiers)
+    }
+
+    for (const colorSpace of [ "hsl", "hwb", "lch", "oklch" ]) {
+        for (const hueInterpolationMethod of [ "", " shorter hue", " longer hue", " increasing hue", " decreasing hue" ]) {
+            const colorInterpolationMethod = `${colorSpace}${hueInterpolationMethod}`
+            const colorInterpolationMethodResult = hueInterpolationMethod == " shorter hue" ? colorSpace : colorInterpolationMethod
+
+            test_gradient_with_interpolation_method(gradientFunction, colorInterpolationMethod, colorInterpolationMethodResult, specifiers)
+        }
+    }
+}
+
+test_each_interpolation_method("linear-gradient", LINEAR_GRADIENT_SPECIFIERS)
+test_each_interpolation_method("radial-gradient", RADIAL_GRADIENT_SPECIFIERS)
+test_each_interpolation_method("conic-gradient", CONIC_GRADIENT_SPECIFIERS)
+
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/parsing/gradient-interpolation-method-invalid.html b/testing/web-platform/tests/css/css-images/parsing/gradient-interpolation-method-invalid.html
new file mode 100644
index 0000000000..336a387e3c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/parsing/gradient-interpolation-method-invalid.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Images Module Level 4: parsing invalid gradients with color interpolation methods</title>
+<link rel="author" title="Sam Weinig" href="mailto:weinig@apple.com">
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#gradients">
+<link rel="help" href="https://drafts.csswg.org/css-color-4/#color-interpolation-method">
+<meta name="assert" content="gradients supports the addition of color-interpolation-method to the grammar">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+
+function test_each_interpolation_method(gradientFunction) {
+    test_invalid_value(`background-image`, `${gradientFunction}(, red, blue)`)
+
+    for (const colorSpace of [ "lab", "oklab", "srgb", "srgb-linear", "xyz", "xyz-d50", "xyz-d65" ]) {
+        const colorInterpolationMethod = colorSpace
+
+        test_invalid_value(`background-image`, `${gradientFunction}(red, blue, ${colorInterpolationMethod})`) // interpolation method after color stops
+        test_invalid_value(`background-image`, `${gradientFunction}(${colorSpace} ${colorSpace}, red, blue)`) // duplicated color space
+        test_invalid_value(`background-image`, `${gradientFunction}(${colorSpace} shorter hue, red, blue)`) // invalid color space for hue modifier
+    }
+
+    for (const colorSpace of [ "hsl", "hwb", "lch", "oklch" ]) {
+        test_invalid_value(`background-image`, `${gradientFunction}(${colorSpace} foo hue, red, blue)`) // invalid hue method
+        test_invalid_value(`background-image`, `${gradientFunction}(${colorSpace} hue, red, blue)`) // missing interpolation method
+        test_invalid_value(`background-image`, `${gradientFunction}(${colorSpace} ${colorSpace}, red, blue)`) // duplicated color space
+
+        for (const hueInterpolationMethod of [ "shorter", "longer", "increasing", "decreasing", "specified" ]) {
+            test_invalid_value(`background-image`, `${gradientFunction}(${colorSpace} ${hueInterpolationMethod}, red, blue)`) // missing 'hue' keyword
+            test_invalid_value(`background-image`, `${gradientFunction}(${hueInterpolationMethod} hue ${colorSpace}, red, blue)`) // hue method before color space
+            test_invalid_value(`background-image`, `${gradientFunction}(red, blue, ${colorSpace} ${hueInterpolationMethod} hue)`) // interpolation method after color stops
+        }
+    }
+}
+
+test_each_interpolation_method("linear-gradient")
+test_each_interpolation_method("radial-gradient")
+test_each_interpolation_method("conic-gradient")
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/parsing/gradient-interpolation-method-valid.html b/testing/web-platform/tests/css/css-images/parsing/gradient-interpolation-method-valid.html
new file mode 100644
index 0000000000..8bb6b1caff
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/parsing/gradient-interpolation-method-valid.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Images Module Level 4: parsing gradients with color interpolation methods</title>
+<link rel="author" title="Sam Weinig" href="mailto:weinig@apple.com">
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#gradients">
+<link rel="help" href="https://drafts.csswg.org/css-color-4/#color-interpolation-method">
+<meta name="assert" content="gradients supports the addition of color-interpolation-method to the grammar">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+
+const LINEAR_GRADIENT_SPECIFIERS = [
+    { input: '30deg' },
+    { input: 'to right bottom' },
+];
+
+const RADIAL_GRADIENT_SPECIFIERS = [
+    { input: '50px' },
+    { input: 'ellipse 50% 40em', output: '50% 40em' },
+    { input: 'at right center' },
+];
+
+const CONIC_GRADIENT_SPECIFIERS = [
+    { input: 'from 30deg' },
+    { input: 'at left 10px top 50em' },
+];
+
+const legacy_stops = "red, blue"
+const legacy_stops_with_hint = "red, 50%, blue"
+const non_legacy_stops = "color(srgb 1 0 0), blue"
+
+function test_gradients_no_specified_interpolation_method(gradientFunction, specifiers, stops)
+{
+    for (const specifier of specifiers) {
+        const input = specifier.input
+        const output = specifier.output ? specifier.output : specifier.input
+        test_valid_value(`background-image`, `${gradientFunction}(${input}, ${stops})`, `${gradientFunction}(${output}, ${stops})`)
+    }
+}
+
+function test_gradients(gradientFunction, colorInterpolationMethod, colorInterpolationMethodResult, specifiers, stops) {
+    const resultForNoSpecifierCase = (colorInterpolationMethodResult == "") ? "" : `in ${colorInterpolationMethodResult}, `
+    test_valid_value(`background-image`, `${gradientFunction}(in ${colorInterpolationMethod}, ${stops})`, `${gradientFunction}(${resultForNoSpecifierCase}${stops})`)
+
+    for (const specifier of specifiers) {
+        const input = specifier.input
+        const output = specifier.output ? specifier.output : specifier.input
+        const result = colorInterpolationMethodResult == "" ? ", " : ` in ${colorInterpolationMethodResult}, `
+        test_valid_value(`background-image`, `${gradientFunction}(${input} in ${colorInterpolationMethod}, ${stops})`, `${gradientFunction}(${output}${result}${stops})`)
+        test_valid_value(`background-image`, `${gradientFunction}(in ${colorInterpolationMethod} ${input}, ${stops})`, `${gradientFunction}(${output}${result}${stops})`)
+    }
+}
+
+function test_gradient_with_interpolation_method(gradientFunction, colorInterpolationMethod, colorInterpolationMethodResult, specifiers, stops) {
+    const colorInterpolationMethodResultForLegacyStops = (colorInterpolationMethodResult == "srgb") ? "" : colorInterpolationMethodResult;
+    test_gradients(gradientFunction, colorInterpolationMethod, colorInterpolationMethodResultForLegacyStops, specifiers, legacy_stops)
+    test_gradients(gradientFunction, colorInterpolationMethod, colorInterpolationMethodResultForLegacyStops, specifiers, legacy_stops_with_hint)
+
+    const colorInterpolationMethodResultForNonLegacyStops = (colorInterpolationMethodResult == "oklab") ? "" : colorInterpolationMethodResult;
+    test_gradients(gradientFunction, colorInterpolationMethod, colorInterpolationMethodResultForNonLegacyStops, specifiers, non_legacy_stops)
+}
+
+function test_each_interpolation_method(gradientFunction, specifiers) {
+    test_gradients_no_specified_interpolation_method(gradientFunction, specifiers, legacy_stops)
+    test_gradients_no_specified_interpolation_method(gradientFunction, specifiers, legacy_stops_with_hint)
+    test_gradients_no_specified_interpolation_method(gradientFunction, specifiers, non_legacy_stops)
+
+    for (const colorSpace of [ "lab", "oklab", "srgb", "srgb-linear", "xyz", "xyz-d50", "xyz-d65" ]) {
+        const colorInterpolationMethod = colorSpace
+        const colorInterpolationMethodResult = colorSpace == "xyz" ? "xyz-d65" : colorInterpolationMethod
+
+        test_gradient_with_interpolation_method(gradientFunction, colorInterpolationMethod, colorInterpolationMethodResult, specifiers)
+    }
+
+    for (const colorSpace of [ "hsl", "hwb", "lch", "oklch" ]) {
+        for (const hueInterpolationMethod of [ "", " shorter hue", " longer hue", " increasing hue", " decreasing hue" ]) {
+            const colorInterpolationMethod = `${colorSpace}${hueInterpolationMethod}`
+            const colorInterpolationMethodResult = hueInterpolationMethod == " shorter hue" ? colorSpace : colorInterpolationMethod
+
+            test_gradient_with_interpolation_method(gradientFunction, colorInterpolationMethod, colorInterpolationMethodResult, specifiers)
+        }
+    }
+}
+
+test_each_interpolation_method("linear-gradient", LINEAR_GRADIENT_SPECIFIERS)
+test_each_interpolation_method("radial-gradient", RADIAL_GRADIENT_SPECIFIERS)
+test_each_interpolation_method("conic-gradient", CONIC_GRADIENT_SPECIFIERS)
+
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/parsing/gradient-position-invalid.html b/testing/web-platform/tests/css/css-images/parsing/gradient-position-invalid.html
new file mode 100644
index 0000000000..63ac09fc17
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/parsing/gradient-position-invalid.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Images Module Level 3: parsing gradients with invalid position values</title>
+<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-values-4/#typedef-position">
+<meta name="assert" content="gradient positions support only the '<position>' grammar.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_invalid_value("background-image", "radial-gradient(at top 0px, red, blue)");
+
+// The following were supported in an earlier version of the spec.
+// https://github.com/w3c/csswg-drafts/issues/2140
+// Deprecated in Blink with support to be removed in M68, around July 2018.
+test_invalid_value("background-image", "radial-gradient(at center left 1px, red, blue)");
+test_invalid_value("background-image", "radial-gradient(at center top 2px, red, blue)");
+test_invalid_value("background-image", "radial-gradient(at right 3% center, red, blue)");
+test_invalid_value("background-image", "radial-gradient(at left 4px top, red, blue)");
+test_invalid_value("background-image", "radial-gradient(at right top 5px, red, blue)");
+test_invalid_value("background-image", "radial-gradient(at bottom 6% center, red, blue)");
+test_invalid_value("background-image", "radial-gradient(at bottom 7% left, red, blue)");
+test_invalid_value("background-image", "radial-gradient(at bottom right 8%, red, blue)");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/parsing/gradient-position-valid.html b/testing/web-platform/tests/css/css-images/parsing/gradient-position-valid.html
new file mode 100644
index 0000000000..d2e3ff072b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/parsing/gradient-position-valid.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Images Module Level 3: parsing gradients with valid position values</title>
+<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-values-4/#typedef-position">
+<meta name="assert" content="gradient positions support the full '<position>' grammar.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+// Where two values are shown, the first serialization is being used by Blink/Firefox/WebKit and the second by Edge.
+// Where three values are shown, the first is used by Blink/Webkit, the second by Edge and the third by Firefox.
+
+test_valid_value("background-image", "radial-gradient(at 10%, red, blue)", ["radial-gradient(at 10% center, red, blue)", "radial-gradient(at 10%, red, blue)"]);
+test_valid_value("background-image", "radial-gradient(at 20% 30px, red, blue)");
+test_valid_value("background-image", "radial-gradient(at 30px center, red, blue)", ["radial-gradient(at 30px center, red, blue)", "radial-gradient(at 30px, red, blue)"]);
+test_valid_value("background-image", "radial-gradient(at 40px top, red, blue)");
+test_valid_value("background-image", "radial-gradient(at bottom 10% right 20%, red, blue)", "radial-gradient(at right 20% bottom 10%, red, blue)");
+test_valid_value("background-image", "radial-gradient(at bottom right, red, blue)", "radial-gradient(at right bottom, red, blue)");
+test_valid_value("background-image", "radial-gradient(at center, red, blue)", ["radial-gradient(at center center, red, blue)", "radial-gradient(at center, red, blue)", "radial-gradient(red, blue)"]);
+test_valid_value("background-image", "radial-gradient(at center 50px, red, blue)");
+test_valid_value("background-image", "radial-gradient(at center bottom, red, blue)", ["radial-gradient(at center bottom, red, blue)", "radial-gradient(at bottom, red, blue)"]);
+test_valid_value("background-image", "radial-gradient(at center center, red, blue)", ["radial-gradient(at center center, red, blue)", "radial-gradient(at center, red, blue)", "radial-gradient(red, blue)"]);
+test_valid_value("background-image", "radial-gradient(at center left, red, blue)", ["radial-gradient(at left center, red, blue)", "radial-gradient(at left, red, blue)"]);
+test_valid_value("background-image", "radial-gradient(at left, red, blue)", ["radial-gradient(at left center, red, blue)", "radial-gradient(at left, red, blue)"]);
+test_valid_value("background-image", "radial-gradient(at left bottom, red, blue)");
+test_valid_value("background-image", "radial-gradient(at left center, red, blue)", ["radial-gradient(at left center, red, blue)", "radial-gradient(at left, red, blue)"]);
+test_valid_value("background-image", "radial-gradient(at right 40%, red, blue)");
+test_valid_value("background-image", "radial-gradient(at right 30% top 60px, red, blue)");
+test_valid_value("background-image", "radial-gradient(at top, red, blue)", ["radial-gradient(at center top, red, blue)", "radial-gradient(at top, red, blue)"]);
+test_valid_value("background-image", "radial-gradient(at top center, red, blue)", ["radial-gradient(at center top, red, blue)", "radial-gradient(at top, red, blue)"]);
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/parsing/image-orientation-computed.html b/testing/web-platform/tests/css/css-images/parsing/image-orientation-computed.html
new file mode 100644
index 0000000000..23a27a3393
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/parsing/image-orientation-computed.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Images: getComputedStyle().imageOrientation</title>
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
+<meta name="assert" content="image-orientation computed value is as specified.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+</head>
+<body>
+<div id="target"></div>
+<script>
+test_computed_value("image-orientation", "from-image");
+test_computed_value("image-orientation", "none");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/parsing/image-orientation-invalid.html b/testing/web-platform/tests/css/css-images/parsing/image-orientation-invalid.html
new file mode 100644
index 0000000000..72e32eba1d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/parsing/image-orientation-invalid.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Images Module Level 3: parsing image-orientation with invalid values</title>
+<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
+<meta name="assert" content="image-orientation supports only the grammar 'from-image | none'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_invalid_value("image-orientation", "auto");
+test_invalid_value("image-orientation", "0");
+test_invalid_value("image-orientation", "0 flip");
+test_invalid_value("image-orientation", "0deg from-image");
+test_invalid_value("image-orientation", "flip 0deg");
+test_invalid_value("image-orientation", "flip from-image");
+test_invalid_value("image-orientation", "from-image 0deg");
+test_invalid_value("image-orientation", "from-image flip");
+
+// An older version of the spec allowed [ <angle> | <angle>? flip ] values,
+// so test that we no longer support them.
+test_invalid_value("image-orientation", "30deg");
+test_invalid_value("image-orientation", "flip");
+test_invalid_value("image-orientation", "0deg flip");
+test_invalid_value("image-orientation", "-1.25turn flip");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/parsing/image-orientation-valid.html b/testing/web-platform/tests/css/css-images/parsing/image-orientation-valid.html
new file mode 100644
index 0000000000..e40517bdc8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/parsing/image-orientation-valid.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Images Module Level 3: parsing image-orientation with valid values</title>
+<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
+<meta name="assert" content="image-orientation supports the full grammar 'from-image | none'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_valid_value("image-orientation", "from-image");
+test_valid_value("image-orientation", "none");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/parsing/image-rendering-computed.html b/testing/web-platform/tests/css/css-images/parsing/image-rendering-computed.html
new file mode 100644
index 0000000000..f682a795d4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/parsing/image-rendering-computed.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Images: getComputedStyle().imageRendering</title>
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-rendering">
+<meta name="assert" content="image-rendering computed value is as specified.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+</head>
+<body>
+<div id="target"></div>
+<script>
+test_computed_value("image-rendering", "auto");
+test_computed_value("image-rendering", "smooth");
+test_computed_value("image-rendering", "high-quality");
+test_computed_value("image-rendering", "crisp-edges");
+test_computed_value("image-rendering", "pixelated");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/parsing/image-rendering-invalid.html b/testing/web-platform/tests/css/css-images/parsing/image-rendering-invalid.html
new file mode 100644
index 0000000000..febb0555ec
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/parsing/image-rendering-invalid.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Images Module Level 3: parsing image-rendering with invalid values</title>
+<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-rendering">
+<meta name="assert" content="image-rendering supports only the grammar 'auto | smooth | high-quality | crisp-edges | pixelated'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_invalid_value("image-rendering", "none");
+test_invalid_value("image-rendering", "high-quality crisp-edges");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/parsing/image-rendering-valid.html b/testing/web-platform/tests/css/css-images/parsing/image-rendering-valid.html
new file mode 100644
index 0000000000..bf06b6f798
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/parsing/image-rendering-valid.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Images Module Level 3: parsing image-rendering with valid values</title>
+<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-rendering">
+<meta name="assert" content="image-rendering supports the full grammar 'auto | smooth | high-quality | crisp-edges | pixelated'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_valid_value("image-rendering", "auto");
+test_valid_value("image-rendering", "smooth");
+test_valid_value("image-rendering", "high-quality");
+test_valid_value("image-rendering", "crisp-edges");
+test_valid_value("image-rendering", "pixelated");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/parsing/image-resolution-invalid.html b/testing/web-platform/tests/css/css-images/parsing/image-resolution-invalid.html
new file mode 100644
index 0000000000..bc92a7b501
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/parsing/image-resolution-invalid.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Images Module Level 4: parsing image-resolution with invalid values</title>
+<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#propdef-image-resolution">
+<meta name="assert" content="image-resolution supports only the grammar '[ from-image || <resolution> ] && snap?'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_invalid_value("image-resolution", "auto");
+test_invalid_value("image-resolution", "100%");
+test_invalid_value("image-resolution", "2");
+test_invalid_value("image-resolution", "3dpi snap from-image");
+test_invalid_value("image-resolution", "from-image snap 4dppx");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/parsing/image-resolution-valid.html b/testing/web-platform/tests/css/css-images/parsing/image-resolution-valid.html
new file mode 100644
index 0000000000..e04d1120ee
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/parsing/image-resolution-valid.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Images Module Level 4: parsing image-resolution with valid values</title>
+<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#propdef-image-resolution">
+<meta name="assert" content="image-resolution supports the full grammar '[ from-image || <resolution> ] && snap?'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+
+
+
+test_valid_value("image-resolution", "1dpi");
+test_valid_value("image-resolution", "2dpcm from-image");
+test_valid_value("image-resolution", "3dppx from-image snap");
+test_valid_value("image-resolution", "4dpi snap");
+test_valid_value("image-resolution", "from-image");
+test_valid_value("image-resolution", "from-image 5dpcm");
+test_valid_value("image-resolution", "from-image 6dppx snap");
+test_valid_value("image-resolution", "from-image snap");
+test_valid_value("image-resolution", "snap 7.5dpi");
+test_valid_value("image-resolution", "snap -8dpcm from-image");
+test_valid_value("image-resolution", "snap from-image");
+test_valid_value("image-resolution", "snap from-image 0dppx");
+
+
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/parsing/object-fit-computed.html b/testing/web-platform/tests/css/css-images/parsing/object-fit-computed.html
new file mode 100644
index 0000000000..5d8b7c1f88
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/parsing/object-fit-computed.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Images: getComputedStyle().objectFit</title>
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#propdef-object-fit">
+<meta name="assert" content="object-fit computed value is as specified.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+</head>
+<body>
+<div id="target"></div>
+<script>
+test_computed_value("object-fit", "contain");
+test_computed_value("object-fit", "cover");
+test_computed_value("object-fit", "cover scale-down");
+test_computed_value("object-fit", "fill");
+test_computed_value("object-fit", "none");
+test_computed_value("object-fit", "scale-down");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/parsing/object-fit-invalid.html b/testing/web-platform/tests/css/css-images/parsing/object-fit-invalid.html
new file mode 100644
index 0000000000..f76460f56d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/parsing/object-fit-invalid.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Images Module Level 4: parsing object-fit with invalid values</title>
+<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#propdef-object-fit">
+<meta name="assert" content="object-fit supports only the grammar 'fill | none | [contain | cover] || scale-down'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_invalid_value("object-fit", "auto");
+test_invalid_value("object-fit", "contain cover");
+test_invalid_value("object-fit", "fill scale-down");
+test_invalid_value("object-fit", "contain fill");
+test_invalid_value("object-fit", "cover none");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/parsing/object-fit-valid.html b/testing/web-platform/tests/css/css-images/parsing/object-fit-valid.html
new file mode 100644
index 0000000000..f890562428
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/parsing/object-fit-valid.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Images Module Level 4: parsing object-fit with valid values</title>
+<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-4/#propdef-object-fit">
+<meta name="assert" content="object-fit supports the full grammar 'fill | none | [contain | cover] || scale-down'.">
+<meta name="assert" content="'scale-down' is equivalent to 'contain scale-down'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_valid_value("object-fit", "contain");
+test_valid_value("object-fit", "contain scale-down", "scale-down");
+test_valid_value("object-fit", "cover");
+test_valid_value("object-fit", "cover scale-down");
+test_valid_value("object-fit", "fill");
+test_valid_value("object-fit", "none");
+test_valid_value("object-fit", "scale-down");
+test_valid_value("object-fit", "scale-down contain", "scale-down");
+test_valid_value("object-fit", "scale-down cover", "cover scale-down");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/parsing/object-position-computed.html b/testing/web-platform/tests/css/css-images/parsing/object-position-computed.html
new file mode 100644
index 0000000000..97489149e9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/parsing/object-position-computed.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Images Module Level 3 Test: getComputedStyle().objectPosition</title>
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-object-position">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+</head>
+<body>
+<div id="target"></div>
+<script>
+test_computed_value("object-position", "10% center", "10% 50%");
+test_computed_value("object-position", "right 30% top 60px", "70% 60px");
+test_computed_value("object-position", "-20% -30px");
+test_computed_value("object-position", "30px center", "30px 50%");
+test_computed_value("object-position", "40px top", "40px 0%");
+test_computed_value("object-position", "right 20% bottom 10%", "80% 90%");
+test_computed_value("object-position", "right bottom", "100% 100%");
+test_computed_value("object-position", "center 50px", "50% 50px");
+test_computed_value("object-position", "center bottom", "50% 100%");
+test_computed_value("object-position", "left center", "0% 50%");
+test_computed_value("object-position", "left bottom", "0% 100%");
+test_computed_value("object-position", "right 40%", "100% 40%");
+test_computed_value("object-position", "center top", "50% 0%");
+test_computed_value("object-position", "center", "50% 50%");
+test_computed_value("object-position", "center center", "50% 50%");
+test_computed_value("object-position", "right 20px bottom 10px", "calc(100% - 20px) calc(100% - 10px)");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/parsing/object-position-invalid.html b/testing/web-platform/tests/css/css-images/parsing/object-position-invalid.html
new file mode 100644
index 0000000000..320f1a07c4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/parsing/object-position-invalid.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Images Module Level 3: parsing object-position with invalid values</title>
+<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-object-position">
+<meta name="assert" content="object-position supports only the '<position>' grammar.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_invalid_value("object-position", "auto");
+test_invalid_value("object-position", "1px 2px 3px");
+test_invalid_value("object-position", "left right");
+test_invalid_value("object-position", "bottom 10%");
+test_invalid_value("object-position", "bottom 10% top 20%");
+
+// The following were supported in an earlier version of the spec.
+// https://github.com/w3c/csswg-drafts/issues/2140
+// Deprecated in Blink with support to be removed in M68, around July 2018.
+test_invalid_value("object-position", "center left 1px");
+test_invalid_value("object-position", "center top 2px");
+test_invalid_value("object-position", "right 3% center");
+test_invalid_value("object-position", "left 4px top");
+test_invalid_value("object-position", "right top 5px");
+test_invalid_value("object-position", "bottom 6% center");
+test_invalid_value("object-position", "bottom 7% left");
+test_invalid_value("object-position", "bottom right 8%");
+
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/parsing/object-position-valid.html b/testing/web-platform/tests/css/css-images/parsing/object-position-valid.html
new file mode 100644
index 0000000000..90178c6602
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/parsing/object-position-valid.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Images Module Level 3: parsing object-position with valid values</title>
+<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-object-position">
+<meta name="assert" content="object-position supports the full '<position>' grammar.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+// First serialization is being returned by Blink/Firefox/WebKit, second by Edge.
+test_valid_value("object-position", "10%", ["10% center", "10% 50%"]);
+test_valid_value("object-position", "right 30% top 60px"); // "calc(70%) 60px" in Edge.
+test_valid_value("object-position", "-20% -30px");
+test_valid_value("object-position", "30px center", ["30px center", "30px 50%"]);
+test_valid_value("object-position", "40px top", ["40px top", "40px 0%"]);
+test_valid_value("object-position", "bottom 10% right 20%", "right 20% bottom 10%"); // "calc(80%) calc(90%)" in Edge.
+test_valid_value("object-position", "bottom right", ["right bottom", "100% 100%"]);
+test_valid_value("object-position", "center 50px", ["center 50px", "50% 50px"]);
+test_valid_value("object-position", "center bottom", ["center bottom", "50% 100%"]);
+test_valid_value("object-position", "center left", ["left center", "0% 50%"]);
+test_valid_value("object-position", "left", ["left center", "0% 50%"]);
+test_valid_value("object-position", "left bottom", ["left bottom", "0% 100%"]);
+test_valid_value("object-position", "left center", ["left center", "0% 50%"]);
+test_valid_value("object-position", "right 40%", ["right 40%", "100% 40%"]);
+test_valid_value("object-position", "top", ["center top", "50% 0%"]);
+test_valid_value("object-position", "top center", ["center top", "50% 0%"]);
+
+// ["center center"] in Blink and Firefox, "center" in WebKit, "50% 50%" in Edge.
+test_valid_value("object-position", "center", ["center center", "center", "50% 50%"]);
+test_valid_value("object-position", "center center", ["center center", "center", "50% 50%"]);
+</script>
+</body>
+</html>
author	Daniel Baumann <daniel.baumann@progress-linux.org>	2024-04-19 01:47:29 +0000
committer	Daniel Baumann <daniel.baumann@progress-linux.org>	2024-04-19 01:47:29 +0000
commit	0ebf5bdf043a27fd3dfb7f92e0cb63d88954c44d (patch)
tree	a31f07c9bcca9d56ce61e9a1ffd30ef350d513aa /testing/web-platform/tests/css/css-images/parsing
parent	Initial commit. (diff)
download	firefox-esr-0ebf5bdf043a27fd3dfb7f92e0cb63d88954c44d.tar.xz firefox-esr-0ebf5bdf043a27fd3dfb7f92e0cb63d88954c44d.zip