| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| #textDiv, #horizontalDiv, #verticalDiv{ |
| height: 200px; |
| width: 200px; |
| border: 1px solid black; |
| } |
| #verticalDiv { |
| -webkit-writing-mode: vertical-rl; |
| } |
| </style> |
| <script src="../../resources/js-test-pre.js"></script> |
| <script> |
| function runTest() { |
| description('Testcase for bug <a href="https://bugs.webkit.org/show_bug.cgi?id=108053">108053</a>: Caret is not displayed when trying to focus inside a contenteditable element containing an empty block.\nTo manually verify the issue, click inside the three boxes. A caret should be displayed for each of them.'); |
| |
| if (window.internals) { |
| var textDiv = document.getElementById('textDiv'); |
| textDiv.focus(); |
| textCaretRect = internals.absoluteCaretBounds(document); |
| |
| var horizontalDiv = document.getElementById('horizontalDiv'); |
| horizontalDiv.focus(); |
| horizontalCaretRect = internals.absoluteCaretBounds(document); |
| |
| var verticalDiv = document.getElementById('verticalDiv'); |
| verticalDiv.focus(); |
| verticalCaretRect = internals.absoluteCaretBounds(document); |
| |
| shouldBe("horizontalCaretRect.top", "textCaretRect.top"); |
| shouldBe("horizontalCaretRect.width", "textCaretRect.width"); |
| shouldBe("horizontalCaretRect.height", "textCaretRect.height"); |
| shouldBe("verticalCaretRect.top", "textCaretRect.left"); |
| shouldBe("verticalCaretRect.width", "textCaretRect.height"); |
| shouldBe("verticalCaretRect.height", "textCaretRect.width"); |
| |
| isSuccessfullyParsed(); |
| |
| textDiv.style.display = 'none'; |
| horizontalDiv.style.display = 'none'; |
| verticalDiv.style.display = 'none'; |
| } |
| } |
| </script> |
| </head> |
| <body onload="runTest();"> |
| <div id="textDiv" contenteditable="true" style="float: left;">Some text.<p></p></div> |
| <div id="horizontalDiv" contenteditable="true" style="float: left;"><p></p></div> |
| <div id="verticalDiv" contenteditable="true"><p></p></div> |
| <div id="description"></div> |
| <div id="console"></div> |
| </body> |
| </html> |
