1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-27 03:47:35 +00:00

LibWeb+headless-browser: Replace ref-test manifest with link tags

Each ref test now links to its reference page with a link tag, in the
same format as WPT:

`<link rel="match" href="reference-page.html" />`

The reference pages have all been moved into a separate `reference/` dir
so that we can just treat every file in `ref/` as a test. There's no
filter to only look at .html files, because we also have a .svg file in
there, and there may be other formats we want to use too. But it's not
too hard to add one if we need it.
This commit is contained in:
Sam Atkins 2023-09-12 18:40:47 +01:00 committed by Andreas Kling
parent f3add3dd72
commit e0fe77d012
53 changed files with 46 additions and 52 deletions

View file

@ -0,0 +1 @@
<!-- This page is intentionally left blank. -->

View file

@ -0,0 +1,15 @@
<!DOCTYPE html><style type="text/css">
* {
background-color: white;
}
body {
border: 1px solid black;
outline: 1px solid black;
}
.outer {
position: absolute;
}
.inner {
position: absolute;
}
</style><div class="outer"><div class="inner">

View file

@ -0,0 +1,10 @@
<!DOCTYPE html><style type="text/css">
* {
background-color: white;
}
.clip {
width: 100px;
height: 50px;
overflow: hidden;
}
</style><div class="clip">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

View file

@ -0,0 +1 @@
<a href="example.com" style="color: orange">Link</a>

View file

@ -0,0 +1,2 @@
<!doctype html>
<div>Well, hello friends!</div>

View file

@ -0,0 +1,22 @@
<!doctype html>
<style>
div {
width: 100px;
height: 20px;
border: 1px solid black;
}
.length {
width: 200px;
}
.px {
width: 200px;
}
.color {
background-color: #00ff00;
}
</style>
<div>WHF!</div>
<div class="length"></div>
<div class="px"></div>
<div class="color" foo="green"></div>
<div class="color" foo="#00ff00"></div>

View file

@ -0,0 +1,10 @@
<html>
<style>
div {
width: 200px;
height: 200px;
background: linear-gradient(green, white);
}
</style>
<div></div>
</html>

View file

@ -0,0 +1,15 @@
<style>
* {
margin: 0;
}
body {
background-color: white;
}
</style>
<!-- To rebase:
1. Open css-gradients.html in Ladybird
2. Resize the window just above the width of the largest gradient
3. Right click > "Take Full Screenshot"
4. Update the image below:
-->
<img src="./images/css-gradients-ref.png">

View file

@ -0,0 +1,5 @@
<!doctype html><style>
div {
color: black;
}
</style><div>This text should be black.

View file

@ -0,0 +1,16 @@
<html lang="en">
<style>
div {
width: 100px;
height: 100px;
border: 1px solid black;
background-color: red;
}
#fr, #de {
background-color: blue;
}
</style>
<div>Red</div>
<div id="fr">Blue</div>
<div id="de">Blue</div>
</html>

View file

@ -0,0 +1,2 @@
<a href="" style="color: orange">Local</a>
<a href="example.com">Not local</a>

View file

@ -0,0 +1,9 @@
<style>
.placeholder-shown {
background-color: yellow;
}
</style>
<input type="text" placeholder="hi" class="placeholder-shown">
<input type="text" placeholder="hi" value="I like turtles">
<input type="text">
<input type="text" value="I like turtles">

View file

@ -0,0 +1,13 @@
<style>
.read-write {
background-color: green;
}
.read-only {
border: 4px solid magenta;
}
</style>
<input type="text" class="read-only">
<input type="text" class="read-write">
<p class="read-only">Well hello friends</p>
<p class="read-write">Well hello friends</p>

View file

@ -0,0 +1,8 @@
<!doctype html><style type="text/css">
body { display: grid; }
.bar {
outline: 1px solid black;
grid-area: 1 / 1 / auto / auto;
background: orange;
}
</style><body><div class="bar">bar</div>

Binary file not shown.

After

Width:  |  Height:  |  Size: 317 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 33 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 861 KiB

View file

@ -0,0 +1,6 @@
<!doctype html>
<img
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQIW2NgaGD4DwAChAGAZM0bBgAAAABJRU5ErkJggg=="
width="400"
height="400"
/>

View file

@ -0,0 +1,8 @@
<!doctype html><style type="text/css">
body { display: grid; }
.foo {
outline: 1px solid black;
grid-area: 1 / 1 / auto / auto;
background: pink;
}
</style><body><div class="foo">foo</div>

View file

@ -0,0 +1,9 @@
<style>
body {
background-color: white;
}
</style>
<svg width="600" viewBox="0 0 150 100" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="50" r="40" fill="#b3b3b3" />
<circle cx="50" cy="50" r="40" fill="blue" />
</svg>

View file

@ -0,0 +1,16 @@
<style type="text/css">
td {
border: 5px solid blue;
padding: 20px;
}
table {
border: 5px solid black;
border-collapse: separate;
}
</style>
<table>
<tr>
<td>A</td>
</tr>
</table>

View file

@ -0,0 +1,7 @@
<style>
.box {
width: 100px;
height: 100px;
background-color: pink;
}
</style><div class="box"></div>

View file

@ -0,0 +1,13 @@
<style>
* {
margin: 0;
}
</style>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<g id="10">
<rect width="50" height="50" fill="#555555"></rect>
</g>
</defs>
<use href="#10" x="25" y="25"></use>
</svg>

View file

@ -0,0 +1,15 @@
<style>
* {
margin: 0;
}
body {
background-color: white;
}
</style>
<!-- To rebase:
1. Open svg-gradient-spreadMethod.html in Ladybird
2. Resize the window just above the width of the largest gradient
3. Right click > "Take Full Screenshot"
4. Update the image below:
-->
<img src="./images/svg-gradient-spreadMethod-ref.png">

View file

@ -0,0 +1,15 @@
<style>
* {
margin: 0;
}
body {
background-color: white;
}
</style>
<!-- To rebase:
1. Open svg-radialGradient.html in Ladybird
2. Resize the window just above the width of the largest gradient
3. Right click > "Take Full Screenshot"
4. Update the image below:
-->
<img src="./images/svg-radialGradient-ref.png">

View file

@ -0,0 +1,5 @@
<svg><symbol fill="green" id="dot" width="500" height="500" viewBox="0 0 2 10">
<circle cx="1" cy="1" r="1"/>
<circle fill="blue" cx="1.5" cy="1" r="1"/>
</symbol>
<use href="#dot"/>

After

Width:  |  Height:  |  Size: 183 B