mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-07-19 15:32:31 +00:00
b7efb61fbe
Now each test type has the same directories: - input - expected - data Also, tests can be in subdirectories within ./input.
129 lines
4.2 KiB
HTML
129 lines
4.2 KiB
HTML
<link rel="match" href="../expected/clip-path-basic-shapes-ref.html" />
|
|
<style>
|
|
.outer {
|
|
margin: 5px;
|
|
width: 130px;
|
|
height: 80px;
|
|
display: inline-block;
|
|
background-color: grey;
|
|
}
|
|
|
|
.inner {
|
|
height: 100%;
|
|
background-color: black;
|
|
}
|
|
</style>
|
|
<div class="outer">
|
|
<div class="inner" style="clip-path: inset(30px)"></div>
|
|
</div>
|
|
<div class="outer">
|
|
<div class="inner" style="clip-path: inset(10px 20px 30px 40px)"></div>
|
|
</div>
|
|
<div class="outer">
|
|
<div class="inner" style="clip-path: inset(20% 30%)"></div>
|
|
</div>
|
|
<div class="outer">
|
|
<div class="inner" style="clip-path: inset(40px 20%)"></div>
|
|
</div>
|
|
<div class="outer">
|
|
<div class="inner" style="clip-path: inset(60% 0 40% 0)"></div>
|
|
</div>
|
|
<div class="outer">
|
|
<div class="inner" style="clip-path: xywh(10px 20px 30px 40px)"></div>
|
|
</div>
|
|
<div class="outer">
|
|
<div class="inner" style="clip-path: xywh(10% 20% 30% 40%)"></div>
|
|
</div>
|
|
<div class="outer">
|
|
<div class="inner" style="clip-path: xywh(10% 20px 30px 40%)"></div>
|
|
</div>
|
|
<div class="outer">
|
|
<div class="inner" style="clip-path: xywh(10px 20px -30px 40px)"></div>
|
|
</div>
|
|
<div class="outer">
|
|
<div class="inner" style="clip-path: xywh(10px -20px 30px 40px)"></div>
|
|
</div>
|
|
<div class="outer">
|
|
<div class="inner" style="clip-path: rect(0 30% auto 10%)"></div>
|
|
</div>
|
|
<div class="outer">
|
|
<div class="inner" style="clip-path: rect(50px 70px 80% 20%)"></div>
|
|
</div>
|
|
<div class="outer">
|
|
<div class="inner" style="clip-path: rect(10px 0 0 20px)"></div>
|
|
</div>
|
|
<div class="outer">
|
|
<div class="inner" style="clip-path: rect(10px 20px 10px 20px)"></div>
|
|
</div>
|
|
<div class="outer">
|
|
<div class="inner" style="clip-path: circle(50px)"></div>
|
|
</div>
|
|
<div class="outer">
|
|
<div class="inner" style="clip-path: circle(60px at right center)"></div>
|
|
</div>
|
|
<div class="outer">
|
|
<div class="inner" style="clip-path: circle(10% at 20px 90%)"></div>
|
|
</div>
|
|
<div class="outer">
|
|
<div class="inner" style="clip-path: circle(closest-side at 40px 30px)"></div>
|
|
</div>
|
|
<div class="outer">
|
|
<div class="inner" style="clip-path: circle(farthest-side)"></div>
|
|
</div>
|
|
<div class="outer">
|
|
<div class="inner" style="clip-path: circle()"></div>
|
|
</div>
|
|
<div class="outer">
|
|
<div class="inner" style="clip-path: circle(at 30% 40px)"></div>
|
|
</div>
|
|
<div class="outer">
|
|
<div class="inner" style="clip-path: circle(farthest-side at -10px -10px)"></div>
|
|
</div>
|
|
<div class="outer">
|
|
<div class="inner" style="clip-path: circle(-10px)"></div>
|
|
</div>
|
|
<div class="outer">
|
|
<div class="inner" style="clip-path: ellipse(20px 50px)"></div>
|
|
</div>
|
|
<div class="outer">
|
|
<div class="inner" style="clip-path: ellipse(40px 50% at right center)"></div>
|
|
</div>
|
|
<div class="outer">
|
|
<div class="inner" style="clip-path: ellipse(closest-side closest-side at 50px 60px)"></div>
|
|
</div>
|
|
<div class="outer">
|
|
<div class="inner" style="clip-path: ellipse(farthest-side closest-side at 20% 70%)"></div>
|
|
</div>
|
|
<div class="outer">
|
|
<div class="inner" style="clip-path: ellipse(closest-side farthest-side at 20% 70%)"></div>
|
|
</div>
|
|
<div class="outer">
|
|
<div class="inner" style="clip-path: ellipse(closest-side 20% at 20% 70%)"></div>
|
|
</div>
|
|
<div class="outer">
|
|
<div class="inner" style="clip-path: ellipse(at 40% 70%)"></div>
|
|
</div>
|
|
<div class="outer">
|
|
<div class="inner" style="clip-path: ellipse(closest-side farthest-side)"></div>
|
|
</div>
|
|
<div class="outer">
|
|
<div class="inner" style="clip-path: ellipse(closest-side)"></div>
|
|
</div>
|
|
<div class="outer">
|
|
<div class="inner" style="clip-path: ellipse(-10% -10px at right)"></div>
|
|
</div>
|
|
<div class="outer">
|
|
<div class="inner" style="clip-path: polygon(100% 0%, 50% 50%, 100% 100%)"></div>
|
|
</div>
|
|
<div class="outer">
|
|
<div class="inner" style="clip-path: polygon(65px 0px, 35px 80px, 105px 30px, 25px 30px, 95px 80px)"></div>
|
|
</div>
|
|
<div class="outer">
|
|
<div class="inner" style="clip-path: polygon(nonzero, 65px 0px, 35px 80px, 105px 30px, 25px 30px, 95px 80px)"></div>
|
|
</div>
|
|
<div class="outer">
|
|
<div class="inner" style="clip-path: polygon(evenodd, 65px 0px, 35px 80px, 105px 30px, 25px 30px, 95px 80px)"></div>
|
|
</div>
|
|
<div class="outer">
|
|
<div class="inner" style="clip-path: polygon(100px 0%, 50% 50px, 100% 100%)"></div>
|
|
</div>
|