Skip to content

Commit

Permalink
Relative color components are unitless, remove tests assuming otherwise
Browse files Browse the repository at this point in the history
Some old spec examples combined color components (which are unitless)
with percentages and angles. Per spec, this is invalid:

https://drafts.css-houdini.org/css-typed-om-1/#numeric-typing

These examples were changed here, but remained in WPT:
w3c/csswg-drafts@76d3f78
w3c/csswg-drafts@c3de94f

These invalid tests are removed and the valid, unitless versions that
exist inside the spec are included in color-valid-relative-color and
color-computed-relative-color instead:
https://drafts.csswg.org/css-color-5/

Since tests are being removed here, virtual/stable needs to change.

Also, the Example numbers are removed from the test file because they
appear to change often. For example, they are now different on the
publication version, which is different from the current draft, which
is different from the test. It's probably not worthwhile to keep these
in sync.

Bug: 1447327
Change-Id: I8796b63db60e77a0be429360d11de0d9fd02b5f5
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4827664
Reviewed-by: Rune Lillesveen <futhark@chromium.org>
Commit-Queue: Aaron Krajeski <aaronhk@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1190680}
  • Loading branch information
mysteryDate authored and pull[bot] committed Oct 6, 2023
1 parent b7902e1 commit 1dcb7f0
Show file tree
Hide file tree
Showing 2 changed files with 18 additions and 58 deletions.
48 changes: 14 additions & 34 deletions css/css-color/parsing/color-computed-relative-color.html
Original file line number Diff line number Diff line change
Expand Up @@ -676,43 +676,23 @@
fuzzy_test_computed_color(`color(from color(${colorSpace} 7 -20.5 100 / none) ${colorSpace} x y z / alpha)`, `color(${resultColorSpace} 7 -20.5 100 / 0)`);
}

// Spec Examples. Many of these have multiple stages of calculations so minor disagreements in the values of keyword colors and other
// constants can compound. Thus some of these tests have wider epsilons.

// Example 11.
// Spec Examples: https://www.w3.org/TR/css-color-5/#relative-colors
// All non-integer examples here have multiple stages of calculations so minor disagreements in the values of keyword colors and other constants can compound.
// These tests require a wider epsilon of 0.02.
fuzzy_test_computed_color(`rgb(from var(--bg-color) r g b / 80%)`, `rgba(0, 0, 255, 0.8)`);

// Example 12. This particular test does a lot of math so a wider epsilon is needed.
fuzzy_test_computed_color(`lch(from var(--color) calc(l / 2) c h)`, `lch(23.14 67.99 134.39)`, 0.02 /* epsilon */);

// Example 13.
fuzzy_test_computed_color(`lch(from var(--color) calc(l / 2) c h)`, `lch(23.14 67.99 134.39)`, 0.02);
fuzzy_test_computed_color(`rgb(from var(--color) calc(r * .3 + g * .59 + b * .11) calc(r * .3 + g * .59 + b * .11) calc(r * .3 + g * .59 + b * .11))`, `rgb(76, 76, 76)`);
fuzzy_test_computed_color(`lch(from var(--color) l 0 h)`, `lch(46.28 0 134.39)`, 0.02 /* epsilon */);

// Example 14.
fuzzy_test_computed_color(`lch(from var(--color) l 0 h)`, `lch(46.28 0 134.39)`, 0.02);
fuzzy_test_computed_color(`rgb(from indianred 255 g b)`, `rgb(255, 92, 92)`);

// Example 15.
fuzzy_test_computed_color(`hsl(from var(--accent) calc(h + 180deg) s l)`, `rgb(178, 32, 40)`);

// Example 16.
fuzzy_test_computed_color(`lab(from var(--mycolor) l a b / 100%)`, `lab(62.75 52.46 -34.12)`, 0.02 /* epsilon */);
fuzzy_test_computed_color(`lab(from var(--mycolor) l a b / calc(alpha * 0.8))`, `lab(62.75 52.46 -34.12 / 0.8)`, 0.02 /* epsilon */);
fuzzy_test_computed_color(`lab(from var(--mycolor) l a b / calc(alpha - 20%))`, `lab(62.751923 52.45802 -34.117283 / 0.8)`);

// Example 17.
fuzzy_test_computed_color(`lab(from var(--mycolor) l 0 0)`, `lab(62.75 0 0)`, 0.02 /* epsilon */);

// Example 18.
fuzzy_test_computed_color(`lch(from peru calc(l * 0.8) c h)`, `lch(49.80 54 63.68)`, 0.02 /* epsilon */);

