-
Notifications
You must be signed in to change notification settings - Fork 672
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[WIP]Should type in contenteditable div even if it has invisible chil…
…d with contenteditable=false (#2205)_
- Loading branch information
1 parent
ed834dd
commit 8f15bfe
Showing
5 changed files
with
194 additions
and
8 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
135 changes: 135 additions & 0 deletions
135
test/functional/fixtures/regression/gh-2205/pages/index.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,135 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <title>Title</title> | ||
| <style> | ||
| .placeholder { | ||
| color: #aaa; | ||
| font-style: italic; | ||
| height: 0; | ||
| pointer-events: none; | ||
| } | ||
|
|
||
| .editor.focused .placeholder { | ||
| display: none; | ||
| } | ||
|
|
||
| .editor { | ||
| padding: 4px 8px 4px 14px; | ||
| line-height: 1.2; | ||
| outline: none; | ||
| } | ||
|
|
||
| .editor { | ||
| word-wrap: break-word; | ||
| white-space: pre-wrap; | ||
| font-variant-ligatures: none; | ||
| } | ||
|
|
||
| .editor { | ||
| position: relative; | ||
| } | ||
|
|
||
| .outer-editor { | ||
| background: white; | ||
| color: black; | ||
| background-clip: padding-box; | ||
| border-radius: 4px; | ||
| border: 2px solid rgba(0, 0, 0, 0.2); | ||
| padding: 5px 0; | ||
| margin-bottom: 23px; | ||
| } | ||
|
|
||
| .outer-editor { | ||
| border: 1px solid grey; | ||
| } | ||
|
|
||
| .editor p:first-child { | ||
| margin-top: 10px; | ||
| } | ||
| .editor p { | ||
| margin-bottom: 1em; | ||
| } | ||
|
|
||
| #editor2 .placeholder { | ||
| display: none; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
|
|
||
| <h2>Has inner div with contentEditable=false</h2> | ||
|
|
||
| <div class="outer-editor"> | ||
| <div id="editor1" contenteditable="true" class="editor" onmousedown="event.currentTarget.className += ' focused'"></div> | ||
| </div> | ||
|
|
||
| <h2>Has hidden inner div with contentEditable=false</h2> | ||
|
|
||
| <div class="outer-editor"> | ||
| <div id="editor2" contenteditable="true" class="editor"></div> | ||
| </div> | ||
|
|
||
| <h2>Has inner div with contentEditable=false with focus handler</h2> | ||
|
|
||
| <div class="outer-editor"> | ||
| <div id="editor3" contenteditable="true" class="editor" onmousedown="event.currentTarget.className += ' focused'"></div> | ||
| </div> | ||
|
|
||
| <script> | ||
|
|
||
| function addFocusHandler() { | ||
| var stopHandling = false; | ||
|
|
||
| var editor = document.getElementById('editor3'); | ||
| document.addEventListener("selectionchange", function() { | ||
| if (editor.className.indexOf('focused') === -1 || stopHandling) | ||
| return; | ||
| var selection = document.getSelection(); | ||
| var p = document.getElementById('editor3').querySelector('p'); | ||
| if(selection.anchorNode === p) | ||
| return; | ||
|
|
||
| stopHandling = true; | ||
|
|
||
| var range = document.createRange(); | ||
|
|
||
| range.setEnd(p, 0); | ||
| range.setStart(p, 0); | ||
| selection.removeAllRanges(); | ||
| selection.addRange(range); | ||
| }); | ||
| } | ||
|
|
||
| function createEditor (editor) { | ||
| var placeholder = document.createElement('div'); | ||
| placeholder.textContent = 'Type here...'; | ||
| placeholder.setAttribute('contenteditable', 'false'); | ||
| placeholder.classList.add('placeholder') | ||
|
|
||
| var paragraph = document.createElement('p'); | ||
| var lineBreak = document.createElement('br'); | ||
|
|
||
| paragraph.appendChild(placeholder); | ||
| paragraph.appendChild(lineBreak); | ||
| editor.appendChild(paragraph); | ||
| } | ||
|
|
||
| createEditor(document.getElementById('editor1')); | ||
| createEditor(document.getElementById('editor2')); | ||
| createEditor(document.getElementById('editor3')); | ||
|
|
||
| addFocusHandler(); | ||
|
|
||
| var __createRange = document.createRange; | ||
| document.createRange = function() { | ||
| debugger; | ||
| return __createRange.call(document); | ||
| } | ||
|
|
||
|
|
||
| </script> | ||
| <h1><p></p><div>2</div>3</h1> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| describe('[Regression](GH-2205)', function () { | ||
| it('Should type in div if it has an invisible child with contententeditable=false', function () { | ||
| return runTests('testcafe-fixtures/index.js'); | ||
| }); | ||
| }); |
31 changes: 31 additions & 0 deletions
31
test/functional/fixtures/regression/gh-2205/testcafe-fixtures/index.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| import { Selector } from 'testcafe'; | ||
|
|
||
| fixture `GH-2205 - Should type in div if it has an invisible child with contententeditable=false` | ||
| .page `http://localhost:3000/fixtures/regression/gh-2205/pages/index.html`; | ||
|
|
||
| test(`Click and type in element`, async t => { | ||
| const editor = Selector('#editor1'); | ||
|
|
||
| await t | ||
| .click(editor) | ||
| .typeText(editor, 'Hello') | ||
| .expect(editor.innerText).contains('Hello'); | ||
| }); | ||
|
|
||
| test(`Click and type in element`, async t => { | ||
| const editor = Selector('#editor2'); | ||
|
|
||
| await t | ||
| .click(editor) | ||
| .typeText(editor, 'Hello') | ||
| .expect(editor.innerText).contains('Hello'); | ||
| }); | ||
|
|
||
| test(`Click and type in element`, async t => { | ||
| const editor = Selector('#editor3'); | ||
|
|
||
| await t | ||
| .click(editor) | ||
| .typeText(editor, 'Hello') | ||
| .expect(editor.innerText).contains('Hello'); | ||
| }); |