mirror of
https://github.com/LadybirdBrowser/ladybird
synced 2026-04-27 18:17:22 +02: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.
87 lines
2.5 KiB
HTML
87 lines
2.5 KiB
HTML
<!DOCTYPE html>
|
|
<link rel="match" href="../expected/clip-path-transformed-ref.html" />
|
|
<meta name="fuzzy" content="maxDifference=0-1;totalPixels=0-15">
|
|
<style>
|
|
body {
|
|
font-size: 0;
|
|
}
|
|
|
|
.outer {
|
|
margin: 5px;
|
|
width: 130px;
|
|
height: 80px;
|
|
display: inline-block;
|
|
background-color: grey;
|
|
outline: 2px solid black;
|
|
}
|
|
|
|
.inner {
|
|
height: 100%;
|
|
background-color: black;
|
|
clip-path: polygon(evenodd, 65px 0px, 35px 80px, 105px 30px, 25px 30px, 95px 80px);
|
|
}
|
|
</style>
|
|
<div class="outer" style="transform: matrix(1, 2, 3, 4, 5, 6)">
|
|
<div class="inner"></div>
|
|
</div>
|
|
<div class="outer" style="transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)">
|
|
<div class="inner"></div>
|
|
</div>
|
|
<div class="outer" style="transform: perspective(17px)">
|
|
<div class="inner"></div>
|
|
</div>
|
|
<div class="outer" style="transform: rotate(0.5turn)">
|
|
<div class="inner"></div>
|
|
</div>
|
|
<div class="outer" style="transform: rotateX(10deg)">
|
|
<div class="inner"></div>
|
|
</div>
|
|
<div class="outer" style="transform: rotateY(10deg)">
|
|
<div class="inner"></div>
|
|
</div>
|
|
<div class="outer" style="transform: rotateZ(10deg)">
|
|
<div class="inner"></div>
|
|
</div>
|
|
<div class="outer" style="transform: translate(12px, 50%)">
|
|
<div class="inner"></div>
|
|
</div>
|
|
<div class="outer" style="transform: translate3d(12px, 50%, 3em)">
|
|
<div class="inner"></div>
|
|
</div>
|
|
<div class="outer" style="transform: translateX(2em)">
|
|
<div class="inner"></div>
|
|
</div>
|
|
<div class="outer" style="transform: translateY(3in)">
|
|
<div class="inner"></div>
|
|
</div>
|
|
<div class="outer" style="transform: translateZ(2px)">
|
|
<div class="inner"></div>
|
|
</div>
|
|
<div class="outer" style="transform: scale(2, 0.5)">
|
|
<div class="inner"></div>
|
|
</div>
|
|
<div class="outer" style="transform: scale3d(2.5, 1.2, 0.3)">
|
|
<div class="inner"></div>
|
|
</div>
|
|
<div class="outer" style="transform: scaleX(2)">
|
|
<div class="inner"></div>
|
|
</div>
|
|
<div class="outer" style="transform: scaleY(0.5)">
|
|
<div class="inner"></div>
|
|
</div>
|
|
<div class="outer" style="transform: scaleZ(0.3)">
|
|
<div class="inner"></div>
|
|
</div>
|
|
<div class="outer" style="transform: skew(30deg, 20deg)">
|
|
<div class="inner"></div>
|
|
</div>
|
|
<div class="outer" style="transform: skewX(30deg)">
|
|
<div class="inner"></div>
|
|
</div>
|
|
<div class="outer" style="transform: skewY(1.07rad)">
|
|
<div class="inner"></div>
|
|
</div>
|
|
<div class="outer" style="transform: translateX(10px) rotate(10deg) translateY(5px)">
|
|
<div class="inner"></div>
|
|
</div>
|