eliott/ladybird
1
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird synced 2026-05-01 20:17:13 +02:00
Code Issues Packages Projects Releases Wiki Activity

LibWeb: Unify objectBoundingBox and userSpaceOnUse coord transformations

Browse Source 
There's a fairly complicated interaction between an SVG gradient's paint
transformation and the gradient coordinate transformation required to
correctly draw gradient fills. This was especially noticeable when
scaling down an SVG, resulting in broken gradient coordinates and
graphical glitches.

This changes the objectBoundingBox units to immediately map to the
bounding box's coordinate system, so we can unify the gradient paint
transformation logic and make it a lot simpler. We only need to undo the
bounding box offset and apply the paint transformation to fix a lot of
gradient fill bugs.
This commit is contained in:
Jelle Raaijmakers
2025-10-26 13:44:14 +01:00
committed by Jelle Raaijmakers
parent beb1d60714
commit 4dbae64dce
Notes: github-actions[bot] 2025-10-27 23:43:24 +00:00 
Author: https://github.com/gmta
Commit: https://github.com/LadybirdBrowser/ladybird/commit/4dbae64dce0
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/6592
14 changed files with 200 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
Tests/LibWeb/Screenshot/input/svg-gradient-userSpaceOnUse.html
View File

@@ -1,5 +1,11 @@
<!DOCTYPE html>
<link rel="match" href="../expected/svg-gradient-userSpaceOnUse-ref.html" />
<meta name="fuzzy" content="maxDifference=0-1;totalPixels=0-69">
<style>
svg {
border: 1px solid red;
}
</style>
<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="10" width="44" height="44" fill="url(#a)" />
<defs>
@@ -10,3 +16,72 @@
</linearGradient>
</defs>
</svg>
<svg width="32" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="64" height="64" fill="url(#b)" />
<defs>
<linearGradient id="b" x1="0" y1="0" x2="0" y2="64" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#f00" />
<stop offset="0.1" stop-color="#0f0" />
<stop offset="1" stop-color="#00f" />
</linearGradient>
</defs>
</svg>
<svg width="48" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="64" height="64" fill="url(#c)" />
<defs>
<linearGradient id="c" x1="0" y1="0" x2="0" y2="64" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#f00" />
<stop offset="0.1" stop-color="#0f0" />
<stop offset="1" stop-color="#00f" />
</linearGradient>
</defs>
</svg>
<svg width="64" height="64" viewBox="0 32 64 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="64" height="64" fill="url(#d)" />
<defs>
<linearGradient id="d" x1="0" y1="0" x2="0" y2="64" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#f00" />
<stop offset="0.1" stop-color="#0f0" />
<stop offset="1" stop-color="#00f" />
</linearGradient>
</defs>
</svg>
<svg width="64" height="64" viewBox="0 0 64 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="64" height="64" fill="url(#e)" />
<defs>
<linearGradient id="e" x1="0" y1="0" x2="0" y2="64" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#f00" />
<stop offset="0.1" stop-color="#0f0" />
<stop offset="1" stop-color="#00f" />
</linearGradient>
</defs>
</svg>
<svg width="64" height="64" viewBox="32 0 32 64" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="64" height="64" fill="url(#f)" />
<defs>
<linearGradient id="f" x1="10" y1="0" x2="54" y2="0" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#f00" />
<stop offset="0.1" stop-color="#0f0" />
<stop offset="1" stop-color="#00f" />
</linearGradient>
</defs>
</svg>
<svg width="64" height="64" viewBox="-20 -20 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="-20" y="-20" width="50" height="50" fill="url(#g)" />
<defs>
<linearGradient id="g" x1="10" y1="10" x2="10" y2="64" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#f00" />
<stop offset="0.0001" stop-color="#0f0" stop-opacity="0.3" />
<stop offset="1" stop-color="#0f0" stop-opacity="0.7" />
</linearGradient>
</defs>
</svg>
<svg width="64" height="64" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="16" y="16" width="32" height="32" fill="url(#h)" transform="rotate(45 32 32)" />
<defs>
<linearGradient id="h" gradientUnits="userSpaceOnUse">
<stop offset=".25" stop-color="#f00" />
<stop offset=".75" stop-color="#0f0" />
</linearGradient>
</defs>
</svg>