---
layout: test
title: Functional
---

<style>
  .wrapper { float: left; margin-right: 1em; }
  .svg-wrapper { margin-top: 1em; float: left; clear: left; }
  .svg-test-wrapper { clear: both; }
  .svg-test-wrapper span { display: none; }
  .svg-test-wrapper img { float: left; }
  .canvas-container { float: left; position: relative; }
</style>

<div class="wrapper">
  <h3><code>fabric.Line</code></h3>
  <canvas id="testee0" width="200" height="200"></canvas>
</div>

<div class="wrapper">
  <h3><code>fabric.Rect</code></h3>
  <canvas id="testee1" width="200" height="200"></canvas>
</div>

<div class="wrapper">
  <h3><code>fabric.Circle</code></h3>
  <canvas id="testee2" width="200" height="200"></canvas>
</div>

<div class="wrapper">
  <h3><code>fabric.Ellipse</code></h3>
  <canvas id="testee3" width="200" height="200"></canvas>
</div>

<div class="wrapper">
  <h3><code>fabric.Polygon</code></h3>
  <canvas id="testee4" width="200" height="200"></canvas>
</div>

<div class="wrapper">
  <h3><code>fabric.Polyline</code></h3>
  <canvas id="testee5" width="200" height="200"></canvas>
</div>

<h2 style="float:left;clear:left;width:100%">SVG Parser tests</h2>
<div class="svg-wrapper">
  <div class="svg-test-wrapper">
    <img src="../W3C_SVG_12_TinyTestSuite_beta/png/shapes-circle-01-t.png" alt="shapes-circle-01-t">
  </div>
  <div class="svg-test-wrapper">
    <img src="../W3C_SVG_12_TinyTestSuite_beta/png/shapes-circle-02-t.png" alt="shapes-circle-02-t">
  </div>
  <div class="svg-test-wrapper">
    <img src="../W3C_SVG_12_TinyTestSuite_beta/png/shapes-circle-03-t.png" alt="shapes-circle-03-t">
  </div>
  <div class="svg-test-wrapper">
    <img src="../W3C_SVG_12_TinyTestSuite_beta/png/shapes-ellipse-01-t.png" alt="shapes-ellipse-01-t">
  </div>
  <div class="svg-test-wrapper">
    <img src="../W3C_SVG_12_TinyTestSuite_beta/png/shapes-ellipse-02-t.png" alt="shapes-ellipse-02-t">
  </div>
  <div class="svg-test-wrapper">
    <img src="../W3C_SVG_12_TinyTestSuite_beta/png/shapes-ellipse-03-t.png" alt="shapes-ellipse-03-t">
  </div>
  <div class="svg-test-wrapper">
    <img src="../W3C_SVG_12_TinyTestSuite_beta/png/shapes-intro-01-t.png" alt="shapes-intro-01-t">
  </div>
  <div class="svg-test-wrapper">
    <img src="../W3C_SVG_12_TinyTestSuite_beta/png/shapes-line-01-t.png" alt="shapes-line-01-t">
  </div>
  <div class="svg-test-wrapper">
    <img src="../W3C_SVG_12_TinyTestSuite_beta/png/shapes-line-02-t.png" alt="shapes-line-02-t">
  </div>
  <div class="svg-test-wrapper">
    <img src="../W3C_SVG_12_TinyTestSuite_beta/png/shapes-polygon-01-t.png" alt="shapes-polygon-01-t">
  </div>
  <div class="svg-test-wrapper">
    <img src="../W3C_SVG_12_TinyTestSuite_beta/png/shapes-polygon-02-t.png" alt="shapes-polygon-02-t">
  </div>
  <div class="svg-test-wrapper">
    <img src="../W3C_SVG_12_TinyTestSuite_beta/png/shapes-polyline-01-t.png" alt="shapes-polyline-01-t">
  </div>
  <div class="svg-test-wrapper">
    <img src="../W3C_SVG_12_TinyTestSuite_beta/png/shapes-polyline-02-t.png" alt="shapes-polyline-02-t">
  </div>
  <div class="svg-test-wrapper">
    <img src="../W3C_SVG_12_TinyTestSuite_beta/png/shapes-rect-01-t.png" alt="shapes-rect-01-t">
  </div>
  <div class="svg-test-wrapper">
    <img src="../W3C_SVG_12_TinyTestSuite_beta/png/shapes-rect-02-t.png" alt="shapes-rect-02-t">
  </div>
  <div class="svg-test-wrapper">
    <img src="../W3C_SVG_12_TinyTestSuite_beta/png/shapes-rect-03-t.png" alt="shapes-rect-03-t">
  </div>
  <div class="svg-test-wrapper">
    <img src="../W3C_SVG_12_TinyTestSuite_beta/png/paths-data-01-t.png" alt="paths-data-01-t">
  </div>
</div>

<script src="functional_tests.js"></script>