| <!doctype html> |
| <style> |
| .cursor { |
| cursor: pointer; |
| } |
| |
| .box { |
| display: inline-block; |
| position: absolute; |
| width: 100px; |
| } |
| |
| div { |
| margin-top: 5px; |
| border: 1px solid black; |
| } |
| |
| div div { |
| margin-top: 0; |
| width: 100px; |
| border: none; |
| } |
| |
| * { |
| background: white; |
| } |
| |
| .green { |
| /* To help debugging, every element in resultMap is green */ |
| background: lightgreen; |
| } |
| |
| .gray { |
| /* To help debugging, every skippable-element is gray */ |
| background: lightgray; |
| } |
| </style> |
| <button class="green" id="start">Start</button> |
| <div class="cursor gray" id="a">A |
| <div>A-child1</div> |
| <button class="green" id="a-child2">A-child2</button> |
| </div> |
| <div class="clickable gray" id="b">B |
| <div>B-child1</div> |
| <div class="green" tabindex="0" id="b-child2">B-child2</div> |
| </div> |
| <div class="cursor gray" id="c">C |
| <input type="text" id="c-child1"> |
| <div>C-child2</div> |
| </div> |
| <div class="clickable gray" id="d">D |
| <div class="clickable gray" id="d-child">D-child |
| <div class="clickable green" id="d-child-child">D-child-child |
| </div> |
| </div> |
| </div> |
| <div class="clickable gray" id="e">E |
| <div> |
| <div class="green" tabindex="0" id="e-child-child">E-child-child |
| </div> |
| </div> |
| </div> |
| <div class="cursor gray" id="f" style="position: relative; margin-top: 60px; height: 30px;">F |
| <!-- |f-child1| is out side of |f|. --> |
| <div class="green" tabindex="0" id="f-child1" style="position: absolute; top: -25px;">F-child1</div> |
| <div class="green" tabindex="0" id="f-child2" style="position: absolute; top: 0;">F-child2</div> |
| </div> |
| <div class="clickable gray" id="g">G |
| <div class="cursor gray"> |
| <a href="" class="green" id="g-child">G-child |
| <div class="clickable gray"> |
| <div class="cursor gray"> |
| <a href="" class="green" id="g-child-child">G-child-child</a> |
| </div> |
| </div> |
| </a> |
| </div> |
| </div> |
| |
| <p>This test ensures that an element that SupportsSpatialNavigationFocus() |
| doesn't become a candidate if it has an inner focusable descendant. |
| </p> |
| |
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| <script src="resources/snav-testharness.js"></script> |
| <script> |
| const noop = () => { }; |
| const clickableElements = document.getElementsByClassName("clickable"); |
| for (let elem of clickableElements) { |
| elem.addEventListener('click', noop); |
| } |
| |
| var resultMap = [ |
| ["Down", "a-child2"], |
| ["Down", "b-child2"], |
| ["Down", "c-child1"], |
| ["Down", "d-child-child"], |
| ["Down", "e-child-child"], |
| ["Down", "f-child1"], |
| ["Down", "f-child2"], |
| ["Down", "g-child"], |
| ["Down", "g-child-child"] |
| ]; |
| |
| // Start from a known place. |
| document.getElementById("start").focus(); |
| snav.assertFocusMoves(resultMap); |
| </script> |
