Cargoify servo

This commit is contained in:
Jack Moffitt 2014-08-28 09:34:23 -06:00
parent db2f642c32
commit c6ab60dbfc
1761 changed files with 8423 additions and 2294 deletions

BIN
tests/ref/400x400_green.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1 KiB

View file

@ -0,0 +1,5 @@
<html>
<body>
<div style="width: 500px; height: 300px; background-color: #0f0;"></div>
</body>
</html>

BIN
tests/ref/acid1.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.6 KiB

174
tests/ref/acid1_a.html Normal file
View file

@ -0,0 +1,174 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html><head>
<meta http-equiv="content-type" content="text/html; charset=windows-1252">
<title>
display/box/float/clear test
</title>
<style type="text/css">
/* last modified: 1 Dec 98 */
html {
font: 10px/1 Verdana, sans-serif;
background-color: blue;
color: white;
}
body {
margin: 1.5em;
border: .5em solid black;
padding: 0;
width: 48em;
background-color: white;
}
dl {
/* overflow: hidden; disable margin collapse, but incorrectly doesn't work in servo --pcwalton */
margin: 0;
border: 0;
padding: .5em;
}
dt {
background-color: rgb(204,0,0);
margin: 0;
padding: 1em;
width: 10.638%; /* refers to parent element's width of 47em. = 5em or 50px */
height: 28em;
border: .5em solid black;
float: left;
}
dd {
float: right;
margin: 0 0 0 1em;
border: 1em solid black;
padding: 1em;
width: 34em;
height: 27em;
}
ul {
margin: 0;
border: 0;
padding: 0;
}
li {
display: block; /* i.e., suppress marker */
color: black;
height: 9em;
width: 5em;
margin: 0;
border: .5em solid black;
padding: 1em;
float: left;
background-color: #FC0;
}
#bar {
background-color: black;
color: white;
width: 41.17%; /* = 14em */
border: 0;
margin: 0 1em;
}
#baz {
margin: 1em 0;
border: 0;
padding: 1em;
width: 10em;
height: 10em;
background-color: black;
color: white;
}
form {
margin: 0;
display: inline;
}
p {
margin: 0;
}
form p {
line-height: 1.9;
}
blockquote {
margin: 1em 1em 1em 2em;
border-width: 1em 1.5em 2em .5em;
border-style: solid;
border-color: black;
padding: 1em 0;
width: 5em;
height: 9em;
float: left;
background-color: #FC0;
color: black;
}
address {
font-style: normal;
}
h1 {
background-color: black;
color: white;
float: left;
margin: 1em 0;
border: 0;
padding: 1em;
width: 10em;
height: 10em;
font-weight: normal;
font-size: 1em;
}
</style>
</head>
<body>
<dl>
<dt>
</dt>
<dd>
<ul>
<li>
</li>
<li id="bar">
<p>
</p>
<form action="./" method="get">
<p>
</p>
<p>
</p>
</form>
</li>
<li>
</li>
<li id="baz">
</li>
</ul>
<blockquote>
<address>
</address>
</blockquote>
<h1>
</h1>
</dd>
</dl>
<p style="color: black; font-size: 1em; line-height: 1.3em; clear: both">
</p>
</body></html>

20
tests/ref/acid1_b.html Normal file
View file

@ -0,0 +1,20 @@
<!DOCTYPE html>
<html>
<head>
<style>
html {
margin: 0;
padding: 0;
background-color: blue;
border: none;
}
body {
margin: 0;
padding: 0;
border: none;
}
</style>
</head>
<body><img src="acid1.png"></body>
</html>

152
tests/ref/acid2_noscroll.html Executable file
View file

@ -0,0 +1,152 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>The Second Acid Test</title>
<style>
/* This disables the "scroll" part of the test,
which causes layering bugs */
.intro { display: none }
html #top { margin-top: 0 }
</style>
<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="http://www.damowmow.com/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>

17
tests/ref/acid2_ref.html Normal file
View file

@ -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="acid2_ref.png"><img src="acid2_ref.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>

BIN
tests/ref/acid2_ref.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

View file

@ -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="acid2_ref.png"><img src="acid2_ref_broken.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>

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

View file

@ -0,0 +1,13 @@
<!DOCTYPE html>
<html>
<head>
<title>hi</title>
</head>
<body>
<div style="border: solid">
<p>Foo</p>
Bar
<p>Baz</p>
</div>
</body>
</html>

View file

@ -0,0 +1,13 @@
<!DOCTYPE html>
<html>
<head>
<title>hi</title>
</head>
<body>
<div style="border: solid">
<p>Foo</p>
<div>Bar</div>
<p>Baz</p>
</div>
</body>
</html>

View file

@ -0,0 +1 @@
<div style="background-color: blue">this is the story of a girl</div>

View file

@ -0,0 +1,6 @@
<div id="hello">this is the story of a girl</div>
<script>
var style = document.createElement('style');
style.textContent = "#hello { background-color: blue; }"
document.head.appendChild(style);
</script>

View file

@ -0,0 +1,13 @@
<!DOCTYPE html>
<html>
<head>
<title>Attribute exists selector: [foo]</title>
<style>
p[data-green] { color: green }
</style>
</head>
<body>
<p data-green="">This text should be green.</p>
<p>This text should be black.</p>
</body>
</html>

View file

@ -0,0 +1,10 @@
<!DOCTYPE html>
<html>
<head>
<title>Attribute exists selector: [foo] (reference)</title>
</head>
<body>
<p style="color: green">This text should be green.</p>
<p>This text should be black.</p>
</body>
</html>

View file

@ -0,0 +1,10 @@
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="subdirectory/background_image.css">
</head>
<body>
<div class="test" style="width:206px; height:206px;"></div>
</body>
</html>

View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html>
<head>
<title>background: none test</title>
<style>
#a {
background: red;
width: 32px;
height: 32px;
}
#a {
background: none;
}
</style>
</head>
<body>
<div id=a></div>
</body>
</html>

View file

@ -0,0 +1,16 @@
<!DOCTYPE html>
<html>
<head>
<title>background: none test</title>
<style>
#a {
width: 32px;
height: 32px;
}
</style>
</head>
<body>
<div id=a></div>
</body>
</html>

View file

