summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/acid/acid2
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-19 00:47:55 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-19 00:47:55 +0000
commit26a029d407be480d791972afb5975cf62c9360a6 (patch)
treef435a8308119effd964b339f76abb83a57c29483 /testing/web-platform/tests/acid/acid2
parentInitial commit. (diff)
downloadfirefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz
firefox-26a029d407be480d791972afb5975cf62c9360a6.zip
Adding upstream version 124.0.1.upstream/124.0.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/acid/acid2')
-rw-r--r--testing/web-platform/tests/acid/acid2/404.html2
-rw-r--r--testing/web-platform/tests/acid/acid2/px-reference.html272
-rw-r--r--testing/web-platform/tests/acid/acid2/reference.html17
-rw-r--r--testing/web-platform/tests/acid/acid2/reference.pngbin0 -> 2261 bytes
-rw-r--r--testing/web-platform/tests/acid/acid2/reftest.html25
-rw-r--r--testing/web-platform/tests/acid/acid2/test.html150
6 files changed, 466 insertions, 0 deletions
diff --git a/testing/web-platform/tests/acid/acid2/404.html b/testing/web-platform/tests/acid/acid2/404.html
new file mode 100644
index 0000000000..a17f4ecb85
--- /dev/null
+++ b/testing/web-platform/tests/acid/acid2/404.html
@@ -0,0 +1,2 @@
+<style>body { background: red; }</style>
+
diff --git a/testing/web-platform/tests/acid/acid2/px-reference.html b/testing/web-platform/tests/acid/acid2/px-reference.html
new file mode 100644
index 0000000000..5a350033e3
--- /dev/null
+++ b/testing/web-platform/tests/acid/acid2/px-reference.html
@@ -0,0 +1,272 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
+<html>
+ <head>
+ <title>The Second Acid Test (pixel-for-pixel reference version)</title>
+ <style type="text/css">
+ *
+ {
+ margin: 0;
+ padding: 0;
+ }
+
+ html
+ {
+ font: 12px sans-serif;
+
+ overflow: hidden;
+
+ color: red;
+ background: white;
+ }
+
+ #top
+ {
+ font: 2em / 24px sans-serif;
+
+ margin: 2em 3.5em 0;
+
+ text-align: left;
+ white-space: pre;
+
+ color: navy;
+ }
+
+ .picture
+ {
+ margin: 3em 1em 1em 6em;
+ }
+
+ .line
+ {
+ height: 1em;
+
+ border: 0 solid black;
+ background: yellow;
+ }
+
+ .one
+ {
+ width: 0;
+ margin-left: 5em;
+
+ border-width: 0 2em;
+ }
+
+ .two
+ {
+ width: 4em;
+ margin-left: 3em;
+
+ border-width: 0 2em;
+ }
+
+ .three
+ {
+ width: 8em;
+ margin-left: 2em;
+
+ border-width: 0 1em;
+ }
+
+ /* the eyes, in all their three-layer glory
+
+ these need to appear with both background layers as on hidpi displays
+ the two background layers don't just create a solid yellow background */
+ .eyes
+ {
+ position: relative;
+
+ width: 12em;
+ height: 2em;
+ margin-left: 1em;
+
+ background: red;
+ }
+
+ .eyes .lower
+ {
+ position: absolute;
+ z-index: 1; /* redundant, but make stacking explicit */
+
+ width: 9em;
+ height: 2em;
+ margin-left: 1em;
+
+ border-left: solid 1em yellow;
+ background: fixed url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAABnRSTlMAAAAAAABupgeRAAAABmJLR0QA%2FwD%2FAP%2BgvaeTAAAAEUlEQVR42mP4%2F58BCv7%2FZwAAHfAD%2FabwPj4AAAAASUVORK5CYII%3D');
+ }
+
+ .eyes .upper
+ {
+ position: absolute;
+ z-index: 2; /* redundant, but make stacking explicit */
+
+ width: 10em;
+ height: 2em;
+ margin-left: 0;
+
+ border: solid 1em black;
+ border-width: 0 1em;
+ background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAABnRSTlMAAAAAAABupgeRAAAABmJLR0QA%2FwD%2FAP%2BgvaeTAAAAEUlEQVR42mP4%2F58BCv7%2FZwAAHfAD%2FabwPj4AAAAASUVORK5CYII%3D') fixed 1px 0;
+ }
+
+ .eyes .img
+ {
+ position: absolute;
+ z-index: 3; /* redundant, but make stacking explicit */
+
+ width: 8em;
+ height: 2em;
+ margin-left: 2em;
+
+ background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAAAYCAYAAAFy7sgCAAAGsUlEQVRo3u2ZbWwcZxHHf3s%2B7LNbO3ZjXBtowprGODRX0qpNQCjmJKuVKhMl1P2AkCwhFOIKkCBSm9IXavGFKAixIAECwkmWo5MrhRI3Ub40IEwQgp6aIDg3Cd6eEqyIHEteah%2B1E69vhw%2BZtTaX8704ZzkKjHS6271nZ56ZZ%2BY%2F%2F%2BdZKF%2FCwYshx3EkkggLsD1v4FQkEZZYLCbAKyG9%2Ba9EIsG6hnUAf8x74K3aUC3j4%2BM54HcsR2oAIomwZOezkv%2FnSHpYNh%2BNCmAE7xv94zvFdd1bHsjMZmQkPSxAJP%2B%2FfuBLwK54PC7JZFKAVJmzXLBt2w%2FMvcDLwIb8QS8CeJ4nkURYIomw7J%2FYJ8BvSiiXptGGxWds2%2Fa9%2Bnaxh%2BYAD%2Bgt04NDgABTpQY2cvvSFLzw86gWeBVwC8SzlOSv2YeBPfmDBoBHgKmR9LBEEmHZfDTqGykqfkUE0nA78BzQGfSgUeP3wNeTXwXg7MwZDhw4UHL6ra2ti79%2FOvljgG8AZ4H64Lhm4MvAocxsRppGG%2FxcXihlwLIs6R%2FfKV2HO%2F26uA94pdDYUKUZUU7W1RQYXA98Gnhaf5%2FXWX0HeAHYoQonqa4sZSOsSWMCWeC9Yko%2BCQwBe4E6oNc0Tc91XTl1%2BaTsn9gnI%2Blhyc5nZWxsrBIkKSbl2tiic3tW53YDEwOKaoFBrcOfqKee53lG9xsPMjV784r%2F4lO%2FpPvyJ9iyZcuvFSaXK5XYeAZ4CDgGvB3MS4B54LQuWYPeuy4iRFsevsXqpuYoqVQKIH2bK1CuDQNo11o4XUzh%2FcDWYIe1LEtyuZx4niee54njOGKapgfsqlL%2Bl2OjEXg8nxrc1dJ0h3hbtL%2BGCtz7KPBF4CuBe9uB15VafE8hr9qylI3HgG8C2%2FK7VyHZoJj7MrBRm30qFotJMpkU27YlHo%2F7Ha5a%2BV%2FKRkSJ4KuKRLVLKapTjB1SzAVIjY2NSXY%2BKyPpYdk%2FsU9OXT4pruv6BdZbBQfKsVGnvWlIe1VB6VQO8JxC1vZYLCbZ%2BaxsPhpdZDyRRFhG0sPiOE6ldKBg2lRg4xF1YCDIIIKN7DGgD3gH%2BBXwejKZfPrs2tPs%2FvPN2bKuYR1nd7xLKBSSJeqoXKnERjPwNWAG%2BLn2rZuM%2B4Tpml6vaWlp4eLcxVusZq5lCgVgOVKJjRqdX86ffL4D5wIoZACnTpw4wRMdT96i%2FImOJxERAs4uVyqxUacF%2FPdiCj%2BjdRBRGFtwXVdG0sPSdbhTmkYbpH98p2RmM2JZlig1vl0GWo4NQ%2Fn%2Bs5pKRXfwjweaxy7TND3HcRZbfC6X8xVPVQlGy7WxVWlO5XRXFXm6EZmrQuSXYyPE3SiVoEhE6Wyr0u2rumO6zv%2B21AFdQAswC1wCMuUCXCmyWQus103Qg8qlDO0lxwOb%2Fl4FiK3AB3VS%2FuKKLtK%2FgbeAnwG%2FvUODuRw%2FFrR0H1UC75fwu8oJ%2FhFsW5VIG%2FBUgEIN6Y65O4AHu4Ap0zQ9y7LEcZyb9lRBUHQcRyzL8unZVBW5bFWAvAp%2BhDQ2g4F47dUYtlU6obXA54DnVdFLekjUGGifh4AFy7LEdV3xj3X9I66m0QZpGm2QrsOd0j%2B%2BU0bSw5KZzYjrun6HWlAd961i4FfCj0aN1Usau%2Bc1lmuXPFwvAEumUut7tQQvAb%2FXb%2FT0bCAej9cODg7yt%2Bm%2F8q2%2F7OUHZ76PnZ1k2p0mJzlykmPancbOTnL0whHs7CQfb%2B5mx2d3sH79%2BtCRI0c6FeaOr9ICrIQfLvA%2B8BGNXxi4R6HrisJVUWrxAVW2oMFf0Aczim8o3kV6enowDIPjF9%2Fk%2BMU3S3rrjzMMg56eHr%2BxP7qKFbASfojG6kpeDGs1tiW53RxwWT%2Bin5q8w4xpQK5evQpAR30H7ZH2khNvj7TTUd8BgD4rqmu1ZKX8qNeY%2BfHz4zlXDgT5E8tpCTUq7XSBC4Euv8227TV9fX1E73%2BYtvo27BmbS9cvFVTY3bSRFza9yOcf6Gfmygy7d%2B%2Fm%2FPnzF4DvrsBLhnJlJfwIKXxv1PheAE4qK6p4H9AGbNKTuhngBPBPXYRe4IemaT5kWZbR19fHNbmGnZ1k4r3U4glDR30Hm5qjbGjsImJEOHbsGHv27JFz5869o0eFq01Jq%2BmHAXwI6FFKagMTgHM7GzFDS%2BoeLSMv7zjzC9x4Y7gxFovVDAwMEI1GaWlpWSzRVCrFwYMH%2FXfxZ4AfAa8B%2F7lDaGg1%2FQgp43lfK0yqtRMuJa3ceKe5DfgYsCYAZ2ngD8CfAkzqTpW7xY%2F%2FSznyX%2FVeUb2kVmX4AAAAAElFTkSuQmCC');
+ }
+
+ /* lines six to nine are the nose
+
+ (note these are scarcely changed from the test as border anti-aliasing
+ quickly differs) */
+ .nose
+ {
+ width: 12em;
+ height: 4em;
+ margin-left: 0;
+
+ border-width: 0 1em;
+ }
+
+ .nose > div
+ {
+ height: 0;
+ padding: 1em 1em 3em;
+
+ background: yellow;
+ }
+
+ .nose div div
+ {
+ width: 2em;
+ height: 2em;
+ margin-left: 4em;
+
+ background: red;
+ }
+
+ .nose div:hover div:before
+ {
+ border-bottom-color: blue;
+ }
+
+ .nose div:hover div:after
+ {
+ border-top-color: blue;
+ }
+
+ .nose div div:before
+ {
+ display: block;
+
+ height: 0;
+
+ content: '';
+
+ border-width: 1em;
+ border-style: none solid solid;
+ border-color: red yellow black yellow;
+ }
+
+ .nose div div:after
+ {
+ display: block;
+
+ height: 0;
+
+ content: '';
+
+ border-width: 1em;
+ border-style: solid solid none;
+ border-color: black yellow red yellow;
+ }
+
+ /* lines ten and eleven are the smile */
+ .ten
+ {
+ width: 10em;
+ margin-left: 1em;
+
+ border-width: 0 1em;
+ }
+
+ .ten div
+ {
+ width: 6em;
+ height: 1em;
+ margin-left: 1em;
+
+ border: solid black;
+ border-width: 0 1em;
+ background: transparent;
+ }
+
+ .eleven
+ {
+ width: 10em;
+ margin-left: 1em;
+
+ border-width: 0 1em;
+ }
+
+ .eleven div
+ {
+ width: 6em;
+ height: 1em;
+ margin-left: 2em;
+
+ background: black;
+ }
+
+ /* bottom of the face */
+ .twelve
+ {
+ width: 8em;
+ margin-left: 2em;
+
+ border-width: 0 1em;
+ }
+
+ .thirteen
+ {
+ width: 4em;
+ margin-left: 3em;
+
+ border-width: 0 2em;
+ }
+
+ .fourteen
+ {
+ width: 0;
+ margin-left: 5em;
+
+ border-width: 0 2em;
+ }
+ </style>
+ </head>
+ <body>
+ <h2 id="top">Hello World!</h2>
+ <div class="picture">
+ <div class="line one"></div>
+ <div class="line two"></div>
+ <div class="line three"></div>
+
+ <div class="eyes"><div class=lower></div><div class=upper></div><div class=img></div></div>
+
+ <div class="line nose"><div><div></div></div></div>
+
+ <div class="line ten"><div></div></div>
+ <div class="line eleven"><div></div></div>
+ <div class="line twelve"></div>
+ <div class="line thirteen"></div>
+ <div class="line fourteen"></div>
+ </div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/acid/acid2/reference.html b/testing/web-platform/tests/acid/acid2/reference.html
new file mode 100644
index 0000000000..66eed5ae35
--- /dev/null
+++ b/testing/web-platform/tests/acid/acid2/reference.html
@@ -0,0 +1,17 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
+<html>
+ <head>
+ <title>The Second Acid Test (Reference Rendering)</title>
+ <style type="text/css">
+ html { margin: 0; padding: 0; border: 0; overflow: hidden; background: white; }
+ body { margin: 0; padding: 0; border: 0; }
+ h2 { margin: 0; padding: 48px 0 36px 84px; border: 0; font: 24px/24px sans-serif; color: navy; }
+ p { margin: 0; padding: 0 0 0 72px; border: 0; }
+ img { vertical-align: top; margin: 0; padding: 0; border: 0; }
+ </style>
+ </head>
+ <body>
+ <h2>Hello&nbsp;World!</h2>
+ <p><a href="reference.png"><img src="reference.png" alt="Follow this link to view the reference image, which should be rendered below the text &quot;Hello World!&quot; on the test page in the same way that this paragraph is rendered below that text on this page."></a></p>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/acid/acid2/reference.png b/testing/web-platform/tests/acid/acid2/reference.png
new file mode 100644
index 0000000000..7aee7609d6
--- /dev/null
+++ b/testing/web-platform/tests/acid/acid2/reference.png
Binary files differ
diff --git a/testing/web-platform/tests/acid/acid2/reftest.html b/testing/web-platform/tests/acid/acid2/reftest.html
new file mode 100644
index 0000000000..80220cee76
--- /dev/null
+++ b/testing/web-platform/tests/acid/acid2/reftest.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<html class=reftest-wait>
+<title>Acid2 reftest</title>
+<link rel="match" href="px-reference.html">
+<script src="/common/reftest-wait.js"></script>
+<style>
+* {
+ margin: 0;
+ padding: 0;
+ border: 0;
+}
+iframe {
+ width: 400px;
+ height: 300px;
+}
+</style>
+<script>
+function frameLoaded(frame) {
+ let fwin = frame.contentWindow;
+ let fdoc = frame.contentDocument;
+ fdoc.querySelector("#top").scrollIntoView();
+ takeScreenshot();
+}
+</script>
+<iframe src="test.html" onload="frameLoaded(this)"></iframe>
diff --git a/testing/web-platform/tests/acid/acid2/test.html b/testing/web-platform/tests/acid/acid2/test.html
new file mode 100644
index 0000000000..0407bac5dc
--- /dev/null
+++ b/testing/web-platform/tests/acid/acid2/test.html
@@ -0,0 +1,150 @@
+<!--
+A guide to Acid2 was posted alongside it as part of its original announcement; this can be found at:
+https://www.webstandards.org/action/acid2/guide/
+-->
+
+<!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: 8px; 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 */ }
+
+ /* second line of face: attribute selectors, float positioning */
+ [class~=one].first.one { position: absolute; top: 0; margin: 36px 0 0 60px; padding: 0; border: black 2em; border-style: none solid; /* shrink wraps around float */ }
+ [class~=one][class~=first] [class=second\ two][class="second two"] { float: right; width: 48px; height: 12px; background: yellow; margin: 0; padding: 0; } /* only content of abs pos block */
+
+ /* third line of face: width and overflow */
+ .forehead { margin: 4em; width: 8em; border-left: solid black 1em; border-right: solid black 1em; background: red url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVR42mP4%2F58BAAT%2FAf9jgNErAAAAAElFTkSuQmCC); /* that's a 1x1 yellow pixel PNG */ }
+ .forehead * { width: 12em; line-height: 1em; }
+
+ /* class selectors headache */
+ .two.error.two { background: maroon; } /* shouldn't match */
+ .forehead.error.forehead { background: red; } /* shouldn't match */
+ [class=second two] { background: red; } /* this should be ignored (invalid selector -- grammar says it only accepts IDENTs or STRINGs) */
+
+ /* fourth and fifth lines of face, with eyes: paint order test (see appendix E) and fixed backgrounds */
+ /* the two images are identical: 2-by-2 squares with the top left
+ and bottom right pixels set to yellow and the other two set to
+ transparent. Since they are offset by one pixel from each other,
+ the second one paints exactly over the transparent parts of the
+ first one, thus creating a solid yellow block. */
+ .eyes { position: absolute; top: 5em; left: 3em; margin: 0; padding: 0; background: red; }
+ #eyes-a { height: 0; line-height: 2em; text-align: right; } /* contents should paint top-most because they're inline */
+ #eyes-a object { display: inline; vertical-align: bottom; }
+ #eyes-a object[type] { width: 7.5em; height: 2.5em; } /* should have no effect since that object should fallback to being inline (height/width don't apply to inlines) */
+ #eyes-a object object object { border-right: solid 1em black; padding: 0 12px 0 11px; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAABnRSTlMAAAAAAABupgeRAAAABmJLR0QA%2FwD%2FAP%2BgvaeTAAAAEUlEQVR42mP4%2F58BCv7%2FZwAAHfAD%2FabwPj4AAAAASUVORK5CYII%3D) fixed 1px 0; }
+ #eyes-b { float: left; width: 10em; height: 2em; background: fixed url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAABnRSTlMAAAAAAABupgeRAAAABmJLR0QA%2FwD%2FAP%2BgvaeTAAAAEUlEQVR42mP4%2F58BCv7%2FZwAAHfAD%2FabwPj4AAAAASUVORK5CYII%3D); border-left: solid 1em black; border-right: solid 1em red; } /* should paint in the middle layer because it is a float */
+ #eyes-c { display: block; background: red; border-left: 2em solid yellow; width: 10em; height: 2em; } /* should paint bottom most because it is a block */
+
+ /* lines six to nine, with nose: auto margins */
+ .nose { float: left; margin: -2em 2em -1em; border: solid 1em black; border-top: 0; min-height: 80%; height: 60%; max-height: 3em; /* percentages become auto (see 10.5 and 10.7) and intrinsic height is more than 3em, so 3em wins */ padding: 0; width: 12em; }
+ .nose > div { padding: 1em 1em 3em; height: 0; background: yellow; }
+ .nose div div { width: 2em; height: 2em; background: red; margin: auto; }
+ .nose :hover div { border-color: blue; }
+ .nose div:hover :before { border-bottom-color: inherit; }
+ .nose div:hover :after { border-top-color: inherit; }
+ .nose div div:before { display: block; border-style: none solid solid; border-color: red yellow black yellow; border-width: 1em; content: ''; height: 0; }
+ .nose div :after { display: block; border-style: solid solid none; border-color: black yellow red yellow; border-width: 1em; content: ''; height: 0; }
+
+ /* between lines nine and ten: margin collapsing with 'float' and 'clear' */
+ .empty { margin: 6.25em; height: 10%; /* computes to auto which makes it empty per 8.3.1:7 (own margins) */ }
+ .empty div { margin: 0 2em -6em 4em; }
+ .smile { margin: 5em 3em; clear: both; /* clearance is negative (see 8.3.1 and 9.5.1) */ }
+
+ /* line ten and eleven: containing block for abs pos */
+ .smile div { margin-top: 0.25em; background: black; width: 12em; height: 2em; position: relative; bottom: -1em; }
+ .smile div div { position: absolute; top: 0; right: 1em; width: auto; height: 0; margin: 0; border: yellow solid 1em; }
+
+ /* smile (over lines ten and eleven): backgrounds behind borders, inheritance of 'float', nested floats, negative heights */
+ .smile div div span { display: inline; margin: -1em 0 0 0; border: solid 1em transparent; border-style: none solid; float: right; background: black; height: 1em; }
+ .smile div div span em { float: inherit; border-top: solid yellow 1em; border-bottom: solid black 1em; } /* zero-height block; width comes from (zero-height) child. */
+ .smile div div span em strong { width: 6em; display: block; margin-bottom: -1em; /* should have no effect, since parent has top&bottom borders, so this margin doesn't collapse */ }
+
+ /* line twelve: line-height */
+ .chin { margin: -4em 4em 0; width: 8em; line-height: 1em; border-left: solid 1em black; border-right: solid 1em black; background: yellow url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAIAAAFSDNYfAAAAaklEQVR42u3XQQrAIAwAQeP%2F%2F6wf8CJBJTK9lnQ7FpHGaOurt1I34nfH9pMMZAZ8BwMGEvvh%2BBsJCAgICLwIOA8EBAQEBAQEBAQEBK79H5RfIQAAAAAAAAAAAAAAAAAAAAAAAAAAAID%2FABMSqAfj%2FsLmvAAAAABJRU5ErkJggg%3D%3D) /* 64x64 red square */ no-repeat fixed /* shouldn't be visible unless the smiley is moved to the top left of the viewport */; }
+ .chin div { display: inline; font: 2px/4px serif; }
+
+ /* line thirteen: cascade and selector tests */
+ .parser-container div { color: maroon; border: solid; color: orange; } /* setup */
+ div.parser-container * { border-color: black; /* overrides (implied) border-color on previous line */ } /* setup */
+ * div.parser { border-width: 0 2em; /* overrides (implied) declarations on earlier line */ } /* setup */
+
+ /* line thirteen continued: parser tests */
+ .parser { /* comment parsing test -- comment ends before the end of this line, the backslash should have no effect: \*/ }
+ .parser { margin: 0 5em 1em; padding: 0 1em; width: 2em; height: 1em; error: \}; background: yellow; } /* setup with parsing test */
+ * html .parser { background: gray; }
+ \.parser { padding: 2em; }
+ .parser { m\argin: 2em; };
+ .parser { height: 3em; }
+ .parser { width: 200; }
+ .parser { border: 5em solid red ! error; }
+ .parser { background: red pink; }
+
+ /* line fourteen (last line of face): table */
+ ul { display: table; padding: 0; margin: -1em 7em 0; background: red; }
+ ul li { padding: 0; margin: 0; }
+ ul li.first-part { display: table-cell; height: 1em; width: 1em; background: black; }
+ ul li.second-part { display: table; height: 1em; width: 1em; background: black; } /* anonymous table cell wraps around this */
+ ul li.third-part { display: table-cell; height: 0.5em; /* gets stretched to fit row */ width: 1em; background: black; }
+ ul li.fourth-part { list-style: none; height: 1em; width: 1em; background: black; } /* anonymous table cell wraps around this */
+
+ /* bits that shouldn't appear: inline alignment in cells */
+ .image-height-test { height: 10px; overflow: hidden; font: 20em serif; } /* only the area between the top of the line box and the top of the image should be visible */
+ table { margin: 0; border-spacing: 0; }
+ td { padding: 0; }
+
+ </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 -->
+ <blockquote class="first one"><address class="second two"></address></blockquote>
+ <div class="forehead"><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div></div>
+ <div class="eyes"><div id="eyes-a"><object data="data:application/x-unknown,ERROR"><object data="404.html?pipe=status(404)" type="text/html"><object data="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAAAYCAYAAAFy7sgCAAAGsUlEQVRo3u2ZbWwcZxHHf3s%2B7LNbO3ZjXBtowprGODRX0qpNQCjmJKuVKhMl1P2AkCwhFOIKkCBSm9IXavGFKAixIAECwkmWo5MrhRI3Ub40IEwQgp6aIDg3Cd6eEqyIHEteah%2B1E69vhw%2BZtTaX8704ZzkKjHS6271nZ56ZZ%2BY%2F%2F%2BdZKF%2FCwYshx3EkkggLsD1v4FQkEZZYLCbAKyG9%2Ba9EIsG6hnUAf8x74K3aUC3j4%2BM54HcsR2oAIomwZOezkv%2FnSHpYNh%2BNCmAE7xv94zvFdd1bHsjMZmQkPSxAJP%2B%2FfuBLwK54PC7JZFKAVJmzXLBt2w%2FMvcDLwIb8QS8CeJ4nkURYIomw7J%2FYJ8BvSiiXptGGxWds2%2Fa9%2Bnaxh%2BYAD%2Bgt04NDgABTpQY2cvvSFLzw86gWeBVwC8SzlOSv2YeBPfmDBoBHgKmR9LBEEmHZfDTqGykqfkUE0nA78BzQGfSgUeP3wNeTXwXg7MwZDhw4UHL6ra2ti79%2FOvljgG8AZ4H64Lhm4MvAocxsRppGG%2FxcXihlwLIs6R%2FfKV2HO%2F26uA94pdDYUKUZUU7W1RQYXA98Gnhaf5%2FXWX0HeAHYoQonqa4sZSOsSWMCWeC9Yko%2BCQwBe4E6oNc0Tc91XTl1%2BaTsn9gnI%2Blhyc5nZWxsrBIkKSbl2tiic3tW53YDEwOKaoFBrcOfqKee53lG9xsPMjV784r%2F4lO%2FpPvyJ9iyZcuvFSaXK5XYeAZ4CDgGvB3MS4B54LQuWYPeuy4iRFsevsXqpuYoqVQKIH2bK1CuDQNo11o4XUzh%2FcDWYIe1LEtyuZx4niee54njOGKapgfsqlL%2Bl2OjEXg8nxrc1dJ0h3hbtL%2BGCtz7KPBF4CuBe9uB15VafE8hr9qylI3HgG8C2%2FK7VyHZoJj7MrBRm30qFotJMpkU27YlHo%2F7Ha5a%2BV%2FKRkSJ4KuKRLVLKapTjB1SzAVIjY2NSXY%2BKyPpYdk%2FsU9OXT4pruv6BdZbBQfKsVGnvWlIe1VB6VQO8JxC1vZYLCbZ%2BaxsPhpdZDyRRFhG0sPiOE6ldKBg2lRg4xF1YCDIIIKN7DGgD3gH%2BBXwejKZfPrs2tPs%2FvPN2bKuYR1nd7xLKBSSJeqoXKnERjPwNWAG%2BLn2rZuM%2B4Tpml6vaWlp4eLcxVusZq5lCgVgOVKJjRqdX86ffL4D5wIoZACnTpw4wRMdT96i%2FImOJxERAs4uVyqxUacF%2FPdiCj%2BjdRBRGFtwXVdG0sPSdbhTmkYbpH98p2RmM2JZlig1vl0GWo4NQ%2Fn%2Bs5pKRXfwjweaxy7TND3HcRZbfC6X8xVPVQlGy7WxVWlO5XRXFXm6EZmrQuSXYyPE3SiVoEhE6Wyr0u2rumO6zv%2B21AFdQAswC1wCMuUCXCmyWQus103Qg8qlDO0lxwOb%2Fl4FiK3AB3VS%2FuKKLtK%2FgbeAnwG%2FvUODuRw%2FFrR0H1UC75fwu8oJ%2FhFsW5VIG%2FBUgEIN6Y65O4AHu4Ap0zQ9y7LEcZyb9lRBUHQcRyzL8unZVBW5bFWAvAp%2BhDQ2g4F47dUYtlU6obXA54DnVdFLekjUGGifh4AFy7LEdV3xj3X9I66m0QZpGm2QrsOd0j%2B%2BU0bSw5KZzYjrun6HWlAd961i4FfCj0aN1Usau%2Bc1lmuXPFwvAEumUut7tQQvAb%2FXb%2FT0bCAej9cODg7yt%2Bm%2F8q2%2F7OUHZ76PnZ1k2p0mJzlykmPancbOTnL0whHs7CQfb%2B5mx2d3sH79%2BtCRI0c6FeaOr9ICrIQfLvA%2B8BGNXxi4R6HrisJVUWrxAVW2oMFf0Aczim8o3kV6enowDIPjF9%2Fk%2BMU3S3rrjzMMg56eHr%2BxP7qKFbASfojG6kpeDGs1tiW53RxwWT%2Bin5q8w4xpQK5evQpAR30H7ZH2khNvj7TTUd8BgD4rqmu1ZKX8qNeY%2BfHz4zlXDgT5E8tpCTUq7XSBC4Euv8227TV9fX1E73%2BYtvo27BmbS9cvFVTY3bSRFza9yOcf6Gfmygy7d%2B%2Fm%2FPnzF4DvrsBLhnJlJfwIKXxv1PheAE4qK6p4H9AGbNKTuhngBPBPXYRe4IemaT5kWZbR19fHNbmGnZ1k4r3U4glDR30Hm5qjbGjsImJEOHbsGHv27JFz5869o0eFq01Jq%2BmHAXwI6FFKagMTgHM7GzFDS%2BoeLSMv7zjzC9x4Y7gxFovVDAwMEI1GaWlpWSzRVCrFwYMH%2FXfxZ4AfAa8B%2F7lDaGg1%2FQgp43lfK0yqtRMuJa3ceKe5DfgYsCYAZ2ngD8CfAkzqTpW7xY%2F%2FSznyX%2FVeUb2kVmX4AAAAAElFTkSuQmCC">ERROR</object></object></object></div><div id="eyes-b"></div><div id="eyes-c"></div></div> <!-- that's a PNG with 8bit alpha containing two eyes -->
+ <div class="nose"><div><div></div></div></div>
+ <div class="empty"><div></div></div>
+ <div class="smile"><div><div><span><em><strong></strong></em></span></div></div></div>
+ <div class="chin"><div>&nbsp;</div></div>
+ <div class="parser-container"><div class="parser"><!-- ->ERROR<!- --></div></div> <!-- two dashes is what delimits a comment, so the text "->ERROR<!-" earlier on this line is actually part of a comment -->
+ <ul>
+ <li class="first-part"></li>
+ <li class="second-part"></li>
+ <li class="third-part"></li>
+ <li class="fourth-part"></li>
+ </ul>
+ <div class="image-height-test"><table><tr><td><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAIAAAFSDNYfAAAAaklEQVR42u3XQQrAIAwAQeP%2F%2F6wf8CJBJTK9lnQ7FpHGaOurt1I34nfH9pMMZAZ8BwMGEvvh%2BBsJCAgICLwIOA8EBAQEBAQEBAQEBK79H5RfIQAAAAAAAAAAAAAAAAAAAAAAAAAAAID%2FABMSqAfj%2FsLmvAAAAABJRU5ErkJggg%3D%3D" alt=""></td></tr></table></div>
+ </div>
+ </body>
+</html>