containing-block.html (1707B)
1 <!doctype HTML> 2 <link rel="help" href="https://svgwg.org/svg2-draft/single-page.html#embedded-ForeignObjectElement"/> 3 <style> 4 * { 5 margin: 5px; 6 } 7 .el { 8 background: lightblue; 9 width: 50px; 10 height: 60px; 11 } 12 .pos { 13 top: 5px; 14 left: 6px; 15 } 16 </style> 17 <script src="/resources/testharness.js"></script> 18 <script src="/resources/testharnessreport.js"></script> 19 <svg> 20 <foreignObject id="first" width=100 height=100> 21 <div id=contained class="el" style="width: 50px; height: 60px;"></div> 22 <div id=containedrel class="el pos" style="position: relative"></div> 23 <div id=containedabs class="el pos" style="position: absolute"></div> 24 <div id=containedfixed class="el pos" style="position: fixed"></div> 25 </foreignObject> 26 </svg> 27 <script> 28 function checkPosition(el, offsetLeftVal, offsetTopVal, boundingRectLeft, boundingRectTop) { 29 assert_equals(el.offsetLeft, offsetLeftVal, "offsetLeft"); 30 assert_equals(el.offsetTop, offsetTopVal, "offsetTop"); 31 assert_equals(el.getBoundingClientRect().left, boundingRectLeft, "boundingRectLeft"); 32 assert_equals(el.getBoundingClientRect().top, boundingRectTop, "boundingRectTop"); 33 } 34 35 test(function() { 36 // Test that #first is a containing block for all descendants. 37 var contained = document.getElementById('contained'); 38 var containedrel = document.getElementById('containedrel'); 39 var containedabs = document.getElementById('containedabs'); 40 var containedfixed = document.getElementById('containedfixed'); 41 checkPosition(contained, 5, 5, 20, 20); 42 checkPosition(containedrel, 11, 75, 26, 90); 43 checkPosition(containedabs, 11, 10, 26, 25); 44 checkPosition(containedfixed, 11, 10, 26, 25); 45 }, "position"); 46 </script>