<!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: 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 &lt;META&gt; 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>

