Blitz - WPT: containing-block.html

wpt / svg / extensibility / foreignObject / containing-block.html
Enable JavaScript in test iframe
/svg/extensibility/foreignObject/containing-block.html
<!doctype HTML>
<link rel="help" href="https://w3c.github.io/svgwg/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>