stacking-context.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /svg/extensibility/foreignObject/stacking-context.html - WPT Dashboard Interop Dashboard

<!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>