system/serenity
system/serenity
1
0
Fork 0
mirror of https://github.com/SerenityOS/serenity synced 2024-07-22 02:26:11 +00:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

Tests/LibWeb: Add some ref tests for SVG <clipPath>s

Browse source
This commit is contained in:
MacDue 2024-03-27 00:28:13 +00:00 committed by Andreas Kling
parent 8cec7ea221
commit 60292c9b33
7 changed files with 78 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
Tests/LibWeb/Ref/reference/images/svg-clip-path-and-mask-ref.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.2 KiB

BIN
Tests/LibWeb/Ref/reference/images/svg-simple-clipPath-ref.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 831 B

9
Tests/LibWeb/Ref/reference/svg-clip-path-and-mask-ref.html Normal file
View file

@ -0,0 +1,9 @@
<style>
* {
margin: 0;
}
body {
background-color: white;
}
</style>
<img src="./images/svg-clip-path-and-mask-ref.png">

24
Tests/LibWeb/Ref/reference/svg-clipPathUnits.html Normal file
View file

@ -0,0 +1,24 @@
<svg width="200" viewBox="0 0 100 100">
<link rel="match" href="reference/svg-maskContentUnits-ref.html" />
<clipPath id="myClip1" clipPathUnits="userSpaceOnUse">
<circle cx="50" cy="50" r="35" />
</clipPath>
<clipPath id="myClip2" clipPathUnits="objectBoundingBox">
<circle cx=".5" cy=".5" r=".35" />
</clipPath>
<!-- Some reference rect to materialized to clip path -->
<rect id="r1" x="0" y="0" width="45" height="45" />
<rect id="r2" x="0" y="55" width="45" height="45" />
<rect id="r3" x="55" y="55" width="45" height="45" />
<rect id="r4" x="55" y="0" width="45" height="45" />
<!-- The first 3 rect are clipped with userSpaceOnUse units -->
<use clip-path="url(#myClip1)" href="#r1" fill="red" />
<use clip-path="url(#myClip1)" href="#r2" fill="red" />
<use clip-path="url(#myClip1)" href="#r3" fill="red" />
<!-- The last rect is clipped with objectBoundingBox units -->
<use clip-path="url(#myClip2)" href="#r4" fill="red" />
</svg>
Side by side

After

Width:  |  Height:  |  Size: 986 B

9
Tests/LibWeb/Ref/reference/svg-simple-clipPath-ref.html Normal file
View file

@ -0,0 +1,9 @@
<style>
* {
margin: 0;
}
body {
background-color: white;
}
</style>
<img src="./images/svg-simple-clipPath-ref.png">

21
Tests/LibWeb/Ref/svg-clip-path-and-mask.html Normal file
View file

@ -0,0 +1,21 @@
<link rel="match" href="reference/svg-clip-path-and-mask-ref.html" />
<style>
body {
background-color: white;
}
</style>
<svg height="200" viewBox="0 0 100 100">
<mask id="mask">
<circle cx="60" cy="35" r="35" fill="white"/>
</mask>
<clipPath id="clip">
<circle cx="40" cy="35" r="35" />
</clipPath>
<path
id="heart"
d="M10,30 A20,20,0,0,1,50,30 A20,20,0,0,1,90,30 Q90,60,50,90 Q10,60,10,30 Z" />
<use clip-path="url(#clip)" mask="url(#mask)" href="#heart" fill="red" />
</svg>

15
Tests/LibWeb/Ref/svg-simple-clipPath.html Normal file
View file

@ -0,0 +1,15 @@
<link rel="match" href="reference/svg-simple-clipPath-ref.html" />
<style>
body {
background-color: white;
}
</style>
<svg width="300">
<defs>
<clipPath id="clipPath3">
<path d="M10,10 q60,60 100,0 q50,50 50,50 l40,0 l-40,40 l-100,-20"/>
</clipPath>
</defs>
<rect x="5" y="5" width="190" height="90"
style="stroke: none; fill:#00ff00; clip-path: url(#clipPath3);"/>
</svg>