| <!doctype html> |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| <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> |
| </head> |
| <body> |
| <div contenteditable><h1><span style="background-color:red;">Back</span></h1> |
| <h1><span style="background-color: red;" id="space">space</span></h1></div> |
| <script> |
| "use strict"; |
| |
| const kBackspaceKey = "\uE003"; |
| |
| function sendBackspaceKey() { |
| return new test_driver.Actions() |
| .keyDown(kBackspaceKey) |
| .keyUp(kBackspaceKey) |
| .send(); |
| } |
| |
| promise_test(async () => { |
| const editableDiv = document.querySelector("div[contenteditable]"); |
| const spaceSpan = editableDiv.querySelectorAll('span')[1]; |
| await new test_driver.click(document.querySelector('#space')); |
| 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"); |
| </script> |
| </body> |
| </html> |
