Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Incorrect Mutation Records for document.write with whitespace #3261

Open
mlrawlings opened this issue Oct 19, 2021 · 1 comment · May be fixed by #3296
Open

Incorrect Mutation Records for document.write with whitespace #3261

mlrawlings opened this issue Oct 19, 2021 · 1 comment · May be fixed by #3296
Labels

Comments

@mlrawlings
Copy link

mlrawlings commented Oct 19, 2021

Basic info:

  • Node.js version: v12.16.3
  • jsdom version: v18.0.0

Minimal reproduction case

const { JSDOM } = require("jsdom");
const options = {};
const dom = new JSDOM("", options);
const window = dom.window;
const document = window.document;

document.open();

const observer = new window.MutationObserver(records =>
  records.forEach(record => console.log(formatMutationRecord(record)))
);

observer.observe(document, {
  attributes: true,
  attributeOldValue: true,
  characterData: true,
  characterDataOldValue: true,
  childList: true,
  subtree: true
});

document.write("a b c d");

document.close();

function formatMutationRecord(record) {
  const { target, oldValue } = record;

  switch (record.type) {
    case "characterData": {
      return target.nodeName + ": " + JSON.stringify(oldValue) + " => " + JSON.stringify(target.nodeValue);
    }

    case "childList": {
      const { addedNodes } = record;
      return "inserted " + Array.from(addedNodes).map(added => added.nodeName).join(", ")
    }
  }
}

Mutations records include a bunch of unexpected "CharacterData" updates:

inserted HTML
inserted HEAD
inserted BODY
inserted #text
#text: "a" => "a b c d"
#text: "a " => "a b c d"
#text: "a b" => "a b c d"
#text: "a b " => "a b c d"
#text: "a b c" => "a b c d"
#text: "a b c " => "a b c d"

How does similar code behave in browsers?

Mutation record does not contain these updates:

inserted HTML
inserted HEAD
inserted BODY
inserted #text

https://cloudflareworkers.com/#8908b378ca311d7b21227af410fdaa19:https://tutorial.cloudflareworkers.com/
(open the browser console - displayed console is for the worker)

TimothyGu added a commit to TimothyGu/jsdom that referenced this issue Nov 29, 2021
The "insert a character" algorithm [1] in the HTML parser is clear on
appending directly to the Text node's data rather than using the replace
data algorithm (which creates mutation records).

[1]: https://html.spec.whatwg.org/multipage/parsing.html#insert-a-character

Fixes: jsdom#3261
@TimothyGu
Copy link
Member

Thanks for this report! #3296 is a fix, though we still need to write a test for it to be mergeable.

@mlrawlings if you're interested in contributing your test as a Web Platform Test (put it under test/web-platform-tests/to-upstream), that would be wonderful.

domenic pushed a commit to TimothyGu/jsdom that referenced this issue Jun 13, 2022
The "insert a character" algorithm [1] in the HTML parser is clear on
appending directly to the Text node's data rather than using the replace
data algorithm (which creates mutation records).

[1]: https://html.spec.whatwg.org/multipage/parsing.html#insert-a-character

Fixes: jsdom#3261
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants