<!DOCTYPE html>
<meta charset="utf-8">
<link rel=author href="mailto:[email protected]">
<link rel=help href="https://open-ui.org/components/popover.research.explainer">
<link rel=help href="https://html.spec.whatwg.org/multipage/popover.html">
<link rel=match href="popover-anchor-display-ref.html">
<link rel=stylesheet href="/fonts/ahem.css">
<script src="resources/popover-utils.js"></script>
<p>There should be a green box attached to the right side of each orange box.</p>
<div id=proper_anchors class=wrapper>
<!-- Example using the `anchor` implicit reference element -->
<div>
<div class=anchor id=anchor1></div>
<div id=popover1 popover=manual anchor=anchor1></div>
</div>
<!-- Example with `anchor` attribute but not using it for anchor pos -->
<div>
<div id=anchor2 class=anchor></div>
<div id=popover2 popover=manual anchor></div>
</div>
<!-- Example using `anchor-name` plus inset, and no `anchor` attribute -->
<div>
<div id=anchor3 class=anchor></div>
<div id=popover3 popover=manual></div>
</div>
<!-- Example using implicit anchor reference and inline anchor element -->
<div>
<span id=anchor4>X</span>
<div id=popover4 popover=manual anchor=anchor4></div>
</div>
<!-- Example using a default anchor which is not the implicit anchor -->
<div>
<div class=anchor id=anchor5></div>
<!-- Note `anchor=anchor1` here, not anchor5 -->
<div id=popover5 popover=manual anchor=anchor1></div>
</div>
<!-- Example using implicit anchor reference and position-anchor:auto -->
<div>
<div class=anchor id=anchor6></div>
<div id=popover6 popover=manual anchor=anchor6></div>
</div>
</div>
<p>There should NOT be any red boxes next to the orange ones. (Red ones down below are ok.)</p>
<div id=improper_anchors class=wrapper>
<!-- Example using implicit anchor reference and anchor(auto foo)-->
<div>
<div class=anchor id=anchor7></div>
<div id=popover7 popover=manual anchor=anchor7></div>
</div>
<!-- Example using invalid anchor name -->
<div>
<div class=anchor id=anchor8></div>
<div id=popover8 popover=manual anchor=anchor8></div>
</div>
</div>
<script>
Array.from(document.querySelectorAll('[popover=manual]')).forEach(p => p.showPopover());
</script>
<style>
body { margin:0; padding:0; box-sizing: border-box; }
p {height: 25px;}
.wrapper {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.wrapper>div {
position:relative;
width: 125px;
height: 75px;
}
.wrapper>div div {
width: 50px;
height: 50px;
}
.anchor {
background: orange;
}
[popover] {
inset: auto;
padding:0;
border:0;
}
#proper_anchors [popover] {
background: lime;
}
#improper_anchors [popover] {
background: red;
}
#popover1 {
left: anchor(right);
top: anchor(top);
}
#anchor2 {
anchor-name: --anchor2;
}
#popover2 {
left: anchor(--anchor2 right);
top: anchor(--anchor2 top);
}
#anchor3 {
anchor-name: --anchor3;
}
#popover3 {
inset:auto;
left: anchor(--anchor3 right);
top: anchor(--anchor3 top);
}
#anchor4 {
font-family: Ahem;
font-size: 50px;
color: orange;
}
#popover4 {
left: anchor(right);
top: anchor(top);
}
#anchor5 {
anchor-name: --anchor5;
}
#popover5 {
position-anchor: --anchor5;
left: anchor(right); /* shouldn't use the implicit anchor */
top: anchor(top);
}
#popover6 {
position-anchor: auto;
left: anchor(right);
top: anchor(top);
}
#popover7 {
left: anchor(auto right);
top: anchor(auto top);
}
#popover8 {
/* The `implicit` keyword was renamed to `auto`, and anyway should not
work in this context. */
left: anchor(implicit right);
top: anchor(implicit top);
}
</style>
Codebase Browser
chromium