Skip to content
Permalink
Browse files
contentEditable caret is left aligned instead of centered when :befor…
…e pseudoelement is used

contentEditable caret is left aligned instead of centered when :before pseudoelement is used
https://bugs.webkit.org/show_bug.cgi?id=135914

Reviewed by Alan Bujtas.

Merge - https://chromium.googlesource.com/chromium/src.git/+/e4c0c0a729891099c502c8e330b71acca7041ce3

It is to align Webkit to show caret /cursor respect text align in contenteditable with
pseudo element with Blink and Gecko.

Avoid considering PseudoElement's content as first child
so that caret rect for empty element is calculated.

* Source/WebCore/rendering/CaretRectComputation.cpp:
(CaretRectComputation::computeCaretRectForEmptyElement): Update Assert
(CaretRectComputation::computeCaretRectForBox): Add "firstChild" being Pseudo Element condition with "AND" logic
* LayoutTests/editing/selection/caret-in-empty-div-with-pseudo-content.html: Added Test Case
* LayoutTests/editing/selection/caret-in-empty-div-with-pseudo-content-expected.txt: Added Test Case Expectations

Canonical link: https://commits.webkit.org/255333@main
  • Loading branch information
Ahmad-S792 authored and Ahmad Saleem committed Oct 10, 2022
1 parent 55fce2d commit 11d258f9db329fa814a7a5466d2a9bae81a6025d
Show file tree
Hide file tree
Showing 3 changed files with 34 additions and 2 deletions.
@@ -0,0 +1,3 @@

PASS Tests if the cursor respects text align property in emtpy div having pseudo content

@@ -0,0 +1,29 @@
<!DOCTYPE html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<style>
#div1, #div2 {
height: 200px;
width: 200px;
border: 1px solid black;
}
#div2 {
text-align: center;
}
div:before {
content: "Test";
}
</style>
<div id="div1" contenteditable="true"></div>
<div id="div2" contenteditable="true"></div>
<script>
test (function() {
var div1 = document.getElementById('div1');
div1.focus();
var caretRect1 = internals.absoluteCaretBounds(document);
var div2 = document.getElementById('div2');
div2.focus();
var caretRect2 = internals.absoluteCaretBounds(document);
assert_not_equals(caretRect1.left, caretRect2.left);
}, "Tests if the cursor respects text align property in emtpy div having pseudo content");
</script>
@@ -40,7 +40,7 @@ namespace WebCore {

static LayoutRect computeCaretRectForEmptyElement(const RenderBoxModelObject& renderer, LayoutUnit width, LayoutUnit textIndentOffset, CaretRectMode caretRectMode)
{
ASSERT(!renderer.firstChild());
ASSERT(!renderer.firstChild() || renderer.firstChild()->isPseudoElement());

// FIXME: This does not take into account either :first-line or :first-letter
// However, as soon as some content is entered, the line boxes will be
@@ -266,7 +266,7 @@ static LayoutRect computeCaretRectForBox(const RenderBox& renderer, const Inline
static LayoutRect computeCaretRectForBlock(const RenderBlock& renderer, const InlineBoxAndOffset& boxAndOffset, CaretRectMode caretRectMode)
{
// Do the normal calculation in most cases.
if (renderer.firstChild())
if (renderer.firstChild() && !renderer.firstChild()->isPseudoElement())
return computeCaretRectForBox(renderer, boxAndOffset, caretRectMode);

return computeCaretRectForEmptyElement(renderer, renderer.width(), renderer.textIndentOffset(), caretRectMode);

0 comments on commit 11d258f

Please sign in to comment.