Blitz - WPT: position-anchor-target-with-children.html

wpt / css / css-anchor-position / position-anchor-target-with-children.html

/css/css-anchor-position/position-anchor-target-with-children.html

<!DOCTYPE html>
<html class=reftest-wait>
<title>Tests 'position-anchor' property impact on target's children when target visibility changes</title>
<link rel="help" href="https://drafts.csswg.org/css-anchor-1/#position-anchor">
<link rel="author" href="mailto:plampe@igalia.com">
<link rel="match" href="position-anchor-target-with-children-ref.html">
<script src="/common/reftest-wait.js"></script>
<script src="/common/rendering-utils.js"></script>
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style>
.anchor {
  width: 100px;
  height: 100px;
  background: orange;
}

.target {
  position: fixed;
  width: 100px;
  height: 100px;
  background: lime;
  top: anchor(bottom);
  left: anchor(left);
}

body {
  margin: 0;
  font: 20px/1 Ahem;
}

#anchor1 {
  anchor-name: --a1;
  margin-left: 100px;
}

#target1 {
  position-anchor: --a1;
}

#anchor2 {
  anchor-name: --a2;
  margin-left: 300px;
  margin-top: 100px;
}

#target2 {
  position-anchor: --a2;
}
</style>

<div id="anchor1" class="anchor">anchor1</div>
<div id="anchor2" class="anchor">anchor2</div>

<div id="target1" class="target">target1<ul><li>child 1</li><li>child 2</li></ul></div>
<div id="target2" class="target">target2<ul><li>child 1</li><li>child 2</li></ul></div>

<script>
  // #target2 should be initially visible.
  waitForAtLeastOneFrame().then(() => {
    // Change #target2 to be invisible.
    document.getElementById('target2').style.display = 'none';
    waitForAtLeastOneFrame().then(() => {
      // #target2 should be invisible now.
      // Change #target2 to be visible.
      document.getElementById('target2').style.display = 'flow';
      waitForAtLeastOneFrame().then(() => {
        // #target2 should be visible and anchor-positioned again now.
        takeScreenshot();
      });
    });
  });
</script>

/css/css-anchor-position/position-anchor-target-with-children-ref.html

<!DOCTYPE html>
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style>
.anchor {
  width: 100px;
  height: 100px;
  background: orange;
}

.target {
  position: fixed;
  background: lime;
  width: 100px;
  height: 100px;
}

body {
  margin: 0;
  font: 20px/1 Ahem;
}

#anchor1 {
  margin-left: 100px;
}

#target1 {
  left: 100px;
  top: 100px;
}

#anchor2 {
  margin-left: 300px;
  margin-top: 100px;
}

#target2 {
  left: 300px;
  top: 300px;
}
</style>

<div id="anchor1" class="anchor">anchor1</div>
<div id="anchor2" class="anchor">anchor2</div>

<div id="target1" class="target">target1<ul><li>child 1</li><li>child 2</li></ul></div>
<div id="target2" class="target">target2<ul><li>child 1</li><li>child 2</li></ul></div>