| <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; |
| } |
| .box { |
| display: inline-block; |
| width: 60px; |
| height: 60px; |
| } |
| .outlined-box { |
| display: inline-block; |
| width: 60px; |
| height: 60px; |
| box-sizing: border-box; |
| border: 20px solid black; |
| } |
| </style> |
| <p>These two rows should be identical</p> |
| <div class="box" style="background-color: red;"></div> |
| <div class="box" style="background-color: rgb(0, 255, 0);"></div> |
| <div class="box" style="background-color: blue;"></div> |
| <div class="box" style="background-color: rgba(255, 0, 0, 0.6);"></div> |
| <div class="box" style="background-color: rgba(0, 255, 0, 0.6);"></div> |
| <div class="box" style="background-color: rgba(0, 0, 255, 0.6);"></div> |
| <br> |
| <div class="box" style="background-color: color(srgb 1 0 0);"></div> |
| <div class="box" style="background-color: color(srgb 0 1 0);"></div> |
| <div class="box" style="background-color: color(srgb 0 0 1);"></div> |
| <div class="box" style="background-color: color(srgb 1 0 0 / 0.6);"></div> |
| <div class="box" style="background-color: color(srgb 0 1 0 / 0.6);"></div> |
| <div class="box" style="background-color: color(srgb 0 0 1 / 0.6);"></div> |
| |
| <p>These two rows should be identical</p> |
| <div class="outlined-box" style="border-color: red;"></div> |
| <div class="outlined-box" style="border-color: rgb(0, 255, 0);"></div> |
| <div class="outlined-box" style="border-color: blue;"></div> |
| <div class="outlined-box" style="border-color: rgba(255, 0, 0, 0.6);"></div> |
| <div class="outlined-box" style="border-color: rgba(0, 255, 0, 0.6);"></div> |
| <div class="outlined-box" style="border-color: rgba(0, 0, 255, 0.6);"></div> |
| <br> |
| <div class="outlined-box" style="border-color: color(srgb 1 0 0);"></div> |
| <div class="outlined-box" style="border-color: color(srgb 0 1 0);"></div> |
| <div class="outlined-box" style="border-color: color(srgb 0 0 1);"></div> |
| <div class="outlined-box" style="border-color: color(srgb 1 0 0 / 0.6);"></div> |
| <div class="outlined-box" style="border-color: color(srgb 0 1 0 / 0.6);"></div> |
| <div class="outlined-box" style="border-color: color(srgb 0 0 1 / 0.6);"></div> |