diff options
Diffstat (limited to 'testing/web-platform/tests/shadow-dom')
13 files changed, 514 insertions, 30 deletions
diff --git a/testing/web-platform/tests/shadow-dom/declarative/WEB_FEATURES.yml b/testing/web-platform/tests/shadow-dom/declarative/WEB_FEATURES.yml new file mode 100644 index 0000000000..4e31ed4962 --- /dev/null +++ b/testing/web-platform/tests/shadow-dom/declarative/WEB_FEATURES.yml @@ -0,0 +1,3 @@ +features: +- name: declarative-shadow-dom + files: "**" diff --git a/testing/web-platform/tests/shadow-dom/declarative/gethtml.html b/testing/web-platform/tests/shadow-dom/declarative/gethtml.html index d950ca7734..ff70653477 100644 --- a/testing/web-platform/tests/shadow-dom/declarative/gethtml.html +++ b/testing/web-platform/tests/shadow-dom/declarative/gethtml.html @@ -29,7 +29,6 @@ function testElementType(allowsShadowDom, elementType, runGetHTMLOnShadowRoot, } let shadowRoot; - const isOpen = mode === 'open'; let initDict = {mode: mode, delegatesFocus: delegatesFocus, clonable}; let expectedSerializable = null; switch (serializable) { @@ -47,12 +46,8 @@ function testElementType(allowsShadowDom, elementType, runGetHTMLOnShadowRoot, `shadowrootmode=${mode}${delegatesAttr}${serializableAttr}` + `${clonableAttr}>`; wrapper.setHTMLUnsafe(html); - if (isOpen) { - shadowRoot = wrapper.firstElementChild.shadowRoot; - } else { - // For closed shadow root, we rely on the behavior of attachShadow to return it to us - shadowRoot = wrapper.firstElementChild.attachShadow(initDict); - } + // Get hold of the declarative shadow root in a way that works when its mode is "closed" + shadowRoot = wrapper.firstElementChild.attachShadow(initDict); } else { // Imperative shadow dom const element = document.createElement(elementType); @@ -78,22 +73,14 @@ function testElementType(allowsShadowDom, elementType, runGetHTMLOnShadowRoot, assert_equals(shadowRoot.clonable,clonable); shadowRoot.appendChild(document.createElement('slot')); const emptyElement = `<${elementType}>${lightDOMContent}</${elementType}>`; - if (isOpen) { - if (expectedSerializable) { - assert_equals(wrapper.getHTML({serializableShadowRoots: true}), - correctHtml); - assert_equals(wrapper.firstElementChild.getHTML({ - serializableShadowRoots: true}), - `${correctShadowHtml}${lightDOMContent}`); - } else { - assert_equals(wrapper.getHTML({serializableShadowRoots: true}), emptyElement); - } - } else { - // Closed shadow roots should not be returned unless shadowRoots specifically contains the shadow root: + if (expectedSerializable) { assert_equals(wrapper.getHTML({serializableShadowRoots: true}), - emptyElement); - assert_equals(wrapper.getHTML({serializableShadowRoots: true, - shadowRoots: []}), emptyElement); + correctHtml); + assert_equals(wrapper.firstElementChild.getHTML({ + serializableShadowRoots: true}), + `${correctShadowHtml}${lightDOMContent}`); + } else { + assert_equals(wrapper.getHTML({serializableShadowRoots: true}), emptyElement); } // If we provide the shadow root, serialize it, regardless of serializableShadowRoots. assert_equals(wrapper.getHTML({serializableShadowRoots: true, shadowRoots: diff --git a/testing/web-platform/tests/shadow-dom/focus-navigation/focus-navigation-slot-nested-2levels.html b/testing/web-platform/tests/shadow-dom/focus-navigation/focus-navigation-slot-nested-2levels.html index 7d733ea7c2..1b867cc2a9 100644 --- a/testing/web-platform/tests/shadow-dom/focus-navigation/focus-navigation-slot-nested-2levels.html +++ b/testing/web-platform/tests/shadow-dom/focus-navigation/focus-navigation-slot-nested-2levels.html @@ -1,4 +1,5 @@ <!DOCTYPE html> +<meta name="timeout" content="long"> <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> <script src="/resources/testdriver.js"></script> diff --git a/testing/web-platform/tests/shadow-dom/focus-navigation/focus-navigation-slots-in-slot.html b/testing/web-platform/tests/shadow-dom/focus-navigation/focus-navigation-slots-in-slot.html index 39b0806603..3c929de727 100644 --- a/testing/web-platform/tests/shadow-dom/focus-navigation/focus-navigation-slots-in-slot.html +++ b/testing/web-platform/tests/shadow-dom/focus-navigation/focus-navigation-slots-in-slot.html @@ -1,4 +1,5 @@ <!DOCTYPE html> +<meta name="timeout" content="long"> <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> <script src="/resources/testdriver.js"></script> diff --git a/testing/web-platform/tests/shadow-dom/focus-navigation/focus-navigation-with-delegatesFocus.html b/testing/web-platform/tests/shadow-dom/focus-navigation/focus-navigation-with-delegatesFocus.html index 64942a109e..e37accbc8e 100644 --- a/testing/web-platform/tests/shadow-dom/focus-navigation/focus-navigation-with-delegatesFocus.html +++ b/testing/web-platform/tests/shadow-dom/focus-navigation/focus-navigation-with-delegatesFocus.html @@ -1,4 +1,5 @@ <!DOCTYPE html> +<meta name="timeout" content="long"> <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> <script src="/resources/testdriver.js"></script> diff --git a/testing/web-platform/tests/shadow-dom/focus-navigation/focus-navigation.html b/testing/web-platform/tests/shadow-dom/focus-navigation/focus-navigation.html index 9e593eb100..faf3c34cdb 100644 --- a/testing/web-platform/tests/shadow-dom/focus-navigation/focus-navigation.html +++ b/testing/web-platform/tests/shadow-dom/focus-navigation/focus-navigation.html @@ -1,4 +1,5 @@ <!DOCTYPE html> +<meta name="timeout" content="long"> <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> <script src="/resources/testdriver.js"></script> diff --git a/testing/web-platform/tests/shadow-dom/focus-navigation/reading-order/tentative/grid-order-on-shadow-host.html b/testing/web-platform/tests/shadow-dom/focus-navigation/reading-order/tentative/grid-order-on-shadow-host.html new file mode 100644 index 0000000000..a48eda1b57 --- /dev/null +++ b/testing/web-platform/tests/shadow-dom/focus-navigation/reading-order/tentative/grid-order-on-shadow-host.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Display: reading-order-items with value grid-order on shadow host</title> +<link rel="help" href="https://drafts.csswg.org/css-display-4/#reading-order-items"> +<link rel="author" title="Di Zhang" href="mailto:dizhangg@chromium.org"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/testdriver.js"></script> +<script src="/resources/testdriver-vendor.js"></script> +<script src="/resources/testdriver-actions.js"></script> +<script src='../../resources/shadow-dom.js'></script> +<script src="../../resources/focus-utils.js"></script> + +<style> +.wrapper { + display: grid; + reading-order-items: grid-order; +} +</style> + +<div class="test-case" data-expect="root/B,root/A" + data-description="Grid items in shadow host with delegatesFocus"> + <div id="root" class="wrapper" tabindex="0"> + <template shadowrootmode="open" shadowrootdelegatesfocus> + <button id="A" style="order: 2">A</button> + <button id="B" style="order: 1">B</button> + </template> + </div> +</div> + +<div class="test-case" data-expect="root2,root2/B,root2/A" + data-description="Grid items in shadow host without delegatesFocus"> + <div id="root2" class="wrapper" tabindex="0"> + <template shadowrootmode="open"> + <button id="A" style="order: 2">A</button> + <button id="B" style="order: 1">B</button> + </template> + </div> +</div> + +<script> +runFocusTestCases(); +</script> diff --git a/testing/web-platform/tests/shadow-dom/focus-navigation/reading-order/tentative/grid-order-with-iframe.html b/testing/web-platform/tests/shadow-dom/focus-navigation/reading-order/tentative/grid-order-with-iframe.html new file mode 100644 index 0000000000..87b9e0a83d --- /dev/null +++ b/testing/web-platform/tests/shadow-dom/focus-navigation/reading-order/tentative/grid-order-with-iframe.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Display: reading-order-items with value grid-order on iframe</title> +<link rel="help" href="https://drafts.csswg.org/css-display-4/#reading-order-items"> +<link rel="author" title="Di Zhang" href="mailto:dizhangg@chromium.org"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/testdriver.js"></script> +<script src="/resources/testdriver-vendor.js"></script> +<script src="/resources/testdriver-actions.js"></script> +<script src='../../resources/shadow-dom.js'></script> +<script src="../../resources/focus-utils.js"></script> + +<style> +.wrapper { + display: grid; + reading-order-items: grid-order; +} +</style> + +<div class="test-case" data-expect="start,frame2/B,frame1/A,end" + data-description="Grid items are iframes."> + <button id="start">Item Start</button> + <div class="wrapper"> + <iframe id="frame1" style="order: 2" srcdoc="<button id=A>A</button>"></iframe> + <iframe id="frame2" style="order: 1" srcdoc="<button id=B>B</button>"></iframe> + </div> + <button id="end">Item End</button> +</div> + +<script> +window.onload = runFocusTestCases; +</script> diff --git a/testing/web-platform/tests/shadow-dom/focus-navigation/reading-order/tentative/grid-order-with-nested-grids.html b/testing/web-platform/tests/shadow-dom/focus-navigation/reading-order/tentative/grid-order-with-nested-grids.html new file mode 100644 index 0000000000..d3da6682a3 --- /dev/null +++ b/testing/web-platform/tests/shadow-dom/focus-navigation/reading-order/tentative/grid-order-with-nested-grids.html @@ -0,0 +1,72 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Display: reading-order-items with value grid-order in nested grids</title> +<link rel="help" href="https://drafts.csswg.org/css-display-4/#reading-order-items"> +<link rel="author" title="Di Zhang" href="mailto:dizhangg@chromium.org"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/testdriver.js"></script> +<script src="/resources/testdriver-vendor.js"></script> +<script src="/resources/testdriver-actions.js"></script> +<script src='../../resources/shadow-dom.js'></script> +<script src="../../resources/focus-utils.js"></script> + +<style> +.box { + display: grid; + reading-order-items: grid-order; + border-radius: 5px; + padding: 20px; + border-style: dashed; +} + +</style> + +<div class="test-case" data-expect="w,d3,b3a,b3b,d2,b2,d1,b1a,b1b" + data-description="Grid items are not grid containers."> + <div class="box" id="w" tabindex="0"> + <div style="order: 2" id="d1" tabindex="0">Div 1 + <button id="b1a" style="order: 3">Button 1A</button> + <button id="b1b">Button 1B</button> + </div> + <div id="d2" tabindex="0">Div 2 + <button id="b2">Button 2</button> + </div> + <div id="d3" style="order: -1" tabindex="0">Div 3 + <button id="b3a" style="order: 2">Button 3A</button> + <button id="b3b">Button 3B</button> + </div> + </div> +</div> + +<div class="test-case" + data-expect="wrapper,div3,button3b,button3a,div2,button2,div1,button1b,button1a" + data-description="Grid items are grid containers."> + <div class="box" id="wrapper" tabindex="0"> + <div class="box" style="order: 2" id="div1" tabindex="0">Div 1 + <button id="button1a" style="order: 3">Button 1A</button> + <button id="button1b">Button 1B</button> + </div> + <div class="box" id="div2" tabindex="0">Div 2 + <button id="button2">Button 2</button> + </div> + <div class="box" id="div3" style="order: -1" tabindex="0">Div 3 + <button id="button3a" style="order: 2">Button 3A</button> + <button id="button3b">Button 3B</button> + </div> + </div> +</div> + +<div class="test-case" data-expect="a,b,d,c" + data-description="Only has grid containers."> + <div class="box" id="a" tabindex="0">A + <div class="box" id="b" tabindex="0">B + <div class="box" id="c" tabindex="0" style="order: 2">C</div> + <div class="box" id="d" tabindex="0">D</div> + </div> + </div> +</div> + +<script> +runFocusTestCases(); +</script> diff --git a/testing/web-platform/tests/shadow-dom/focus-navigation/reading-order/tentative/grid-order-with-popover.html b/testing/web-platform/tests/shadow-dom/focus-navigation/reading-order/tentative/grid-order-with-popover.html new file mode 100644 index 0000000000..2e98c04157 --- /dev/null +++ b/testing/web-platform/tests/shadow-dom/focus-navigation/reading-order/tentative/grid-order-with-popover.html @@ -0,0 +1,64 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Display: reading-order-items with value grid-order</title> +<link rel="help" href="https://drafts.csswg.org/css-display-4/#reading-order-items"> +<link rel="author" title="Di Zhang" href="mailto:dizhangg@chromium.org"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/testdriver.js"></script> +<script src="/resources/testdriver-vendor.js"></script> +<script src="/resources/testdriver-actions.js"></script> +<script src='../../resources/shadow-dom.js'></script> +<script src="../../resources/focus-utils.js"></script> + +<style> +.wrapper { + display: grid; + reading-order-items: grid-order; +} +.popover { + inset:auto; + top:200px; + left:200px; +} +</style> + +<div class="wrapper"> + <button id=a style="order: 4">A</button> + <button id=invoker style="order: 2" popovertarget=P>Invoker</button> + <button id=c style="order: 1">C</button> +</div> +<div popover id=P class="popover"> + <button id=b1 style="order: 3">Popover button B1</button> + <button id=b2 style="order: 1">Popover button B2</button> + <button id=b3 style="order: 2">Popover button B3</button> +</div> + +<script> +document.querySelector('[popovertarget]').click(); + +promise_test(async () => { + let elements = [ + 'c', + 'invoker', + 'b1', + 'b2', + 'b3', + 'a', + ]; + await assert_focus_navigation_forward(elements); +}, `Popover in reading-order-items: grid-order container.`); + +promise_test(async () => { + P.classList.add("wrapper"); + let elements = [ + 'c', + 'invoker', + 'b2', + 'b3', + 'b1', + 'a', + ]; + await assert_focus_navigation_forward(elements); +}, `Popover in container and itself with reading-order-items: grid-order.`); +</script>
\ No newline at end of file diff --git a/testing/web-platform/tests/shadow-dom/focus-navigation/reading-order/tentative/grid-order-with-slots.html b/testing/web-platform/tests/shadow-dom/focus-navigation/reading-order/tentative/grid-order-with-slots.html new file mode 100644 index 0000000000..3045001e1d --- /dev/null +++ b/testing/web-platform/tests/shadow-dom/focus-navigation/reading-order/tentative/grid-order-with-slots.html @@ -0,0 +1,164 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Display: reading-order-items with value grid-order in Shadow DOM</title> +<link rel="help" href="https://drafts.csswg.org/css-display-4/#reading-order-items"> +<link rel="author" title="Di Zhang" href="mailto:dizhangg@chromium.org"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/testdriver.js"></script> +<script src="/resources/testdriver-vendor.js"></script> +<script src="/resources/testdriver-actions.js"></script> +<script src='../../resources/shadow-dom.js'></script> +<script src="../../resources/focus-utils.js"></script> + +<style> +.wrapper { + display: grid; + reading-order-items: grid-order; +} +</style> + +<span id="root1" class="test-case" data-expect="b1,a1,c1" + data-description="Slot assigned element is a grid with reading-order-items."> + <template shadowrootmode="open"> + <style> + .wrapper { + display: grid; + reading-order-items: grid-order; + } + </style> + <slot></slot> + </template> + <div class="wrapper"> + <button style="order: 2" id="a1">Item A</button> + <button style="order: 1" id="b1">Item B</button> + <button style="order: 3" id="c1">Item C</button> + </div> +</span> +<br> + +<span id="root2" class="test-case" data-expect="b2,a2,c2" + data-description="Slot is a grid with reading-order-items."> + <template shadowrootmode="open"> + <style> + .wrapper { + display: grid; + reading-order-items: grid-order; + } + </style> + <slot class="wrapper"></slot> + </template> + <button style="order: 2" id="a2">Item A</button> + <button style="order: 1" id="b2">Item B</button> + <button style="order: 3" id="c2">Item C</button> +</span> +<br> + +<span id="root3" class="test-case" data-expect="root3/o2,root3/o4,o1,o3,o5" + data-description="Slot is inside a grid container with reading-order-items."> + <template shadowrootmode="open"> + <style> + .wrapper { + display: grid; + reading-order-items: grid-order; + } + </style> + <div class="wrapper"> + <button style="order: 4" id="o4">Order 4</button> + <slot style="order: 10"></slot> + <button style="order: 2" id="o2">Order 2</button> + </div> + </template> + <button style="order: 5" id="o5">Order 5</button> + <button style="order: 1" id="o1">Order 1</button> + <button style="order: 3" id="o3">Order 3</button> +</span> +<br> + +<span id="root4" class="test-case" + data-expect="root4/after,root4/before,b4,a4,d42,d41,d43,c4" + data-description="Slot is a grid with reading-order-items inside a grid container with reading-order-items."> + <template shadowrootmode="open"> + <style> + .wrapper { + display: grid; + reading-order-items: grid-order; + } + </style> + <div class="wrapper"> + <button style="order: 4" id="before">Before</button> + <slot style="order: 10"></slot> + <button style="order: 2" id="after">After</button> + </div> + </template> + <button style="order: 3" id="a4">Item A</button> + <button style="order: 1" id="b4">Item B</button> + <button style="order: 6" id="c4">Item C</button> + <div style="order: 5" class="wrapper"> + <button style="order: 2" id="d41">Item D1</button> + <button style="order: 1" id="d42">Item D2</button> + <button style="order: 3" id="d43">Item D3</button> + </div> +</span> +<br> + +<span id="root5" class="test-case" data-expect="b51,a51,c51,b52,a52,c52" + data-description="Slot is not inside a shadow root."> + <div class="wrapper"> + <slot name=slot1> + <button style="order: 2" id="a51">Item A</button> + <button style="order: 1" id="b51">Item B</button> + <button style="order: 3" id="c51">Item C</button> + </slot> + </div> + <slot class="wrapper" name=slot2> + <button style="order: 2" id="a52">Item A</button> + <button style="order: 1" id="b52">Item B</button> + <button style="order: 3" id="c52">Item C</button> + </slot> +</span> +<br> + +<span id="root6" class="test-case" data-expect="root6/after,root6/before,b6,a6" + data-description="Slot is a display contents inside a grid container."> + <template shadowrootmode="open"> + <style> + .wrapper { + display: grid; + reading-order-items: grid-order; + } + </style> + <div class="wrapper"> + <button style="order: 4" id="before">Before</button> + <slot style="display: contents" style="order: 4"></slot> + <button style="order: 3" id="after">After</button> + </div> + </template> + <button id="a6" style="order: 7">A</button> + <button id="b6" style="order: 2">B</button> +</span> +<br> + +<span id="root7" class="test-case" data-expect="a7,b7,root7/after,root7/before" + data-description="Slot is a display block inside a grid container."> + <template shadowrootmode="open"> + <style> + .wrapper { + display: grid; + reading-order-items: grid-order; + } + </style> + <div class="wrapper"> + <button style="order: 4" id="before">Before</button> + <slot style="display: block" style="order: 4"></slot> + <button style="order: 3" id="after">After</button> + </div> + </template> + <button id="a7" style="order: 7">A</button> + <button id="b7" style="order: 2">B</button> +</span> +<br> + +<script> +runFocusTestCases(); +</script> diff --git a/testing/web-platform/tests/shadow-dom/focus-navigation/reading-order/tentative/grid-order.html b/testing/web-platform/tests/shadow-dom/focus-navigation/reading-order/tentative/grid-order.html new file mode 100644 index 0000000000..1b86ab0b25 --- /dev/null +++ b/testing/web-platform/tests/shadow-dom/focus-navigation/reading-order/tentative/grid-order.html @@ -0,0 +1,89 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Display: reading-order-items with value grid-order</title> +<link rel="help" href="https://drafts.csswg.org/css-display-4/#reading-order-items"> +<link rel="author" title="Di Zhang" href="mailto:dizhangg@chromium.org"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/testdriver.js"></script> +<script src="/resources/testdriver-vendor.js"></script> +<script src="/resources/testdriver-actions.js"></script> +<script src='../../resources/shadow-dom.js'></script> +<script src="../../resources/focus-utils.js"></script> + +<style> +.wrapper { + display: grid; + reading-order-items: grid-order; +} +</style> + +<div class="test-case" data-expect="a1,b1,c1,d1,e1" + data-description="Grid items without `order` property"> + <div class="wrapper"> + <button id="a1">Item A</button> + <button id="b1">Item B</button> + <button id="c1">Item C</button> + </div> + <div class="wrapper"> + <button id="d1">Item D</button> + <button id="e1">Item E</button> + </div> +</div> + +<div class="test-case" data-expect="b2,c2,a2,e2,d2" + data-description="Grid items with `order` property"> + <div class="wrapper"> + <button id="a2" style="order: 2">Item A</button> + <button id="b2">Item B</button> + <button id="c2">Item C</button> + </div> + <div class="wrapper"> + <button id="d2">Item D</button> + <button id="e2" style="order: -1">Item E</button> + </div> +</div> + +<div class="test-case" data-expect="c3,a3,b3,d3,f3,e3" + data-description="Grid items with `order` property and tabindex"> + <div class="wrapper"> + <button id="a3" style="order: -1">Item A</button> + <button id="b3" style="order: 0">Item B</button> + <button id="c3" tabindex="1" style="order: -1">Item C</button> + </div> + <div class="wrapper"> + <button id="d3" tabindex="1" style="order: 1">Item D</button> + <button id="e3" tabindex="2" style="order: 0">Item E</button> + <button id="f3" tabindex="2" style="order: -1">Item F</button> + </div> +</div> + +<div class="test-case" data-expect="order1,order2,order3,order4" + data-description="Items in display contents are sorted in same grid container."> + <div class="wrapper"> + <div style="display: contents"> + <button id="order3" style="order: 3">Order 3</button> + <button id="order1" style="order: 1">Order 1</button> + <div style="display: contents"> + <button id="order4" style="order: 4">Order 4</button> + <button id="order2" style="order: 2">Order 2</button> + </div> + </div> + </div> +</div> + +<div class="test-case" data-expect="d4,b4,c4,a4" + data-description="Items in display block are not in parent grid container."> + <div class="wrapper"> + <button id="a4" style="order: 3">A</button> + <div style="order: 1" style="display: block"> + <button id="b4" style="order: 2">B</button> + <button id="c4" style="order: -1">C</button> + </div> + <button id="d4">D</button> + </div> +</div> + +<script> +runFocusTestCases(); +</script> diff --git a/testing/web-platform/tests/shadow-dom/focus-navigation/resources/focus-utils.js b/testing/web-platform/tests/shadow-dom/focus-navigation/resources/focus-utils.js index f593267cc3..f4056dc168 100644 --- a/testing/web-platform/tests/shadow-dom/focus-navigation/resources/focus-utils.js +++ b/testing/web-platform/tests/shadow-dom/focus-navigation/resources/focus-utils.js @@ -1,17 +1,27 @@ 'use strict'; -function navigateFocusForward() { - // TAB = '\ue004' - return test_driver.send_keys(document.body, "\ue004"); +function waitForRender() { + return new Promise(resolve => requestAnimationFrame(() => requestAnimationFrame(resolve))); +} + +async function navigateFocusForward() { + await waitForRender(); + const kTab = '\uE004'; + await new test_driver.send_keys(document.documentElement,kTab); + await waitForRender(); } async function navigateFocusBackward() { - return new test_driver.Actions() - .keyDown('\uE050') - .keyDown('\uE004') - .keyUp('\uE004') - .keyUp('\uE050') + await waitForRender(); + const kShift = '\uE008'; + const kTab = '\uE004'; + await new test_driver.Actions() + .keyDown(kShift) + .keyDown(kTab) + .keyUp(kTab) + .keyUp(kShift) .send(); + await waitForRender(); } // If shadow root is open, can find element using element path @@ -162,3 +172,18 @@ async function assert_focus_navigation_bidirectional_with_shadow_root(elements) await assert_focus_navigation_backward_with_shadow_root(elements); } +// This Promise will run each test case that is: +// 1. Wrapped in an element with class name "test-case". +// 2. Has data-expect attribute be an ordered list of elements to focus. +// 3. Has data-description attribute be a string explaining the test. +// e.g <div class="test-case" data-expect="b,a,c" +// data-description="Focus navigation"> +async function runFocusTestCases() { + const testCases = Array.from(document.querySelectorAll('.test-case')); + for (let testCase of testCases) { + promise_test(async () => { + const expected = testCase.dataset.expect.split(','); + await assert_focus_navigation_forward(expected); + }, testCase.dataset.description); + } +} |