chromium/src/third_party/blink/web_tests/fast/spatial-navigation/snav-z-index.html

<style>
  div.simple { border: 3px solid red;}
  div.simple:focus { border: 3px solid gray;}
  div.positioned { border: 3px solid blue;}
  div.positioned:focus{ border: 3px solid gray;}
  #popup {position: absolute; top:120; left:240; border: 8px solid black; z-index:1000}
</style>

Test that SpatNav prefers the elements with higher Z-indices.

<div id="popup">
<table><tr><td>
<div tabindex="1" id="p11" class="positioned"><img src="resources/green.png" width=160px height=60px></div>
<div tabindex="2" id="p12" class="positioned"><img src="resources/green.png" width=160px height=60px></div>
</td><td>
<div tabindex="1" id="p21" class="positioned"><img src="resources/green.png" width=160px height=60px></div>
<div tabindex="2" id="p22" class="positioned"><img src="resources/green.png" width=160px height=60px></div>
</td></tr></table>
</div>

<table>
<tr><td>
<div tabindex="1" id="s11" class="simple"><img src="resources/green.png" width=160px height=60px></div>
<div tabindex="2" id="s12" class="simple"><img src="resources/green.png" width=160px height=60px></div>
<div tabindex="3" id="s13" class="simple"><img src="resources/green.png" width=160px height=60px></div>
<div tabindex="4" id="s14" class="simple"><img src="resources/green.png" width=160px height=60px></div>
<div tabindex="5" id="s15" class="simple"><img src="resources/green.png" width=160px height=60px></div>
</td><td>
<div tabindex="1" id="start" class="simple"><img src="resources/green.png" width=160px height=60px></div>
<div tabindex="2" id="s22" class="simple"><img src="resources/green.png" width=160px height=60px></div>
<div tabindex="3" id="s23" class="simple"><img src="resources/green.png" width=160px height=60px></div>
<div tabindex="4" id="s24" class="simple"><img src="resources/green.png" width=160px height=60px></div>
<div tabindex="5" id="s25" class="simple"><img src="resources/green.png" width=160px height=60px></div>
</td></tr></table>

<p>Once focus reaches a popup, we favor its focusables (#p*) over focusables under it (#s*).</p>

<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="resources/snav-testharness.js"></script>
<script>
  var resultMap = [
    ["Down", "s22"],
    ["Down", "p11"],
    ["Down", "p12"],
    ["Down", "s24"],
    ["Down", "s25"],
    ["Up", "s24"],
    ["Up", "p12"],
    ["Right", "p22"],
    ["Left", "p12"],
    ["Left", "s24"],
    ["Left", "s14"],
    ["Up", "s13"],
    ["Up", "s12"],
    ["Right", "s22"],
    ["Right", "p11"],
    ["Right", "p21"],
    ["Up", "start"],
  ];
  // Start at a known place.
  document.getElementById("start").focus();
  snav.assertFocusMoves(resultMap);
</script>