Implement support for removing stylesheets from their document.

[jdm]

10:32 <jdm> SimonSapin: do you know if we can support removing stylesheets from the document properly yet?
10:33 <SimonSapin> jdm: that should work fine now, assuming we call Stylist.update at the appropriate time

This means we should add this behaviour when:

• <style> and <link> elements are removed from documents (unbind_from_tree)
• the children of <style> elements are modified (we should remove the associated stylesheet and reparse it)

[jdm]

@zaynetro If you're interested in making some other contributions, this might be interesting!

[zaynetro]

@jdm Thanks for mentioning me! I am definitely interested. Tomorrow I will take a look and ask questions.

[zaynetro]

I will try listing my findings and steps that I think should be taken. Note, that I have a very poor knowledge of the code base. Although I am hoping to improve it with your help.

• <style> and <link> elements are meta elements (components/dom/style/htmlmetaelement.rs). When unbind_from_tree is being called we want to remove css styles from the document(?) and update document styles by calling Stylist.update().

  • When the element that is being removed has a stylesheet how do I remove the stylesheet from the document?
  • I found that Stylist.update is being called from LayoutThread.handle_reflow. How do I trigger the reflow from unbind_from_tree method?
  • <style> element can contain cssom_stylesheet that also needs to be removed from the document(?). At the moment I have no knowledge on how to do that.

• "the children of <style> elements are modified" Any hints on where to look?

[jdm]

<style> and <link> elements are actually HTMLStyleElement and HTMLLinkElement respectively, defined in htmlstyleelement.rs and htmllinkelement.rs. The important hooks are unbind_from_tree and children_changed. It looks like if we call document.invalidate_stylesheets(), that will cause the code that invokes Stylist.update() to run when the next reflow happens.

[jdm]

From reading HTMLStyleElement::parse_own_css, it looks like we may already handle modifying the children of a <style> element correctly. It would be good to write a test that verifies this - start with a file that contains a style element with a body { background-color: red; } text node, and replace that text node (using JS) with a new one that says body { color: green } and verify that the background color is not red afterwards.

[zaynetro]

I can't believe I am so blind :) Thanks! Could you suggest the correct directory for the test? If I understand correctly then I can create one with:

./mach create-wpt tests/wpt/path/to/new/test.html

[jdm]

tests/wpt/mozilla/tests/Mozilla is fine for now. You'll want a reference test, which requires a --reference argument to create-wpt too.