lightness in Lch in Oklch is not capped at 100
Lightness of 150% or 100% should result the same color in Lch or Oklch.
In this CL, when lightness is greater than 100, it clamps lightness back
to 100 (or 100%) if it's great than 100 (or 100%).
spec ref: https://w3c.github.io/csswg-drafts/css-color/#cie-lab
Bug: 1414067
Change-Id: I801c224320801f0af054a74787143630643cf6ca
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4480601
Reviewed-by: Aaron Krajeski <aaronhk@chromium.org>
Reviewed-by: Xiaocheng Hu <xiaochengh@chromium.org>
Commit-Queue: Yi Xu <yiyix@google.com>
Cr-Commit-Position: refs/heads/main@{#1140575}
diff --git a/css/css-color/lch-l-over-100-1.html b/css/css-color/lch-l-over-100-1.html
new file mode 100644
index 0000000..9711956
--- /dev/null
+++ b/css/css-color/lch-l-over-100-1.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Color 4: Verify lightness in LCH is always clamped to a value between 0 to 100</title>
+<link rel="help" href="https://w3c.github.io/csswg-drafts/css-color/#cie-lab">
+<link rel="match" href="lch-l-over-100-ref.html">
+<meta name="assert" content="lch() with lightness greater than 100">
+<style>
+ .ref { background-color: lch(100 150 20); width: 100px; height: 100px}
+ /* l = 150 should clamp back to 100 */
+ .test { background-color: lch(150 150 20); width: 100px; height: 100px}
+</style>
+
+<body>
+ <p>Test passes if you see a single color.</p>
+ <div class="ref"></div>
+ <div class="test"></div>
+</body>
diff --git a/css/css-color/lch-l-over-100-2.html b/css/css-color/lch-l-over-100-2.html
new file mode 100644
index 0000000..a909a49
--- /dev/null
+++ b/css/css-color/lch-l-over-100-2.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Color 4: Verify lightness in LCH is always clamped to a value between 0% to 100%</title>
+<link rel="help" href="https://w3c.github.io/csswg-drafts/css-color/#cie-lab">
+<link rel="match" href="lch-l-over-100-ref.html">
+<meta name="assert" content="lch() with lightness graeter than 100%">
+<style>
+ .ref { background-color: lch(100% 150 20); width: 100px; height: 100px}
+ /* l = 150% should clamp back to 100% */
+ .test { background-color: lch(150% 150 20); width: 100px; height: 100px}
+</style>
+
+<body>
+ <p>Test passes if you see a single color.</p>
+ <div class="ref"></div>
+ <div class="test"></div>
+</body>
diff --git a/css/css-color/lch-l-over-100-ref.html b/css/css-color/lch-l-over-100-ref.html
new file mode 100644
index 0000000..6776627
--- /dev/null
+++ b/css/css-color/lch-l-over-100-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Color 4: Specifying LCH with lightness over 100</title>
+<style>
+ .ref { background-color: lch(100 150 20); width: 100px; height: 200px}
+</style>
+
+<body>
+ <p>Test passes if you see a single color.</p>
+ <div class="ref"></div>
+ <div class="test"></div>
+</body>
