mirror of
https://github.com/RGBCube/serenity
synced 2025-10-31 19:32:45 +00:00
5abffc9c5a
Now that these are kind of working, lets add a layout test to prevent future regressions :^) This test is the same as the previous example (it is copied, though that seems to have been done for other tests, e.g. Acid 1).
111 lines
2.9 KiB
HTML
111 lines
2.9 KiB
HTML
<style>
|
|
body {
|
|
margin: 50px;
|
|
}
|
|
* {
|
|
font-family: 'SerenitySans';
|
|
}
|
|
</style>
|
|
<!-- SVG transforms test page, based on MDN examples -->
|
|
<svg
|
|
width="200px" height="100px"
|
|
viewBox="0 0 150 100"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
xmlns:xlink="http://www.w3.org/1999/xlink">
|
|
<g
|
|
fill="grey"
|
|
transform="rotate(-10 50 100)
|
|
translate(-36 45.5)
|
|
skewX(40)
|
|
scale(1 0.5)">
|
|
<path
|
|
d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z"
|
|
/>
|
|
</g>
|
|
<g
|
|
fill="none"
|
|
stroke="red"
|
|
>
|
|
<path
|
|
d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z" />
|
|
</g>
|
|
</svg>
|
|
<svg width="200px" height="200px" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
|
|
<rect x="10" y="10" width="30" height="20" fill="green" />
|
|
<rect
|
|
x="10"
|
|
y="10"
|
|
width="30"
|
|
height="20"
|
|
fill="red"
|
|
transform="matrix(3 1 -1 3 30 40)" />
|
|
</svg>
|
|
<svg width="200px" height="200px" viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg">
|
|
<rect x="-3" y="-3" width="6" height="6" />
|
|
|
|
<rect x="-3" y="-3" width="6" height="6" fill="red" transform="skewX(30)" />
|
|
</svg>
|
|
<svg width="200px" height="200px" viewBox="-12 -2 34 14" xmlns="http://www.w3.org/2000/svg">
|
|
<rect x="0" y="0" width="10" height="10" />
|
|
|
|
<!-- rotation is done around the point 0,0 -->
|
|
<rect x="0" y="0" width="10" height="10" fill="red" transform="rotate(100)" />
|
|
|
|
<!-- rotation is done around the point 10,10 -->
|
|
<rect
|
|
x="0"
|
|
y="0"
|
|
width="10"
|
|
height="10"
|
|
fill="green"
|
|
transform="rotate(100 10 10)" />
|
|
</svg>
|
|
<svg width="200px" height="200px" viewBox="-50 -50 100 100" xmlns="http://www.w3.org/2000/svg">
|
|
<!-- uniform scale -->
|
|
<circle cx="0" cy="0" r="10" fill="red" transform="scale(4)" />
|
|
|
|
<!-- vertical scale -->
|
|
<circle cx="0" cy="0" r="10" fill="yellow" transform="scale(1 4)" />
|
|
|
|
<!-- horizontal scale -->
|
|
<circle cx="0" cy="0" r="10" fill="pink" transform="scale(4 1)" />
|
|
|
|
<!-- No scale -->
|
|
<circle cx="0" cy="0" r="10" fill="black" />
|
|
</svg>
|
|
<svg width="200px" height="200px" viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg">
|
|
<rect x="-3" y="-3" width="6" height="6" />
|
|
|
|
<rect x="-3" y="-3" width="6" height="6" fill="red" transform="skewY(30)" />
|
|
</svg>
|
|
<svg width="200px" height="200px" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
|
|
<!-- No translation -->
|
|
<rect x="5" y="5" width="40" height="40" fill="green" />
|
|
|
|
<!-- Horizontal translation -->
|
|
<rect
|
|
x="5"
|
|
y="5"
|
|
width="40"
|
|
height="40"
|
|
fill="blue"
|
|
transform="translate(50)" />
|
|
|
|
<!-- Vertical translation -->
|
|
<rect
|
|
x="5"
|
|
y="5"
|
|
width="40"
|
|
height="40"
|
|
fill="red"
|
|
transform="translate(0 50)" />
|
|
|
|
<!-- Both horizontal and vertical translation -->
|
|
<rect
|
|
x="5"
|
|
y="5"
|
|
width="40"
|
|
height="40"
|
|
fill="yellow"
|
|
transform="translate(50 50)" />
|
|
</svg>
|