-
Notifications
You must be signed in to change notification settings - Fork 3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[reading-order-items] Reading Order Container is a Focus Scope Owner
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
1 parent
8fbd359
commit 43ae6cd
Showing
7 changed files
with
480 additions
and
0 deletions.
There are no files selected for viewing
43 changes: 43 additions & 0 deletions
43
shadow-dom/focus-navigation/reading-order/tentative/grid-order-on-shadow-host.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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
33
shadow-dom/focus-navigation/reading-order/tentative/grid-order-with-iframe.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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
72
shadow-dom/focus-navigation/reading-order/tentative/grid-order-with-nested-grids.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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
64
shadow-dom/focus-navigation/reading-order/tentative/grid-order-with-popover.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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
164
shadow-dom/focus-navigation/reading-order/tentative/grid-order-with-slots.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> |
Oops, something went wrong.