Fix visibility checking for descendants of details elements

Signed-off-by: Alexei Barantsev <[email protected]>

Author: twalpole

javascript/atoms/dom.js

@@ -469,14 +469,6 @@ bot.dom.isShown_ = function(elem, ignoreOpacity, parentsDisplayedFn) {
     return true;
   }
 
-  // Child of DETAILS element is not shown unless the DETAILS element is open
-  // or the child is a SUMMARY element.
-  var parent = bot.dom.getParentElement(elem);
-  if (parent && bot.dom.isElement(parent, goog.dom.TagName.DETAILS) &&
-      !parent.open && !bot.dom.isElement(elem, goog.dom.TagName.SUMMARY)) {
-    return false;
-  }
-
   // Option or optgroup is shown iff enclosing select is shown (ignoring the
   // select's opacity).
   if (bot.dom.isElement(elem, goog.dom.TagName.OPTION) ||
@@ -610,6 +602,13 @@ bot.dom.isShown = function(elem, opt_ignoreOpacity) {
       return true;
     }
 
+    // Child of DETAILS element is not shown unless the DETAILS element is open
+    // or the child is a SUMMARY element.
+    if (parent && bot.dom.isElement(parent, goog.dom.TagName.DETAILS) &&
+        !parent.open && !bot.dom.isElement(e, goog.dom.TagName.SUMMARY)) {
+      return false;
+    }
+
     return parent && displayed(parent);
   }
 

javascript/atoms/test/shown_test.html

@@ -393,6 +393,17 @@
     function testDisplayContentsOverflowIgnored() {
       assertTrue(isShown(findElement({id: 'displayContentsInput'})));
     }
+
+    function testDetailsSummaryVisibility() {
+      var summary = findElement({id: 'summary'});
+      assertTrue(isShown(summary));
+    }
+
+    function testDetailsNonSummaryDescendantsVisibility() {
+      var contents = findElement({id: 'non-summary'});
+      assertFalse(isShown(contents));
+      assertFalse(isShown(contents.firstChild));
+    }
   </script>
 
   <style type="text/css">
@@ -585,5 +596,11 @@
 <tr id="collapsed-row" style="visibility:collapse"><td>b</td></tr>
 <tr id="post-collapsed-row"><td>c</td></tr>
 </table>
+
+<details>
+  <summary id="summary">Some Summary</summary>
+  <div id="non-summary"><p>More text</p></div>
+</details>
+
 </body>
 </html>