beenull/ladybird
1
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2024-11-21 23:20:20 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 6

Base: Remove old LibWeb demo pages

Browse source 
These used to serve as tests before we had proper testing infrastructure
set up. Now, they just sit forgotten about, gathering dust. Let's remove
them.
This commit is contained in:
Sam Atkins 2024-10-01 11:06:48 +01:00 committed by Andreas Kling
parent 3ecf6de652
commit d5ba665f89
Notes: github-actions[bot] 2024-10-03 09:07:22 +00:00 
Author: https://github.com/AtkinsSJ
Commit: https://github.com/LadybirdBrowser/ladybird/commit/d5ba665f891
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/1584
193 changed files with 0 additions and 15009 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
Base/res/html/misc/90s-bg.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 13 KiB

106
Base/res/html/misc/accent-color.html
View file

@ -1,106 +0,0 @@
<style>
.big {
width: 64px;
height: 64px;
}
.color-light {
accent-color: wheat;
}
.color-dark {
accent-color: rebeccapurple
}
</style>
<div>
<b>System color</b><br>
<form>
<input type="checkbox" checked></input>
<input type="checkbox" ></input>
<input class="indeterminate" type="checkbox"></input>
<input type="checkbox" checked disabled></input>
<input type="checkbox" disabled></input>
<input class="indeterminate" type="checkbox" disabled></input>
<input class="big" type="checkbox" checked></input>
<input class="big" type="checkbox" ></input>
<input class="big indeterminate" type="checkbox"></input>
<input class="big" type="checkbox" checked disabled></input>
<input class="big" type="checkbox" disabled></input>
<input class="big indeterminate" type="checkbox" disabled></input>
</form>
<form>
<input name="radio-small" type="radio" checked></input>
<input name="radio-small" type="radio"></input>
<input type="radio" checked disabled></input>
<input type="radio" disabled></input>
<input name="radio-big" class="big" type="radio" checked></input>
<input name="radio-big" class="big" type="radio"></input>
<input class="big" type="radio" checked disabled></input>
<input class="big" type="radio" disabled></input>
</form>
</div>
<br>
<div class="color-dark">
<b>Dark accent color</b><br>
<form>
<input type="checkbox" checked></input>
<input type="checkbox" ></input>
<input class="indeterminate" type="checkbox"></input>
<input type="checkbox" checked disabled></input>
<input type="checkbox" disabled></input>
<input class="indeterminate" type="checkbox" disabled></input>
<input class="big" type="checkbox" checked></input>
<input class="big" type="checkbox" ></input>
<input class="big indeterminate" type="checkbox"></input>
<input class="big" type="checkbox" checked disabled></input>
<input class="big" type="checkbox" disabled></input>
<input class="big indeterminate" type="checkbox" disabled></input>
</form>
<form>
<input name="radio-small" type="radio" checked></input>
<input name="radio-small" type="radio"></input>
<input type="radio" checked disabled></input>
<input type="radio" disabled></input>
<input name="radio-big" class="big" type="radio" checked></input>
<input name="radio-big" class="big" type="radio"></input>
<input class="big" type="radio" checked disabled></input>
<input class="big" type="radio" disabled></input>
</form>
</div>
<br>
<div class="color-light">
<b>Light accent color</b><br>
<form>
<input type="checkbox" checked></input>
<input type="checkbox" ></input>
<input class="indeterminate" type="checkbox"></input>
<input type="checkbox" checked disabled></input>
<input type="checkbox" disabled></input>
<input class="indeterminate" type="checkbox" disabled></input>
<input class="big" type="checkbox" checked></input>
<input class="big" type="checkbox" ></input>
<input class="big indeterminate" type="checkbox"></input>
<input class="big" type="checkbox" checked disabled></input>
<input class="big" type="checkbox" disabled></input>
<input class="big indeterminate" type="checkbox" disabled></input>
</form>
<form>
<input name="radio-small" type="radio" checked></input>
<input name="radio-small" type="radio"></input>
<input type="radio" checked disabled></input>
<input type="radio" disabled></input>
<input name="radio-big" class="big" name="c" type="radio" checked></input>
<input name="radio-big" class="big" name="c" type="radio"></input>
<input class="big" type="radio" checked disabled></input>
<input class="big" type="radio" disabled></input>
</form>
</div>
<br>
<script>
document.querySelectorAll(".indeterminate").forEach(checkbox => {
checkbox.indeterminate = true;
});
</script>

1
Base/res/html/misc/acid1.html
View file

@ -1 +0,0 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"> <html> <head> <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 { 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> toggle </dt> <dd> <ul> <li> the way </li> <li id="bar"> <p> the world ends </p> <form action="./" method="get"> <p> bang <input type="radio" name="foo" value="off"> </p> <p> whimper <input type="radio" name="foo2" value="on"> </p> </form> </li> <li> i grow old </li> <li id="baz"> pluot? </li> </ul> <blockquote> <address> bar maids, </address> </blockquote> <h1> sing to me, erbarme dich </h1> </dd> </dl> <p style="color: black; font-size: 1em; line-height: 1.3em; clear: both"> This is a nonsensical document, but syntactically valid HTML 4.0. All 100%-conformant CSS1 agents should be able to render the document elements above this paragraph indistinguishably (to the pixel) from this <a href="sec5526c.gif">reference rendering,</a> (except font rasterization and form widgets). All discrepancies should be traceable to CSS1 implementation shortcomings. Once you have finished evaluating this test, you can return to the <A HREF="sec5526c.htm">parent page</A>. </p> </body> </html>

145
Base/res/html/misc/acid2.html
View file

