behavior-first-requirement.html (3865B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>HTML Test: focusgroup - Behavior-first requirement validation</title> 4 <link rel="author" title="Microsoft" href="http://www.microsoft.com/"> 5 <link rel="help" href="https://open-ui.org/components/scoped-focusgroup.explainer/"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="/resources/testdriver.js"></script> 9 <script src="/resources/testdriver-vendor.js"></script> 10 <script src="/resources/testdriver-actions.js"></script> 11 <script src="resources/focusgroup-utils.js"></script> 12 13 <!-- Valid behavior-first examples --> 14 <div id=valid1 focusgroup="toolbar"> 15 <span id=item1 tabindex=0>item1</span> 16 <span id=item2 tabindex=0>item2</span> 17 </div> 18 19 <div id=valid2 focusgroup="tablist inline"> 20 <span id=item3 tabindex=0>item3</span> 21 <span id=item4 tabindex=0>item4</span> 22 </div> 23 24 <div id=valid3 focusgroup="radiogroup wrap"> 25 <span id=item5 tabindex=0>item5</span> 26 <span id=item6 tabindex=0>item6</span> 27 </div> 28 29 <!-- Invalid behavior-first examples (should be ignored) --> 30 <div id=invalid1 focusgroup=""> 31 <span id=item7 tabindex=0>item7</span> 32 <span id=item8 tabindex=0>item8</span> 33 </div> 34 35 <div id=invalid2 focusgroup="inline"> 36 <span id=item9 tabindex=0>item9</span> 37 <span id=item10 tabindex=0>item10</span> 38 </div> 39 40 <div id=invalid3 focusgroup="wrap"> 41 <span id=item11 tabindex=0>item11</span> 42 <span id=item12 tabindex=0>item12</span> 43 </div> 44 45 <script> 46 promise_test(async t => { 47 // Valid behavior-first syntax should enable focusgroup navigation 48 var item1 = document.getElementById("item1"); 49 var item2 = document.getElementById("item2"); 50 51 await focusAndKeyPress(item1, kArrowRight); 52 assert_equals(document.activeElement, item2, "Valid 'toolbar' behavior should enable navigation"); 53 }, "Valid behavior-first token 'toolbar' enables focusgroup navigation"); 54 55 promise_test(async t => { 56 var item3 = document.getElementById("item3"); 57 var item4 = document.getElementById("item4"); 58 59 await focusAndKeyPress(item3, kArrowRight); 60 assert_equals(document.activeElement, item4, "Valid 'tablist inline' behavior should enable navigation"); 61 }, "Valid behavior-first token 'tablist' with modifier enables focusgroup navigation"); 62 63 promise_test(async t => { 64 var item5 = document.getElementById("item5"); 65 var item6 = document.getElementById("item6"); 66 67 await focusAndKeyPress(item5, kArrowRight); 68 assert_equals(document.activeElement, item6, "Valid 'radiogroup wrap' behavior should enable navigation"); 69 }, "Valid behavior-first token 'radiogroup' with modifier enables focusgroup navigation"); 70 71 promise_test(async t => { 72 // Invalid behavior-first syntax should NOT enable focusgroup navigation 73 var item7 = document.getElementById("item7"); 74 var item8 = document.getElementById("item8"); 75 76 await focusAndKeyPress(item7, kArrowRight); 77 assert_equals(document.activeElement, item7, "Empty focusgroup attribute should not enable navigation"); 78 }, "Empty focusgroup attribute is rejected and does not enable navigation"); 79 80 promise_test(async t => { 81 var item9 = document.getElementById("item9"); 82 var item10 = document.getElementById("item10"); 83 84 await focusAndKeyPress(item9, kArrowRight); 85 assert_equals(document.activeElement, item9, "Invalid first token 'inline' should not enable navigation"); 86 }, "Invalid first token 'inline' is rejected and does not enable navigation"); 87 88 promise_test(async t => { 89 var item11 = document.getElementById("item11"); 90 var item12 = document.getElementById("item12"); 91 92 await focusAndKeyPress(item11, kArrowRight); 93 assert_equals(document.activeElement, item11, "Invalid first token 'wrap' should not enable navigation"); 94 }, "Invalid first token 'wrap' is rejected and does not enable navigation"); 95 </script>