the-anchor-attribute-001.tentative.html (952B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://github.com/whatwg/html/pull/9144"> 3 <link rel="author" href="mailto:xiaochengh@chromium.org"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 7 <style> 8 body { 9 margin: 0; 10 } 11 #anchor { 12 width: 100px; 13 height: 100px; 14 margin-left: 50px; 15 margin-top: 50px; 16 background: orange; 17 } 18 #target { 19 position: absolute; 20 left: anchor(right); 21 top: anchor(top); 22 width: 100px; 23 height: 100px; 24 background: lime; 25 } 26 </style> 27 <div id="anchor"></div> 28 <div id="target" anchor="anchor"></div> 29 30 <script> 31 test(() => { 32 assert_equals(target.offsetLeft, 150); 33 assert_equals(target.offsetTop, 50); 34 }, 'The anchor attribute should position the target element next to its implicit anchor'); 35 36 test(() => { 37 assert_equals(target.anchorElement, anchor); 38 }, 'The element.anchorElement IDL should reflect the element pointed to by the anchor attribute'); 39 </script>