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