@ -1,145 +0,0 @@
<!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; } /* overridden 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>

23
Base/res/html/misc/afrag.html
View file

@ -1,23 +0,0 @@
<html>
<head><title>a#hash test</title></head>
<body>
<ul>
<li><a href="#section1">Section 1</a></li>
<li><a href="#section2">Section 2</a></li>
<li><a href="#section3">Section 3</a></li>
<li><a href="#section4">Section 4</a></li>
</ul>
<h1><a name="section1">Section 1</a></h1>
<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
<h1><a name="section2">Section 2</a></h1>
<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
<h1><a name="section3">Section 3</a></h1>
<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
<h1><a name="section4">Section 4</a></h1>
<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
</body>
</html>

10
Base/res/html/misc/alert.html
View file

@ -1,10 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<script>
alert("Hello friends!");
</script>
</head>
<body>
</body>
</html>

56
Base/res/html/misc/async-js.html
View file

@ -1,56 +0,0 @@
<html>
<head>
<title>Async JavaScript function test page</title>
<style>
.pass {
background-color: green;
}
.fail {
background-color: red;
}
</style>
<script>
responseText = "";
async function loadFromURL(url) {
let result = await new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.open("GET", url);
xhr.addEventListener("load", function () {
if (this.status >= 200 && this.status <= 299)
resolve(this.responseText);
else
reject();
});
xhr.addEventListener("error", () => reject());
xhr.send();
});
responseText = result;
document.getElementById("response-text").innerText = responseText;
}
async function testURL(url) {
responseText = "";
let shouldBeEmpty = false;
try {
await loadFromURL(url);
} catch {
shouldBeEmpty = true;
}
if ((responseText !== "") ^ shouldBeEmpty)
document.getElementById("result").innerHTML = "<p class=pass>PASS!</p>";
else
document.getElementById("result").innerHTML = "<p class=fail>FAIL!</p>";
}
</script>
</head>
<body>
<input id="url" type="text" value="http://man.serenityos.org/man4/zero.html">
<a href="javascript:testURL(document.getElementById('url').value)">Click me for fun</a>
<br>
<div id="result"></div>
<pre id="response-text"></pre>
</body>
</html>

29
Base/res/html/misc/attr-invalidate-style.html
View file

@ -1,29 +0,0 @@
<html>
<head>
<style>
div[foo] { background-color: green; }
div[bar] > div { background-color: red; }
div[baz] ~ div { background-color: blue; }
</style>
</head>
<body>
<div id=bar><div>RED</div></div>
<div id=foo>GREEN</div>
<div id=baz></div>
<div>BLUE</div>
<script>
setTimeout(function() {
for (let id of ["foo", "bar", "baz"]) {
let e = document.getElementById(id);
e.setAttribute(id, "");
}
setTimeout(function() {
for (let id of ["foo", "bar", "baz"]) {
let e = document.getElementById(id);
e.removeAttribute(id);
}
}, 1000);
}, 1000);
</script>
</body>
</html>

211
Base/res/html/misc/attributes.html
View file

@ -1,211 +0,0 @@
<head>
<style>
.pass, .fail {
height: 30px;
line-height: 30px;
color: white;
display: block;
border: 1px solid black;
margin: 3px;
padding: 3px;
}
.pass { background-color: green; }
.fail { background-color: red; }
</style>
</head>
<body>
<div></div>
<div id=test1></div>
<script>
let test0 = document.getElementsByTagName('div')[0];
let test1 = document.getElementById('test1');
const bindMethodsForTest = (method) => {
let failures = 0;
const pass = (message) => {
if (failures > 0)
return;
const span = document.createElement('span');
span.innerHTML = `Pass! ${method}`;
span.setAttribute('class', 'pass');
document.body.appendChild(span);
};
const fail = (message) => {
const span = document.createElement('span');
span.innerHTML = `Fail! ${method}: ${message}`;
span.setAttribute('class', 'fail');
document.body.appendChild(span);
++failures;
};
return [pass, fail];
};
(() => {
const [pass, fail] = bindMethodsForTest('hasAttributes');
if (test0.hasAttributes())
fail('test0 should not have any attributes');
if (!test1.hasAttributes())
fail('test1 should have attributes');
pass();
})();
(() => {
const [pass, fail] = bindMethodsForTest('hasAttribute');
if (test0.hasAttribute('id'))
fail('test0 should not have an "id" attribute');
if (test0.hasAttribute('foo'))
fail('test0 should not have a "foo" attribute');
if (!test1.hasAttribute('id'))
fail('test1 should have an "id" attribute');
if (test1.hasAttribute('foo'))
fail('test1 should not have a "foo" attribute');
pass();
})();
(() => {
const [pass, fail] = bindMethodsForTest('getAttribute');
if ((attr = test0.getAttribute('id')) !== null)
fail(`test0 should not have an "id" attribute but has "${attr}"`);
if ((attr = test0.getAttribute('foo')) !== null)
fail(`test0 should not have a "foo" attribute but has "${attr}"`);
if ((attr = test1.getAttribute('id')) !== 'test1')
fail(`test1 should have an "id" attribute of "test1" but has "${attr}"`);
if ((attr = test1.getAttribute('foo')) !== null)
fail(`test1 should not have a "foo" attribute but has "${attr}"`);
pass();
})();
(() => {
const [pass, fail] = bindMethodsForTest('setAttribute');
try {
test0.setAttribute('', '');
fail('Expected setting an empty attribute name to throw');
} catch (error) {
if (error.name !== 'InvalidCharacterError')
fail(`Expected exception to be a DOMException of type InvalidCharacterError but is "${error.name}"`);
}
test0.setAttribute('foo', '123');
if (test0.attributes.length !== 1)
fail('test0 should have 1 attribute');
if ((attr = test0.getAttribute('foo')) !== '123')
fail(`test0 should have a "foo" attribute of "123" but has "${attr}"`);
test0.setAttribute('bar', '456');
if (test0.attributes.length !== 2)
fail(`test0 should have 2 attributes but has ${test0.attributes.length}`);
if ((attr = test0.getAttribute('bar')) !== '456')
fail(`test0 should have a "bar" attribute of "456" but has "${attr}"`);
test0.setAttribute('foo', '789');
if (test0.attributes.length !== 2)
fail(`test0 should have 2 attributes but has ${test0.attributes.length}`);
if ((attr = test0.getAttribute('foo')) !== '789')
fail(`test0 should have a "foo" attribute of "789" but has "${attr}"`);
try {
const foo = test0.attributes.item(0);
test0.attributes.setNamedItem(foo);
} catch (error) {
fail(`Re-assigning an attribute to the same element should not throw: ${error}`);
}
try {
const foo = test0.attributes.item(0);
test1.attributes.setNamedItem(foo);
fail('Expected re-assigning an attribute to throw');
} catch (error) {
if (error.name !== 'InUseAttributeError')
fail(`Expected exception to be a DOMException of type InUseAttributeError but is "${error.name}"`);
}
pass();
})();
(() => {
const [pass, fail] = bindMethodsForTest('removeAttribute');
test0.setAttribute('foo', '123');
if ((attr = test0.getAttribute('foo')) !== '123')
fail(`test0 should have a "foo" attribute of "123" but has "${attr}"`);
test0.removeAttribute('foo');
if (test0.hasAttribute('foo'))
fail('test0 should not have a "foo" attribute');
try {
test0.removeAttribute('foo');
} catch (error) {
fail(`Removing a non-existent attribute from an element should not throw: ${error}`);
}
try {
test0.attributes.removeNamedItem('foo');
fail('Expected removing a non-existent attribute from a named node map to throw');
} catch (error) {
if (error.name !== 'NotFoundError')
fail(`Expected exception to be a DOMException of type NotFoundError but is "${error.name}"`);
}
pass();
})();
(() => {
const [pass, fail] = bindMethodsForTest('attributes.length');
const attributes = test1.attributes;
if (attributes.length !== 1)
fail(`test1 should have 1 attribute but has ${attributes.length}`);
test1.setAttribute('foo', '123');
if (attributes.length !== 2)
fail(`test1 should have 2 attributes but has ${attributes.length}`);
test1.removeAttribute('foo');
if (attributes.length !== 1)
fail(`test1 should have 1 attribute but has ${attributes.length}`);
pass();
})();
(() => {
const [pass, fail] = bindMethodsForTest('attributes.items');
const attribute0 = test1.attributes.item(0);
if (attribute0.name !== 'id')
fail(`test1's first attribute's name should be "id" but is "${attribute0.name}"`);
if (attribute0.value !== 'test1')
fail(`test1's first attribute's value should be "test1" but is "${attribute0.value}"`);
const attribute1 = test1.attributes.item(1);
if (attribute1 !== null)
fail(`test1 should not have a second attribute but has ${attribute1}`);
pass();
})();
</script>
</body>

39
Base/res/html/misc/attrselectors.html
View file

@ -1,39 +0,0 @@
<!doctype html>
<html>
<head>
<title>CSS attribute selector test</title>
<style type="text/css">
div {
background-color: red;
}
div[exists],
div[exactMatch=" foobarbaz "],
div[containsWord~=go],
div[containsString*=barb],
div[startsWithSegment|=foo],
div[startsWithString^=foobar-b],
div[endsWithString$=ar-baz] {
background-color: lime;
}
</style>
</head>
<body>
<h1>These should be green:</h1>
<div exists>HasAttribute</div>
<div exactMatch=" foobarbaz ">ExactMatch</div>
<div containsWord="words go here">ContainsWord</div>
<div containsString="foobarbaz">ContainsString</div>
<div startsWithSegment="foo-bar-baz">StartsWithSegment</div>
<div startsWithString="foobar-baz">StartsWithString</div>
<div endsWithString="foobar-baz">EndsWithString</div>
<h1>These should be red:</h1>
<div doesntexist>HasAttribute</div>
<div exactMatch="foobarbaz">ExactMatch</div>
<div containsWord="words exist here">ContainsWord</div>
<div containsString="foobar baz">ContainsString</div>
<div startsWithSegment="fool-bar-baz">StartsWithSegment</div>
<div startsWithString="fooba-r-baz">StartsWithString</div>
<div endsWithString="fooba-r-baz">EndsWithString</div>
</body>
</html>

147
Base/res/html/misc/backdrop-filter.html
View file

@ -1,147 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Backdrop Filter</title>
<style>
.image-box {
background-image: url(old-computer.png);
height: 240px;
width: 350px;
background-size: cover;
border: 2px solid black;
display: flex;
align-items: center;
justify-content: center;
margin: 5px;
}
.backdrop-box {
background-color: rgba(255, 255, 255, 0.1);
border-radius: 5px;
width: 50%;
height: 50%;
display: flex;
justify-content: center;
align-items: center;
}
code {
text-shadow: 1px 1px 2px black;
color: white;
}
body {
display: flex;
flex-wrap: wrap;
}
.blur {
backdrop-filter: blur(5px);
}
.invert {
backdrop-filter: invert();
}
.grayscale {
backdrop-filter: grayscale();
}
.brightness {
backdrop-filter: brightness(200%);
}
.contrast {
backdrop-filter: contrast(200%);
}
.sepia {
backdrop-filter: sepia();
}
.grayscale-invert-blur {
backdrop-filter: grayscale() invert() blur(5px);
}
.mixed {
backdrop-filter: grayscale(50%) invert(70%);
}
.hue-rotate {
backdrop-filter: hue-rotate(60deg);
}
.saturate {
backdrop-filter: saturate(4);
}
</style>
</head>
<body>
<div class="image-box">
<div class="backdrop-box grayscale-invert-blur">
</div>
</div>
<div class="image-box">
<div class="backdrop-box mixed">
</div>
</div>
<div class="image-box">
<div class="backdrop-box blur">
</div>
</div>
<div class="image-box">
<div class="backdrop-box invert">
</div>
</div>
<div class="image-box">
<div class="backdrop-box grayscale">
</div>
</div>
<div class="image-box">
<div class="backdrop-box brightness">
</div>
</div>
<div class="image-box">
<div class="backdrop-box contrast">
</div>
</div>
<div class="image-box">
<div class="backdrop-box sepia">
</div>
</div>
<div class="image-box">
<div class="backdrop-box hue-rotate">
</div>
</div>
<div class="image-box">
<div class="backdrop-box saturate">
</div>
</div>
<script>
const boxes = document.querySelectorAll(".backdrop-box");
const filterMap = {};
for (const rule of document.styleSheets[0].cssRules) {
filterMap[rule.selectorText] = rule.style.backdropFilter;
}
updateLabels = () => {
boxes.forEach(box => {
const filter = box.classList[1];
const cssText = filterMap['.'+filter];
let el = document.getElementById(filter);
let newEl = document.createElement('code');
let text = document.createTextNode(box.style.backdropFilter || cssText);
newEl.appendChild(text);
newEl.id = filter;
if (!el)
box.appendChild(newEl)
else
box.replaceChild(newEl, el);
})
}
updateLabels();
</script>
</html>

6
Base/res/html/misc/background-no-repeat.html
View file

@ -1,6 +0,0 @@
<style>
body {
background: white url("background-repeat.png") no-repeat;
}
</style>
<body></body>

27
Base/res/html/misc/background-position-xy.html
View file

@ -1,27 +0,0 @@
<style>
.example {
display: inline-block;
width: 200px;
height: 200px;
border: 1px solid black;
background-repeat: no-repeat;
background-size: 30px 30px;
background-image: linear-gradient(red, red);
}
</style>
<b>background-position-x</b><br>
<div class="example" style="background-position-x: left"></div>
<div class="example" style="background-position-x: center"></div>
<div class="example" style="background-position-x: 25%"></div>
<div class="example" style="background-position-x: 2rem"></div>
<div class="example" style="background-position-x: right 32px"></div>
<div class="example" style="background-position-x: right"></div>
<br>
<br>
<b>background-position-y</b><br>
<div class="example" style="background-position-y: top"></div>
<div class="example" style="background-position-y: center"></div>
<div class="example" style="background-position-y: 25%"></div>
<div class="example" style="background-position-y: 2rem"></div>
<div class="example" style="background-position-y: bottom 32px"></div>
<div class="example" style="background-position-y: bottom"></div>

72
Base/res/html/misc/background-repeat-test.html
View file

@ -1,72 +0,0 @@
<style>
body {
background: cyan;
}
iframe {
width: 200px;
height: 200px;
}
.float {
float: left;
}
.background {
background: white url(background-repeat.png);
width: 200px;
height: 200px;
}
</style>
<body>
<h1>Body Background</h1>
<div style="overflow: hidden">
<div class=float>
<h2>repeat</h2>
<iframe src="background-repeat.html"></iframe>
<h2>repeat-x</h2>
<iframe src="background-repeat-x.html"></iframe>
</div>
<div class=float>
<h2>no-repeat</h2>
<iframe src="background-no-repeat.html"></iframe>
<h2>repeat-y</h2>
<iframe src="background-repeat-y.html"></iframe>
</div>
</div>
<h1>One-Value Element Background</h1>
<div style="overflow: hidden">
<div class=float>
<h2>repeat</h2>
<div class=background style="background-repeat: repeat"></div>
<h2>repeat-x</h2>
<div class=background style="background-repeat: repeat-x"></div>
</div>
<div class=float>
<h2>no-repeat</h2>
<div class=background style="background-repeat: no-repeat"></div>
<h2>repeat-y</h2>
<div class=background style="background-repeat: repeat-y"></div>
</div>
</div>
<h1>Two-Value Element Background</h1>
<div style="overflow: hidden">
<div class=float>
<h2>repeat repeat</h2>
<div class=background style="background-repeat: repeat repeat"></div>
<h2>repeat no-repeat</h2>
<div class=background style="background-repeat: repeat no-repeat"></div>
</div>
<div class=float>
<h2>no-repeat no-repeat</h2>
<div class=background style="background-repeat: no-repeat no-repeat"></div>
<h2>no-repeat repeat</h2>
<div class=background style="background-repeat: no-repeat repeat"></div>
</div>
</div>
</body>

6
Base/res/html/misc/background-repeat-x.html
View file

@ -1,6 +0,0 @@
<style>
body {
background: white url("background-repeat.png") repeat-x;
}
</style>
<body></body>

6
Base/res/html/misc/background-repeat-y.html
View file

@ -1,6 +0,0 @@
<style>
body {
background: white url("background-repeat.png") repeat-y;
}
</style>
<body></body>

6
Base/res/html/misc/background-repeat.html
View file

@ -1,6 +0,0 @@
<style>
body {
background: white url("background-repeat.png") repeat;
}
</style>
<body></body>

BIN
Base/res/html/misc/background-repeat.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 410 B

228
Base/res/html/misc/backgrounds.html
View file

@ -1,228 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>CSS Background Tests</title>
<style>
.example {
width: 45%;
display: inline-block;
}
.box {
width: 180px;
height: 160px;
border: 1px solid black;
padding: 5px 10px 15px 20px;
overflow: auto;
}
.force-scroll {
width: 500px;
height: 500px;
}
code {
display: block;
}
</style>
</head>
<body>
<h1>CSS Background Tests</h1>
<p>These are in no way exhaustive, but they cover a variety of different features.</p>
<p>The left and right columns should look identical - left uses a single background shorthand, and right uses separate properties.</p>
<h2>Attachment</h2>
<h3>Should remain motionless relative to the browser window</h3>
<div class="example">
<code>background: url('background-repeat.png') fixed</code>
<div class="box" style="background: url('background-repeat.png') fixed">
<div class="force-scroll"></div>
</div>
</div>
<div class="example">
<code>
background-image: url('background-repeat.png');<br/>
background-attachment: fixed;
</code>
<div class="box" style="background-image: url('background-repeat.png'); background-attachment: fixed;">
<div class="force-scroll"></div>
</div>
</div>
<h3>Should scroll with box content</h3>
<div class="example">
<code>background: url('background-repeat.png') local</code>
<div class="box" style="background: url('background-repeat.png') local">
<div class="force-scroll"></div>
</div>
</div>
<div class="example">
<code>
background-image: url('background-repeat.png');<br/>
background-attachment: local;
</code>
<div class="box" style="background-image: url('background-repeat.png'); background-attachment: local">
<div class="force-scroll"></div>
</div>
</div>
<h3>Should remain motionless relative to the box</h3>
<div class="example">
<code>background: url('background-repeat.png') scroll</code>
<div class="box" style="background: url('background-repeat.png') scroll">
<div class="force-scroll"></div>
</div>
</div>
<div class="example">
<code>
background-image: url('background-repeat.png');<br/>
background-attachment: scroll;
</code>
<div class="box" style="background-image: url('background-repeat.png'); background-attachment: scroll">
<div class="force-scroll"></div>
</div>
</div>
<h2>Position</h2>
<div class="example">
<code>background: url('background-repeat.png') bottom 5% right 10px no-repeat</code>
<div class="box" style="background: url('background-repeat.png') bottom 5% right 10px no-repeat"></div>
</div>
<div class="example">
<code>
background-image: url('background-repeat.png');<br/>
background-position: bottom 5% right 10px no;<br/>
background-repeat: no-repeat;
</code>
<div class="box" style="background-image: url('background-repeat.png'); background-position: bottom 5% right 10px; background-repeat: no-repeat"></div>
</div>
<h2>Clip and Origin</h2>
<h3>Images should fill the content-box, with padding on each side. (5px, 10px, 15px, 20px) and aligned so their top-left corner will be at the top-left of the box. This produces clipping.</h3>
<div class="example">
<code>background: url('background-repeat.png') yellow padding-box content-box</code>
<div class="box" style="background: url('background-repeat.png') yellow padding-box content-box"></div>
</div>
<div class="example">
<code>
background-image: url('background-repeat.png');<br/>
background-color: yellow;<br/>
background-origin: padding-box;<br/>
background-clip: content-box;
</code>
<div class="box" style="background-image: url('background-repeat.png'); background-color: yellow; background-origin: padding-box; background-clip: content-box"></div>
</div>
<h2>Size</h2>
<h3>Image should be stretched as large as the box, without distorting or clipping</h3>
<div class="example">
<code>background: url('background-repeat.png') center / contain</code>
<div class="box" style="background: url('background-repeat.png') center / contain"></div>
</div>
<div class="example">
<code>
background-image: url('background-repeat.png');<br/>
background-position: center;<br/>
background-size: contain;
</code>
<div class="box" style="background-image: url('background-repeat.png'); background-position: center; background-size: contain"></div>
</div>
<h3>Image should be stretched so that the whole box is covered, without distorting</h3>
<div class="example">
<code>background: url('background-repeat.png') center / cover</code>
<div class="box" style="background: url('background-repeat.png') center / cover"></div>
</div>
<div class="example">
<code>
background-image: url('background-repeat.png');
background-position: center;
background-size: cover;
</code>
<div class="box" style="background-image: url('background-repeat.png'); background-position: center; background-size: cover"></div>
</div>
<h3>Images should be squashed and repeated</h3>
<div class="example">
<code>background: url('background-repeat.png') top / 50% 25px</code>
<div class="box" style="background: url('background-repeat.png') top / 50% 25px"></div>
</div>
<div class="example">
<code>
background-image: url('background-repeat.png');
background-position: top;
background-size: 50% 25px;
</code>
<div class="box" style="background-image: url('background-repeat.png'); background-position: top; background-size: 50% 25px"></div>
</div>
<h2>Repeat</h2>
<p>See <a href="background-repeat-test.html">here</a> for in-depth background-repeat tests.</p>
<h3>Images should all be whole, and be spaced apart to fill the box</h3>
<div class="example">
<code>background: url('background-repeat.png') space</code>
<div class="box" style="background: url('background-repeat.png') space"></div>
</div>
<div class="example">
<code>
background-image: url('background-repeat.png');
background-repeat: space;
</code>
<div class="box" style="background-image: url('background-repeat.png'); background-repeat: space"></div>
</div>
<h3>Images should all be whole, and be distorted to fill the box</h3>
<div class="example">
<code>background: url('background-repeat.png') round</code>
<div class="box" style="background: url('background-repeat.png') round"></div>
</div>
<div class="example">
<code>
background-image: url('background-repeat.png');<br/>
background-repeat: round;
</code>
<div class="box" style="background-image: url('background-repeat.png'); background-repeat: round"></div>
</div>
<h3>Images should all be whole, and be shrunk and spaced to fill the box</h3>
<div class="example">
<code>background: url('background-repeat.png') space round</code>
<div class="box" style="background: url('background-repeat.png') space round"></div>
</div>
<div class="example">
<code>
background-image: url('background-repeat.png');<br/>
background-repeat: space round;
</code>
<div class="box" style="background-image: url('background-repeat.png'); background-repeat: space round"></div>
</div>
<h2>Multiple backgrounds</h2>
<h3>Should have one smiley face in each corner and one in the center</h3>
<div class="example">
<code>
background: url('background-repeat.png') no-repeat top 5px left 5px,<br/>
url('background-repeat.png') no-repeat top 5px right 5px,<br/>
url('background-repeat.png') no-repeat bottom 5px left 5px,<br/>
url('background-repeat.png') no-repeat bottom 5px right 5px,<br/>
url('background-repeat.png') no-repeat center cyan;
</code>
<div class="box" style="background: url('background-repeat.png') no-repeat top 5px left 5px, url('background-repeat.png') no-repeat top 5px right 5px, url('background-repeat.png') no-repeat bottom 5px left 5px, url('background-repeat.png') no-repeat bottom 5px right 5px, url('background-repeat.png') no-repeat center cyan"></div>
</div>
<div class="example">
<code>
background-color: cyan;<br/>
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;<br/>
background-position: top 5px left 5px, top 5px right 5px, bottom 5px left 5px, bottom 5px right 5px, center;<br/>
background-image: url('background-repeat.png'), url('background-repeat.png'), url('background-repeat.png'), url('background-repeat.png'), url('background-repeat.png');
</code>
<div class="box" style="background-color: cyan;
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
background-position: top 5px left 5px, top 5px right 5px, bottom 5px left 5px, bottom 5px right 5px, center;
background-image: url('background-repeat.png'), url('background-repeat.png'), url('background-repeat.png'), url('background-repeat.png'), url('background-repeat.png');"></div>
</div>
</body>
</html>

7
Base/res/html/misc/blank-no-doctype.html
View file

@ -1,7 +0,0 @@
<html>
<head>
<title>Blank</title>
</head>
<body>
</body>
</html>

8
Base/res/html/misc/blank.html
View file

@ -1,8 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>Blank</title>
</head>
<body>
</body>
</html>

5
Base/res/html/misc/blink.html
View file

@ -1,5 +0,0 @@
<html>
<body>
<blink>Hello friends!</blink>
</body>
</html>

470
Base/res/html/misc/border-radius.html
View file

@ -1,470 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 50px;
height: 50px;
}
.box-1 {
border: 1px solid black;
border-radius: 10px;
}
.box-1-1 {
border: 1px solid black;
border-radius: 5px 10px 15px 20px;
}
.box-1-5 {
border: 1px solid black;
border-radius: 20px;
}
.box-1-6 {
border: 1px solid black;
border-top-width: 1px;
border-right-width: 5px;
border-bottom-width: 10px;
border-left-width: 12px;
border-radius: 20px;
}
.box-2 {
border: 1px solid black;
border-top-left-radius: 10px;
}
.box-1-7 {
border: 5px solid black;
border-radius: 15px;
}
.box-1-8 {
border: 20px solid black;
border-radius: 10px;
}
.box-1-9 {
border: 20px inset black;
border-radius: 10px;
}
.box-1-10 {
border: 20px outset black;
border-radius: 10px;
}
.box-1-11 {
border-top: 20px solid black;
border-radius: 10px;
}
.box-1-12 {
border-radius: 20px;
border-top: 5px solid red;
border-right: 10px solid yellow;
border-bottom: 15px solid lime;
border-left: 20px solid blue;
}
.box-1-13 {
border-radius: 15px;
border-color: black;
border: 3px solid black;
border-top-width: 0;
border-bottom-width: 0;
}
.box-1-14 {
border-radius: 15px;
border-color: black;
border: 3px solid black;
border-left-width: 0;
border-right-width: 0;
}
.box-3 {
border: 1px solid black;
border-top-right-radius: 10px;
}
.box-4 {
border: 1px solid black;
border-bottom-right-radius: 10px;
}
.box-5 {
border: 1px solid black;
border-bottom-left-radius: 10px;
}
.box-6 {
width: 200px;
height: 200px;
border: 1px solid black;
border-radius: 75px;
}
.box-7 {
background-color: magenta;
border-radius: 10px;
}
.box-7-1 {
width: 200px;
height: 200px;
background-color: magenta;
border-radius: 25px 50px 75px 100px;
}
.box-7-2 {
width: 200px;
height: 200px;
background-color: magenta;
border-radius: 100px 75px 50px 25px;
}
.box-8 {
background-color: magenta;
border-radius: 20px;
}
.box-9 {
background-color: magenta;
border-radius: 15px;
}
.box-10 {
background-color: magenta;
border-top-left-radius: 10px;
}
.box-11 {
background-color: magenta;
border-top-right-radius: 10px;
}
.box-12 {
background-color: magenta;
border-bottom-right-radius: 10px;
}
.box-13 {
background-color: magenta;
border-bottom-left-radius: 10px;
}
.box-14 {
background-color: lime;
border: 1px solid black;
border-radius: 500px;
}
.box-15 {
background-color: red;
border: 1px solid black;
border-radius: 500px;
}
.rect {
width: 300px;
height: 100px;
background-color: red;
}
.rect-1 {
border-radius: 50%;
}
.rect-2 {
border-radius: 50% 20% / 10% 40%;
width: 280px;
height: 215px;
background-color: #5b6dcd;
}
.rect-3 {
border-top-left-radius: 50%;
}
.rect-4 {
border-top-right-radius: 50%;
}
.rect-5 {
border-bottom-left-radius: 50%;
}
.rect-6 {
border-bottom-right-radius: 50%;
}
.rect-7 {
border-radius: 10px 100px / 120px;
width: 200px;
height: 100px;
border: 1px solid black;
background-color: transparent;
}
.nut {
width: 220px;
height: 180px;
background-size: 220px 180px;
border-radius: 70% 30% 30% 70% / 60% 40% 60% 40%;
background-image: url('old-computer.png');
}
.screenshot {
width: 100px;
height: 100px;
border-radius: 50%;
background-image: url("serenity-screenshot.png");
}
.rounded-image {
background-image: url("90s-bg.png");
background-repeat: repeat;
border-radius: 20px;
width: 150px;
height: 100px;
}
.solid-color {
background: red content-box;
}
.image {
background: center / contain url(car.png) content-box;
}
.image-layers {
background: center / contain url(car.png) content-box, center / contain url(old-computer.png);
}
.box-background-clip {
width: 100px;
height: 100px;
border: 10px solid black;
border-radius: 50px;
padding: 10px;
}
.positioned {
background-color: red;
position: relative;
}
</style>
</head>
<body>
<h3>Border-radius</h3>
<p>The boxes are 50x50px and have a background-color</p>
<em>All round 10px</em>
<div class="box box-7"></div>
<br>
<em>All round 25,50,75,100px</em>
<div class="box box-7-1"></div>
<br>
<em>All round 100,75,50,25px</em>
<div class="box box-7-2"></div>
<br>
<em>All round 20px</em>
<div class="box box-8"></div>
<br>
<em>All round 15px 5px thick</em>
<div class="box box-9"></div>
<br>
<em>top-left 10px</em>
<div class="box box-10"></div>
<br>
<em>top-right 10px</em>
<div class="box box-11"></div>
<br>
<em>bottom-right 10px</em>
<div class="box box-12"></div>
<br>
<em>bottom-left 10px</em>
<div class="box box-13"></div>
<br>
<br>
<p>These boxes have elliptical borders</p>
<em>All round 50%</em>
<div class="rect rect-1"></div>
<br>
<em>All round -- MDN example</em>
<div class="rect rect-2"></div>
<br>
<em>top-left 50%</em>
<div class="rect rect-3"></div>
<br>
<em>top-right 50%</em>
<div class="rect rect-4"></div>
<br>
<em>bottom-left 50%</em>
<div class="rect rect-5"></div>
<br>
<em>bottom-right 50%</em>
<div class="rect rect-6"></div>
<br>
<em>All round -- MDN example 2 -- outline</em>
<div class="rect rect-7"></div>
<br>
<br>
<p>These boxes have (rectangular) background images, that are clipped by the border radius</p>
<em>In a nutshell</em>
<div class="nut"></div>
<br>
<em>In a circle</em>
<div class="screenshot"></div>
<br>
<em>Rounded</em>
<div class="rounded-image"></div>
<br>
<br>
<p>This is an <code>&lt;img&gt;</code> tag with a border radius</p>
<img src="old-computer.png" style="border-radius: 20px; width: 200px">
<br>
<br>
<p>These use a border-radius + a background clip (the radius of the inner background should shrink)</p>
<em>Solid color</em>
<div class="box-background-clip solid-color"></div>
<br>
<em>Background image</em>
<div class="box-background-clip image"></div>
<br>
<em>Background image layers</em>
<div class="box-background-clip image-layers"></div>
<br>
<br>
<p>The all have a border-radius +/- overflow: hidden, which clips their child elements<p>
<em>Lorem ipsum, <b>without</b> overflow: hidden</em>
<div style="width: 200px; height: 200px; border-radius: 30%; background-color: brown">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
</div>
<br>
<em>Lorem ipsum, <b>with</b> overflow: hidden</em>
<div style="width: 200px; height: 200px; border-radius: 30%; background-color: brown; overflow: hidden;">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
</div>
<br>
<em>An image inside a inline-block <code>&lt;a&gt;</code> tag, with a border-radius of 50% and overflow: hidden</em>
<br>
(this is commonly used for avatars and occurs GitHub a few times)
<br>
<a style="display: inline-block; border-radius: 50%; overflow: hidden; width: 100px; height: 100px;">
<img src="car.png" style="width: 100px; height: 100px">
</a>
<br>
<em>A red div with position: relative within a parent with overflow: hidden + a border-radius</em><br>
<div class="box" style="border-radius: 10px; overflow: hidden;">
<div class="box positioned"></div>
</div>
<br>
<em>A blue (background) div within a parent with overflow: hidden + a border-radius</em><br>
<div class="box" style="border-radius: 10px; overflow: hidden;">
<div class="box" style="background-color: blue;"></div>
</div>
<br>
<br>
<p>All these are non-conventional elements with a border-radius :^)<p>
<em>iframe to the welcome page</em>
<br>
<iframe style="border-radius: 50%; border: none; width: 300px; height: 200px;" src="welcome.html"></iframe>
<br>
<em>Fun canvas demo</em>
<br>
<canvas id="fun-canvas" style="border-radius: 30%;" width="200" height="200"></canvas>
<script src="fun-canvas.js"></script>
<script>
makeFunCanvas("fun-canvas")
</script>
<br/>
<br/>
<p>These test the inner border-radius shrinking to accommodate the border</p>
<em>An <code>&lt;img&gt;</code> tag with a border-radius and a border</em>
<br>
<img src="car.png" style="border-radius: 100%; border: 10px solid limegreen;">
<br/>
<em>Clipping text overflow with a border-radius and a border</em>
<div style="width: 100px; height: 100px; border-radius: 30%; background-color: cyan; overflow: hidden; border: 20px solid salmon;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<br/>
<br/>
<p>The boxes are 50x50px</p>
<em>All round 10px</em>
<div class="box box-1"></div>
<br>
<em>All round 5,10,15,20px</em>
<div class="box box-1-1"></div>
<br>
<em>All round 20px</em>
<div class="box box-1-5"></div>
<br>
<em>All round 20px, border widths 1px 5px 10px 12px</em>
<div class="box box-1-6"></div>
<br>
<em>All round 15px 5px thick</em>
<div class="box box-1-7"></div>
<br>
<em>All round 10px 20px thick</em>
<div class="box box-1-8"></div>
<br>
<em>All round 10px 20px thick inset</em>
<div class="box box-1-9"></div>
<br>
<em>All round 10px 20px thick outset</em>
<div class="box box-1-10"></div>
<br>
<em>Single border with minor radius</em>
<div class="box box-1-11"></div>
<br>
<em>Four border with different colors</em>
<div class="box box-1-12"></div>
<br>
<em>Border radius with top and bottom zero width</em>
<div class="box box-1-13"></div>
<br>
<em>Border radius with left and right zero width</em>
<div class="box box-1-14"></div>
<br>
<em>top-left 10px</em>
<div class="box box-2"></div>
<br>
<em>top-right 10px</em>
<div class="box box-3"></div>
<br>
<em>bottom-right 10px</em>
<div class="box box-4"></div>
<br>
<em>bottom-left 10px</em>
<div class="box box-5"></div>
<br>
<br>
<p>200px box, 75px radius</p>
<div class="box box-6"></div>
<br>
<br>
<p>Test truncation:</p>
<em>Box is 50x50, border-radius is 500px</em>
<div class="box box-14"></div>
<div class="box box-15"></div>
<br>
<br>
</body>
</html>

171
Base/res/html/misc/borders.html
View file

@ -1,171 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS borders lookin' good</title>
<style>
div + div {
margin-top: 20px;
}
#foo {
border-top-color: red;
border-right-color: lime;
border-bottom-color: blue;
border-left-color: yellow;
border-top-width: 40px;
border-right-width: 30px;
border-bottom-width: 20px;
border-left-width: 10px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
}
#bar {
border: 30px solid orange;
}
#bene {
border: solid;
}
#salvete {
border: 30px;
border-color: grey;
border-style: solid;
}
#amici {
border: aquamarine;
border-width: 30px;
border-style: solid;
}
#resetting {
border: 100px;
border: orange;
border: solid;
}
#three-px-solid-blue-separate {
border-width: 3px;
border-style: solid;
border-color: blue;
}
#three-px-solid-blue {
border: 3px solid blue;
}
#foo-but-actually-reset {
border-top-color: red;
border-right-color: lime;
border-bottom-color: blue;
border-left-color: yellow;
border-top-width: 40px;
border-right-width: 30px;
border-bottom-width: 20px;
border-left-width: 10px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border: solid;
}
#double-width {
border: 50px 100px solid red;
}
#double-style {
border: 50px solid dotted red;
}
#double-color {
border: 50px solid red blue;
}
#double-width-solo {
border: 50px 100px;
}
#double-style-solo {
border: solid dotted;
}
#double-color-solo {
border: red blue;
}
#dotted-1px {
border: 1px dotted blue;
}
#dotted-5px {
border: 5px dotted blue;
}
#dotted-20px {
border: 20px dotted blue;
}
#dashed-1px {
border: 1px dashed blue;
}
#dashed-5px {
border: 5px dashed blue;
}
#dashed-20px {
border: 20px dashed blue;
}
#mixed {
border-top-width: 20px;
border-top-style: dashed;
border-top-color: red;
border-left-width: 5px;
border-left-style: solid;
border-left-color: blue;
border-bottom-width: 10px;
border-bottom-style: dotted;
border-bottom-color: lime;
border-right-width: 10px;
border-right-style: inset;
}
#two-part-border-attributes {
height: 50px;
border-color: red lime;
border-width: 8px 6px;
border-style: solid dashed;
}
#three-part-border-attributes {
height: 50px;
border-color: red lime blue;
border-width: 8px 6px 4px;
border-style: solid dashed dotted;
}
#four-part-border-attributes {
height: 50px;
border-color: red lime blue orange;
border-width: 8px 6px 4px 2px;
border-style: solid dashed dotted dotted;
}
</style>
</head>
<body>
<div id="foo">One day at a time!</div>
<div id="bar">Another day at another time!</div>
<div id="bene">bene</div>
<div id="salvete">salvete</div>
<div id="amici">amici</div>
<div id="resetting">resetting</div>
<div id="three-px-solid-blue-separate">three px solid blue separate</div>
<div id="three-px-solid-blue">three px solid blue</div>
<div id="foo-but-actually-reset">foo but actually reset</div>
<div id="double-width">double width</div>
<div id="double-style">double style</div>
<div id="double-color">double color</div>
<div id="double-width-solo">double width solo</div>
<div id="double-style-solo">double style solo</div>
<div id="double-color-solo">double color solo</div>
<div id="dotted-1px">dotted (1px)</div>
<div id="dotted-5px">dotted (5px)</div>
<div id="dotted-20px">dotted (20px)</div>
<div id="dashed-1px">dashed (1px)</div>
<div id="dashed-5px">dashed (5px)</div>
<div id="dashed-20px">dashed (20px)</div>
<div id="mixed">mixed</div>
<div id="two-part-border-attributes">two-part border attributes</div>
<div id="three-part-border-attributes">three-part border attributes</div>
<div id="four-part-border-attributes">four-part border attributes</div>
</body>
</html>

80
Base/res/html/misc/box-shadow.html
View file

@ -1,80 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>Box-Shadow</title>
<style>
.box {
border: 1px solid black;
height: 100px;
width: 100px;
margin: 50px;
}
#no-bg {
width: 50%;
float: left;
}
#with-bg {
width: 50%;
float: right;
background-image: url("car.png");
color: rgb(255, 255, 255);
}
.cmy {
box-shadow: 20px 10px 5px magenta, cyan -20px -10px 5px, yellow 10px -5px 5px 20px;
}
</style>
</head>
<body>
<div id="mask"></div>
<h1>Box-shadow Tests</h1>
<div id="no-bg">
<h2>Border radius 50%</h2>
<div class="box cmy" style="border-radius: 50%;">
<p>box-shadow: 20px 10px 5px magenta, cyan -20px -10px 5px, yellow 10px -5px 5px 20px</p>
</div>
<h2>Border radius: Egg</h2>
<div class="box cmy" style="border-radius: 80% 15% 55% 50% / 55% 15% 80% 50%;">
<p>box-shadow: 20px 10px 5px magenta, cyan -20px -10px 5px, yellow 10px -5px 5px 20px</p>
</div>
<br>
<h2>Border radius 20px</h2>
<div class="box cmy" style="border-radius: 20px;">
<p>box-shadow: 20px 10px 5px magenta, cyan -20px -10px 5px, yellow 10px -5px 5px 20px</p>
</div>
<br>
<div class="box" style="box-shadow: magenta -40px -20px; border-radius: 30%;">
<p>box-shadow: magenta -40px -20px</p>
</div>
<br>
<h2>No border radius</h2>
<div class="box cmy">
<p>box-shadow: 20px 10px 5px magenta, cyan -20px -10px 5px, yellow 10px -5px 5px 20px</p>
</div>
<br>
<div class="box" style="box-shadow: 20px 10px 5px magenta">
<p>box-shadow: 20px 10px 5px magenta</p>
</div>
<div class="box" style="box-shadow: 20px 10px magenta">
<p>box-shadow: 20px 10px magenta</p>
</div>
<div class="box" style="box-shadow: magenta -40px -20px">
<p>box-shadow: magenta -40px -20px</p>
</div>
<div class="box" style="box-shadow: 20px 10px rgba(255,0,255,0.5)">
<p>box-shadow: 20px 10px rgba(255,0,255,0.5)</p>
</div>
<div class="box" style="box-shadow: -40px -20px rgba(255,0,255,0.5)">
<p>box-shadow: -40px -20px rgba(255,0,255,0.5)</p>
</div>
</div>
<div id="with-bg"></div>
<script>
const noBg = document.getElementById("no-bg");
const withBg = document.getElementById("with-bg");
withBg.append(...[...noBg.childNodes].map(node => node.cloneNode(true)));
</script>
</body>
</html>

14
Base/res/html/misc/br.html
View file

@ -1,14 +0,0 @@
<html>
<head><title>BR element test</title></head>
<body>
Hello world<br>
This is<br><br>
a test page<br>
for<br>
the<br>
<br>
BR element!
<br><br><br><br>
Does it work?
</body>
</html>

24
Base/res/html/misc/button.html
View file

@ -1,24 +0,0 @@
<body>
<br />
<input type=button id=button1 name=hp value="Option 1">
<label for=button1>Press Me!</label>
<br />
<input type=button id=button2 name=hp value="Option 2">
<label for=button2>No, Press Me!</label>
<br />
<input type=button id=button3 name=hp value="Option 3" disabled>
<label for=button3>You'll never get this!</label>
<br />
<div style="display: inline-block;">
<pre>Last pressed: <span id=last></span></pre>
</div>
<script>
document.getElementById('button1').addEventListener('click', function() {
document.getElementById('last').innerHTML = this.value;
});
document.getElementById('button2').addEventListener('click', function() {
document.getElementById('last').innerHTML = this.value;
});
</script>
</body>

83
Base/res/html/misc/calc.html
View file

@ -1,83 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>Calc</title>
<style>
.container {
border: 1px solid pink;
width: 250px;
}
.box {
border: 1px solid black;
height: 100px;
}
</style>
</head>
<body>
<h1>CSS calc() Tests</h1>
<p>The boxes change their width property.</p>
<p>calc(100px)</p>
<div class="container">
<div class="box" style="width: calc(100px);"></div>
</div>
<p>calc(100px + 30% - (2rem * 3 + 20px))</p>
<div class="container">
<div class="box" style="width: calc(100px + 30% - (2rem * 3 + 20px));"></div>
</div>
<p>calc(100px + 30% - (120px / (2*4 + 3 )))</p>
<div class="container">
<div class="box" style="width: calc(100px + 30% - (120px / (2*4 + 3 )));"></div>
</div>
<p>calc(100px + 30% - calc(120px / calc(2*4 + 3 )))</p>
<div class="container">
<div class="box" style="width: calc(100px + 30% - calc(120px / calc(2*4 + 3 )));"></div>
</div>
<p>calc(50% + 60px)</p>
<div class="container">
<div class="box" style="width: calc(50% + 60px);"></div>
</div>
<p>calc(50% - 60px)</p>
<div class="container">
<div class="box" style="width: calc(50% - 60px);"></div>
</div>
<p>calc(50% + -60px)</p>
<div class="container">
<div class="box" style="width: calc(50% + -60px);"></div>
</div>
<p>calc(50% + 50px - 10px)</p>
<div class="container">
<div class="box" style="width: calc(50% + 50px - 10px);"></div>
</div>
<p>calc(50% + 3*20px)</p>
<div class="container">
<div class="box" style="width: calc(50% + 3*20px);"></div>
</div>
<p>calc(50% + 3 * 20px)</p>
<div class="container">
<div class="box" style="width: calc(50% + 3 * 20px);"></div>
</div>
<p>calc(50% + 10.5pt)</p>
<div class="container">
<div class="box" style="width: calc(50% + 10.5pt);"></div>
</div>
<p>calc(50% + .5pt)</p>
<div class="container">
<div class="box" style="width: calc(50% + .5pt);"></div>
</div>
</body>
</html>

44
Base/res/html/misc/canvas-clip-path.html
View file

@ -1,44 +0,0 @@
<style>
canvas {
border: 1px solid black;
}
</style>
<!-- Examples taken from MDN -->
<b>(nonzero) path clipping:</b><br>
<canvas id="canvas1" width="200" height="160"></canvas>
<br>
<b>evenodd path clipping:</b><br>
<canvas id="canvas2" width="200" height="160"></canvas>
<script>
{
const canvas = document.getElementById("canvas1");
const ctx = canvas.getContext("2d");
// Create circular clipping region
ctx.beginPath();
ctx.arc(0/*FIMXE: Should be 100, but ctx.arc() is currently broken*/, 75, 50, 0, Math.PI * 2);
ctx.clip();
// Draw stuff that gets clipped
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "orange";
ctx.fillRect(0, 0, 100, 100);
}
</script>
<script>
{
const canvas = document.getElementById("canvas2");
const ctx = canvas.getContext("2d");
// Create clipping path
let region = new Path2D();
region.rect(80, 10, 20, 130);
region.rect(40, 50, 100, 50);
ctx.clip(region, "evenodd");
// Draw stuff that gets clipped
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
</script>

57
Base/res/html/misc/canvas-global-alpha.html
View file

@ -1,57 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>Canvas 2D global alpha test</title>
<style type="text/css">
body {
color: #fff;
}
canvas {
border-width: 1px;
border-style: solid;
border-color: #fff;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
ctx = document.getElementById("foo").getContext("2d");
image = new Image(100, 100);
image.onload = drawImage;
image.src = "car.png";
function drawImage() {
ctx.drawImage(image, 0, 0, 400, 400);
}
var width = 200;
var height = 100;
ctx.globalAlpha = 0.4;
ctx.font = "100px serif";
ctx.fillText("hello friends", 50, 90);
for (var i = 0; i < 2; i++)
{
ctx.globalAlpha = 0.5;
ctx.fillStyle = 'red';
ctx.fillRect(10, 10, width, height);
ctx.globalAlpha = 0.6;
ctx.strokeStyle = 'blue';
ctx.strokeRect(10, 10, width, height);
ctx.scale(0.5, 0.5);
ctx.translate(10 + width * 2, 10 + height * 2);
}
});
</script>
</head>
<body>
<canvas id="foo" width="1000" height="1000"></canvas>
</body>
</html>

