interestfor-keyboard-invalidation.tentative.html (1393B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <meta charset="utf-8" /> 4 <link rel="author" href="mailto:masonf@chromium.org"> 5 <link rel="help" href="https://open-ui.org/components/interest-invokers.explainer/" /> 6 <link rel=match href="interestfor-keyboard-invalidation-ref.html"> 7 <script src="/resources/testdriver.js"></script> 8 <script src="/resources/testdriver-actions.js"></script> 9 <script src="/resources/testdriver-vendor.js"></script> 10 11 <button id=b1 interestfor=target>Button</button> 12 <button id=b2 interestfor=target>Button</button> 13 <button id=b3 interestfor=target>Button</button> 14 <button id=b4>Button</button> 15 <button id=b5>Button</button> 16 <div popover id=target>Target</div> 17 18 <style> 19 :interest-source { 20 background-color: purple; 21 } 22 :interest-source:has-partial-interest { 23 background-color: red; 24 } 25 /* Test complicated combinators: */ 26 :interest-source + button { 27 background-color: green; 28 } 29 :root:has(:interest-source) #b5 { 30 background-color: green; 31 } 32 :interest-target { 33 background-color: yellow; 34 } 35 [interestfor] { 36 interest-delay: 0s; 37 } 38 #target { 39 inset:auto; 40 top:50px; 41 left:0; 42 } 43 </style> 44 45 <script> 46 buttons = Array.from(document.querySelectorAll('[interestfor]')); 47 async function runTest() { 48 for (const b of buttons) { 49 b.focus(); 50 } 51 document.documentElement.classList.remove("reftest-wait"); 52 } 53 runTest(); 54 </script>