HTML vs SVG/VML (v5)

Revision 5 of this benchmark created on November 17, 2011

Description

Preparation HTML

<div id="svgcontainer" style="height:300px; width: 900px; overflow: hidden; position:relative;">
</div>
<div id="htmlcontainer" style="height:300px; width: 900px; overflow: hidden; position:relative;">
</div>
<script type="text/javascript" src="http://yui.yahooapis.com/combo?3.4.1/build/yui/yui.js">
</script>
<script type="text/javascript" src="http://tinternet.ath.cx/yui/graphics-html.js">
</script>
<script type="text/javascript" src="http://tinternet.ath.cx/yui/graphics-vml.js">
</script>
<script type="text/javascript">
  YUI({
    combine: true,
    filter: "raw"
  }).use("base", "node", "charts", "graphics-html", function(Y) {
    var width = 5,
        height = 10,
        xpos = 0,
        ypos = 0,
        svgGraphic, htmlGraphic;

    window.SVGTestCase = function() {
      svgGraphic.addShape({
        type: "rect",
        x: xpos,
        y: ypos,
        width: width,
        height: height,
        fill: {
          color: "#9aa"
        },
        stroke: {
          color: "#366",
          weight: 1
        }
      });
      NextPos();
    };

    window.ResetTest = function() {
      xpos = ypos = 0;
      if (svgGraphic) {
        svgGraphic.destroy();
      }
      if (htmlGraphic) {
        htmlGraphic.destroy();
      }
      svgGraphic = new Y.Graphic({
        render: "#svgcontainer",
        height: 100,
        width: 200
      });
      htmlGraphic = new Y.HTMLGraphic({
        render: "#htmlcontainer",
        height: 100,
        width: 200
      });
    };

    window.NextPos = function() {
      var curr = xpos;

      xpos += width + 5;
      if (xpos > 890) {
        xpos = 0;
        ypos += height + 5;
      }

      return curr;
    };

    window.HTMLTestCase = function() {
      htmlGraphic.addShape({
        type: "rect",
        x: xpos,
        y: ypos,
        width: width,
        height: height,
        fill: {
          color: "#9aa"
        },
        stroke: {
          color: "#366",
          weight: 1
        }
      });
      NextPos();
    };

    ResetTest();
    SVGTestCase();
    ResetTest();
    HTMLTestCase();
  });
</script>

Setup

ResetTest();

Test runner

SVGTestCase();

HTMLTestCase();

Revisions

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

• Revision 5: published on November 17, 2011