summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/svg/extensibility/foreignObject/containing-block.html
blob: da0728c96b5d0eb81435efad329bdcc3ee4dfb26 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!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>