@ -0,0 +1,20 @@
<!DOCTYPE html>
<html>
<head>
<title>You see here a scroll labeled FOOBIE BLETCH.</title>
<style>
#foo {
background: url(400x400_green.png);
background-position: 128px 0px;
background-repeat: no-repeat;
width: 528px;
height: 400px;
margin-left: 0;
}
</style>
</head>
<body>
<div id=foo></div>
</body>
</html>

View file

@ -0,0 +1,19 @@
<!DOCTYPE html>
<html>
<head>
<title>You see here a scroll labeled FOOBIE BLETCH.</title>
<style>
#foo {
background: url(400x400_green.png);
width: 400px;
height: 400px;
margin-left: 128px;
}
</style>
</head>
<body>
<div id=foo></div>
</body>
</html>

View file

@ -0,0 +1,9 @@
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<img class="test" src="rust-0.png" style="width:206px; height:206px;" />
</body>
</html>

View file

@ -0,0 +1,19 @@
<!DOCTYPE html>
<html>
<head>
<title>You see here a scroll labeled XIXAXA XOXAXA XUXAXA.</title>
<style>
div {
width: 412px;
height: 412px;
background: url(rust-0.png);
background-repeat: repeat;
}
</style>
</head>
<body>
<div id=repeat></div>
</body>
</html>

View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html>
<head>
<title>You see here a scroll labeled XIXAXA XOXAXA XUXAXA.</title>
<style>
.repeaty {
width: 412px;
height: 206px;
background: url(rust-0.png);
}
.repeatx {
width: 206px;
height: 206px;
background: url(rust-0.png);
float: left;
}
</style>
</head>
<body>
<div>
<div class=repeaty><div class=repeatx></div><div class=repeatx></div></div>
<div class=repeaty><div class=repeatx></div><div class=repeatx></div></div>
</div>
</body>
</html>

View file

