the-anchor-attribute-002.tentative.html (1428B)
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, 123px); 21 top: anchor(top, 456px); 22 width: 100px; 23 height: 100px; 24 background: lime; 25 } 26 </style> 27 <div class="anchor" id="anchor1"></div> 28 <div class="anchor" id="anchor2"></div> 29 <div class="target" id="target1" anchor="anchor1"></div> 30 <div class="target" id="target2" anchor="anchor1"></div> 31 32 <script> 33 test(() => { 34 document.body.offsetLeft; // Force layout 35 target1.setAttribute('anchor', 'anchor2'); 36 assert_equals(target1.offsetLeft, 150); 37 assert_equals(target1.offsetTop, 200); 38 39 target1.setAttribute('anchor', 'anchor1'); 40 assert_equals(target1.offsetLeft, 150); 41 assert_equals(target1.offsetTop, 50); 42 }, 'Layout should be updated when anchor attribute changes to another element'); 43 44 test(() => { 45 document.body.offsetLeft; // Force layout 46 target2.setAttribute('anchor', 'nonexist-anchor'); 47 assert_equals(target2.offsetLeft, 123); 48 assert_equals(target2.offsetTop, 456); 49 }, 'Layout should be updated when anchor attribute changes to a non-existent element'); 50 </script>