Skip to content

CSSOM student project

Sagar Muchhal edited this page Mar 13, 2016 · 4 revisions

Implement common parts of the CSSOM

Background information: One of many standards defined by the CSS Working Group is the CSS Object Model. This provides a JS API that allows webpages to query and modify the CSS rules and properties that affect individual elements as well as whole pages. This project is intended to implement the most commonly-used portions of this specification to increase Servo's compatibility with existing webpages.

Initial steps:

  • compile Servo and ensure that it runs on tests/html/about-mozilla.html
  • email the mozilla.dev.servo mailing list introducing your group and your progress
  • create the StyleSheet interface. See the documentation for how to go about this. Comment out any method in the WebIDL that cannot be trivially implemented according to the specification.
  • create the StyleSheetList interface. Leave [ArrayClass] commented out, since it is not yet supported by Servo. Store a JS<Document> member to allow accessing a document's stylesheets.
  • add the styleSheets attribute from the Document extension to Document.webidl, and make it return a new instance of StyleSheetList referencing the current document.
  • run ./mach test-wpt /tests/wpt/html/dom/interfaces.html and update the test result expectations according to the documentation
  • update tests/wpt/mozilla/tests/mozilla/interfaces.html to add the new interface names and allow the test to pass.

Subsequent steps:

  • make the stylesheets member of Document store the associated Element along with the actual Stylesheet. Add a member to StyleSheet for the associated element, and implement the ownerNode attribute of StyleSheet using this.
  • create the CSSStyleSheet interface, containing an Arc<Stylesheet> member. Add a method to Document that returns a new CSSStyleSheet instance for a particular index in the stylesheets member.
  • create the CSSRule interface.
  • create the CSSRuleList interface and implement CSSStyleSheet.cssRules.
  • implement the insertRule and deleteRule methods of CSSStyleSheet by making the rules member of the Stylesheet type contain a RefCell, and using this to mutate the contents of the vector.
  • create the CSSStyleRule interface and make cssRules return CSSStyleRule values for appropriate rules.
Clone this wiki locally