@ -0,0 +1,19 @@
<!DOCTYPE html>
<html>
<head>
<title>You see here a scroll labeled XIXAXA XOXAXA XUXAXA.</title>
<style>
div {
width: 400px;
height: 400px;
background: url(rust-0.png);
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div id=repeat></div>
</body>
</html>

View file

@ -0,0 +1,18 @@
<!DOCTYPE html>
<html>
<head>
<title>You see here a scroll labeled XIXAXA XOXAXA XUXAXA.</title>
<style>
div {
width: 200px;
height: 200px;
background: url(rust-0.png);
}
</style>
</head>
<body>
<div id=repeat></div>
</body>
</html>

View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<title>You see here a scroll labeled XIXAXA XOXAXA XUXAXA.</title>
<style>
div {
width: 412px;
height: 412px;
background: url(rust-0.png);
background-repeat: repeat-x;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<html>
<head>
<title>You see here a scroll labeled XIXAXA XOXAXA XUXAXA.</title>
<style>
div {
width: 206px;
height: 206px;
background: url(rust-0.png);
position: absolute;
top: 0;
}
.repeata {
left: 0;
}
.repeatb {
left: 206px;
}
</style>
</head>
<body>
<div class=repeata></div><div class=repeatb></div>
</body>
</html>

View file

@ -0,0 +1,19 @@
<!DOCTYPE html>
<html>
<head>
<title>You see here a scroll labeled XIXAXA XOXAXA XUXAXA.</title>
<style>
div {
width: 412px;
height: 412px;
background: url(rust-0.png);
background-repeat: repeat-y;
}
</style>
</head>
<body>
<div id=repeat></div>
</body>
</html>

View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html>
<head>
<title>You see here a scroll labeled XIXAXA XOXAXA XUXAXA.</title>
<style>
.repeaty {
width: 206px;
height: 206px;
background: url(rust-0.png);
}
</style>
</head>
<body>
<div>
<div class=repeaty></div>
<div class=repeaty></div>
</div>
</body>
</html>

View file

@ -0,0 +1,9 @@
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="test" style="background: url(rust-0.png); width:206px; height:206px;"></div>
</body>
</html>

112
tests/ref/basic.list Normal file
View file

@ -0,0 +1,112 @@
== basic_width_px.html basic_width_em.html
== br.html br-ref.html
== hello_a.html hello_b.html
== margin_a.html margin_b.html
== root_pseudo_a.html root_pseudo_b.html
== first_child_pseudo_a.html first_child_pseudo_b.html
== last_child_pseudo_a.html last_child_pseudo_b.html
== only_child_pseudo_a.html only_child_pseudo_b.html
== nth_child_pseudo_a.html nth_child_pseudo_b.html
== nth_last_child_pseudo_a.html nth_last_child_pseudo_b.html
== nth_of_type_pseudo_a.html nth_of_type_pseudo_b.html
== nth_last_of_type_pseudo_a.html nth_last_of_type_pseudo_b.html
== first_of_type_pseudo_a.html first_of_type_pseudo_b.html
== last_of_type_pseudo_a.html last_of_type_pseudo_b.html
== only_of_type_pseudo_a.html only_of_type_pseudo_b.html
# visibility_hidden.html visibility_hidden_ref.html
== root_height_a.html root_height_b.html
== png_rgba_colorspace_a.html png_rgba_colorspace_b.html
== border_style_none_a.html border_style_none_b.html
== borders_a.html borders_b.html
== acid1_a.html acid1_b.html
== text_decoration_cached.html text_decoration_cached_ref.html
# text_decoration_propagation_a.html text_decoration_propagation_b.html
# inline_text_align_a.html inline_text_align_b.html
== font_size_em.html font_size_em_ref.html
== font_size_percentage.html font_size_em_ref.html
== img_size_a.html img_size_b.html
== img_dynamic_remove.html img_dynamic_remove_ref.html
== upper_id_attr.html upper_id_attr_ref.html
# inline_border_a.html inline_border_b.html
== anon_block_inherit_a.html anon_block_inherit_b.html
== attr_exists_selector.html attr_exists_selector_ref.html
!= noteq_attr_exists_selector.html attr_exists_selector_ref.html
== data_img_a.html data_img_b.html
== background_style_attr.html background_ref.html
== background_external_stylesheet.html background_ref.html
== block_image.html 500x300_green.html
!= block_image.html noteq_500x300_white.html
# == simple_iframe.html simple_iframe_ref.html -- disabled due to iframe crashiness
== object_element_a.html object_element_b.html
== append_style_a.html append_style_b.html
== height_compute_reset.html height_compute.html
== width_nonreplaced_block_simple_a.html width_nonreplaced_block_simple_b.html
== max_width_float_simple_a.html max_width_float_simple_b.html
== max_width_simple_a.html max_width_simple_b.html
== min_width_float_simple_a.html min_width_float_simple_b.html
== min_width_simple_a.html min_width_simple_b.html
# Positioning tests
== position_abs_cb_with_non_cb_kid_a.html position_abs_cb_with_non_cb_kid_b.html
== position_abs_height_width_a.html position_abs_height_width_b.html
== position_abs_left_a.html position_abs_left_b.html
== position_abs_margin_top_percentage_a.html position_abs_margin_top_percentage_b.html
== position_abs_nested_a.html position_abs_nested_b.html
== position_abs_replaced_simple_a.html position_abs_replaced_simple_b.html
== position_abs_static_y_a.html position_abs_static_y_b.html
== position_abs_width_percentage_a.html position_abs_width_percentage_b.html
== position_abs_pseudo_a.html position_abs_pseudo_b.html
# commented out because multiple layers don't work with reftests --pcwalton
# == position_fixed_a.html position_fixed_b.html
# == position_fixed_simple_a.html position_fixed_simple_b.html
# == position_fixed_static_y_a.html position_fixed_static_y_b.html
== position_relative_a.html position_relative_b.html
== position_relative_top_percentage_a.html position_relative_top_percentage_b.html
== background_none_a.html background_none_b.html
== negative_margins_a.html negative_margins_b.html
== negative_margin_uncle_a.html negative_margin_uncle_b.html
== inline_padding_a.html inline_padding_b.html
== min_max_height_a.html min_max_height_b.html
== minimum_line_height_a.html minimum_line_height_b.html
== background_position_a.html background_position_b.html
== background_repeat_x_a.html background_repeat_x_b.html
== background_repeat_y_a.html background_repeat_y_b.html
== background_repeat_none_a.html background_repeat_none_b.html
== background_repeat_both_a.html background_repeat_both_b.html
== setattribute_id_restyle_a.html setattribute_id_restyle_b.html
== pseudo_element_a.html pseudo_element_b.html
flaky_cpu == linebreak_simple_a.html linebreak_simple_b.html
== linebreak_inline_span_a.html linebreak_inline_span_b.html
# Should be == with expected failure. See #2797
!= overconstrained_block.html overconstrained_block_ref.html
== overflow_auto.html overflow_simple_b.html
== overflow_scroll.html overflow_simple_b.html
== overflow_simple_a.html overflow_simple_b.html
== position_fixed_background_color_a.html position_fixed_background_color_b.html
== position_fixed_overflow_a.html position_fixed_overflow_b.html
== noscript.html noscript_ref.html
== pseudo_inherit.html pseudo_inherit_ref.html
experimental == vertical-lr-blocks.html vertical-lr-blocks_ref.html
== float_intrinsic_height.html float_intrinsic_height_ref.html
== table_auto_width.html table_auto_width_ref.html
== inline_whitespace_b.html inline_whitespace_ref.html
== inline_whitespace_a.html inline_whitespace_ref.html
== line_height_a.html line_height_ref.html
== block_replaced_content_a.html block_replaced_content_ref.html
== block_replaced_content_b.html block_replaced_content_ref.html
== root_margin_collapse_a.html root_margin_collapse_b.html
# Should be == with expected failure:
!= ../html/acid2.html#top acid2_ref.html
# Should be != with expected failure:
# FIXME: use the real test when pixel-snapping for scrolling is fixed.
#== ../html/acid2.html#top acid2_ref_broken.html
flaky_gpu,flaky_linux == acid2_noscroll.html acid2_ref_broken.html
!= inline_background_a.html inline_background_ref.html
== inline_element_border_a.html inline_element_border_ref.html
== float_intrinsic_width_a.html float_intrinsic_width_ref.html
== float_right_intrinsic_width_a.html float_right_intrinsic_width_ref.html
== fixed_width_overrides_child_intrinsic_width_a.html fixed_width_overrides_child_intrinsic_width_ref.html

View file

@ -0,0 +1,16 @@
<html>
<head>
<style>
html {
font-size: 20px;
}
p {
width: 10em;
border: solid 1px black;
}
</style>
</head>
<body>
<p>hello, wide world</p>
</body>
</html>

View file

@ -0,0 +1,16 @@
<html>
<head>
<style>
html {
font-size: 20px;
}
p {
width: 200px;
border: solid 1px black;
}
</style>
</head>
<body>
<p>hello, wide world</p>
</body>
</html>

View file

@ -0,0 +1,6 @@
<html>
<body>
<img style="display: block; width: 500px; height: 300px; background-color: red;"
src="400x400_green.png">
</body>
</html>

View file

@ -0,0 +1,18 @@
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
background-color: black;
}
img {
float: left;
}
</style>
</head>
<body>
<img src="400x400_green.png">
</body>
</html>

View file

@ -0,0 +1,18 @@
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
background-color: black;
}
img {
display: block;
}
</style>
</head>
<body>
<img src="400x400_green.png">
</body>
</html>

View file

@ -0,0 +1,15 @@
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
background-color: black;
}
</style>
</head>
<body>
<img src="400x400_green.png">
</body>
</html>

View file

@ -0,0 +1,20 @@
<!DOCTYPE html>
<html>
<head>
<style>
html {
margin: 0;
padding: 0;
background-color: blue;
}
body {
margin: 0;
padding: 0;
border-top-width: 3px;
border-top-style: none;
}
</style>
</head>
<body><img src="png_rgba_colorspace_a.png"></body>
</html>

View file

@ -0,0 +1,19 @@
<!DOCTYPE html>
<html>
<head>
<style>
html {
margin: 0;
padding: 0;
background-color: blue;
}
body {
margin: 0;
padding: 0;
border-top-width: 0px;
}
</style>
</head>
<body><img src="png_rgba_colorspace_a.png"></body>
</html>

BIN
tests/ref/borders.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2 KiB

90
tests/ref/borders_a.html Normal file
View file

