Ignore overflow on "display: contents" elements

Signed-off-by: Alexei Barantsev <barancev@gmail.com>
RustyNail · Mar 29, 2019 · bbdf7c2 · bbdf7c2
1 parent 0ff52db
commit bbdf7c2
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 2 deletions.
diff --git a/javascript/atoms/dom.js b/javascript/atoms/dom.js
@@ -663,10 +663,11 @@ bot.dom.getOverflowState = function(elem, opt_region) {
       if (container == htmlElem) {
         return true;
       }
-      // An element cannot overflow an element with an inline display style.
+      // An element cannot overflow an element with an inline or contents display style.
       var containerDisplay = /** @type {string} */ (
           bot.dom.getEffectiveStyle(container, 'display'));
-      if (goog.string.startsWith(containerDisplay, 'inline')) {
+      if (goog.string.startsWith(containerDisplay, 'inline') ||
+          (containerDisplay == 'contents')) {
         return false;
       }
       // An absolute-positioned element cannot overflow a static-positioned one.

diff --git a/javascript/atoms/test/shown_test.html b/javascript/atoms/test/shown_test.html
@@ -389,6 +389,10 @@
       assertTrue(isShown(elem));
       assertTrue(isShown(elem.firstChild));
     }
+
+    function testDisplayContentsOverflowIgnored() {
+      assertTrue(isShown(findElement({id: 'displayContentsInput'})));
+    }
   </script>
 
   <style type="text/css">
@@ -571,6 +575,11 @@
   </div>
 </div>
 <div id='html5hidden' hidden>This is not visible</div>
+
+<div style="display: contents; overflow-y: auto">
+  <input id="displayContentsInput"/>
+</div>
+
 <table>
 <tr id="visible-row"><td>a</td></tr>
 <tr id="collapsed-row" style="visibility:collapse"><td>b</td></tr>