186
Base/res/html/misc/canvas-gradients.html
View file

@ -1,186 +0,0 @@
<h1>Canvas Gradients</h1>
<h2>Radial Gradients</h2>
<em>MDN example</em><br>
<canvas id="mdnRadial" width="200" height="200"></canvas><br>
<em>Balls (transparent end stops)</em><br>
<canvas id = "balls"></canvas>
<h3>Interactive Radial Gradients (mouse over)</h3>
<hr>
<em>A radial gradient</em><br>
<canvas id="radialHell1" width="400" height="300"></canvas>
<br>
<hr>
<em>An inverted radial gradient (start circle larger than end circle)</em><br>
<canvas id="radialHell2" width="400" height="300"></canvas>
<h2>Conic Gradients</h2>
<canvas id="conic" width="200" height="200"></canvas>
<h2>Linear Gradients</h2>
<em>This time in a path to spice things up!</em><br>
<canvas id="linear" width="400" height="200"></canvas>
<script>
{
// MDN radial gradient example
const canvas = document.getElementById("mdnRadial");
const ctx = canvas.getContext("2d");
const gradient = ctx.createRadialGradient(110, 90, 30, 100, 100, 70);
gradient.addColorStop(0, "pink");
gradient.addColorStop(0.9, "white");
gradient.addColorStop(1, "green");
ctx.fillStyle = gradient;
ctx.fillRect(20, 20, 160, 160);
}
</script>
<script>
{
const canvas = document.getElementById('balls');
var ctx = canvas.getContext('2d');
const radgrad = ctx.createRadialGradient(45,45,10,52,50,30);
radgrad.addColorStop(0, '#A7D30C');
radgrad.addColorStop(0.9, '#019F62');
radgrad.addColorStop(1, 'rgba(1,159,98,0)');
const radgrad2 = ctx.createRadialGradient(105,105,20,112,120,50);
radgrad2.addColorStop(0, '#FF5F98');
radgrad2.addColorStop(0.75, '#FF0188');
radgrad2.addColorStop(1, 'rgba(255,1,136,0)');
const radgrad3 = ctx.createRadialGradient(95,15,15,102,20,40);
radgrad3.addColorStop(0, '#00C9FF');
radgrad3.addColorStop(0.8, '#00B5E2');
radgrad3.addColorStop(1, 'rgba(0,201,255,0)');
const radgrad4 = ctx.createRadialGradient(0,150,50,0,140,90);
radgrad4.addColorStop(0, '#F4F201');
radgrad4.addColorStop(0.8, '#E4C700');
radgrad4.addColorStop(1, 'rgba(228,199,0,0)');
ctx.fillStyle = radgrad4;
ctx.fillRect(0,0,150,150);
ctx.fillStyle = radgrad3;
ctx.fillRect(0,0,150,150);
ctx.fillStyle = radgrad2;
ctx.fillRect(0,0,150,150);
ctx.fillStyle = radgrad;
ctx.fillRect(0,0,150,150);
}
</script>
<script>
// Interactive radial gradients... The MacDue debugging experience live!
const makeMouseDemo = (canvasId, body) => {
const canvas = document.getElementById(canvasId);
const ctx = canvas.getContext("2d");
const mouse = { x: 0, y: 0 };
let lastMouse = mouse;
const mouseEvent = (e) => { mouse.x = e.offsetX; mouse.y = e.offsetY }
canvas.addEventListener("mousemove", mouseEvent);
body(canvas, ctx, canvas.width/2, canvas.height/2);
const loop = () => {
if (mouse.x != lastMouse.x || mouse.y != lastMouse.y)
body(canvas, ctx, mouse.x, mouse.y);
lastMouse = { ...mouse };
requestAnimationFrame(loop);
};
requestAnimationFrame(loop);
}
makeMouseDemo("radialHell1", (canvas, ctx, mX, mY) => {
var grd = ctx.createRadialGradient(mX, mY, 10, canvas.width/2, canvas.height/2, 100);
grd.addColorStop(0, "red");
grd.addColorStop(0.4, "purple");
grd.addColorStop(1, "cyan");
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = grd;
ctx.fillRect(0, 0, canvas.width, canvas.height);
})
makeMouseDemo("radialHell2", (canvas, ctx, mX, mY) => {
var grd = ctx.createRadialGradient(mX, mY, 100, canvas.width/2, canvas.height/2, 10);
grd.addColorStop(0, "pink");
grd.addColorStop(0.6, "blue");
grd.addColorStop(1, "orange");
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = grd;
ctx.fillRect(0, 0, canvas.width, canvas.height);
})
</script>
<script>
{
const canvas = document.getElementById("conic");
const ctx = canvas.getContext("2d");
const gradient = ctx.createConicGradient(0, 100, 100);
gradient.addColorStop(0, "red");
gradient.addColorStop(0.25, "orange");
gradient.addColorStop(0.5, "yellow");
gradient.addColorStop(0.75, "green");
gradient.addColorStop(1, "blue");
ctx.fillStyle = gradient;
ctx.fillRect(20, 20, 200, 200);
}
</script>
<script>
{
const canvas = document.getElementById("linear");
const ctx = canvas.getContext("2d");
const gradient = ctx.createLinearGradient(20, 20, 220, 120);
gradient.addColorStop(0,"red");
gradient.addColorStop(0.15,"yellow");
gradient.addColorStop(0.3,"green");
gradient.addColorStop(0.45,"aqua");
gradient.addColorStop(0.6,"blue");
gradient.addColorStop(0.7,"fuchsia");
gradient.addColorStop(1,"red");
ctx.fillStyle = gradient;
const gradient2 = ctx.createLinearGradient(200,0,400,50);
gradient2.addColorStop(0,"cyan");
gradient2.addColorStop(1,"fuchsia");
ctx.strokeStyle = gradient2;
const starPath = (cx, cy, spikes, outerRadius, innerRadius) => {
let x = cx;
let y = cy;
let rot = Math.PI / 2 * 3;
const step = Math.PI / spikes;
ctx.beginPath();
ctx.moveTo(cx, cy - outerRadius)
for (i = 0; i < spikes; i++) {
x = cx + Math.cos(rot) * outerRadius;
y = cy + Math.sin(rot) * outerRadius;
ctx.lineTo(x, y)
rot += step
x = cx + Math.cos(rot) * innerRadius;
y = cy + Math.sin(rot) * innerRadius;
ctx.lineTo(x, y)
rot += step
}
ctx.lineTo(cx, cy - outerRadius);
ctx.closePath();
}
starPath(canvas.width/4,canvas.height/2,5,100,60);
ctx.fill();
starPath(canvas.width/4 + 200 ,canvas.height/2,5,80,40);
ctx.lineWidth = 5;
ctx.stroke();
}
</script>

56
Base/res/html/misc/canvas-path-quadratic-curve.html
View file

@ -1,56 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>canvas path - quadratic curve example</title>
</head>
<body>
<canvas width=500 height=500></canvas>
<script>
function drawSomeCurves() {
var canvas = document.querySelector("canvas");
var ctx = canvas.getContext("2d");
var x = 150;
var y = 150;
canvas.addEventListener("mousedown", function(e) {
x = e.offsetX;
y = e.offsetY;
});
canvas.addEventListener("mousemove", function(e) {
ctx.beginPath();
ctx.fillStyle = 'white';
ctx.fillRect(0, 0, 500, 500);
ctx.strokeStyle = 'red';
ctx.lineWidth = 1;
ctx.fillRect(0, 0, 500, 500);
ctx.moveTo(0, 0);
ctx.quadraticCurveTo(e.offsetX, e.offsetY, x, y);
ctx.stroke();
ctx.moveTo(30, 90);
ctx.lineTo(110, 20);
ctx.lineTo(240, 130);
ctx.lineTo(60, 130);
ctx.lineTo(190, 20);
ctx.lineTo(270, 90);
ctx.closePath();
// Fill path
ctx.fillStyle = 'green';
ctx.fill('evenodd');
});
}
drawSomeCurves();
</script>
</body>
</html>

39
Base/res/html/misc/canvas-path-rect.html
View file

@ -1,39 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>canvas path - rect example</title>
</head>
<body>
<canvas width=500 height=500></canvas>
<script>
function drawRect() {
var canvas = document.querySelector("canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = 'black';
ctx.fillRect(0, 0, 500, 500);
ctx.fillStyle = 'red';
ctx.beginPath();
ctx.rect(10, 20, 150, 100);
ctx.fill();
ctx.fillStyle = 'yellow';
ctx.beginPath();
ctx.roundRect(50, 310, 100, 100, 25);
ctx.fill('evenodd');
ctx.fillStyle = 'green';
ctx.beginPath();
ctx.rect(200, 210, 100, 100);
ctx.fill('evenodd');
ctx.rotate(0.2);
ctx.fillStyle = 'orange';
ctx.beginPath();
ctx.roundRect(325, 300, 100, 100, [ { x: 5, y: 20 }, 10, { x: 15, y: 30 }, 20 ]);
ctx.fill('evenodd');
}
drawRect();
</script>
</body>
</html>

42
Base/res/html/misc/canvas-path.html
View file

@ -1,42 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>canvas path example</title>
</head>
<body>
<canvas width=300 height=300></canvas>
<script>
function drawHouse() {
var ctx = document.querySelector("canvas").getContext("2d");
ctx.fillStyle = 'black';
ctx.fillRect(0, 0, 300, 300);
ctx.fillStyle = 'white';
ctx.strokeStyle = 'red';
// Set line width
ctx.lineWidth = 10;
// Wall
ctx.strokeRect(75, 140, 150, 110);
// Door
ctx.fillRect(130, 190, 40, 60);
// Roof
ctx.beginPath();
ctx.moveTo(50, 140);
ctx.lineTo(150, 60);
ctx.lineTo(250, 140);
ctx.closePath();
ctx.stroke();
}
drawHouse();
</script>
</body>
</html>

40
Base/res/html/misc/canvas-path2d.html
View file

@ -1,40 +0,0 @@
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>Path2D test</title>
</head>
<body>
<h1>Path2D test</h1>
<p>These examples are taken from <a href="https://developer.mozilla.org/en-US/docs/Web/API/Path2D/Path2D">MDN</a>.</p>
<h2>Basic example</h2>
<p>Should be a square and a circle, both as outlines.</p>
<canvas id="canvas"></canvas>
<h2>SVG Path example</h2>
<p>Should display a filled black square.</p>
<canvas id="canvas-2"></canvas>
<script>
// Basic example
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
let path1 = new Path2D();
path1.rect(10, 10, 100,100);
let path2 = new Path2D(path1);
path2.moveTo(220, 60);
path2.arc(170, 60, 50, 0, 2 * Math.PI);
ctx.stroke(path2);
// SVG Path example
const canvas2 = document.getElementById('canvas-2');
const ctx2 = canvas2.getContext('2d');
let p = new Path2D('M10 10 h 80 v 80 h -80 Z');
ctx2.fill(p);
</script>
</body>
</html>

55
Base/res/html/misc/canvas-patterns.html
View file

@ -1,55 +0,0 @@
<h1>Canvas Patterns</h1>
<em>Canvas pattern: Repeat (heart)</em><br><code>ctx.createPattern(img, "repeat")</code><br>
<canvas id="canvas-0" width="230" height="210"></canvas><br><br>
<em>Canvas pattern: Repeat</em><br><code>ctx.createPattern(img, "repeat")</code><br>
<canvas id="canvas-1" width="400" height="300"></canvas><br><br>
<em>Canvas pattern: Repeat</em><br><code>ctx.createPattern(img, "repeat-x")</code><br>
<canvas id="canvas-2" width="400" height="300"></canvas><br><br>
<em>Canvas pattern: Repeat</em><br><code>ctx.createPattern(img, "repeat-y")</code><br>
<canvas id="canvas-3" width="400" height="300"></canvas><br><br>
<em>Canvas pattern: Repeat</em><br><code>ctx.createPattern(img, "no-repeat")</code><br>
<canvas id="canvas-4" width="400" height="300"></canvas>
<style>
canvas {
border: 1px solid black;
}
</style>
<script>
const img = new Image();
img.src = "car.png";
img.onload = () => {
const heartDemo = (canvasId) => {
const canvas = document.getElementById(canvasId);
const ctx = canvas.getContext("2d");
const pattern = ctx.createPattern(img, "repeat");
const scale = 1.5
const scaleValues = l =>l.map(value => value * scale);
ctx.fillStyle = pattern;
// Heart path taken from: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes
ctx.beginPath();
ctx.moveTo(...scaleValues([75, 40]));
ctx.bezierCurveTo(...scaleValues([75, 37, 70, 25, 50, 25]));
ctx.bezierCurveTo(...scaleValues([20, 25, 20, 62.5, 20, 62.5]));
ctx.bezierCurveTo(...scaleValues([20, 80, 40, 102, 75, 120]));
ctx.bezierCurveTo(...scaleValues([110, 102, 130, 80, 130, 62.5]));
ctx.bezierCurveTo(...scaleValues([130, 62.5, 130, 25, 100, 25]));
ctx.bezierCurveTo(...scaleValues([85, 25, 75, 37, 75, 40]));
ctx.fill();
}
const makePatternDemo = (canvasId, repeat) => {
const canvas = document.getElementById(canvasId);
const ctx = canvas.getContext("2d");
const pattern = ctx.createPattern(img, repeat);
ctx.fillStyle = pattern;
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
heartDemo("canvas-0")
makePatternDemo("canvas-1", "repeat");
makePatternDemo("canvas-2", "repeat-x");
makePatternDemo("canvas-3", "repeat-y");
makePatternDemo("canvas-4", "no-repeat");
};
</script>

12
Base/res/html/misc/canvas-rotate.html
View file

@ -1,12 +0,0 @@
<html>
<canvas id=c width=200 height=200></canvas>
<script>
c = document.getElementById('c');
x = c.getContext('2d');
x.strokeStyle = 'black';
for (i = 0; i < 8; ++i) {
x.strokeRect(50, 50, 50, 50);
x.rotate(0.05);
}
</script>
</html>

161
Base/res/html/misc/canvas-text.html
View file

@ -1,161 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas Text Examples</title>
</head>
<body>
<h1>Canvas Text Examples</h1>
<p><i>The red boxes are the measured text rects</i></p>
<em>Canvas font size</em><br>
<canvas id="canvas0" width="600" height="400" style="border: 1px solid black;"></canvas><br><br>
<script>
(function () {
const canvas = document.getElementById('canvas0');
const ctx = canvas.getContext('2d');
ctx.textBaseline = 'top';
ctx.textAlign = 'left';
ctx.strokeStyle = '#f00';
let y = 8;
for (let fontSize = 8; fontSize <= 64; fontSize += 8) {
ctx.font = `${fontSize}px sans-serif`;
const text = `Font size: ${fontSize}px`;
ctx.fillText(text, 8, y);
ctx.strokeRect(8, y, ctx.measureText(text).width, fontSize);
y += fontSize + 8;
}
})();
</script>
<em>Canvas font family</em><br>
<canvas id="canvas1" width="600" height="250" style="border: 1px solid black;"></canvas><br><br>
<script>
(function () {
const canvas = document.getElementById('canvas1');
const ctx = canvas.getContext('2d');
ctx.textBaseline = 'top';
ctx.textAlign = 'left';
ctx.strokeStyle = '#f00';
const families = ['monospace', 'serif', 'fantasy', 'sans-serif', 'cursive'];
let y = 8;
for (const family of families) {
ctx.font = `32px ${family}`;
const text = `Font family: ${family}`;
ctx.fillText(text, 8, y);
ctx.strokeRect(8, y, ctx.measureText(text).width, 32);
y += 32 + 8;
}
})();
</script>
<em>Canvas font weight</em><br>
<canvas id="canvas2" width="600" height="400" style="border: 1px solid black;"></canvas><br><br>
<script>
(function () {
const canvas = document.getElementById('canvas2');
const ctx = canvas.getContext('2d');
ctx.textBaseline = 'top';
ctx.textAlign = 'left';
ctx.strokeStyle = '#f00';
let y = 8;
for (let fontWeight = 100; fontWeight <= 900; fontWeight += 100) {
ctx.font = `${fontWeight} 32px sans-serif`;
const text = `Font weight: ${fontWeight}`;
ctx.fillText(text, 8, y);
ctx.strokeRect(8, y, ctx.measureText(text).width, 32);
y += 32 + 8;
}
})();
</script>
<em>Canvas font style</em><br>
<canvas id="canvas3" width="600" height="150" style="border: 1px solid black;"></canvas><br><br>
<script>
(function () {
const canvas = document.getElementById('canvas3');
const ctx = canvas.getContext('2d');
ctx.textBaseline = 'top';
ctx.textAlign = 'left';
ctx.strokeStyle = '#f00';
const styles = ['normal', 'italic', 'oblique'];
let y = 8;
for (const style of styles) {
ctx.font = `${style} 32px sans-serif`;
const text = `Font style: ${style}`;
ctx.fillText(text, 8, y);
ctx.strokeRect(8, y, ctx.measureText(text).width, 32);
y += 32 + 8;
}
})();
</script>
<em>Canvas text-align</em><br>
<canvas id="canvas4" style="border: 1px solid black;"></canvas><br><br>
<script>
(function () {
const canvas = document.getElementById('canvas4');
const ctx = canvas.getContext('2d');
ctx.strokeStyle = 'red';
ctx.beginPath();
ctx.moveTo(canvas.width / 2, 0);
ctx.lineTo(canvas.width / 2, canvas.height);
ctx.stroke();
ctx.font = '16px sans-serif';
ctx.textBaseline = 'top';
const alignments = ['left', 'center', 'right', 'start', 'end'];
let y = 8;
for (const alignment of alignments) {
ctx.textAlign = alignment;
ctx.fillText(`Text align: ${alignment}`, canvas.width / 2, y);
y += 16 + 8;
}
})();
</script>
<em>Canvas text-baseline</em><br>
<canvas id="canvas5" width="1000" style="border: 1px solid black;"></canvas><br><br>
<script>
(function () {
const canvas = document.getElementById('canvas5');
const ctx = canvas.getContext('2d');
ctx.strokeStyle = 'red';
ctx.beginPath();
ctx.moveTo(0, canvas.height / 2);
ctx.lineTo(canvas.width, canvas.height / 2);
ctx.stroke();
ctx.font = '12px sans-serif';
ctx.textAlign = 'left';
const baselines = ['top', 'hanging', 'middle', 'alphabetic', 'ideographic', 'bottom'];
let x = 8;
for (const baseline of baselines) {
ctx.textBaseline = baseline;
ctx.fillText(`Baseline: ${baseline}`, x, canvas.height / 2);
x += canvas.width / baselines.length;
}
})();
</script>
</body>
</html>

39
Base/res/html/misc/canvas.html
View file

@ -1,39 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>Canvas 2D test!</title>
<style type="text/css">
body {
background-color: #000;
color: #fff; /* another css comment */
}
canvas {
border-width: 1px;
border-style: solid;
border-color: #fff;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
ctx = document.getElementById("foo").getContext("2d");
var width = 200;
var height = 100;
for (var i = 0; i < 2; i++)
{
ctx.fillStyle = 'red';
ctx.fillRect(10, 10, width, height);
ctx.strokeStyle = 'blue';
ctx.strokeRect(10, 10, width, height);
ctx.scale(0.5, 0.5);
ctx.translate(10 + width * 2, 10 + height * 2);
}
});
</script>
</head>
<body link="#44f" vlink="#c4c" background="90s-bg.png">
<canvas id="foo" width="300" height="200"></canvas>
</body>
</html>

BIN
Base/res/html/misc/car.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 52 KiB

32
Base/res/html/misc/cascade-keywords.html
View file

@ -1,32 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Initial</title>
<style>
span {
background: lime;
}
.initial {
font-weight: initial;
}
.inherit {
font-weight: inherit;
}
.unset {
font-weight: unset;
}
</style>
</head>
<body>
<p>
This is some text. <b>This text is bold, <span class="initial">but this is not, since it's set to initial,</span> and this is bold again.</b>
</p>
<p>
This is some text. <b>This text is bold, <span class="inherit">and so is this, because it's set to inherit,</span> and this is bold again.</b>
</p>
<p>
This is some text. <b>This text is bold, <span class="unset">and so is this, because it's set to unset and font-weight is inherited,</span> and this is bold again.</b>
</p>
</body>
</html>

29
Base/res/html/misc/checkbox.html
View file

@ -1,29 +0,0 @@
<html>
<input id=foo type=checkbox>
<label for=foo>Checkbox 1 (with a "for" attribute)</label>
<pre id=foo-status></pre>
<label>
<input id=bar type=checkbox>
Checkbox 2 (inside a label element)
</label>
<pre id=bar-status></pre>
<script>
var foo = document.getElementById("foo");
var fooStatus = document.getElementById("foo-status");
fooStatus.innerHTML = `Checkbox 1: ${foo.checked}\n`;
var bar = document.getElementById("bar");
var barStatus = document.getElementById("bar-status");
barStatus.innerHTML = `Checkbox 2: ${bar.checked}\n`;
foo.addEventListener("change", function() {
fooStatus.innerHTML = `Checkbox 1: ${foo.checked}\n`;
});
bar.addEventListener("change", function() {
barStatus.innerHTML = `Checkbox 2: ${bar.checked}\n`;
});
</script>
</html>

243
Base/res/html/misc/class-list.html
View file

@ -1,243 +0,0 @@
<head>
<style>
.pass, .fail {
height: 30px;
line-height: 30px;
color: white;
display: block;
border: 1px solid black;
margin: 3px;
padding: 3px;
}
.pass { background-color: green; }
.fail { background-color: red; }
</style>
</head>
<body>
<div id=test0></div>
<div id=test1></div>
<div id=test2></div>
<script>
let test0 = document.getElementById('test0');
let test1 = document.getElementById('test1');
let test2 = document.getElementById('test2');
const bindMethodsForTest = (method) => {
let failures = 0;
const pass = (message) => {
if (failures > 0)
return;
const span = document.createElement('span');
span.innerHTML = `Pass! ${method}`;
span.setAttribute('class', 'pass');
document.body.appendChild(span);
test0.className = '';
test1.className = '';
test2.className = '';
};
const fail = (message) => {
const span = document.createElement('span');
span.innerHTML = `Fail! ${method}: ${message}`;
span.setAttribute('class', 'fail');
document.body.appendChild(span);
++failures;
};
const invalidTokenTest = () => {
const test = (args1, args2) => {
try {
test0.classList[method](...args1);
fail(`Expected classList.${method}(${args1}) to throw due to empty token`);
} catch (error) {
if (error.name !== 'SyntaxError')
fail(`Expected exception to be a DOMException of type SyntaxError but is "${error.name}"`);
}
try {
test0.classList[method](...args2);
fail(`Expected classList.${method}(${args2}) to throw due to token containing a space`);
} catch (error) {
if (error.name !== 'InvalidCharacterError')
fail(`Expected exception to be a DOMException of type InvalidCharacterError but is "${error.name}"`);
}
};
if (test0.classList[method].length === 2) {
test(['', 'foo'], ['foo bar', 'foobar']);
test(['foo', ''], ['foobar', 'foo bar']);
} else {
test([''], ['foo bar']);
}
};
return [pass, fail, invalidTokenTest];
};
(() => {
const [pass, fail] = bindMethodsForTest('contains');
test0.className = 'foo';
test1.className = 'foo bar';
if (!test0.classList.contains('foo'))
fail('test0 should contain class "foo"');
if (test0.classList.contains('bar'))
fail('test0 should not contain class "bar"');
if (!test1.classList.contains('foo'))
fail('test1 should contain class "foo"');
if (!test1.classList.contains('bar'))
fail('test1 should contain class "bar"');
pass();
})();
(() => {
const [pass, fail, invalidTokenTest] = bindMethodsForTest('add');
invalidTokenTest();
test0.classList.add('foo');
test1.classList.add('foo', 'bar');
test2.classList.add('foo', 'bar', 'foo');
if (test0.className !== 'foo')
fail(`test0 should have a class name of "foo" but has "${test0.className}"`)
if (test1.className !== 'foo bar')
fail(`test1 should have a class name of "foo bar" but has "${test1.className}"`)
if (test2.className !== 'foo bar')
fail(`test2 should have a class name of "foo bar" but has "${test2.className}"`)
pass();
})();
(() => {
const [pass, fail, invalidTokenTest] = bindMethodsForTest('remove');
invalidTokenTest();
test0.className = 'foo';
test1.className = 'foo bar';
test2.className = 'foo bar';
test0.classList.remove('foo');
test1.classList.remove('foo', 'bar');
test2.classList.remove('bar');
if (test0.className !== '')
fail(`test0 should have a class name of "" but has "${test0.className}"`)
if (test1.className !== '')
fail(`test1 should have a class name of "" but has "${test1.className}"`)
if (test2.className !== 'foo')
fail(`test2 should have a class name of "foo" but has "${test2.className}"`)
pass();
})();
(() => {
const [pass, fail, invalidTokenTest] = bindMethodsForTest('toggle');
invalidTokenTest();
if (!test0.classList.toggle('foo'))
fail('test0 should contain class "foo"');
if (!test0.classList.toggle('bar', true))
fail('test0 should contain class "bar"');
if (test0.classList.toggle('baz', false))
fail('test0 should not contain class "baz"');
if (test0.classList.toggle('foo'))
fail('test0 should not contain class "foo"');
if (!test0.classList.toggle('bar', true))
fail('test0 should contain class "bar"');
if (test0.classList.toggle('bar', false))
fail('test0 should not contain class "bar"');
pass();
})();
(() => {
const [pass, fail, invalidTokenTest] = bindMethodsForTest('replace');
invalidTokenTest();
if (test0.classList.replace('foo', 'bar'))
fail('test0 should not have contained class "bar"');
if (test0.className !== '')
fail(`test0 should have a class name of "" but has "${test0.className}"`)
test0.className = 'foo';
if (!test0.classList.replace('foo', 'bar'))
fail('test0 should have contained class "bar"');
if (test0.className !== 'bar')
fail(`test0 should have a class name of "bar" but has "${test0.className}"`)
test0.className = 'foo bar';
if (!test0.classList.replace('bar', 'baz'))
fail('test0 should have contained class "bar"');
if (test0.className !== 'foo baz')
fail(`test0 should have a class name of "foo baz" but has "${test0.className}"`)
test0.className = 'foo bar baz';
if (!test0.classList.replace('foo', 'baz'))
fail('test0 should have contained class "bar"');
if (test0.className !== 'baz bar')
fail(`test0 should have a class name of "baz bar" but has "${test0.className}"`)
test0.className = 'baz bar foo';
if (!test0.classList.replace('foo', 'baz'))
fail('test0 should have contained class "bar"');
if (test0.className !== 'baz bar')
fail(`test0 should have a class name of "baz bar" but has "${test0.className}"`)
test0.className = 'foo bar baz';
if (!test0.classList.replace('baz', 'baz'))
fail('test0 should have contained class "bar"');
if (test0.className !== 'foo bar baz')
fail(`test0 should have a class name of "foo bar baz" but has "${test0.className}"`)
pass();
})();
(() => {
const [pass, fail] = bindMethodsForTest('supports');
try {
test0.classList.supports('foo');
fail('Expected supports to throw due to no defined supported tokens');
} catch (error) {
if (error.name !== 'TypeError')
fail(`Expected exception to be a DOMException of type TypeError but is "${error.name}"`);
}
pass();
})();
(() => {
const [pass, fail] = bindMethodsForTest('value');
test0.classList.value = 'foo';
if (test0.className !== 'foo')
fail(`test0 should have a class name of "foo" but has "${test0.className}"`)
if (test0.classList.value !== 'foo')
fail(`test0 should have a class name of "foo" but has "${test0.className}"`)
test0.classList.value = 'foo bar';
if (test0.className !== 'foo bar')
fail(`test0 should have a class name of "foo bar" but has "${test0.className}"`)
if (test0.classList.value !== 'foo bar')
fail(`test0 should have a class name of "foo bar" but has "${test0.className}"`)
pass();
})();
</script>
</body>

64
Base/res/html/misc/clear-1.html
View file

@ -1,64 +0,0 @@
<style>
#lefty {
float: left;
background: red;
width: 100px;
height: 100px;
}
#righty {
float: right;
background: green;
width: 50px;
height: 50px;
}
#lefty2 {
float: left;
background: orange;
width: 80px;
height: 80px;
}
#righty2 {
float: right;
background: magenta;
width: 30px;
height: 30px;
}
#lefty3 {
float: left;
background: cyan;
width: 40px;
height: 40px;
}
#righty3 {
float: right;
background: silver;
width: 20px;
height: 20px;
}
#clearo {
clear: left;
}
</style>
</style>
<body>
<div>
<div id=lefty>L</div>
<div id=righty>R</div>
</div>
<div>
<div id=lefty2>L2</div>
<div id=righty2>R2</div>
</div>
<div>
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
<div id=clearo></div>
<div>
<div id=lefty3>L3</div>
<div id=righty3>R3</div>
</div>
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
</div>
</body>

