OSSForks/ladybird
1
0
Fork 0
mirror of https://github.com/zebrajr/ladybird.git synced 2025-12-06 12:20:00 +01:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Tests: Rework CSS gradients test layout

Browse Source 
Put the CSS gradients in a grid instead of a single long column. This
makes it much easier to detect changes / view diffs.
This commit is contained in:
Jelle Raaijmakers 2025-10-21 16:51:49 +02:00 committed by Jelle Raaijmakers
parent e6ddc995a7
commit 8af6da64a6
2 changed files with 22 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
Tests/LibWeb/Screenshot/images/css-gradients-ref.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 527 KiB

After

Width:  |  Height:  |  Size: 444 KiB

34
Tests/LibWeb/Screenshot/input/css-gradients.html
View File

@ -1,15 +1,24 @@
<!DOCTYPE html> <!DOCTYPE html>
<html>
<link rel="match" href="../expected/css-gradients-ref.html" /> <link rel="match" href="../expected/css-gradients-ref.html" />
<meta name="fuzzy" content="maxDifference=0-63;totalPixels=0-362"> <meta name="fuzzy" content="maxDifference=0-63;totalPixels=0-215">
<style> <style>
body { body {
background-color: white; background-color: white;
} }
section.boxes {
display: grid;
grid-template-columns: repeat(6, 1fr);
}
section.rects {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
div { div {
border: 1px solid black; border: 1px solid black;
margin: 20px; margin: 5px;
} }
.box { .box {
@ -210,7 +219,7 @@
background-image: repeating-radial-gradient(circle at calc(100% - 10px) calc(20% + 10px), #333, #333 10px, #eee 10px, #eee 20px); background-image: repeating-radial-gradient(circle at calc(100% - 10px) calc(20% + 10px), #333, #333 10px, #eee 10px, #eee 20px);
} }
</style> </style>
<body> <section class="boxes">
<div class="box grad-0"></div> <div class="box grad-0"></div>
<div class="box grad-1"></div> <div class="box grad-1"></div>
<div class="box grad-2"></div> <div class="box grad-2"></div>
@ -220,15 +229,9 @@
<div class="box grad-6"></div> <div class="box grad-6"></div>
<div class="box grad-rainbow"></div> <div class="box grad-rainbow"></div>
<div class="box grad-hints"></div> <div class="box grad-hints"></div>
<div class="rect grad-7"></div>
<div class="box grad-8"></div> <div class="box grad-8"></div>
<div class="box grad-9"></div> <div class="box grad-9"></div>
<div class="box grad-10"></div> <div class="box grad-10"></div>
<div class="rect grad-11"></div>
<div class="rect grad-12"></div>
<div class="rect grad-13"></div>
<div class="rect grad-14"></div>
<div class="rect grad-15"></div>
<div class="box grad-webkit"></div> <div class="box grad-webkit"></div>
<div class="box grad-repeat-0"></div> <div class="box grad-repeat-0"></div>
<div class="box grad-repeat-1"></div> <div class="box grad-repeat-1"></div>
@ -243,6 +246,14 @@
<div class="box grad-conic-6"></div> <div class="box grad-conic-6"></div>
<div class="box grad-conic-repeat-1"></div> <div class="box grad-conic-repeat-1"></div>
<div class="box grad-conic-repeat-2"></div> <div class="box grad-conic-repeat-2"></div>
</section>
<section class="rects">
<div class="rect grad-7"></div>
<div class="rect grad-11"></div>
<div class="rect grad-12"></div>
<div class="rect grad-13"></div>
<div class="rect grad-14"></div>
<div class="rect grad-15"></div>
<div class="rect grad-radial-1"></div> <div class="rect grad-radial-1"></div>
<div class="rect grad-radial-2"></div> <div class="rect grad-radial-2"></div>
<div class="rect grad-radial-3"></div> <div class="rect grad-radial-3"></div>
@ -251,5 +262,4 @@
<div class="rect grad-radial-repeat-2"></div> <div class="rect grad-radial-repeat-2"></div>
<div class="rect grad-radial-repeat-3"></div> <div class="rect grad-radial-repeat-3"></div>
<div class="rect grad-radial-calc"></div> <div class="rect grad-radial-calc"></div>
</body> </section>
</html>