grid-order-with-popover.html (1739B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <meta name="timeout" content="long"> 4 <title>CSS Display: reading-flow with value grid-order</title> 5 <link rel="help" href="https://drafts.csswg.org/css-display-4/#reading-flow"> 6 <link rel="author" title="Di Zhang" href="mailto:dizhangg@chromium.org"> 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-vendor.js"></script> 11 <script src="/resources/testdriver-actions.js"></script> 12 <script src='../../resources/shadow-dom.js'></script> 13 <script src="../../resources/focus-utils.js"></script> 14 15 <style> 16 .wrapper { 17 display: grid; 18 reading-flow: grid-order; 19 } 20 .popover { 21 inset:auto; 22 top:200px; 23 left:200px; 24 } 25 </style> 26 27 <div class="wrapper"> 28 <button id=a style="order: 4">A</button> 29 <button id=invoker style="order: 2" popovertarget=P>Invoker</button> 30 <button id=c style="order: 1">C</button> 31 </div> 32 <div popover id=P class="popover"> 33 <button id=b1 style="order: 3">Popover button B1</button> 34 <button id=b2 style="order: 1">Popover button B2</button> 35 <button id=b3 style="order: 2">Popover button B3</button> 36 </div> 37 38 <script> 39 document.querySelector('[popovertarget]').click(); 40 41 promise_test(async () => { 42 let elements = [ 43 'c', 44 'invoker', 45 'b1', 46 'b2', 47 'b3', 48 'a', 49 ]; 50 await assert_focus_navigation_forward(elements); 51 }, `Popover is reading-flow item.`); 52 53 promise_test(async () => { 54 P.classList.add("wrapper"); 55 let elements = [ 56 'c', 57 'invoker', 58 'b2', 59 'b3', 60 'b1', 61 'a', 62 ]; 63 await assert_focus_navigation_forward(elements); 64 }, `Popover is reading-flow item and reading-flow container.`); 65 </script>