Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

SVG foreignObject does not establish a containing block for abspos children. #3241

Open
1 task
Psychpsyo opened this issue Jan 13, 2025 · 0 comments
Open
1 task

SVG foreignObject does not establish a containing block for abspos children. #3241

Psychpsyo opened this issue Jan 13, 2025 · 0 comments
Labels
bug Something isn't working has repro We have a way to reproduce this bug. layout svg

Comments

@Psychpsyo
Copy link
Contributor

Summary

When I put an absolutely-positioned element in an SVG <foreignObject>, in Ladybird, it is positioned relative to the next abspos-containing-block-creating ancestor outside the entire SVG, not the foreignObject.

See this resolution and behavior in other browsers, which, to my knowledge, has not lead to a spec change yet.
The only thing I can find in the SVG spec is the note at the bottom of Establishing a stacking context in SVG, which only speaks of a "fixed position containing block" in CSS terms.

Operating system

Linux

Steps to reproduce

  1. Make an SVG with a <foreignObject> in it.
  2. Put anything with position: absolute; top: 0; left: 0 inside that.
  3. Notice how that element aligns with the top left of whatever is outside the SVG, not the foreignObject.

Expected behavior

A foreignObject should create a containing block for absolutely (and fixed) positioned elements.

Actual behavior

A foreignObject does not create a containing block for absolutely positioned elements.

URL for a reduced test case

N/A

HTML/SVG/etc. source for a reduced test case

<!DOCTYPE html>
<style>
  div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
  }
</style>
<svg width="200" height="200">
  <foreignObject width="100" height="100" x="50" y="50">
    <div>I am offset!</div>
  </foreignObject>
</svg>

Log output and (if possible) backtrace

None

Screenshots or screen recordings

The reduced test case in:
Firefox:
image

Ladybird:
image

Build flags or config settings

None

Contribute a patch?

  • I’ll contribute a patch for this myself.
@AtkinsSJ AtkinsSJ added bug Something isn't working layout svg has repro We have a way to reproduce this bug. labels Jan 15, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working has repro We have a way to reproduce this bug. layout svg
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@AtkinsSJ @Psychpsyo