57
Base/res/html/misc/clip.html
View file

@ -1,57 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>CSS Clip Test Page</title>
<style>
.box {
height: 100px;
width: 100px;
position: absolute;
background-color: aquamarine;
}
.separate-tests {
height: 125px;
border-width: 0px;
}
</style>
</head>
<body>
<h2>This is a normal rect with auto clipping</h2>
<div class="separate-tests">
<div class="box" style="clip: rect(auto, auto, auto, auto);"></div>
</div>
<h2>This is a div with the left side clipped out</h2>
<div class="separate-tests">
<div class="box" style="clip: rect(auto, auto, auto, 50px);"></div>
</div>
<h2>One can create a rect with or without commas and the clip works</h2>
<div class="separate-tests">
<div class="box" style="clip: rect(4em auto auto auto);"></div>
</div>
<h2>Text and borders are clipped too</h2>
<div class="separate-tests">
<div class="box" style="clip: rect(-5px auto auto 50px); border: 2px solid black;">
Lots of text Lots of text
Lots of text Lots of text
Lots of text Lots of text
Lots of text Lots of text
Lots of text Lots of text
</div>
</div>
<h2>:yakgone:</h2>
<div class="separate-tests">
<div class="box" style="clip: rect(0px 0px 0px 0px); border: 2px solid black;">
Lots of text Lots of text
Lots of text Lots of text
Lots of text Lots of text
Lots of text Lots of text
Lots of text Lots of text
</div>
</div>
</body>

39
Base/res/html/misc/colors.html
View file

@ -1,39 +0,0 @@
<html>
<head>
<title>CSS test</title>
<style type="text/css">
#a { background-color: lime; }
#b { background-color: #0F0; }
#c { background-color: #00ff00; }
#d { background-color: rgb(0, 255, 0); }
#e { background-color: rgb(0%, 100%, 0%); }
#e2 { background-color: rgb(-5%, 120%, -42%); }
#f { background-color: rgba(0, 255, 0, 1); }
#g { background-color: rgba(0%, 100%, 0%, 1); }
#h { background-color: hsl(120, 100%, 50%); }
#i { background-color: hsla(120, 100%, 50%, 1); }
#j { color: lime; background-color: currentColor; }
#k { background-color: rgba(0 255 0 / 100%); }
#l { background-color: rgba(0% 100% 0% / 1); }
#m { background-color: hsl(120 100% 50%); }
#n { background-color: hsla(120 100% 50% / 1); }
</style>
</head>
<body>
<div id="a">This is green, using a named color.</div>
<div id="b">This is green, using #0F0.</div>
<div id="c">This is green, using #00ff00.</div>
<div id="d">This is green, using rgb(0, 255, 0).</div>
<div id="e">This is green, using rgb(0%, 100%, 0%).</div>
<div id="e2">This is green, using rgb(-5%, 120%, -42%).</div>
<div id="f">This is green, using rgba(0, 255, 0, 1).</div>
<div id="g">This is green, using rgba(0%, 100%, 0%, 1).</div>
<div id="h">This is green, using hsl(120, 100%, 50%).</div>
<div id="i">This is green, using hsla(120, 100%, 50%, 1).</div>
<div id="j"><span style="color: black;">This is green, using currentcolor.</span></div>
<div id="k">This is green, using rgba(0 255 0 / 100%).</div>
<div id="l">This is green, using rgba(0% 100% 0% / 1).</div>
<div id="m">This is green, using hsl(120 100% 50%).</div>
<div id="n">This is green, using hsla(120 100% 50% / 1).</div>
</body>
</html>

71
Base/res/html/misc/computed-style.html
View file

@ -1,71 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<style>
#foo {
color: magenta;
}
#invisible {
display: none;
color: blue;
}
#visible {
display: block;
color: red;
}
p {
display: inherit;
opacity: 50%;
font-size: 90%;
background: white;
cursor: col-resize;
border-radius: 30px 1cm;
}
p#yak {
flex: content;
height: 60px;
left: -4%;
padding: 6cm;
margin: auto;
border: 5px solid blue;
}
</style>
</style>
</head>
<body>
<div id=foo>Some text</div>
<div id=bar style="color: green">Other text</div>
<div id=invisible>You cannot see me</div>
<div id=visible>You CAN see me</div>
<p id="yak">Lorem Yaksum dolor sit yakkety...</p>
<script>
// #foo
var foo = document.getElementById("foo");
var fooStyle = window.getComputedStyle(foo);
console.log(fooStyle.color);
// #bar
var bar = document.getElementById("bar");
var barStyle = bar.style;
console.log(barStyle.color);
// #invisible
var invisible = document.getElementById("invisible");
var invisibleStyle = getComputedStyle(invisible);
console.log(invisibleStyle.display)
console.log(invisibleStyle.color)
// #visible
var visible = document.getElementById("visible");
var visibleStyle = getComputedStyle(visible);
console.log(visibleStyle.display)
console.log(visibleStyle.color)
var yak = document.getElementById("yak");
var yakStyle = getComputedStyle(yak);
for (style of ['font-size', 'border', 'padding', 'margin', 'flex', 'height', 'left', 'cursor', 'display', 'background', 'opacity', 'border-radius']) {
console.log(style, yakStyle[style])
}
</script>
</body>
</html>

8
Base/res/html/misc/contenteditable.html
View file

@ -1,8 +0,0 @@
<html contenteditable>
<body>
<h1>Everything on this page should be editable.</h1>
<p>Here is a paragraph to play with.</p>
<p>Another paragraph with a <b>bold</b> element embedded in it.</p>
</body>
</html>

50
Base/res/html/misc/css-animations.html
View file

@ -1,50 +0,0 @@
<style>
.system {
position: absolute;
width: 100%;
height: 100%;
background: #000;
overflow: hidden;
}
.buggie {
position: absolute;
width: 50%;
height: 50%;
scale: 50%;
opacity: 0;
background: url(https://serenityos.org/buggie.png) no-repeat left center;
background-size: contain;
animation: buggie 10s cubic-bezier(0.1, -0.6, 0.2, -0.2) infinite;
}
.offset-0 { animation-delay: 0.9s; }
.offset-1 { animation-delay: 1.7s; }
.offset-2 { animation-delay: 3.5s; }
.offset-3 { animation-delay: 4.3s; }
.ladyball {
position: absolute;
width: 50%;
height: 50%;
background: url(https://upload.wikimedia.org/wikipedia/commons/thumb/b/b8/LadyBall-SerenityOS.png/240px-LadyBall-SerenityOS.png) no-repeat left center;
scale: 50%;
animation: ladyball 9s ease-in-out infinite;
}
@keyframes buggie {
0% { transform: translateX(0vw); opacity: 1; }
50% { transform: translateX(100vw); opacity: 1; }
100% { transform: translateX(0vw); opacity: 1; }
}
@keyframes ladyball {
0% { transform: translateX(0vw); }
50% { transform: translateX(100vw); }
100% { transform: translateX(0vw); }
}
</style>
<div class=system>
<div class="buggie offset-0"></div>
<div class="buggie offset-1"></div>
<div class="buggie offset-2"></div>
<div class="buggie offset-3"></div>
<div class="ladyball"></div>
</div>

1
Base/res/html/misc/css-import-1.css
View file

@ -1 +0,0 @@
p.first { background-color: lime; }

1
Base/res/html/misc/css-import-2.css
View file

@ -1 +0,0 @@
p.second { background-color: lime; }

1
Base/res/html/misc/css-import-3.css
View file

@ -1 +0,0 @@
p.third { background-color: lime; }

1
Base/res/html/misc/css-import-relative/css-import-4a.css
View file

@ -1 +0,0 @@
@import "css-import-4b.css";

1
Base/res/html/misc/css-import-relative/css-import-4b.css
View file

@ -1 +0,0 @@
p.fourth { background-color: lime; }

19
Base/res/html/misc/css-import.html
View file

@ -1,19 +0,0 @@
<html>
<head>
<title>@import test</title>
<style>
@import "css-import-1.css";
@import url("css-import-2.css");
@import url(css-import-3.css);
@import "css-import-relative/css-import-4a.css";
</style>
</head>
<body>
<div>
<p class="first">If this is green, <code>@import "string";</code> works!</p>
<p class="second">If this is green, <code>@import url("string");</code> works!</p>
<p class="third">If this is green, <code>@import url(unquoted-string);</code> works!</p>
<p class="fourth">If this is green, relative <code>@import</code> resolves correctly!</p>
</div>
</body>
</html>

24
Base/res/html/misc/css.html
View file

@ -1,24 +0,0 @@
<html>
<head>
<title>CSS test</title>
<style type="text/css">
#foo {
background-color: #ff0000;
color: #00ffff;
}
#bar {
background-color: #00ff00;
color: #ff00ff;
}
#baz {
background-color: #0000ff;
color: #ffff00;
}
</style>
</head>
<body>
<div id="foo">This is foo</div>
<div id="bar">This is bar</div>
<div id="baz">This is baz</div>
</body>
</html>

278
Base/res/html/misc/cursor.html
View file

@ -1,278 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>Cursor Test Page</title>
<style>
table {
table-layout: fixed;
border-collapse: collapse;
border: 3px solid gray;
}
thead {
text-align: left;
}
thead th {
border: 3px solid;
}
tbody td {
border: 3px solid gray;
width: 300px;
}
</style>
</head>
<body>
<h1>Cursor test page</h1>
<h2>Title attribute</h2>
<p title="Title on text">This is a paragraph with a title attribute.
<br />
<a title="Title on link" href="http://serenityos.org">This is a link with a title</a>
</p>
<h2>Cursors</h2>
<p style="cursor: wait">This is a paragraph with a custom cursor.
<br />
<a style="cursor: cell" href="http://serenityos.org">This is a link with a custom cursor</a>
</p>
<table>
<thead>
<tr>
<th>Cursor Name</th>
<th>Text</th>
<th>Button</th>
<th>Block</th>
</tr>
</thead>
<tbody>
<tr>
<td><span style="cursor: auto">auto</span></td>
<td><span style="cursor: auto">auto</span></td>
<td><button style="cursor: auto">auto</button></td>
<td style="background-color: gray; cursor: auto" width="100px">&nbsp;</td>
</tr>
<tr>
<td><span style="cursor: default">default</span></td>
<td><span style="cursor: default">default</span></td>
<td><button style="cursor: default">default</button></td>
<td style="background-color: darkgray; cursor: default">&nbsp;</td>
</tr>
<tr>
<td><span style="cursor: none">none</span></td>
<td><span style="cursor: none">none</span></td>
<td><button style="cursor: none">none</button></td>
<td style="background-color: gray; cursor: none">&nbsp;</td>
</tr>
<tr>
<td><span style="cursor: text">text</span></td>
<td><span style="cursor: text">text</span></td>
<td><button style="cursor: text">text</button></td>
<td style="background-color: darkgray; cursor: text">&nbsp;</td>
</tr>
<tr>
<td><span style="cursor: context-menu">context-menu</span></td>
<td><span style="cursor: context-menu">context-menu</span></td>
<td><button style="cursor: context-menu">context-menu</button></td>
<td style="background-color: gray; cursor: context-menu">&nbsp;</td>
</tr>
<tr>
<td><span style="cursor: help">help</span></td>
<td><span style="cursor: help">help</span></td>
<td><button style="cursor: help">help</button></td>
<td style="background-color: darkgray; cursor: help">&nbsp;</td>
</tr>
<tr>
<td><span style="cursor: pointer">pointer</span></td>
<td><span style="cursor: pointer">pointer</span></td>
<td><button style="cursor: pointer">pointer</button></td>
<td style="background-color: gray; cursor: pointer">&nbsp;</td>
</tr>
<tr>
<td><span style="cursor: progress">progress</span></td>
<td><span style="cursor: progress">progress</span></td>
<td><button style="cursor: progress">progress</button></td>
<td style="background-color: darkgray; cursor: progress">&nbsp;</td>
</tr>
<tr>
<td><span style="cursor: wait">wait</span></td>
<td><span style="cursor: wait">wait</span></td>
<td><button style="cursor: wait">wait</button></td>
<td style="background-color: gray; cursor: wait">&nbsp;</td>
</tr>
<tr>
<td><span style="cursor: cell">cell</span></td>
<td><span style="cursor: cell">cell</span></td>
<td><button style="cursor: cell">cell</button></td>
<td style="background-color: darkgray; cursor: cell">&nbsp;</td>
</tr>
<tr>
<td><span style="cursor: crosshair">crosshair</span></td>
<td><span style="cursor: crosshair">crosshair</span></td>
<td><button style="cursor: crosshair">crosshair</button></td>
<td style="background-color: gray; cursor: crosshair">&nbsp;</td>
</tr>
<tr>
<td><span style="cursor: text">text</span></td>
<td><span style="cursor: text">text</span></td>
<td><button style="cursor: text">text</button></td>
<td style="background-color: darkgray; cursor: text">&nbsp;</td>
</tr>
<tr>
<td><span style="cursor: vertical-text">vertical-text</span></td>
<td><span style="cursor: vertical-text">vertical-text</span></td>
<td><button style="cursor: vertical-text">vertical-text</button></td>
<td style="background-color: gray; cursor: vertical-text">&nbsp;</td>
</tr>
<tr>
<td><span style="cursor: alias">alias</span></td>
<td><span style="cursor: alias">alias</span></td>
<td><button style="cursor: alias">alias</button></td>
<td style="background-color: darkgray; cursor: alias">&nbsp;</td>
</tr>
<tr>
<td><span style="cursor: copy">copy</span></td>
<td><span style="cursor: copy">copy</span></td>
<td><button style="cursor: copy">copy</button></td>
<td style="background-color: gray; cursor: copy">&nbsp;</td>
</tr>
<tr>
<td><span style="cursor: move">move</span></td>
<td><span style="cursor: move">move</span></td>
<td><button style="cursor: move">move</button></td>
<td style="background-color: darkgray; cursor: move">&nbsp;</td>
</tr>
<tr>
<td><span style="cursor: no-drop">no-drop</span></td>
<td><span style="cursor: no-drop">no-drop</span></td>
<td><button style="cursor: no-drop">no-drop</button></td>
<td style="background-color: gray; cursor: no-drop">&nbsp;</td>
</tr>
<tr>
<td><span style="cursor: not-allowed">not-allowed</span></td>
<td><span style="cursor: not-allowed">not-allowed</span></td>
<td><button style="cursor: not-allowed">not-allowed</button></td>
<td style="background-color: darkgray; cursor: not-allowed">&nbsp;</td>
</tr>
<tr>
<td><span style="cursor: grab">grab</span></td>
<td><span style="cursor: grab">grab</span></td>
<td><button style="cursor: grab">grab</button></td>
<td style="background-color: gray; cursor: grab">&nbsp;</td>
</tr>
<tr>
<td><span style="cursor: grabbing">grabbing</span></td>
<td><span style="cursor: grabbing">grabbing</span></td>
<td><button style="cursor: grabbing">grabbing</button></td>
<td style="background-color: darkgray; cursor: grabbing">&nbsp;</td>
</tr>
<tr>
<td><span style="cursor: e-resize">e-resize</span></td>
<td><span style="cursor: e-resize">e-resize</span></td>
<td><button style="cursor: e-resize">e-resize</button></td>
<td style="background-color: gray; cursor: e-resize">&nbsp;</td>
</tr>
<tr>
<td><span style="cursor: n-resize">n-resize</span></td>
<td><span style="cursor: n-resize">n-resize</span></td>
<td><button style="cursor: n-resize">n-resize</button></td>
<td style="background-color: darkgray; cursor: n-resize">&nbsp;</td>
</tr>
<tr>
<td><span style="cursor: ne-resize">ne-resize</span></td>
<td><span style="cursor: ne-resize">ne-resize</span></td>
<td><button style="cursor: ne-resize">ne-resize</button></td>
<td style="background-color: gray; cursor: ne-resize">&nbsp;</td>
</tr>
<tr>
<td><span style="cursor: nw-resize">nw-resize</span></td>
<td><span style="cursor: nw-resize">nw-resize</span></td>
<td><button style="cursor: nw-resize">nw-resize</button></td>
<td style="background-color: darkgray; cursor: nw-resize">&nbsp;</td>
</tr>
<tr>
<td><span style="cursor: s-resize">s-resize</span></td>
<td><span style="cursor: s-resize">s-resize</span></td>
<td><button style="cursor: s-resize">s-resize</button></td>
<td style="background-color: gray; cursor: s-resize">&nbsp;</td>
</tr>
<tr>
<td><span style="cursor: se-resize">se-resize</span></td>
<td><span style="cursor: se-resize">se-resize</span></td>
<td><button style="cursor: se-resize">se-resize</button></td>
<td style="background-color: darkgray; cursor: se-resize">&nbsp;</td>
</tr>
<tr>
<td><span style="cursor: sw-resize">sw-resize</span></td>
<td><span style="cursor: sw-resize">sw-resize</span></td>
<td><button style="cursor: sw-resize">sw-resize</button></td>
<td style="background-color: gray; cursor: sw-resize">&nbsp;</td>
</tr>
<tr>
<td><span style="cursor: w-resize">w-resize</span></td>
<td><span style="cursor: w-resize">w-resize</span></td>
<td><button style="cursor: w-resize">w-resize</button></td>
<td style="background-color: darkgray; cursor: w-resize">&nbsp;</td>
</tr>
<tr>
<td><span style="cursor: ew-resize">ew-resize</span></td>
<td><span style="cursor: ew-resize">ew-resize</span></td>
<td><button style="cursor: ew-resize">ew-resize</button></td>
<td style="background-color: gray; cursor: ew-resize">&nbsp;</td>
</tr>
<tr>
<td><span style="cursor: ns-resize">ns-resize</span></td>
<td><span style="cursor: ns-resize">ns-resize</span></td>
<td><button style="cursor: ns-resize">ns-resize</button></td>
<td style="background-color: darkgray; cursor: ns-resize">&nbsp;</td>
</tr>
<tr>
<td><span style="cursor: nesw-resize">nesw-resize</span></td>
<td><span style="cursor: nesw-resize">nesw-resize</span></td>
<td><button style="cursor: nesw-resize">nesw-resize</button></td>
<td style="background-color: gray; cursor: nesw-resize">&nbsp;</td>
</tr>
<tr>
<td><span style="cursor: nwse-resize">nwse-resize</span></td>
<td><span style="cursor: nwse-resize">nwse-resize</span></td>
<td><button style="cursor: nwse-resize">nwse-resize</button></td>
<td style="background-color: darkgray; cursor: nwse-resize">&nbsp;</td>
</tr>
<tr>
<td><span style="cursor: col-resize">col-resize</span></td>
<td><span style="cursor: col-resize">col-resize</span></td>
<td><button style="cursor: col-resize">col-resize</button></td>
<td style="background-color: gray; cursor: col-resize">&nbsp;</td>
</tr>
<tr>
<td><span style="cursor: row-resize">row-resize</span></td>
<td><span style="cursor: row-resize">row-resize</span></td>
<td><button style="cursor: row-resize">row-resize</button></td>
<td style="background-color: darkgray; cursor: row-resize">&nbsp;</td>
</tr>
<tr>
<td><span style="cursor: all-scroll">all-scroll</span></td>
<td><span style="cursor: all-scroll">all-scroll</span></td>
<td><button style="cursor: all-scroll">all-scroll</button></td>
<td style="background-color: gray; cursor: all-scroll">&nbsp;</td>
</tr>
<tr>
<td><span style="cursor: zoom-in">zoom-in</span></td>
<td><span style="cursor: zoom-in">zoom-in</span></td>
<td><button style="cursor: zoom-in">zoom-in</button></td>
<td style="background-color: darkgray; cursor: zoom-in">&nbsp;</td>
</tr>
<tr>
<td><span style="cursor: zoom-out">zoom-out</span></td>
<td><span style="cursor: zoom-out">zoom-out</span></td>
<td><button style="cursor: zoom-out">zoom-out</button></td>
<td style="background-color: gray; cursor: zoom-out">&nbsp;</td>
</tr>
</tbody>
</table>
</body>
</html>

