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
URL:
Keywords:
Depends on:
Blocks: 200143
  Show dependency tree / graph
 
Reported: 2019-08-23 17:48 PDT by Said Abou-Hallawa
Modified: 2019-12-22 14:02 PST (History)
3 users (show)

See Also:

Attachments
test case (669 bytes, text/html)
2019-08-23 17:48 PDT, Said Abou-Hallawa 		no flags Details
View All Add an attachment (proposed patch, testcase, etc.)

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.