Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

custom-elements: Add a test for 'focusBehavior' #21063

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

custom-elements: Add a test for 'focusBehavior' #21063

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3a271c0
custom-elements: Add a test for 'focusBehavior'
tkent-google Jan 7, 2020
77061f6
internals -> i to avoid lint errors
tkent-google Jan 7, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
70 changes: 70 additions & 0 deletions custom-elements/ElementInternals-focusBehavior.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
<!DOCTYPE html>
<link rel="help" content="https://html.spec.whatwg.org/C/#dom-elementinternals-focusbehavior">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@tkent-google @domenic pardon my ignorance but is there a reason why this help link is broken?

Other than that Looks GREAT To Me.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is for a spec PR that is not yet merged. Once the spec PR is merged the link will start working.

<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<body>
<script>
class MyElement extends HTMLElement {
constructor() {
super();
this.i = this.attachInternals();
}
}
customElements.define('my-element', MyElement);

test(() => {
const element = document.createElement('my-element');
assert_equals(element.i.focusBehavior, 'default');
document.body.appendChild(element);
element.focus();
assert_not_equals(document.activeElement, element);
}, 'Behavior without setting focusBehavior');

test(() => {
const element = document.createElement('my-element');
element.i.focusBehavior = 'default';
assert_equals(element.i.focusBehavior, 'default');
document.body.appendChild(element);
element.focus();
assert_not_equals(document.activeElement, element);
}, 'Behavior with focusBehavior="default"');

test(() => {
const element = document.createElement('my-element');
element.i.focusBehavior = 'default';
assert_equals(element.i.focusBehavior, 'default');
element.tabIndex = 0;
document.body.appendChild(element);
element.focus();
assert_equals(document.activeElement, element);
}, 'Tabindex overrides focusBehavior="default"');

test(() => {
const element = document.createElement('my-element');
element.i.focusBehavior = 'focusable';
assert_equals(element.i.focusBehavior, 'focusable');
document.body.appendChild(element);
element.focus();
assert_equals(document.activeElement, element);
}, 'Behavior with focusBehavior="focusable"');

test(() => {
const element = document.createElement('my-element');
element.i.focusBehavior = 'simple-control';
assert_equals(element.i.focusBehavior, 'simple-control');
document.body.appendChild(element);
element.focus();
assert_equals(document.activeElement, element);
}, 'Behavior with focusBehavior="simple-control"');

test(() => {
const element = document.createElement('my-element');
element.i.focusBehavior = 'anchor';
assert_equals(element.i.focusBehavior, 'focusable');
document.body.appendChild(element);
element.focus();
assert_equals(document.activeElement, element);
}, 'Behavior with focusBehavior=<unknown keyword>');
</script>
</body>