testing/web-platform/tests/html/semantics/popovers/popover-anchor-idl-property.html

   1 <!DOCTYPE html>
   2 <meta charset="utf-8">
   3 <link rel="author" href="mailto:masonf@chromium.org">
   4 <link rel=help href="https://open-ui.org/components/popover.research.explainer">
   5 <link rel=help href="https://html.spec.whatwg.org/multipage/popover.html">
   6 <script src="/resources/testharness.js"></script>
   7 <script src="/resources/testharnessreport.js"></script>
   8
   9 <button id=b1>This is an anchor button</button>
  10 <div popover id=p1 anchor=b1>This is a popover</div>
  11 <button id=b2 popovertarget=p1>This button invokes the popover but isn't an anchor</button>
  12
  13 <script>
  14   test(function() {
  15     assert_equals(p1.anchorElement,b1);
  16   }, "popover anchorElement IDL property returns the anchor element");
  17
  18   test(function() {
  19     assert_equals(p1.anchorElement,b1);
  20     p1.anchorElement = b2;
  21     assert_equals(p1.anchorElement,b2);
  22     assert_equals(p1.getAttribute('anchor'),'','Idref is empty after setting element');
  23     p1.anchorElement = b1; // Reset
  24   }, "popover anchorElement is settable");
  25 </script>
  26
  27 <button id=b1>button</button>
  28 <div id=p2>Anchored div</div>
  29 <style>
  30   * {margin:0;padding:0;}
  31   #b1 {width: 200px;}
  32   #p2 {
  33     position: absolute;
  34     left: anchor(right);
  35   }
  36 </style>
  37
  38 <script>
  39   test(function() {
  40     assert_equals(p2.anchorElement,null);
  41     const button = document.getElementById('b1');
  42     assert_true(!!button);
  43     p2.anchorElement = button;
  44     assert_equals(p2.getAttribute('anchor'),'','Idref should be empty after setting element');
  45     assert_equals(p2.anchorElement,button,'Element reference should be button');
  46     assert_equals(p2.offsetLeft, 200, 'The anchor relationship should be functional');
  47   }, "anchorElement affects anchor positioning");
  48 </script>