CSS Gradient Filters vs Solid Color

Benchmark created on November 18, 2011

Description

Preparation HTML

<script type="text/javascript" src="http://yui.yahooapis.com/combo?3.4.1/build/yui/yui.js"></script>
<style>
.fill-area {
    margin: 5px 0;
    width: 300px;
    height: 25px;
    border: 1px solid #aaa;
    overflow: visible;
    white-space: nowrap;
}
</style>

<div class="fill-area"></div>
<div class="fill-area"></div>
<div class="fill-area"></div>
<div class="fill-area"></div>
<div class="fill-area"></div>
<div class="fill-area"></div>
<div class="fill-area"></div>
<div class="fill-area"></div>
<div class="fill-area"></div>
<div class="fill-area"></div>
<div class="fill-area"></div>
<div class="fill-area"></div>
<div class="fill-area"></div>
<div class="fill-area"></div>
<div class="fill-area"></div>
<div class="fill-area"></div>
<div class="fill-area"></div>
<div class="fill-area"></div>
<div class="fill-area"></div>
<div class="fill-area"></div>
<div class="fill-area"></div>
<div class="fill-area"></div>
<div class="fill-area"></div>
<div class="fill-area"></div>

<script type="text/javascript">
YUI().use("node", function(Y) {
    var fillAreas,
        fillAreasMax,
        fillArea,
        colors,
        colorsMax,
        color;

    window.SetupTest = function() {
        fillAreas = Y.all(".fill-area");
        fillAreasMax = fillAreas.size() - 1;
        fillArea = 0;

        colors = [];
        for (var i = 0; i < 16; ++i) {
            var c1 = i.toString(16),
                c2 = (15 - i).toString(16);
          
            colors.push({ 
                c1: "#" + c1 + c1 + "a",
                c2: "#a" + c2 + c2
            });
        }
        colorsMax = colors.length - 1;
        color = 0;
    };

    window.ResetTest = function() {
        if (Y.UA.ie) {
            SetBG("");
            SetF("");
        }
    };

    window.NextColor = function() {
        if (++fillArea > fillAreasMax) {
            fillArea = 0;
        }
        if (++color > colorsMax) {
            color = 0;
        };
    };

    window.SetBG = function(style) {
        fillAreas.item(fillArea)
                 .setStyle("background", style);
    };

    window.SetF = function(style) {
        fillAreas.item(fillArea)
                 .setStyle("filter", style);
    };

    window.RunTestSolid = function() {
        var c = colors[color];
        SetBG(c.c1);
    };

    window.RunTestGradientIE = function() {
        var c = colors[color];
        SetF("progid:DXImageTransform.Microsoft.Gradient(startColorstr=" + c.c1 + ", endColorstr=" + c.c2 + ")");
    };

    window.RunTestGradientGecko = function() {
        var c = colors[color];
        SetBG("-moz-linear-gradient(top, " + c.c1 + "," + c.c2 + ")");
    };

    window.RunTestGradientWebkit = function() {
        var c = colors[color];
        SetBG("-webkit-gradient(linear, left top, left bottom, from(" + c.c1 + "),to(" + c.c2 + "))");
    };

    window.RunTestGradient = (function() {
        if (Y.UA.ie) {
            return RunTestGradientIE;
        } else if (Y.UA.gecko) {
            return RunTestGradientGecko;
        } else if (Y.UA.webkit) {
            return RunTestGradientWebkit;
        } else {
            return RunTestSolid;
        }
    })();

    SetupTest();
    RunTestGradient();
});
</script>

Setup

ResetTest();

Test runner

RunTestGradient();
NextColor();

RunTestSolid();
NextColor();

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.

• Revision 1: published on November 18, 2011