popover-light-dismiss-hint.html (4127B)
1 <!DOCTYPE html> 2 <meta charset="utf-8" /> 3 <title>Popover light dismiss behavior for hints</title> 4 <meta name="timeout" content="long"> 5 <link rel="author" href="mailto:masonf@chromium.org"> 6 <link rel=help href="https://open-ui.org/components/popover-hint.research.explainer"> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <script src="/resources/testdriver.js"></script> 10 <script src="/resources/testdriver-actions.js"></script> 11 <script src="/resources/testdriver-vendor.js"></script> 12 <script src="resources/popover-utils.js"></script> 13 14 <div id=outside></div> 15 <div popover id=auto1>auto 1 16 <div popover id=auto2>auto 2 17 <div popover=hint id=innerhint1>inner hint 1 18 <div popover=hint id=innerhint2>inner hint 2 19 <div popover id=invalidauto1>Improperly nested auto 1</div> 20 </div> 21 </div> 22 </div> 23 </div> 24 <div popover=hint id=hint1>hint 1 25 <div popover=hint id=hint2>hint 2 26 <div popover id=invalidauto2>Improperly nested auto 2</div> 27 </div> 28 </div> 29 <div popover=manual id=manual1>Manual</div> 30 31 <style> 32 [popover] {right:auto;bottom:auto;} 33 #auto1 {left:100px; top:100px;} 34 #auto2 {left:100px; top:200px;} 35 #innerhint1 {left:100px; top:300px;} 36 #innerhint2 {left:100px; top:400px;} 37 #invalidauto1 {left:100px; top:500px;} 38 #hint1 {left:200px; top:100px;} 39 #hint2 {left:200px; top:200px;} 40 #invalidauto1 {left:200px; top:400px;} 41 #manual1 {left:300px; top:100px;} 42 #outside {width:25px;height:25px} 43 </style> 44 45 <script> 46 const popovers = [ 47 document.querySelector('#auto1'), 48 document.querySelector('#auto2'), 49 document.querySelector('#innerhint1'), 50 document.querySelector('#innerhint2'), 51 document.querySelector('#hint1'), 52 document.querySelector('#hint2'), 53 document.querySelector('#manual1'), 54 ]; 55 function assertState(expectedState,description) { 56 description = description || 'Error'; 57 const n = popovers.length; 58 assert_equals(expectedState.length,n,'Invalid'); 59 for(let i=0;i<n;++i) { 60 assert_equals(popovers[i].matches(':popover-open'),expectedState[i],`${description}, index ${i} (${popovers[i].id})`); 61 } 62 } 63 function openall(t) { 64 // All popovers can be open at once, if shown in order: 65 popovers.forEach((p) => p.hidePopover()); 66 popovers.forEach((p) => p.showPopover()); 67 assertState(Array(popovers.length).fill(true),'All popovers should be able to be open at once'); 68 t.add_cleanup(() => popovers.forEach((p) => p.hidePopover())); 69 } 70 function nvals(n,val) { 71 return new Array(n).fill(val); 72 } 73 for(let i=0;i<(popovers.length-1);++i) { 74 promise_test(async (t) => { 75 openall(t); 76 await clickOn(popovers[i]); 77 let expectedState = [...nvals(i+1,true),...nvals(popovers.length-i-2,false),true]; 78 assertState(expectedState); 79 },`Mixed auto/hint light dismiss behavior, click on ${popovers[i].id}`); 80 } 81 82 promise_test(async (t) => { 83 openall(t); 84 await clickOn(outside); 85 assertState([false,false,false,false,false,false,true]); 86 },'Clicking outside closes all'); 87 88 promise_test(async (t) => { 89 openall(t); 90 invalidauto1.showPopover(); 91 assertState([true,true,false,false,false,false,true],'auto inside hint ignores the hints and gets nested within auto2'); 92 assert_true(invalidauto1.matches(':popover-open'),'the inner nested auto should be open'); 93 invalidauto1.hidePopover(); 94 assertState([true,true,false,false,false,false,true]); 95 assert_false(invalidauto1.matches(':popover-open')); 96 },'Auto cannot be nested inside hint (invalidauto1)'); 97 98 promise_test(async (t) => { 99 openall(t); 100 invalidauto2.showPopover(); 101 assertState([false,false,false,false,false,false,true],'auto inside hint works as an independent (non-nested) auto'); 102 assert_true(invalidauto2.matches(':popover-open'),'the inner nested auto should be open'); 103 invalidauto2.hidePopover(); 104 assertState([false,false,false,false,false,false,true]); 105 assert_false(invalidauto2.matches(':popover-open')); 106 },'Auto cannot be nested inside hint (invalidauto2)'); 107 </script>