summaryrefslogtreecommitdiff
path: root/legacy/haveproblems/acid2/a2-1.html
diff options
context:
space:
mode:
Diffstat (limited to 'legacy/haveproblems/acid2/a2-1.html')
-rw-r--r--legacy/haveproblems/acid2/a2-1.html46
1 files changed, 46 insertions, 0 deletions
diff --git a/legacy/haveproblems/acid2/a2-1.html b/legacy/haveproblems/acid2/a2-1.html
new file mode 100644
index 0000000..da69069
--- /dev/null
+++ b/legacy/haveproblems/acid2/a2-1.html
@@ -0,0 +1,46 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
+<html>
+ <head>
+ <title>The Second Acid Test</title>
+ <style type="text/css">
+ /* section numbers refer to CSS2.1 */
+
+ /* page setup */
+ html { font: 12px sans-serif; margin: 0; padding: 0; /* overflow: hidden; *//* hides scrollbars on viewport, see 11.1.1:3 */ background: white; color: red; }
+ body { margin: 0; padding: 0; }
+
+ /* introduction message */
+ .intro { font: 2em sans-serif; margin: 3.5em 2em; padding: 0.5em; border: solid thin; background: white; color: black; position: relative; z-index: 2; /* should cover the black and red bars that are fixed-positioned */ }
+ .intro * { font: inherit; margin: 0; padding: 0; }
+ .intro h1 { font-size: 1em; font-weight: bolder; margin: 0; padding: 0; }
+ .intro :link { color: blue; }
+ .intro :visited { color: purple; }
+
+ /* picture setup */
+ #top { margin: 100em 3em 0; padding: 2em 0 0 .5em; text-align: left; font: 2em/24px sans-serif; color: navy; white-space: pre; } /* "Hello World!" text */
+ .picture { position: relative; border: 1em solid transparent; margin: 0 0 100em 3em; } /* containing block for face */
+ .picture { background: red; } /* overriden by preferred stylesheet below */
+
+ /* top line of face (scalp): fixed positioning and min/max height/width */
+ .picture p { position: fixed; margin: 0; padding: 0; border: 0; top: 9em; left: 11em; width: 140%; max-width: 4em; height: 3px; min-height: 1em; max-height: 2mm; /* min-height overrides max-height, see 10.7 */ background: black; border-bottom: 0.5em yellow solid; }
+
+ /* bits that shouldn't be part of the top line (and shouldn't be visible at all): HTML parsing, "+" combinator, stacking order */
+ .picture p.bad { border-bottom: red solid; /* shouldn't matter, because the "p + table + p" rule below should match it too, thus hiding it */ }
+ .picture p + p { background: maroon; z-index: 1; } /* shouldn't match anything */
+ .picture p + table + p { margin-top: 3em; /* should end up under the absolutely positioned table below, and thus not be visible */ }
+
+ </style>
+ <link rel="appendix stylesheet" href="data:text/css,.picture%20%7B%20background%3A%20none%3B%20%7D"> <!-- this stylesheet should be applied by default -->
+ </head>
+ <body>
+ <div class="intro">
+ <h1>Standards compliant?</h1>
+ <p><a href="#top">Take The Acid2 Test</a> and compare it to <a
+ href="reference.html">the reference rendering</a>.</p>
+ </div>
+ <h2 id="top">Hello World!</h2>
+ <div class="picture">
+ <p><table><tr><td></table><p class="bad"> <!-- <table> closes <p> per the HTML4 DTD -->
+ </div>
+ </body>
+</html>