diff --git a/test/rendering.html b/test/rendering.html
deleted file mode 100644
index ae3c5d69a..000000000
--- a/test/rendering.html
+++ /dev/null
@@ -1,369 +0,0 @@
-<!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='../node_modules/lodash/lodash.js'></script>
-
-    <script src='../js/id/id.js'></script>
-    <script src='../js/lib/id/geo.js'></script>
-    <script src='../js/lib/id/presets.js'></script>
-    <script src='../js/lib/id/svg.js'></script>
-    <script src='../js/lib/id/util.js'></script>
-
-    <script src='../js/id/core/graph.js'></script>
-    <script src='../js/id/core/history.js'></script>
-
-    <script src='../js/id/osm/entity.js'></script>
-    <script src='../js/id/osm/node.js'></script>
-    <script src='../js/id/osm/relation.js'></script>
-    <script src='../js/id/osm/way.js'></script>
-
-    <form style='position: fixed; right: 10px; bottom: 10px'>
-        <input id='background-color' type='range' min='0' max='255' value='255'>
-        <label for='background-color'>Background Color</label>
-    </form>
-
-    <script>
-        var bg = d3.select('#background-color')
-            .on('change', function () {
-                var v = bg.property('value');
-                d3.select('body')
-                    .style('background-color', d3.rgb(v,v,v));
-            });
-
-        var infiniteExtent = iD.geoExtent([0, 0], [Infinity, Infinity]),
-            projection = function(p) { return p; },
-            filter = function() { return true; },
-            context = {};
-
-        projection.stream = function(listener) {
-            return listener;
-        };
-
-        context.presets = function() {
-            return iD.presetIndex().load({
-                presets: {
-                    'amenity/restaurant': {
-                        geometry: ['point'],
-                        tags: {
-                            amenity: 'restaurant'
-                        },
-                        icon: 'restaurant'
-                    },
-                    'highway/turning_circle': {
-                        geometry: ['vertex'],
-                        tags: {
-                            highway: 'turning_circle'
-                        },
-                        icon: 'circle'
-                    },
-                    'railway/level_crossing': {
-                        geometry: ['vertex'],
-                        tags: {
-                            railway: 'level_crossing'
-                        },
-                        icon: 'cross'
-                    },
-                    'other': {
-                        geometry: ['point', 'vertex', 'line', 'area', 'relation'],
-                        tags: {}
-                    }
-                }
-            });
-        };
-
-        iD.data = {
-            featureIcons: {
-                'restaurant': {'12':[0,3840],'18':[0,3854],'24':[0,3874]},
-                'cross':{'12':[0,1320],'18':[0,1334],'24':[0,1354]},
-                'circle':{'12':[0,1020],'18':[0,1034],'24':[0,1054]}
-            }
-        };
-
-        context.imagePath = function(_) {
-            return 'img/' + _;
-        };
-
-        context.selectedIDs = function() {
-            return [];
-        };
-
-        function tagHTML(d) {
-            return _.map(d, function (value, key) { return key + '=' + value;}).join('<br>');
-        }
-    </script>
-
-    <table>
-        <thead>
-            <tr><th></th><th>Base</th><th>Hover</th><th>Selected</th></tr>
-        </thead>
-        <tbody class='points'>
-        </tbody>
-    </table>
-
-    <script>
-        var data = [{}, {amenity: 'restaurant'}],
-            modes = ['base', 'hover', 'selected'],
-            node = iD.Node({loc: [15, 30]}),
-            points = iD.svgPoints(projection, context);
-
-        var row = d3.select('.points').selectAll('tr')
-            .data(data)
-          .enter().append('tr');
-
-        row.append('th')
-            .html(tagHTML);
-
-        row.selectAll('td')
-            .data(function (d) {
-                return modes.map(function (m) {
-                    return _.extend({ mode: m }, d);
-                });
-            })
-          .enter()
-            .append('td')
-            .attr('class', function (d) { return d.mode === 'selected' ? 'mode-select' : 'mode-browse'; })
-            .append('svg')
-            .attr('width', 30)
-            .attr('height', 40)
-            .attr('data-zoom', function (d) { return d.zoom; })
-            .call(iD.svgLayers(projection, context))
-            .each(function (d) {
-                var n = node.update({tags: d}),
-                    graph = iD.Graph([n]);
-
-                d3.select(this)
-                    .attr('class', 'behavior-hover')
-                    .call(points, graph, [n], filter)
-                    .selectAll('.point')
-                    .classed(d.mode, d.mode !== 'base');
-            });
-    </script>
-
-    <table>
-        <thead>
-            <tr><th></th><th colspan='3'>z16</th><th colspan='3'>z17</th><th colspan='3'>z18</th></tr>
-            <tr><th></th><th>Base</th><th>Hover</th><th>Selected</th><th>Base</th><th>Hover</th><th>Selected</th><th>Base</th><th>Hover</th><th>Selected</th></tr>
-        </thead>
-        <tbody class='vertices'>
-        </tbody>
-    </table>
-
-    <script>
-        var data = [{
-                type: 'normal',
-                tags: {}
-            }, {
-                type: 'shared',
-                shared: true,
-                tags: {}
-            }, {
-                type: 'highway=turning_circle',
-                tags: {highway: 'turning_circle'}
-            }, {
-                type: 'railway=level_crossing',
-                tags: {railway: 'level_crossing'}
-            }, {
-                type: 'unknown tag',
-                tags: {interesting: 'yes'}
-            }],
-            zooms = [16, 17, 18],
-            modes = ['base', 'hover', 'selected'],
-            node = iD.Node({loc: [15, 15]}),
-            way = iD.Way({nodes: [node.id]}),
-            vertices = iD.svgVertices(projection, context);
-
-        var row = d3.select('.vertices').selectAll('tr')
-            .data(data)
-          .enter().append('tr');
-
-        row.append('th')
-            .text(function (d) { return d.type; });
-
-        row.selectAll('td')
-            .data(function (d) {
-                return _.flatten(zooms.map(function (z) {
-                    return modes.map(function (m) {
-                        return _.extend({ zoom: z, mode: m }, d);
-                    });
-                }));
-            })
-          .enter()
-            .append('td')
-            .attr('class', function (d) { return d.mode === 'selected' ? 'mode-select' : 'mode-browse'; })
-            .append('svg')
-            .attr('width', 30)
-            .attr('height', 30)
-            .attr('data-zoom', function (d) { return d.zoom; })
-            .call(iD.svgLayers(projection, context))
-            .each(function (d) {
-                var n = node.update({tags: d.tags}),
-                    graph = iD.Graph([n, way]);
-
-                d3.select(this)
-                    .attr('class', 'behavior-hover')
-                    .call(vertices, graph, [n, way], filter, d.zoom)
-                    .selectAll('.vertex')
-                    .classed(d.mode, d.mode !== 'base')
-                    .classed('shared', d.shared);
-            });
-    </script>
-
-    <table>
-        <thead>
-            <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'],
-            tags = [
-                {},
-                {highway: 'motorway'},
-                {highway: 'trunk'},
-                {highway: 'primary'},
-                {highway: 'secondary'},
-                {highway: 'tertiary'},
-                {highway: 'residential'},
-                {highway: 'service'},
-                {highway: 'track'},
-                {highway: 'road'},
-                {highway: 'unclassified'},
-                {highway: 'living_street'},
-                {highway: 'pedestrian'},
-                {highway: 'path'},
-                {highway: 'footway'},
-                {highway: 'cycleway'},
-                {highway: 'bridleway'},
-                {highway: 'steps'},
-                {highway: 'proposed'},
-                {highway: 'construction', construction: 'motorway'},
-                {highway: 'construction', construction: 'trunk'},
-                {railway: 'rail'},
-                {railway: 'abandoned'},
-                {railway: 'subway'},
-                {waterway: 'stream'},
-                {waterway: 'river'},
-                {waterway: 'ditch'},
-                {power: 'line'},
-                {boundary: 'administrative'},
-                {boundary: 'protected_area'},
-                {boundary: 'national_park'}];
-
-        var row = d3.select('.highways').selectAll('tr')
-            .data(tags)
-          .enter().append('tr');
-
-        row.append('th')
-            .html(tagHTML);
-
-        var a = iD.Node({loc: [15, 15]}),
-            b = iD.Node({loc: [185, 15]}),
-            way = iD.Way({nodes: [a.id, b.id]}),
-            vertices = iD.svgVertices(projection, context),
-            lines = iD.svgLines(projection, context),
-            midpoints = iD.svgMidpoints(projection, context);
-
-        row.selectAll('td')
-            .data(function (d) {
-                return _.flatten(zooms.map(function (z) {
-                    return modes.map(function (m) {
-                        return { zoom: z, mode: m, tags: d };
-                    });
-                }));
-            })
-          .enter()
-            .append('td')
-            .attr('class', function (d) { return d.mode === 'selected' ? 'mode-select' : 'mode-browse'; })
-            .append('svg')
-            .attr('width', 200)
-            .attr('height', 30)
-            .attr('data-zoom', function (d) { return d.zoom; })
-            .call(iD.svgLayers(projection, context))
-            .each(function (d) {
-                var highway = way.update({tags: d.tags}),
-                    graph = iD.Graph([a, b, highway]);
-
-                d3.select(this)
-                    .attr('class', 'behavior-hover')
-                    .call(vertices, graph, [a, b], filter, d.zoom)
-                    .call(lines, graph, [highway], filter)
-                    .call(midpoints, graph, [highway], filter, infiniteExtent)
-                    .selectAll('.line')
-                    .classed(d.mode, d.mode !== 'base');
-            });
-    </script>
-
-    <table>
-        <thead>
-            <tr><th></th><th>Base</th><th>Selected</th></tr>
-        </thead>
-        <tbody class='areas'>
-        </tbody>
-    </table>
-
-    <script>
-        var modes = ['base', 'selected'],
-            tags = [
-                {area: 'yes'},
-                {natural: 'yes'},
-                {natural: 'water'},
-                {natural: 'wood'},
-                {building: 'yes'},
-                {amenity: 'parking'},
-                {amenity: 'school'}
-            ];
-
-        var row = d3.select('.areas').selectAll('tr')
-            .data(tags)
-          .enter().append('tr');
-
-        row.append('th')
-            .html(function (d) { return _.map(d, function (value, key) { return key + '=' + value;}).join('<br>'); });
-
-        var a = iD.Node({loc: [15, 15]}),
-            b = iD.Node({loc: [85, 15]}),
-            c = iD.Node({loc: [85, 85]}),
-            d = iD.Node({loc: [15, 85]}),
-            way = iD.Way({nodes: [a.id, b.id, c.id, d.id, a.id]}),
-            vertices = iD.svgVertices(projection, context),
-            areas = iD.svgAreas(projection, context),
-            midpoints = iD.svgMidpoints(projection, context);
-
-        row.selectAll('td')
-            .data(function (d) {
-                return modes.map(function (m) {
-                    return { mode: m, tags: d };
-                });
-            })
-          .enter()
-            .append('td')
-            .append('svg')
-            .attr('width', 100)
-            .attr('height', 100)
-            .call(iD.svgLayers(projection, context))
-            .each(function (datum) {
-                var area = way.update({tags: datum.tags}),
-                    graph = iD.Graph([a, b, c, d, area]);
-
-                d3.select(this)
-                    .attr('class', datum.mode === 'selected' ? 'mode-select' : 'mode-browse')
-                    .call(vertices, graph, [a, b, c, d], filter)
-                    .call(areas, graph, [area], filter)
-                    .call(midpoints, graph, [area], filter, infiniteExtent)
-                    .selectAll('.area')
-                    .classed(datum.mode, datum.mode !== 'base');
-            });
-    </script>
-
-</body>
-</html>
