Skip to content

Commit

Permalink
Add anchorElement element reference IDL
Browse files Browse the repository at this point in the history
The anchor content attribute is not currently reflected in IDL. This CL
adds IDL reflection, as an element reference:

```
popover.anchorElement = myElement;
popover.setAttribute('anchor','idref');
const el = popover.anchorElement;
```

This is gated behind the CSSAnchorPositioning flag, since it is most
closely associated with that feature.

Bug: 1307772,1309178
Change-Id: I7c4d54d94ad5eeb38d1945733bbbaa3890f2b5d4
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4209776
Auto-Submit: Mason Freed <masonf@chromium.org>
Commit-Queue: Xiaocheng Hu <xiaochengh@chromium.org>
Reviewed-by: Xiaocheng Hu <xiaochengh@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1101192}
  • Loading branch information
mfreed7 authored and chromium-wpt-export-bot committed Feb 3, 2023
1 parent 5d40186 commit e021431
Showing 1 changed file with 34 additions and 3 deletions.
37 changes: 34 additions & 3 deletions html/semantics/popovers/popover-anchor-idl-property.tentative.html
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,41 @@

<button id=b1>This is an anchor button</button>
<div popover id=p1 anchor=b1>This is a popover</div>
<button id=b2 popover=p1>This button invokes the popover but isn't an anchor</button>
<button id=b2 popovertoggletarget=p1>This button invokes the popover but isn't an anchor</button>

<script>
test(function() {
assert_equals(p1.anchor,b1);
}, "popover anchor IDL property returns the anchor element");
assert_equals(p1.anchorElement,b1);
}, "popover anchorElement IDL property returns the anchor element");

test(function() {
assert_equals(p1.anchorElement,b1);
p1.anchorElement = b2;
assert_equals(p1.anchorElement,b2);
assert_equals(p1.getAttribute('anchor'),'','Idref is empty after setting element');
p1.anchorElement = b1; // Reset
}, "popover anchorElement is settable");
</script>

<button id=b1>button</button>
<div id=p2>Anchored div</div>
<style>
* {margin:0;padding:0;}
#b1 {width: 200px;}
#p2 {
position: absolute;
left: anchor(right);
}
</style>

<script>
test(function() {
assert_equals(p2.anchorElement,null);
const button = document.getElementById('b1');
assert_true(!!button);
p2.anchorElement = button;
assert_equals(p2.getAttribute('anchor'),'','Idref should be empty after setting element');
assert_equals(p2.anchorElement,button,'Element reference should be button');
assert_equals(p2.offsetLeft, 200, 'The anchor relationship should be functional');
}, "anchorElement affects anchor positioning");
</script>

0 comments on commit e021431

Please sign in to comment.