BIN
Base/res/html/misc/custom-list-item-2.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 231 B

BIN
Base/res/html/misc/custom-list-item.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 633 B

252
Base/res/html/misc/custom-properties.html
View file

@ -1,252 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>Custom Properties</title>
<style>
:root {
--my-color: purple;
--width: 10px;
--color: orange;
--style: solid;
--border: var(--width) var(--color) var(--style);
--background-color: yellow;
--background-position: top 10px right 5px;
}
div {
margin: 20px;
}
.test {
background-color: var(--my-color);
}
.test-parent {
--my-color: pink;
border: 1px solid black;
}
.box {
width: 150px;
height: 150px;
border: 1px solid black;
}
.test-fallback {
background-color: var(--fallback, lime);
}
.test-fallback.with {
--fallback: cyan;
}
.test-nested {
border: var(--border);
}
.test-inside-a-function {
--blue: 255;
background-color: rgb(255, 0, var(--blue));
}
.test-mixed {
background: var(--background-color) url("background-repeat.png") var(--background-position) no-repeat;
}
.billion-laughs {
--prop1: lol;
--prop2: var(--prop1) var(--prop1);
--prop3: var(--prop2) var(--prop2);
--prop4: var(--prop3) var(--prop3);
--prop5: var(--prop4) var(--prop4);
--prop6: var(--prop5) var(--prop5);
--prop7: var(--prop6) var(--prop6);
--prop8: var(--prop7) var(--prop7);
--prop9: var(--prop8) var(--prop8);
--prop10: var(--prop9) var(--prop9);
--prop11: var(--prop10) var(--prop10);
--prop12: var(--prop11) var(--prop11);
--prop13: var(--prop12) var(--prop12);
--prop14: var(--prop13) var(--prop13);
--prop15: var(--prop14) var(--prop14);
--prop16: var(--prop15) var(--prop15);
--prop17: var(--prop16) var(--prop16);
--prop18: var(--prop17) var(--prop17);
--prop19: var(--prop18) var(--prop18);
--prop20: var(--prop19) var(--prop19);
--prop21: var(--prop20) var(--prop20);
--prop22: var(--prop21) var(--prop21);
--prop23: var(--prop22) var(--prop22);
--prop24: var(--prop23) var(--prop23);
--prop25: var(--prop24) var(--prop24);
--prop26: var(--prop25) var(--prop25);
--prop27: var(--prop26) var(--prop26);
--prop28: var(--prop27) var(--prop27);
--prop29: var(--prop28) var(--prop28);
--prop30: var(--prop29) var(--prop29);
background: var(--prop30);
}
.dependency-cycle {
--recursive: var(--recursive);
--a: var(--b);
--b: var(--a);
background: var(--a);
color: var(--recursive);
}
</style>
</head>
<body>
<h1>CSS Custom Properties</h1>
<pre>
:root {
--my-color: purple;
}
.test {
background-color: var(--my-color);
}
.test-parent {
--my-color: pink;
}
</pre>
<div class="box test">
<pre>
.test
</pre>
This should be purple
</div>
<div class="test-parent">
<pre>
.test-parent
</pre>
<div class="box test">
<pre>
.test
</pre>
This should be pink
</div>
</div>
<h2>Fallback Values</h2>
<pre>
.test-fallback {
background-color: var(--fallback, lime);
}
.test-fallback.with {
--fallback: cyan;
}
</pre>
<div class="box test-fallback">
<pre>.test-fallback</pre>
This should be green
</div>
<div class="box test-fallback with">
<pre>.test-fallback.with</pre>
This should be cyan
</div>
<h2>Inline properties</h2>
<pre>
&lt;div style="--color: turquoise; background-color: var(--color)"&gt;
</pre>
<div class="box" style="--color: turquoise; background-color: var(--color)">
This should be turquoise
</div>
<h2>Nested var()</h2>
<pre>
:root {
--width: 10px;
--color: orange;
--style: solid;
--border: var(--width) var(--color) var(--style);
}
.test-nested {
border: var(--border);
}
</pre>
<div class="box test-nested">
<pre>.test-nested</pre>
This should have a 10px solid orange border
</div>
<pre>
.test-inside-a-function {
--blue: 255;
background-color: rgb(255, 0, var(--blue));
}
</pre>
<div class="box test-inside-a-function">
<pre>.test-inside-a-function</pre>
This should be fuchsia
</div>
<h2>Mixed var()</h2>
<pre>
:root {
--background-color: yellow;
--background-position: top 10px right 5px;
}
.test-mixed {
background: var(--background-color) url("background-repeat.png") var(--background-position) no-repeat;
}
</pre>
<div class="box test-mixed">
<pre>.test-mixed</pre>
This should have a yellow background with a smiley face in the top-right corner
</div>
<h2>Billion laughs attack</h2>
<pre>
.billion-laughs {
--prop1: lol;
--prop2: var(--prop1) var(--prop1);
--prop3: var(--prop2) var(--prop2);
/* ... */
--prop30: var(--prop29) var(--prop29);
background: var(--prop30);
}
</pre>
<div class="box billion-laughs">
<pre>.billion-laughs</pre>
This box tests that we handle the billion laughs attack. If we don't crash, it worked!
</div>
<h2>Dependency cycles</h2>
<pre>
.dependency-cycle {
--recursive: var(--recursive);
--a: var(--b);
--b: var(--a);
background: var(--a);
color: var(--recursive);
}
</pre>
<div class="box dependency-cycle">
<pre>.dependency-cycle</pre>
This box tests that we handle dependency cycles correctly. If we don't crash, it worked!
</div>
</body>
</html>

29
Base/res/html/misc/data-url.html
View file

@ -1,29 +0,0 @@
<!doctype html>
<html>
<head>
<style>
.star {
background-image: url(data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7);
width: 16px;
height: 16px;
}
.browser-icon {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAFqElEQVRYw9VXa0wUVxT+9gUs+FgoGsHUJdUK1SpsLNKqVKItitJKaAW1tlZSMNHYxvLDGhrdptZHGtukD9tuE2y0gI/Yoq26gqgprI3SdhVLZDWoS2TBF8i6y+zOzJ3bH+4OM/uCUJOmJ5lk7pmZ+333O+eeewb4j00x1BdTyxo195u27cibk7VKoVTHWW6yrEKhiqWgVBAEhvLeu8TrvMH03GzJKtq66ZhxBvtYCMzdeCHhRuN3lQtmTMpftCBf5fd/9lt/yPffmxOLTd8edjnv2ut1hpISmyn7wbAJjEsv3F2QM3PN/HmLlYkJWtFf9ZcHtk43UsfHgQJYkRGNnt5+bK13gSMURKCYbczF8RUb+pjulr19bb++Gw5DHUZulbdt/6mP1q/JGRGjQIJOKwIDQNstN7ycAJeHgOMFcJwaNa0CJibHotXuEudZVP35aIuxbr1mVPIzT2S8udBmyiaDKpBa1qji239uTp5RbBB94+Ng63SDUoDxEjCsACLQQeM725gLALAY69B7+WBz/LSiFwJJBBFIeXFtw5PPr5on9VEK9HsJGC/BEHDDkjm6ZGXdvebvF0j9SlnMMwp3Fx4yz8ssXy76CKHoecjB7Rk+uN9ePfJj7ui0/C9CKjB344WEuJTF99MKR4oPG7dXYcKYGEhxpTEOJbde8yhyds4Ki7Eu6Pn1WoKuiw3x/t2hGpBZqNGO2pXm+P11jJ91GE07quDs53Gnj8VYXRTmPhsPtVIJtVqBsboo3O1jgyYHgD6hGzpVEnSqJLyxSI2M+Wdx7pQBE3L2Qa8xQDn5Nqyfep5mui8dFBV4+cPm6A7rsXtjp+aN8E/U85ADT+iQ4xvK9BoDLpm+RnrZOtg5q6jOmUN/oOtiQ7TNlM0qAcB6ePO2MVMGwL2cMGxwqezVFTvRanfBzllFn52z4qkCFbpOf7xVrANRugnTKAUUCiDXkAi3h+Cqww0A0K2eFTRxOAt8J5Dc9OiFIpmoeH26uAuU0aNS/PudJxTa/LeRXrYubMJFkj5SOMR8EwBV9MgUUQGlJmYcANg63VAWzQHPeQddcTigSPaLazsAgO2jmPTKl5NvN/kIKJQqLQUFIcC9yjMAgKl6+JInstzSajcU4xmAsIAgBBYiCri9BK12F1rtLvxUYcCWMefwYM+j69/ILyPgpsGHESU8w/J05KWvZvvPAwBAiUMLi9EFmylb9lGJQxs2+fQag5ho0vtkdRp4VsA1clFWAZUA4PUwXW4PL4L7ASuTmSBwvz9cKAKJSJOPcwvi/bXad9pFBW437Zqsm1KAJABOUzaSANRKJssaRiJK9z4AEE4A7x0gILAuu6wfcPpWWhsAet53ZUXYVsnqNACAg28LWrWfiMclz2bW2dkSdBpKV50kuS8AcELeM6C6Yqc4dvBtcPBtMlA7ZxXfadp8HLfcNvF5h5kgMbP0AzEXkgBa6wMKJFIAoFIyzvMlYWUyg9SyxrBhkCYm8TpBCQv/MX/yrSVHei8fKAhSINCyfOB5vitSEoY2CoF1ycA7zAQJ04tLZP2AX4FA8BOSVcM3zhO3Z+S6L/BAU8UBPPd+kcx/vDjnG+dV81pZHeiKAI4QRCzGOthM2Sj8xIqJ42Jx9PydAUW2mCHwHggcg8xyOXh9ydLTzqv71oZsybLCrDwvhLD+2tBqd6G9ux9T9SNg2WIG9xDgmV4IXD8yy5fJvjlVutKamFmWG6krpghYeaD0gVXQYjwJyrMQCAtKWP8UovnjXl9SdDYxs/SlQdvyJIB2BZBAgAqrrmshcIDAUxBfV9a8qyZIpczy5egwE/y9Z74s5kP5MwrZCq1oiUH1dI84XmaNCZv7HWaCKzWvHU2YVrS6vaqw57H8nKYs3Rt1/88fdqSva9xACUDJAFMFAIUKuFJd3MA5HS2JM0s33di/3Iv/g/0DlSqwIPvu0LgAAAAASUVORK5CYII=");
width: 32px;
height: 32px;
}
</style>
</head>
<body>
<h1>In &lt;img&gt; tags:</h1>
<img src="data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7">
<br>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAFqElEQVRYw9VXa0wUVxT+9gUs+FgoGsHUJdUK1SpsLNKqVKItitJKaAW1tlZSMNHYxvLDGhrdptZHGtukD9tuE2y0gI/Yoq26gqgprI3SdhVLZDWoS2TBF8i6y+zOzJ3bH+4OM/uCUJOmJ5lk7pmZ+333O+eeewb4j00x1BdTyxo195u27cibk7VKoVTHWW6yrEKhiqWgVBAEhvLeu8TrvMH03GzJKtq66ZhxBvtYCMzdeCHhRuN3lQtmTMpftCBf5fd/9lt/yPffmxOLTd8edjnv2ut1hpISmyn7wbAJjEsv3F2QM3PN/HmLlYkJWtFf9ZcHtk43UsfHgQJYkRGNnt5+bK13gSMURKCYbczF8RUb+pjulr19bb++Gw5DHUZulbdt/6mP1q/JGRGjQIJOKwIDQNstN7ycAJeHgOMFcJwaNa0CJibHotXuEudZVP35aIuxbr1mVPIzT2S8udBmyiaDKpBa1qji239uTp5RbBB94+Ng63SDUoDxEjCsACLQQeM725gLALAY69B7+WBz/LSiFwJJBBFIeXFtw5PPr5on9VEK9HsJGC/BEHDDkjm6ZGXdvebvF0j9SlnMMwp3Fx4yz8ssXy76CKHoecjB7Rk+uN9ePfJj7ui0/C9CKjB344WEuJTF99MKR4oPG7dXYcKYGEhxpTEOJbde8yhyds4Ki7Eu6Pn1WoKuiw3x/t2hGpBZqNGO2pXm+P11jJ91GE07quDs53Gnj8VYXRTmPhsPtVIJtVqBsboo3O1jgyYHgD6hGzpVEnSqJLyxSI2M+Wdx7pQBE3L2Qa8xQDn5Nqyfep5mui8dFBV4+cPm6A7rsXtjp+aN8E/U85ADT+iQ4xvK9BoDLpm+RnrZOtg5q6jOmUN/oOtiQ7TNlM0qAcB6ePO2MVMGwL2cMGxwqezVFTvRanfBzllFn52z4qkCFbpOf7xVrANRugnTKAUUCiDXkAi3h+Cqww0A0K2eFTRxOAt8J5Dc9OiFIpmoeH26uAuU0aNS/PudJxTa/LeRXrYubMJFkj5SOMR8EwBV9MgUUQGlJmYcANg63VAWzQHPeQddcTigSPaLazsAgO2jmPTKl5NvN/kIKJQqLQUFIcC9yjMAgKl6+JInstzSajcU4xmAsIAgBBYiCri9BK12F1rtLvxUYcCWMefwYM+j69/ILyPgpsGHESU8w/J05KWvZvvPAwBAiUMLi9EFmylb9lGJQxs2+fQag5ho0vtkdRp4VsA1clFWAZUA4PUwXW4PL4L7ASuTmSBwvz9cKAKJSJOPcwvi/bXad9pFBW437Zqsm1KAJABOUzaSANRKJssaRiJK9z4AEE4A7x0gILAuu6wfcPpWWhsAet53ZUXYVsnqNACAg28LWrWfiMclz2bW2dkSdBpKV50kuS8AcELeM6C6Yqc4dvBtcPBtMlA7ZxXfadp8HLfcNvF5h5kgMbP0AzEXkgBa6wMKJFIAoFIyzvMlYWUyg9SyxrBhkCYm8TpBCQv/MX/yrSVHei8fKAhSINCyfOB5vitSEoY2CoF1ycA7zAQJ04tLZP2AX4FA8BOSVcM3zhO3Z+S6L/BAU8UBPPd+kcx/vDjnG+dV81pZHeiKAI4QRCzGOthM2Sj8xIqJ42Jx9PydAUW2mCHwHggcg8xyOXh9ydLTzqv71oZsybLCrDwvhLD+2tBqd6G9ux9T9SNg2WIG9xDgmV4IXD8yy5fJvjlVutKamFmWG6krpghYeaD0gVXQYjwJyrMQCAtKWP8UovnjXl9SdDYxs/SlQdvyJIB2BZBAgAqrrmshcIDAUxBfV9a8qyZIpczy5egwE/y9Z74s5kP5MwrZCq1oiUH1dI84XmaNCZv7HWaCKzWvHU2YVrS6vaqw57H8nKYs3Rt1/88fdqSva9xACUDJAFMFAIUKuFJd3MA5HS2JM0s33di/3Iv/g/0DlSqwIPvu0LgAAAAASUVORK5CYII=">
<h1>In css:</h1>
<h2>Unquoted:</h2>
<div class="star"></div>
<h2>Quoted:</h2>
<div class="browser-icon"></div>
</body>
</html>

13
Base/res/html/misc/demo.html
View file

@ -1,13 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>Canvas, timer, random and event demo</title>
</head>
<body>
<canvas id=c width=400 height=300></canvas>
<script src="fun-canvas.js"></script>
<script>
makeFunCanvas("c")
</script>
</body>
</html>

604
Base/res/html/misc/display-grid.html
View file

