diff --git a/js/id/renderer/map.js b/js/id/renderer/map.js
index 729d37936..e4cb0d02e 100644
--- a/js/id/renderer/map.js
+++ b/js/id/renderer/map.js
@@ -235,10 +235,7 @@ iD.Map = function() {
     map.size = function(_) {
         if (!arguments.length) return dimensions;
         dimensions = _;
-        surface
-            .size(dimensions)
-            .selectAll('#clip-rect')
-            .size(dimensions);
+        surface.size(dimensions);
         background.size(dimensions);
         return redraw();
     };
diff --git a/js/id/svg/surface.js b/js/id/svg/surface.js
index 9fb64ca0e..e9b1b36db 100644
--- a/js/id/svg/surface.js
+++ b/js/id/svg/surface.js
@@ -1,16 +1,8 @@
 iD.svg.Surface = function() {
     return function drawSurface(selection) {
-        selection.append('defs')
-            .append('clipPath')
-                .attr('id', 'clip')
-            .append('rect')
-                .attr('id', 'clip-rect')
-                .attr({ x: 0, y: 0 });
+        selection.append('defs');
 
-        var clip = selection.append('g')
-            .attr('clip-path', 'url(#clip)');
-
-        var layers = clip.selectAll('.layer')
+        var layers = selection.selectAll('.layer')
             .data(['fill', 'casing', 'stroke', 'text', 'hit']);
 
         layers.enter().append('g')
diff --git a/test/rendering.html b/test/rendering.html
new file mode 100644
index 000000000..4250cd949
--- /dev/null
+++ b/test/rendering.html
@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset='utf-8'>
+    <title>Rendering Tests</title>
+    <link rel="stylesheet" href="../css/map.css">
+</head>
+<body>
+    <!-- include source files here... -->
+    <script src='../js/lib/lodash.js'></script>
+    <script src='../js/lib/d3.v3.js'></script>
+
+    <script src='../js/id/id.js'></script>
+    <script src='../js/id/util.js'></script>
+
+    <script src="../js/id/geo.js"></script>
+    <script src="../js/id/geo/extent.js"></script>
+
+    <script src="../js/id/svg.js"></script>
+    <script src="../js/id/svg/areas.js"></script>
+    <script src="../js/id/svg/lines.js"></script>
+    <script src="../js/id/svg/member_classes.js"></script>
+    <script src="../js/id/svg/midpoints.js"></script>
+    <script src="../js/id/svg/multipolygons.js"></script>
+    <script src="../js/id/svg/points.js"></script>
+    <script src="../js/id/svg/surface.js"></script>
+    <script src="../js/id/svg/tag_classes.js"></script>
+    <script src="../js/id/svg/vertices.js"></script>
+
+    <script src='../js/id/graph/entity.js'></script>
+    <script src='../js/id/graph/graph.js'></script>
+    <script src='../js/id/graph/history.js'></script>
+    <script src='../js/id/graph/node.js'></script>
+    <script src='../js/id/graph/relation.js'></script>
+    <script src='../js/id/graph/way.js'></script>
+
+    <table>
+        <thead>
+            <tr class="title"><th colspan="7">Highways</th></tr>
+            <tr><th></th><th colspan="3">z16</th><th colspan="3">z17</th></tr>
+            <tr><th></th><th>Base</th><th>Hover</th><th>Selected</th><th>Base</th><th>Hover</th><th>Selected</th></tr>
+        </thead>
+        <tbody class="highways">
+        </tbody>
+    </table>
+
+    <script>
+        var zooms = [16, 17],
+            modes = ['base', 'hover', 'selected'],
+            highways = [
+                'motorway', 'trunk', 'primary', 'secondary', 'tertiary', 'residential',
+                'service', 'track', 'road', 'unclassified', 'living_street', 'pedestrian',
+                'path', 'footway', 'cycleway', 'bridleway', 'steps', 'proposed', 'construction'];
+
+        var row = d3.select('.highways').selectAll('tr')
+            .data(highways)
+          .enter().append('tr');
+
+        row.append('th')
+            .text(function (d) { return d; });
+
+        var projection = Object,
+            filter = d3.functor(true),
+            a = iD.Node({loc: [15, 15]}),
+            b = iD.Node({loc: [185, 15]}),
+            way = iD.Way({nodes: [a, b]}),
+            vertices = iD.svg.Vertices(projection),
+            lines = iD.svg.Lines(projection),
+            midpoints = iD.svg.Midpoints(projection);
+
+        row.selectAll('td')
+            .data(function (d) {
+                return _.flatten(zooms.map(function (z) {
+                    return modes.map(function (m) {
+                        return { zoom: z, mode: m, tag: d };
+                    });
+                }));
+            })
+          .enter()
+            .append('td')
+            .append('svg')
+            .attr('width', 200)
+            .attr('height', 30)
+            .attr('data-zoom', function (d) { return d.zoom; })
+            .call(iD.svg.Surface())
+            .each(function (d) {
+                var highway = way.update({tags: {highway: d.tag}}),
+                    graph = iD.Graph([a, b, highway]);
+
+                d3.select(this)
+                    .attr('class', d.mode === 'selected' ? 'mode-select' : 'mode-browse')
+                    .call(vertices, graph, [a, b], filter)
+                    .call(lines, graph, [highway], filter)
+                    .call(midpoints, graph, [highway], filter)
+                    .selectAll('.line')
+                    .classed(d.mode, d.mode !== 'base');
+            });
+    </script>
+</body>
+</html>
