Skip to content

Commit

Permalink
[reading-order-items] Reading Order Container is a Focus Scope Owner
Browse files Browse the repository at this point in the history 
Add flex or grid container using reading-order-items as a focus scope.
We update logic in FocusNavigation so we can focus navigate to/from a
reading order item.

This CL implements the CSS rule `reading-order-items: grid-order`
for forward navigation. The feature is guarded behind the flag
CSSReadingOrderItemsEnabled.

Change-Id: Ic673d894927931a10f7c74d86e19eff5fdbd2024
Bug: 40932006
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5431133
Commit-Queue: Di Zhang <dizhangg@chromium.org>
Reviewed-by: Mason Freed <masonf@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1291373}
  • Loading branch information
@dizhang168 @chromium-wpt-export-bot
dizhang168 authored and chromium-wpt-export-bot committed Apr 23, 2024
1 parent 8fbd359 commit 43ae6cd
Show file tree
Hide file tree
Showing 7 changed files with 480 additions and 0 deletions.
43 changes: 43 additions & 0 deletions shadow-dom/focus-navigation/reading-order/tentative/grid-order-on-shadow-host.html
View file
@@ -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>
33 changes: 33 additions & 0 deletions shadow-dom/focus-navigation/reading-order/tentative/grid-order-with-iframe.html
View file
@@ -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>
72 changes: 72 additions & 0 deletions shadow-dom/focus-navigation/reading-order/tentative/grid-order-with-nested-grids.html
View file
@@ -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>
64 changes: 64 additions & 0 deletions shadow-dom/focus-navigation/reading-order/tentative/grid-order-with-popover.html
View file
@@ -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>
164 changes: 164 additions & 0 deletions shadow-dom/focus-navigation/reading-order/tentative/grid-order-with-slots.html
View file
@@ -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>

0 comments on commit 43ae6cd

Please sign in to comment.