mirror of
https://github.com/rn10950/RetroZilla.git
synced 2024-11-14 19:50:12 +01:00
119 lines
4.5 KiB
HTML
119 lines
4.5 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: Rendering BODY and HEAD as children of HTML - 2</TITLE>
|
||
|
|
<STYLE TYPE="text/css">
|
||
|
|
|
||
|
|
/* Layout */
|
||
|
|
HTML { display: block; border: 1em lime solid; margin: 8px; }
|
||
|
|
HEAD, BODY { display: table-cell; border: solid thick;
|
||
|
|
padding: 1em; margin: 1em; }
|
||
|
|
HEAD > *, BODY > * { display: block; border: thin dotted; margin: 1em 0; }
|
||
|
|
|
||
|
|
/* Formatting */
|
||
|
|
HTML { color: black; background: green; }
|
||
|
|
HEAD { color: white; background: red; }
|
||
|
|
BODY { color: yellow; background: teal; }
|
||
|
|
|
||
|
|
|
||
|
|
</STYLE>
|
||
|
|
|
||
|
|
<style type="text/css">
|
||
|
|
/* Remove these other style blocks */
|
||
|
|
style + style { display: none; }
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<style type="text/css" title="Default Rendering">
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<style type="text/css" title="Show META contents">
|
||
|
|
META[name]:before { content: "name=" attr(name) ", content=" attr(content); }
|
||
|
|
META[http-equiv]:before { content: "http-equiv=" attr(http-equiv) ", content=" attr(content); }
|
||
|
|
META[name][http-equiv]:before { content: "name=" attr(name) ", http-equiv=" attr(http-equiv) ", content=" attr(content); }
|
||
|
|
</style>
|
||
|
|
|
||
|
|
|
||
|
|
</HEAD>
|
||
|
|
|
||
|
|
<BODY>
|
||
|
|
|
||
|
|
<H1>Rendering <code>BODY</code> and <code>HEAD</code> as children of <code>HTML</code> - 2</H1>
|
||
|
|
|
||
|
|
<p>If you have any comments to make regarding this test, e-mail <a
|
||
|
|
href="mailto:py8ieh=eviltests-htmlbodyheadrendering@bath.ac.uk">py8ieh=eviltests@bath.ac.uk</a>.</p>
|
||
|
|
|
||
|
|
<dl>
|
||
|
|
<dt>Prerequisites</dt>
|
||
|
|
<dd>Browsers that are subjected to this test should support the
|
||
|
|
the background, padding, margin, border and color properties of CSS, and in
|
||
|
|
addition the <code>overflow</code> property and fixed position stuff from CSS2.</dd>
|
||
|
|
</dl>
|
||
|
|
|
||
|
|
<h2>1. Making the BODY and the HEAD into a table</h2>
|
||
|
|
|
||
|
|
<P>This is really evil, but completely valid...</P>
|
||
|
|
|
||
|
|
<P>This document should have two cells, side by side: one on the left,
|
||
|
|
the other on the right. The one on the left should be red with white
|
||
|
|
writing and a thick white border. It should contain four dotted lines
|
||
|
|
separated by a blank line, followed by a dotted bordered box
|
||
|
|
containing the document title, and another dotted bordered box
|
||
|
|
containing the stylesheet, also shown below:</P>
|
||
|
|
|
||
|
|
<PRE>
|
||
|
|
...
|
||
|
|
</PRE>
|
||
|
|
|
||
|
|
<P>The dotted borders and lines and the text in the left cell should
|
||
|
|
be white.</P>
|
||
|
|
|
||
|
|
<P>The right cell should be teal, with yellow text. This paragraph you
|
||
|
|
are reading now should be in this right cell.</P>
|
||
|
|
|
||
|
|
<P>The width of the two cells is left up to the user agent to decide,
|
||
|
|
I think.</P>
|
||
|
|
|
||
|
|
<P>The right cell should look similar to the left cell in formatting
|
||
|
|
-- each box of text should have a yellow dotted border, and there
|
||
|
|
should be a blank line between each such box. No box should be nested
|
||
|
|
-- the dotted boxes should always be distinct from each other.</P>
|
||
|
|
|
||
|
|
<P>The cells should be the same height, and they should have grown
|
||
|
|
vertically to accommodate this text.</P>
|
||
|
|
|
||
|
|
<P>Around the whole setup should be two borders, dark green and light
|
||
|
|
green. The cells should be separated from each other and from these
|
||
|
|
outer borders by 1em of dark green.</P>
|
||
|
|
|
||
|
|
<P>There should also be some alternate stylesheets set up to allow you
|
||
|
|
to display the <META> content. This may help with diagnosis.</P>
|
||
|
|
|
||
|
|
<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"> Document renders exactly as described. </OPTION>
|
||
|
|
<OPTION VALUE="N"> TITLE, HEAD and HTML styles are ignored, and/or 'display' on BODY is ignored. </OPTION>
|
||
|
|
<OPTION VALUE="B"> There are some serious layout errors on the page. </OPTION>
|
||
|
|
<OPTION VALUE="D"> Page is not displayed at all. </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><a href="home.html">Up to the Evil Tests Page</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 June 1999.</p>
|
||
|
|
|
||
|
|
</BODY></HTML>
|
||
|
|
|