From 74adb319617fda042b8816b3e3133706ae453c6a Mon Sep 17 00:00:00 2001
From: Rachel Fenichel <fenichel@google.com>
Date: Thu, 14 Mar 2019 17:46:19 -0700
Subject: [PATCH] Add a playgound for debugging SVG paths

---
 tests/rendering/svg_paths.html | 78 ++++++++++++++++++++++++++++++++++
 1 file changed, 78 insertions(+)
 create mode 100644 tests/rendering/svg_paths.html
diff --git a/tests/rendering/svg_paths.html b/tests/rendering/svg_paths.html
new file mode 100644
index 000000000..f0ffb22b3
--- /dev/null
+++ b/tests/rendering/svg_paths.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>SVG Path Playground</title>
+  <script src="../../blockly_uncompressed.js"></script>
+
+  <style>
+    html, body {
+      height: 100%;
+    }
+    body {
+      background-color: #fff;
+      font-family: sans-serif;
+      overflow: hidden;
+    }
+    .pathDebugClass {
+      stroke-width: 1px;
+      stroke: black;
+      fill: none;
+    }
+    .lineStartMarker {
+      fill: blue;
+    }
+  </style>
+
+<script>
+'use strict';
+var svgSpace;
+
+function addPathAt(path, x, y) {
+  var group = Blockly.utils.createSvgElement('g', {}, svgSpace);
+  Blockly.utils.createSvgElement('path', {
+    'd': 'm ' + (x + 50) + ',' + y + ' ' + path,
+    'marker-start': 'url(#startDot)',
+    'marker-end': 'url(#endDot)',
+    'class': 'pathDebugClass'
+  },
+  group);
+
+
+  return group;
+}
+
+function start() {
+  svgSpace = document.getElementById('workspace');
+  addPathAt(Blockly.BlockSvg.TAB_PATH_DOWN, 0, 0);
+  addPathAt(Blockly.BlockSvg.START_HAT_PATH, 0, 40);
+  addPathAt(Blockly.BlockSvg.NOTCH_PATH_LEFT, 0, 60);
+  addPathAt(Blockly.BlockSvg.NOTCH_PATH_RIGHT, 0, 70);
+  addPathAt(Blockly.BlockSvg.INNER_TOP_LEFT_CORNER, 0, 90);
+}
+</script>
+
+</head>
+
+<body onload="start()">
+
+  <svg xmlns="http://www.w4.org/2000/svg" version="1.1" width="1000px" height="1000px" viewBox="0 0 200 200" id="workspace">
+
+    <defs>
+      <!-- Background grid -->
+      <pattern id="grid" patternUnits="userSpaceOnUse" width="10" height="10">
+        <line stroke="#ccc" stroke-width="2" x1="0" y1="1" x2="2" y2="1"></line>
+      </pattern>
+      <!-- simple dot marker definitions -->
+      <marker id="startDot" viewBox="0 0 10 10" refX="5" refY="5"
+          markerWidth="5" markerHeight="5">
+        <circle cx="5" cy="5" r="2" fill="red" />
+      </marker>
+      <marker id="endDot" viewBox="0 0 10 10" refX="5" refY="5"
+          markerWidth="5" markerHeight="5">
+        <circle cx="5" cy="5" r="2" fill="blue" />
+      </marker>
+    </defs>
+    <rect x="0" y="0" width="1000" height="1000" style="fill:url(#grid);"></rect>
+  </svg>
+</body>
