Bug 210595 - The <style> element should not convert \n into <br>
Summary: The <style> element should not convert \n into <br>
Status: RESOLVED INVALID
Alias: None
Product: WebKit
Classification: Unclassified
Component: HTML Editing (show other bugs)
Version: Other
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2020-04-16 01:15 PDT by Milan Crha
Modified: 2023-08-26 00:31 PDT (History)
8 users (show)

See Also:


Attachments
proposed patch (1.73 KB, patch)
2020-04-16 02:45 PDT, Milan Crha
mcrha: review?
mcrha: commit-queue?
Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
Description Milan Crha 2020-04-16 01:15:15 PDT
The <style> element inside <head> can use \n as a separator between CSS rules (yes, they should be in a comment, but it's still possible to write them as regular text inside the element). When I want to get the content of the HTML document the \n are converted into <br> tags, which can lead to broken CSS rules when this HTML is loaded back. This conversion happens when setting style.innerText value.

Steps:
a) open the MiniBrowser and there the Inspector
b) run in the Inspector Console:

   document.documentElement.innerHTML = "<head><style> body {color:orange;}\nbody {background:blue;}</style></head><body>text</body>"

   * you see a blue document with orange 'text' at the top, as expected.
   * the 'Elements' tab shows the <style> element content as one long line, as expected.

c) run in the Inspector Console:

   document.head.firstElementChild.innerText = "body {color:green;}\nbody {background:red;}"

   * you see a red document with green 'text' at the top, as expected.
   * the 'Elements' tab shows the <style> element content with <br> element, where \n was used, which is wrong.

d) run in the Inspector Console:

   document.documentElement.innerHTML = document.documentElement.innerHTML

   * you see a white document with green 'text' at the top, which is wrong.
   * the 'Elements' tab shows the <style> element content with <br> as a regular text, not as an element, which is wrong.

The expected is that:
* after c) the <style>'s content will not contain <br> element
* after d) there will be absolutely no change in the view, neither in the HTML content/structure

This is with the trunk at r259630.
Comment 1 Milan Crha 2020-04-16 01:32:18 PDT
It seems I can workaround this by using style.innerHTML instead of style.innerText, but I'm afraid it would have some side effects when the content has >, <, & or some such characters.
Comment 2 Milan Crha 2020-04-16 02:45:26 PDT
Created attachment 396630 [details]
proposed patch

This helps, though I'm not sure whether it's the way you'd like to have it.
Comment 3 Anne van Kesteren 2023-08-26 00:31:25 PDT
This is how innerText and innerHTML are supposed to behave. Firefox does the exact same thing.

See https://html.spec.whatwg.org/#the-innertext-idl-attribute.