third_party/WebKit/LayoutTests/tables/mozilla/bugs/bug2479-2.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
   2     "http://www.w3.org/TR/REC-html40/strict.dtd">
   3
   4 <HTML>
   5 <HEAD>
   6
   7 <title>Miscellaneous NGLayout Tests</title>
   8
   9 <STYLE TYPE="text/css">
  10 <!--
  11 HTML { background: #0F9; color: black;}
  12
  13 BODY {
  14   background: #9fc;
  15   font-family: verdana, arial, geneva, sans-serif;
  16   border: medium solid black;
  17   width: 85%;
  18   margin: 4em auto;
  19   padding: 0;
  20   }
  21
  22 UL.top {
  23   background: #0c9;
  24   margin: 0;
  25   padding: 0.3em;
  26   }
  27
  28 UL.top { display: table-row; margin: 0; padding: 0; }
  29
  30 UL.top LI { margin: 0; padding: 0; display: table-cell; width: 25%; text-align: center; }
  31
  32 DIV.main {
  33   margin: 0;
  34   padding: 1em;
  35   }
  36
  37 FORM {
  38   margin-left: 5em;
  39   }
  40
  41 P {
  42   margin: 0;
  43   padding: 0;
  44   font: 1.0em/2.0 verdana, arial, geneva, sans-serif;
  45   }
  46
  47 .label { font-family: arial, helvetica, sans-serif; font-size: 0.9em; }
  48
  49 SPAN.formgroup { display: inline-table; }
  50
  51 SPAN.formgroup > * { display: table-row; }
  52
  53 -->
  54 </STYLE>
  55
  56 </HEAD>
  57
  58 <body>
  59
  60   <p>These links are in an element with display table-row, and the li elements
  61   have display: table-cell.  They disappear:</p>
  62
  63   <ul class="top">
  64     <li><a href="people.html">people</a></li>
  65     <li><a href="places.html">places</a></li>
  66     <li><a href="members.html">members</a></li>
  67     <li><a href="links.html">links</a></li>
  68   </ul>
  69
  70   <div class="main">
  71
  72   This text is not in the form.  The form should be indented 40px.
  73
  74         <form method="post" action="">
  75           <p>  This is text in the form.  It should be indented 40px.
  76           The form itself has the same table-row/table-cell problem as
  77           above.</p>
  78
  79           <p>
  80             <span class="formgroup"><span class="label">First Name (required)</span>
  81               <input type="text" name="fname" size="16">
  82             </span>
  83             <span class="formgroup"> <span class="label">Last Name (required)</span>
  84               <input type="text" name="lname" size="16">
  85             </span>
  86           </p>
  87           <p>
  88             <span class="formgroup"><span class="label">Email Address</span>
  89               <input type="text" name="iemail" size="40">
  90             </span>
  91           </p>
  92           <p>
  93              <span class="formgroup"><span class="label">Company Name</span>
  94                <input type="text" name="coname" size="16">
  95              </span>
  96              <span class="formgroup"><span class="label">Title</span>
  97                <input type="text" name="title" size="16">
  98              </span>
  99           </p>
 100           <p>
 101             <input type="Submit" name="submit" value="Submit!">
 102             <input type="reset" value="Clear Form" name="reset">
 103           </p>
 104         </form>
 105
 106 </div> <!-- main -->
 107
 108 </BODY>
 109 </HTML>
 110