gradient-average-color.html

<!DOCTYPE html>
<html>
<head>
<title>Average-Color Gradients</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="c/style-insert-tests.css">
<style type="text/css" media="all">
body {min-width: 1100px;}
span.average-example {display: inline-block; width: 50px; height: 50px;}
#ex01 {background: rgba(25%,25%,25%,1);}

section div {height: 200px; width: 200px; float: left; margin: 10px;}
section div:nth-child(5n+1) {clear: left;}
section div::before {content: '[.' attr(class) ']'; color: white;}
</style>
<style type="text/css" media="all" id="tests">
.d01 {background-image: repeating-radial-gradient(0px 0px at center, red, green, blue);}
.d02 {background-image: repeating-radial-gradient(0.02px 0.02px at center, red, green, blue);}
.d03 {background-image: repeating-radial-gradient(0.2px 0.2px at center, red, green, blue);}
.d04 {background-image: repeating-radial-gradient(1px 1px at center, red, green, blue);}
.d05 {background-image: repeating-radial-gradient(2px 2px at center, red, green, blue);}
.d06 {background-image: repeating-linear-gradient(90deg, red 0px, green 0px, blue 0px);}
.d07 {background-image: repeating-linear-gradient(90deg, red 0px, green 0.01px, blue 0.02px);}
.d08 {background-image: repeating-linear-gradient(90deg, red 0px, green 0.1px, blue 0.2px);}
.d09 {background-image: repeating-linear-gradient(90deg, red 0px, green 0.5px, blue 1px);}
.d10 {background-image: repeating-linear-gradient(90deg, red 0px, green 1px, blue 2px);}
</style>
</head>
<body>

<p>The following repeating gradients should render as a solid color equivalent to <tt>rgba(25%,25%,25%,1)</tt> (<span class="average-example" id="ex01"></span>) in cases where they cannot “faithfully render” the repeating pattern.  See <a href="http://www.w3.org/TR/css3-images/#repeating-gradients">http://www.w3.org/TR/css3-images/#repeating-gradients</a> for details.</p>
<p>What constitutes faithful rendering of a repeating gradient is not defined, but at a minimum, the first gradient in each row (d01, d06) should yield the solid color shown previously, and almost certainly the second two in each row (d02, d07) should do the same.</p>

<section>
<div class="d01"><p></p></div>
<div class="d02"><p></p></div>
<div class="d03"><p></p></div>
<div class="d04"><p></p></div>
<div class="d05"><p></p></div>
<div class="d06"><p></p></div>
<div class="d07"><p></p></div>
<div class="d08"><p></p></div>
<div class="d09"><p></p></div>
<div class="d10"><p></p></div>
</section>

</body>
</html>