diff --git a/tests/playgrounds/screenshot.js b/tests/playgrounds/screenshot.js
index c0a9663a2..4282cdec2 100644
--- a/tests/playgrounds/screenshot.js
+++ b/tests/playgrounds/screenshot.js
@@ -65,10 +65,10 @@ function workspaceToSvg_(workspace, callback, customCss) {
   }
 
   var bBox = workspace.getBlocksBoundingBox();
-  var x = bBox.left;
-  var y = bBox.top;
-  var width = bBox.right - x;
-  var height = bBox.bottom - y;
+  var x = bBox.x || bBox.left;
+  var y = bBox.y || bBox.top;
+  var width = bBox.width || bBox.right - x;
+  var height = bBox.height || bBox.bottom - y;
 
   var blockCanvas = workspace.getCanvas();
   var clone = blockCanvas.cloneNode(true);
diff --git a/tests/rendering/zelos/pxtblockly/index.html b/tests/rendering/zelos/pxtblockly/index.html
new file mode 100644
index 000000000..6a53da072
--- /dev/null
+++ b/tests/rendering/zelos/pxtblockly/index.html
@@ -0,0 +1,166 @@
+<html>
+
+<head>
+  <script type="text/javascript" src="../../../../blockly_uncompressed.js"></script>
+  <script type="text/javascript" src="https://unpkg.com/pxt-blockly@2.1.12/blocks_compressed.js"></script>
+  <script type="text/javascript" src="https://unpkg.com/pxt-blockly@2.1.12/msg/messages.js"></script>
+  <style>
+    html,
+    body {
+      margin: 0;
+    }
+
+    #frames {
+      position: absolute;
+      width: 100%;
+      height: calc(100% - 3rem);
+      bottom: 0;
+    }
+
+    #frames .row {
+      position: relative;
+      display: flex;
+      flex-direction: row;
+    }
+
+    #frames .col {
+      flex: 1;
+      width: 100%;
+      height: 100%;
+    }
+
+    #frames .col h2 {
+      text-align: center;
+    }
+
+    #frames iframe {
+      border: 0;
+      margin: 0;
+      padding: 0;
+      width: 100%;
+      height: 300px;
+    }
+
+    .output {
+      max-height: 300px;
+      max-width: 100%;
+    }
+  </style>
+</head>
+
+<body>
+  <select id="selector">
+  </select>
+  <a href="../scratchblocks/">Scratch-Blocks</a>
+  <script>
+    var selector = document.getElementById('selector');
+    for (var blockId in Blockly.Blocks) {
+      if (!Object.keys(Blockly.Blocks[blockId]).length) continue;
+      var option = document.createElement('option');
+      option.value = blockId;
+      option.textContent = blockId;
+      selector.appendChild(option);
+    }
+  </script>
+  <div id="frames">
+    <div class="row">
+      <div class="col">
+        <h2>Zelos Rendering</h2>
+      </div>
+      <div class="col">
+        <h2>PXT-Blockly Rendering</h2>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col">
+        <iframe id="zelos" src="./zelos.html"></iframe>
+      </div>
+      <div class="col">
+        <iframe id="pxtblockly" src="./pxtblockly.html"></iframe>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col">
+        <div id="zelosout">
+          <h2>Zelos Rendering</h2>
+          <img id="zelosoutput" class="output" />
+        </div>
+        <div id="pxtblocklyout">
+          <h2>PXT-Blockly Rendering</h2>
+          <img id="pxtblocklyoutput" class="output" />
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <script type="text/javascript">
+    var pxtblockly = document.getElementById('pxtblockly');
+    var zelos = document.getElementById('zelos');
+    var selector = document.getElementById('selector');
+    var hash = document.location.hash;
+    if (hash) {
+      selector.value = hash.substring(1);
+    }
+
+    window.addEventListener('message', function (msg) {
+      var data = msg.data;
+      if (data.type === 'svg') {
+        var output = document.getElementById(data.from + 'output');
+        output.src = data.text;
+      }
+    });
+
+    var current = 'zelos';
+    var pause = false;
+    document.getElementById('pxtblocklyout').style.display = 'none';
+    setInterval(function () {
+      if (!pause) {
+        document.getElementById(current + 'out').style.display = 'none';
+        current = current == 'zelos' ? 'pxtblockly' : 'zelos';
+        document.getElementById(current + 'out').style.display = 'block';
+      }
+    }, 1000);
+
+    pxtblockly.addEventListener('load', function () {
+      updateWorkspaces(selector.value);
+    });
+
+    zelos.addEventListener('load', function () {
+      updateWorkspaces(selector.value);
+    });
+
+    selector.addEventListener('change', function (e) {
+      updateWorkspaces(e.target.value);
+    });
+
+    function updateWorkspaces(testCase) {
+      window.location.hash = testCase;
+      var xml = `<xml xmlns="https://developers.google.com/blockly/xml">
+  <block type="${testCase}"></block>
+</xml>`;
+      pxtblockly.contentWindow.postMessage({
+        type: 'post',
+        xml: xml
+      }, '*');
+      zelos.contentWindow.postMessage({
+        type: 'post',
+        xml: xml
+      }, '*');
+    }
+
+    document.addEventListener('keydown', function (e) {
+      if (e.keyCode === 37) {
+        selector.selectedIndex = selector.selectedIndex - 1;
+        updateWorkspaces(selector.value);
+      } else if (e.keyCode === 39) {
+        selector.selectedIndex = selector.selectedIndex + 1;
+        updateWorkspaces(selector.value);
+      } else if (e.keyCode === 32) {
+        pause = !pause;
+      }
+    });
+
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/tests/rendering/zelos/pxtblockly/pxtblockly.html b/tests/rendering/zelos/pxtblockly/pxtblockly.html
new file mode 100644
index 000000000..8ee2e9560
--- /dev/null
+++ b/tests/rendering/zelos/pxtblockly/pxtblockly.html
@@ -0,0 +1,68 @@
+<html>
+
+<head>
+  <script type="text/javascript" src="https://unpkg.com/pxt-blockly@2.1.12/blockly_compressed.js"></script>
+  <script type="text/javascript" src="https://unpkg.com/pxt-blockly@2.1.12/blocks_compressed.js"></script>
+  <script type="text/javascript" src="https://unpkg.com/pxt-blockly@2.1.12/msg/messages.js"></script>
+  <script type="text/javascript" src="../../../playgrounds/screenshot.js"></script>
+</head>
+
+<body>
+  <div id="blocklyDiv"></div>
+  <script>
+    Blockly.utils.userAgent.IE = true;
+
+    var blocklyDiv = document.getElementById('blocklyDiv');
+    var workspace;
+    window.addEventListener('message', function (msg) {
+      var data = msg.data;
+      if (data.type !== 'post') {
+        return;
+      }
+      var xml = data.xml;
+      try {
+        if (workspace) {
+          workspace.dispose();
+          blocklyDiv.innerHTML = '';
+        }
+      } catch { }
+
+      workspace = Blockly.inject(blocklyDiv, {
+        move: {
+          scrollbars: true,
+          drag: true,
+          wheel: false,
+        },
+        zoom: {
+          wheel: true,
+          startScale: 2,
+        }
+      });
+
+      Blockly.Xml.domToWorkspace(Blockly.Xml.textToDom(xml), workspace);
+
+      function postChange() {
+        try {
+          var topBlock = workspace.getTopBlocks()[0];
+          workspaceToSvg_(workspace, function (datauri) {
+            window.parent.postMessage({
+              type: 'svg',
+              from: 'pxtblockly',
+              text: datauri
+            }, '*');
+          });
+        } catch { }
+      }
+
+      workspace.addChangeListener(function(e) {
+        if (e.type != 'ui') {
+          postChange();
+        }
+      });
+
+      postChange();
+    });
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/tests/rendering/zelos/pxtblockly/zelos.html b/tests/rendering/zelos/pxtblockly/zelos.html
new file mode 100644
index 000000000..6d00f750e
--- /dev/null
+++ b/tests/rendering/zelos/pxtblockly/zelos.html
@@ -0,0 +1,102 @@
+<html>
+
+<head>
+  <script type="text/javascript" src="../../../../blockly_uncompressed.js"></script>
+  <script type="text/javascript" src="https://unpkg.com/pxt-blockly@2.1.12/blocks_compressed.js"></script>
+  <script type="text/javascript" src="https://unpkg.com/pxt-blockly@2.1.12/msg/messages.js"></script>
+  <script type="text/javascript" src="../../../playgrounds/screenshot.js"></script>
+
+  <style id="blocklycss">
+    .blocklyText,
+    .blocklyHtmlInput {
+      font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
+      font-weight: bold;
+      font-size: 12pt;
+    }
+
+    .blocklyNonEditableText>text,
+    .blocklyEditableText>text,
+    .blocklyNonEditableText>g>text,
+    .blocklyEditableText>g>text {
+      fill: #575E75;
+    }
+
+    .blocklyHtmlInput {
+      color: #575E75;
+    }
+  </style>
+</head>
+
+<body>
+  <div id="blocklyDiv"></div>
+  <script>
+    goog.require('Blockly.blockRendering.Debug');
+    goog.require('Blockly.zelos.Renderer');
+    // Blockly.blockRendering.startDebugger();
+
+    // This stub is a workaround in order to load pxt-blockly blocks, as they
+    // rely on a setOutputShape method on the block.
+    Blockly.BlockSvg.prototype.setOutputShape = function() { };
+
+    var blocklyDiv = document.getElementById('blocklyDiv');
+    var workspace;
+    window.addEventListener('message', function (msg) {
+      var data = msg.data;
+      if (data.type !== 'post') {
+        return;
+      }
+      var xml = data.xml;
+      try {
+        if (workspace) {
+          workspace.dispose();
+          blocklyDiv.innerHTML = '';
+          window.parent.focus();
+        }
+      } catch { }
+
+      workspace = Blockly.inject(blocklyDiv, {
+        renderer: 'zelos',
+        move: {
+          scrollbars: true,
+          drag: true,
+          wheel: false,
+        },
+        zoom: {
+          wheel: true,
+          startScale: 2,
+        }
+      });
+      var constants = workspace.getRenderer().getConstants();
+      constants.FIELD_TEXT_FONTSIZE = 12;
+      constants.FIELD_TEXT_FONTWEIGHT = 'bold';
+      constants.FIELD_TEXT_FONTFAMILY = 'Helvetica Neue';
+
+      Blockly.Xml.domToWorkspace(Blockly.Xml.textToDom(xml), workspace);
+
+      function postChange() {
+        try {
+          var topBlock = workspace.getTopBlocks()[0];
+          workspaceToSvg_(workspace, function (datauri) {
+            window.parent.postMessage({
+              type: 'svg',
+              from: 'zelos',
+              text: datauri
+            }, '*');
+          }, document.getElementById('blocklycss').innerText);
+        } catch (err) {
+          console.error(err);
+        }
+      }
+
+      workspace.addChangeListener(function(e) {
+        if (e.type != 'ui') {
+          postChange();
+        }
+      });
+
+      postChange();
+    });
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/tests/rendering/zelos/scratchblocks/index.html b/tests/rendering/zelos/scratchblocks/index.html
new file mode 100644
index 000000000..9814d5eaf
--- /dev/null
+++ b/tests/rendering/zelos/scratchblocks/index.html
@@ -0,0 +1,166 @@
+<html>
+
+<head>
+  <script type="text/javascript" src="../../../../blockly_uncompressed.js"></script>
+  <script type="text/javascript"
+    src="https://unpkg.com/scratch-blocks@0.1.0-prerelease.1578322100/blocks_compressed_vertical.js"></script>
+  <style>
+    html,
+    body {
+      margin: 0;
+    }
+
+    #frames {
+      position: absolute;
+      width: 100%;
+      height: calc(100% - 3rem);
+      bottom: 0;
+    }
+
+    #frames .row {
+      position: relative;
+      display: flex;
+      flex-direction: row;
+    }
+
+    #frames .col {
+      flex: 1;
+      width: 100%;
+      height: 100%;
+    }
+
+    #frames .col h2 {
+      text-align: center;
+    }
+
+    #frames iframe {
+      border: 0;
+      margin: 0;
+      padding: 0;
+      width: 100%;
+      height: 300px;
+    }
+
+    .output {
+      max-height: 300px;
+      max-width: 100%;
+    }
+  </style>
+</head>
+
+<body>
+  <select id="selector">
+  </select>
+  <a href="../pxtblockly/">PXT-Blockly</a>
+  <script>
+    var selector = document.getElementById('selector');
+    for (var blockId in Blockly.Blocks) {
+      if (!Object.keys(Blockly.Blocks[blockId]).length) continue;
+      var option = document.createElement('option');
+      option.value = blockId;
+      option.textContent = blockId;
+      selector.appendChild(option);
+    }
+  </script>
+  <div id="frames">
+    <div class="row">
+      <div class="col">
+        <h2>Zelos Rendering</h2>
+      </div>
+      <div class="col">
+        <h2>Scratch-Blocks Rendering</h2>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col">
+        <iframe id="zelos" src="./zelos.html"></iframe>
+      </div>
+      <div class="col">
+        <iframe id="scratchblocks" src="./scratchblocks.html"></iframe>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col">
+        <div id="zelosout">
+          <h2>Zelos Rendering</h2>
+          <img id="zelosoutput" class="output" />
+        </div>
+        <div id="scratchblocksout">
+          <h2>Scratch-Blocks Rendering</h2>
+          <img id="scratchblocksoutput" class="output" />
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <script type="text/javascript">
+    var scratchblocks = document.getElementById('scratchblocks');
+    var zelos = document.getElementById('zelos');
+    var selector = document.getElementById('selector');
+    var hash = document.location.hash;
+    if (hash) {
+      selector.value = hash.substring(1);
+    }
+
+    window.addEventListener('message', function (msg) {
+      var data = msg.data;
+      if (data.type === 'svg') {
+        var output = document.getElementById(data.from + 'output');
+        output.src = data.text;
+      }
+    });
+
+    var current = 'zelos';
+    var pause = false;
+    document.getElementById('scratchblocksout').style.display = 'none';
+    setInterval(function () {
+      if (!pause) {
+        document.getElementById(current + 'out').style.display = 'none';
+        current = current == 'zelos' ? 'scratchblocks' : 'zelos';
+        document.getElementById(current + 'out').style.display = 'block';
+      }
+    }, 1000);
+
+    scratchblocks.addEventListener('load', function () {
+      updateWorkspaces(selector.value);
+    });
+
+    zelos.addEventListener('load', function () {
+      updateWorkspaces(selector.value);
+    });
+
+    selector.addEventListener('change', function (e) {
+      updateWorkspaces(e.target.value);
+    });
+
+    function updateWorkspaces(testCase) {
+      window.location.hash = testCase;
+      var xml = `<xml xmlns="https://developers.google.com/blockly/xml">
+  <block type="${testCase}"></block>
+</xml>`;
+      scratchblocks.contentWindow.postMessage({
+        type: 'post',
+        xml: xml
+      }, '*');
+      zelos.contentWindow.postMessage({
+        type: 'post',
+        xml: xml
+      }, '*');
+    }
+
+    document.addEventListener('keydown', function (e) {
+      if (e.keyCode === 37) {
+        selector.selectedIndex = selector.selectedIndex - 1;
+        updateWorkspaces(selector.value);
+      } else if (e.keyCode === 39) {
+        selector.selectedIndex = selector.selectedIndex + 1;
+        updateWorkspaces(selector.value);
+      } else if (e.keyCode === 32) {
+        pause = !pause;
+      }
+    });
+
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/tests/rendering/zelos/scratchblocks/scratchblocks.html b/tests/rendering/zelos/scratchblocks/scratchblocks.html
new file mode 100644
index 000000000..801123097
--- /dev/null
+++ b/tests/rendering/zelos/scratchblocks/scratchblocks.html
@@ -0,0 +1,70 @@
+<html>
+
+<head>
+  <script type="text/javascript"
+    src="https://unpkg.com/scratch-blocks@0.1.0-prerelease.1578322100/blockly_compressed_vertical.js"></script>
+  <script type="text/javascript"
+    src="https://unpkg.com/scratch-blocks@0.1.0-prerelease.1578322100/blocks_compressed_vertical.js"></script>
+  <script type="text/javascript"
+    src="https://unpkg.com/scratch-blocks@0.1.0-prerelease.1578322100/msg/messages.js"></script>
+  <script type="text/javascript" src="../../../playgrounds/screenshot.js"></script>
+</head>
+
+<body>
+  <div id="blocklyDiv"></div>
+  <script>
+    var blocklyDiv = document.getElementById('blocklyDiv');
+    var workspace;
+    window.addEventListener('message', function (msg) {
+      var data = msg.data;
+      if (data.type !== 'post') {
+        return;
+      }
+      var xml = data.xml;
+      try {
+        if (workspace) {
+          workspace.dispose();
+          blocklyDiv.innerHTML = '';
+        }
+      } catch { }
+
+      workspace = Blockly.inject(blocklyDiv, {
+        move: {
+          scrollbars: true,
+          drag: true,
+          wheel: false,
+        },
+        zoom: {
+          wheel: true,
+          startScale: 2,
+        },
+        media: 'https://unpkg.com/scratch-blocks@0.1.0-prerelease.1578322100/media/'
+      });
+
+      Blockly.Xml.domToWorkspace(Blockly.Xml.textToDom(xml), workspace);
+
+      function postChange() {
+        try {
+          var topBlock = workspace.getTopBlocks()[0];
+          workspaceToSvg_(workspace, function (datauri) {
+            window.parent.postMessage({
+              type: 'svg',
+              from: 'scratchblocks',
+              text: datauri
+            }, '*');
+          });
+        } catch { }
+      }
+
+      workspace.addChangeListener(function (e) {
+        if (e.type != 'ui') {
+          postChange();
+        }
+      });
+
+      postChange();
+    });
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/tests/rendering/zelos/scratchblocks/zelos.html b/tests/rendering/zelos/scratchblocks/zelos.html
new file mode 100644
index 000000000..3cc6810a9
--- /dev/null
+++ b/tests/rendering/zelos/scratchblocks/zelos.html
@@ -0,0 +1,135 @@
+<html>
+
+<head>
+  <script type="text/javascript" src="../../../../blockly_uncompressed.js"></script>
+  <script type="text/javascript"
+    src="https://unpkg.com/scratch-blocks@0.1.0-prerelease.1578322100/blocks_compressed_vertical.js"></script>
+  <script type="text/javascript"
+    src="https://unpkg.com/scratch-blocks@0.1.0-prerelease.1578322100/msg/messages.js"></script>
+  <script type="text/javascript" src="../../../playgrounds/screenshot.js"></script>
+
+  <style id="blocklycss">
+    .blocklyText,
+    .blocklyHtmlInput {
+      font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
+      font-weight: bold;
+      font-size: 12pt;
+    }
+
+    .blocklyNonEditableText>text,
+    .blocklyEditableText>text,
+    .blocklyNonEditableText>g>text,
+    .blocklyEditableText>g>text {
+      fill: #575E75;
+    }
+
+    .blocklyHtmlInput {
+      color: #575E75;
+    }
+    .zelos-renderer .blocklyText {
+      font-weight: 500 !important;
+    }
+  </style>
+
+
+  <script>
+
+    Blockly.Block.prototype.setColourFromRawValues_ = function (primary, secondary,
+      tertiary) {
+      primary = typeof primary === 'string' || primary instanceof String ?
+        Blockly.utils.replaceMessageReferences(primary) : primary;
+      secondary = typeof secondary === 'string' || secondary instanceof String ?
+        Blockly.utils.replaceMessageReferences(secondary) : secondary;
+      tertiary = typeof tertiary === 'string' || tertiary instanceof String ?
+        Blockly.utils.replaceMessageReferences(tertiary) : tertiary;
+
+      this.setColour(primary);
+      this.style.colourSecondary = secondary;
+      this.style.colourTertiary = tertiary;
+    };
+
+    Blockly.Block.prototype.setCategory = function (category) {
+      // NOP
+    };
+
+  </script>
+</head>
+
+<body>
+  <div id="blocklyDiv"></div>
+  <script>
+    goog.require('Blockly.blockRendering.Debug');
+    goog.require('Blockly.zelos.Renderer');
+    // Blockly.blockRendering.startDebugger();
+
+    // This stub is a workaround in order to load pxt-blockly blocks, as they
+    // rely on a setOutputShape method on the block.
+    Blockly.BlockSvg.prototype.setOutputShape = function () { };
+
+    var blocklyDiv = document.getElementById('blocklyDiv');
+    var workspace;
+    window.addEventListener('message', function (msg) {
+      var data = msg.data;
+      if (data.type !== 'post') {
+        return;
+      }
+      var xml = data.xml;
+      try {
+        if (workspace) {
+          workspace.dispose();
+          blocklyDiv.innerHTML = '';
+          window.parent.focus();
+        }
+      } catch { }
+
+      workspace = Blockly.inject(blocklyDiv, {
+        renderer: 'zelos',
+        move: {
+          scrollbars: true,
+          drag: true,
+          wheel: false,
+        },
+        zoom: {
+          wheel: true,
+          startScale: 2,
+        },
+        media: 'https://unpkg.com/scratch-blocks@0.1.0-prerelease.1578322100/media/'
+      });
+      var constants = workspace.getRenderer().getConstants();
+      constants.FIELD_TEXT_FONTSIZE = 12;
+      constants.FIELD_TEXT_FONTWEIGHT = '500';
+      constants.FIELD_TEXT_FONTFAMILY = 'Helvetica Neue';
+
+      constants.FIELD_BORDER_RECT_X_PADDING = 2.75 * constants.GRID_UNIT;
+
+      constants.ADD_START_HATS = true;
+
+      Blockly.Xml.domToWorkspace(Blockly.Xml.textToDom(xml), workspace);
+
+      function postChange() {
+        try {
+          var topBlock = workspace.getTopBlocks()[0];
+          workspaceToSvg_(workspace, function (datauri) {
+            window.parent.postMessage({
+              type: 'svg',
+              from: 'zelos',
+              text: datauri
+            }, '*');
+          }, document.getElementById('blocklycss').innerText);
+        } catch (err) {
+          console.error(err);
+        }
+      }
+
+      workspace.addChangeListener(function (e) {
+        if (e.type != 'ui') {
+          postChange();
+        }
+      });
+
+      postChange();
+    });
+  </script>
+</body>
+
+</html>
\ No newline at end of file
