1
    2
    3
    4
    5
    6
    7
    8
    9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32
   33
   34
   35
   36
   37
   38
   39
   40
   41
   42
   43
   44
   45
   46
   47
   48
   49
   50
   51
   52
   53
   54
   55
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
   67
   68
   69
   70
   71
   72
   73
   74
   75
   76
   77
   78
   79
   80
   81
   82
   83
   84
   85
   86
   87
   88


content / test / data / accessibility / css / anchor-positioning-changed.html [blame]

<!--
@BLINK-ALLOW:details*
@EXECUTE-AND-WAIT-FOR:addAriaControls()
@EXECUTE-AND-WAIT-FOR:removeTooltip()
@EXECUTE-AND-WAIT-FOR:addAnchor()
@EXECUTE-AND-WAIT-FOR:changeAnchorId()
@EXECUTE-AND-WAIT-FOR:changeTargetId()
-->
<html>
<head><style>
.anchor1 {
  anchor-name: --anchor-1;
  margin: 10dvh;
}

.anchor2 {
  anchor-name: --anchor-2;
}

.target1 {
  position: absolute;
  position-anchor: --anchor-1;
  top: anchor(bottom);
  right: anchor(right);
}

.target2 {
  position: absolute;
  position-anchor: --anchor-2;
  top: anchor(bottom);
  left: anchor(left);
}

</style></head>
<body>
  <p class="target1" id="t1">target1</p>
  <p role="tooltip" class="target2">target2</p>
  <button class="anchor1">anchor1</button>
  <button class="anchor2">anchor2</button>
</body>
</html>
<script>
// Before the functions below run, anchor1 has detailsId set. anchor2 does not.

// Step 1: Adding aria-controls to anchor1 should remove the detailsId.
// Expectation: Neither anchor1 nor anchor2 have detailsId set.
function addAriaControls() {
  document.querySelector('.anchor1').setAttribute("aria-controls", "t1");
  document.title = "addAriaControls() done";
  return "addAriaControls() done";
}

// Step 2: Removing role=tooltip from target2 should set detailsId on anchor2.
// Expectation: Only anchor2 has detailsId set.
function removeTooltip() {
  document.querySelector('.target2').setAttribute("role", "checkbox");
  document.title = "removeTooltip() done";
  return "removeTooltip() done";
}

// Step 3: Add a header with the same name as anchor2. target2 should be anchored
// to the heading instead of anchor2 now.
// Expectation: Only heading has detailsId set.
function addAnchor() {
  let h1 = document.createElement("h1");
  h1.innerText = "my-heading";
  Object.assign(h1.style, {"anchor-name": "--anchor-2"});
  document.body.appendChild(h1);
  document.title = "addAnchor() done";
  return "addAnchor() done";
}

// Step 4: Change the heading's id.
// Expectation: The heading should still have detailsId set.
function changeAnchorId() {
  document.getElementsByTagName('h1').id = "abc";
  document.title = "changeAnchorId() done";
  return "changeAnchorId() done";
}

// Step 5: Change target2's id.
// Expectation: The heading should still have detailsId set.
function changeTargetId() {
  document.querySelector('.target2').id = "abc";
  document.title = "changeTargetId() done";
  return "changeTargetId() done";
}
</script>