@ -1,604 +0,0 @@
<style>
.grid-container {
display: grid;
background-color: lightsalmon;
}
.grid-item {
background-color: lightblue;
}
.with-border {
border: 1px solid black;
}
</style>
<body style="margin-bottom: 2rem;">
<!-- A basic grid -->
<p>Should render a 2x2 grid</p>
<div
class="grid-container"
style="grid-template-columns: auto auto;">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
</div>
<!-- Different row heights -->
<p>Should render a 2x2 grid with the first row having a height of 50px</p>
<div
class="grid-container"
style="grid-template-columns: auto auto;">
<div class="grid-item" style="height: 50px;">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
</div>
<p>Start of crash tests</p>
<!-- Check for a bug where a github page was crashing due to the following code. -->
<div
class="grid-container"
style="
--Layout-sidebar-width:296px;
grid-template-columns: minmax(0, var(--Layout-sidebar-width));">
<div class="grid-item">1</div>
</div>
<!-- Spans causing positions outside the inherit grid. (span 2 with an end position of 1 causes the start to be -1) -->
<div class="grid-container">
<div class="grid-item" style="grid-row: span 2 / 1; grid-column: span 2 / 1;">1</div>
<div class="grid-item" style="grid-row: span 2 / 1;">2</div>
<div class="grid-item" style="grid-column: span 2 / 1;">3</div>
<div class="grid-item" style="grid-column-end: 1; grid-row-end: 1;">6</div>
</div>
<!-- 0 positioned grid items and similar inputs -->
<div class="grid-container" style="grid-template-rows: repeat(4,[row-start] 1fr [row-end]);">
<div class="grid-item" style="grid-row-end: 0;">2</div>
<div class="grid-item" style="grid-row: 0 / 0;">3</div>
<div class="grid-item" style="grid-column: 0 / 1;">4</div>
<div class="grid-item" style="grid-row: 1 / 0;">5</div>
<div class="grid-item" style="grid-row-end: 1;">1</div>
<div class="grid-item" style="grid-column-end: 1;">6</div>
</div>
<!-- Grid-column-span larger than implicit grid for row-positioned items -->
<div class="grid-container">
<div class="grid-item" style="grid-row: 1 / -1; grid-column: span 4;">1</div>
</div>
<!-- Grid-column-span larger than implicit grid for non-positioned items -->
<div class="grid-container">
<div class="grid-item" style="grid-column: span 4;">1</div>
</div>
<!-- Grid-row-span larger than implicit grid for column-positioned items -->
<div class="grid-container">
<div class="grid-item" style="grid-column: 1 / -1; grid-row: span 4;">1</div>
</div>
<!-- Grid-row-span larger than implicit grid for non-positioned items -->
<div class="grid-container">
<div class="grid-item" style="grid-row: span 4;">1</div>
</div>
<!-- Minmax parsing with calc (Another crash found thanks to Github)-->
<div
class="grid-container"
style="grid-template-columns: minmax(0, calc(100% - var(--Layout-sidebar-width) - var(--Layout-gutter)));">
</div>
<!-- Invalid template columns definition. Fixme: There seems to be some handling of this in other browsers
that I don't quite understand. -->
<div
class="grid-container"
style="
grid-template-columns: [name1] [name1] [name2] 50px;
">
<div class="grid-item" style="grid-column-start: name1;">1</div>
</div>
<!-- Missing grid track between line name declarations -->
<div
class="grid-container"
style="
grid-template-rows: [name1] 50px [name2] [name3];
">
<div class="grid-item" style="grid-row-start: name2;">1</div>
</div>
<!-- Missing grid track between line name declarations -->
<div
class="grid-container"
style="
grid-template-rows: [name1] 1fr [name2];
">
<div class="grid-item" style="grid-row: notfound;">1</div>
</div>
<!-- Percentage gap in vertical orientation (Not yet implemented) -->
<div
class="grid-container"
style="
grid-template-columns: auto auto;
gap: calc(4% + 2px);
">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
</div>
<!-- Grid gap and auto-fit -->
<div
class="grid-container"
style="
grid-column-gap: 1px;
grid-template-columns: repeat(auto-fit, 48px);
">
<div class="grid-item">1</div>
</div>
<div
class="grid-container"
style="
grid-column-gap: 1px;
grid-template-columns: [name1 name2 name3] 1fr repeat(1, [name4 name5 name6] 1fr);
">
<div class="grid-item">1</div>
</div>
<!-- Row-gaps with overflowing row spans. Github bug-->
<div
class="grid-container"
style="
grid-row-gap: 16px;
grid-template-rows: 1fr 1fr;
">
<div class="grid-item" style="grid-row: 2 / span 3;">1</div>
</div>
<div style="
display: grid;
grid-template-columns: minmax(0, calc(100% - var(--Layout-sidebar-width) - var(--Layout-gutter))) 0 auto
">
<div style="grid-column: 2/span 2;"></div>
</div>
<p>End of crash tests</p>
<!-- Different column sizes -->
<p>Should render a 2x2 grid with columns 50px and 50%</p>
<div
class="grid-container"
style="
grid-template-columns: 50px 50%;
grid-template-rows: auto auto;">
<div class="grid-item"
style="
grid-column: 1 / 1;
grid-row: 1 / 1">1</div>
<div class="grid-item"
style="
grid-column: 2 / 2;
grid-row: 1 / 1">2</div>
<div class="grid-item"
style="
grid-column: 1 / 1;
grid-row: 2 / 2">3</div>
<div class="grid-item"
style="
grid-column: 2 / 2;
grid-row: 2 / 2">4</div>
</div>
<!-- Using grid-row and grid-column -->
<p>Should render a full-width 4x4 grid with:
<ul>
<li>one large column on the left</li>
<li>one large column on the right, being split in half vertically, with the number 2 in the top half, and numbers 3, 4, 5, and 6 in the bottom</li>
</ul>
<div
class="grid-container"
style="
grid-template-columns: repeat(8, 1fr);
grid-template-rows: repeat(2, 25px 25px 25px 25px );
">
<div class="grid-item" style="grid-row: 1 / -1; grid-column: span 4;">1</div>
<div class="grid-item" style="grid-row: 1 / 5; grid-column: 5 / -1;">2</div>
<div class="grid-item" style="grid-column: span 2; grid-row: span 2;">3</div>
<div class="grid-item" style="grid-column: span 2 / -1; grid-row: span 2;">4</div>
<div class="grid-item" style="grid-column: span 2; grid-row: 7 / span 100;">5</div>
<div class="grid-item" style="grid-column: 7 / span 2; grid-row: span 2 / -1;">6</div>
</div>
<!-- Invalid minmax value as can't have a flexible length as a minimum value -->
<p>Should render 2 items with no grid formatting (one on top of the other)
<div
class="grid-container"
style="grid-template-columns: minmax(1fr, 100px) 1fr 1fr;">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
</div>
<!-- Invalid minmax value in repeat as can't have a flexible length as a minimum value -->
<p>Should render 2 items with no grid formatting (one on top of the other)
<div
class="grid-container"
style="grid-template-columns: repeat(3, minmax(1fr, 100px));">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
</div>
<!-- Basic minmax -->
<p>Basic minmax(): Should render 2 items side by side, each with a minimum width of 150px, If there is enough space,
they will expand up to 300px each.</p>
<div
class="grid-container"
style="grid-template-columns: minmax(150px, 300px) minmax(150px, 300px);">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
</div>
<!-- Basic minmax vertical-->
<p>Since there is no vertical limit, the two rows should be 50px high each.</p>
<div
class="grid-container"
style="
grid-template-columns: minmax(150px, 300px) minmax(150px, 300px);
grid-template-rows: minmax(25px, 50px) minmax(25px, 50px);
">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
</div>
<!-- Basic minmax vertical-->
<p>Since there is a height limit, the rows should be 25px high each.</p>
<div
class="grid-container"
style="
height: 50px;
grid-template-columns: minmax(150px, 300px) minmax(150px, 300px);
grid-template-rows: minmax(25px, 50px) minmax(25px, 50px);
">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">2</div>
<div class="grid-item">2</div>
</div>
<!-- Minmax horizontal with maximum as flex-->
<p>3 columns with minimum 200px and maximum 100%.</p>
<div
class="grid-container"
style="
grid-template-columns: minmax(200px, 1fr) minmax(200px, 1fr) minmax(200px, 1fr);
">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
</div>
<!-- Auto-fill-->
<p>Auto-fill of minimum 250px, max 1fr</p>
<div
class="grid-container"
style="
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
</div>
<!-- Auto-fit-->
<p>Auto-fit of minimum 250px, max 1fr</p>
<div
class="grid-container"
style="
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
</div>
<!-- See point 12.5.1, differences between minmax sizes. For example as a max it's comparing 2 flexes with a
length value, and as a minimum two lengths with an auto. -->
<p>Article layout: small margins on mobile, large on desktop. Centered column with 70ch width maximum</p>
<div
class="grid-container"
style="grid-template-columns: minmax(1rem, 1fr) minmax(auto, 70ch) minmax(1rem, 1fr);">
<div class="grid-item">1</div>
<div class="grid-item">Article content</div>
<div class="grid-item">3</div>
</div>
<!-- Example from https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines-->
<p>Named tracks there should be 4 grid items in a circle with a space in the middle</p>
<div
class="grid-container"
style="
grid-template-columns: [main-start] 1fr [content-start] 1fr [content-end] 1fr [main-end];
grid-template-rows: [main-start] 25px [content-start] 25px [content-end] 25px [main-end];
">
<div
class="grid-item"
style="
grid-column-start: main-start;
grid-row-start: main-start;
grid-row-end: main-end;
">1</div>
<div
class="grid-item"
style="
grid-column-start: content-end;
grid-row-start: main-start;
grid-row-end: content-end;
">2</div>
<div
class="grid-item"
style="
grid-column-start: content-start;
grid-row-start: main-start;
">3</div>
<div
class="grid-item"
style="
grid-column-start: content-start;
grid-column-end: main-end;
grid-row-start: content-end;
">4</div>
</div>
<p>Should render a 2 columned grid</p>
<div
class="grid-container"
style="
grid-template-columns:
[a] auto
[b] auto;
"
>
<div class="grid-item" style="grid-column-start: a;">1</div>
<div class="grid-item" style="grid-column-start: b;">2</div>
</div>
<!-- Multiple repeats -->
<p>Should render 2 50px columns and 2 100px columns</p>
<div
class="grid-container"
style="
grid-template-columns: repeat(2, 50px) repeat(2, 100px)
">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
</div>
<!-- Named lines inside repeat -->
<p>Should render 2 50px columns and 2 100px columns, with grid-item 1 starting at column 2</p>
<div
class="grid-container"
style="
grid-template-columns: repeat(2, [name1] 50px [name2] 100px);
">
<div class="grid-item" style="grid-column-start: name2;">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
</div>
<!-- Sizing of children of grid -->
<p>Should render a 64px wide image</p>
<div
class="grid-container"
style="
grid-template-columns: auto 0 minmax(0, 100%);
">
<div class="wrapper" style="width: 100%;">
<img style="width: 100%;" src="data:image/jpeg;base64,
/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDADIiJSwlHzIsKSw4NTI7S31RS0VFS5ltc1p9tZ++u7Kf
r6zI4f/zyNT/16yv+v/9////////wfD/////////////2wBDATU4OEtCS5NRUZP/zq/O////////
////////////////////////////////////////////////////////////wAARCAAYAEADAREA
AhEBAxEB/8QAGQAAAgMBAAAAAAAAAAAAAAAAAQMAAgQF/8QAJRABAAIBBAEEAgMAAAAAAAAAAQIR
AAMSITEEEyJBgTORUWFx/8QAFAEBAAAAAAAAAAAAAAAAAAAAAP/EABQRAQAAAAAAAAAAAAAAAAAA
AAD/2gAMAwEAAhEDEQA/AOgM52xQDrjvAV5Xv0vfKUALlTQfeBm0HThMNHXkL0Lw/swN5qgA8yT4
MCS1OEOJV8mBz9Z05yfW8iSx7p4j+jA1aD6Wj7ZMzstsfvAas4UyRHvjrAkC9KhpLMClQntlqFc2
X1gUj4viwVObKrddH9YDoHvuujAEuNV+bLwFS8XxdSr+Cq3Vf+4F5RgQl6ZR2p1eAzU/HX80YBYy
JLCuexwJCO2O1bwCRidAfWBSctswbI12GAJT3yiwFR7+MBjGK2g/WAJR3FdF84E2rK5VR0YH/9k=">
</div>
</div>
<!-- Gap basics -->
<p>There should be a large (50px) column gap and small (10px) row gap</p>
<div
class="grid-container"
style="
grid-template-columns: auto auto;
gap: 10px 50px;
">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
</div>
<!-- Gap basics -->
<p>There should be a Z-shaped gap (with both vertical and horizontal gap)</p>
<div
class="grid-container"
style="
grid-template-columns: auto auto;
gap: calc(1vh + 10px) calc(10% - 10px);
">
<div class="grid-item" style="grid-column: 2 / span 1">1</div>
<div class="grid-item">2</div>
</div>
<!-- Column end and span -->
<p>There should be a column spanning 8 units, and then one spanning 4</p>
<div
class="grid-container"
style="
grid-template-columns: repeat(12,minmax(0,5fr));
">
<div class="grid-item"
style="
grid-column-end: span 8;
">1</div>
<div class="grid-item"
style="
grid-column-end: span 4;
">2</div>
</div>
<!-- Column start span takes priority over column end span -->
<p>There should be a column spanning 4 units, and then one spanning 8</p>
<div
class="grid-container"
style="
grid-template-columns: repeat(12,minmax(0,5fr));
">
<div class="grid-item"
style="
grid-column-start: span 4;
grid-column-end: span 8;
">1</div>
<div class="grid-item"
style="
grid-column-start: span 8;
grid-column-end: span 4;
">2</div>
</div>
<!-- Row end and span -->
<p>There should be a row spanning 2 units, and then one spanning 3</p>
<div
class="grid-container"
style="
grid-template-rows: repeat(5, 20px);
">
<div class="grid-item"
style="
grid-row-end: span 2;
">1</div>
<div class="grid-item"
style="
grid-row-end: span 3;
">2</div>
</div>
<!-- Column-gaps with overflowing column spans -->
<p>There should be 1 column that starts at column 2 and spans until the end.</p>
<div
class="grid-container"
style="
grid-column-gap: 16px;
grid-template-columns: 1fr 1fr;
">
<div class="grid-item" style="grid-column: 2 / span 5;">1</div>
</div>
<!-- Column-gaps with overflowing column spans and row spans -->
<p>There should be 1 column that starts at column 2 and spans until the end.</p>
<div
class="grid-container"
style="
grid-column-gap: 16px;
grid-template-columns: 1fr 1fr;
grid-template-rows: 20px;
">
<div class="grid-item" style="grid-column: 2 / span 5; grid-row: span 4">1</div>
</div>
<!-- Grid shouldn't expand to 3 columns as having too much span doesn't change size. -->
<p>The bottom row should take up half the width of the grid.</p>
<div
class="grid-container"
style="
grid-template-columns: 1fr 1fr;
">
<div class="grid-item" style="
grid-column: 1 / span 3;
grid-row: 1;
">1</div>
<div class="grid-item">1</div>
</div>
<p>Grid template areas basics</p>
<div
class="grid-container"
style="
grid-template-columns: 1fr 1fr;
grid-template-areas:
'left right-top'
'left right-bottom';
">
<div style="background-color: lightpink; grid-area: right-bottom / right-bottom / right-bottom / right-bottom;">right-bottom</div>
<div style="background-color: lightgreen; grid-area: left;">left</div>
<div style="background-color: lightgrey; grid-column-end: right-top;">right-top</div>
</div>
<!-- Grid-lines vs. Grid template areas -->
<p>There should be a left-aligned column taking up 1 / 3 of the grid</p>
<div
class="grid-container"
style="
grid-template-columns: [c] 1fr [b] 1fr [a] 1fr;
grid-template-areas: 'a b c';
">
<div class="grid-item" style="grid-column-start: a; grid-column-end: a;">1fr</div>
</div>
<!-- Valid grid areas -->
<p>Column taking up 50% width</p>
<div
class="grid-container"
style="
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-areas: 'one one three two' 'one one four two' 'one one four two';
">
<div class="grid-item" style="grid-column-start: one; grid-column-end: one;">1fr</div>
</div>
<!-- Valid grid areas. This test should ideally fail differently FIXME -->
<p>Left-aligned column taking up 25% width</p>
<div
class="grid-container"
style="
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-areas: 'one one three two' 'one one four one';
">
<div class="grid-item" style="grid-column-start: two; grid-column-end: two;">1fr</div>
</div>
<!-- Valid grid areas. This test should ideally fail differently FIXME -->
<p>Left-aligned column taking up 25% width</p>
<div
class="grid-container"
style="
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-areas: 'one one three two' 'one one four five' 'one one four two';
">
<div class="grid-item" style="grid-column-start: two; grid-column-end: two;">1fr</div>
</div>
<p>Min-content / Max-content / 1fr column widths</p>
<div
class="grid-container"
style="
grid-template-columns: min-content max-content 1fr;
grid-template-areas: 'one two three';
">
<div class="grid-item" style="grid-area: one; min-width: 25%; max-width: 50%;">min-content</div>
<div class="grid-item" style="grid-area: two;">max-content</div>
<div class="grid-item" style="grid-area: three;">1fr</div>
</div>
<p>Bug with column gaps - grid items should have normal height</p>
<div class="grid-container with-border" style="
grid-column-gap: 10px;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
">
<div class="grid-item with-border">left side text</div>
<div class="grid-item with-border">right side text right side text right side text</div>
</div>

124
Base/res/html/misc/display-table.html
View file

@ -1,124 +0,0 @@
<style>
p {
margin-bottom: .5rem;
color: #808080;
}
.border-black {
border: 1px solid black;
}
.thick-border-black {
border: 10px solid black;
}
.table-border-black, table.table-border-black tr, table.table-border-black td {
border: 1px solid black;
}
.table {
display: table;
}
.table-row {
display: table-row;
}
.table-cell {
display: table-cell;
}
</style>
<!-- Copied from html tests Userland/Libraries/LibWeb/Tests/Pages/Table.html -->
<p>Empty table</p>
<table id="empty-table"></table>
<!-- Copied from html tests Userland/Libraries/LibWeb/Tests/Pages/Table.html -->
<p>Full table</p>
<table id="full-table">
<caption>
A Caption
</caption>
<thead>
<tr>
<th>Head Cell</th>
</tr>
</thead>
<tbody>
<tr>
<td>Body Cell</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Footer Cell</td>
</tr>
</tfoot>
</table>
<p>Table with 2 columns and border</p>
<table class="table-border-black">
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
<!-- Border-collapse and hidden -->
<p>No borders</p>
<table class="table-border-black" style="border-collapse: collapse; border-style: hidden;">
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
<!-- Border-collapse and hidden with divs -->
<p>No borders v2</p>
<div class="table border-black" style="border-collapse: collapse; border-style: hidden;">
<div class="table-row border-black">
<div class="table-cell border-black">Firstname</div>
<div class="table-cell border-black">Lastname</div>
</div>
<div class="table-row border-black">
<div class="table-cell border-black">Peter</div>
<div class="table-cell border-black">Griffin</div>
</div>
<div class="table-row border-black">
<div class="table-cell border-black">Lois</div>
<div class="table-cell border-black">Griffin</div>
</div>
</div>
<!-- Border-collapse and hidden with divs -->
<p>Columns should be tightly packed with no overflows nor extra space</p>
<div class="table thick-border-black" style="border-collapse: collapse; border-style: hidden;">
<div class="table-row thick-border-black">
<div class="table-cell thick-border-black">Firstname</div>
<div class="table-cell thick-border-black">Lastname</div>
</div>
<div class="table-row thick-border-black">
<div class="table-cell thick-border-black">Peter</div>
<div class="table-cell thick-border-black">Griffin</div>
</div>
<div class="table-row thick-border-black">
<div class="table-cell thick-border-black">Lois</div>
<div class="table-cell thick-border-black">Griffin</div>
</div>
</div>

11
Base/res/html/misc/dom.html
View file

@ -1,11 +0,0 @@
<!DOCTYPE html>
<html>
<head></head>
<body>
<div id="foo"></div>
<script>
var e = document.getElementById("foo");
alert(e.nodeName);
</script>
</body>
</html>

90
Base/res/html/misc/effects_with_opacity_and_transforms.html
View file

@ -1,90 +0,0 @@
<style>
body {
background-image: linear-gradient(to bottom left, rgb(211, 157, 157), rgb(30, 101, 182), blue);
}
.image-box {
background-image: url(old-computer.png);
height: 120px;
width: 175px;
background-size: cover;
border: 2px solid black;
display: flex;
align-items: center;
justify-content: center;
margin: 5px;
}
.backdrop-box {
background-color: rgba(255, 255, 255, 0.1);
border-radius: 5px;
width: 50%;
height: 50%;
display: flex;
justify-content: center;
align-items: center;
backdrop-filter: grayscale() invert() blur(5px);
}
.box {
width: 100px;
height: 100px;
border-radius: 50%;
background-image: url(old-computer.png);;
background-size: contain;
}
.egg {
border: 1px solid black;
height: 100px;
width: 100px;
margin: 50px;
border-radius: 80% 15% 55% 50% / 55% 15% 80% 50%;
box-shadow: 20px 10px 5px magenta, cyan -20px -10px 5px, yellow 10px -5px 5px 20px;
}
.op-30 {
opacity: 30%;
}
.scale-up {
transform: scale(1.3, 1.4);
}
.scale-down {
transform: scale(0.5, 0.4);
}
</style>
<table>
<thead>
<tr>
<th>Normal</th>
<th>Opacity: 30%</th>
<th>Scaled Up</th>
<th>Scaled Down</th>
</tr>
</thead>
<tbody>
<tr>
<td><div class="egg"></div></td>
<td><div class="op-30 egg"></div></td>
<td><div class="scale-up egg"></div></td>
<td><div class="scale-down egg"></div></td>
</tr>
<tr>
<td><div class="box"></div></td>
<td><div class="op-30 box"></div></td>
<td><div class="scale-up box"></div></td>
<td><div class="scale-down box"></div></td>
</tr>
<tr>
<td><div class="image-box"><div class="backdrop-box"></div></div></td>
<td><div class="image-box"><div class="op-30 backdrop-box"></div></div></td>
<td><div class="image-box"><div class="scale-up backdrop-box"></div></div></td>
<td><div class="image-box"><div class="scale-down backdrop-box"></div></div></td>
</tr>
</tbody>
</table>

26
Base/res/html/misc/empty.html
View file

@ -1,26 +0,0 @@
<html>
<head>
<title>:empty test</title>
<style>
.box {
background-color: pink;
height: 80px;
width: 80px;
}
.box:empty {
background-color: lime;
}
</style>
</head>
<body>
<div class="box"><!-- I will be lime. --></div>
<div class="box">I will be pink.</div>
<div class="box">
<!-- I will be pink in older browsers because of the whitespace around this comment. -->
</div>
<div class="box">
<p><!-- I will be pink in all browsers because of the non-collapsible whitespace and elements around this comment. --></p>
</div>
</body>
</html>

186
Base/res/html/misc/event-bubbling-and-multiple-listeners.html
View file

