RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-26 17:47:44 +00:00
Code Issues Activity Actions

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

Browse source 
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
Download patch file Download diff file Expand all files Collapse all files

1
Tests/LibWeb/Ref/reference/border-radius-shrink-zero-sized-box-ref.html Normal file
View file

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

15
Tests/LibWeb/Ref/reference/clip-abspos-children-ref.html Normal file
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">

10
Tests/LibWeb/Ref/reference/clip-ref.html Normal file
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.

1
Tests/LibWeb/Ref/reference/css-any-link-selector-ref.html Normal file
View file

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

2
Tests/LibWeb/Ref/reference/css-attr-ref.html Normal file
View file

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

22
Tests/LibWeb/Ref/reference/css-attr-typed-ref.html Normal file
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>

10
Tests/LibWeb/Ref/reference/css-gradient-currentcolor-ref.html Normal file
View file

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

15
Tests/LibWeb/Ref/reference/css-gradients-ref.html Normal file
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">

5
Tests/LibWeb/Ref/reference/css-invalid-var-ref.html Normal file
View file

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

16
Tests/LibWeb/Ref/reference/css-lang-selector-ref.html Normal file
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>

2
Tests/LibWeb/Ref/reference/css-local-link-selector-ref.html Normal file
View file

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

9
Tests/LibWeb/Ref/reference/css-placeholder-shown-selector-ref.html Normal file
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">

13
Tests/LibWeb/Ref/reference/css-read-only-read-write-selectors-ref.html Normal file
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>

8
Tests/LibWeb/Ref/reference/grid-items-painting-order-ref.html Normal file
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>

BIN
Tests/LibWeb/Ref/reference/images/css-gradients-ref.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 317 KiB

BIN
Tests/LibWeb/Ref/reference/images/svg-gradient-spreadMethod-ref.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 33 KiB

BIN
Tests/LibWeb/Ref/reference/images/svg-radialGradient-ref.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 861 KiB

6
Tests/LibWeb/Ref/reference/img-srcset-viewport-relative-sizes-ref.html Normal file
View file

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

8
Tests/LibWeb/Ref/reference/item-with-negative-z-index-ref.html Normal file
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>

9
Tests/LibWeb/Ref/reference/opacity-stacking-ref.html Normal file
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>

16
Tests/LibWeb/Ref/reference/separate-borders-ref.html Normal file
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>

7
Tests/LibWeb/Ref/reference/square-ref.html Normal file
View file

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

13
Tests/LibWeb/Ref/reference/svg-file-matches-html-file.html Normal file
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>

15
Tests/LibWeb/Ref/reference/svg-gradient-spreadMethod-ref.html Normal file
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">

15
Tests/LibWeb/Ref/reference/svg-radialGradient-ref.html Normal file
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">

5
Tests/LibWeb/Ref/reference/svg-symbol-ref.html Normal file
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"/>
Side by side

After

Width:  |  Height:  |  Size: 183 B