mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2026-04-19 10:20:22 +00:00
59a867d3e3
With the newly supported fuzzy matching in our test-web runner, we can now define the expected maximum color channel and pixel count errors per failing test and set a baseline they should not exceed. The figures I added to these tests all come from my macOS M4 machine. Most discrepancies seem to come from color calculations being slightly off.
77 lines
2.1 KiB
HTML
77 lines
2.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<link rel="match" href="../expected/outer-box-shadow-ref.html" />
|
|
<meta name="fuzzy" content="maxDifference=0-2;totalPixels=0-19189">
|
|
<head>
|
|
<style>
|
|
.box {
|
|
border: 1px solid black;
|
|
height: 100px;
|
|
width: 100px;
|
|
margin: 50px;
|
|
}
|
|
|
|
#with-bg {
|
|
background-image: linear-gradient(to right, red, blue, cyan, yellow, green);
|
|
|
|
width: 240px;
|
|
padding-top: 60px;
|
|
}
|
|
|
|
.cmy {
|
|
box-shadow: 20px 10px 5px magenta, cyan -20px -10px 5px, yellow 10px -5px 5px 20px;
|
|
}
|
|
|
|
body {
|
|
background-color: white;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="no-bg">
|
|
<div class="box cmy" style="border-radius: 50%;">
|
|
</div>
|
|
<div class="box cmy" style="border-radius: 80% 15% 55% 50% / 55% 15% 80% 50%;">
|
|
</div>
|
|
<div class="box cmy" style="border-radius: 20px;">
|
|
</div>
|
|
<div class="box" style="box-shadow: magenta -40px -20px; border-radius: 30%;">
|
|
</div>
|
|
<div class="box cmy">
|
|
</div>
|
|
<div class="box" style="box-shadow: 20px 10px 5px magenta">
|
|
</div>
|
|
<div class="box" style="box-shadow: 20px 10px magenta">
|
|
</div>
|
|
<div class="box" style="box-shadow: magenta -40px -20px">
|
|
</div>
|
|
<div class="box" style="box-shadow: 20px 10px rgba(255,0,255,0.5)">
|
|
</div>
|
|
<div class="box" style="box-shadow: -40px -20px rgba(255,0,255,0.5)">
|
|
</div>
|
|
</div>
|
|
<div id="with-bg">
|
|
<div class="box cmy" style="border-radius: 50%;">
|
|
</div>
|
|
<div class="box cmy" style="border-radius: 80% 15% 55% 50% / 55% 15% 80% 50%;">
|
|
</div>
|
|
<div class="box cmy" style="border-radius: 20px;">
|
|
</div>
|
|
<div class="box" style="box-shadow: magenta -40px -20px; border-radius: 30%;">
|
|
</div>
|
|
<div class="box cmy">
|
|
</div>
|
|
<div class="box" style="box-shadow: 20px 10px 5px magenta">
|
|
</div>
|
|
<div class="box" style="box-shadow: 20px 10px magenta">
|
|
</div>
|
|
<div class="box" style="box-shadow: magenta -40px -20px">
|
|
</div>
|
|
<div class="box" style="box-shadow: 20px 10px rgba(255,0,255,0.5)">
|
|
</div>
|
|
<div class="box" style="box-shadow: -40px -20px rgba(255,0,255,0.5)">
|
|
</div>
|
|
</div>
|
|
</body>
|
|
|
|
</html>
|