Ensure Element.visible works on nodes from other documents (e.g., IFRAMES). (Closes prototypejs#319)

savetheclocktower · savetheclocktower · commit 4494c23749fc · 2017-04-09T18:13:03.000-05:00
diff --git a/src/prototype/dom/dom.js b/src/prototype/dom/dom.js
@@ -232,7 +232,7 @@
    *      // -> false
   **/
   function visible(element) {
-    return $(element).getStyle('display') !== 'none';
+    return Element.getStyle(element, 'display') !== 'none';
   }
 
   /**
@@ -2647,12 +2647,13 @@
   function getStyle(element, style) {
     element = $(element);
     style = normalizeStyleName(style);
+    var doc = element.ownerDocument;
 
     // Try inline styles first.
     var value = element.style[style];
     if (!value || value === 'auto') {
       // Reluctantly retrieve the computed style.
-      var css = document.defaultView.getComputedStyle(element, null);
+      var css = doc.defaultView.getComputedStyle(element, null);
       value = css ? css[style] : null;
     }
 
diff --git a/test/unit/fixtures/iframe.html b/test/unit/fixtures/iframe.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css" media="screen">
+  .h { display: none; }
+</style>
+</head>
+<body>
+<p>visible</p>
+<p class="h">hidden</p>
+</body>
+</html>
diff --git a/test/unit/tests/dom.test.js b/test/unit/tests/dom.test.js
@@ -338,11 +338,20 @@ suite('DOM', function () {
     assert.equal(element.up(), wrapper);
   });
 
-  test('#visible', function () {
+  test('#visible', function (done) {
     assert.notEqual('none', $('test-visible').style.display);
     assert($('test-visible').visible());
     assert.equal('none', $('test-hidden').style.display);
     assert(!$('test-hidden').visible());
+    assert(!$('test-hidden-by-stylesheet').visible());
+    var iframe = $('iframe');
+    // Wait to make sure the IFRAME has loaded.
+    setTimeout(function () {
+      var paragraphs = iframe.contentWindow.document.querySelectorAll('p');
+      assert(Element.visible(paragraphs[0]));
+      assert(!Element.visible(paragraphs[1]));
+      done();
+    }, 500);
   });
 
   test('#toggle', function () {
diff --git a/test/unit/views/tests/dom.erb b/test/unit/views/tests/dom.erb
@@ -83,14 +83,26 @@ div.style-test { margin-left: 1px }
 body {
   height: 40000px;
 }
+
+#test-hidden-by-stylesheet {
+  display: none;
+}
+
+#iframe {
+  width: 1px;
+  height: 1px;
+}
 </style>
 
 <div id="scroll_test_1">
   <p id="scroll_test_2">Scroll test</p>
 </div>
 
+<iframe src="/fixtures/iframe.html" id="iframe"></iframe>
+
 <div id="test-visible">visible</div>
 <div id="test-hidden" style="display:none;">hidden</div>
+<div id="test-hidden-by-stylesheet">hidden</div>
 <div id="test-toggle-visible">visible</div>
 <div id="test-toggle-hidden" style="display:none;">hidden</div>
 <div id="test-hide-visible">visible</div>
