third_party/WebKit/LayoutTests/fast/dom/HTMLDialogElement/show-modal-focusing-steps.html - Issue 2532983004: Re-work <dialog>#show*() focus algorithm

Side by Side Diff: third_party/WebKit/LayoutTests/fast/dom/HTMLDialogElement/show-modal-focusing-steps.html

Issue 2532983004: Re-work <dialog>#show*() focus algorithm (Closed)

Patch Set: starting to mess with tests Created 4 years ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

« no previous file with comments | « third_party/WebKit/LayoutTests/fast/dom/HTMLDialogElement/inert-node-is-unfocusable.html ('k') | third_party/WebKit/LayoutTests/fast/dom/HTMLDialogElement/show-modal-focusing-steps-expected.txt » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
1 <!DOCTYPE html>	1 <!DOCTYPE html>

2 <html>	2 <html>

3 <head>	3 <head>

4 <script src="../../../resources/js-test.js"></script>	4 <script src="../../../resources/js-test.js"></script>

5 <script src="../../forms/resources/common.js"></script>	5 <script src="../../forms/resources/common.js"></script>

6 <script>	6 <script>

7 description('Tests focus when a modal dialog is opened.');	7 description('Tests focus when a modal dialog is opened.');

8	8

9 function test()	9 function test()

10 {	10 {

11 outerButton = document.getElementById('outer-button');	11 outerButton = document.getElementById('outer-button');

12 shouldBe('document.activeElement', 'outerButton');	12 shouldBe('document.activeElement', 'outerButton');

13	13

14 debug('Test that focus goes to body if the dialog has no focusable elements, including itself');	14 debug('Test that focus goes to outerDialog when shown');

15 var outerDialog = document.getElementById('outer-dialog');	15 outerDialog = document.getElementById('outer-dialog');

16 outerDialog.showModal();	16 outerDialog.showModal();

	17 shouldBe('document.activeElement', 'outerDialog');

	18

	19 debug('Test that the activeElement changes to body if outerDialog is blurred ');

	20 outerDialog.blur();

17 shouldBe('document.activeElement', 'document.body');	21 shouldBe('document.activeElement', 'document.body');

18	22

19 debug('Test that an autofocus element in the dialog gets focus.');	23 debug('Test that an autofocus element in the dialog gets focus.');

20 var dialog = document.getElementById('dialog');	24 var dialog = document.getElementById('dialog');

21 dialog.showModal();	25 dialog.showModal();

22 autofocusButton = document.getElementById('autofocus-button');	26 autofocusButton = document.getElementById('autofocus-button');

23 shouldBe('document.activeElement', 'autofocusButton');	27 shouldBe('document.activeElement', 'autofocusButton');

24 dialog.close();	28 dialog.close();

25	29

26 debug('... or else first focusable element in the dialog gets focus.');

27 autofocusButton.parentNode.removeChild(autofocusButton);

28 dialog.showModal();

29 firstButton = document.getElementById('first-button');

30 shouldBe('document.activeElement', 'firstButton');

31 dialog.close();

32

33 debug('... or else the dialog itself gets focus.');

34 var buttons = dialog.querySelectorAll('button');

35 for (var i = 0; i < buttons.length; ++i)

36 buttons[i].hidden = true;

37 dialog.showModal();

38 shouldBe('document.activeElement', 'dialog');

39 dialog.close();

40

41 document.getElementById('outer-dialog').close();	30 document.getElementById('outer-dialog').close();

42 finishJSTest();	31 finishJSTest();

43 }	32 }

44	33

45 jsTestIsAsync = true;	34 jsTestIsAsync = true;

46 waitUntilLoadedAndAutofocused(test);	35 waitUntilLoadedAndAutofocused(test);

47 </script>	36 </script>

48 </head>	37 </head>

49 <body>	38 <body>

50 <button id="outer-button" autofocus></button>	39 <button id="outer-button" autofocus></button>

51 <dialog id="outer-dialog">	40 <dialog id="outer-dialog">

52 <dialog id="dialog" tabindex=0>	41 <dialog id="dialog" tabindex=0>

	42 <!-- div[autofocus] is ignored as [autofocus] only applies to form contr ols. -->

	43 <div autofocus></div>

53 <button disabled></button>	44 <button disabled></button>

54 <dialog>	45 <dialog>

55 <button autofocus></button>	46 <button autofocus></button>

56 </dialog>	47 </dialog>

57 <button id="first-button"></button>	48 <button id="first-button"></button>

58 <div>	49 <div>

59 <span>	50 <span>

60 <button id="autofocus-button" autofocus></button>	51 <button id="autofocus-button" autofocus></button>

61 </span>	52 </span>

62 </div>	53 </div>

63 <button id="final-button"></button>	54 <button id="final-button"></button>

64 </dialog>	55 </dialog>

65 </dialog>	56 </dialog>

66 </body>	57 </body>

67 </html>	58 </html>

OLD	NEW