@ -0,0 +1,90 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<style>
html {
background-color: white;
}
#none{
border-style: none;
border-width: 10px;
border-color: green red yellow black;
width:4096px;
}
#hidden{
border-style: hidden;
border-width: 10px;
border-color: green red yellow black;
width:4096px;
}
#double{
border-style: double;
border-width: 10px;
border-color: yellow;
width:4096px;
}
#solid{
border-style: solid;
border-width: 10px;
border-color: yellow;
width:4096px;
}
#dashed{
border-style: dashed;
border-width: 10px;
border-color: green yellow black red;
width:4096px;
}
#dotted{
border-style: dotted;
border-width: 10px;
border-color: green red yellow black;
width:4096px;
}
#groove{
border-style: groove;
border-width: 10px;
border-color: green red yellow black;
position: relative;
left: -30px;
width:4096px;
}
#ridge{
border-style: ridge;
border-width: 10px;
border-color: green red yellow black;
position: relative;
left: -30px;
width:4096px;
}
#inset{
border-style: inset;
border-width: 10px;
border-color: green red yellow black;
position: relative;
left: -30px;
width:4096px;
}
#outset{
border-style: outset;
border-width: 10px;
border-color: green red yellow black;
position: relative;
left: -30px;
width:4096px;
}
</style>
</head>
<body>
<div id="none"></div>
<div id="hidden"></div>
<div id="solid"></div>
<div id="double"></div>
<div id="dashed"></div>
<div id="dotted"></div>
<div id="groove"></div>
<div id="ridge"></div>
<div id="inset"></div>
<div id="outset"></div>
</body>
</HTML>

19
tests/ref/borders_b.html Normal file
View file

@ -0,0 +1,19 @@
<!DOCTYPE html>
<html>
<head>
<style>
html {
margin: 0;
padding: 0;
background-color: white;
border: none;
}
body {
margin: 0;
padding: 0;
border: none;
}
</style>
</head>
<body><img src="borders.png"></body>
</html>

11
tests/ref/br-ref.html Normal file
View file

@ -0,0 +1,11 @@
<!doctype HTML>
<html>
<head>
<meta charset="UTF-8">
<title>br reference</title>
</head>
<body>
<div>A</div>
<div>B</div>
</body>
</html>

10
tests/ref/br.html Normal file
View file

@ -0,0 +1,10 @@
<!doctype HTML>
<html>
<head>
<meta charset="UTF-8">
<title>br test</title>
</head>
<body>
A<br>B
</body>
</html>

View file

@ -0,0 +1,28 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<style type="text/css">
div
{
background-color: black;
height: 50px;
width: 100px;
}
</style>
</head>
<body>
<p>Test passes if there is a black rectangle which is wider than it is tall.</p>
<div></div>
</body>
</html>

View file

@ -0,0 +1,48 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Test: Block formatting context auto height with floated descendants outside the normal flow and bottom margins</title>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2012-09-26 -->
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#root-height">
<link rel="match" href="reference/block-formatting-context-height-003-ref.htm">
<meta name="flags" content="">
<meta name="assert" content="The auto height of a block formatting context element does not account for bottom margins of floated content descendents of out of flow blocks.">
<style type="text/css">
#container
{
width: 100px;
height: auto;
background: black;
position: absolute;
}
#sibling
{
height: 50px;
width: 100px;
}
#absolute
{
position: absolute;
width: 100px;
height: 50px;
}
#float
{
margin-bottom: 50px;
height: 50px;
width: 100%;
}
</style>
</head>
<body>
<p>Test passes if there is a black rectangle which is wider than it is tall.</p>
<div id="container">
<div id="sibling"></div>
<div id="absolute">
<div id="float"></div>
</div>
</div>
</body>
</html>

View file

@ -0,0 +1,34 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<style type="text/css">
table
{
border: black solid 1px;
border-spacing: 0px;
width: 100%;
}
td {padding: 0px;}
</style>
</head>
<body>
<p>Test passes if there are 3 lines of "Filler Text".</p>
<table>
<tr><td>Filler Text</td></tr>
<tr><td>Filler Text</td></tr>
<tr><td>Filler Text</td></tr>
</table>
</body>
</html>

View file

@ -0,0 +1,27 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Test: Vertical layout of boxes</title>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2012-09-26 -->
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#block-formatting">
<link rel="match" href="reference/block-formatting-contexts-001-ref.htm">
<meta name="flags" content="">
<meta name="assert" content="Boxes are vertically laid out one after the other beginning at the top of a containing block.">
<style type="text/css">
#div1
{
border: solid 1px black;
}
</style>
</head>
<body>
<p>Test passes if there are 3 lines of "Filler Text".</p>
<div id="div1">
<div>Filler Text</div>
<div>Filler Text</div>
<div>Filler Text</div>
</div>
</body>
</html>

View file

@ -0,0 +1,59 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<style type="text/css">
table
{
border-collapse: collapse;
width: 100%;
}
tbody
{
border-bottom: black solid 1px;
border-top: black solid 1px;
}
thead {border-bottom: black solid 1px;}
/*
Necessary otherwise ( 0 + 1 ) divided by 2 may give unpredictable
measurements affecting vertical alignment
*/
tfoot {border-top: black solid 1px;}
/*
Necessary otherwise ( 0 + 1 ) divided by 2 may give unpredictable
measurements affecting vertical alignment
*/
/*
"
User agents must find a consistent rule for rounding off in the
case of an odd number of discrete units (screen pixels, printer dots).
"
http://www.w3.org/TR/CSS21/tables.html#collapsing-borders
*/
td {padding: 0px;}
</style>
</head>
<body>
<p>Test passes if there are 3 lines of "Filler Text" separated by 2 thin black lines.</p>
<table>
<thead> <tr><td>Filler Text</td></tr> </thead>
<tfoot> <tr><td>Filler Text</td></tr> </tfoot>
<tbody> <tr><td>Filler Text</td></tr> </tbody>
</table>
</body>
</html>

View file