@ -1,186 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>Event Bubbling and Multiple Listeners</title>
</head>
<body>
<p>There are four lists listening to the mousedown event.</p>
<ul>
<li>The first list demonstrates standard event bubbling and multiple listeners.</li>
<li>The second list demonstrates stopPropagation()</li>
<li>The third list demonstrates stopImmediatePropagation()</li>
<li>The fourth list removes the second listener from within the first listener.</li>
</ul>
<p>For the test to pass, it must match the reference.</p>
<p>Only the first click counts. (I didn't want to figure out stopping multiple clicks)</p>
<h2>List One:</h2>
<h3>Result:</h3>
<div class="listener1">
<p></p>
<div class="listener1">
<p></p>
<p class="listener1" style="cursor: pointer;">
Click me!
</p>
</div>
</div>
<h3>Reference:</h3>
<div>
<p>3 (PASS)</p>
<p>2 (PASS)</p>
<p>1 (PASS)</p>
</div>
<h2>List Two:</h2>
<h3>Result:</h3>
<div class="listener2">
<p></p>
<div class="listener2">
<p></p>
<p class="listener2" style="cursor: pointer;">
Click me!
</p>
</div>
</div>
<h3>Reference:</h3>
<div>
<p>2 (PASS)</p>
<p>1 (PASS)</p>
</div>
<h2>List Three:</h2>
<p>(Test fails if FAIL is shown on screen)</p>
<h3>Result:</h3>
<div class="listener3">
<p></p>
<div class="listener3">
<p></p>
<p class="listener3" style="cursor: pointer;">
Click me!
</p>
</div>
</div>
<h3>Reference:</h3>
<div>
<p>1 (PASS)</p>
</div>
<h2>List Four:</h2>
<p>(Test fails if FAIL is shown on screen)</p>
<h3>Result:</h3>
<div class="listener4">
<p></p>
<div class="listener4">
<p></p>
<p class="listener4" style="cursor: pointer;">
Click me!
</p>
</div>
</div>
<h3>Reference:</h3>
<div>
<p>3 (PASS)</p>
<p>2 (PASS)</p>
<p>1 (PASS)</p>
</div>
<script>
let first_listener_count = 1;
let second_listener_count = 1;
let third_listener_count = 1;
let fourth_listener_count = 1;
function get_p_element_from_event(event) {
let result_p_element = event.currentTarget.firstElementChild;
if (!result_p_element) {
result_p_element = event.currentTarget;
}
return result_p_element;
}
function first_listener(event) {
let result_p_element = get_p_element_from_event(event);
result_p_element.innerText = first_listener_count;
first_listener_count++;
}
function second_listener(event) {
let result_p_element = get_p_element_from_event(event);
result_p_element.innerText = second_listener_count;
second_listener_count++;
if (second_listener_count == 3) {
event.stopPropagation();
second_listener_count = 1;
}
}
function third_listener(event) {
let result_p_element = get_p_element_from_event(event);
result_p_element.innerText = third_listener_count;
if (third_listener_count > 1) {
result_p_element.innerText += " (FAIL)";
} else {
result_p_element.innerText += " (PASS)";
}
third_listener_count++;
event.stopImmediatePropagation();
}
function fourth_listener(event) {
let result_p_element = get_p_element_from_event(event);
result_p_element.innerText = fourth_listener_count + " (PASS)";
fourth_listener_count++;
if (result_p_element.className == "listener4")
result_p_element.removeEventListener("mousedown", listener_fail);
else
result_p_element.parentNode.removeEventListener("mousedown", listener_fail);
}
function listener_pass(event) {
let result_p_element = get_p_element_from_event(event);
result_p_element.innerText += " (PASS)";
}
function listener_fail(event) {
let result_p_element = get_p_element_from_event(event);
result_p_element.innerText += " (FAIL)";
}
const first_listeners = document.querySelectorAll(".listener1");
const second_listeners = document.querySelectorAll(".listener2");
const third_listeners = document.querySelectorAll(".listener3");
const fourth_listeners = document.querySelectorAll(".listener4");
for (const element of first_listeners) {
element.addEventListener("mousedown", first_listener);
element.addEventListener("mousedown", listener_pass);
}
for (const element of second_listeners) {
element.addEventListener("mousedown", second_listener);
element.addEventListener("mousedown", listener_pass);
}
for (const element of third_listeners) {
element.addEventListener("mousedown", third_listener);
element.addEventListener("mousedown", listener_fail);
}
for (const element of fourth_listeners) {
element.addEventListener("mousedown", fourth_listener);
element.addEventListener("mousedown", listener_fail);
}
</script>
</body>
</html>

48
Base/res/html/misc/events.html
View file

@ -1,48 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<script>
document.addEventListener("DOMContentLoaded", function() {
alert("It loaded!");
document.getElementById("my_div").addEventListener("mousedown", function() {
alert("Mouse down!");
});
document.getElementById("my_div").addEventListener("mousemove", function() {
alert("Mouse move!");
});
});
</script>
</head>
<body>
<div id="my_div">Hello there!</div>
<div style="border: 1px solid black; width: 500px; height: 200px" id="divel">
CLICK ME CLICK ME CLICK ME CLICK ME CLICK ME CLICK ME CLICK ME CLICK ME CLICK ME CLICK
ME CLICK ME CLICK ME CLICK ME CLICK ME CLICK ME CLICK ME CLICK ME CLICK ME CLICK ME
CLICK ME CLICK ME CLICK ME CLICK ME CLICK ME CLICK ME
</div>
<p id="result">This text should be green, whether you click on the div border or the div text.</p>
<p>
<script>
const divel = document.getElementById("divel");
const result = document.getElementById("result");
divel.addEventListener("click", event => {
try {
const text = `Result: Clicked on divel element with id ${event.target.getAttribute(
"id"
)}`;
console.log(text);
result.innerText = text;
result.style.setProperty("color", "green");
} catch (e) {
const text = `Result: ${e.message}`;
console.error(text);
result.innerText = text;
result.style.setProperty("color", "red");
}
});
</script>
</p>
</body>
</html>

43
Base/res/html/misc/exceptions.html
View file

@ -1,43 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Exceptions</title>
</head>
<body>
<div id="test"></div>
<p>The following uncaught exceptions should be shown in the browser JS console:</p>
<ul>
<li>DOMException</li>
<li>SyntaxError</li>
<li>TypeError</li>
<li>ReferenceError</li>
<li>JS error thrown from an external script file</li>
<li>Unhandled promise rejection</li>
</ul>
<script>
// throws uncaught DOMException
document.getElementById("test").setAttribute("", "");
</script>
<script>
// throws uncaught SyntaxError
1 = 1
</script>
<script>
// throws uncaught TypeError
const a = 1;
a = 2;
</script>
<script>
// throws uncaught ReferenceError
xxx;
</script>
<script src="exceptions.js"></script>
<script>
Promise.resolve().then(() => {
throw "Unhandled promise rejection";
});
</script>
</body>
</html>

24
Base/res/html/misc/first-child.html
View file

@ -1,24 +0,0 @@
<html>
<head>
<title>:first-child test</title>
<style>
p:first-child {
color: lime;
background-color: black;
padding: 5px;
}
</style>
</head>
<body>
<div>
<p>This text is selected!</p>
<p>This text isn't selected.</p>
</div>
<div>
<h2>This text isn't selected: it's not a `p`.</h2>
<p>This text isn't selected.</p>
</div>
</body>
</html>

13
Base/res/html/misc/first-of-type.html
View file

@ -1,13 +0,0 @@
<style>
article :first-of-type {
background-color:pink;
}
</style>
<article>
<div>This `div is first!</div>
<div>This <span>nested `span` is first</span>!</div>
<div>This <em> nested `em` is first</em>, but this <em>nested `em` is last</em>!</div>
<div>This <span>nested `span` gets styled</span>!</div>
<b>This `b` qualifies!</b>
<div>This is the final `div`.</div>
</article>

125
Base/res/html/misc/flex-2.html
View file

@ -1,125 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>Flex 2: Electric Boogaloo</title>
<style>
.my-container {
display: flex;
border: 1px solid salmon;
}
.width-constrained {
width: 250px;
}
.height-constrained {
height: 250px;
}
.column {
flex-direction: column;
}
.box {
width: 100px;
height: 100px;
border: 1px solid black;
}
.exception {
background: rgba(255, 0, 255, 0.5);
left: 50px;
top: 50px;
}
.width-constrained .exception {
background: rgba(0, 255, 0, 0.5);
left: 200px;
}
</style>
</head>
<body>
<h1>FlexBox Tests</h1>
<p>This tests whether flex-box behaves well with unusual children.</p>
<p>The boxes are width and height 100px.</p>
<h2>Row</h2>
<h3>Width unconstrained</h3>
<p>With a <code>position: absolute;</code> child</p>
<div class="my-container">
<div class="box">1</div>
<div class="box exception" style="position: absolute;">Absolute</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
<p>With a <code>position: fixed;</code> child</p>
<div class="my-container">
<div class="box">1</div>
<div class="box exception" style="position: fixed;">Fixed</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
<p>With a <code>position: relative;</code> child</p>
<div class="my-container">
<div class="box">1</div>
<div class="box exception" style="position: relative;">Relative</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
<p>With a <code>position: static;</code> child</p>
<div class="my-container">
<div class="box">1</div>
<div class="box exception" style="position: static;">Static</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
<p>With a <code>position: sticky;</code> child</p>
<div class="my-container">
<div class="box">1</div>
<div class="box exception" style="position: sticky;">Sticky</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
<h3>Width constrained</h3>
<p>With a <code>position: absolute;</code> child</p>
<div class="my-container width-constrained">
<div class="box">1</div>
<div class="box exception" style="position: absolute;">Absolute</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
<p>With a <code>position: fixed;</code> child</p>
<div class="my-container width-constrained">
<div class="box">1</div>
<div class="box exception" style="position: fixed;">Fixed</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
<p>With a <code>position: relative;</code> child</p>
<div class="my-container width-constrained">
<div class="box">1</div>
<div class="box exception" style="position: relative;">Relative</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
<p>With a <code>position: static;</code> child</p>
<div class="my-container width-constrained">
<div class="box">1</div>
<div class="box exception" style="position: static;">Static</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
<p>With a <code>position: sticky;</code> child</p>
<div class="my-container width-constrained">
<div class="box">1</div>
<div class="box exception" style="position: sticky;">Sticky</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
<div style="height: 2000px"></div>
</body>
</html>

22
Base/res/html/misc/flex-item-preferred-size-should-be-intrinsic-size-contribution.html
View file

@ -1,22 +0,0 @@
<!DOCTYPE html><html><head><style>
html {
background: white;
}
.flexbox {
display: flex;
background: pink;
}
svg {
background: orange;
height: 50px;
width: 50px;
}
</style></head><body class="flexbox"><svg
width="569px"
height="546px"
viewBox="0 0 569 546"
><circle
cx="362.589996"
cy="204.589996"
r="204.589996"
></circle></svg>

105
Base/res/html/misc/flex-order.html
View file

@ -1,105 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>Flex</title>
<style>
.my-container {
display: flex;
border: 1px solid salmon;
}
.box {
width: 100px;
height: 100px;
border: 1px solid black;
}
.inline {
display: inline-block
}
</style>
</head>
<body>
<p>2/0/1</p>
<div class="my-container" style="width: 500px;">
<div class="box" style="order: 2;flex: 80% 0 4;">1</div>
<div class="box" style="order: 0;flex: 80% 0 1;">2</div>
<div class="box" style="order: 1;flex: 80% 0 0;">3</div>
</div>
<p>2/0/1 - reverse</p>
<div class="my-container" style="flex-direction: row-reverse; width: 500px;">
<div class="box" style="order: 2;flex: 80% 0 4;">1</div>
<div class="box" style="order: 0;flex: 80% 0 1;">2</div>
<div class="box" style="order: 1;flex: 80% 0 0;">3</div>
</div>
<p>2/<>/1</p>
<div class="my-container" style="width: 500px;">
<div class="box" style="order: 2;flex: 80% 0 4;">1</div>
<div class="box" style="flex: 80% 0 1;">2</div>
<div class="box" style="order: 1;flex: 80% 0 0;">3</div>
</div>
<p>2/<>/1 - reverse</p>
<div class="my-container" style="flex-direction: row-reverse; width: 500px;">
<div class="box" style="order: 2;flex: 80% 0 4;">1</div>
<div class="box" style="flex: 80% 0 1;">2</div>
<div class="box" style="order: 1;flex: 80% 0 0;">3</div>
</div>
<p>2/0/<></p>
<div class="my-container" style="width: 500px;">
<div class="box" style="order: 2;flex: 80% 0 4;">1</div>
<div class="box" style="order: 0;flex: 80% 0 1;">2</div>
<div class="box" style="flex: 80% 0 0;">3</div>
</div>
<p><>/0/1</p>
<div class="my-container" style="width: 500px;">
<div class="box" style="flex: 80% 0 4;">1</div>
<div class="box" style="order: 0;flex: 80% 0 1;">2</div>
<div class="box" style="order: 1;flex: 80% 0 0;">3</div>
</div>
<p><>/1/<></p>
<div class="my-container" style="width: 500px;">
<div class="box" style="flex: 80% 0 4;">1</div>
<div class="box" style="order: 1;flex: 80% 0 1;">2</div>
<div class="box" style="flex: 80% 0 0;">3</div>
</div>
<p><>/0/<></p>
<div class="my-container" style="width: 500px;">
<div class="box" style="flex: 80% 0 4;">1</div>
<div class="box" style="order: 0;flex: 80% 0 1;">2</div>
<div class="box" style="flex: 80% 0 0;">3</div>
</div>
<p>1/1/<></p>
<div class="my-container" style="width: 500px;">
<div class="box" style="order: 1;flex: 80% 0 4;">1</div>
<div class="box" style="order: 1;flex: 80% 0 1;">2</div>
<div class="box" style="flex: 80% 0 0;">3</div>
</div>
<p>1/1/<> - reverse</p>
<div class="my-container" style="flex-direction: row-reverse; width: 500px;">
<div class="box" style="order: 1;flex: 80% 0 4;">1</div>
<div class="box" style="order: 1;flex: 80% 0 1;">2</div>
<div class="box" style="flex: 80% 0 0;">3</div>
</div>
<p>3/-1/-2</p>
<div class="my-container" style="width: 500px;">
<div class="box" style="order: 3;flex: 80% 0 4;">1</div>
<div class="box" style="order: -1;flex: 80% 0 1;">2</div>
<div class="box" style="order: -2;flex: 80% 0 0;">3</div>
</div>
<p>-2/3/<></p>
<div class="my-container" style="width: 500px;">
<div class="box" style="order: -2;flex: 80% 0 4;">1</div>
<div class="box" style="order: 3;flex: 80% 0 1;">2</div>
<div class="box" style="flex: 80% 0 0;">3</div>
</div>
<p><>/-1/<></p>
<div class="my-container" style="width: 500px;">
<div class="box" style="flex: 80% 0 4;">1</div>
<div class="box" style="order: -1;flex: 80% 0 1;">2</div>
<div class="box" style="flex: 80% 0 0;">3</div>
</div>
</body>
</html>

227
Base/res/html/misc/flex.html
View file

@ -1,227 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>Flex</title>
<style>
.my-container {
display: flex;
border: 1px solid salmon;
}
.width-constrained {
width: 250px;
}
.height-constrained {
height: 250px;
}
.column {
flex-direction: column;
}
.box {
width: 100px;
height: 100px;
border: 1px solid black;
}
</style>
</head>
<body>
<h1>FlexBox Tests</h1>
<p>The boxes are width and height 100px.</p>
<h2>Row</h2>
<h3>Width unconstrained</h3>
<p>Default</p>
<div class="my-container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
<h3>Width 250px</h3>
<p>Default</p>
<div class="my-container width-constrained">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
<p>Flex-wrap: nowrap</p>
<div class="my-container width-constrained" style="flex-wrap: nowrap;">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
<p>Flex-wrap: wrap</p>
<div class="my-container width-constrained" style="flex-wrap: wrap;">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
<p>Flex-wrap: wrap-reverse</p>
<div class="my-container width-constrained" style="flex-wrap: wrap-reverse;">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
<h4>Flex-flow shorthand</h4>
<p>flex-flow: row nowrap;</p>
<div class="my-container width-constrained" style="flex-flow: row nowrap;">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
<p>flex-flow: row wrap;</p>
<div class="my-container width-constrained" style="flex-flow: row wrap;">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
<h2>Column</h2>
<h3>Height/Width unconstrained</h3>
<p>Default</p>
<div class="my-container column">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
<h3>Height 250px</h3>
<p>Default</p>
<div class="my-container column height-constrained">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
<h4>Also Width 250px</h4>
<p>Default</p>
<div class="my-container width-constrained column height-constrained">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
<p>Flex-wrap: nowrap</p>
<div class="my-container column width-constrained height-constrained" style="flex-wrap: nowrap;">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
<p>Flex-wrap: wrap</p>
<div class="my-container column width-constrained height-constrained" style="flex-wrap: wrap;">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
<p>Flex-wrap: wrap-reverse</p>
<div class="my-container column width-constrained height-constrained" style="flex-wrap: wrap-reverse;">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
<h4>Flex-flow shorthand</h4>
<p>flex-flow: column nowrap;</p>
<div class="my-container width-constrained height-constrained" style="flex-flow: column nowrap;">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
<p>flex-flow: column wrap;</p>
<div class="my-container width-constrained height-constrained" style="flex-flow: column wrap;">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
<h2>Grow/Shrink</h2>
<p>Container has width of 500px</p>
<p>flex-grow: 4/2/0</p>
<div class="my-container" style="flex-flow: row nowrap; width: 500px;">
<div class="box" style="flex-grow: 4;">1 I grow the most</div>
<div class="box" style="flex-grow: 2;">2 I grow</div>
<div class="box" style="flex-grow: 0;">3 I don't</div>
</div>
<p>Container has width of 250px</p>
<p>flex-shrink: 4/1/0</p>
<div class="my-container" style="flex-flow: row nowrap; width: 250px;">
<div class="box" style="flex-shrink: 4;">1 I shrink the most</div>
<div class="box" style="flex-shrink: 1;">2 I shrink</div>
<div class="box" style="flex-shrink: 0;">3 I don't</div>
</div>
<h2>Flex shorthand</h2>
<p>flex: initial;</p>
<div class="my-container" style="width: 500px;">
<div class="box" style="flex: initial;">1</div>
<div class="box" style="flex: initial;">2</div>
<div class="box" style="flex: initial;">3</div>
</div>
<p>flex: auto;</p>
<div class="my-container" style="width: 500px;">
<div class="box" style="flex: auto;">1</div>
<div class="box" style="flex: auto;">2</div>
<div class="box" style="flex: auto;">3</div>
</div>
<p>flex: none;</p>
<div class="my-container" style="width: 500px;">
<div class="box" style="flex: none;">1</div>
<div class="box" style="flex: none;">2</div>
<div class="box" style="flex: none;">3</div>
</div>
<p>flex: 1/2/3;</p>
<div class="my-container" style="width: 500px;">
<div class="box" style="flex: 1;">1</div>
<div class="box" style="flex: 2;">2</div>
<div class="box" style="flex: 3;">3</div>
</div>
<p>flex: 0 0 0;</p>
<div class="my-container" style="width: 500px;">
<div class="box" style="flex: 0 0 0;">1</div>
<div class="box" style="flex: 0 0 0;">2</div>
<div class="box" style="flex: 0 0 0;">3</div>
</div>
<p>flex: 0 0 0; flex-direction: column;</p>
<div class="my-container column" style="width: 500px;">
<div class="box" style="flex: 0 0 0;">1</div>
<div class="box" style="flex: 0 0 0;">2</div>
<div class="box" style="flex: 0 0 0;">3</div>
</div>
<p>flex: 1 2 0;</p>
<div class="my-container" style="width: 500px;">
<div class="box" style="flex: 1 2 0;">1</div>
<div class="box" style="flex: 1 2 0;">2</div>
<div class="box" style="flex: 1 2 0;">3</div>
</div>
<p>flex: 0 1 2; <span style="color: red;">(Invalid)</span></p>
<div class="my-container" style="width: 500px;">
<div class="box" style="flex: 0 1 2;">1</div>
<div class="box" style="flex: 0 1 2;">2</div>
<div class="box" style="flex: 0 1 2;">3</div>
</div>
<p>flex: 4/1/0 0 50px;</p>
<div class="my-container" style="width: 500px;">
<div class="box" style="flex: 4 0 50px;">1</div>
<div class="box" style="flex: 1 0 50px;">2</div>
<div class="box" style="flex: 0 0 50px;">3</div>
</div>
<p>flex: 80% 0 4/1/0;</p>
<div class="my-container" style="width: 500px;">
<div class="box" style="flex: 80% 0 4;">1</div>
<div class="box" style="flex: 80% 0 1;">2</div>
<div class="box" style="flex: 80% 0 0;">3</div>
</div>
<p>flex: auto 0 4/1/0;</p>
<div class="my-container" style="width: 500px;">
<div class="box" style="flex: auto 0 4;">1</div>
<div class="box" style="flex: auto 0 1;">2</div>
<div class="box" style="flex: auto 0 0;">3</div>
</div>
</body>
</html>

60
Base/res/html/misc/float-1.html
View file

@ -1,60 +0,0 @@
<style>
#lefty {
float: left;
background: red;
width: 100px;
height: 100px;
}
#righty {
float: right;
background: green;
width: 50px;
height: 50px;
}
#lefty2 {
float: left;
background: orange;
width: 80px;
height: 80px;
}
#righty2 {
float: right;
background: magenta;
width: 30px;
height: 30px;
}
#lefty3 {
float: left;
background: cyan;
width: 40px;
height: 40px;
}
#righty3 {
float: right;
background: silver;
width: 20px;
height: 20px;
}
</style>
</style>
<body>
<div>
<div id=lefty>L</div>
<div id=righty>R</div>
</div>
<div>
<div id=lefty2>L2</div>
<div id=righty2>R2</div>
</div>
<div>
<div id=lefty3>L3</div>
<div id=righty3>R3</div>
</div>
<div>
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
</div>
</body>

17
Base/res/html/misc/float-2.html
View file

@ -1,17 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<style>
#b {
border: 1px solid red;
width: 50px;
height: 50px;
float: left;
}
</style>
</head>
<body>
<div id=b></div>
<div id=a>Text</div>
</body>
</html>

27
Base/res/html/misc/float-3.html
View file

@ -1,27 +0,0 @@
<style>
body {
width: 780px;
text-align: center
}
.box {
height: 100px;
width: 300px;
background: red;
}
#top {
overflow: hidden;
}
#bottom {
border: 1px solid black;
}
</style>
<body>
<div id="top">
<div id="top-left" class="box" style="float: left"></div>
<div id="top-right" class="box" style="float: right"></div>
</div>
<div id="bottom">
<!-- Due to the overflow property of the top div, this div should be laid beneath the top, rather than inline -->
<div id="text">foobar</div>
</div>
</body>

29
Base/res/html/misc/float-around-things.html
View file

@ -1,29 +0,0 @@
<style>
html {
background: white;
}
body {
margin-left: 200px;
margin-right: 200px;
background: wheat;
}
#lefty {
float: left;
background: green;
width: 100px;
height: 100px;
}
#righty {
float: right;
background: red;
width: 100px;
height: 100px;
}
</style>
<div id=lefty></div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin convallis sagittis velit ut suscipit. Maecenas sit amet maximus nunc. Integer a sem odio. Nunc cursus sollicitudin mauris, sed malesuada ipsum. Nulla ac euismod libero, ac gravida arcu. Phasellus convallis ornare metus, a vulputate dui rhoncus in. Cras mattis arcu vel nibh ultrices suscipit lobortis id libero.
<div id=righty></div>
Integer in rhoncus sem, sit amet pellentesque sapien. Donec eu velit aliquam, pharetra dui ut, tempor ante. Duis vitae metus ac mauris porta aliquam. Vestibulum vestibulum dignissim ligula ac varius. Fusce condimentum pellentesque neque, at finibus neque suscipit non. Suspendisse arcu urna, condimentum eget massa et, ornare convallis metus. Nunc malesuada fermentum diam. Ut rutrum dignissim eros, quis sollicitudin elit interdum vel. Vivamus tortor diam, tristique vitae mauris vitae, mollis pellentesque sapien. Cras pellentesque finibus lacinia. Aliquam at leo dapibus, consectetur leo id, ultrices augue. Praesent vitae magna metus. Aliquam condimentum urna eu rhoncus efficitur. Fusce elementum diam eget tincidunt bibendum.
Donec vel tellus eu mi hendrerit sagittis ac interdum purus. Etiam a sodales lacus. Maecenas vehicula diam vitae elit convallis, quis sagittis metus accumsan. Mauris lacus risus, dictum vitae fermentum sit amet, finibus nec tellus. Nunc eros tortor, rhoncus et eros eget, finibus aliquet dui. Sed venenatis, sem quis mollis pharetra, elit ipsum dignissim felis, id feugiat arcu metus vitae eros. Curabitur ac porta odio. Vivamus placerat sodales maximus. Praesent tincidunt, urna sit amet dignissim luctus, erat erat ultricies quam, a maximus massa metus vehicula diam. Aenean pharetra augue massa, in luctus neque interdum quis. Sed mattis magna egestas semper elementum. Morbi vitae velit eu nunc fringilla aliquam sed at diam. Cras vulputate vel magna id scelerisque. Praesent condimentum vehicula ipsum, sit amet consectetur tortor volutpat at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

67
Base/res/html/misc/float-stress-1.html
View file

@ -1,67 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>float horror show</title>
<style type="text/css">
html {
font: 16px/1 Arial;
}
.outer {
border: 1px solid black;
width: 300px;
height: 250px;
}
.one {
float: left;
height: 50px;
width: 200px;
margin: 0;
border: 1px solid black;
background-color: #fc0;
}
.two {
float: right;
height: 50px;
width: 200px;
margin: 0;
border: 1px solid black;
background-color: pink;
}
.lefty {
float: left;
height: 50px;
width: 50px;
margin: 0;
border: 1px solid black;
background-color: lime;
}
.righty {
float: right;
height: 30px;
width: 30px;
margin: 0;
border: 1px solid black;
background-color: magenta;
}
</style></head><body>
<div class=outer>
foo bar baz foo bar baz
<div class=lefty></div>
<div class=one></div>
<div class=two></div>
foo bar baz foo bar baz
foo bar baz foo bar baz
<div class=righty></div>
foo bar baz foo bar baz
foo bar baz foo bar baz
foo bar baz foo bar baz
<div class="lefty shwifty"></div>
foo bar baz foo bar baz
<div class=righty></div>
foo bar baz foo bar baz
foo bar baz foo bar baz
foo bar baz foo bar baz
foo bar baz foo bar baz
foo bar baz foo bar baz
foo bar baz foo bar baz

42
Base/res/html/misc/float-stress-2.html
View file

@ -1,42 +0,0 @@
<!DOCTYPE html>
<html class="js" lang="en-US">
<head>
<style>
* {
border: 0px solid black !important;
}
html, body {
margin: 0;
}
#page {
background: cyan;
padding-left: 50px;
padding-top: 50px;
}
#content_box {
float: left;
background: lime;
width: 400px;
height: 150px;
}
.first {
background: pink;
width: 300px;
height: 100px;
float: left;
}
.second {
background: orange;
width: 200px;
height: 50px;
float: left;
}
</style>
</head><body><div id="page"><div id="content_box"><article class="first">first</article><article class="second">second</article> </div></div></body></html>

52
Base/res/html/misc/float-stress-3.html
View file

@ -1,52 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>float horror show</title>
<style type="text/css">
html {
font: 16px/1 Arial;
}
.outer {
border: 1px solid black;
width: 300px;
height: 250px;
}
.one {
float: left;
height: 50px;
width: 200px;
margin: 0;
border: 1px solid black;
background-color: #fc0;
}
.two {
float: right;
height: 50px;
width: 200px;
margin: 0;
border: 1px solid black;
background-color: pink;
}
.lefty {
float: left;
height: 50px;
width: 50px;
margin: 0;
border: 1px solid black;
background-color: lime;
}
.righty {
float: right;
height: 30px;
width: 30px;
margin: 0;
border: 1px solid black;
background-color: magenta;
}
</style></head><body>
<div class=outer>
foo bar baz foo bar baz
<div class=lefty></div>
<div class=one></div>
<div class=two></div>

28
Base/res/html/misc/focus.html
View file

@ -1,28 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>:focus and :focus-within test</title>
<style>
:focus {
background-color: magenta;
}
p.focus-within-test:focus-within {
background-color: lime;
}
</style>
</head>
<body>
<h1>:focus and :focus-within test</h1>
<p>
Anything with :focus will have a magenta background.
<button>I'm a button</button>
<input type="text" value="Hello friends!"/>
</p>
<p class="focus-within-test">
This paragraph will turn green if anything inside it is focused.
<button>I'm a button</button>
<input type="text" value="Hello friends!"/>
</p>
</body>
</html>

70
Base/res/html/misc/font-face.html
View file

@ -1,70 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS @font-face Test</title>
<style>
@font-face {
font-family: TestWOFF-TTF;
src: url("./test-truetype.woff") format("woff");
}
.woff-ttf {
font-family: TestWOFF-TTF;
}
@font-face {
font-family: TestWOFF-CFF;
src: url("./test-cff.woff") format("woff");
}
.woff-cff {
font-family: TestWOFF-CFF;
}
@font-face {
font-family: TestWOFF2-TTF;
src: url("./test-truetype.woff2") format("woff2");
}
.woff2-ttf {
font-family: TestWOFF2-TTF;
}
@font-face {
font-family: TestWOFF2-CFF;
src: url("./test-cff.woff2") format("woff2");
}
.woff2-cff {
font-family: TestWOFF2-CFF;
}
@font-face {
font-family: TestTTF;
src: url("./test.ttf") format("truetype");
}
.ttf {
font-family: TestTTF;
}
@font-face {
font-family: TestOTF;
src: url("./test.otf") format("opentype");
}
.otf {
font-family: TestOTF;
}
body {
font-family: sans-serif;
}
</style>
</head>
<body>
<p>These should render checkmarks, not X's</p>
<p>WOFF with TTF: <span class="woff-ttf">X</span></p>
<p>WOFF with CFF: <span class="woff-cff">X</span></p>
<p>WOFF2 with TTF: <span class="woff2-ttf">X</span></p>
<p>WOFF2 with CFF: <span class="woff2-cff">X</span></p>
<p>TTF: <span class="ttf">X</span></p>
<p>OTF: <span class="otf">X</span></p>
</body>
</html>

59
Base/res/html/misc/fonts.html
View file

@ -1,59 +0,0 @@
<!doctype html>
<html>
<head>
<title>CSS Fonts test</title>
<style type="text/css">
h2 {
font-family: sans-serif;
}
section {
border: 1px solid black;
border-radius: 8px;
padding: 1em;
margin: 1em;
}
</style>
</head>
<body>
<h2>General tests</h2>
<section>
<p style="font: 20px monospace;">font: 20px monospace;</p>
<p style="font: 12pt/14pt sans-serif;">font: 12pt/14pt sans-serif;</p>
<p style="font: 80% cursive;">font: 80% cursive;</p>
<p style="font: bold 80% cursive;">font: bold 80% cursive;</p>
<p style="font: x-large/110% fantasy, serif;">font: x-large/110% fantasy, serif;</p>
<p style="font: 400 2em SerenitySans;">font: 400 2em SerenitySans;</p>
<p style="font: 400 200% SerenitySans;">font: 400 200% SerenitySans;</p>
<p style="font: 400 x-large SerenitySans;">font: 400 x-large SerenitySans;</p>
<p style="font: smaller SerenitySans;">font: smaller SerenitySans;</p>
<p style="font: normal smaller SerenitySans;">font: normal smaller SerenitySans;</p>
<p style="font: bold italic large Helvetica, sans-serif;">font: bold italic large Helvetica, sans-serif;</p>
<p style="font: normal small-caps 120%/120% monospace;">font: normal small-caps 120%/120% monospace;</p>
<p style="font: condensed oblique 12pt 'Helvetica Neue', serif;">font: condensed oblique 12pt "Helvetica Neue", serif;</p>
<p style="font: condensed oblique 25deg 12pt 'Helvetica Neue', serif;">font: condensed oblique 25deg 12pt "Helvetica Neue", serif;</p>
<p style="font-style: italic">font-style: italic</p>
</section>
<h2>Calc() values</h2>
<section>
<p style="font-family: 'Liberation Serif', cursive; font-size: calc(120% + 10px);">font-family: 'Liberation Serif', cursive; font-size: calc(120% + 10px);</p>
<p style="font: calc(120% + 10px) 'Liberation Serif', cursive;">font: calc(120% + 10px) 'Liberation Serif', cursive;</p>
<p style="font-family: 'Liberation Serif', cursive; font-weight: calc((200 * 3) + 100);">font-family: 'Liberation Serif', cursive; font-weight: calc((200 * 3) + 100);</p>
<p style="font: calc((200 * 3) + 100) 20px 'Liberation Serif', cursive;">font: calc((200 * 3) + 100) 20px 'Liberation Serif', cursive;</p>
</section>
<h2>Fallback</h2>
<section>
<p style="font: 16pt 'fake font', not-real-font, 'SerenitySans', monospace;">font: 16pt 'fake font', not-real-font, 'SerenitySans', monospace;</p>
<p style="font-family: 'fake font', not-real-font, 'SerenitySans', monospace;">font-family: 'fake font', not-real-font, 'SerenitySans', monospace;</p>
</section>
<h2>Fonts with multiple faces</h2>
<section>
<p style="font: 20px 'Liberation Serif';">font: 20px 'Liberation Serif';</p>
<p style="font: italic 20px 'Liberation Serif';">font: italic 20px 'Liberation Serif';</p>
<p style="font: bold 20px 'Liberation Serif';">font: bold 20px 'Liberation Serif';</p>
<p style="font: bold italic 20px 'Liberation Serif';">font: bold italic 20px 'Liberation Serif';</p>
</section>
</body>
</html>

10
Base/res/html/misc/form.html
View file

@ -1,10 +0,0 @@
<!DOCTYPE html>
<html>
<head><title>Form</title></head>
<body>
<form method="GET" action="form.html">
<input type="submit" value="cool" name="cyber">
<input type="text" value="hello_friends" name="greeting">
</form>
</body>
</html>

92
Base/res/html/misc/formdata.html
View file

@ -1,92 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>FormData</title>
<style>
.code-block {
background-color: grey;
color: lightgrey;
border-radius: 2px;
padding: 5px;
}
</style>
<script>
function log(s) {
document.getElementById("out").innerHTML += `${s}\n`;
}
function dumpFormContents() {
let form = document.getElementById("form1");
form.onformdata = (e) => {
log("Event 'formdata' fired.");
log(`First name logged from the formdata event: ${e.formData.get("first_name")}\n`);
}
let formData = new FormData(form);
let firstName = formData.get("first_name");
let lastName = formData.get("last_name");
let file = formData.get("avatar");
let transportTypes = formData.getAll("transport_type");
log(`First name: ${firstName}`);
log(`Last name: ${lastName}`);
log(`file: ${file.type}`);
log("Transportation types:");
for (let i = 0; transportTypes.length > i; i++)
log(` - ${transportTypes[i]}`);
log("\n Iterate over keys: ")
for (let key of formData.keys()) {
log(`Key: ${key}`);
}
log("\n Iterate over values: ")
for (let value of formData.values()) {
log(`Value: ${value}`);
}
log("\n Iterate over entries: ")
for (let entry of formData.entries()) {
log(`Entry: ${entry[0]}, ${entry[1]}`);
}
}
function postMultipartFormData() {
let form = document.getElementById("form1");
let formData = new FormData(form);
let xhr = new XMLHttpRequest;
xhr.open("POST", "http://localhost:8000");
xhr.send(formData);
}
</script>
</head>
<body>
<form id="form1">
<label for="first_name">First name:</label><br>
<input type="text" id="first_name" name="first_name" value="John"/><br>
<label for="last_name">Last name:</label><br>
<input type="text" id="last_name" name="last_name" value="Doe"/><br>
<label for="avatar">Avatar:</label><br>
<input type="file" id="avatar" name="avatar"/><br>
<p>How do you usually transport yourself?</p>
<input type="checkbox" id="transport_type1" name="transport_type" value="walking"/>
<label for="transport_type1">Walk</label><br>
<input type="checkbox" id="transport_type2" name="transport_type" value="public-transport"/>
<label for="transport_type2">Public transportation</label><br>
<input type="checkbox" id="transport_type3" name="transport_type" value="bicycle"/>
<label for="transport_type3">Bicycle</label><br>
<input type="checkbox" id="transport_type4" name="transport_type" value="motorcycle"/>
<label for="transport_type4">Motorcycle</label><br>
<input type="checkbox" id="transport_type5" name="transport_type" value="car"/>
<label for="transport_type5">Car</label><br>
</form>
<button onclick="dumpFormContents()">Test FormData Features</button>
<div style="padding-top: 30px; padding-left: 5px">To test multipart/form-data start a simple echo server:</div>
<div style="padding-left: 10px; padding-bottom: 10px"><span class="code-block">while true; do printf 'HTTP/1.1 200 OK\n' | nc -Nl 8000; done</span></div>
<button onclick="postMultipartFormData()">Test multipart/form-data</button>
<pre id="out"></pre>
</body>

46
Base/res/html/misc/fun-canvas.js
View file

@ -1,46 +0,0 @@
const makeFunCanvas = canvasId => {
c = document.getElementById(canvasId);
ctx = c.getContext("2d");
ctx.fillStyle = "black";
ctx.fillRect(0, 0, c.width, c.height);
pressed = false;
mouseX = 0;
mouseY = 0;
c.addEventListener("mousedown", function (e) {
// mousedown
pressed = true;
mouseX = e.offsetX;
mouseY = e.offsetY;
});
c.addEventListener("mouseup", function () {
// mouseup
pressed = false;
});
c.addEventListener("mousemove", function (e) {
// mousemove
mouseX = e.offsetX;
mouseY = e.offsetY;
});
function update() {
if (pressed) {
var r = Math.random() * 255;
var g = Math.random() * 255;
var b = Math.random() * 255;
var color = "rgb(" + ~~r + "," + ~~g + "," + ~~b + ")";
ctx.fillStyle = color;
const spread = 35;
var x = mouseX + Math.random() * spread - spread / 2;
var y = mouseY + Math.random() * spread - spread / 2;
var size = Math.random() * 8;
ctx.fillRect(x, y, size, size);
}
}
setInterval(update, 20);
};

1573
Base/res/html/misc/gol-wasm.html
View file

File diff suppressed because it is too large Load diff

323
Base/res/html/misc/gradients.html
View file

@ -1,323 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Gradients</title>
<style>
div {
border: 1px solid black;
margin: 20px;
}
.box {
width: 200px;
height: 200px;
}
.rect {
width: 400px;
height: 225px;
}
.grad-0 {
background-image: linear-gradient(to top, red, yellow);
}
.grad-1 {
background-image: linear-gradient(to bottom, red, yellow);
}
.grad-2 {
background-image: linear-gradient(to left, red, yellow);
}
.grad-3 {
background-image: linear-gradient(to right, red, yellow);
}
.grad-4 {
background-image: linear-gradient(to top, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
linear-gradient(to bottom, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
linear-gradient(to left, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
}
.grad-5 {
background-image: linear-gradient(to top, blue, 30%, orange, 10%, red);
}
.grad-6 {
background-image: linear-gradient(to top, blue 30%, 30%, orange 20%, 10%, red);
}
.grad-7 {
width: 400px;
height: 225px;
background-image: linear-gradient(to right, red 0%, black 20%, yellow 60%, cyan 100%);
}
.grad-8 {
background-image: linear-gradient(
to right,
red,
#f06d06,
rgb(255, 255, 0),
green
);
}
.grad-9 {
background: linear-gradient(135deg, #f2f2f2 25%, transparent 25%) -20px 0,
linear-gradient(225deg, #f2f2f2 25%, transparent 25%) -20px 0,
linear-gradient(315deg, #f2f2f2 25%, transparent 25%),
linear-gradient(45deg, #f2f2f2 25%, transparent 25%);
background-size: 40px 40px;
background-color: #50e3c2;
}
.grad-10 {
background-image: linear-gradient(90deg, red, transparent, blue);
}
.grad-11 {
background-image: linear-gradient(to top right, indigo, white, deeppink);
}
.grad-12 {
background-image: linear-gradient(to top left, indigo, white, deeppink);
}
.grad-13 {
background-image: linear-gradient(to bottom left, indigo, white, deeppink);
}
.grad-14 {
background-image: linear-gradient(to bottom right, indigo, white, deeppink);
}
.grad-webkit {
background-image: -webkit-linear-gradient(top right, yellow, black, yellow, black);
}
.grad-15 {
background-image: linear-gradient(to top left, red, green, blue);
background-size: 30px 30px;
}
.grad-hints {
background-image: linear-gradient(to right, hotpink, 50%, rebeccapurple);
}
.grad-rainbow {
background-image: linear-gradient(
to right,
tomato,
25%,
orange 0,
50%,
yellowgreen 0,
75%,
dodgerblue 0)
}
.grad-repeat-0 {
background-image: repeating-linear-gradient(#e66465, #e66465 20px, #9198e5 20px, #9198e5 25px);
}
.grad-repeat-1 {
background-image: repeating-linear-gradient(45deg, #3f87a6, #ebf8e1 15%, #f69d3c 20%);
}
.grad-repeat-2 {
background-image: repeating-linear-gradient(transparent, #4d9f0c 40px),
repeating-linear-gradient(0.25turn, transparent, #3f87a6 20px);
}
.grad-repeat-3 {
background-image: -webkit-repeating-linear-gradient(left, red 10%, blue 30%);
}
.grad-double-position {
background-image: linear-gradient(to right,red 20%, orange 20% 40%, yellow 40% 60%, green 60% 80%, blue 80%)
}
.grad-conic-1 {
background-image: conic-gradient(red, orange, yellow, green, blue);
}
.grad-conic-2 {
background-image: conic-gradient(from 0.25turn at 50% 30%, #f69d3c, 10deg, #3f87a6, 350deg, #ebf8e1);
}
.grad-conic-3 {
background-image: conic-gradient(from 3.1416rad at 10% 50%, #e66465, #9198e5);
}
.grad-conic-4 {
background-image: conic-gradient(
red 6deg, orange 6deg 18deg, yellow 18deg 45deg,
green 45deg 110deg, blue 110deg 200deg, purple 200deg);
}
.grad-conic-5 {
background-image: conic-gradient(at 60% 45%, red, yellow, green);
}
.grad-conic-6 {
background-image: conic-gradient(red 0deg, red 90deg, yellow 90deg, yellow 180deg, green 180deg, green 270deg, blue 270deg);
}
.grad-conic-repeat-1 {
background-image: repeating-conic-gradient(
red 0%,
yellow 15%,
red 33%
);
}
.grad-conic-repeat-2 {
background-image: repeating-conic-gradient(
from 45deg at 10% 50%,
brown 0deg 10deg,
darkgoldenrod 10deg 20deg,
chocolate 20deg 30deg
);
}
.grad-radial-1 {
background-image: radial-gradient(#e66465, #9198e5);
}
.grad-radial-2 {
background-image: radial-gradient(closest-side, #3f87a6, #ebf8e1, #f69d3c);
}
.grad-radial-3 {
background-image: radial-gradient(circle at 100px, #333, #333 50%, #eee 75%, #333 75%);
}
.grad-radial-4 {
background-image: radial-gradient(200px 100px ellipse at 25% 50%, yellow, #009966, purple);
}
.grad-radial-repeat-1 {
background-image: repeating-radial-gradient(#e66465, #9198e5 20%);
}
.grad-radial-repeat-2 {
background-image: repeating-radial-gradient(closest-side, #3f87a6, #ebf8e1, #f69d3c);
}
.grad-radial-repeat-3 {
background-image: repeating-radial-gradient(circle at 100%, #333, #333 10px, #eee 10px, #eee 20px);
}
</style>
</head>
<body>
<h1>Gradients!</h1>
<b>Simple gradients:</b><br/>
<div class="box grad-0"></div>
<div class="box grad-1"></div>
<div class="box grad-2"></div>
<div class="box grad-3"></div>
<div class="box grad-4"></div>
<b>Funky transition hints:</b><br>
<div class="box grad-5"></div>
<div class="box grad-6"></div>
<div class="box grad-rainbow"></div>
<b>Transition hint test (click to animate):</b><br>
<div id="gradient-hints" class="box grad-hints"></div>
<b>Multiple color stops + arbitrary angles (click to spin!):</b><br>
<div id="gradient-spin" class="rect grad-7"></div>
<b>Default color stops:</b><br>
<div class="box grad-8"></div>
<b>Cool pattern demo</b><br>
<div class="box grad-9"></div>
<b>Pre-multiplied alpha mixing test:</b><br>
<div class="box grad-10"></div>
<b>To corner:</b><br>
<div class="rect grad-11"></div>
<div class="rect grad-12"></div>
<div class="rect grad-13"></div>
<div class="rect grad-14"></div>
<b>With background size:</b><br>
<div class="rect grad-15"></div>
<b>A webkit gradient</b><br>
<div class="box grad-webkit"></div>
<b>Repeating gradients</b><br>
<div class="box grad-repeat-0"></div>
<div class="box grad-repeat-1"></div>
<div class="box grad-repeat-2"></div>
<div class="box grad-repeat-3"></div>
<b>Double-position color stops</b><br>
<div class="box grad-double-position"></div>
<b>Conic gradients</b><br>
<div class="box grad-conic-1"></div>
<div class="box grad-conic-2"></div>
<div class="box grad-conic-3"></div>
<div class="box grad-conic-4"></div>
<div class="box grad-conic-5"></div>
<div class="box grad-conic-6"></div>
<b>Repeating conic gradients</b><br>
<div class="box grad-conic-repeat-1"></div>
<div class="box grad-conic-repeat-2"></div>
<b>Radial gradients</b><br>
<div class="rect grad-radial-1"></div>
<div class="rect grad-radial-2"></div>
<div class="rect grad-radial-3"></div>
<div class="rect grad-radial-4"></div>
<b>Repeating radial gradients</b><br>
<div class="rect grad-radial-repeat-1"></div>
<div class="rect grad-radial-repeat-2"></div>
<div class="rect grad-radial-repeat-3"></div>
</body>
<script>
const boxes = document.querySelectorAll(".box, .rect");
const backgroundMap = {};
for (const rule of document.styleSheets[0].cssRules) {
backgroundMap[rule.selectorText] = rule.style.backgroundImage;
}
// Extract backgroundImage CSS and place above each box
updateLabels = () => {
boxes.forEach(box => {
const grad = box.classList[1];
const cssText = backgroundMap['.'+grad];
let el = document.getElementById(grad);
let newEl = document.createElement('code');
let text = document.createTextNode(box.style.backgroundImage || cssText);
newEl.appendChild(text);
newEl.id = grad;
if (!el)
box.parentNode.insertBefore(newEl, box)
else
box.parentNode.replaceChild(newEl, el);
})
}
const backgroundAnimateDemo = (id, newBackgroundCallback) => {
const el = document.getElementById(id);
let t = 0;
let demoIntervalId = -1;
el.onclick = () => {
if (demoIntervalId <= -1) {
demoIntervalId = setInterval(() => {
el.style.backgroundImage = newBackgroundCallback(t);
t += 1;
updateLabels();
}, 100)
} else {
clearInterval(demoIntervalId);
demoIntervalId = -1;
}
}
}
// Spinning gradient demo/test
backgroundAnimateDemo("gradient-spin", angle => `linear-gradient(${angle}deg, red 0%, black 20%, yellow 60%, cyan 100%)`)
// Transition hints demo
backgroundAnimateDemo("gradient-hints", t => `linear-gradient(to right, hotpink, ${((Math.sin(t/4)+1)*50)|0}%, rebeccapurple)`)
updateLabels();
</script>
</html>

13
Base/res/html/misc/hover.html
View file

@ -1,13 +0,0 @@
<html>
<head>
<title>Hover test!</title>
<style>
a:hover {
color: red;
}
</style>
</head>
<body>
<a href="hover.html">this is a link</a>
</body>
</html>

29
Base/res/html/misc/html-escape-test.html
View file

@ -1,29 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>HTML Escape</title>
</head>
<body>
<pre>Code Character EscVersion Unicode Bytes Name
---------------------------------------------------------------------------------------
228 ä &#228; &#xE4; U+00E4 C3 A4 LATIN SMALL LETTER A WITH DIAERESIS
229 å &#229; &#xE5; U+00E5 C3 A5 LATIN SMALL LETTER A WITH RING
287 ğ &#287; &#x11F; U+011F C4 9E LATIN SMALL LETTER G WITH BREVE
252 ü &#252; &#xFC; U+00FC C3 BC LATIN SMALL LETTER U WITH DIAERESIS
351 ş &#351; &#x15F; U+015F C5 9F LATIN SMALL LETTER S WITH CEDILLA
305 ı &#305; &#x131; U+0131 C4 B1 LATIN SMALL LETTER DOTLESS I
246 ö &#246; &#xf6; U+00F6 C3 B6 LATIN SMALL LETTER O WITH DIAERESIS
231 ç &#231; &#xe7; U+00E7 C3 A7 LATIN SMALL LETTER C WITH CEDILLA
---------------------------------------------------------------------------------
196 Ä &#196; &#xC4; U+00C4 C3 84 LATIN CAPITAL LETTER A WITH DIAERESIS
197 Å &#197; &#xC5; U+00C5 C3 85 LATIN CAPITAL LETTER A WITH RING
286 Ğ &#286; &#x11E; U+011E C4 9E LATIN CAPITAL LETTER G WITH BREVE
220 Ü &#220; &#xDC; U+00DC C3 9C LATIN CAPITAL LETTER U WITH DIAERESIS
350 Ş &#350; &#x15E; U+015E C5 9E LATIN CAPITAL LETTER S WITH CEDILLA
304 İ &#304; &#x130; U+0130 C4 B0 LATIN CAPITAL LETTER I WITH DOT ABOVE
214 Ö &#214; &#xD6; U+00D6 C3 96 LATIN CAPITAL LETTER O WITH DIAERESIS
199 Ç &#199; &#xC7; U+00C7 C3 87 LATIN CAPITAL LETTER C WITH CEDILLA
</pre>
</body>
</html>

2
Base/res/html/misc/iframe-subframe.html
View file

@ -1,2 +0,0 @@
This is inside the frame!
<img src=90s-bg.png>

6
Base/res/html/misc/iframe.html
View file

@ -1,6 +0,0 @@
<body>
<p>This page has an iframe in it
<p>Cool huh?
<iframe width=300 height=200 src="iframe-subframe.html" style="border: 1px solid #444"></iframe>
<p><b>this text is after the iframe</b>
</body>

16
Base/res/html/misc/image-rendering.html
View file

@ -1,16 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>image-rendering property</title>
</head>
<body>
<h1>image-rendering property</h1>
<p>This image should be blurred:</p>
<img style="width: 256px" src="file:///res/graphics/buggie.png">
<p>This image should be blurred:</p>
<img style="image-rendering: auto; width: 256px" src="file:///res/graphics/buggie.png">
<p>This image should be pixelated:</p>
<img style="image-rendering: pixelated; width: 256px" src="file:///res/graphics/buggie.png">
</body>
</html>

26
Base/res/html/misc/images.html
View file

@ -1,26 +0,0 @@
<html>
<head>
<title>Pretty pictures!</title>
</head>
<body>
<center>
<h1>Look, pictures!</h1>
<img alt="serenity logo (squished)" src="file:///res/graphics/buggie.png" width="40" height="40" />
<img alt="serenity logo (normal)" src="file:///res/graphics/buggie.png" width="64" height="64" />
<img alt="serenity logo (stretched)" src="file:///res/graphics/buggie.png" width="100" height="100" />
<img alt="serenity logo (unspecified size)" src="file:///res/graphics/buggie.png" />
<h1>Look, not pictures!</h1>
<img alt="invalid path (64x64)" src="file:///res/graphics/file-does-not-exist.png" width="64" height="64" />
<img alt="invalid path (100x100)" src="file:///res/graphics/file-does-not-exist.png" width="100" height="100" />
<img alt="invalid path (unspecified size)" src="file:///res/graphics/file-does-not-exist.png" />
<img src="file:///res/graphics/file-does-not-exist.png" />
<h1>Look, scaling!</h1>
<img alt="serenity screenshot (10%)" src="serenity-screenshot.png" width="102" height="77" /> <br/>
<img alt="serenity screenshot (20%)" src="serenity-screenshot.png" width="204" height="153" /> <br/>
<img alt="serenity screenshot (50%)" src="serenity-screenshot.png" width="512" height="384" /> <br/>
<img alt="serenity screenshot (150%)" src="serenity-screenshot.png" width="1536" height="1152" />
</center>
</body>
</html>

28
Base/res/html/misc/img-canvas.html
View file

@ -1,28 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>canvas drawImage() test</title>
<style>
canvas {
border: 1px solid black;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
img = document.querySelector("img");
img.addEventListener("load", function() {
var ctx = document.querySelector("canvas").getContext("2d");
ctx.fillStyle = '#666';
ctx.fillRect(0, 0, 400, 400);
ctx.scale(2, 2);
ctx.drawImage(img, 30, 30);
});
});
</script>
</head>
<body>
<canvas width=400 height=400></canvas>
<img src="../../../res/graphics/buggie.png">
</body>
</html>

15
Base/res/html/misc/inline-block-link.html
View file

@ -1,15 +0,0 @@
<html>
<head>
<style>
p {
display: inline-block;
}
</style>
</head>
<body>
<p>
Here is some test text.
Here is a <a href="http://example.com">test link</a>.
</p>
</body>
</html>

20
Base/res/html/misc/inline-block.html
View file

@ -1,20 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>display: inline-block</title>
<style>
div {
display: inline-block;
width: 200px;
height: 100px;
margin: 20px;
border: 1px solid black;
}
</style>
</head>
<body>
<div>Hello friends! This <b>div</b> has <b>display: inline-block</b> :^)</div>
<div>Hello friends! That means its laid out like a block on the inside.</div>
<div>Hello friends! But it acts like an atomic inline box on the outside!</div>
</body>
</html>

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