LayoutTests/tables/mozilla/bugs/bug2479-3.html - WebKit - Git at Google

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
 <HTML lang="en">

 <HEAD>
   <META name="author" content="Ian Hickson">
   <META name="copyright" content="&copy; copyright 1999 Ian Hickson">
   <META http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
   <META http-equiv="Content-Style-Type" content="text/css">
   <TITLE>Evil Tests: Generic Table Tests 1</TITLE>

   <STYLE TYPE="text/css">

     .table { display: table; border: none; }
     .cell { display: table-cell; border: none; }
     .row { display: table-row; border: none; }

     .full { width: 100%; }
     .indented { margin-left: 5em; margin-right: 5em; }
     .outdented { margin-left: -5em; margin-right: -5em; }

     .gray { background: silver; color: black; }

     .left { text-align: left; }
     .right { text-align: right; }

     .hide.this { display: none; } .note { border: double thick red;
     padding: 0.5em; }

   </STYLE>

 </HEAD>

 <BODY>

 <H1>Generic Table Tests - 1</H1>

 <p>If you have any comments to make regarding this test, e-mail <a
 href="mailto:py8ieh=eviltests-table@bath.ac.uk">py8ieh=eviltests@bath.ac.uk</a>.</p>

 <dl>
  <dt>Prerequisites</dt>
  <dd>Browsers that are subjected to this test should support CSS1 and the CSS2 table model, and multiple classes.</dd>
 </dl>

 <P class=note>If this paragraph breaks the line here: <SPAN
 class=table>and here:</SPAN> then your browser <em>does support</em>
 table values on 'display'. <strong>If this paragraphs flows without
 any undue breaks, then you should mark your browser as not supporting
 table values!</strong></P>


 <!--
 <P class="hide this">Multiple classes are not supported in this browser!</P>
 <P><em>Every</em> example on this entire page should look the same.</P>
 -->

 <h2>1. Table -&gt; Table Cell</h2>

 <P>Below there should be a gray bar, spanning the width of the BODY,
 with the text "Left" to the left and the text "Right", on the same
 line, flush to the right.</P>

    <DIV class="full gray table">
       <DIV class="left cell">Left</DIV>
       <DIV class="right cell">Right</DIV>
    </DIV>


 <!-- INVALID TESTS
 <h2>2. Auto Width</h2>

 <p><strong>David, this test and the next one are those for which
 NGLayout is not following Section 10.</strong></p>

 <P>Below there should be the same gray bar as in test 1.</P>

    <DIV class="gray table">
       <DIV class="left cell">Left</DIV>
       <DIV class="right cell">Right</DIV>
    </DIV>

 <P>This is because since the table has <code>width:auto</code> (which
 is implied) and the margins are also <code>auto</code> (which is also
 implied), and the padding is zero (more implication...), the margins
 should be set to 0, and the width should be set to the containing
 block's content width (the BODY's width). This is exactly the same as
 setting <code>width</code> to 100% as is done in the first test.</P>

 <h2>3. Negative Margins</h2>

 <P>Below there should be the same gray bar as in test 1. Again.</P>

    <DIV class="indented">
       <DIV class="outdented gray table">
          <DIV class="left cell">Left</DIV>
          <DIV class="right cell">Right</DIV>
       </DIV>
    </DIV>


 <h2>4. Table Row -> Table Cell</h2>

 <P><strong>NGLayout is simply not doing anything with the table
 elements here!</strong></P>

 <P>This example should, once more, be exactly the same as the gray bar
 in test 1.</P>

    <DIV class="gray row">
       <DIV class="left cell">Left</DIV>
       <DIV class="right cell">Right</DIV>
    </DIV>


 <h2>4. Lone Cells</h2>

 <P>Guess what! This example should look the same as that in part 1 of
 this page!</P>

    <DIV class="gray cell on left">Left</DIV>
    <DIV class="gray cell on right">Right</DIV>


 <h2>4. Table Row -> Non Tabular Content & Cells</h2>

 <P>This should, once more, look the same as the first example...</P>

    <DIV class="gray table">
       <DIV class="left">Left</DIV>
       <DIV class="right cell">Right</DIV>
    </DIV>

 -->


 <h2>Submit Results</h2>

     <FORM action="/%7Epy8ieh/cgi/newresult.pl" method="POST" class="resultsubmission">
       <P>How does your browser fare on this test?
         <SELECT NAME="result">
            <OPTION VALUE="Y"> The test renders correctly. </OPTION>
            <OPTION VALUE="B"> The test renders incorrectly. </OPTION>
            <OPTION VALUE="N"> Table values for 'display' not supported. </OPTION>
 <!--           <OPTION VALUE="U"> Untestable: Multiple classes not supported. </OPTION>-->
            <OPTION VALUE="U"> Untestable: CSS not supported. </OPTION>
         </SELECT>
         <LABEL>Comment: <INPUT TYPE="text" NAME="comment"></LABEL>
         <INPUT TYPE="submit" VALUE="Submit">
       </P>
     </FORM>


 <HR title="Footer">
 <p>Up to the <a href="home.html">Table Tests</A>.</p>
 <p>Up to the <a href="../home.html">Evil Tests Page</A>.</p>
 <!--<P>Bugzilla: <a href="http://bugzilla.mozilla.org/show_bug.cgi?id=1959">Bug 1959</A></P>-->
 <p>This page is maintained by <a class=External HREF="http://www.bath.ac.uk/%7Epy8ieh/">Ian Hickson</A> (<a class=Mail HREF="mailto:py8ieh=website@bath.ac.uk">py8ieh@bath.ac.uk</A>).</p>
 <p>Last updated in March 1999.</p>

 </BODY></HTML>
	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
	<HTML lang="en">

	<HEAD>
	<META name="author" content="Ian Hickson">
	<META name="copyright" content="© copyright 1999 Ian Hickson">
	<META http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
	<META http-equiv="Content-Style-Type" content="text/css">
	<TITLE>Evil Tests: Generic Table Tests 1</TITLE>

	<STYLE TYPE="text/css">

	.table { display: table; border: none; }
	.cell { display: table-cell; border: none; }
	.row { display: table-row; border: none; }

	.full { width: 100%; }
	.indented { margin-left: 5em; margin-right: 5em; }
	.outdented { margin-left: -5em; margin-right: -5em; }

	.gray { background: silver; color: black; }

	.left { text-align: left; }
	.right { text-align: right; }

	.hide.this { display: none; } .note { border: double thick red;
	padding: 0.5em; }

	</STYLE>

	</HEAD>

	<BODY>

	<H1>Generic Table Tests - 1</H1>

	<p>If you have any comments to make regarding this test, e-mail <a
	href="mailto:py8ieh=eviltests-table@bath.ac.uk">py8ieh=eviltests@bath.ac.uk</a>.</p>

	<dl>
	<dt>Prerequisites</dt>
	<dd>Browsers that are subjected to this test should support CSS1 and the CSS2 table model, and multiple classes.</dd>
	</dl>

	<P class=note>If this paragraph breaks the line here: <SPAN
	class=table>and here:</SPAN> then your browser <em>does support</em>
	table values on 'display'. <strong>If this paragraphs flows without
	any undue breaks, then you should mark your browser as not supporting
	table values!</strong></P>


	<!--
	<P class="hide this">Multiple classes are not supported in this browser!</P>
	<P><em>Every</em> example on this entire page should look the same.</P>
	-->

	<h2>1. Table -> Table Cell</h2>

	<P>Below there should be a gray bar, spanning the width of the BODY,
	with the text "Left" to the left and the text "Right", on the same
	line, flush to the right.</P>

	<DIV class="full gray table">
	<DIV class="left cell">Left</DIV>
	<DIV class="right cell">Right</DIV>
	</DIV>


	<!-- INVALID TESTS
	<h2>2. Auto Width</h2>

	<p><strong>David, this test and the next one are those for which
	NGLayout is not following Section 10.</strong></p>

	<P>Below there should be the same gray bar as in test 1.</P>

	<DIV class="gray table">
	<DIV class="left cell">Left</DIV>
	<DIV class="right cell">Right</DIV>
	</DIV>

	<P>This is because since the table has <code>width:auto</code> (which
	is implied) and the margins are also <code>auto</code> (which is also
	implied), and the padding is zero (more implication...), the margins
	should be set to 0, and the width should be set to the containing
	block's content width (the BODY's width). This is exactly the same as
	setting <code>width</code> to 100% as is done in the first test.</P>

	<h2>3. Negative Margins</h2>

	<P>Below there should be the same gray bar as in test 1. Again.</P>

	<DIV class="indented">
	<DIV class="outdented gray table">
	<DIV class="left cell">Left</DIV>
	<DIV class="right cell">Right</DIV>
	</DIV>
	</DIV>


	<h2>4. Table Row -> Table Cell</h2>

	<P><strong>NGLayout is simply not doing anything with the table
	elements here!</strong></P>

	<P>This example should, once more, be exactly the same as the gray bar
	in test 1.</P>

	<DIV class="gray row">
	<DIV class="left cell">Left</DIV>
	<DIV class="right cell">Right</DIV>
	</DIV>


	<h2>4. Lone Cells</h2>

	<P>Guess what! This example should look the same as that in part 1 of
	this page!</P>

	<DIV class="gray cell on left">Left</DIV>
	<DIV class="gray cell on right">Right</DIV>


	<h2>4. Table Row -> Non Tabular Content & Cells</h2>

	<P>This should, once more, look the same as the first example...</P>

	<DIV class="gray table">
	<DIV class="left">Left</DIV>
	<DIV class="right cell">Right</DIV>
	</DIV>

	-->


	<h2>Submit Results</h2>

	<FORM action="/%7Epy8ieh/cgi/newresult.pl" method="POST" class="resultsubmission">
	<P>How does your browser fare on this test?
	<SELECT NAME="result">
	<OPTION VALUE="Y"> The test renders correctly. </OPTION>
	<OPTION VALUE="B"> The test renders incorrectly. </OPTION>
	<OPTION VALUE="N"> Table values for 'display' not supported. </OPTION>
	<!-- <OPTION VALUE="U"> Untestable: Multiple classes not supported. </OPTION>-->
	<OPTION VALUE="U"> Untestable: CSS not supported. </OPTION>
	</SELECT>
	<LABEL>Comment: <INPUT TYPE="text" NAME="comment"></LABEL>
	<INPUT TYPE="submit" VALUE="Submit">
	</P>
	</FORM>


	<HR title="Footer">
	<p>Up to the <a href="home.html">Table Tests</A>.</p>
	<p>Up to the <a href="../home.html">Evil Tests Page</A>.</p>
	<!--<P>Bugzilla: <a href="http://bugzilla.mozilla.org/show_bug.cgi?id=1959">Bug 1959</A></P>-->
	<p>This page is maintained by <a class=External HREF="http://www.bath.ac.uk/%7Epy8ieh/">Ian Hickson</A> (<a class=Mail HREF="mailto:py8ieh=website@bath.ac.uk">py8ieh@bath.ac.uk</A>).</p>
	<p>Last updated in March 1999.</p>

	</BODY></HTML>