Create test specific markup in tests

Instead of relying on a shared dom structure, the tests should create (and destroy) elements as needed.

test/ol.html

@@ -64,7 +64,9 @@
       mocha.run();
     }
   </script>
-
-  <div id="map"></div>
+  <!--
+    Tests should not depend on any specific markup and should instead create
+    whatever elements are needed (cleaning up when done).
+  -->
 </body>
 </html>

test/spec/ol/control/control.test.js

@@ -5,7 +5,7 @@ describe('ol.control.Control', function() {
 
   beforeEach(function() {
     map = new ol.Map({
-      target: document.getElementById('map')
+      target: document.createElement('div')
     });
     var element = goog.dom.createDom(goog.dom.TagName.DIV);
     control = new ol.control.Control({element: element});

test/spec/ol/control/zoomslider.test.js

@@ -1,11 +1,13 @@
 goog.provide('ol.test.control.ZoomSlider');
 
 describe('ol.control.ZoomSlider', function() {
-  var map, zoomslider;
+  var map, target, zoomslider;
 
   beforeEach(function() {
+    target = document.createElement('div');
+    document.body.appendChild(target);
     map = new ol.Map({
-      target: document.getElementById('map')
+      target: target
     });
     zoomslider = new ol.control.ZoomSlider({
       minResolution: 5000,
@@ -17,6 +19,10 @@ describe('ol.control.ZoomSlider', function() {
   afterEach(function() {
     zoomslider.dispose();
     map.dispose();
+    document.body.removeChild(target);
+    zoomslider = null;
+    map = null;
+    target = null;
   });
 
   describe('configuration & defaults', function() {
@@ -58,7 +64,8 @@ describe('ol.control.ZoomSlider', function() {
 
   describe('DOM creation', function() {
     it('creates the expected DOM elements', function() {
-      var zoomSliderContainers = goog.dom.getElementsByClass('ol-zoomslider'),
+      var zoomSliderContainers = goog.dom.getElementsByClass(
+          'ol-zoomslider', target),
           zoomSliderContainer,
           zoomSliderThumbs,
           zoomSliderThumb,
@@ -91,8 +98,39 @@ describe('ol.control.ZoomSlider', function() {
     it('creates a goog.fx.Dragger', function() {
       expect(zoomslider.dragger_ instanceof goog.fx.Dragger).to.be(true);
       expect(zoomslider.dragger_.limits instanceof goog.math.Rect).to.be(true);
+    });
+  });
+
+  describe('#direction_', function() {
+    it('is horizontal for wide containers', function() {
+      var control = new ol.control.ZoomSlider({
+        minResolution: 5000,
+        maxResolution: 100000
+      });
+      control.element.style.width = '1000px';
+      control.element.style.height = '10px';
+      control.setMap(map);
+
       var horizontal = ol.control.ZoomSlider.direction.HORIZONTAL;
-      expect(zoomslider.direction_).to.be(horizontal);  // vertical
+      expect(control.direction_).to.be(horizontal);
+
+      control.dispose();
+    });
+
+    it('is vertical for tall containers', function() {
+      var control = new ol.control.ZoomSlider({
+        minResolution: 5000,
+        maxResolution: 100000
+      });
+      control.element.style.width = '10px';
+      control.element.style.height = '1000px';
+
+      control.setMap(map);
+
+      var vertical = ol.control.ZoomSlider.direction.VERTICAL;
+      expect(control.direction_).to.be(vertical);
+
+      control.dispose();
     });
   });
 

test/spec/ol/map.test.js

@@ -56,7 +56,7 @@ describe('ol.Map', function() {
 
     beforeEach(function() {
       map = new ol.Map({
-        target: document.getElementById('map')
+        target: document.createElement('div')
       });
     });
 
@@ -138,7 +138,7 @@ describe('ol.Map', function() {
       map = new ol.Map({
         layers: new ol.Collection([layer]),
         renderer: ol.RendererHint.DOM,
-        target: 'map',
+        target: document.createElement('div'),
         view: new ol.View2D({
           center: new ol.Coordinate(0, 0),
           zoom: 1

test/spec/ol/renderer/webgl/imagelayer.test.js

@@ -13,7 +13,7 @@ describe('ol.renderer.webgl.ImageLayer', function() {
 
     beforeEach(function() {
       map = new ol.Map({
-        target: 'map'
+        target: document.createElement('div')
       });
       var layer = new ol.layer.ImageLayer({
         source: new ol.source.ImageSource({