mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-06-09 17:44:56 +09:00
Tests/LibWeb: Add a ref test for many wacky SVG radialGradients
Believe it or not, these are all correct (± a pixel), there meant to look like that!
This commit is contained in:
MacDue
Andreas Kling
parent
4ad0ac465e
commit
f3a6fe256f
Notes:
sideshowbarker
2024-07-16 22:24:48 +09:00
Author: https://github.com/MacDue
Commit: f3a6fe256f
Pull-request: https://github.com/SerenityOS/serenity/pull/20702
4 changed files with 205 additions and 1 deletions
BIN
Tests/LibWeb/Ref/images/svg-radialGradient-ref.png
Normal file
BIN
Tests/LibWeb/Ref/images/svg-radialGradient-ref.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 859 KiB |
|
|
@ -9,5 +9,6 @@
|
|||
"css-lang-selector.html": "css-lang-selector-ref.html",
|
||||
"css-gradients.html": "css-gradients-ref.html",
|
||||
"svg-symbol.html": "svg-symbol-ref.html",
|
||||
"svg-gradient-spreadMethod.html": "svg-gradient-spreadMethod-ref.html"
|
||||
"svg-gradient-spreadMethod.html": "svg-gradient-spreadMethod-ref.html",
|
||||
"svg-radialGradient.html": "svg-radialGradient-ref.html"
|
||||
}
|
||||
|
|
|
|||
15
Tests/LibWeb/Ref/svg-radialGradient-ref.html
Normal file
15
Tests/LibWeb/Ref/svg-radialGradient-ref.html
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
}
|
||||
body {
|
||||
background-color: white;
|
||||
}
|
||||
</style>
|
||||
<!-- To rebase:
|
||||
1. Open svg-radialGradient.html in Ladybird
|
||||
2. Resize the window just above the width of the largest gradient
|
||||
3. Right click > "Take Full Screenshot"
|
||||
4. Update the image below:
|
||||
-->
|
||||
<img src="./images/svg-radialGradient-ref.png">
|
||||
188
Tests/LibWeb/Ref/svg-radialGradient.html
Normal file
188
Tests/LibWeb/Ref/svg-radialGradient.html
Normal file
|
|
@ -0,0 +1,188 @@
|
|||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
}
|
||||
body {
|
||||
background-color: white;
|
||||
}
|
||||
svg {
|
||||
margin-right: calc(100% - 400px)
|
||||
}
|
||||
</style>
|
||||
<!-- spreadMethod=pad -->
|
||||
<svg width="400" height="300" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<radialGradient id="baseGrad">
|
||||
<stop offset="0%" stop-color="red" />
|
||||
<stop offset="40%" stop-color="purple" />
|
||||
<stop offset="100%" stop-color="cyan" />
|
||||
</radialGradient>
|
||||
<!-- Start circle inside end circle -->
|
||||
<radialGradient href="#baseGrad" id="test0" gradientUnits="userSpaceOnUse" cx="200" cy="150" r="100" fx="158" fy="93" fr="10">
|
||||
</radialGradient>
|
||||
</defs>
|
||||
<rect x="0" y="0" width="400" height="300" fill="url(#test0)"></rect>
|
||||
</svg>
|
||||
<svg width="400" height="300" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<!-- Start circle outside end circle -->
|
||||
<radialGradient href="#baseGrad" id="test1" gradientUnits="userSpaceOnUse" cx="200" cy="150" r="100" fx="370" fy="44" fr="10">
|
||||
</radialGradient>
|
||||
</defs>
|
||||
<rect x="0" y="0" width="400" height="300" fill="url(#test1)"></rect>
|
||||
</svg>
|
||||
<svg width="400" height="300" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<!-- Start circle radius == end circle radius -->
|
||||
<radialGradient href="#baseGrad" id="test2" gradientUnits="userSpaceOnUse" cx="200" cy="150" r="10" fx="40" fy="225" fr="10">
|
||||
</radialGradient>
|
||||
</defs>
|
||||
<rect x="0" y="0" width="400" height="300" fill="url(#test2)"></rect>
|
||||
</svg>
|
||||
<svg width="400" height="300" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<!-- Start circle larger than end circle (inside end circle) -->
|
||||
<radialGradient href="#baseGrad" id="test3" gradientUnits="userSpaceOnUse" cx="200" cy="150" r="30" fx="200" fy="182" fr="70">
|
||||
</radialGradient>
|
||||
</defs>
|
||||
<rect x="0" y="0" width="400" height="300" fill="url(#test3)"></rect>
|
||||
</svg>
|
||||
<svg width="400" height="300" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<!-- Start circle larger than end circle (outside end circle) -->
|
||||
<radialGradient href="#baseGrad" id="test4" gradientUnits="userSpaceOnUse" cx="200" cy="150" r="30" fx="242" fy="150" fr="70">
|
||||
</radialGradient>
|
||||
</defs>
|
||||
<rect x="0" y="0" width="400" height="300" fill="url(#test4)"></rect>
|
||||
</svg>
|
||||
<svg width="400" height="300" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<!-- Start circle radius == 0 (inside end circle) -->
|
||||
<radialGradient href="#baseGrad" id="test5" gradientUnits="userSpaceOnUse" cx="200" cy="150" r="120" fx="144" fy="186" fr="0">
|
||||
</radialGradient>
|
||||
</defs>
|
||||
<rect x="0" y="0" width="400" height="300" fill="url(#test5)"></rect>
|
||||
</svg>
|
||||
<svg width="400" height="300" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<!-- Start circle radius == 0 (outside end circle) -->
|
||||
<radialGradient href="#baseGrad" id="test6" gradientUnits="userSpaceOnUse" cx="200" cy="150" r="120" fx="23" fy="40" fr="0">
|
||||
</radialGradient>
|
||||
</defs>
|
||||
<rect x="0" y="0" width="400" height="300" fill="url(#test6)"></rect>
|
||||
</svg>
|
||||
<!-- spreadMethod=reflect -->
|
||||
<svg width="400" height="300" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<!-- Start circle inside end circle -->
|
||||
<radialGradient href="#test0" id="reflectTest0" spreadMethod="reflect">
|
||||
</radialGradient>
|
||||
</defs>
|
||||
<rect x="0" y="0" width="400" height="300" fill="url(#reflectTest0)"></rect>
|
||||
</svg>
|
||||
<svg width="400" height="300" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<!-- Start circle outside end circle -->
|
||||
<radialGradient href="#test1" id="reflectTest1" spreadMethod="reflect">
|
||||
</radialGradient>
|
||||
</defs>
|
||||
<rect x="0" y="0" width="400" height="300" fill="url(#reflectTest1)"></rect>
|
||||
</svg>
|
||||
<svg width="400" height="300" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<!-- Start circle radius == end circle radius -->
|
||||
<radialGradient href="#test2" id="reflectTest2" spreadMethod="reflect">
|
||||
</radialGradient>
|
||||
</defs>
|
||||
<rect x="0" y="0" width="400" height="300" fill="url(#reflectTest2)"></rect>
|
||||
</svg>
|
||||
<svg width="400" height="300" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<!-- Start circle larger than end circle (inside end circle) -->
|
||||
<radialGradient href="#test3" id="reflectTest3" spreadMethod="reflect">
|
||||
</radialGradient>
|
||||
</defs>
|
||||
<rect x="0" y="0" width="400" height="300" fill="url(#reflectTest3)"></rect>
|
||||
</svg>
|
||||
<svg width="400" height="300" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<!-- Start circle larger than end circle (outside end circle) -->
|
||||
<radialGradient href="#test4" id="reflectTest4" spreadMethod="reflect">
|
||||
</radialGradient>
|
||||
</defs>
|
||||
<rect x="0" y="0" width="400" height="300" fill="url(#reflectTest4)"></rect>
|
||||
</svg>
|
||||
<svg width="400" height="300" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<!-- Start circle radius == 0 (inside end circle) -->
|
||||
<radialGradient href="#test5" id="reflectTest5" spreadMethod="reflect">
|
||||
</radialGradient>
|
||||
</defs>
|
||||
<rect x="0" y="0" width="400" height="300" fill="url(#reflectTest5)"></rect>
|
||||
</svg>
|
||||
<svg width="400" height="300" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<!-- Start circle radius == 0 (outside end circle) -->
|
||||
<radialGradient href="#test6" id="reflectTest6" spreadMethod="reflect">
|
||||
</radialGradient>
|
||||
</defs>
|
||||
<rect x="0" y="0" width="400" height="300" fill="url(#reflectTest6)"></rect>
|
||||
</svg>
|
||||
<!-- spreadMethod=repeat -->
|
||||
<!-- spreadMethod=repeat -->
|
||||
<svg width="400" height="300" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<!-- Start circle inside end circle -->
|
||||
<radialGradient href="#test0" id="repeatTest0" spreadMethod="repeat">
|
||||
</radialGradient>
|
||||
</defs>
|
||||
<rect x="0" y="0" width="400" height="300" fill="url(#repeatTest0)"></rect>
|
||||
</svg>
|
||||
<svg width="400" height="300" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<!-- Start circle outside end circle -->
|
||||
<radialGradient href="#test1" id="repeatTest1" spreadMethod="repeat">
|
||||
</radialGradient>
|
||||
</defs>
|
||||
<rect x="0" y="0" width="400" height="300" fill="url(#repeatTest1)"></rect>
|
||||
</svg>
|
||||
<svg width="400" height="300" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<!-- Start circle radius == end circle radius -->
|
||||
<radialGradient href="#test2" id="repeatTest2" spreadMethod="repeat">
|
||||
</radialGradient>
|
||||
</defs>
|
||||
<rect x="0" y="0" width="400" height="300" fill="url(#repeatTest2)"></rect>
|
||||
</svg>
|
||||
<svg width="400" height="300" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<!-- Start circle larger than end circle (inside end circle) -->
|
||||
<radialGradient href="#test3" id="repeatTest3" spreadMethod="repeat">
|
||||
</radialGradient>
|
||||
</defs>
|
||||
<rect x="0" y="0" width="400" height="300" fill="url(#repeatTest3)"></rect>
|
||||
</svg>
|
||||
<svg width="400" height="300" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<!-- Start circle larger than end circle (outside end circle) -->
|
||||
<radialGradient href="#test4" id="repeatTest4" spreadMethod="repeat">
|
||||
</radialGradient>
|
||||
</defs>
|
||||
<rect x="0" y="0" width="400" height="300" fill="url(#repeatTest4)"></rect>
|
||||
</svg>
|
||||
<svg width="400" height="300" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<!-- Start circle radius == 0 (inside end circle) -->
|
||||
<radialGradient href="#test5" id="repeatTest5" spreadMethod="repeat">
|
||||
</radialGradient>
|
||||
</defs>
|
||||
<rect x="0" y="0" width="400" height="300" fill="url(#repeatTest5)"></rect>
|
||||
</svg>
|
||||
<svg width="400" height="300" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<!-- Start circle radius == 0 (outside end circle) -->
|
||||
<radialGradient href="#test6" id="repeatTest6" spreadMethod="repeat">
|
||||
</radialGradient>
|
||||
</defs>
|
||||
<rect x="0" y="0" width="400" height="300" fill="url(#repeatTest6)"></rect>
|
||||
</svg>
|
||||
Loading…
Add table
Add a link
Reference in a new issue