content/test/data/accessibility/html/interest-for.html

<!--
@MAC-ALLOW:AXExpanded
@WIN-ALLOW:details-from*
@WIN-ALLOW:details-roles*
@WIN-ALLOW:EXPANDED*
@WIN-ALLOW:HASPOPUP*
@WIN-ALLOW:haspopup*
@WIN-ALLOW:has-interest-for*
@BLINK-ALLOW:details*
@BLINK-ALLOW:desc*
@BLINK-ALLOW:haspopup*
@BLINK-ALLOW:hasInterestFor*
@BLINK-ALLOW:expanded*
@AURALINUX-ALLOW:details-from*
@AURALINUX-ALLOW:details-roles*
@AURALINUX-ALLOW:expandable*
@AURALINUX-ALLOW:expanded*
@AURALINUX-ALLOW:haspopup:*
@AURALINUX-ALLOW:has-interest-for*
-->

<!-- Rich interest for -->

<!-- Set details relation when target is rich and open -->
<div popover="manual" id="interestee1"><input></div>
<button interestfor="interestee1">Button</button>

<!-- No details relation when interest for is next in the dom -->
<button interestfor="interestee2">Button</button>
<div popover="manual" id="interestee2"><input></div>

<!-- Plain interest for -->

<!-- No details relation when target is not rich, will use as name -->
<div popover="manual" id="interestee3">Plain #3</div>
<button interestfor="interestee3"></button>

<!-- Use as description if there's already a name-->
<div popover="manual" id="interestee4">Plain #4</div>
<button interestfor="interestee4">Button</button>

<!-- Non-popover target -->

<!-- No details relation when target is not a popover -->
<div id="interestee5">Plain #5</div>
<button interestfor="interestee5"></button>

<!-- Closed rich interest for -->

<!-- No details relation when target is closed, but still has interest for -->
<div popover="manual" id="interestee6"><input></div>
<button interestfor="interestee6">Button</button>

<script>
  for (const id of ['interestee1', 'interestee2', 'interestee3', 'interestee4']) {
    document.getElementById(id).showPopover();
  }
</script>