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.
82 lines
4.1 KiB
HTML
82 lines
4.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<title>CSS Background Tests</title>
|
|
<link rel="match" href="../expected/css-backgrounds-ref.html" />
|
|
<meta name="fuzzy" content="maxDifference=0-21;totalPixels=0-36803">
|
|
<style>
|
|
.box {
|
|
width: 180px;
|
|
height: 160px;
|
|
border: 1px solid black;
|
|
padding: 5px 10px 15px 20px;
|
|
overflow: auto;
|
|
margin-bottom: 10px;
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
.force-scroll {
|
|
width: 500px;
|
|
height: 500px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- FIXME: Workaround to ensure CSS background-image is loaded before taking screenshot: https://github.com/LadybirdBrowser/ladybird/issues/3448 -->
|
|
<img src="../data/smiley.png"/>
|
|
|
|
<div class="box" style="background: url('../data/smiley.png') fixed;">
|
|
<div class="force-scroll"></div>
|
|
</div>
|
|
<div class="box" style="background-image: url('../data/smiley.png'); background-attachment: fixed;">
|
|
<div class="force-scroll"></div>
|
|
</div>
|
|
|
|
<div class="box" style="background: url('../data/smiley.png') local">
|
|
<div class="force-scroll"></div>
|
|
</div>
|
|
<div class="box" style="background-image: url('../data/smiley.png'); background-attachment: local">
|
|
<div class="force-scroll"></div>
|
|
</div>
|
|
|
|
<div class="box" style="background: url('../data/smiley.png') scroll">
|
|
<div class="force-scroll"></div>
|
|
</div>
|
|
<div class="box" style="background-image: url('../data/smiley.png'); background-attachment: scroll">
|
|
<div class="force-scroll"></div>
|
|
</div>
|
|
|
|
<div class="box" style="background: url('../data/smiley.png') bottom 5% right 10px no-repeat"></div>
|
|
<div class="box" style="background-image: url('../data/smiley.png'); background-position: bottom 5% right 10px; background-repeat: no-repeat"></div>
|
|
|
|
|
|
<div class="box" style="background: url('../data/smiley.png') yellow padding-box content-box"></div>
|
|
<div class="box" style="background-image: url('../data/smiley.png'); background-color: yellow; background-origin: padding-box; background-clip: content-box"></div>
|
|
|
|
<div class="box" style="background: url('../data/smiley.png') center / contain"></div>
|
|
<div class="box" style="background-image: url('../data/smiley.png'); background-position: center; background-size: contain"></div>
|
|
|
|
<div class="box" style="background: url('../data/smiley.png') center / cover"></div>
|
|
<div class="box" style="background-image: url('../data/smiley.png'); background-position: center; background-size: cover"></div>
|
|
|
|
<div class="box" style="background: url('../data/smiley.png') top / 50% 25px"></div>
|
|
<div class="box" style="background-image: url('../data/smiley.png'); background-position: top; background-size: 50% 25px"></div>
|
|
|
|
<div class="box" style="background: url('../data/smiley.png') space"></div>
|
|
<div class="box" style="background-image: url('../data/smiley.png'); background-repeat: space"></div>
|
|
|
|
<div class="box" style="background: url('../data/smiley.png') round"></div>
|
|
<div class="box" style="background-image: url('../data/smiley.png'); background-repeat: round"></div>
|
|
|
|
<div class="box" style="background: url('../data/smiley.png') space round"></div>
|
|
<div class="box" style="background-image: url('../data/smiley.png'); background-repeat: space round"></div>
|
|
|
|
<div class="box" style="background: url('../data/smiley.png') no-repeat top 5px left 5px, url('../data/smiley.png') no-repeat top 5px right 5px, url('../data/smiley.png') no-repeat bottom 5px left 5px, url('../data/smiley.png') no-repeat bottom 5px right 5px, url('../data/smiley.png') no-repeat center cyan"></div>
|
|
<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('../data/smiley.png'), url('../data/smiley.png'), url('../data/smiley.png'), url('../data/smiley.png'), url('../data/smiley.png');"></div>
|
|
</body>
|
|
|
|
</html>
|