Text should overflow when list item height set to 0
authorrobert@webkit.org <robert@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 22 Mar 2012 20:49:24 +0000 (20:49 +0000)
committerrobert@webkit.org <robert@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 22 Mar 2012 20:49:24 +0000 (20:49 +0000)
https://bugs.webkit.org/show_bug.cgi?id=78726

Reviewed by Julien Chaffraix.

Source/WebCore:

Tests: css2.1/20110323/height-applies-to-010a-expected.html
       fast/css/heightless-list-item-expected.html
       fast/css/heightless-list-item.html

* rendering/RenderListItem.cpp:
(WebCore::RenderListItem::paint):
   If the list item has height:0, only paint it if the list item allows any block or inline content
   to overflow unclipped. The zero-height check is a shortcut to avoid unnecessary painting and
   this seems to be the only case where there's something to do.

LayoutTests:

* css2.1/20110323/height-applies-to-010a-expected.html: Added.
* css2.1/20110323/height-applies-to-010a.htm: Added.
* fast/css/heightless-list-item-expected.html: Added.
* fast/css/heightless-list-item.html: Added.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@111755 268f45cc-cd09-0410-ab3c-d52691b4dbfc

LayoutTests/ChangeLog
LayoutTests/css2.1/20110323/height-applies-to-010a-expected.html [new file with mode: 0644]
LayoutTests/css2.1/20110323/height-applies-to-010a.htm [new file with mode: 0644]
LayoutTests/fast/css/heightless-list-item-expected.html [new file with mode: 0644]
LayoutTests/fast/css/heightless-list-item.html [new file with mode: 0644]
Source/WebCore/ChangeLog
Source/WebCore/rendering/RenderListItem.cpp

index cf7912a..f160be8 100644 (file)
@@ -1,3 +1,15 @@
+2012-03-19  Robert Hogan  <robert@webkit.org>
+
+        Text should overflow when list item height set to 0
+        https://bugs.webkit.org/show_bug.cgi?id=78726
+
+        Reviewed by Julien Chaffraix.
+
+        * css2.1/20110323/height-applies-to-010a-expected.html: Added.
+        * css2.1/20110323/height-applies-to-010a.htm: Added.
+        * fast/css/heightless-list-item-expected.html: Added.
+        * fast/css/heightless-list-item.html: Added.
+
 2012-03-22  Dave Michael  <dmichael@chromium.org>
 
         HTMLPluginElement is not destroyed on reload or navigation if getNPObject is called
