Change to use 'opacity: 0' instead of 'display:none' for hiding iframes.

anacronw · Nov 24, 2013 · 2d7deec · 2d7deec
1 parent 3403f5c
commit 2d7deec
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 51 deletions.
diff --git a/README.md b/README.md
@@ -78,8 +78,6 @@ Finally, there are two convenience methods to access the contents of the sandbox
 Options:
 - `fixtures.containerId`
   - change the ID of the iframe that gets injected into the page
-- `fixtures.visible`
-  - make fixtures 'visible' in the DOM (default: false)
 - `fixtures.path`
  - change the path to look for fixtures (default: `spec/javascripts/fixtures`)
 

diff --git a/fixtures.js b/fixtures.js
@@ -18,7 +18,6 @@
 
         self.containerId = 'js-fixtures';
         self.path = 'spec/javascripts/fixtures';
-        self.visible = false;
         self.window = function(){
             var iframe = document.getElementById(self.containerId);
             if (!iframe) return null;
@@ -64,15 +63,8 @@
             var cb = typeof arguments[arguments.length - 1] === 'function' ? arguments[arguments.length -1] : null;
             var iframe = document.createElement('iframe');
             iframe.setAttribute('id', self.containerId);
-            if (self.visible) {
-                // Firefox needs the frame to be displayed in order for the contents
-                // to register as 'visible'.
-                iframe.style.display = 'block';
-                iframe.style.width = '1px';
-                iframe.style.height = '1px';
-            } else {
-                iframe.style.display = 'none';
-            }
+            iframe.style.opacity = 0;
+            iframe.style.filter = 'alpha(0)';
 
             document.body.appendChild(iframe);
             var doc = iframe.contentWindow || iframe.contentDocument;

diff --git a/test/fixtures-spec.js b/test/fixtures-spec.js
@@ -33,55 +33,22 @@ define(function(require){
                 it("should set 'spec/javascripts/fixtures/' as the default fixtures path", function(){
                     expect(fixtures.path).to.equal('spec/javascripts/fixtures');
                 });
-                it("should disable fixture visibility by default", function(){
-                    expect(fixtures.visible).to.equal(false);
-                });
                 it("should set body to null", function(){
                     expect(fixtures.body()).to.be(null);
                 });
                 it("should set window to null", function(){
                     expect(fixtures.window()).to.be(null);
                 });
             });
-            describe("visible", function(){
+            describe("content", function(){
                 // jQuery defines 'visible' based on if an element consumes space in the page layout.
                 // See http://api.jquery.com/visible-selector/
                 // and https://github.com/jquery/jquery/blob/master/src/css/hiddenVisibleSelectors.js
-                var oldVisible;
-                beforeEach(function(){
-                    oldVisible = fixtures.visible;
-                });
-                afterEach(function(){
-                    fixtures.visible = oldVisible;
-                });
-
-                describe("when enabled", function(){
-                    beforeEach(function(){
-                        fixtures.visible = true;
-                        fixtures.set("<button id='test'>Test</button>");
-                    });
-                    it("should display fixtures", function(){
-                        var container = document.getElementById(fixtures.containerId);
-                        var button = fixtures.window().document.getElementById('test');
-                        expect(container.style.display).to.equal('block');
-                        // Firefox will collapse inner dimensions to 0 if the
-                        // element is not displayed.
-                        expect(button.offsetHeight).to.be.greaterThan(0);
-                        expect(button.offsetWidth).to.be.greaterThan(0);
-                    });
-                });
-                describe("when disabled", function(){
-                    beforeEach(function(){
-                        fixtures.visible = false;
-                        fixtures.set("<button id='test'>Test</button>");
-                    });
-                    it("should hide fixtures", function(){
-                        var container = document.getElementById(fixtures.containerId);
-                        var button = fixtures.window().document.getElementById('test');
-                        expect(container.style.display).to.equal('none');
-                        // Chrome never collapses the element while Firefox
-                        // does so we don't test dimensions here.
-                    });
+                it("should be 'visible'", function(){
+                    fixtures.set("<button id='test'>Test</button>");
+                    var button = fixtures.window().document.getElementById('test');
+                    expect(button.offsetHeight).to.be.greaterThan(0);
+                    expect(button.offsetWidth).to.be.greaterThan(0);
                 });
             });
             describe("body", function(){