forked from DevExpress/testcafe
-
Notifications
You must be signed in to change notification settings - Fork 0
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(closes DevExpress#2205)
- Loading branch information
1 parent
688d723
commit 3ea208a
Showing
7 changed files
with
189 additions
and
40 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
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
92 changes: 92 additions & 0 deletions
92
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,92 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <title>Title</title> | ||
| <style> | ||
| #editor1.focused .placeholder { | ||
| display: none; | ||
| } | ||
|
|
||
| #editor2.focused .placeholder { | ||
| visibility: hidden; | ||
| } | ||
|
|
||
| .placeholder { | ||
| color: #aaa; | ||
| font-style: italic; | ||
| height: 0; | ||
| pointer-events: 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; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
|
|
||
| <h2>Display: none</h2> | ||
| <div class="outer-editor"> | ||
| <div id="editor1" contenteditable="true" class="editor" | ||
| onmousedown="event.currentTarget.className += ' focused'"></div> | ||
| </div> | ||
|
|
||
| <h2>Visibility: hidden</h2> | ||
| <div class="outer-editor"> | ||
| <div id="editor2" contenteditable="true" class="editor" | ||
| onmousedown="event.currentTarget.className += ' focused'"></div> | ||
| </div> | ||
|
|
||
| <div id="placeholder1" contenteditable="false" class="placeholder">Type here...</div> | ||
| <div id="placeholder2" contenteditable="false" class="placeholder">Type here...</div> | ||
|
|
||
| <script type="text/javascript"> | ||
| function createEditor (editor, placeholder) { | ||
| var paragraph = document.createElement('p'); | ||
| var lineBreak = document.createElement('br'); | ||
|
|
||
| editor.appendChild(paragraph); | ||
| paragraph.appendChild(placeholder); | ||
| paragraph.appendChild(lineBreak); | ||
| } | ||
|
|
||
| createEditor(document.getElementById('editor1'), document.getElementById('placeholder1')); | ||
| createEditor(document.getElementById('editor2'), document.getElementById('placeholder2')); | ||
| </script> | ||
| </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'); | ||
| }); | ||
| }); |
22 changes: 22 additions & 0 deletions
22
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,22 @@ | ||
| 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`; | ||
|
|
||
| async function typeAndCheck (t, editorId) { | ||
| const editor = Selector(editorId); | ||
|
|
||
| await t | ||
| .click(editor) | ||
| .typeText(editor, 'Hello') | ||
| .wait(1000) | ||
| .expect(editor.innerText).contains('Hello'); | ||
| } | ||
|
|
||
| test(`Click on div with display:none placeholder`, async t => { | ||
| await typeAndCheck(t, '#editor1'); | ||
| }); | ||
|
|
||
| test(`Click on div with visibility:hidden placeholder`, async t => { | ||
| await typeAndCheck(t, '#editor2'); | ||
| }); |