Blitz - WPT: author-overlay-top-layer-removal.html

wpt / css / css-position / overlay / author-overlay-top-layer-removal.html

/css/css-position/overlay/author-overlay-top-layer-removal.html

<!DOCTYPE html>
<link rel=author href="mailto:jarhar@chromium.org">
<link rel=help href="https://drafts.csswg.org/css-position-4/#overlay">
<link rel=match href="author-overlay-top-layer-removal-ref.html">
<meta name=assert content="popovers should be removed from the top layer even with an author overlay rule.">

<p>Text before popover</p>
<div id=zindex>zindex</div>
<div id=popover popover>popover</div>
<p>Text after popover</p>

<style>
#popover {
  overlay: auto !important;
  position: initial;
  display: block;
}
#zindex {
  background-color: green;
  z-index: 999;
  position: absolute;
}
</style>

<script>
const popover = document.getElementById('popover');
popover.showPopover();
popover.hidePopover();

const rect = popover.getBoundingClientRect();
const zindex = document.getElementById('zindex');
zindex.style.top = `${rect.y}px`;
zindex.style.left = `${rect.x}px`;
</script>

/css/css-position/overlay/author-overlay-top-layer-removal-ref.html

<!DOCTYPE html>
<link rel=author href="mailto:jarhar@chromium.org">
<link rel=help href="https://drafts.csswg.org/css-position-4/#overlay">
<meta name=assert content="popovers should be removed from the top layer even with an author overlay rule.">

<p>Text before popover</p>
<div id=zindex>zindex</div>
<div id=popover popover>popover</div>
<p>Text after popover</p>

<style>
#popover {
  overlay: auto !important;
  position: initial;
  display: block;
}
#zindex {
  background-color: green;
  z-index: 999;
  position: absolute;
}
</style>

<script>
const rect = popover.getBoundingClientRect();
const zindex = document.getElementById('zindex');
zindex.style.top = `${rect.y}px`;
zindex.style.left = `${rect.x}px`;
</script>