mirror of
https://github.com/rn10950/RetroZilla.git
synced 2024-11-09 09:20:15 +01:00
162 lines
5.0 KiB
HTML
162 lines
5.0 KiB
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>
|
||
|
|
|