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