Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(12)

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: LayoutTests/fast/dom/shadow/focusable-elements-with-istabstop.html

Issue 917613004: Add isTabStop attribute to Element (Closed) Base URL: svn://svn.chromium.org/blink/trunk
Patch Set: Add a layout test and fix missing isTabStop() case. Created 5 years, 10 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « LayoutTests/fast/dom/shadow/focus-navigation-with-istabstop-expected.txt ('k') | LayoutTests/fast/dom/shadow/focusable-elements-with-istabstop-expected.txt » ('j') | Source/core/dom/Element.h » ('J')
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: LayoutTests/fast/dom/shadow/focusable-elements-with-istabstop.html
diff --git a/LayoutTests/fast/dom/shadow/focusable-elements-with-istabstop.html b/LayoutTests/fast/dom/shadow/focusable-elements-with-istabstop.html
new file mode 100644
index 0000000000000000000000000000000000000000..ecc328bed11e51f884262c6e2257d7b618f6759e
--- /dev/null
+++ b/LayoutTests/fast/dom/shadow/focusable-elements-with-istabstop.html
@@ -0,0 +1,198 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script src="../../../resources/js-test.js"></script>
+<script src="resources/shadow-dom.js"></script>
+</head>
+<body>
+<p>This tests TAB focus navigation with isTabStop property on focusable elements</p>
+<pre id="console"></pre>
+<div id="sandbox"></div>
+<script>
+function prepareFocusableElements(parent) {
+ parent.appendChild(
+ createDOM('div', {'id': 'container'},
+ createDOM('input', {'id': 'input-before'}),
+ createDOM('button', {'id': 'button-focusable'}),
+ createDOM('input', {'id': 'input-focusable'}),
+ createDOM('input', {'id': 'input-after'})));
+ parent.offsetTop;
+}
+
+function prepareButtonWithShadow(parent) {
+ parent.appendChild(
+ createDOM('div', {'id': 'button-container'},
+ createDOM('input', {'id': 'button-before'}),
+ createDOM('button', {'id': 'button-host'},
+ createShadowRoot(
+ createDOM('input', {'id': 'button-inner'}))),
+ createDOM('input', {'id': 'button-after'})));
+ parent.offsetTop;
+}
+
+function prepareAnchorWithShadow(parent) {
+ parent.appendChild(
+ createDOM('div', {'id': 'anchor-container'},
+ createDOM('input', {'id': 'anchor-before'}),
+ createDOM('a', {'id': 'anchor-host'},
+ createShadowRoot(
+ createDOM('input', {'id': 'anchor-inner'}))),
+ createDOM('input', {'id': 'anchor-after'})));
+
+ parent.offsetTop;
+}
+
+var button_host;
+var anchor_host;
+
+function testFocusableElementsWithIsTabStop() {
+ debug("Testing tab focus navigation order on focusable nodes");
+
+ prepareFocusableElements(sandbox);
+
+ debug("Normal tab order without isTabStop");
+
+ var expected_nav = [
hayato 2015/02/20 08:46:30 Nit: We should avoid using snake case for variable
kochi 2015/02/20 09:43:05 Done. Renamed to expectedOrder and replaced all i
+ 'input-before',
+ 'button-focusable',
+ 'input-focusable',
+ 'input-after'
+ ];
+
+ testFocusNavigationFowrad(expected_nav);
+ expected_nav.reverse();
+ testFocusNavigationBackward(expected_nav);
+
+ debug("Normal tab order with isTabStop=false");
+
+ button_focusable = document.getElementById("button-focusable");
+ button_focusable.isTabStop = false;
+ input_focusable = document.getElementById("input-focusable");
+ input_focusable.isTabStop = false;
+
+ var expected_nav = [
hayato 2015/02/20 08:46:31 |expected_nav| is declared twice. You should remov
kochi 2015/02/20 09:43:05 Done.
+ 'input-before',
+ // These will be skipped with isTabStop = false.
+ // 'button-focusable',
+ // 'input-focusable',
+ 'input-after'
+ ];
+
+ testFocusNavigationFowrad(expected_nav);
+ expected_nav.reverse();
+ testFocusNavigationBackward(expected_nav);
+}
+
+function testButton() {
+ debug("Testing isTabStop property on button");
+
+ prepareButtonWithShadow(sandbox);
+
+ debug("Normal tab order without tabindex");
+
+ button_host = document.getElementById("button-host");
+ shouldBe('button_host.isTabStop', 'true');
+
+ var expected_nav = [
+ 'button-before',
+ 'button-host',
+ 'button-host/button-inner',
+ 'button-after'
+ ];
+
+ testFocusNavigationFowrad(expected_nav);
+ expected_nav.reverse();
+ testFocusNavigationBackward(expected_nav);
+
+ debug("Testing isTabStop property on button with isTabStop = false");
+ button_host.isTabStop = false;
+
+ var expected_nav = [
+ 'button-before',
+ // 'button-host', // host should be skipped when isTabStop=false
+ 'button-host/button-inner',
+ 'button-after'
+ ];
+
+ testFocusNavigationFowrad(expected_nav);
+ expected_nav.reverse();
+ testFocusNavigationBackward(expected_nav);
+}
+
+function testAnchor() {
+ debug("Testing isTabStop property on anchor without href");
+
+ prepareAnchorWithShadow(sandbox);
+
+ anchor_host = document.getElementById("anchor-host");
+ shouldBe('anchor_host.isTabStop', 'false');
+
+ var expected_nav = [
+ 'anchor-before',
+ 'anchor-host/anchor-inner',
+ 'anchor-after'
+ ];
+
+ testFocusNavigationFowrad(expected_nav);
+ expected_nav.reverse();
+ testFocusNavigationBackward(expected_nav);
+
+ debug("Testing isTabStop property on anchor with href");
+
+ anchor_host.setAttribute('href', '#');
+ anchor_host.offsetTop;
hayato 2015/02/20 08:46:31 Why do we need this? Looks weird.
kochi 2015/02/20 09:43:05 Removed. This was inserted while I was debugging,
+ shouldBe('anchor_host.isTabStop', 'true');
+
+ var expected_nav = [
+ 'anchor-before',
+ 'anchor-host',
+ 'anchor-host/anchor-inner',
+ 'anchor-after'
+ ];
+
+ testFocusNavigationFowrad(expected_nav);
+ expected_nav.reverse();
+ testFocusNavigationBackward(expected_nav);
+
+ debug("Testing isTabStop property on anchor with href but isTabStop = false");
+
+ anchor_host.isTabStop = false;
+
+ var expected_nav = [
+ 'anchor-before',
+ // 'anchor-host', // host should be skipped when isTabStop=false
+ 'anchor-host/anchor-inner',
+ 'anchor-after'
+ ];
+
+ testFocusNavigationFowrad(expected_nav);
+ expected_nav.reverse();
+ testFocusNavigationBackward(expected_nav);
+}
+
+function run_tests() {
+ if (window.testRunner)
+ testRunner.dumpAsText();
+
+ if (!window.eventSender) {
+ testFailed('');
+ return;
+ }
+
+ testRunner.overridePreference("WebKitTabToLinksPreferenceKey", true);
+
+ testFocusableElementsWithIsTabStop();
+ sandbox.innerHTML = '';
+
+ testButton();
+ sandbox.innerHTML = '';
+
+ testAnchor();
+
+ debug('Test finished.');
+}
+
+run_tests();
+</script>
+</body>
+</html>
« no previous file with comments | « LayoutTests/fast/dom/shadow/focus-navigation-with-istabstop-expected.txt ('k') | LayoutTests/fast/dom/shadow/focusable-elements-with-istabstop-expected.txt » ('j') | Source/core/dom/Element.h » ('J')

Powered by Google App Engine
This is Rietveld 408576698