add example gradient, w3c#7771

svgeesus · svgeesus · commit eb97b9a5fcd4 · 2023-02-01T14:14:38.000-05:00
diff --git a/css-color-5/images/rectangular-missing.html b/css-color-5/images/rectangular-missing.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<title>Effect of missing values in Interpolation Colorspace</title>
+<!-- Gradients are simulated by piecewise construction from images-3 srgb gradients
+    See https://colorjs.io/apps/gradients/?color1=oklch(0.474%200.009%200)&color2=oklch(0.743%200.222%20141.6)
+    and set gamut mapping off, output space off, steps 6 deltaE -->
+<style>
+div.gradient {
+    width: 400px;
+    height: 140px;
+    margin: 4px 0 ;
+}
+#missing {
+    background: linear-gradient(to right, rgb(34.964% 36.561% 34.723%), rgb(35.232% 39.407% 34.616%), rgb(35.417% 42.25% 34.434%), rgb(35.515% 45.094% 34.17%), rgb(35.52% 47.943% 33.818%), rgb(35.426% 50.798% 33.372%), rgb(35.227% 53.662% 32.821%), rgb(34.914% 56.536% 32.157%), rgb(34.478% 59.42% 31.365%), rgb(33.906% 62.317% 30.43%), rgb(33.183% 65.226% 29.33%), rgb(32.291% 68.148% 28.039%), rgb(31.205% 71.083% 26.518%), rgb(29.893% 74.032% 24.716%), rgb(28.311% 76.994% 22.549%), rgb(26.394% 79.971% 19.881%));
+}
+#zero {
+    background: linear-gradient(to right, rgb(37.86% 35.244% 35.914%), rgb(37.979% 36.64% 35.857%), rgb(38.078% 38.032% 35.784%), rgb(38.156% 39.421% 35.693%), rgb(38.214% 40.808% 35.585%), rgb(38.249% 42.192% 35.458%), rgb(38.262% 43.575% 35.313%), rgb(38.253% 44.957% 35.148%), rgb(38.22% 46.339% 34.962%), rgb(38.162% 47.721% 34.756%), rgb(38.079% 49.103% 34.527%), rgb(37.97% 50.486% 34.276%), rgb(37.834% 51.87% 34%), rgb(37.67% 53.255% 33.699%), rgb(37.476% 54.641% 33.372%), rgb(37.252% 56.029% 33.017%), rgb(36.996% 57.419% 32.633%), rgb(36.706% 58.81% 32.218%), rgb(36.382% 60.204% 31.77%), rgb(36.02% 61.599% 31.287%), rgb(35.619% 62.997% 30.766%), rgb(35.177% 64.397% 30.206%), rgb(34.69% 65.8% 29.602%), rgb(34.156% 67.205% 28.951%), rgb(33.572% 68.612% 28.249%), rgb(32.933% 70.023% 27.491%), rgb(32.234% 71.435% 26.671%), rgb(31.471% 72.851% 25.782%), rgb(30.636% 74.269% 24.814%), rgb(29.721% 75.691% 23.757%), rgb(28.718% 77.115% 22.596%), rgb(27.614% 78.541% 21.313%), rgb(26.394% 79.971% 19.881%));
+}
+
+</style>
+
+<div class="gradient" id="missing"></div>
+<div class="gradient" id="zero"></div>
