Bug 201110 - <foreignObject> root element should be a stacking context
Summary: <foreignObject> root element should be a stacking context
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: SVG (show other bugs)
Version: WebKit Nightly Build
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
Depends on:
Blocks: 200143
  Show dependency treegraph
Reported: 2019-08-23 17:48 PDT by Said Abou-Hallawa
Modified: 2019-12-22 14:02 PST (History)
3 users (show)

See Also:

test case (669 bytes, text/html)
2019-08-23 17:48 PDT, Said Abou-Hallawa
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Said Abou-Hallawa 2019-08-23 17:48:26 PDT
Created attachment 377187 [details]
test case

Open the attached test case:

Result: The light gray box is drawn underneath the other two rectangles.
Expected: The light gray box should be drawn on top of the other two rectangles.

The test case has an SVG which contains a <foreignObject>. This <foreignObject> has two <div> elements whose z indices are 1 and 2. The order of drawing these two rectangles is correct. The problem is the <foreignObject> should be a stacking context which means the z order of its elements should not interfere with the oder of the other elements outside the <svg> element. The SVG should be at the end drawn as one layer with the z-index of the <svg> element. In this test case, the z-index of the <svg> element is 0. Since the light gray <div> has also z-index = 0 but it comes after <svg> element, it should be drawn on top of the SVG.