| <!doctype HTML> |
| <title>Test that the foreignObject element is a stacking context</title> |
| <link rel="match" href="stacking-context-ref.html"> |
| <link rel="help" href="https://svgwg.org/svg2-draft/single-page.html#embedded-ForeignObjectElement"/> |
| <style> |
| * { |
| margin: 0; |
| } |
| .el { |
| width: 50px; |
| height: 60px; |
| } |
| |
| </style> |
| <!-- Test that the <foreignObject> root element is a stacking context, so z-index here |
| has no effect on order w.r.t. #top, but still does for stacking under |
| foreignObject --> |
| <svg style="width: 50px; height: 50px; overflow: visible; display: block"> |
| <foreignObject width=100 height=200> |
| <div class="el" |
| style="position: absolute; z-index: 1; top: 40px; left: 10px; border: 1px solid black; background: lightblue"></div> |
| <div class="el" |
| style="position: absolute; z-index: 2; top: 5px; left: 5px; border: 1px solid black; background: lightgreen"></div> |
| </foreignObject> |
| </svg> |
| <div id=top class="el" style="position: relative; background: lightgray"></div> |