typing-space-in-editable-summary.tentative.html (3491B)
1 <!doctype html> 2 <head> 3 <meta charset="utf-8"> 4 <title>Tests for pressing space in editable summary element</title> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="/resources/testdriver.js"></script> 8 <script src="/resources/testdriver-vendor.js"></script> 9 <script src="/resources/testdriver-actions.js"></script> 10 </head> 11 <body> 12 <details contenteditable><summary>HelloWorld</summary>Details</details> 13 <details><summary contenteditable>HelloWorld</summary>Details</details> 14 <details><summary><div contenteditable>HelloWorld</div></summary>Details</details> 15 <script> 16 "use strict"; 17 18 promise_test(async () => { 19 const details = document.querySelector("details[contenteditable]"); 20 const summary = details.querySelector("summary"); 21 getSelection().collapse(summary.firstChild, "Hello".length); 22 summary.focus(); 23 await new this.window.test_driver.Actions() 24 .keyDown("\uE00D") 25 .keyUp("\uE00D") 26 .send(); 27 assert_equals( 28 details.innerHTML, 29 "<summary>HelloWorld</summary>Details", 30 "A space shouldn't be inserted into the focused <summary>" 31 ); 32 assert_true(details.open, "<details> shouldn't keep collapsed"); 33 }, "Type space key in editable <summary> should be handled by the <summary> when it's focused"); 34 35 promise_test(async () => { 36 const details = document.querySelector("details[contenteditable]"); 37 details.innerHTML = "<summary>HelloWorld</summary>Details"; 38 details.open = false; 39 const summary = details.querySelector("summary"); 40 getSelection().collapse(summary.firstChild, "Hello".length); 41 details.focus(); 42 await new this.window.test_driver.Actions() 43 .keyDown("\uE00D") 44 .keyUp("\uE00D") 45 .send(); 46 assert_equals( 47 details.innerHTML, 48 "<summary>Hello World</summary>Details", 49 "A space should be inserted into the <summary>" 50 ); 51 assert_false(details.open, "<details> should keep collapsed"); 52 }, "Type space key in editable <summary> shouldn't be handled by the <summary> when it's not focused"); 53 54 promise_test(async () => { 55 const details = document.querySelector("details > summary[contenteditable]").parentNode; 56 const summary = details.querySelector("summary"); 57 getSelection().collapse(summary.firstChild, "Hello".length); 58 summary.focus(); 59 await new this.window.test_driver.Actions() 60 .keyDown("\uE00D") 61 .keyUp("\uE00D") 62 .send(); 63 assert_equals( 64 details.innerHTML, 65 '<summary contenteditable="">HelloWorld</summary>Details', 66 "The content of <details> shouldn't be changed" 67 ); 68 assert_true(details.open, "<details> shouldn't keep collapsed"); 69 }, "Type space key in <summary contenteditable> should be handled by the <summary>"); 70 71 promise_test(async () => { 72 const details = document.querySelector("summary > div[contenteditable]").parentNode.parentNode; 73 const summary = details.querySelector("summary"); 74 const editable = summary.querySelector("div[contenteditable]"); 75 editable.focus(); 76 getSelection().collapse(editable.firstChild, "Hello".length); 77 await new this.window.test_driver.Actions() 78 .keyDown("\uE00D") 79 .keyUp("\uE00D") 80 .send(); 81 assert_equals( 82 details.innerHTML, 83 '<summary><div contenteditable="">Hello World</div></summary>Details', 84 "A space should be inserted" 85 ); 86 assert_false(details.open, "<details> should keep collapsed"); 87 }, "Type space key in editable element in <summary> shouldn't be handled by the <summary>"); 88 </script> 89 </body> 90 </html>