diff options
Diffstat (limited to 'testing/web-platform/tests/acid')
31 files changed, 592 insertions, 0 deletions
diff --git a/testing/web-platform/tests/acid/META.yml b/testing/web-platform/tests/acid/META.yml new file mode 100644 index 0000000000..dbb02a654f --- /dev/null +++ b/testing/web-platform/tests/acid/META.yml @@ -0,0 +1,2 @@ +suggested_reviewers: + - Ms2ger diff --git a/testing/web-platform/tests/acid/README.md b/testing/web-platform/tests/acid/README.md new file mode 100644 index 0000000000..490f272df9 --- /dev/null +++ b/testing/web-platform/tests/acid/README.md @@ -0,0 +1,17 @@ +## The Acid Tests + +This directory contains copies of Acid2 and Acid3, based on the +copies hosted at [acidtests.org](http://www.acidtests.org) after they +had ceased being maintained (per the note on that page). + +Note these are not maintained here for the sake of providing any +useful guide of interoperability or standards compliance, but rather +for browser vendors' convenience. It would be inappropriate, +therefore, to use them as part of a certification process. + +Acid1 can be found at `css/CSS2/css1/c5526c-display-000.xht`, as it +always formed part of the CSS1 testsuite. + +The tests themselves (i.e., those at `/` of their respective +subdomains at `acidtests.org`) are in files named test.html in their +respective directories. 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 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 "Hello World!" 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 Binary files differnew file mode 100644 index 0000000000..7aee7609d6 --- /dev/null +++ b/testing/web-platform/tests/acid/acid2/reference.png 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> </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> </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> diff --git a/testing/web-platform/tests/acid/acid3/empty.css b/testing/web-platform/tests/acid/acid3/empty.css new file mode 100644 index 0000000000..d490c12421 --- /dev/null +++ b/testing/web-platform/tests/acid/acid3/empty.css @@ -0,0 +1,8 @@ +<!DOCTYPE HTML><html><head><title>FAIL</title><style> +<!-- this file is sent as text/html, not text/css, which is why it is + called "empty.css" despite the following lines --> + + body { background: white; color: black; } + h1 { color: red; } + +</style><body><h1>FAIL</h1></body></html> diff --git a/testing/web-platform/tests/acid/acid3/empty.css.headers b/testing/web-platform/tests/acid/acid3/empty.css.headers new file mode 100644 index 0000000000..156209f9c8 --- /dev/null +++ b/testing/web-platform/tests/acid/acid3/empty.css.headers @@ -0,0 +1 @@ +Content-Type: text/html diff --git a/testing/web-platform/tests/acid/acid3/empty.html b/testing/web-platform/tests/acid/acid3/empty.html new file mode 100644 index 0000000000..0b91841acf --- /dev/null +++ b/testing/web-platform/tests/acid/acid3/empty.html @@ -0,0 +1 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"><html><head><title></title></head><body></body></html> diff --git a/testing/web-platform/tests/acid/acid3/empty.png b/testing/web-platform/tests/acid/acid3/empty.png Binary files differnew file mode 100644 index 0000000000..fd5b91ea07 --- /dev/null +++ b/testing/web-platform/tests/acid/acid3/empty.png diff --git a/testing/web-platform/tests/acid/acid3/empty.txt b/testing/web-platform/tests/acid/acid3/empty.txt new file mode 100644 index 0000000000..452a7e6d75 --- /dev/null +++ b/testing/web-platform/tests/acid/acid3/empty.txt @@ -0,0 +1 @@ +<!DOCTYPE html><html><head><title>FAIL</title></head><body><p>FAIL</p><script>parent.notify("empty.txt")</script></body></html> diff --git a/testing/web-platform/tests/acid/acid3/empty.xml b/testing/web-platform/tests/acid/acid3/empty.xml new file mode 100644 index 0000000000..e6a125cc0d --- /dev/null +++ b/testing/web-platform/tests/acid/acid3/empty.xml @@ -0,0 +1,4 @@ +<root> + <fail> This is an invalid byte in UTF-8: ¿ </fail> + <test/> <!-- shouldn't ever be parsed, as the parser should abort at the first sign of non-well-formedness --> +</root>
\ No newline at end of file diff --git a/testing/web-platform/tests/acid/acid3/empty.xml.headers b/testing/web-platform/tests/acid/acid3/empty.xml.headers new file mode 100644 index 0000000000..9395ed9a28 --- /dev/null +++ b/testing/web-platform/tests/acid/acid3/empty.xml.headers @@ -0,0 +1 @@ +Content-Type: application/xml;charset=utf-8 diff --git a/testing/web-platform/tests/acid/acid3/favicon.ico b/testing/web-platform/tests/acid/acid3/favicon.ico new file mode 100644 index 0000000000..e69de29bb2 --- /dev/null +++ b/testing/web-platform/tests/acid/acid3/favicon.ico diff --git a/testing/web-platform/tests/acid/acid3/favicon.ico.headers b/testing/web-platform/tests/acid/acid3/favicon.ico.headers new file mode 100644 index 0000000000..afa04c171d --- /dev/null +++ b/testing/web-platform/tests/acid/acid3/favicon.ico.headers @@ -0,0 +1 @@ +Content-Type: image/x-icon diff --git a/testing/web-platform/tests/acid/acid3/numbered-tests.html b/testing/web-platform/tests/acid/acid3/numbered-tests.html new file mode 100644 index 0000000000..42d3324c69 --- /dev/null +++ b/testing/web-platform/tests/acid/acid3/numbered-tests.html @@ -0,0 +1,28 @@ +<!doctype html> +<title>Acid3 numbered tests</title> +<meta name="timeout" content="long"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script> +var tests = undefined; + +function gotMessage(e) { + var m = e.data; + if (tests === undefined && "num_tests" in m) { + tests = []; + for (var i = 0; i < m.num_tests; i++) { + tests.push(async_test("Test " + i)); + } + } else if ("result" in m) { + var test = m.test; + var passed = m.result === "pass"; + var message = m.message; + tests[test].step(function() { + assert_true(passed, message); + }); + tests[test].done(); + } +} +window.addEventListener("message", gotMessage, false); +</script> +<iframe src="test.html"></iframe> diff --git a/testing/web-platform/tests/acid/acid3/reference.png b/testing/web-platform/tests/acid/acid3/reference.png Binary files differnew file mode 100644 index 0000000000..22cd4cae08 --- /dev/null +++ b/testing/web-platform/tests/acid/acid3/reference.png diff --git a/testing/web-platform/tests/acid/acid3/reference.sub.html b/testing/web-platform/tests/acid/acid3/reference.sub.html new file mode 100644 index 0000000000..974bee11e4 --- /dev/null +++ b/testing/web-platform/tests/acid/acid3/reference.sub.html @@ -0,0 +1,21 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> +<html> + <title>The Acid3 Test (Reference Rendering)</title> + <link rel="icon" href="http://nonexistent.{{host}}"> + <style type="text/css"> + html { margin: 0; padding: 0; } + body { background: #c0c0c0 url(reference.png) top left no-repeat; margin: 0; padding: 0; } + #a { font: bold 100px/120px Arial, sans-serif; position: absolute; top: 57px; left: 57px; color: #000000; z-index: 1; } + #a0 { font: bold 100px/120px Arial, sans-serif; position: absolute; top: 60px; left: 60px; color: #C0C0C0; z-index: 0; } + #b { position: absolute; top: 230px; left: 625px; width: 0; white-space: pre; } + #b div { font: bold 100px/120px Arial, sans-serif; position: absolute; right: 0; text-align: right; color: #000000; } + #c { font: 16px/19.2px Arial, sans-serif; color: #808080; width: 562px; position: absolute; top: 350px; left: 57px; } + #c a { color: #0000FF; } + </style> + <body> + <div id="a">Acid3</div> + <div id="a0">Acid3</div> + <div id="b"><div>100/100</div></div> + <div id="c">To pass the test,<span></span> a browser must use its default settings, the animation has to be smooth, the score has to end on 100/100, and the final page has to look exactly, pixel for pixel, like <a href="reference.sub.html">this reference rendering</a>.</div> + </body> +</html> diff --git a/testing/web-platform/tests/acid/acid3/support-a.png b/testing/web-platform/tests/acid/acid3/support-a.png Binary files differnew file mode 100644 index 0000000000..9f240083de --- /dev/null +++ b/testing/web-platform/tests/acid/acid3/support-a.png diff --git a/testing/web-platform/tests/acid/acid3/support-b.png b/testing/web-platform/tests/acid/acid3/support-b.png new file mode 100644 index 0000000000..752ee7ec05 --- /dev/null +++ b/testing/web-platform/tests/acid/acid3/support-b.png @@ -0,0 +1 @@ +<!DOCTYPE html><html><head><title>FAIL</title><style> * { background: transparent; } </style></head><body><p><!-- this file is transparent --></p></body></html>
\ No newline at end of file diff --git a/testing/web-platform/tests/acid/acid3/support-b.png.headers b/testing/web-platform/tests/acid/acid3/support-b.png.headers new file mode 100644 index 0000000000..844a971169 --- /dev/null +++ b/testing/web-platform/tests/acid/acid3/support-b.png.headers @@ -0,0 +1,2 @@ +Content-Type: text/html + diff --git a/testing/web-platform/tests/acid/acid3/svg.xml b/testing/web-platform/tests/acid/acid3/svg.xml new file mode 100644 index 0000000000..f5b1ffad14 --- /dev/null +++ b/testing/web-platform/tests/acid/acid3/svg.xml @@ -0,0 +1 @@ +<?xml-stylesheet href="data:text/css,text%7Bfont-family%3AACID3svgfont%7D"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100"><defs><font-face font-family="ACID3svgfont"><font-face-src><font-face-uri xlink:href="font.svg#mini"/></font-face-src></font-face><path id="path" d="M0 0l0 42l16 16l4711 0"/></defs><text>X</text></svg> diff --git a/testing/web-platform/tests/acid/acid3/svg.xml.headers b/testing/web-platform/tests/acid/acid3/svg.xml.headers new file mode 100644 index 0000000000..070de35fbe --- /dev/null +++ b/testing/web-platform/tests/acid/acid3/svg.xml.headers @@ -0,0 +1 @@ +Content-Type: image/svg+xml diff --git a/testing/web-platform/tests/acid/acid3/xhtml.1 b/testing/web-platform/tests/acid/acid3/xhtml.1 new file mode 100644 index 0000000000..8daafce8cd --- /dev/null +++ b/testing/web-platform/tests/acid/acid3/xhtml.1 @@ -0,0 +1,11 @@ +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>Test</title> + </head> + <body> + <p> <strong> XHTML Test </strong> </p> + <script type="text/javascript"> + parent.notify("xhtml.1") + </script> + </body> +</html> diff --git a/testing/web-platform/tests/acid/acid3/xhtml.1.headers b/testing/web-platform/tests/acid/acid3/xhtml.1.headers new file mode 100644 index 0000000000..f203c6368e --- /dev/null +++ b/testing/web-platform/tests/acid/acid3/xhtml.1.headers @@ -0,0 +1 @@ +Content-Type: text/xml diff --git a/testing/web-platform/tests/acid/acid3/xhtml.2 b/testing/web-platform/tests/acid/acid3/xhtml.2 new file mode 100644 index 0000000000..c7af4f1c27 --- /dev/null +++ b/testing/web-platform/tests/acid/acid3/xhtml.2 @@ -0,0 +1,11 @@ +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>Test</title> + </head> + <body> + <p> <strong/> Parsing Test </strong> </p> + <script type="text/javascript"> + parent.notify("xhtml.2") + </script> + </body> +</html> diff --git a/testing/web-platform/tests/acid/acid3/xhtml.2.headers b/testing/web-platform/tests/acid/acid3/xhtml.2.headers new file mode 100644 index 0000000000..f203c6368e --- /dev/null +++ b/testing/web-platform/tests/acid/acid3/xhtml.2.headers @@ -0,0 +1 @@ +Content-Type: text/xml diff --git a/testing/web-platform/tests/acid/acid3/xhtml.3 b/testing/web-platform/tests/acid/acid3/xhtml.3 new file mode 100644 index 0000000000..8cd8db7360 --- /dev/null +++ b/testing/web-platform/tests/acid/acid3/xhtml.3 @@ -0,0 +1,11 @@ +<html xmlns="http://www.w3.org/1999/xhtml#"> + <head> + <title>Test</title> + </head> + <body> + <p> <strong> Namespace Test </strong> </p> + <script type="text/javascript"> + parent.notify("xhtml.3") + </script> + </body> +</html> diff --git a/testing/web-platform/tests/acid/acid3/xhtml.3.headers b/testing/web-platform/tests/acid/acid3/xhtml.3.headers new file mode 100644 index 0000000000..f203c6368e --- /dev/null +++ b/testing/web-platform/tests/acid/acid3/xhtml.3.headers @@ -0,0 +1 @@ +Content-Type: text/xml |
