1640965 - user-select: all includes indentation/spaces for description details (dd) element

Status: UNCONFIRMED

(Core :: DOM: Serializers, defect, P3)

Description

[Patrick Westerhoff]

User Agent: Mozilla/5.0 (Windows NT 6.3; Win64; x64; rv:78.0) Gecko/20100101 Firefox/78.0

Steps to reproduce:

When using user-select: all to make a dd element selectable, copying the text also includes an apparent indentation of four spaces in the clipboard.

To reproduce this, go to about:blank, edit the HTML and add the following code:

<dl><dd style="user-select: all">foo</dd></dl>

Then click on the text to automatically select it. Press Ctrl+C to copy and paste the contents somewhere.

Actual results:

The pasted content includes four spaces at the beginning.

Expected results:

The text should be copied without any whitespace around it because the element also doesn’t contain any whitespace.

I also tested this in Chrome and no additional whitespace gets copied there.

Comment 1

[Emilio Cobos Álvarez (:emilio)]

I'm actually not sure this is a bug at all, this seems intended behavior: https://searchfox.org/mozilla-central/rev/7dafc35406b9c945189c617d427f5458933fd3fb/dom/base/nsPlainTextSerializer.cpp#58

Comment 2

[Patrick Westerhoff]

(In reply to Emilio Cobos Álvarez (:emilio) from comment #1)

I'm actually not sure this is a bug at all, this seems intended behavior

So this is actually a feature that indents the copied code to make sure that the whole list when copied stays readable? That sounds plausible but it still seems rather confusing when you only select a single element. I would gladly accept that output when selecting more than just the dd element (e.g. the full dl list). But for the single element, it seems weird.

For what it’s worth, the result from window.getSelection().toString() for that selection does not include the indentation.

Comment 3

[Edgar Chen [:edgar]]

Attachment: test.html

It looks similar to bug 1284473.

In Gecko, after clicking on the text to automatically select it, console shows:

Range { commonAncestorContainer: dd, startContainer: dd, startOffset: 0, endContainer: dd, endOffset: 1, collapsed: false }

where in Chrome:

Range {startContainer: text, startOffset: 0, endContainer: text, endOffset: 3, collapsed: false, …}

So Gecko selects all the contents of the <dd> element and Chrome selects the contents of textnode.