| <!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> |
| |
