containing-block.html

Enable keyboard shortcuts

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

<!doctype HTML>

<link rel="help" href="https://svgwg.org/svg2-draft/single-page.html#embedded-ForeignObjectElement"/>

<style>

* {

    margin: 5px;

  .el {

    background: lightblue;

    width: 50px;

    height: 60px;

  .pos {

    top: 5px;

    left: 6px;

</style>

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<svg>

  <foreignObject id="first" width=100 height=100>

    <div id=contained class="el" style="width: 50px; height: 60px;"></div>

    <div id=containedrel class="el pos" style="position: relative"></div>

    <div id=containedabs class="el pos" style="position: absolute"></div>

    <div id=containedfixed class="el pos" style="position: fixed"></div>

  </foreignObject>

</svg>

<script>

function checkPosition(el, offsetLeftVal, offsetTopVal, boundingRectLeft, boundingRectTop) {

    assert_equals(el.offsetLeft, offsetLeftVal, "offsetLeft");

    assert_equals(el.offsetTop, offsetTopVal, "offsetTop");

    assert_equals(el.getBoundingClientRect().left, boundingRectLeft, "boundingRectLeft");

    assert_equals(el.getBoundingClientRect().top, boundingRectTop, "boundingRectTop");

test(function() {

  // Test that #first is a containing block for all descendants.

  var contained = document.getElementById('contained');

  var containedrel = document.getElementById('containedrel');

  var containedabs = document.getElementById('containedabs');

  var containedfixed = document.getElementById('containedfixed');

  checkPosition(contained, 5, 5, 20, 20);

  checkPosition(containedrel, 11, 75, 26, 90);

  checkPosition(containedabs, 11, 10, 26, 25);

  checkPosition(containedfixed, 11, 10, 26, 25);

}, "position");

</script>