[WPT] Fix WPTs failing on chrome

Following WPTs were failing on chrome and passing on content_shell and headless_shell. third_party\blink\web_tests\external\wpt\editing\other\ merge-span-with-style-after-backspace-having-contenteditable.html third_party\blink\web_tests\external\wpt\editing\other\ merge-span-with-style-after-forwarddelete-having-contenteditable.html third_party\blink\web_tests\external\wpt\editing\other\ merge-span-with-style-after-pressing-enter-followed-by- backspace-in-contenteditable-div.html These WPTs were failing in chrome but passing in content_shell and headless_shell. The WPTs were failing because it was using editor-test utils where we are placing the caret at time of setting up editing host. Somehow the caret placed moves to the end of the text node when we call the backspace key in chrome but works fine in content_shell and headless_shell. This leads to deletion of the last character in the textnode instead of the desired output. Hence, I have modified the test to use selection and range to place the caret which works fine in all shells. Bug: 398413722 Change-Id: Iff6f8438c6982084601d846cac496000e1edf912 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6295383 Commit-Queue: Pranav Modi <[email protected]> Reviewed-by: Sanket Joshi <[email protected]> Reviewed-by: Sambamurthy Bandaru <[email protected]> Cr-Commit-Position: refs/heads/main@{#1424384}
web-platform-tests · Feb 25, 2025 · 570d512 · 570d512
1 parent 46e8857
commit 570d512
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 55 deletions.
diff --git a/editing/other/merge-span-with-style-after-backspace-having-contenteditable.html b/editing/other/merge-span-with-style-after-backspace-having-contenteditable.html
@@ -8,31 +8,36 @@
 <script src="/resources/testdriver.js"></script>
 <script src="/resources/testdriver-vendor.js"></script>
 <script src="/resources/testdriver-actions.js"></script>
-<script src="../include/editor-test-utils.js"></script>
 </head>
 <body>
-<div contenteditable></div>
+<div contenteditable><h1><span style="background-color:red;">Back</span></h1>
+<h1><span style="background-color: red;">space</span></h1></div>
 <script>
 "use strict";
 
-const utils =
-  new EditorTestUtils(document.querySelector("div[contenteditable]"));
+const kBackspaceKey = "\uE003";
+
+function sendBackspaceKey() {
+  return new test_driver.Actions()
+    .keyDown(kBackspaceKey)
+    .keyUp(kBackspaceKey)
+    .send();
+}
 
 promise_test(async () => {
-  utils.setupEditingHost(
-    `<div contenteditable="true">
-    <h1><span style="background-color:red;">Back</span></h1>
-    <h1><span style="background-color:red;">[]space</span></h1>
-    </div>`
-  );
-  await utils.sendBackspaceKey();
-  assert_in_array(
-    utils.editingHost.innerHTML,
-    [
-    `<div contenteditable="true">
-    <h1><span style="background-color:red;">Back</span><span style="background-color: red;">space</span></h1>
-    </div>`
-    ],
+  const editableDiv = document.querySelector("div[contenteditable]");
+  const spaceSpan = editableDiv.querySelectorAll('span')[1];
+  const range = document.createRange();
+  const selection = window.getSelection();
+  const textNode = spaceSpan.firstChild;
+  range.setStart(textNode, 0);
+  range.setEnd(textNode, 0);
+  selection.removeAllRanges();
+  selection.addRange(range);
+  await sendBackspaceKey();
+  assert_equals(
+    editableDiv.innerHTML,
+    "<h1><span style=\"background-color:red;\">Back</span><span style=\"background-color: red;\">space</span></h1>",
     "Style is not preserved for the span after pressing backspace in contenteditable"
   );
 }, "waiting for command to execute");

diff --git a/editing/other/merge-span-with-style-after-forwarddelete-having-contenteditable.html b/editing/other/merge-span-with-style-after-forwarddelete-having-contenteditable.html
@@ -2,37 +2,42 @@
 <html>
 <head>
 <meta charset="utf-8">
-<title>Merge Span with style after forward delete having contenteditable</title>
+<title>Merge Span with style after backspace having contenteditable</title>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="/resources/testdriver.js"></script>
 <script src="/resources/testdriver-vendor.js"></script>
 <script src="/resources/testdriver-actions.js"></script>
-<script src="../include/editor-test-utils.js"></script>
 </head>
 <body>
-<div contenteditable></div>
+<div contenteditable><h1><span style="background-color:red;">Back</span></h1>
+<h1><span style="background-color: red;">space</span></h1></div>
 <script>
 "use strict";
 
-const utils =
-  new EditorTestUtils(document.querySelector("div[contenteditable]"));
+const kDeleteKey = "\uE017";
+
+function sendDeleteKey() {
+  return new test_driver.Actions()
+    .keyDown(kDeleteKey)
+    .keyUp(kDeleteKey)
+    .send();
+}
 
 promise_test(async () => {
-  utils.setupEditingHost(
-    `<div contenteditable="true">
-    <h1><span style="background-color:red;">Back[]</span></h1>
-    <h1><span style="background-color:red;">space</span></h1>
-    </div>`
-  );
-  await utils.sendDeleteKey();
-  assert_in_array(
-    utils.editingHost.innerHTML,
-    [
-    `<div contenteditable="true">
-    <h1><span style="background-color:red;">Back</span><span style="background-color: red;">space</span></h1>
-    </div>`
-    ],
+  const editableDiv = document.querySelector("div[contenteditable]");
+  const spaceSpan = editableDiv.querySelectorAll('span')[0];
+  const range = document.createRange();
+  const selection = window.getSelection();
+  const textNode = spaceSpan.firstChild;
+  range.setStart(textNode, 4);
+  range.setEnd(textNode, 4);
+  selection.removeAllRanges();
+  selection.addRange(range);
+  await sendDeleteKey();
+  assert_equals(
+    editableDiv.innerHTML,
+    "<h1><span style=\"background-color:red;\">Back</span><span style=\"background-color: red;\">space</span></h1>",
     "Style is not preserved for the span after pressing backspace in contenteditable"
   );
 }, "waiting for command to execute");

diff --git a/...ge-span-with-style-after-pressing-enter-followed-by-backspace-in-contenteditable-div.html b/...ge-span-with-style-after-pressing-enter-followed-by-backspace-in-contenteditable-div.html
@@ -8,31 +8,44 @@
 <script src="/resources/testdriver.js"></script>
 <script src="/resources/testdriver-vendor.js"></script>
 <script src="/resources/testdriver-actions.js"></script>
-<script src="../include/editor-test-utils.js"></script>
 </head>
 <body>
-<div contenteditable></div>
+<div contenteditable><h1><span style="background-color:red;">Backspace</span></h1></div>
 <script>
 "use strict";
 
-const utils =
-  new EditorTestUtils(document.querySelector("div[contenteditable]"));
+const kBackspaceKey = "\uE003";
+const kEnterKey = "\uE007";
+
+function sendBackspaceKey() {
+  return new test_driver.Actions()
+    .keyDown(kBackspaceKey)
+    .keyUp(kBackspaceKey)
+    .send();
+}
+
+function sendEnterKey() {
+  return new test_driver.Actions()
+    .keyDown(kEnterKey)
+    .keyUp(kEnterKey)
+    .send();
+}
 
 promise_test(async () => {
-  utils.setupEditingHost(
-    `<div contenteditable="true">
-    <h1><span style="background-color:red;">Back[]space</span></h1>
-    </div>`
-  );
-  await utils.sendEnterKey();
-  await utils.sendBackspaceKey();
-  assert_in_array(
-    utils.editingHost.innerHTML,
-    [
-    `<div contenteditable="true">
-    <h1><span style="background-color:red;">Back</span><span style="background-color: red;">space</span></h1>
-    </div>`
-    ],
+  const editableDiv = document.querySelector("div[contenteditable]");
+  const spaceSpan = editableDiv.querySelector('span');
+  const range = document.createRange();
+  const selection = window.getSelection();
+  const textNode = spaceSpan.firstChild;
+  range.setStart(textNode, 4);
+  range.setEnd(textNode, 4);
+  selection.removeAllRanges();
+  selection.addRange(range);
+  await sendEnterKey();
+  await sendBackspaceKey();
+  assert_equals(
+    editableDiv.innerHTML,
+    "<h1><span style=\"background-color:red;\">Back</span><span style=\"background-color: red;\">space</span></h1>",
     "Style is not preserved for the span after pressing backspace in contenteditable"
   );
 }, "waiting for command to execute");