diff options
Diffstat (limited to 'testing/web-platform/tests/shadow-dom/focus-navigation/reading-order/tentative/grid-order.html')
-rw-r--r-- | testing/web-platform/tests/shadow-dom/focus-navigation/reading-order/tentative/grid-order.html | 89 |
1 files changed, 89 insertions, 0 deletions
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> |