Bug 270317 – [LegacySVG] SVG foreignobject could not be transformed

• Status: NEW
• Component: SVG

[jogibear9988]

I've HTML Code like this:

<foreignObject overlay-source="ElementDragTitleExtension" x="156.795403" y="163.363963" width="60" height="15" class="svg-text-primary" style="font-size: 10px; transform-box: fill-box; rotate: -45deg;"><span style="width: 100%; position: relative; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">button</span></foreignObject>

But the Span is not rotated.

In Chrome and Firefox it is drawn rotated

[jogibear9988]

Better sample:

<svg>
    <foreignObject x="179.795403" y="128.363963" width="60" height="35" style="font-size:10px;transform-box:fill-box;rotate:-45deg;">
        <span style="width:100%;position:absolute;">button</span>
    </foreignObject>
</svg>

works in chrome and firefox, but does not rotate in safari

[Karl Dubost]

Created attachment 470195 [details]
testcase

I see two different issues in there.

* button 1 is at a different place in Safari vs Firefox/Chrome
* button 2 with a position: absolute completely lose the rotation and position in Safari

[Karl Dubost]

Created attachment 470196 [details]
rendering in safari, firefox, chrome

tested in 
Safari Technology Preview  189           19619.1.3.2
Firefox Nightly            125.0a1       12524.3.5
Google Chrome Canary       124.0.6338.0  6338.0

[Radar WebKit Bug Importer]

<rdar://problem/124116904>

[Karl Dubost]

The first issue seems to be a duplicate of Bug 23113

[Karl Dubost]

The second issue looks very similar to Bug 174903

[Ahmad Saleem]

NOTE - WebKit ToT (275735@main) - Minibrowser with Layer Based SVG Engine make attached test case match with other browsers.

[Karl Dubost]

Created attachment 470216 [details]
rendering in minibrowser

Ahmad, I still see the same issue with mini browser. 
compiled with https://commits.webkit.org/275765@main

[Ahmad Saleem]

(In reply to Karl Dubost from comment #8)
> Created attachment 470216 [details]
> rendering in minibrowser
> 
> Ahmad, I still see the same issue with mini browser. 
> compiled with https://commits.webkit.org/275765@main

Have you turned on 'Layer-based SVG Engine' flag from Settings > Internal Features - I am referring to that this bug is fixed already in LBSE.

[Karl Dubost]

Ooooh you are right. I missed that part. Cool!

[Karl Dubost]

Created attachment 470217 [details]
rendering in minibrowser with 'Layer-based SVG Engine' flag