@ -0,0 +1,32 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Test: Vertical distance with margins</title>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2012-09-26 -->
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#block-formatting">
<link rel="match" href="reference/block-formatting-contexts-003-ref.htm">
<meta name="flags" content="">
<meta name="assert" content="The vertical distance between two sibling boxes is determined by the margin property.">
<style type="text/css">
#div1
{
background: black;
}
div div
{
background: white;
margin-top: 1px;
}
</style>
</head>
<body>
<p>Test passes if there are 3 lines of "Filler Text" separated by 2 thin black lines.</p>
<div id="div1">
<div>Filler Text</div>
<div>Filler Text</div>
<div>Filler Text</div>
</div>
</body>
</html>

View file

@ -0,0 +1,31 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<!-- same as /margin-padding-clear/margin-collapse-002-ref.xht -->
<title>CSS Reftest Reference</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<style type="text/css">
div
{
border-bottom: black solid 20px;
border-top: black solid 20px;
height: 40px;
width: 100px;
}
</style>
</head>
<body>
<p>Test passes if there is <strong>no red</strong>.</p>
<div></div>
</body>
</html>

View file

@ -0,0 +1,37 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Test: Block Formatting Contexts: Margin Collapsing</title>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2012-09-26 -->
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#block-formatting">
<link rel="match" href="reference/block-formatting-contexts-004-ref.htm">
<meta name="flags" content="ahem image">
<meta name="assert" content="Margins collapse between adjacent block boxes in a block formatting context.">
<style type="text/css">
#div1
{
background: url("support/margin-collapse-2em-space.png");
font: 20px/1em Ahem;
height: 4em;
width: 5em;
}
#div2
{
margin-bottom: 1em;
}
#div3
{
margin-top: 2em;
}
</style>
</head>
<body>
<p>Test passes if there is <strong>no red</strong>.</p>
<div id="div1">
<div id="div2">XXXXX</div>
<div id="div3">XXXXX</div>
</div>
</body>
</html>

View file

@ -0,0 +1,31 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<!-- same as margin-padding-clear/margin-left-004-ref.xht -->
<title>CSS Reftest Reference</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<style type="text/css">
div
{
background-color: blue;
border-right: orange solid 5px;
height: 96px;
width: 5px;
}
</style>
</head>
<body>
<p>Test passes if there is <strong>no space between</strong> the blue and orange lines.</p>
<div></div>
</body>
</html>

View file

@ -0,0 +1,33 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Test: No padding or margin, left edges touch</title>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2012-09-26 -->
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#block-formatting">
<link rel="match" href="reference/block-formatting-contexts-005-ref.htm">
<meta name="flags" content="">
<meta name="assert" content="When there is no padding or margins on elements the left outer edge of the child box will touch the left edge of the containing block.">
<style type="text/css">
div
{
height: 1in;
}
#div1
{
border-left: solid 5px blue;
}
div div
{
border-left: solid 5px orange;
}
</style>
</head>
<body>
<p>Test passes if there is <strong>no space between</strong> the blue and orange lines.</p>
<div id="div1">
<div></div>
</div>
</body>
</html>

View file

@ -0,0 +1,30 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<style type="text/css">
div
{
background-color: orange;
border-right: blue solid 5px;
height: 96px;
margin-left: 91px;
width: 5px;
}
</style>
</head>
<body>
<p>Test passes if there is <strong>no space between</strong> the blue and orange lines.</p>
<div></div>
</body>
</html>

View file

@ -0,0 +1,34 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Test: No padding and margin, right edges touch</title>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2012-09-26 -->
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#block-formatting">
<link rel="match" href="reference/block-formatting-contexts-006-ref.htm">
<meta name="flags" content="">
<meta name="assert" content="When there is no padding or margins on elements the right outer edge of the child box will touch the right edge of the containing block.">
<style type="text/css">
div
{
height: 1in;
}
#div1
{
border-right: solid 5px blue;
width: 1in;
}
div div
{
border-right: solid 5px orange;
}
</style>
</head>
<body>
<p>Test passes if there is <strong>no space between</strong> the blue and orange lines.</p>
<div id="div1">
<div></div>
</div>
</body>
</html>

View file

@ -0,0 +1,28 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<style type="text/css">
div
{
border: black solid medium;
height: 200px;
width: 200px;
}
</style>
</head>
<body>
<p>Test passes if the upper-half of the square is blue.</p>
<div><img src="support/blue15x15.png" width="200" height="100" alt="Image download support must be enabled"></div>
</body>
</html>

View file

@ -0,0 +1,35 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Test: New block formatting context with floated elements</title>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2012-09-26 -->
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#block-formatting">
<link rel="match" href="reference/block-formatting-contexts-008-ref.htm">
<meta name="flags" content="">
<meta name="assert" content="Floated elements establish new block formatting context.">
<style type="text/css">
#div1
{
border: solid;
height: 200px;
width: 200px;
}
div div
{
background: blue;
display: inline;
float: right;
height: 50%;
width: 100%;
}
</style>
</head>
<body>
<p>Test passes if the upper-half of the square is blue.</p>
<div id="div1">
<div></div>
</div>
</body>
</html>

View file

@ -0,0 +1,36 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<style type="text/css">
div
{
background-color: blue;
float: left;
width: 100px;
}
div + div
{
background-color: transparent;
clear: left;
}
</style>
</head>
<body>
<p>Test passes if the "Filler Text" is below the blue stripe.</p>
<div>&nbsp;</div>
<div>Filler Text</div>
</body>
</html>

View file

@ -0,0 +1,28 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Test: Table-cell elements establish a new block formatting context</title>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2012-09-26 -->
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#block-formatting">
<link rel="match" href="reference/block-formatting-contexts-011-ref.htm">
<meta name="flags" content="">
<meta name="assert" content="Elements defined as table-cell elements establish a new block formatting context.">
<style type="text/css">
#span1
{
background-color: blue;
display: table-cell;
width: 100px;
}
</style>
</head>
<body>
<p>Test passes if the "Filler Text" is below the blue stripe.</p>
<div>
<span id="span1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
<span>Filler Text</span>
</div>
</body>
</html>

View file

@ -0,0 +1,19 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
</head>
<body>
<p>Test passes if the blue and orange squares have the same size.</p>
<div><img src="support/blue15x15.png" width="50" height="50" alt="Image download support must be enabled"><img src="support/swatch-orange.png" width="50" height="50" alt="Image download support must be enabled"></div>
</body>
</html>

