| <!DOCTYPE html> |
| <style> |
| .box { |
| position: relative; |
| display: inline-block; |
| margin: 5px; |
| width: 40px; |
| height: 40px; |
| } |
| |
| canvas { |
| position: absolute; |
| left: 10px; |
| top: 10px; |
| width: 20px; |
| height: 20px; |
| background-color: black; |
| } |
| </style> |
| <script> |
| |
| function drawColorIntoCanvas(color, canvas) { |
| var gl = canvas.getContext("webgl"); |
| gl.clearColor(color[0], color[1], color[2], 1.0); |
| gl.clear(gl.COLOR_BUFFER_BIT); |
| } |
| |
| function run() { |
| var boxes = document.querySelectorAll(".box"); |
| for (var i = 0; i < boxes.length; i++) { |
| var box = boxes[i]; |
| var canvas = document.createElement("canvas"); |
| canvas.width = 20; |
| canvas.height = 20; |
| |
| var backgroundColor = window.getComputedStyle(box).backgroundColor; |
| var matches = /rgb\((\d+),\s(\d+),\s(\d+)\)/.exec(backgroundColor); |
| drawColorIntoCanvas([matches[1] / 255, matches[2] / 255, matches[3] / 255], canvas); |
| box.appendChild(canvas); |
| } |
| } |
| |
| window.addEventListener("load", run, false); |
| </script> |
| <body> |
| <p>The boxes below should all be uniform in color. Any difference is likely to be extremely subtle.</p> |
| <div class="box" style="background-color: red"></div> |
| <div class="box" style="background-color: yellow"></div> |
| <div class="box" style="background-color: green"></div> |
| <div class="box" style="background-color: orange"></div> |
| <div class="box" style="background-color: purple"></div> |
| <div class="box" style="background-color: gray"></div> |
| <div class="box" style="background-color: cornflowerblue"></div> |
| <div class="box" style="background-color: rgb(98, 178, 23)"></div> |
| <div class="box" style="background-color: rgb(111, 62, 198)"></div> |
| <div class="box" style="background-color: rgb(232, 176, 101)"></div> |
| </body> |
