third_party/WebKit/LayoutTests/fast/css/heightless-list-item.html

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
   2 <html>
   3  <head>
   4   <title>CSS Test: height set to 0 to elements with 'display' set to 'list-item'</title>
   5
   6   <link rel="author" title="GÃ©rard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
   7   <link rel="author" title="Boris Zbarsky" href="bzbarsky@MIT.EDU">
   8   <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">
   9   <link rel="help" title="10.5 Content height: the 'height' property" href="http://www.w3.org/TR/CSS21/visudet.html#the-height-property">
  10   <meta content="" name="flags">
  11   <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">
  12
  13   <!--  Adapted margin-top values to allow compensating values for height of 1px in the reference result-->
  14   <style type="text/css">
  15   #heightzerolistitem
  16   {
  17   color: green;
  18   display: list-item;
  19   font: 2em/1 serif;
  20   height: 0px;
  21   margin-left: 1.25em;
  22   overflow: visible;
  23   margin-top: 1px;
  24   }
  25
  26   ul
  27   {
  28   height: auto;
  29   margin-top: 30px;
  30   overflow: visible;
  31   }
  32
  33   li
  34   {
  35   color: green;
  36   font: 2em/1 serif;
  37   height: 0px;
  38   overflow: visible;
  39   margin-top: 1px;
  40   }
  41
  42   li#yhidden { overflow-y:hidden; }
  43   li#xhidden { overflow-x:hidden; }
  44
  45   ul#heightless { height: 0px; }
  46   </style>
  47
  48   </head>
  49   <body>
  50
  51   <p>Test passes if <strong>5 green "PASS"</strong> are each preceded by a filled disc.</p>
  52
  53   <!--Inline content in div with display: list-item, overflow: visible and height:0 gets painted-->
  54   <div id="heightzerolistitem">PASS</div>
  55
  56   <!--Inline content in list-item with overflow: visible and height:0 gets painted-->
  57   <ul>
  58     <li>PASS</li>
  59   </ul>
  60
  61   <!--Inline content in list-item and list-item parent with overflow: visible and height:0 gets painted-->
  62   <ul id="heightless">
  63     <li>PASS</li>
  64   </ul>
  65
  66   <!--Block content in div with display: list-item, overflow: visible and height:0 gets painted-->
  67   <div id="heightzerolistitem" style="margin-top: 60px;"><div>PASS</div></div>
  68
  69   <!--Block content in list-item with overflow: visible and height:0 gets painted-->
  70   <ul>
  71     <li><div>PASS</div></li>
  72   </ul>
  73
  74   <!--Inline content in div with display: list-item, overflow-y: hidden and height:0 does not get painted-->
  75   <div id="heightzerolistitem" style="overflow-y:hidden;">PASS</div>
  76
  77   <!--Inline content in list-item with overflow-y: hidden and height:0 does not get painted-->
  78   <ul>
  79     <li id="yhidden">PASS</li>
  80   </ul>
  81
  82   <!--Block content in list-item with overflow-y: hidden and height:0 does not get painted-->
  83   <ul>
  84     <li id="yhidden"><div>PASS</div></li>
  85   </ul>
  86
  87   <!--Inline content in div with display: list-item, overflow-x: hidden and height:0 does not get painted-->
  88   <div id="heightzerolistitem" style="overflow-x:hidden;">PASS</div>
  89
  90   <!--Inline content in list-item with overflow-x: hidden and height:0 does not get painted-->
  91   <ul>
  92     <li id="xhidden">PASS</li>
  93   </ul>
  94
  95   <!--Block content in list-item with overflow-x: hidden and height:0 does not get painted-->
  96   <ul>
  97     <li id="xhidden"><div>PASS</div></li>
  98   </ul>
  99
 100   </body>
 101 </html>