View file

@ -0,0 +1,49 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Test: Overflow set to 'hidden' establishes a new block formatting context</title>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2012-09-26 -->
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#block-formatting">
<link rel="match" href="reference/block-formatting-contexts-015-ref.htm">
<meta name="flags" content="">
<meta name="assert" content="A new block formatting context is established when overflow is set to 'hidden'.">
<style type="text/css">
#div1
{
height: 200px;
width: 200px;
}
div div
{
height: 50px;
width: 50px;
}
#div2
{
background: blue;
float: left;
}
#div3
{
overflow: hidden;
}
div div div
{
background: orange;
height: 1in;
width: 1in;
}
</style>
</head>
<body>
<p>Test passes if the blue and orange squares have the same size.</p>
<div id="div1">
<div id="div2"></div>
<div id="div3">
<div></div>
</div>
</div>
</body>
</html>

View file

@ -0,0 +1,9 @@
# == block-formatting-context-height-003.htm block-formatting-context-height-003-ref.htm
# == block-formatting-contexts-001.htm block-formatting-contexts-001-ref.htm
# == block-formatting-contexts-003.htm block-formatting-contexts-003-ref.htm
# == block-formatting-contexts-004.htm block-formatting-contexts-004-ref.htm
== block-formatting-contexts-005.htm block-formatting-contexts-005-ref.htm
== block-formatting-contexts-006.htm block-formatting-contexts-006-ref.htm
# == block-formatting-contexts-008.htm block-formatting-contexts-008-ref.htm
# == block-formatting-contexts-011.htm block-formatting-contexts-011-ref.htm
# == block-formatting-contexts-015.htm block-formatting-contexts-015-ref.htm

Binary file not shown.

After

Width:  |  Height:  |  Size: 185 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 84 B

87
tests/ref/data_img_a.html Normal file
View file

@ -0,0 +1,87 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
</head>
<body>
<img src="data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAAM4AAADOCAMAAABBwc32AAAABGdBTUEAALGPC/xhBQAAAAFzUkdC
AK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAwBQTFRF
////+fn58fHx4ODgGhoaAAAAAwMDpKSk9vb29PT0xcXFFhYWAQEBZmZm+/v7TExMERER6Ojop6en
Dw8PBQUFhISELi4uYGBg/v7+r6+vXFxcrq6uAgIC2NjYyMjIaGho7+/vGBgYtLS0dXV19fX15eXl
a2trgYGBc3NzJycn+Pj4DAwMGxsb/Pz88PDw6urqvr6+Pj4+39/fEhISkpKS0dHRBAQEg4OD09PT
uLi4cnJyBgYGe3t7Pz8/qampq6urfX19jo6OMjIyCQkJhYWFl5eXWFhY2dnZVFRUSEhI6+vrkJCQ
CAgI4uLiKCgo0NDQh4eH/f39Wlpaubm5LCwsFxcXHR0dPDw8ZGRkhoaGFBQUrKysTU1NSUlJzs7O
dHR0DQ0NZWVlxsbG3Nzct7e3UFBQ6enpJCQkIyMjRUVFXV1d0tLSwcHBDg4On5+fgICAgoKC+vr6
7e3tS0tLV1dXNjY2ISEh9/f3i4uLw8PDoKCgCgoKmpqaeHh4ExMTb29vGRkZHBwc1dXVTk5OioqK
PT09oaGhLy8vJSUlzMzMYWFhk5OT8/PzQEBAz8/PHh4ed3d3iIiIEBAQRkZGVlZW4+PjpqambGxs
3t7ejY2N4eHhU1NTT09Po6OjHx8f5ubmtra2SkpKWVlZ1tbWlJSUICAgQkJCY2NjOjo6bm5uCwsL
mZmZIiIiurq6enp6tbW17u7uUVFRycnJREREbW1ty8vLVVVV1NTUJiYm3d3dMzMzMDAwOTk58vLy
NDQ0sbGxnZ2dx8fH5OTkmJiYODg4BwcHnJycwsLCpaWlQUFB5+fnkZGRlpaWX19fNzc3jIyMLS0t
wMDAaWlpsrKyv7+/29vbvLy8xMTEZ2dnQ0NDKSkplZWVqqqqNTU1m5ubs7OzfHx8f39/ampqu7u7
UlJSOzs7sLCw2traj4+PFRUVfn5+dnZ2R0dHra2toqKieXl5qKiocXFxMTExXl5eKysr7Ozsvb29
zc3NiYmJW1tbKioqysrKYmJi19fXnp6ecHBw33iQwQAAAAFiS0dEAIgFHUgAAA0ySURBVHja7V1p
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
AABJRU5ErkJggg==" />
</body>
</html>

View file

@ -0,0 +1,9 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
</head>
<body>
<img src="rust_logo.png" />
</body>
</html>

View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<title>:first-child test</title>
<style type="text/css">
html:first-child { background: red; }
html { background: yellow;}
p { width: 20px; height: 20px; background: orange; float: left; margin-left: 10px; }
div { clear: both; }
#p1, #p2, #p3 { background: red; }
#d1 > *:first-child { background: green }
#d2 > *:first-child { background: green }
#d3 > *:first-child { background: green }
#p4 { background: green; }
#d4 > *:first-child { background: red }
</style>
</head>
<body>
<div id="d1"><p id="p1"> </p><p> </p></div>
<div id="d2"> <p id="p2"> </p><p> </p></div>
<div id="d3"><!-- comment --><p id="p3"> </p><p> </p></div>
<div id="d4"><span> </span><p id="p4"> </p><p> </p></div>
</body>
</html>

View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<title>:first-child test</title>
<style type="text/css">
html { background: yellow;}
p { width: 20px; height: 20px; background: orange; float: left; margin-left: 10px; }
div { clear: both; }
#p1 { background: green; }
#p2 { background: green; }
#p3 { background: green; }
#p4 { background: green; }
</style>
</head>
<body>
<div id="d1"><p id="p1"> </p><p> </p></div>
<div id="d2"> <p id="p2"> </p><p> </p></div>
<div id="d3"><!-- comment --><p id="p3"> </p><p> </p></div>
<div id="d4"><span> </span><p id="p4"> </p><p> </p></div>
</body>
</html>

