blob: 5aad535518f3d83cd25c8e8ea387f33997e0af80 [file] [log] [blame]
<meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-127" />
<style>
body {
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><g fill="#ccc"><rect width="5" height="5"/><rect x="5" y="5" width="5" height="5"/></g></svg>');
background-size: 100px 100px;
}
:root {
--x: black;
}
.box {
display: inline-block;
width: 60px;
height: 60px;
background-color: #666;
box-shadow: 3px 3px 3px var(--x);
margin: 10px 10px;
}
</style>
<p>These two rows should be identical</p>
<div class="box" style="--x: red;"></div>
<div class="box" style="--x: rgb(0, 255, 0);"></div>
<div class="box" style="--x: blue;"></div>
<div class="box" style="--x: rgba(255, 0, 0, 0.6);"></div>
<div class="box" style="--x: rgba(0, 255, 0, 0.6);"></div>
<div class="box" style="--x: rgba(0, 0, 255, 0.6);"></div>
<br>
<div class="box" style="--x: color(srgb 1 0 0);"></div>
<div class="box" style="--x: color(srgb 0 1 0);"></div>
<div class="box" style="--x: color(srgb 0 0 1);"></div>
<div class="box" style="--x: color(srgb 1 0 0 / 0.6);"></div>
<div class="box" style="--x: color(srgb 0 1 0 / 0.6);"></div>
<div class="box" style="--x: color(srgb 0 0 1 / 0.6);"></div>