mirror of
https://github.com/RGBCube/serenity
synced 2025-07-25 14:07:46 +00:00
LibWeb: Make use of transform-box when calculating transforms
We don't currently calculate the fill- or stroke-boxes of SVG elements, so for now we use the content- and border-boxes respectively, as those are the closest equivalents. The test will need updating when we do support them. Also, the test is a screenshot because of rendering differences when applying transforms: a 20px box does not get painted the same as a 10px box scaled up 2x. Otherwise that would be the more ideal form of test.
This commit is contained in:
parent
391cfdc085
commit
e025bcc4f9
4 changed files with 117 additions and 2 deletions
36
Tests/LibWeb/Ref/css-transform-box.html
Normal file
36
Tests/LibWeb/Ref/css-transform-box.html
Normal file
|
@ -0,0 +1,36 @@
|
|||
<!doctype html>
|
||||
<link rel="match" href="reference/css-transform-box-ref.html" />
|
||||
<style>
|
||||
svg {
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
border: 1px solid #d9d9d9;
|
||||
}
|
||||
|
||||
.box {
|
||||
stroke-width: 4;
|
||||
transform-origin: 20% 20%;
|
||||
transform: scale(1.5);
|
||||
}
|
||||
div.box {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: solid black;
|
||||
border-width: 10px 20px 30px 40px;
|
||||
margin: 80px;
|
||||
}
|
||||
</style>
|
||||
<div class="box" style="transform-box: content-box">Hi</div>
|
||||
<div class="box" style="transform-box: border-box">Hi</div>
|
||||
<svg id="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
|
||||
<!-- NOTE: We don't currently calculate the fill or stroke boxes for SVG elements, so the test will need to be
|
||||
rebaselined once we do! -->
|
||||
<rect class="box" style="transform-box: fill-box" x="10" y="10" width="10" height="10" stroke="black" fill="yellow" />
|
||||
<circle fill="red" r="1" cx="15" cy="15" />
|
||||
|
||||
<rect class="box" style="transform-box: stroke-box" x="10" y="40" width="10" height="10" stroke="black" fill="cyan" />
|
||||
<circle fill="red" r="1" cx="15" cy="45" />
|
||||
|
||||
<rect class="box" style="transform-box: view-box" x="10" y="70" width="10" height="10" stroke="black" fill="green" />
|
||||
<circle fill="red" r="1" cx="15" cy="75" />
|
||||
</svg>
|
15
Tests/LibWeb/Ref/reference/css-transform-box-ref.html
Normal file
15
Tests/LibWeb/Ref/reference/css-transform-box-ref.html
Normal file
|
@ -0,0 +1,15 @@
|
|||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
}
|
||||
body {
|
||||
background-color: white;
|
||||
}
|
||||
</style>
|
||||
<!-- To rebase:
|
||||
1. Open css-backgrounds.html in Ladybird
|
||||
2. Resize the window just above the width of the largest element
|
||||
3. Right click > "Take Full Screenshot"
|
||||
4. Update the image below:
|
||||
-->
|
||||
<img src="./images/css-transform-box-ref.png">
|
BIN
Tests/LibWeb/Ref/reference/images/css-transform-box-ref.png
Normal file
BIN
Tests/LibWeb/Ref/reference/images/css-transform-box-ref.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 8.2 KiB |
Loading…
Add table
Add a link
Reference in a new issue