Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- Manifest: gfx/tests/reftest/reftest.list
<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=windows-1252"><style>
.swatch {
float: left;
height: 40px;
width: 120px;
box-sizing: border-box;
}
.header {
border: 1px solid black;
font-size: 10px;
font-weight: bold;
}
br { clear: both; }
.layer { will-change: transform }
.add-border { border-left: 1px solid transparent; }
.red { background: red }
.g-red { background: linear-gradient(red,red) }
.orange { background: orange }
.g-orange { background: linear-gradient(orange,orange) }
.yellow { background: yellow }
.g-yellow { background: linear-gradient(yellow,yellow) }
.green { background: green }
.g-green { background: linear-gradient(green,green) }
.blue { background: blue }
.g-blue { background: linear-gradient(blue,blue) }
.indigo { background: indigo }
.g-indigo { background: linear-gradient(indigo,indigo) }
.violet { background: violet }
.g-violet { background: linear-gradient(violet,violet) }
</style>
</head><body>
<div class="swatch header">A: named color</div>
<div class="swatch header">B: �& will-change: transform</div>
<div class="swatch header">C: �& border</div>
<div class="swatch header">D: solid-color gradient </div>
<div class="swatch header">E: �& will-change: transform</div>
<div class="swatch header">F: �& border</div>
<br>
<div class="swatch red"></div>
<div class="swatch red layer"></div>
<div class="swatch red layer add-border"></div>
<div class="swatch g-red"></div>
<div class="swatch g-red layer"></div>
<div class="swatch g-red layer add-border"></div>
<br>
<div class="swatch orange"></div>
<div class="swatch orange layer"></div>
<div class="swatch orange layer add-border"></div>
<div class="swatch g-orange"></div>
<div class="swatch g-orange layer"></div>
<div class="swatch g-orange layer add-border"></div>
<br>
<div class="swatch yellow"></div>
<div class="swatch yellow layer"></div>
<div class="swatch yellow layer add-border"></div>
<div class="swatch g-yellow"></div>
<div class="swatch g-yellow layer"></div>
<div class="swatch g-yellow layer add-border"></div>
<br>
<div class="swatch green"></div>
<div class="swatch green layer"></div>
<div class="swatch green layer add-border"></div>
<div class="swatch g-green"></div>
<div class="swatch g-green layer"></div>
<div class="swatch g-green layer add-border"></div>
<br>
<div class="swatch blue"></div>
<div class="swatch blue layer"></div>
<div class="swatch blue layer add-border"></div>
<div class="swatch g-blue"></div>
<div class="swatch g-blue layer"></div>
<div class="swatch g-blue layer add-border"></div>
<br>
<div class="swatch indigo"></div>
<div class="swatch indigo layer"></div>
<div class="swatch indigo layer add-border"></div>
<div class="swatch g-indigo"></div>
<div class="swatch g-indigo layer"></div>
<div class="swatch g-indigo layer add-border"></div>
<br>
<div class="swatch violet"></div>
<div class="swatch violet layer"></div>
<div class="swatch violet layer add-border"></div>
<div class="swatch g-violet"></div>
<div class="swatch g-violet layer"></div>
<div class="swatch g-violet layer add-border"></div>
<br>
</body></html>