scrawl-canvas
Version:
Version 8.9.4 - 19 Nov 2022
89 lines (76 loc) • 5.15 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Demo Canvas 059</title>
<link href="css/normalize.css" rel="stylesheet" />
<link href="css/tests.css" rel="stylesheet" />
<style>
.css-tests div {
margin-bottom: 2px;
padding: 4px;
}
</style>
</head>
<body>
<h1><a href="index.html">Scrawl-canvas v8</a> - Canvas test 059</h1>
<h2>CSS color space strings - rgb-key, rgb-hex, rgb(), rgba(), hsl(), hsla(), hwb(), lab(), lch(), oklab(), oklch()</h3>
<canvas
id="mycanvas"
width="800"
height="600"
data-scrawl-canvas
></canvas>
<div class="testinfo">
<h4>Test purpose</h4>
<ul>
<li>Create a canvas; fill it with blocks whose fillStyle attributes have been populated with a range of different <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value">CSS color value</a> strings.</li>
<li>Check that the expected color displays in the canvas.</li>
<li>For comparison, create a set of <div> elements with their backgroundColor values set to those same color strings.</li>
</ul>
<p><b>Note that:</b> browser support for different color spaces is somewhat patchy. Browsers that do support the newer color spacess in CSS may not support them in <canvas> elements.</p>
<p><b>Safari issue:</b> while the browser currently supports LAB/LCH and OKLAB/OKLCH color spaces, it only supports them when formatted with L as a percentage value and A, B, C, H as number values. Where presented with alternative formats, Safari will ignore the color value in CSS, and render it as black on the canvas. For this reason, Scrawl-canvas does not attempt to check if browsers support OKLAB/OKLCH color spaces; instead it will parse all OKLAB/OKLCH color strings as set out in the CSS Color Module Level 4 specification and render them as their nearest equivalent sRGB color space colors.</p>
<p><b>Touch test:</b> not required</p>
<p><a href="../docs/demo/canvas-059.html">Annotated code</a></p>
</div>
<p> <br />Test if color strings work for CSS in this browser:</p>
<div class="css-tests">
<div style="background-color: red;">red</div>
<div style="background-color: orange;">orange</div>
<div style="background-color: gold;">gold</div>
<div style="background-color: #f09;">#f09</div>
<div style="background-color: #FF0099;">#FF0099</div>
<div style="background-color: #ff009980;">#ff009980</div>
<div style="background-color: rgb(255, 0, 153);">rgb(255, 0, 153)</div>
<div style="background-color: rgb(2.55e2, 0e0, 1.53e2);">rgb(2.55e2, 0e0, 1.53e2)</div>
<div style="background-color: rgb(255 0 153);">rgb(255 0 153)</div>
<div style="background-color: rgba(100%, 0%, 60%, 1);">rgba(100%, 0%, 60%, 1)</div>
<div style="background-color: rgba(51 170 51 / 0.4);">rgba(51 170 51 / 0.4)</div>
<div style="background-color: rgba(51, 170, 51.6, 80%);">rgba(51, 170, 51.6, 80%)</div>
<div style="background-color: hsl(30, 100%, 50%);">hsl(30, 100%, 50%)</div>
<div style="background-color: hsl(30 100% 50%);">hsl(30 100% 50%)</div>
<div style="background-color: hsl(30.0 100% 50% / 60%);">hsl(30.0 100% 50% / 60%)</div>
<div style="background-color: hsla(30, 100%, 50%, 0.6);">hsla(30, 100%, 50%, 0.6)</div>
<div style="background-color: hsla(30 100% 50% / 0.6);">hsla(30 100% 50% / 0.6)</div>
<div style="background-color: hsla(30.2 100% 50% / 60%);">hsla(30.2 100% 50% / 60%)</div>
<div style="background-color: hwb(90 10% 10%);">hwb(90 10% 10%)</div>
<div style="background-color: hwb(90deg 10% 10% / 0.5);">hwb(90deg 10% 10% / 0.5)</div>
<div style="background-color: hwb(.25turn 0% 40% / 50%);">hwb(.25turn 0% 40% / 50%)</div>
<div style="background-color: lab(29.2345% 39.3825 20.0664);">lab(29.2345% 39.3825 20.0664)</div>
<div style="background-color: lab(52.2345% 40.1645 59.9971);">lab(52.2345% 40.1645 59.9971)</div>
<div style="background-color: lab(52.2345% 40.1645 59.9971 / .5);">lab(52.2345% 40.1645 59.9971 / .5)</div>
<div style="background-color: lch(29.2345% 44.2 27);">lch(29.2345% 44.2 27)</div>
<div style="background-color: lch(52.2345% 72.2 56.2);">lch(52.2345% 72.2 56.2)</div>
<div style="background-color: lch(52.2345% 72.2 56.2 / .5);">lch(52.2345% 72.2 56.2 / .5)</div>
<div style="background-color: oklab(59.686% 0.1009 0.1192);">oklab(59.686% 0.1009 0.1192)</div>
<div style="background-color: oklab(0.65125 -0.0320 0.1274);">oklab(0.65125 -0.0320 0.1274)</div>
<div style="background-color: oklab(42.1% 41% -25% / .5);">oklab(42.1% 41% -25% / .5)</div>
<div style="background-color: oklch(59.686% 0.15619 49.7694);">oklch(59.686% 0.15619 49.7694)</div>
<div style="background-color: oklch(0.65125 0.13138 104.097);">oklch(0.65125 0.13138 104.097)</div>
<div style="background-color: oklch(42.1% 48.25% 328.4 / .5);">oklch(42.1% 48.25% 328.4 / .5)</div>
</div>
<script src="canvas-059.js" type="module"></script>
</body>
</html>