// Example 19.
fuzzy_test_computed_color(`LCH(from var(--accent) l c calc(h + 180deg))`, `lch(65.49473 39.446903 10.114471)`);

// Example 20.
fuzzy_test_computed_color(`lch(from var(--mycolor) l 0 h)`, `lch(62.75 0 326.96)`, 0.02 /* epsilon */);
fuzzy_test_computed_color(`var(--mygray)`, `lch(62.75 0 326.96)`, 0.02 /* epsilon */);
fuzzy_test_computed_color(`lch(from var(--mygray) l 30 h)`, `lch(62.75 30 326.96)`, 0.02 /* epsilon */);
fuzzy_test_computed_color(`hsl(from var(--accent) calc(h + 180) s l)`, `rgb(178, 32, 40)`);
fuzzy_test_computed_color(`lab(from var(--mycolor) l a b / 100%)`, `lab(62.75 52.46 -34.12)`, 0.02);
fuzzy_test_computed_color(`lab(from var(--mycolor) l a b / calc(alpha * 0.8))`, `lab(62.75 52.46 -34.12 / 0.8)`, 0.02);
fuzzy_test_computed_color(`lab(from var(--mycolor) l 0 0)`, `lab(62.75 0 0)`, 0.02);
fuzzy_test_computed_color(`lch(from peru calc(l * 0.8) c h)`, `lch(49.80 54 63.68)`, 0.02);
fuzzy_test_computed_color(`LCH(from var(--accent) l c calc(h + 180))`, `lch(65.49 39.45 10.11)`, 0.02);
fuzzy_test_computed_color(`lch(from var(--mycolor) l 0 h)`, `lch(62.75 0 326.96)`, 0.02);
fuzzy_test_computed_color(`var(--mygray)`, `lch(62.75 0 326.96)`, 0.02);
fuzzy_test_computed_color(`lch(from var(--mygray) l 30 h)`, `lch(62.75 30 326.96)`, 0.02);
</script>
</body>
</html>
28 changes: 4 additions & 24 deletions css/css-color/parsing/color-valid-relative-color.html
Original file line number Diff line number Diff line change
Expand Up @@ -679,39 +679,19 @@
fuzzy_test_valid_color(`color(from color(${colorSpace} 7 -20.5 100 / none) ${colorSpace} x y z / alpha)`, `color(${resultColorSpace} 7 -20.5 100 / 0)`);
}

// Spec Examples

// Example 11.
// Spec Examples: https://www.w3.org/TR/css-color-5/#relative-colors
fuzzy_test_valid_color(`rgb(from var(--bg-color) r g b / 80%)`);

// Example 12.
fuzzy_test_valid_color(`lch(from var(--color) calc(l / 2) c h)`);

// Example 13.
fuzzy_test_valid_color(`rgb(from var(--color) calc(r * .3 + g * .59 + b * .11) calc(r * .3 + g * .59 + b * .11) calc(r * .3 + g * .59 + b * .11))`);
fuzzy_test_valid_color(`lch(from var(--color) l 0 h)`);

// Example 14.
fuzzy_test_valid_color(`rgb(from indianred 255 g b)`, `rgb(255, 92, 92)`);

// Example 15.
fuzzy_test_valid_color(`hsl(from var(--accent) calc(h + 180deg) s l)`);

// Example 16.
fuzzy_test_valid_color(`hsl(from var(--accent) calc(h + 180) s l)`);
fuzzy_test_valid_color(`lab(from var(--mycolor) l a b / 100%)`);
fuzzy_test_valid_color(`lab(from var(--mycolor) l a b / calc(alpha * 0.8))`);
fuzzy_test_valid_color(`lab(from var(--mycolor) l a b / calc(alpha - 20%))`);

// Example 17.
fuzzy_test_valid_color(`lab(from var(--mycolor) l 0 0)`);

// Example 18. This particular test does a lot of math so a wider epsilon is needed.
// This particular test does a lot of math so a wider epsilon is needed.
fuzzy_test_valid_color(`lch(from peru calc(l * 0.8) c h)`, `lch(49.80 54 63.68)`, 0.02 /* epsilon */);

// Example 19.
fuzzy_test_valid_color(`LCH(from var(--accent) l c calc(h + 180deg))`);

// Example 20.
fuzzy_test_valid_color(`LCH(from var(--accent) l c calc(h + 180))`);
fuzzy_test_valid_color(`lch(from var(--mycolor) l 0 h)`);
fuzzy_test_valid_color(`var(--mygray)`);
fuzzy_test_valid_color(`lch(from var(--mygray) l 30 h)`);
Expand Down

0 comments on commit 1dcb7f0

Please sign in to comment.