View file

@ -0,0 +1,52 @@
<!DOCTYPE html>
<html>
<head>
<title>:first-of-type test</title>
<style type="text/css">
/* should not match according to Selectors 3 because html has no parent element */
html:first-of-type { background: red; }
div > p,
div > div,
div > address {
float: left;
width: 20px;
height: 20px;
margin: 0px;
margin-right: 10px;
padding: 0px;
}
div > p {
background: white;
}
div > div,
div > address {
background: black;
}
body > div { clear: both; margin-bottom: 10px; }
#d1 > .ok { background: red; }
#d1 > *:first-of-type { background: green }
</style>
</head>
<body>
<div id="d1">
<p class="ok"> </p>
<div class="ok"> </div>
<div> </div>
<p> </p>
<address class="ok"> </address>
<p> </p>
<div> </div>
<p> </p>
<p> </p>
<address> </address>
<address> </address>
<p> </p>
<div> </div>
<p> </p>
<p> </p>
</div>
</body>
</html>

View file

@ -0,0 +1,48 @@
<!DOCTYPE html>
<html>
<head>
<title>:first-of-type test</title>
<style type="text/css">
div > p,
div > div,
div > address {
float: left;
width: 20px;
height: 20px;
margin: 0px;
margin-right: 10px;
padding: 0px;
}
div > p {
background: white;
}
div > div,
div > address {
background: black;
}
body > div { clear: both; margin-bottom: 10px; }
#d1 > .ok { background: green; }
</style>
</head>
<body>
<div id="d1">
<p class="ok"> </p>
<div class="ok"> </div>
<div> </div>
<p> </p>
<address class="ok"> </address>
<p> </p>
<div> </div>
<p> </p>
<p> </p>
<address> </address>
<address> </address>
<p> </p>
<div> </div>
<p> </p>
<p> </p>
</div>
</body>
</html>

View file

@ -0,0 +1,33 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
@font-face {
font-family: 'ahem';
src: url('fonts/ahem/ahem.ttf');
}
body {
font-family: 'ahem';
font-size: 100px;
margin: 0;
line-height: 1;
}
.fr {
float: right;
}
.green {
color: green;
}
.fixed {
width: 100px;
}
</style>
</head>
<body>
<div class="fr">
<div class="fixed">
<span class="green">X X</span>
</div>
</div>
</body>
</html>

View file

@ -0,0 +1,23 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.fr {
float: right;
}
.green {
background-color: green;
}
.fixed {
width: 100px;
height: 200px;
}
body {
margin: 0;
}
</style>
</head>
<body>
<div class="fr green fixed"></div>
</body>
</html>

View file

