Skip to content

Commit

Permalink
tests on dialog element
Browse files Browse the repository at this point in the history
  • Loading branch information
@deniak
deniak committed Mar 28, 2014
1 parent 428c2b6 commit 5dd0e53
Show file tree
Hide file tree
Showing 3 changed files with 202 additions and 0 deletions.
Empty file removed html/semantics/interactive-elements/the-dialog-element/.gitkeep
View file
Empty file.
78 changes: 78 additions & 0 deletions html/semantics/interactive-elements/the-dialog-element/dialog-close.html
View file
@@ -0,0 +1,78 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>dialog element: close()</title>
<link rel="author" title="Denis Ah-Kang" href="mailto:denis@w3.org">
<link rel=help href="http://www.w3.org/html/wg/drafts/html/master/#the-dialog-element">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<div id="log"></div>
<dialog id="d1">
<p>foobar</p>
<button>OK</button>
</dialog>
<dialog id="d2" open>
<p>foobar</p>
<button>OK</button>
</dialog>
<dialog id="d3" open>
<p>foobar</p>
<button>OK</button>
</dialog>
<dialog id="d4" open>
<p>foobar</p>
<button>OK</button>
</dialog>
<dialog id="d5" open>
<p>foobar</p>
<button>OK</button>
</dialog>
<script>
var d1 = document.getElementById('d1'),
d2 = document.getElementById('d2'),
d3 = document.getElementById('d3'),
d4 = document.getElementById('d4'),
d5 = document.getElementById('d5'),
t = async_test("close() fires a close event"),
was_queued = false;

test(function(){
assert_throws("INVALID_STATE_ERR", function() {
d1.close();
});
}, "close() on a <dialog> that doesn't have an open attribute throws an InvalidStateError exception");

test(function(){
assert_true(d2.open);
assert_equals(d2.returnValue, "");
d2.close("closedialog");
assert_false(d2.hasAttribute("open"));
assert_equals(d2.returnValue, "closedialog");
}, "close() removes the open attribute and set the returnValue to the first argument");

test(function(){
assert_true(d3.open);
assert_equals(d3.returnValue, "");
d3.returnValue = "foobar";
d3.close();
assert_false(d3.hasAttribute("open"));
assert_equals(d3.returnValue, "foobar");
}, "close() without argument removes the open attribute and there's no returnValue");

d4.onclose = t.step_func_done(function(e) {
assert_true(was_queued, "close event should be queued");
assert_true(e.isTrusted, "close event is trusted");
assert_false(e.bubbles, "close event doesn't bubble");
assert_false(e.cancelable, "close event is not cancelable");
});

t.step(function() {
d4.close();
was_queued = true;
})

test(function(){
Object.defineProperty(HTMLDialogElement.prototype, 'returnValue', { set: function(v) { assert_unreached('JS-defined setter returnValue on the prototype was invoked'); }, configurable:true });
Object.defineProperty(d5, 'returnValue', { set: function(v) { assert_unreached('JS-defined setter returnValue on the instance was invoked'); }, configurable:true });
d5.close('foo');
}, "close() should set the returnValue IDL attribute but not the JS property");
</script>
124 changes: 124 additions & 0 deletions html/semantics/interactive-elements/the-dialog-element/dialog-showModal.html
View file
@@ -0,0 +1,124 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>dialog element: showModal()</title>
<link rel="author" title="Denis Ah-Kang" href="mailto:denis@w3.org">
<link rel=help href="http://www.w3.org/html/wg/drafts/html/master/#the-dialog-element">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<div id="log"></div>
<button id="b0">OK</button>
<dialog id="d1">
<p>foobar</p>
<button id="b1">OK</button>
</dialog>
<dialog id="d2" open>
<p>foobar</p>
<button>OK</button>
</dialog>
<dialog id="d3">
<p>foobar</p>
<button id="b3">OK</button>
</dialog>
<dialog id="d4">
<p>foobar</p>
<button id="b4">OK</button>
</dialog>
<dialog id="d5">
<p>foobar</p>
<button id="b5">OK</button>
</dialog>
<dialog id="d6"></dialog>
<dialog id="d7">
<input id="i71" value="foobar">
<input id="i72" value="foobar">
<button id="b7">OK</button>
</dialog>
<dialog id="d8">
<input id="i81" value="foobar">
<input id="i82" value="foobar" autofocus>
<button id="b8">OK</button>
</dialog>
<script>
var d1 = document.getElementById('d1'),
d2 = document.getElementById('d2'),
d3 = document.getElementById('d3'),
d4 = document.getElementById('d4'),
d5 = document.getElementById('d5'),
d6 = document.getElementById('d6'),
d7 = document.getElementById('d7'),
d8 = document.getElementById('d8'),
b0 = document.getElementById('b0'),
b3 = document.getElementById('b3'),
b4 = document.getElementById('b4'),
b5 = document.getElementById('b5');

test(function(){
assert_false(d1.open);
assert_false(b0.commandDisabled);
d1.showModal();
this.add_cleanup(function() { d1.close(); });
assert_true(d1.open);
assert_true(b0.commandDisabled);
assert_equals(document.activeElement, d1.firstChild);
});

test(function(){
assert_throws("INVALID_STATE_ERR", function() {
d2.showModal();
this.add_cleanup(function() { d2.close(); });
});
}, "showModal() on a <dialog> that already has an open attribute throws an InvalidStateError exception");

test(function(){
var d = document.createElement("dialog");
assert_throws("INVALID_STATE_ERR", function() {
d.showModal();
this.add_cleanup(function() { d.close(); });
});
}, "showModal() on a <dialog> not in a Document throws an InvalidStateError exception");

test(function(){
assert_false(d3.open);
assert_false(b3.commandDisabled);
assert_false(d4.open);
assert_false(b4.commandDisabled);
assert_false(d5.open);
assert_false(b5.commandDisabled);
d3.showModal();
this.add_cleanup(function() { d3.close(); });
d4.showModal();
this.add_cleanup(function() { d4.close(); });
d5.showModal();
this.add_cleanup(function() { d5.close(); });
assert_true(d3.open);
assert_true(b3.commandDisabled);
assert_true(d4.open);
assert_true(b4.commandDisabled);
assert_true(d5.open);
assert_false(b5.commandDisabled);
}, "when opening multiple dialogs, only the newest one is non-inert");

test(function(){
assert_false(d6.open);
d6.showModal();
this.add_cleanup(function() { d6.close(); });
assert_true(d6.open);
assert_equals(document.activeElement, d6);
}, "opening dialog without focusable children");

test(function(){
assert_false(d7.open);
d7.showModal();
this.add_cleanup(function() { d7.close(); });
assert_true(d7.open);
assert_equals(document.activeElement, document.getElementById("i71"));
}, "opening dialog with multiple focusable children");

test(function(){
assert_false(d8.open);
d8.showModal();
this.add_cleanup(function() { d8.close(); });
assert_true(d8.open);
assert_equals(document.activeElement, document.getElementById("i82"));
}, "opening dialog with multiple focusable children, one having the autofocus attribute");
</script>

0 comments on commit 5dd0e53

Please sign in to comment.