diff --git a/LayoutTests/css2.1/20110323/height-applies-to-010a-expected.html b/LayoutTests/css2.1/20110323/height-applies-to-010a-expected.html
new file mode 100644 (file)
index 0000000..4ed01a9
--- /dev/null
@@ -0,0 +1,59 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+
+ <head>
+
+  <title>CSS Test: height set to 0 to elements with 'display' set to 'list-item'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="author" title="Boris Zbarsky" href="bzbarsky@MIT.EDU">
+  <link rel="help" title="10.5 Content height: the 'height' property" href="http://www.w3.org/TR/CSS21/visudet.html#the-height-property">
+  <link rel="help" title="11.1.1 Overflow: the 'overflow' property" href="http://www.w3.org/TR/CSS21/visufx.html#overflow">
+
+  <meta content="" name="flags">
+  <meta content="If height of content exceeds the set height of a block-level non-replaced element in normal flow (like a list-item element such as in this test), then the content should overflow according to the 'overflow' property." name="assert">
+
+  <style type="text/css">
+  div
+  {
+  color: green;
+  display: list-item; 
+  font: 2em/1 serif;
+  margin-left: 1.25em;
+  overflow: visible;
+  }
+  
+  ul
+  {
+  height: auto;
+  margin-top: 1em;
+  overflow: visible;
+  }  
+  
+  li
+  {
+  color: green;
+  font: 2em/1 serif;
+  overflow: visible;    
+  }
+  
+  </style>
+
+ </head>
+
+ <body>
+
+  <p>Test passes if <strong>3 green "PASS"</strong> are each preceded by a filled disc.</p>
+
+  <div>PASS</div>
+
+  <ul>
+    <li>PASS</li>
+  </ul>
+
+  <ul>
+    <li>PASS</li>
+  </ul>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/LayoutTests/css2.1/20110323/height-applies-to-010a.htm b/LayoutTests/css2.1/20110323/height-applies-to-010a.htm
new file mode 100644 (file)
index 0000000..0f726f3
--- /dev/null
@@ -0,0 +1,62 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+
+ <head>
+
+  <title>CSS Test: height set to 0 to elements with 'display' set to 'list-item'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="author" title="Boris Zbarsky" href="bzbarsky@MIT.EDU">
+  <link rel="help" title="10.5 Content height: the 'height' property" href="http://www.w3.org/TR/CSS21/visudet.html#the-height-property">
+  <link rel="help" title="11.1.1 Overflow: the 'overflow' property" href="http://www.w3.org/TR/CSS21/visufx.html#overflow">
+
+  <meta content="" name="flags">
+  <meta content="If height of content exceeds the set height of a block-level non-replaced element in normal flow (like a list-item element such as in this test), then the content should overflow according to the 'overflow' property." name="assert">
+
+  <style type="text/css">
+  div
+  {
+  color: green;
+  display: list-item; 
+  font: 2em/1 serif;
+  height: 0px;
+  margin-left: 1.25em;
+  overflow: visible;
+  }
+  
+  ul
+  {
+  height: auto;
+  margin-top: 3em;
+  overflow: visible;
+  }  
+  
+  li
+  {
+  color: green;
+  font: 2em/1 serif;
+  height: 0px;
+  overflow: visible;    
+  }
+  
+  ul#heightless {height: 0px;}
+  </style>
+
+ </head>
+
+ <body>
+
+  <p>Test passes if <strong>3 green "PASS"</strong> are each preceded by a filled disc.</p>
+
+  <div>PASS</div>
+
+  <ul>
+    <li>PASS</li>
+  </ul>
+
+  <ul id="heightless">
+    <li>PASS</li>
+  </ul>
+
+ </body>
+</html>
\ No newline at end of file
diff --git a/LayoutTests/fast/css/heightless-list-item-expected.html b/LayoutTests/fast/css/heightless-list-item-expected.html
new file mode 100644 (file)
index 0000000..337bc59
--- /dev/null
@@ -0,0 +1,91 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+ <head>
+  <title>CSS Test: Reference Result</title>
+  <!--  Adapted margin-top values to allow compensating values for height of 1px in the reference result-->
+  <style type="text/css">
+  #heightzerolistitem
+  {
+  color: green;
+  display: list-item; 
+  font: 2em/1 serif;
+  height: 1px; /*Amended to 1px to allow reference result to paint*/
+  margin-left: 1.25em;
+  overflow: visible;
+  }
+
+  ul
+  {
+  height: auto;
+  margin-top: 29px;
+  overflow: visible;
+  }  
+  
+  li
+  {
+  color: green;
+  font: 2em/1 serif;
+  height: 1px; /*Amended to 1px to allow reference result to paint*/
+  overflow: visible;    
+  }
+
+  li#yhidden { overflow-y:hidden; }
+  li#xhidden { overflow-x:hidden; }
+
+  ul#heightless {height: 1px; /*Amended to 1px to allow reference result to paint*/}
+  </style>
+
+  </head>
+  <body>
+  <p>Test passes if <strong>5 green "PASS"</strong> are each preceded by a filled disc.</p>
+
+  <!--Inline content in div with display: list-item, overflow: visible and height:0 gets painted-->
+  <div id="heightzerolistitem">PASS</div>
+
+  <!--Inline content in list-item with overflow: visible and height:0 gets painted-->
+  <ul>
+    <li>PASS</li>
+  </ul>
+
+  <!--Inline content in list-item and list-item parent with overflow: visible and height:0 gets painted-->
+  <ul id="heightless">
+    <li>PASS</li>
+  </ul>
+
+  <!--Block content in div with display: list-item, overflow: visible and height:0 gets painted-->
+  <div id="heightzerolistitem" style="margin-top: 59px;"><div>PASS</div></div>
+
+  <!--Block content in list-item with overflow: visible and height:0 gets painted-->
+  <ul>
+    <li><div>PASS</div></li>
+  </ul>
+
+  <!--Inline content in div with display: list-item, overflow-y: hidden and height:0 does not get painted-->
+  <div id="heightzerolistitem" style="overflow-y:hidden;">PASS</div>
+
+  <!--Inline content in list-item with overflow-y: hidden and height:0 does not get painted-->
+  <ul>
+    <li id="yhidden">PASS</li>
+  </ul>
+
+  <!--Block content in list-item with overflow-y: hidden and height:0 does not get painted-->
+  <ul>
+    <li id="yhidden"><div>PASS</div></li>
+  </ul>
+
+  <!--Inline content in div with display: list-item, overflow-x: hidden and height:0 does not get painted-->
+  <div id="heightzerolistitem" style="overflow-x:hidden;">PASS</div>
+
+  <!--Inline content in list-item with overflow-x: hidden and height:0 does not get painted-->
+  <ul>
+    <li id="xhidden">PASS</li>
+  </ul>
+
+  <!--Block content in list-item with overflow-x: hidden and height:0 does not get painted-->
+  <ul>
+    <li id="xhidden"><div>PASS</div></li>
+  </ul>
+  </body>
+</html>
\ No newline at end of file
diff --git a/LayoutTests/fast/css/heightless-list-item.html b/LayoutTests/fast/css/heightless-list-item.html
new file mode 100644 (file)
index 0000000..e031fe8
--- /dev/null
@@ -0,0 +1,101 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+ <head>
+  <title>CSS Test: height set to 0 to elements with 'display' set to 'list-item'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="author" title="Boris Zbarsky" href="bzbarsky@MIT.EDU">
+  <link rel="bookmark" title="Interesting testcase that some UAs appear to fail" href="http://lists.w3.org/Archives/Public/public-css-testsuite/2012Feb/0028.html">
+  <link rel="help" title="10.5 Content height: the 'height' property" href="http://www.w3.org/TR/CSS21/visudet.html#the-height-property">
+  <meta content="" name="flags">
+  <meta content="If height of content exceeds the set height of a block-level non-replaced element in normal flow (like a list-item element such as in this test), then the content should overflow according to the 'overflow' property." name="assert">
+
+  <!--  Adapted margin-top values to allow compensating values for height of 1px in the reference result-->
+  <style type="text/css">
+  #heightzerolistitem
+  {
+  color: green;
+  display: list-item; 
+  font: 2em/1 serif;
+  height: 0px;
+  margin-left: 1.25em;
+  overflow: visible;
+  margin-top: 1px;
+  }
+
+  ul
+  {
+  height: auto;
+  margin-top: 30px;
+  overflow: visible;
+  }  
+  
+  li
+  {
+  color: green;
+  font: 2em/1 serif;
+  height: 0px;
+  overflow: visible;    
+  margin-top: 1px;
+  }
+
+  li#yhidden { overflow-y:hidden; }
+  li#xhidden { overflow-x:hidden; }
+
+  ul#heightless { height: 0px; }
+  </style>
+
+  </head>
+  <body>
+  <p>Test passes if <strong>5 green "PASS"</strong> are each preceded by a filled disc.</p>
+
+  <!--Inline content in div with display: list-item, overflow: visible and height:0 gets painted-->
+  <div id="heightzerolistitem">PASS</div>
+
+  <!--Inline content in list-item with overflow: visible and height:0 gets painted-->
+  <ul>
+    <li>PASS</li>
+  </ul>
+
+  <!--Inline content in list-item and list-item parent with overflow: visible and height:0 gets painted-->
+  <ul id="heightless">
+    <li>PASS</li>
+  </ul>
+
+  <!--Block content in div with display: list-item, overflow: visible and height:0 gets painted-->
+  <div id="heightzerolistitem" style="margin-top: 60px;"><div>PASS</div></div>
+
+  <!--Block content in list-item with overflow: visible and height:0 gets painted-->
+  <ul>
+    <li><div>PASS</div></li>
+  </ul>
+
+  <!--Inline content in div with display: list-item, overflow-y: hidden and height:0 does not get painted-->
+  <div id="heightzerolistitem" style="overflow-y:hidden;">PASS</div>
+
+  <!--Inline content in list-item with overflow-y: hidden and height:0 does not get painted-->
+  <ul>
+    <li id="yhidden">PASS</li>
+  </ul>
+
+  <!--Block content in list-item with overflow-y: hidden and height:0 does not get painted-->
+  <ul>
+    <li id="yhidden"><div>PASS</div></li>
+  </ul>
+
+  <!--Inline content in div with display: list-item, overflow-x: hidden and height:0 does not get painted-->
+  <div id="heightzerolistitem" style="overflow-x:hidden;">PASS</div>
+
+  <!--Inline content in list-item with overflow-x: hidden and height:0 does not get painted-->
+  <ul>
+    <li id="xhidden">PASS</li>
+  </ul>
+
+  <!--Block content in list-item with overflow-x: hidden and height:0 does not get painted-->
+  <ul>
+    <li id="xhidden"><div>PASS</div></li>
+  </ul>
+  </body>
+</html>
\ No newline at end of file
index 1e05f52..f2419f9 100644 (file)
@@ -1,3 +1,20 @@
+2012-03-19  Robert Hogan  <robert@webkit.org>
+
+        Text should overflow when list item height set to 0
+        https://bugs.webkit.org/show_bug.cgi?id=78726
+
+        Reviewed by Julien Chaffraix.
+
+        Tests: css2.1/20110323/height-applies-to-010a-expected.html
+               fast/css/heightless-list-item-expected.html
+               fast/css/heightless-list-item.html
+
+        * rendering/RenderListItem.cpp:
+        (WebCore::RenderListItem::paint):
+           If the list item has height:0, only paint it if the list item allows any block or inline content 
+           to overflow unclipped. The zero-height check is a shortcut to avoid unnecessary painting and 
+           this seems to be the only case where there's something to do.
+
 2012-03-22  Dave Michael  <dmichael@chromium.org>
 
         HTMLPluginElement is not destroyed on reload or navigation if getNPObject is called
index 6c0677e..3e6a7dc 100644 (file)
@@ -381,7 +381,7 @@ void RenderListItem::positionListMarker()
 
 void RenderListItem::paint(PaintInfo& paintInfo, const LayoutPoint& paintOffset)
 {
-    if (!logicalHeight())
+    if (!logicalHeight() && hasOverflowClip())
         return;
 
     RenderBlock::paint(paintInfo, paintOffset);