@ -0,0 +1,24 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.otherprojects {
background-color: red;
float: left;
width: 200px;
}
.otherprojects-item {
background-color: yellow;
float: left;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="otherprojects">
<div class="otherprojects-item">
</div>
</div>
</body>
</html>

View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.otherprojects {
background-color: red;
width: 200px;
}
.otherprojects-item {
background-color: yellow;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="otherprojects">
<div class="otherprojects-item">
</div>
</div>
</body>
</html>

View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
@font-face {
font-family: 'ahem';
src: url('fonts/ahem/ahem.ttf');
}
body {
font-family: 'ahem';
font-size: 100px;
margin: 0;
line-height: 1;
}
.fl {
float: left;
}
.green {
color: green;
}
</style>
</head>
<body>
<div class="fl green">X X</div>
</body>
</html>

View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.fl {
float: left;
}
.green {
background-color: green;
}
.fixed {
width: 100px;
height: 100px;
}
body {
margin: 0;
}
</style>
</head>
<body>
<div class="fl green fixed"></div>
<div class="fl fixed"></div>
<div class="fl green fixed"></div>
</body>
</html>

View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
@font-face {
font-family: 'ahem';
src: url(fonts/ahem/ahem.ttf);
}
.fr {
float: right;
}
.green {
color: green;
}
body {
font-family: 'ahem';
font-size: 100px;
margin: 0;
}
</style>
</head>
<body>
<div class="fr green">X X</div>
</body>
</html>

View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.fr {
float: right;
}
.green {
background-color: green;
}
.fixed {
width: 100px;
height: 100px;
}
body {
margin: 0;
}
</style>
</head>
<body>
<div class="fr green fixed"></div>
<div class="fr fixed"></div>
<div class="fr green fixed"></div>
</body>
</html>

View file

@ -0,0 +1,13 @@
<!DOCTYPE html>
<html>
<head>
<title>font-size: 2em (Bug #1435)</title>
<style type="text/css">
body { font-size: 20px; }
p { font-size: 2em; }
</style>
</head>
<body>
<p>This text should be 40px high.</p>
</body>
</html>

View file

@ -0,0 +1,12 @@
<!DOCTYPE html>
<html>
<head>
<title>font-size: 2em (Bug #1435)</title>
<style type="text/css">
p { font-size: 40px; }
</style>
</head>
<body>
<p>This text should be 40px high.</p>
</body>
</html>

View file

@ -0,0 +1,13 @@
<!DOCTYPE html>
<html>
<head>
<title>font-size: 200% (Bug #1435)</title>
<style type="text/css">
body { font-size: 20px }
p { font-size: 200%; }
</style>
</head>
<body>
<p>This text should be 40px high.</p>
</body>
</html>

View file

@ -0,0 +1,36 @@
The Ahem font in this directory belongs to the public domain. In
jurisdictions that do not recognize public domain ownership of these
files, the following Creative Commons Zero declaration applies:
<http://labs.creativecommons.org/licenses/zero-waive/1.0/us/legalcode>
which is quoted below:
The person who has associated a work with this document (the "Work")
affirms that he or she (the "Affirmer") is the/an author or owner of
the Work. The Work may be any work of authorship, including a
database.
The Affirmer hereby fully, permanently and irrevocably waives and
relinquishes all of her or his copyright and related or neighboring
legal rights in the Work available under any federal or state law,
treaty or contract, including but not limited to moral rights,
publicity and privacy rights, rights protecting against unfair
competition and any rights protecting the extraction, dissemination
and reuse of data, whether such rights are present or future, vested
or contingent (the "Waiver"). The Affirmer makes the Waiver for the
benefit of the public at large and to the detriment of the Affirmer's
heirs or successors.
The Affirmer understands and intends that the Waiver has the effect
of eliminating and entirely removing from the Affirmer's control all
the copyright and related or neighboring legal rights previously held
by the Affirmer in the Work, to that extent making the Work freely
available to the public for any and all uses and purposes without
restriction of any kind, including commercial use and uses in media
and formats or by methods that have not yet been invented or
conceived. Should the Waiver for any reason be judged legally
ineffective in any jurisdiction, the Affirmer hereby grants a free,
full, permanent, irrevocable, nonexclusive and worldwide license for
all her or his copyright and related or neighboring legal rights in
the Work.

View file

@ -0,0 +1,30 @@
The Ahem font was developed by Todd Fahrner to help test writers
develop predictable tests. The font's em square is exactly square.
Its ascent and descent is exactly the size of the em square. This
means that the font's extent is exactly the same as its line-height,
meaning that it can be exactly aligned with padding, borders, margins,
and so forth.
The font's alphabetic baseline is 0.2em above its bottom, and 0.8em
below its top. The font has an x-height of 0.8em.
The font has four glyphs:
'X' U+0058 A square exactly 1em in height and width.
'p' U+0070 A rectangle exactly 0.2em high, 1em wide, and aligned so
that its top is flush with the baseline.
'É' U+00C9 A rectangle exactly 0.8em high, 1em wide, and aligned so
that its bottom is flush with the baseline.
' ' U+0020 A transparent space exactly 1em high and wide.
Most other US-ASCII characters in the font have the same glyph as X.
The Ahem font belongs to the public domain as described in COPYING.
Acknowledgements: The font was originally created by Todd Fahrner in
the late 90s, and was updated by Paul Nelson in the mid 2000s. The
changes were the introduction of x-height information to the OS/2
table and the addition of the space and non-breaking space glyphs.

Binary file not shown.

View file

@ -0,0 +1,22 @@
<head>
<style type="text/css">
body {margin : 0px}
.start {background-color : gray; height : 600px}
.half {background-color : red; height : 50%}
.quarter {background-color : rgb(250, 125, 0); height : 25%}
.eighth {background-color : yellow; height : 12.5%}
.sixteenth {background-color : green; height : 6.25%}
.thirtysecond {background-color : blue; height : 3.125%}
.sixtyfourth {background-color : purple; height : 1.5625%}
</style>
</head>
<body>
<div class="start">
<div class="half"></div>
<div class="quarter"></div>
<div class="eighth"></div>
<div class="sixteenth"></div>
<div class="thirtysecond"></div>
<div class="sixtyfourth"></div>
</div>
</body>

View file

@ -0,0 +1,22 @@
<head>
<link rel="stylesheet" href="reset.css" />
<style type="text/css">
.start {background-color : gray; height : 600px}
.half {background-color : red; height : 50%}
.quarter {background-color : rgb(250, 125, 0); height : 25%}
.eighth {background-color : yellow; height : 12.5%}
.sixteenth {background-color : green; height : 6.25%}
.thirtysecond {background-color : blue; height : 3.125%}
.sixtyfourth {background-color : purple; height : 1.5625%}
</style>
</head>
<body>
<div class="start">
<div class="half"></div>
<div class="quarter"></div>
<div class="eighth"></div>
<div class="sixteenth"></div>
<div class="thirtysecond"></div>
<div class="sixtyfourth"></div>
</div>
</body>

8
tests/ref/hello_a.html Normal file
View file

@ -0,0 +1,8 @@
<html>
<head>
<title>hello</title>
</head>
<body>
<strong>Hello!</strong>
</body>
</html>

8
tests/ref/hello_b.html Normal file
View file

@ -0,0 +1,8 @@
<html>
<head>
<title>hello</title>
</head>
<body>
<b>Hello!</b>
</body>
</html>

View file

@ -0,0 +1,5 @@
<!doctype html>
<img src=400x400_green.png>
<script>
document.getElementsByTagName("img")[0].removeAttribute("src");
</script>

View file

@ -0,0 +1,2 @@
<!doctype html>
<img>

18
tests/ref/img_size_a.html Normal file
View file

@ -0,0 +1,18 @@
<html>
<head>
<title>
The winter is too cold for me...
</title>
</head>
<body>
<div>
<img src="rust_logo.png" width="206" />
</div>
<div>
<img src="rust_logo.png" width="206" />
</div>
<div style="width:1000px">
<img src="rust_logo.png" style="width:100px" />
</div>
</body>
</html>

18
tests/ref/img_size_b.html Normal file
View file

@ -0,0 +1,18 @@
<html>
<head>
<title>
The winter is too cold for me...
</title>
</head>
<body>
<div>
<img src="rust_logo.png" height="206" />
</div>
<div>
<img src="rust_logo.png" style="height:206px"/>
</div>
<div style="width:1000px">
<img src="rust_logo.png" style="width:10%" />
</div>
</body>
</html>

View file

@ -0,0 +1,17 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
.white {
color: white;
}
.bggreen {
background-color: green;
}
body {
margin: 0;
}
</style>
</head>
<body><span class="bggreen white">White text on a green background</span></body>
</html>

View file

@ -0,0 +1,14 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
.white {
color: white;
}
body {
margin: 0;
}
</style>
</head>
<body><span class="white">White text on a green background</span></body>
</html>

View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html>
<head>
<style>
html {
margin: 0;
padding: 0;
background-color: blue;
border: none;
}
body {
margin: 0;
padding: 0;
border: none;
}
</style>
</head>
<body>
<span style="border: 10px black solid"><img width="100" style="border:10px red solid" src="test.jpeg"></span>
<span style="background:red;font-size:35px;border: black 15px solid">
<span style="font-size:15px;background:yellow">
<img src="test.jpeg"/>
</span>
</span>
</body>
</html>

View file

@ -0,0 +1,20 @@
<!DOCTYPE html>
<html>
<head>
<style>
html {
margin: 0;
padding: 0;
background-color: blue;
border: none;
}
body {
margin: 0;
padding: 0;
border: none;
}
</style>
</head>
<body><img src="inline_border_ref.png"></body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 278 KiB

Some files were not shown because too many files have changed in this diff Show more