Blitz - WPT: anchor-scroll-to-sticky-005.html

wpt / css / css-anchor-position / anchor-scroll-to-sticky-005.html

/css/css-anchor-position/anchor-scroll-to-sticky-005.html

<!DOCTYPE html>
<html class='reftest-wait'>
<title>Test: Fixed box anchors to sticky child while scrolling</title>
<link rel="author" title="Elika J. Etemad" href="https://fantasai.inkedblade.net/contact">
<link rel="help" href="https://drafts.csswg.org/css-anchor-1/">
<link rel="match" href="anchor-scroll-to-sticky-005-ref.html">

<style>
#sticky {
  position: sticky;
  inset-block-start: 0;
  background: teal;
  border: 10px solid aqua;
  color: white;
  anchor-name: --sticky;
}

#child {
  anchor-name: --sticky-child;
  background: blue;
  border: 5px solid navy;
  margin-inline: 25%;
}

.anchored {
  position: absolute;
  background: fuchsia;
  padding: 4px;
}
.anchored.positionArea {
  position-area: bottom span-right;
}
.anchored.anchorFunction {
  top: anchor(outside);
  right: anchor(inside);
 }

.anchored.sticky {
  position-anchor: --sticky;
}
.anchored.sticky-child {
  position-anchor: --sticky-child;
}

:root {
  padding: 40px;
  block-size: 200%;
}
body {
  border: 2px dashed;
  height: 100%;
}
</style>

<div id="sticky">Sticky
  <div id="child">Sticky Child</div>
</div>
<div class="anchored sticky positionArea">Anchored to Sticky</div>
<div class="anchored sticky-child positionArea">Anchored to Child</div>
<div class="anchored sticky anchorFunction">Anchored to Sticky</div>
<div class="anchored sticky-child anchorFunction">Anchored to Child</div>

<script>
window.scrollBy(0, 100);
document.documentElement.removeAttribute('class');
</script>

/css/css-anchor-position/anchor-scroll-to-sticky-005-ref.html

<!DOCTYPE html>
<html class='reftest-wait'>
<title>Reference: Fixed box anchors to sticky child while scrolling</title>
<link rel="author" title="Elika J. Etemad" href="https://fantasai.inkedblade.net/contact">

<style>
#sticky {
  background: teal;
  border: 10px solid aqua;
  color: white;
  anchor-name: --sticky;
}

#child {
  anchor-name: --sticky-child;
  background: blue;
  border: 5px solid navy;
  margin-inline: 25%;
}

.anchored {
  position: absolute;
  background: fuchsia;
  padding: 4px;
}
.anchored.positionArea {
  position-area: bottom span-right;
}
.anchored.anchorFunction {
  top: anchor(outside);
  right: anchor(inside);
 }

.anchored.sticky {
  position-anchor: --sticky;
}
.anchored.sticky-child {
  position-anchor: --sticky-child;
}

:root {
  padding: 40px;
  block-size: 200%;
}
body {
  border: 2px dashed;
  height: 100%;
}
</style>

<div style="position: fixed; top: 0; width: calc(100% - 100px); height: 100vh">
<div id="sticky">Sticky
  <div id="child">Sticky Child</div>
</div>
<div class="anchored sticky positionArea">Anchored to Sticky</div>
<div class="anchored sticky-child positionArea">Anchored to Child</div>
<div class="anchored sticky anchorFunction">Anchored to Sticky</div>
<div class="anchored sticky-child anchorFunction">Anchored to Child</div>
</div>

<script>
window.scrollBy(0, 100);
document.documentElement.removeAttribute('class');
</script>