ladybird/Tests/LibWeb/Screenshot/input/css-compositing.html
Jelle Raaijmakers 59a867d3e3
Some checks are pending
CI / Linux, x86_64, Fuzzers, Clang (push) Waiting to run
CI / Linux, x86_64, Sanitizer, GNU (push) Waiting to run
CI / macOS, arm64, Sanitizer, Clang (push) Waiting to run
CI / Linux, x86_64, Sanitizer, Clang (push) Waiting to run
Package the js repl as a binary artifact / Linux, arm64 (push) Waiting to run
Package the js repl as a binary artifact / macOS, arm64 (push) Waiting to run
Package the js repl as a binary artifact / Linux, x86_64 (push) Waiting to run
Run test262 and test-wasm / run_and_update_results (push) Waiting to run
Lint Code / lint (push) Waiting to run
Label PRs with merge conflicts / auto-labeler (push) Waiting to run
Push notes / build (push) Waiting to run
Tests: Enable all screenshot tests on all platforms
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.
2025-07-17 12:59:11 +01:00

45 lines
1.2 KiB
HTML

<!DOCTYPE html>
<link rel="match" href="../expected/css-compositing-ref.html" />
<meta name="fuzzy" content="maxDifference=0-3;totalPixels=0-2915">
<style>
div {
position: absolute;
width: 60px;
height: 60px;
opacity: 50%;
}
#d1 {
background-color: rgb(186, 190, 92);
}
#d2 {
background-color: linear-gradient(to right rgb(255, 132, 0) 51%),
linear-gradient(to right, rgb(255, 0, 212));
background-blend-mode: normal, difference;
mix-blend-mode: screen;
top: 10px;
}
#d3 {
background-color: rgb(21, 107, 118);
isolation: isolate;
mix-blend-mode: multiply;
top: 20px;
}
#d4 {
background-color: linear-gradient(to right rgb(77, 145, 113) 51%),
linear-gradient(to right, rgb(60, 118, 41));
background-blend-mode: normal, exclusion;
mix-blend-mode: normal;
isolation: isolate;
top: 30px;
}
#d5 {
background-color: rgb(34, 29, 78);
mix-blend-mode: difference;
top: 40px;
}
</style>
<div id="d1">111</div>
<div id="d2">222</div>
<div id="d3">333</div>
<div id="d4">444</div>
<div id="d5">555</div>