Expertiza_Wiki - User contributions [en]

CSC/ECE 517 Spring 2016 M1603 Implement Common Parts of the CSSOM API

2016-04-11T18:30:42Z

Maalbash: /* Testing */

=='''Introduction'''==

Cascading Style Sheets ([https://en.wikipedia.org/wiki/Cascading_Style_Sheets CSS]) is a style sheet language used for describing the presentation of a document written in a markup language. Although most often used to set the visual style of web pages and user interfaces written in [https://en.wikipedia.org/wiki/HTML HTML] and [https://en.wikipedia.org/wiki/XHTML XHTML], the language can be applied to any [https://en.wikipedia.org/wiki/XML XML] document, including plain XML, [https://en.wikipedia.org/wiki/Scalable_Vector_Graphics SVG] and [https://en.wikipedia.org/wiki/XUL XUL], and is applicable to rendering in speech, or on other media. Along with HTML and [https://en.wikipedia.org/wiki/JavaScript JavaScript], CSS is a cornerstone technology used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications

==='''CSSOM'''===
CSSOM which is the CSS Object Model defines APIs (including generic parsing and serialization rules) for media queries, selectors, and CSS itself<ref>https://drafts.csswg.org/cssom/</ref>. The core features of the CSSOM are oriented towards providing basic capabilities to author-defined scripts to permit access to and manipulation of style related state information and processes. CSSOM aims at proving a way to access the CSS style classes and properties. One can even modify the CSS rules using this API. These changes can be targeted to affect individual elements or the whole webpage. <ref>https://github.com/servo/servo/wiki/CSSOM-student-project</ref>. CSSOM is actually a collection of all the CSS stylesheets found on a web page which is very similar to Document Object Model (DOM) but only stores collection of CSS instead of HTML. <ref>https://varvy.com/performance/cssom.html</ref>. CSSOM identifies which elements on your webpage require styling and modifies them. It is also used to optimize the speed at which webpages get loaded.
It is an integral part of the process that is used to display content on a webpage. The web browser first creates a DOM by examining the HTMLs, then creates a CSSOM by examining the CSS stylesheets. It then creates a render tree by comibining the DOM and the CSSOM and displays the webpage.<ref>https://varvy.com/performance/cssom.html</ref>.

==='''Rust'''===

We can organize different languages on a spectrum with control on one end and safety on the other. Languages like C and C++ fall on the end of the side of control, where as on the other side we have languages like Javascript, Ruby, Python, etc. What Rust does is stepping off this line. What it does is not a tradeoff between control and safety, but it provides you both the low level of control found in C and C++, and the high level of safety in JavaScript and Python. The three concepts that distinguish rust from other programming languages are: Ownership, Borrowing and lifetime. Ownership is how Rust achieves its largest goal, memory safety.<ref>https://en.wikipedia.org/wiki/Rust_(programming_language)</ref>

==='''Servo'''===

Servo is a project in [https://en.wikipedia.org/wiki/Mozilla Mozilla] research to write a parallel layout engine in Rust. It aims to achieve better parallelism, security, modularity and performance. Servo is built with Cargo, the rust package manager. It currently supports 64bit OSX, 64bit Linux, Android, and Gonk(Firefox OS).<ref>https://servo.org</ref>

=='''Project Description'''==

The project is to go through the following steps in a somewhat linear order:
*Compiling servo on a machine and making sure it runs on a specific url. Then emailing the mozilla mailing list to introduce the group.
*Creating a StyleSheet interface which represents an abstract, base style sheet. This creation requires a couple of steps :
**Adding a new IDL file (which contains specifications)
**Creating the Rust file which has implementations of the things specified in IDL.
**Listing the Rust file in mod.rs file.
*After that comes the creation of a StyleSheetList interface. Which represents an ordered collection of CSS style sheets. And basically because it's another interface, again the .webidl and .rs files need to be implemented.
*Adding the attribute <code>stylesheets</code> to the <code>Document.webidl</code>.
*In the three steps just mentioned some guidelines about implementation must be followed, like the return types of certain methods.
*Run the tests specified by the mozilla team.
*Finally updating the interfaces.html, and adding the new interface names.

The Subsequent steps are:
*making the <code>stylesheets</code> member of <code>Document</code> store the associated <code>Element</code> along with the actual implementation of <code>Stylesheet</code> and adding a member to <code>StyleSheet</code> for the associated element, and implement the <code>ownerNode</code> attribute of <code>StyleSheet</code> using this.
*create the CSSStyleSheet interface, containing an <code>Arc<Stylesheet></code> member. Add a method to <code>Document</code> that returns a new <code>CSSStyleSheet</code> instance for a particular index in the <code>stylesheets</code> member.
*creating the CSSRule interface which represents an abstract, base CSS Rule. It is done using the Webidl format.
*creating the CSSRuleList interface and implementing <code>CSSStyleSheet.cssRules</code> which is an array like object containing an ordered collection of CSS rules.
*implementing the <code>insertRule</code> and <code>deleteRule</code> methods of <code>CSSStyleSheet</code> to allow mutation of the contents of the vector in the <code>rules</code> member of the <code>Stylesheet</code>.
*creating the CSSStyleRule interface that extends the CSSRule interface and making <code>cssRules</code> return <code>CSSStyleRule</code> values for appropriate rules.

=='''Implementation'''==
==='''Initial Steps'''===
The following steps were followed to meet the project requirements as per this github page.
===='''Step 1'''====
We had to implement the StyleSheet interface for which we had to create two file: stylesheet.rs and StyleSheet.webidl and included stylesheet interface in the mod.rs file.
In the StyleSheet interface we avoided the three methods: ownerNode, parentStyleSheet and media as they could not be trivially implemented and the instructions were clear to avoid such methods.

===='''Step 2'''====
We had to implement StyleSheetList interface for which we had to create two file: stylesheetlist.rs and StyleSheetList.webidl and included stylesheetlist interface in the mod.rs file.
We used JS<Document> instead of [ArrayClass] as [ArrayClass] is not yet supported by Servo.
In the StyleSheetList interface we did not implement the getter as we do not have a list of stylesheets/scripts/dom.

===='''Step 3'''====
We had to implement a partial interface Document with an attribute as styleSheets. The declaration of the interface was done in Document.webidl and its implementation was done in document.rs file. The implementation returned a new instance of StyleSheetList referencing the current document.

===='''Class Diagram'''====

[[File:UMLinitial.png]]

==='''Subsequent Steps'''===

===='''Step 1'''====

We will be making changes in the <code>Document.rs</code> file to make the <code>stylesheets</code> member store the associated Element. We will then implement the ownerNode attribute in the StyleSheet inteface by making changes in the <code>StyleSheet.webidl</code> and <code>stylesheet.rs</code>. We would just declare <code>ownerNode</code> attribute in the .webidl and give its implementation in .rs file.

===='''Step 2'''====

We will be making a new interface named as <code>CSSStyleSheet</code>. In the <code>Document.rs</code> file, we will create a method to return the <code>CSSStyleSheet</code> from the <code>stylesheets</code> member of the Document by giving a particular index as the input.

===='''Step 3'''====

As the next step, we will be creating the <code>CSSRule</code> interface which has attributes like <code>type</code>, <code>cssText</code>, <code>parentRule</code> and <code>parentStyleSheet</code>. This interface will also have several constants like <code>STYLE_RULE</code>, <code>CHARSET_RULE</code> , <code>IMPORT_RULE, MEDIA_RULE</code>, <code>FONT_FACE_RULE</code>, <code>PAGE_RULE, MARGIN_RULE</code> and <code>NAMESPACE_RULE</code>.
This will require us to create two files: <code>CSSRule.webidl</code> and <code>cssrule.rs</code>

===='''Step 4'''====

We will be creating <code>CSSRuleList</code> interface by creating 2 files: <code>CSSRuleList.webidl</code> and <code>CSSRulelist.rs</code>. This interface will have one attribute, which is length and a getter which returns the <code>CSSRule</code> at a particular index. We will also implement <code>CSSStyleSheet.cssRules</code>

===='''Step 5'''====

We will make <code>rules</code> member of the <code>StyleSheet</code> type which contains a RefCell and implement the <code>insertRule</code> and <code>deleteRule</code> methods of <code>CSSStyleSheet</code>.

===='''Step 6'''====

We will be creating a new interface <code>CSSStyleRule</code> , by making 2 files: <code>CSSStyleRule.webidl<code> and <code>CSSStyleRule.rs</code>. The interface will contain two attributes, namely, <code>selectorText</code> and <code>CSSStyleDeclaration</code> style. The <code>cssRules</code> will be implemented to return <code>CSSStyleRule</code> values for appropriate rules.

===='''Class Diagram'''====

[[File:UMLsubs.png]]

=='''Design Principles'''==
In this mozilla project, we are asked to strictly follow the existing design patterns and coding conventions. The main aim of this project is to add and modify interfaces. Interfaces allow developers to follow a clean design principle wherein they do not have to program to classes. It is too easy to add a dependency on a class. In order to avoid that kind of dependency on the implementation i.e. classes, developers can program to interfaces. This type of design pattern is an architectural pattern and makes the code more modular and object oriented. Programming to an interface has a flavor of DRY principle because even if the underlying implementation changes, the handle to the implementation is an interface and that does not change. In this way, our mozilla project becomes more modular and object oriented. Servo has a utility of tests that checks the coding standards followed by Mozilla on this project. We will execute the following utility tests command.
<code>./mach test-tidy</code> Any issues encountered by executing this test can be flagged before generating the pull request. This ensures that the developers follow the coding standards.

=='''Testing'''==
Following are the steps to run all the tests:

# Install the pre-requisites required for servo as mentioned here
# Run the following commands

cd
git clone https://github.com/mohammed-alfatih/servo.git
cd servo
./mach build --release
'''Note''': It may take around 30 mins to build
./mach test-wpt /tests/wpt/html/dom/interfaces.html
You will see that all tests pass as expected.

'''Note''': There were no predefined test cases mentioned for our project. So now you will see 0 testcases. As far as we know there is no way to test this from UI.

=='''Conclusion'''==
We have implemented the most commonly-used portions of the CSSOM API specification to increase Servo's compatibility with existing webpages <ref>https://github.com/servo/servo/wiki/CSSOM-student-project</ref>. We have created two interfaces, StyleSheet and StyleSheetList in our initial steps. As a part of our subsequent steps, we would be adding 4 new interfaces: CSSStyleSheet, CSSRule, CSSRuleList and the CSSStyleRule interface. We have implemented only the obvious methods for these interfaces so that more advanced work can be done to make this CSSOM API fully functional keeping our work as the basis.

=='''References'''==
<references/>

CSC/ECE 517 Spring 2016 M1603 Implement Common Parts of the CSSOM API

2016-04-11T18:30:24Z

Maalbash: /* Testing */

=='''Introduction'''==

Cascading Style Sheets ([https://en.wikipedia.org/wiki/Cascading_Style_Sheets CSS]) is a style sheet language used for describing the presentation of a document written in a markup language. Although most often used to set the visual style of web pages and user interfaces written in [https://en.wikipedia.org/wiki/HTML HTML] and [https://en.wikipedia.org/wiki/XHTML XHTML], the language can be applied to any [https://en.wikipedia.org/wiki/XML XML] document, including plain XML, [https://en.wikipedia.org/wiki/Scalable_Vector_Graphics SVG] and [https://en.wikipedia.org/wiki/XUL XUL], and is applicable to rendering in speech, or on other media. Along with HTML and [https://en.wikipedia.org/wiki/JavaScript JavaScript], CSS is a cornerstone technology used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications

==='''CSSOM'''===
CSSOM which is the CSS Object Model defines APIs (including generic parsing and serialization rules) for media queries, selectors, and CSS itself<ref>https://drafts.csswg.org/cssom/</ref>. The core features of the CSSOM are oriented towards providing basic capabilities to author-defined scripts to permit access to and manipulation of style related state information and processes. CSSOM aims at proving a way to access the CSS style classes and properties. One can even modify the CSS rules using this API. These changes can be targeted to affect individual elements or the whole webpage. <ref>https://github.com/servo/servo/wiki/CSSOM-student-project</ref>. CSSOM is actually a collection of all the CSS stylesheets found on a web page which is very similar to Document Object Model (DOM) but only stores collection of CSS instead of HTML. <ref>https://varvy.com/performance/cssom.html</ref>. CSSOM identifies which elements on your webpage require styling and modifies them. It is also used to optimize the speed at which webpages get loaded.
It is an integral part of the process that is used to display content on a webpage. The web browser first creates a DOM by examining the HTMLs, then creates a CSSOM by examining the CSS stylesheets. It then creates a render tree by comibining the DOM and the CSSOM and displays the webpage.<ref>https://varvy.com/performance/cssom.html</ref>.

==='''Rust'''===

We can organize different languages on a spectrum with control on one end and safety on the other. Languages like C and C++ fall on the end of the side of control, where as on the other side we have languages like Javascript, Ruby, Python, etc. What Rust does is stepping off this line. What it does is not a tradeoff between control and safety, but it provides you both the low level of control found in C and C++, and the high level of safety in JavaScript and Python. The three concepts that distinguish rust from other programming languages are: Ownership, Borrowing and lifetime. Ownership is how Rust achieves its largest goal, memory safety.<ref>https://en.wikipedia.org/wiki/Rust_(programming_language)</ref>

==='''Servo'''===

Servo is a project in [https://en.wikipedia.org/wiki/Mozilla Mozilla] research to write a parallel layout engine in Rust. It aims to achieve better parallelism, security, modularity and performance. Servo is built with Cargo, the rust package manager. It currently supports 64bit OSX, 64bit Linux, Android, and Gonk(Firefox OS).<ref>https://servo.org</ref>

=='''Project Description'''==

The project is to go through the following steps in a somewhat linear order:
*Compiling servo on a machine and making sure it runs on a specific url. Then emailing the mozilla mailing list to introduce the group.
*Creating a StyleSheet interface which represents an abstract, base style sheet. This creation requires a couple of steps :
**Adding a new IDL file (which contains specifications)
**Creating the Rust file which has implementations of the things specified in IDL.
**Listing the Rust file in mod.rs file.
*After that comes the creation of a StyleSheetList interface. Which represents an ordered collection of CSS style sheets. And basically because it's another interface, again the .webidl and .rs files need to be implemented.
*Adding the attribute <code>stylesheets</code> to the <code>Document.webidl</code>.
*In the three steps just mentioned some guidelines about implementation must be followed, like the return types of certain methods.
*Run the tests specified by the mozilla team.
*Finally updating the interfaces.html, and adding the new interface names.

The Subsequent steps are:
*making the <code>stylesheets</code> member of <code>Document</code> store the associated <code>Element</code> along with the actual implementation of <code>Stylesheet</code> and adding a member to <code>StyleSheet</code> for the associated element, and implement the <code>ownerNode</code> attribute of <code>StyleSheet</code> using this.
*create the CSSStyleSheet interface, containing an <code>Arc<Stylesheet></code> member. Add a method to <code>Document</code> that returns a new <code>CSSStyleSheet</code> instance for a particular index in the <code>stylesheets</code> member.
*creating the CSSRule interface which represents an abstract, base CSS Rule. It is done using the Webidl format.
*creating the CSSRuleList interface and implementing <code>CSSStyleSheet.cssRules</code> which is an array like object containing an ordered collection of CSS rules.
*implementing the <code>insertRule</code> and <code>deleteRule</code> methods of <code>CSSStyleSheet</code> to allow mutation of the contents of the vector in the <code>rules</code> member of the <code>Stylesheet</code>.
*creating the CSSStyleRule interface that extends the CSSRule interface and making <code>cssRules</code> return <code>CSSStyleRule</code> values for appropriate rules.

=='''Implementation'''==
==='''Initial Steps'''===
The following steps were followed to meet the project requirements as per this github page.
===='''Step 1'''====
We had to implement the StyleSheet interface for which we had to create two file: stylesheet.rs and StyleSheet.webidl and included stylesheet interface in the mod.rs file.
In the StyleSheet interface we avoided the three methods: ownerNode, parentStyleSheet and media as they could not be trivially implemented and the instructions were clear to avoid such methods.

===='''Step 2'''====
We had to implement StyleSheetList interface for which we had to create two file: stylesheetlist.rs and StyleSheetList.webidl and included stylesheetlist interface in the mod.rs file.
We used JS<Document> instead of [ArrayClass] as [ArrayClass] is not yet supported by Servo.
In the StyleSheetList interface we did not implement the getter as we do not have a list of stylesheets/scripts/dom.

===='''Step 3'''====
We had to implement a partial interface Document with an attribute as styleSheets. The declaration of the interface was done in Document.webidl and its implementation was done in document.rs file. The implementation returned a new instance of StyleSheetList referencing the current document.

===='''Class Diagram'''====

[[File:UMLinitial.png]]

==='''Subsequent Steps'''===

===='''Step 1'''====

We will be making changes in the <code>Document.rs</code> file to make the <code>stylesheets</code> member store the associated Element. We will then implement the ownerNode attribute in the StyleSheet inteface by making changes in the <code>StyleSheet.webidl</code> and <code>stylesheet.rs</code>. We would just declare <code>ownerNode</code> attribute in the .webidl and give its implementation in .rs file.

===='''Step 2'''====

We will be making a new interface named as <code>CSSStyleSheet</code>. In the <code>Document.rs</code> file, we will create a method to return the <code>CSSStyleSheet</code> from the <code>stylesheets</code> member of the Document by giving a particular index as the input.

===='''Step 3'''====

As the next step, we will be creating the <code>CSSRule</code> interface which has attributes like <code>type</code>, <code>cssText</code>, <code>parentRule</code> and <code>parentStyleSheet</code>. This interface will also have several constants like <code>STYLE_RULE</code>, <code>CHARSET_RULE</code> , <code>IMPORT_RULE, MEDIA_RULE</code>, <code>FONT_FACE_RULE</code>, <code>PAGE_RULE, MARGIN_RULE</code> and <code>NAMESPACE_RULE</code>.
This will require us to create two files: <code>CSSRule.webidl</code> and <code>cssrule.rs</code>

===='''Step 4'''====

We will be creating <code>CSSRuleList</code> interface by creating 2 files: <code>CSSRuleList.webidl</code> and <code>CSSRulelist.rs</code>. This interface will have one attribute, which is length and a getter which returns the <code>CSSRule</code> at a particular index. We will also implement <code>CSSStyleSheet.cssRules</code>

===='''Step 5'''====

We will make <code>rules</code> member of the <code>StyleSheet</code> type which contains a RefCell and implement the <code>insertRule</code> and <code>deleteRule</code> methods of <code>CSSStyleSheet</code>.

===='''Step 6'''====

We will be creating a new interface <code>CSSStyleRule</code> , by making 2 files: <code>CSSStyleRule.webidl<code> and <code>CSSStyleRule.rs</code>. The interface will contain two attributes, namely, <code>selectorText</code> and <code>CSSStyleDeclaration</code> style. The <code>cssRules</code> will be implemented to return <code>CSSStyleRule</code> values for appropriate rules.

===='''Class Diagram'''====

[[File:UMLsubs.png]]

=='''Design Principles'''==
In this mozilla project, we are asked to strictly follow the existing design patterns and coding conventions. The main aim of this project is to add and modify interfaces. Interfaces allow developers to follow a clean design principle wherein they do not have to program to classes. It is too easy to add a dependency on a class. In order to avoid that kind of dependency on the implementation i.e. classes, developers can program to interfaces. This type of design pattern is an architectural pattern and makes the code more modular and object oriented. Programming to an interface has a flavor of DRY principle because even if the underlying implementation changes, the handle to the implementation is an interface and that does not change. In this way, our mozilla project becomes more modular and object oriented. Servo has a utility of tests that checks the coding standards followed by Mozilla on this project. We will execute the following utility tests command.
<code>./mach test-tidy</code> Any issues encountered by executing this test can be flagged before generating the pull request. This ensures that the developers follow the coding standards.

=='''Testing'''==
Following are the steps to run all the tests:

# Install the pre-requisites required for servo as mentioned here

# Run the following commands

cd
git clone https://github.com/mohammed-alfatih/servo.git
cd servo
./mach build --release
'''Note''': It may take around 30 mins to build
./mach test-wpt /tests/wpt/html/dom/interfaces.html
You will see that all tests pass as expected.

'''Note''': There were no predefined test cases mentioned for our project. So now you will see 0 testcases. As far as we know there is no way to test this from UI.

=='''Conclusion'''==
We have implemented the most commonly-used portions of the CSSOM API specification to increase Servo's compatibility with existing webpages <ref>https://github.com/servo/servo/wiki/CSSOM-student-project</ref>. We have created two interfaces, StyleSheet and StyleSheetList in our initial steps. As a part of our subsequent steps, we would be adding 4 new interfaces: CSSStyleSheet, CSSRule, CSSRuleList and the CSSStyleRule interface. We have implemented only the obvious methods for these interfaces so that more advanced work can be done to make this CSSOM API fully functional keeping our work as the basis.

=='''References'''==
<references/>

CSC/ECE 517 Spring 2016 M1603 Implement Common Parts of the CSSOM API

2016-04-09T03:57:32Z

Maalbash: /* Class Diagram */

=='''Introduction'''==

Cascading Style Sheets ([https://en.wikipedia.org/wiki/Cascading_Style_Sheets CSS]) is a style sheet language used for describing the presentation of a document written in a markup language. Although most often used to set the visual style of web pages and user interfaces written in [https://en.wikipedia.org/wiki/HTML HTML] and [https://en.wikipedia.org/wiki/XHTML XHTML], the language can be applied to any [https://en.wikipedia.org/wiki/XML XML] document, including plain XML, [https://en.wikipedia.org/wiki/Scalable_Vector_Graphics SVG] and [https://en.wikipedia.org/wiki/XUL XUL], and is applicable to rendering in speech, or on other media. Along with HTML and [https://en.wikipedia.org/wiki/JavaScript JavaScript], CSS is a cornerstone technology used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications

==='''CSSOM'''===
CSSOM which is the CSS Object Model defines APIs (including generic parsing and serialization rules) for media queries, selectors, and CSS itself<ref>https://drafts.csswg.org/cssom/</ref>. The core features of the CSSOM are oriented towards providing basic capabilities to author-defined scripts to permit access to and manipulation of style related state information and processes. CSSOM aims at proving a way to access the CSS style classes and properties. One can even modify the CSS rules using this API. These changes can be targeted to affect individual elements or the whole webpage. <ref>https://github.com/servo/servo/wiki/CSSOM-student-project</ref>. CSSOM is actually a collection of all the CSS stylesheets found on a web page which is very similar to Document Object Model (DOM) but only stores collection of CSS instead of HTML. <ref>https://varvy.com/performance/cssom.html</ref>. CSSOM identifies which elements on your webpage require styling and modifies them. It is also used to optimize the speed at which webpages get loaded.
It is an integral part of the process that is used to display content on a webpage. The web browser first creates a DOM by examining the HTMLs, then creates a CSSOM by examining the CSS stylesheets. It then creates a render tree by comibining the DOM and the CSSOM and displays the webpage.<ref>https://varvy.com/performance/cssom.html</ref>.

==='''Rust'''===

We can organize different languages on a spectrum with control on one end and safety on the other. Languages like C and C++ fall on the end of the side of control, where as on the other side we have languages like Javascript, Ruby, Python, etc. What Rust does is stepping off this line. What it does is not a tradeoff between control and safety, but it provides you both the low level of control found in C and C++, and the high level of safety in JavaScript and Python. The three concepts that distinguish rust from other programming languages are: Ownership, Borrowing and lifetime. Ownership is how Rust achieves its largest goal, memory safety.<ref>https://en.wikipedia.org/wiki/Rust_(programming_language)</ref>

==='''Servo'''===

Servo is a project in [https://en.wikipedia.org/wiki/Mozilla Mozilla] research to write a parallel layout engine in Rust. It aims to achieve better parallelism, security, modularity and performance. Servo is built with Cargo, the rust package manager. It currently supports 64bit OSX, 64bit Linux, Android, and Gonk(Firefox OS).<ref>https://servo.org</ref>

=='''Project Description'''==

The project is to go through the following steps in a somewhat linear order:
*Compiling servo on a machine and making sure it runs on a specific url. Then emailing the mozilla mailing list to introduce the group.
*Creating a StyleSheet interface which represents an abstract, base style sheet. This creation requires a couple of steps :
**Adding a new IDL file (which contains specifications)
**Creating the Rust file which has implementations of the things specified in IDL.
**Listing the Rust file in mod.rs file.
*After that comes the creation of a StyleSheetList interface. Which represents an ordered collection of CSS style sheets. And basically because it's another interface, again the .webidl and .rs files need to be implemented.
*Adding the attribute <code>stylesheets</code> to the <code>Document.webidl</code>.
*In the three steps just mentioned some guidelines about implementation must be followed, like the return types of certain methods.
*Run the tests specified by the mozilla team.
*Finally updating the interfaces.html, and adding the new interface names.

The Subsequent steps are:
*making the <code>stylesheets</code> member of <code>Document</code> store the associated <code>Element</code> along with the actual implementation of <code>Stylesheet</code> and adding a member to <code>StyleSheet</code> for the associated element, and implement the <code>ownerNode</code> attribute of <code>StyleSheet</code> using this.
*create the CSSStyleSheet interface, containing an <code>Arc<Stylesheet></code> member. Add a method to <code>Document</code> that returns a new <code>CSSStyleSheet</code> instance for a particular index in the <code>stylesheets</code> member.
*creating the CSSRule interface which represents an abstract, base CSS Rule. It is done using the Webidl format.
*creating the CSSRuleList interface and implementing <code>CSSStyleSheet.cssRules</code> which is an array like object containing an ordered collection of CSS rules.
*implementing the <code>insertRule</code> and <code>deleteRule</code> methods of <code>CSSStyleSheet</code> to allow mutation of the contents of the vector in the <code>rules</code> member of the <code>Stylesheet</code>.
*creating the CSSStyleRule interface that extends the CSSRule interface and making <code>cssRules</code> return <code>CSSStyleRule</code> values for appropriate rules.

=='''Implementation'''==
==='''Initial Steps'''===
The following steps were followed to meet the project requirements as per this github page.
===='''Step 1'''====
We had to implement the StyleSheet interface for which we had to create two file: stylesheet.rs and StyleSheet.webidl and included stylesheet interface in the mod.rs file.
In the StyleSheet interface we avoided the three methods: ownerNode, parentStyleSheet and media as they could not be trivially implemented and the instructions were clear to avoid such methods.

===='''Step 2'''====
We had to implement StyleSheetList interface for which we had to create two file: stylesheetlist.rs and StyleSheetList.webidl and included stylesheetlist interface in the mod.rs file.
We used JS<Document> instead of [ArrayClass] as [ArrayClass] is not yet supported by Servo.
In the StyleSheetList interface we did not implement the getter as we do not have a list of stylesheets/scripts/dom.

===='''Step 3'''====
We had to implement a partial interface Document with an attribute as styleSheets. The declaration of the interface was done in Document.webidl and its implementation was done in document.rs file. The implementation returned a new instance of StyleSheetList referencing the current document.

===='''Class Diagram'''====

[[File:UMLinitial.png]]

==='''Subsequent Steps'''===

===='''Step 1'''====

We will be making changes in the <code>Document.rs</code> file to make the <code>stylesheets</code> member store the associated Element. We will then implement the ownerNode attribute in the StyleSheet inteface by making changes in the <code>StyleSheet.webidl</code> and <code>stylesheet.rs</code>. We would just declare <code>ownerNode</code> attribute in the .webidl and give its implementation in .rs file.

===='''Step 2'''====

We will be making a new interface named as <code>CSSStyleSheet</code>. In the <code>Document.rs</code> file, we will create a method to return the <code>CSSStyleSheet</code> from the <code>stylesheets</code> member of the Document by giving a particular index as the input.

===='''Step 3'''====

As the next step, we will be creating the <code>CSSRule</code> interface which has attributes like <code>type</code>, <code>cssText</code>, <code>parentRule</code> and <code>parentStyleSheet</code>. This interface will also have several constants like <code>STYLE_RULE</code>, <code>CHARSET_RULE</code> , <code>IMPORT_RULE, MEDIA_RULE</code>, <code>FONT_FACE_RULE</code>, <code>PAGE_RULE, MARGIN_RULE</code> and <code>NAMESPACE_RULE</code>.
This will require us to create two files: <code>CSSRule.webidl</code> and <code>cssrule.rs</code>

===='''Step 4'''====

We will be creating <code>CSSRuleList</code> interface by creating 2 files: <code>CSSRuleList.webidl</code> and <code>CSSRulelist.rs</code>. This interface will have one attribute, which is length and a getter which returns the <code>CSSRule</code> at a particular index. We will also implement <code>CSSStyleSheet.cssRules</code>

===='''Step 5'''====

We will make <code>rules</code> member of the <code>StyleSheet</code> type which contains a RefCell and implement the <code>insertRule</code> and <code>deleteRule</code> methods of <code>CSSStyleSheet</code>.

===='''Step 6'''====

We will be creating a new interface <code>CSSStyleRule</code> , by making 2 files: <code>CSSStyleRule.webidl<code> and <code>CSSStyleRule.rs</code>. The interface will contain two attributes, namely, <code>selectorText</code> and <code>CSSStyleDeclaration</code> style. The <code>cssRules</code> will be implemented to return <code>CSSStyleRule</code> values for appropriate rules.

===='''Class Diagram'''====

[[File:UMLsubs.png]]

=='''Design Principles'''==
In this mozilla project, we are asked to strictly follow the existing design patterns and coding conventions. The main aim of this project is to add and modify interfaces. Interfaces allow developers to follow a clean design principle wherein they do not have to program to classes. It is too easy to add a dependency on a class. In order to avoid that kind of dependency on the implementation i.e. classes, developers can program to interfaces. This type of design pattern is an architectural pattern and makes the code more modular and object oriented. Programming to an interface has a flavor of DRY principle because even if the underlying implementation changes, the handle to the implementation is an interface and that does not change. In this way, our mozilla project becomes more modular and object oriented. Servo has a utility of tests that checks the coding standards followed by Mozilla on this project. We will execute the following utility tests command.
<code>./mach test-tidy</code> Any issues encountered by executing this test can be flagged before generating the pull request. This ensures that the developers follow the coding standards.

=='''Testing'''==
Following are the steps to run all the tests:
1. Install the pre-requisites required for servo as mentioned here
2. Run the following commands
cd
git clone https://github.com/mohammed-alfatih/servo.git
cd servo
./mach build --release
'''Note''': It may take around 30 mins to build
./mach test-wpt /tests/wpt/html/dom/interfaces.html
You will see that all tests pass as expected.

'''Note''': There were no predefined test cases mentioned for our project. So now you will see 0 testcases. As far as we know there is no way to test this from UI.

=='''Conclusion'''==
We have implemented the most commonly-used portions of the CSSOM API specification to increase Servo's compatibility with existing webpages <ref>https://github.com/servo/servo/wiki/CSSOM-student-project</ref>. We have created two interfaces, StyleSheet and StyleSheetList in our initial steps. As a part of our subsequent steps, we would be adding 4 new interfaces: CSSStyleSheet, CSSRule, CSSRuleList and the CSSStyleRule interface. We have implemented only the obvious methods for these interfaces so that more advanced work can be done to make this CSSOM API fully functional keeping our work as the basis.

=='''References'''==
<references/>

File:UMLsubs.png

2016-04-09T03:55:21Z

Maalbash:

CSC/ECE 517 Spring 2016 M1603 Implement Common Parts of the CSSOM API

2016-04-09T03:54:28Z

Maalbash:

=='''Introduction'''==

Cascading Style Sheets ([https://en.wikipedia.org/wiki/Cascading_Style_Sheets CSS]) is a style sheet language used for describing the presentation of a document written in a markup language. Although most often used to set the visual style of web pages and user interfaces written in [https://en.wikipedia.org/wiki/HTML HTML] and [https://en.wikipedia.org/wiki/XHTML XHTML], the language can be applied to any [https://en.wikipedia.org/wiki/XML XML] document, including plain XML, [https://en.wikipedia.org/wiki/Scalable_Vector_Graphics SVG] and [https://en.wikipedia.org/wiki/XUL XUL], and is applicable to rendering in speech, or on other media. Along with HTML and [https://en.wikipedia.org/wiki/JavaScript JavaScript], CSS is a cornerstone technology used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications

==='''CSSOM'''===
CSSOM which is the CSS Object Model defines APIs (including generic parsing and serialization rules) for media queries, selectors, and CSS itself<ref>https://drafts.csswg.org/cssom/</ref>. The core features of the CSSOM are oriented towards providing basic capabilities to author-defined scripts to permit access to and manipulation of style related state information and processes. CSSOM aims at proving a way to access the CSS style classes and properties. One can even modify the CSS rules using this API. These changes can be targeted to affect individual elements or the whole webpage. <ref>https://github.com/servo/servo/wiki/CSSOM-student-project</ref>. CSSOM is actually a collection of all the CSS stylesheets found on a web page which is very similar to Document Object Model (DOM) but only stores collection of CSS instead of HTML. <ref>https://varvy.com/performance/cssom.html</ref>. CSSOM identifies which elements on your webpage require styling and modifies them. It is also used to optimize the speed at which webpages get loaded.
It is an integral part of the process that is used to display content on a webpage. The web browser first creates a DOM by examining the HTMLs, then creates a CSSOM by examining the CSS stylesheets. It then creates a render tree by comibining the DOM and the CSSOM and displays the webpage.<ref>https://varvy.com/performance/cssom.html</ref>.

==='''Rust'''===

We can organize different languages on a spectrum with control on one end and safety on the other. Languages like C and C++ fall on the end of the side of control, where as on the other side we have languages like Javascript, Ruby, Python, etc. What Rust does is stepping off this line. What it does is not a tradeoff between control and safety, but it provides you both the low level of control found in C and C++, and the high level of safety in JavaScript and Python. The three concepts that distinguish rust from other programming languages are: Ownership, Borrowing and lifetime. Ownership is how Rust achieves its largest goal, memory safety.<ref>https://en.wikipedia.org/wiki/Rust_(programming_language)</ref>

==='''Servo'''===

Servo is a project in [https://en.wikipedia.org/wiki/Mozilla Mozilla] research to write a parallel layout engine in Rust. It aims to achieve better parallelism, security, modularity and performance. Servo is built with Cargo, the rust package manager. It currently supports 64bit OSX, 64bit Linux, Android, and Gonk(Firefox OS).<ref>https://servo.org</ref>

=='''Project Description'''==

The project is to go through the following steps in a somewhat linear order:
*Compiling servo on a machine and making sure it runs on a specific url. Then emailing the mozilla mailing list to introduce the group.
*Creating a StyleSheet interface which represents an abstract, base style sheet. This creation requires a couple of steps :
**Adding a new IDL file (which contains specifications)
**Creating the Rust file which has implementations of the things specified in IDL.
**Listing the Rust file in mod.rs file.
*After that comes the creation of a StyleSheetList interface. Which represents an ordered collection of CSS style sheets. And basically because it's another interface, again the .webidl and .rs files need to be implemented.
*Adding the attribute <code>stylesheets</code> to the <code>Document.webidl</code>.
*In the three steps just mentioned some guidelines about implementation must be followed, like the return types of certain methods.
*Run the tests specified by the mozilla team.
*Finally updating the interfaces.html, and adding the new interface names.

The Subsequent steps are:
*making the <code>stylesheets</code> member of <code>Document</code> store the associated <code>Element</code> along with the actual implementation of <code>Stylesheet</code> and adding a member to <code>StyleSheet</code> for the associated element, and implement the <code>ownerNode</code> attribute of <code>StyleSheet</code> using this.
*create the CSSStyleSheet interface, containing an <code>Arc<Stylesheet></code> member. Add a method to <code>Document</code> that returns a new <code>CSSStyleSheet</code> instance for a particular index in the <code>stylesheets</code> member.
*creating the CSSRule interface which represents an abstract, base CSS Rule. It is done using the Webidl format.
*creating the CSSRuleList interface and implementing <code>CSSStyleSheet.cssRules</code> which is an array like object containing an ordered collection of CSS rules.
*implementing the <code>insertRule</code> and <code>deleteRule</code> methods of <code>CSSStyleSheet</code> to allow mutation of the contents of the vector in the <code>rules</code> member of the <code>Stylesheet</code>.
*creating the CSSStyleRule interface that extends the CSSRule interface and making <code>cssRules</code> return <code>CSSStyleRule</code> values for appropriate rules.

=='''Implementation'''==
==='''Initial Steps'''===
The following steps were followed to meet the project requirements as per this github page.
===='''Step 1'''====
We had to implement the StyleSheet interface for which we had to create two file: stylesheet.rs and StyleSheet.webidl and included stylesheet interface in the mod.rs file.
In the StyleSheet interface we avoided the three methods: ownerNode, parentStyleSheet and media as they could not be trivially implemented and the instructions were clear to avoid such methods.

===='''Step 2'''====
We had to implement StyleSheetList interface for which we had to create two file: stylesheetlist.rs and StyleSheetList.webidl and included stylesheetlist interface in the mod.rs file.
We used JS<Document> instead of [ArrayClass] as [ArrayClass] is not yet supported by Servo.
In the StyleSheetList interface we did not implement the getter as we do not have a list of stylesheets/scripts/dom.

===='''Step 3'''====
We had to implement a partial interface Document with an attribute as styleSheets. The declaration of the interface was done in Document.webidl and its implementation was done in document.rs file. The implementation returned a new instance of StyleSheetList referencing the current document.

===='''Class Diagram'''====

[[File:UMLinitial.png]]

==='''Subsequent Steps'''===

===='''Step 1'''====

We will be making changes in the <code>Document.rs</code> file to make the <code>stylesheets</code> member store the associated Element. We will then implement the ownerNode attribute in the StyleSheet inteface by making changes in the <code>StyleSheet.webidl</code> and <code>stylesheet.rs</code>. We would just declare <code>ownerNode</code> attribute in the .webidl and give its implementation in .rs file.

===='''Step 2'''====

We will be making a new interface named as <code>CSSStyleSheet</code>. In the <code>Document.rs</code> file, we will create a method to return the <code>CSSStyleSheet</code> from the <code>stylesheets</code> member of the Document by giving a particular index as the input.

===='''Step 3'''====

As the next step, we will be creating the <code>CSSRule</code> interface which has attributes like <code>type</code>, <code>cssText</code>, <code>parentRule</code> and <code>parentStyleSheet</code>. This interface will also have several constants like <code>STYLE_RULE</code>, <code>CHARSET_RULE</code> , <code>IMPORT_RULE, MEDIA_RULE</code>, <code>FONT_FACE_RULE</code>, <code>PAGE_RULE, MARGIN_RULE</code> and <code>NAMESPACE_RULE</code>.
This will require us to create two files: <code>CSSRule.webidl</code> and <code>cssrule.rs</code>

===='''Step 4'''====

We will be creating <code>CSSRuleList</code> interface by creating 2 files: <code>CSSRuleList.webidl</code> and <code>CSSRulelist.rs</code>. This interface will have one attribute, which is length and a getter which returns the <code>CSSRule</code> at a particular index. We will also implement <code>CSSStyleSheet.cssRules</code>

===='''Step 5'''====

We will make <code>rules</code> member of the <code>StyleSheet</code> type which contains a RefCell and implement the <code>insertRule</code> and <code>deleteRule</code> methods of <code>CSSStyleSheet</code>.

===='''Step 6'''====

We will be creating a new interface <code>CSSStyleRule</code> , by making 2 files: <code>CSSStyleRule.webidl<code> and <code>CSSStyleRule.rs</code>. The interface will contain two attributes, namely, <code>selectorText</code> and <code>CSSStyleDeclaration</code> style. The <code>cssRules</code> will be implemented to return <code>CSSStyleRule</code> values for appropriate rules.

===='''Class Diagram'''====

[[File:UMLsubs.jpg]]

=='''Design Principles'''==
In this mozilla project, we are asked to strictly follow the existing design patterns and coding conventions. The main aim of this project is to add and modify interfaces. Interfaces allow developers to follow a clean design principle wherein they do not have to program to classes. It is too easy to add a dependency on a class. In order to avoid that kind of dependency on the implementation i.e. classes, developers can program to interfaces. This type of design pattern is an architectural pattern and makes the code more modular and object oriented. Programming to an interface has a flavor of DRY principle because even if the underlying implementation changes, the handle to the implementation is an interface and that does not change. In this way, our mozilla project becomes more modular and object oriented. Servo has a utility of tests that checks the coding standards followed by Mozilla on this project. We will execute the following utility tests command.
<code>./mach test-tidy</code> Any issues encountered by executing this test can be flagged before generating the pull request. This ensures that the developers follow the coding standards.

=='''Testing'''==
Following are the steps to run all the tests:
1. Install the pre-requisites required for servo as mentioned here
2. Run the following commands
cd
git clone https://github.com/mohammed-alfatih/servo.git
cd servo
./mach build --release
'''Note''': It may take around 30 mins to build
./mach test-wpt /tests/wpt/html/dom/interfaces.html
You will see that all tests pass as expected.

'''Note''': There were no predefined test cases mentioned for our project. So now you will see 0 testcases. As far as we know there is no way to test this from UI.

=='''Conclusion'''==
We have implemented the most commonly-used portions of the CSSOM API specification to increase Servo's compatibility with existing webpages <ref>https://github.com/servo/servo/wiki/CSSOM-student-project</ref>. We have created two interfaces, StyleSheet and StyleSheetList in our initial steps. As a part of our subsequent steps, we would be adding 4 new interfaces: CSSStyleSheet, CSSRule, CSSRuleList and the CSSStyleRule interface. We have implemented only the obvious methods for these interfaces so that more advanced work can be done to make this CSSOM API fully functional keeping our work as the basis.

=='''References'''==
<references/>

CSC/ECE 517 Spring 2016 M1603 Implement Common Parts of the CSSOM API

2016-04-09T03:02:13Z

Maalbash: /* UML Diagram */

=='''Introduction'''==

Cascading Style Sheets ([https://en.wikipedia.org/wiki/Cascading_Style_Sheets CSS]) is a style sheet language used for describing the presentation of a document written in a markup language. Although most often used to set the visual style of web pages and user interfaces written in [https://en.wikipedia.org/wiki/HTML HTML] and [https://en.wikipedia.org/wiki/XHTML XHTML], the language can be applied to any [https://en.wikipedia.org/wiki/XML XML] document, including plain XML, [https://en.wikipedia.org/wiki/Scalable_Vector_Graphics SVG] and [https://en.wikipedia.org/wiki/XUL XUL], and is applicable to rendering in speech, or on other media. Along with HTML and [https://en.wikipedia.org/wiki/JavaScript JavaScript], CSS is a cornerstone technology used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications

==='''CSSOM'''===
CSSOM which is the CSS Object Model defines APIs (including generic parsing and serialization rules) for media queries, selectors, and CSS itself<ref>https://drafts.csswg.org/cssom/</ref>. The core features of the CSSOM are oriented towards providing basic capabilities to author-defined scripts to permit access to and manipulation of style related state information and processes. CSSOM aims at proving a way to access the CSS style classes and properties. One can even modify the CSS rules using this API. These changes can be targeted to affect individual elements or the whole webpage. <ref>https://github.com/servo/servo/wiki/CSSOM-student-project</ref>. CSSOM is actually a collection of all the CSS stylesheets found on a web page which is very similar to Document Object Model (DOM) but only stores collection of CSS instead of HTML. <ref>https://varvy.com/performance/cssom.html</ref>. CSSOM identifies which elements on your webpage require styling and modifies them. It is also used to optimize the speed at which webpages get loaded.
It is an integral part of the process that is used to display content on a webpage. The web browser first creates a DOM by examining the HTMLs, then creates a CSSOM by examining the CSS stylesheets. It then creates a render tree by comibining the DOM and the CSSOM and displays the webpage.<ref>https://varvy.com/performance/cssom.html</ref>.

==='''Rust'''===

We can organize different languages on a spectrum with control on one end and safety on the other. Languages like C and C++ fall on the end of the side of control, where as on the other side we have languages like Javascript, Ruby, Python, etc. What Rust does is stepping off this line. What it does is not a tradeoff between control and safety, but it provides you both the low level of control found in C and C++, and the high level of safety in JavaScript and Python. The three concepts that distinguish rust from other programming languages are: Ownership, Borrowing and lifetime. Ownership is how Rust achieves its largest goal, memory safety.<ref>https://en.wikipedia.org/wiki/Rust_(programming_language)</ref>

==='''Servo'''===

Servo is a project in [https://en.wikipedia.org/wiki/Mozilla Mozilla] research to write a parallel layout engine in Rust. It aims to achieve better parallelism, security, modularity and performance. Servo is built with Cargo, the rust package manager. It currently supports 64bit OSX, 64bit Linux, Android, and Gonk(Firefox OS).<ref>https://servo.org</ref>

=='''Project Description'''==

The project is to go through the following steps in a somewhat linear order:
*Compiling servo on a machine and making sure it runs on a specific url. Then emailing the mozilla mailing list to introduce the group.
*Creating a StyleSheet interface which represents an abstract, base style sheet. This creation requires a couple of steps :
**Adding a new IDL file (which contains specifications)
**Creating the Rust file which has implementations of the things specified in IDL.
**Listing the Rust file in mod.rs file.
*After that comes the creation of a StyleSheetList interface. Which represents an ordered collection of CSS style sheets. And basically because it's another interface, again the .webidl and .rs files need to be implemented.
*Adding the attribute <code>stylesheets</code> to the <code>Document.webidl</code>.
*In the three steps just mentioned some guidelines about implementation must be followed, like the return types of certain methods.
*Run the tests specified by the mozilla team.
*Finally updating the interfaces.html, and adding the new interface names.

The Subsequent steps are:
*making the <code>stylesheets</code> member of <code>Document</code> store the associated <code>Element</code> along with the actual implementation of <code>Stylesheet</code> and adding a member to <code>StyleSheet</code> for the associated element, and implement the <code>ownerNode</code> attribute of <code>StyleSheet</code> using this.
*create the CSSStyleSheet interface, containing an <code>Arc<Stylesheet></code> member. Add a method to <code>Document</code> that returns a new <code>CSSStyleSheet</code> instance for a particular index in the <code>stylesheets</code> member.
*creating the CSSRule interface which represents an abstract, base CSS Rule. It is done using the Webidl format.
*creating the CSSRuleList interface and implementing <code>CSSStyleSheet.cssRules</code> which is an array like object containing an ordered collection of CSS rules.
*implementing the <code>insertRule</code> and <code>deleteRule</code> methods of <code>CSSStyleSheet</code> to allow mutation of the contents of the vector in the <code>rules</code> member of the <code>Stylesheet</code>.
*creating the CSSStyleRule interface that extends the CSSRule interface and making <code>cssRules</code> return <code>CSSStyleRule</code> values for appropriate rules.

=='''Implementation'''==
==='''Initial Steps'''===
The following steps were followed to meet the project requirements as per this github page.
===='''Step 1'''====
We had to implement the StyleSheet interface for which we had to create two file: stylesheet.rs and StyleSheet.webidl and included stylesheet interface in the mod.rs file.
In the StyleSheet interface we avoided the three methods: ownerNode, parentStyleSheet and media as they could not be trivially implemented and the instructions were clear to avoid such methods.

===='''Step 2'''====
We had to implement StyleSheetList interface for which we had to create two file: stylesheetlist.rs and StyleSheetList.webidl and included stylesheetlist interface in the mod.rs file.
We used JS<Document> instead of [ArrayClass] as [ArrayClass] is not yet supported by Servo.
In the StyleSheetList interface we did not implement the getter as we do not have a list of stylesheets/scripts/dom.

===='''Step 3'''====
We had to implement a partial interface Document with an attribute as styleSheets. The declaration of the interface was done in Document.webidl and its implementation was done in document.rs file. The implementation returned a new instance of StyleSheetList referencing the current document.

===='''Class Diagram'''====

[[File:UMLinitial.png]]

==='''Subsequent Steps'''===

===='''Step 1'''====

We will be making changes in the <code>Document.rs</code> file to make the <code>stylesheets</code> member store the associated Element. We will then implement the ownerNode attribute in the StyleSheet inteface by making changes in the <code>StyleSheet.webidl</code> and <code>stylesheet.rs</code>. We would just declare <code>ownerNode</code> attribute in the .webidl and give its implementation in .rs file.

===='''Step 2'''====

We will be making a new interface named as <code>CSSStyleSheet</code>. In the <code>Document.rs</code> file, we will create a method to return the <code>CSSStyleSheet</code> from the <code>stylesheets</code> member of the Document by giving a particular index as the input.

===='''Step 3'''====

As the next step, we will be creating the <code>CSSRule</code> interface which has attributes like <code>type</code>, <code>cssText</code>, <code>parentRule</code> and <code>parentStyleSheet</code>. This interface will also have several constants like <code>STYLE_RULE</code>, <code>CHARSET_RULE</code> , <code>IMPORT_RULE, MEDIA_RULE</code>, <code>FONT_FACE_RULE</code>, <code>PAGE_RULE, MARGIN_RULE</code> and <code>NAMESPACE_RULE</code>.
This will require us to create two files: <code>CSSRule.webidl</code> and <code>cssrule.rs</code>

===='''Step 4'''====

We will be creating <code>CSSRuleList</code> interface by creating 2 files: <code>CSSRuleList.webidl</code> and <code>CSSRulelist.rs</code>. This interface will have one attribute, which is length and a getter which returns the <code>CSSRule</code> at a particular index. We will also implement <code>CSSStyleSheet.cssRules</code>

===='''Step 5'''====

We will make <code>rules</code> member of the <code>StyleSheet</code> type which contains a RefCell and implement the <code>insertRule</code> and <code>deleteRule</code> methods of <code>CSSStyleSheet</code>.

===='''Step 6'''====

We will be creating a new interface <code>CSSStyleRule</code> , by making 2 files: <code>CSSStyleRule.webidl<code> and <code>CSSStyleRule.rs</code>. The interface will contain two attributes, namely, <code>selectorText</code> and <code>CSSStyleDeclaration</code> style. The <code>cssRules</code> will be implemented to return <code>CSSStyleRule</code> values for appropriate rules.

=='''Design Principles'''==
In this mozilla project, we are asked to strictly follow the existing design patterns and coding conventions. The main aim of this project is to add and modify interfaces. Interfaces allow developers to follow a clean design principle wherein they do not have to program to classes. It is too easy to add a dependency on a class. In order to avoid that kind of dependency on the implementation i.e. classes, developers can program to interfaces. This type of design pattern is an architectural pattern and makes the code more modular and object oriented. Programming to an interface has a flavor of DRY principle because even if the underlying implementation changes, the handle to the implementation is an interface and that does not change. In this way, our mozilla project becomes more modular and object oriented. Servo has a utility of tests that checks the coding standards followed by Mozilla on this project. We will execute the following utility tests command.
<code>./mach test-tidy</code> Any issues encountered by executing this test can be flagged before generating the pull request. This ensures that the developers follow the coding standards.

=='''Testing'''==
Following are the steps to run all the tests:
1. Install the pre-requisites required for servo as mentioned here
2. Run the following commands
cd
git clone https://github.com/mohammed-alfatih/servo.git
cd servo
./mach build --release
'''Note''': It may take around 30 mins to build
./mach test-wpt /tests/wpt/html/dom/interfaces.html
You will see that all tests pass as expected.

'''Note''': There were no predefined test cases mentioned for our project. So now you will see 0 testcases. As far as we know there is no way to test this from UI.

=='''Conclusion'''==
We have implemented the most commonly-used portions of the CSSOM API specification to increase Servo's compatibility with existing webpages <ref>https://github.com/servo/servo/wiki/CSSOM-student-project</ref>. We have created two interfaces, StyleSheet and StyleSheetList in our initial steps. As a part of our subsequent steps, we would be adding 4 new interfaces: CSSStyleSheet, CSSRule, CSSRuleList and the CSSStyleRule interface. We have implemented only the obvious methods for these interfaces so that more advanced work can be done to make this CSSOM API fully functional keeping our work as the basis.

=='''References'''==
<references/>

CSC/ECE 517 Spring 2016 M1603 Implement Common Parts of the CSSOM API

2016-04-09T02:56:54Z

Maalbash: /* Conclusion */

=='''Introduction'''==

Cascading Style Sheets ([https://en.wikipedia.org/wiki/Cascading_Style_Sheets CSS]) is a style sheet language used for describing the presentation of a document written in a markup language. Although most often used to set the visual style of web pages and user interfaces written in [https://en.wikipedia.org/wiki/HTML HTML] and [https://en.wikipedia.org/wiki/XHTML XHTML], the language can be applied to any [https://en.wikipedia.org/wiki/XML XML] document, including plain XML, [https://en.wikipedia.org/wiki/Scalable_Vector_Graphics SVG] and [https://en.wikipedia.org/wiki/XUL XUL], and is applicable to rendering in speech, or on other media. Along with HTML and [https://en.wikipedia.org/wiki/JavaScript JavaScript], CSS is a cornerstone technology used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications

==='''CSSOM'''===
CSSOM which is the CSS Object Model defines APIs (including generic parsing and serialization rules) for media queries, selectors, and CSS itself<ref>https://drafts.csswg.org/cssom/</ref>. The core features of the CSSOM are oriented towards providing basic capabilities to author-defined scripts to permit access to and manipulation of style related state information and processes. CSSOM aims at proving a way to access the CSS style classes and properties. One can even modify the CSS rules using this API. These changes can be targeted to affect individual elements or the whole webpage. <ref>https://github.com/servo/servo/wiki/CSSOM-student-project</ref>. CSSOM is actually a collection of all the CSS stylesheets found on a web page which is very similar to Document Object Model (DOM) but only stores collection of CSS instead of HTML. <ref>https://varvy.com/performance/cssom.html</ref>. CSSOM identifies which elements on your webpage require styling and modifies them. It is also used to optimize the speed at which webpages get loaded.
It is an integral part of the process that is used to display content on a webpage. The web browser first creates a DOM by examining the HTMLs, then creates a CSSOM by examining the CSS stylesheets. It then creates a render tree by comibining the DOM and the CSSOM and displays the webpage.<ref>https://varvy.com/performance/cssom.html</ref>.

==='''Rust'''===

We can organize different languages on a spectrum with control on one end and safety on the other. Languages like C and C++ fall on the end of the side of control, where as on the other side we have languages like Javascript, Ruby, Python, etc. What Rust does is stepping off this line. What it does is not a tradeoff between control and safety, but it provides you both the low level of control found in C and C++, and the high level of safety in JavaScript and Python. The three concepts that distinguish rust from other programming languages are: Ownership, Borrowing and lifetime. Ownership is how Rust achieves its largest goal, memory safety.<ref>https://en.wikipedia.org/wiki/Rust_(programming_language)</ref>

==='''Servo'''===

Servo is a project in [https://en.wikipedia.org/wiki/Mozilla Mozilla] research to write a parallel layout engine in Rust. It aims to achieve better parallelism, security, modularity and performance. Servo is built with Cargo, the rust package manager. It currently supports 64bit OSX, 64bit Linux, Android, and Gonk(Firefox OS).<ref>https://servo.org</ref>

=='''Project Description'''==

The project is to go through the following steps in a somewhat linear order:
*Compiling servo on a machine and making sure it runs on a specific url. Then emailing the mozilla mailing list to introduce the group.
*Creating a StyleSheet interface which represents an abstract, base style sheet. This creation requires a couple of steps :
**Adding a new IDL file (which contains specifications)
**Creating the Rust file which has implementations of the things specified in IDL.
**Listing the Rust file in mod.rs file.
*After that comes the creation of a StyleSheetList interface. Which represents an ordered collection of CSS style sheets. And basically because it's another interface, again the .webidl and .rs files need to be implemented.
*Adding the attribute <code>stylesheets</code> to the <code>Document.webidl</code>.
*In the three steps just mentioned some guidelines about implementation must be followed, like the return types of certain methods.
*Run the tests specified by the mozilla team.
*Finally updating the interfaces.html, and adding the new interface names.

The Subsequent steps are:
*making the <code>stylesheets</code> member of <code>Document</code> store the associated <code>Element</code> along with the actual implementation of <code>Stylesheet</code> and adding a member to <code>StyleSheet</code> for the associated element, and implement the <code>ownerNode</code> attribute of <code>StyleSheet</code> using this.
*create the CSSStyleSheet interface, containing an <code>Arc<Stylesheet></code> member. Add a method to <code>Document</code> that returns a new <code>CSSStyleSheet</code> instance for a particular index in the <code>stylesheets</code> member.
*creating the CSSRule interface which represents an abstract, base CSS Rule. It is done using the Webidl format.
*creating the CSSRuleList interface and implementing <code>CSSStyleSheet.cssRules</code> which is an array like object containing an ordered collection of CSS rules.
*implementing the <code>insertRule</code> and <code>deleteRule</code> methods of <code>CSSStyleSheet</code> to allow mutation of the contents of the vector in the <code>rules</code> member of the <code>Stylesheet</code>.
*creating the CSSStyleRule interface that extends the CSSRule interface and making <code>cssRules</code> return <code>CSSStyleRule</code> values for appropriate rules.

=='''Implementation'''==
==='''Initial Steps'''===
The following steps were followed to meet the project requirements as per this github page.
===='''Step 1'''====
We had to implement the StyleSheet interface for which we had to create two file: stylesheet.rs and StyleSheet.webidl and included stylesheet interface in the mod.rs file.
In the StyleSheet interface we avoided the three methods: ownerNode, parentStyleSheet and media as they could not be trivially implemented and the instructions were clear to avoid such methods.

===='''Step 2'''====
We had to implement StyleSheetList interface for which we had to create two file: stylesheetlist.rs and StyleSheetList.webidl and included stylesheetlist interface in the mod.rs file.
We used JS<Document> instead of [ArrayClass] as [ArrayClass] is not yet supported by Servo.
In the StyleSheetList interface we did not implement the getter as we do not have a list of stylesheets/scripts/dom.

===='''Step 3'''====
We had to implement a partial interface Document with an attribute as styleSheets. The declaration of the interface was done in Document.webidl and its implementation was done in document.rs file. The implementation returned a new instance of StyleSheetList referencing the current document.

===='''UML Diagram'''====

[[File:UMLinitial.png]]

==='''Subsequent Steps'''===

===='''Step 1'''====

We will be making changes in the <code>Document.rs</code> file to make the <code>stylesheets</code> member store the associated Element. We will then implement the ownerNode attribute in the StyleSheet inteface by making changes in the <code>StyleSheet.webidl</code> and <code>stylesheet.rs</code>. We would just declare <code>ownerNode</code> attribute in the .webidl and give its implementation in .rs file.

===='''Step 2'''====

We will be making a new interface named as <code>CSSStyleSheet</code>. In the <code>Document.rs</code> file, we will create a method to return the <code>CSSStyleSheet</code> from the <code>stylesheets</code> member of the Document by giving a particular index as the input.

===='''Step 3'''====

As the next step, we will be creating the <code>CSSRule</code> interface which has attributes like <code>type</code>, <code>cssText</code>, <code>parentRule</code> and <code>parentStyleSheet</code>. This interface will also have several constants like <code>STYLE_RULE</code>, <code>CHARSET_RULE</code> , <code>IMPORT_RULE, MEDIA_RULE</code>, <code>FONT_FACE_RULE</code>, <code>PAGE_RULE, MARGIN_RULE</code> and <code>NAMESPACE_RULE</code>.
This will require us to create two files: <code>CSSRule.webidl</code> and <code>cssrule.rs</code>

===='''Step 4'''====

We will be creating <code>CSSRuleList</code> interface by creating 2 files: <code>CSSRuleList.webidl</code> and <code>CSSRulelist.rs</code>. This interface will have one attribute, which is length and a getter which returns the <code>CSSRule</code> at a particular index. We will also implement <code>CSSStyleSheet.cssRules</code>

===='''Step 5'''====

We will make <code>rules</code> member of the <code>StyleSheet</code> type which contains a RefCell and implement the <code>insertRule</code> and <code>deleteRule</code> methods of <code>CSSStyleSheet</code>.

===='''Step 6'''====

We will be creating a new interface <code>CSSStyleRule</code> , by making 2 files: <code>CSSStyleRule.webidl<code> and <code>CSSStyleRule.rs</code>. The interface will contain two attributes, namely, <code>selectorText</code> and <code>CSSStyleDeclaration</code> style. The <code>cssRules</code> will be implemented to return <code>CSSStyleRule</code> values for appropriate rules.

=='''Design Principles'''==
In this mozilla project, we are asked to strictly follow the existing design patterns and coding conventions. The main aim of this project is to add and modify interfaces. Interfaces allow developers to follow a clean design principle wherein they do not have to program to classes. It is too easy to add a dependency on a class. In order to avoid that kind of dependency on the implementation i.e. classes, developers can program to interfaces. This type of design pattern is an architectural pattern and makes the code more modular and object oriented. Programming to an interface has a flavor of DRY principle because even if the underlying implementation changes, the handle to the implementation is an interface and that does not change. In this way, our mozilla project becomes more modular and object oriented. Servo has a utility of tests that checks the coding standards followed by Mozilla on this project. We will execute the following utility tests command.
<code>./mach test-tidy</code> Any issues encountered by executing this test can be flagged before generating the pull request. This ensures that the developers follow the coding standards.

=='''Testing'''==
Following are the steps to run all the tests:
1. Install the pre-requisites required for servo as mentioned here
2. Run the following commands
cd
git clone https://github.com/mohammed-alfatih/servo.git
cd servo
./mach build --release
'''Note''': It may take around 30 mins to build
./mach test-wpt /tests/wpt/html/dom/interfaces.html
You will see that all tests pass as expected.

'''Note''': There were no predefined test cases mentioned for our project. So now you will see 0 testcases. As far as we know there is no way to test this from UI.

=='''Conclusion'''==
We have implemented the most commonly-used portions of the CSSOM API specification to increase Servo's compatibility with existing webpages <ref>https://github.com/servo/servo/wiki/CSSOM-student-project</ref>. We have created two interfaces, StyleSheet and StyleSheetList in our initial steps. As a part of our subsequent steps, we would be adding 4 new interfaces: CSSStyleSheet, CSSRule, CSSRuleList and the CSSStyleRule interface. We have implemented only the obvious methods for these interfaces so that more advanced work can be done to make this CSSOM API fully functional keeping our work as the basis.

=='''References'''==
<references/>

CSC/ECE 517 Spring 2016 M1603 Implement Common Parts of the CSSOM API

2016-04-09T02:44:37Z

Maalbash: /* UML Diagram */

=='''Introduction'''==

Cascading Style Sheets ([https://en.wikipedia.org/wiki/Cascading_Style_Sheets CSS]) is a style sheet language used for describing the presentation of a document written in a markup language. Although most often used to set the visual style of web pages and user interfaces written in [https://en.wikipedia.org/wiki/HTML HTML] and [https://en.wikipedia.org/wiki/XHTML XHTML], the language can be applied to any [https://en.wikipedia.org/wiki/XML XML] document, including plain XML, [https://en.wikipedia.org/wiki/Scalable_Vector_Graphics SVG] and [https://en.wikipedia.org/wiki/XUL XUL], and is applicable to rendering in speech, or on other media. Along with HTML and [https://en.wikipedia.org/wiki/JavaScript JavaScript], CSS is a cornerstone technology used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications

==='''CSSOM'''===
CSSOM which is the CSS Object Model defines APIs (including generic parsing and serialization rules) for media queries, selectors, and CSS itself<ref>https://drafts.csswg.org/cssom/</ref>. The core features of the CSSOM are oriented towards providing basic capabilities to author-defined scripts to permit access to and manipulation of style related state information and processes. CSSOM aims at proving a way to access the CSS style classes and properties. One can even modify the CSS rules using this API. These changes can be targeted to affect individual elements or the whole webpage. <ref>https://github.com/servo/servo/wiki/CSSOM-student-project</ref>. CSSOM is actually a collection of all the CSS stylesheets found on a web page which is very similar to Document Object Model (DOM) but only stores collection of CSS instead of HTML. <ref>https://varvy.com/performance/cssom.html</ref>. CSSOM identifies which elements on your webpage require styling and modifies them. It is also used to optimize the speed at which webpages get loaded.
It is an integral part of the process that is used to display content on a webpage. The web browser first creates a DOM by examining the HTMLs, then creates a CSSOM by examining the CSS stylesheets. It then creates a render tree by comibining the DOM and the CSSOM and displays the webpage.<ref>https://varvy.com/performance/cssom.html</ref>.

==='''Rust'''===

We can organize different languages on a spectrum with control on one end and safety on the other. Languages like C and C++ fall on the end of the side of control, where as on the other side we have languages like Javascript, Ruby, Python, etc. What Rust does is stepping off this line. What it does is not a tradeoff between control and safety, but it provides you both the low level of control found in C and C++, and the high level of safety in JavaScript and Python. The three concepts that distinguish rust from other programming languages are: Ownership, Borrowing and lifetime. Ownership is how Rust achieves its largest goal, memory safety.<ref>https://en.wikipedia.org/wiki/Rust_(programming_language)</ref>

==='''Servo'''===

Servo is a project in [https://en.wikipedia.org/wiki/Mozilla Mozilla] research to write a parallel layout engine in Rust. It aims to achieve better parallelism, security, modularity and performance. Servo is built with Cargo, the rust package manager. It currently supports 64bit OSX, 64bit Linux, Android, and Gonk(Firefox OS).<ref>https://servo.org</ref>

=='''Project Description'''==

The project is to go through the following steps in a somewhat linear order:
*Compiling servo on a machine and making sure it runs on a specific url. Then emailing the mozilla mailing list to introduce the group.
*Creating a StyleSheet interface which represents an abstract, base style sheet. This creation requires a couple of steps :
**Adding a new IDL file (which contains specifications)
**Creating the Rust file which has implementations of the things specified in IDL.
**Listing the Rust file in mod.rs file.
*After that comes the creation of a StyleSheetList interface. Which represents an ordered collection of CSS style sheets. And basically because it's another interface, again the .webidl and .rs files need to be implemented.
*Adding the attribute <code>stylesheets</code> to the <code>Document.webidl</code>.
*In the three steps just mentioned some guidelines about implementation must be followed, like the return types of certain methods.
*Run the tests specified by the mozilla team.
*Finally updating the interfaces.html, and adding the new interface names.

The Subsequent steps are:
*making the <code>stylesheets</code> member of <code>Document</code> store the associated <code>Element</code> along with the actual implementation of <code>Stylesheet</code> and adding a member to <code>StyleSheet</code> for the associated element, and implement the <code>ownerNode</code> attribute of <code>StyleSheet</code> using this.
*create the CSSStyleSheet interface, containing an <code>Arc<Stylesheet></code> member. Add a method to <code>Document</code> that returns a new <code>CSSStyleSheet</code> instance for a particular index in the <code>stylesheets</code> member.
*creating the CSSRule interface which represents an abstract, base CSS Rule. It is done using the Webidl format.
*creating the CSSRuleList interface and implementing <code>CSSStyleSheet.cssRules</code> which is an array like object containing an ordered collection of CSS rules.
*implementing the <code>insertRule</code> and <code>deleteRule</code> methods of <code>CSSStyleSheet</code> to allow mutation of the contents of the vector in the <code>rules</code> member of the <code>Stylesheet</code>.
*creating the CSSStyleRule interface that extends the CSSRule interface and making <code>cssRules</code> return <code>CSSStyleRule</code> values for appropriate rules.

=='''Implementation'''==
==='''Initial Steps'''===
The following steps were followed to meet the project requirements as per this github page.
===='''Step 1'''====
We had to implement the StyleSheet interface for which we had to create two file: stylesheet.rs and StyleSheet.webidl and included stylesheet interface in the mod.rs file.
In the StyleSheet interface we avoided the three methods: ownerNode, parentStyleSheet and media as they could not be trivially implemented and the instructions were clear to avoid such methods.

===='''Step 2'''====
We had to implement StyleSheetList interface for which we had to create two file: stylesheetlist.rs and StyleSheetList.webidl and included stylesheetlist interface in the mod.rs file.
We used JS<Document> instead of [ArrayClass] as [ArrayClass] is not yet supported by Servo.
In the StyleSheetList interface we did not implement the getter as we do not have a list of stylesheets/scripts/dom.

===='''Step 3'''====
We had to implement a partial interface Document with an attribute as styleSheets. The declaration of the interface was done in Document.webidl and its implementation was done in document.rs file. The implementation returned a new instance of StyleSheetList referencing the current document.

===='''UML Diagram'''====

[[File:UMLinitial.png]]

==='''Subsequent Steps'''===

===='''Step 1'''====

We will be making changes in the <code>Document.rs</code> file to make the <code>stylesheets</code> member store the associated Element. We will then implement the ownerNode attribute in the StyleSheet inteface by making changes in the <code>StyleSheet.webidl</code> and <code>stylesheet.rs</code>. We would just declare <code>ownerNode</code> attribute in the .webidl and give its implementation in .rs file.

===='''Step 2'''====

We will be making a new interface named as <code>CSSStyleSheet</code>. In the <code>Document.rs</code> file, we will create a method to return the <code>CSSStyleSheet</code> from the <code>stylesheets</code> member of the Document by giving a particular index as the input.

===='''Step 3'''====

As the next step, we will be creating the <code>CSSRule</code> interface which has attributes like <code>type</code>, <code>cssText</code>, <code>parentRule</code> and <code>parentStyleSheet</code>. This interface will also have several constants like <code>STYLE_RULE</code>, <code>CHARSET_RULE</code> , <code>IMPORT_RULE, MEDIA_RULE</code>, <code>FONT_FACE_RULE</code>, <code>PAGE_RULE, MARGIN_RULE</code> and <code>NAMESPACE_RULE</code>.
This will require us to create two files: <code>CSSRule.webidl</code> and <code>cssrule.rs</code>

===='''Step 4'''====

We will be creating <code>CSSRuleList</code> interface by creating 2 files: <code>CSSRuleList.webidl</code> and <code>CSSRulelist.rs</code>. This interface will have one attribute, which is length and a getter which returns the <code>CSSRule</code> at a particular index. We will also implement <code>CSSStyleSheet.cssRules</code>

===='''Step 5'''====

We will make <code>rules</code> member of the <code>StyleSheet</code> type which contains a RefCell and implement the <code>insertRule</code> and <code>deleteRule</code> methods of <code>CSSStyleSheet</code>.

===='''Step 6'''====

We will be creating a new interface <code>CSSStyleRule</code> , by making 2 files: <code>CSSStyleRule.webidl<code> and <code>CSSStyleRule.rs</code>. The interface will contain two attributes, namely, <code>selectorText</code> and <code>CSSStyleDeclaration</code> style. The <code>cssRules</code> will be implemented to return <code>CSSStyleRule</code> values for appropriate rules.

=='''Design Principles'''==
In this mozilla project, we are asked to strictly follow the existing design patterns and coding conventions. The main aim of this project is to add and modify interfaces. Interfaces allow developers to follow a clean design principle wherein they do not have to program to classes. It is too easy to add a dependency on a class. In order to avoid that kind of dependency on the implementation i.e. classes, developers can program to interfaces. This type of design pattern is an architectural pattern and makes the code more modular and object oriented. Programming to an interface has a flavor of DRY principle because even if the underlying implementation changes, the handle to the implementation is an interface and that does not change. In this way, our mozilla project becomes more modular and object oriented. Servo has a utility of tests that checks the coding standards followed by Mozilla on this project. We will execute the following utility tests command.
<code>./mach test-tidy</code> Any issues encountered by executing this test can be flagged before generating the pull request. This ensures that the developers follow the coding standards.

=='''Testing'''==
Following are the steps to run all the tests:
1. Install the pre-requisites required for servo as mentioned here
2. Run the following commands
cd
git clone https://github.com/mohammed-alfatih/servo.git
cd servo
./mach build --release
'''Note''': It may take around 30 mins to build
./mach test-wpt /tests/wpt/html/dom/interfaces.html
You will see that all tests pass as expected.

'''Note''': There were no predefined test cases mentioned for our project. So now you will see 0 testcases. As far as we know there is no way to test this from UI.

=='''Conclusion'''==
We have tried to implement the most commonly-used portions of the CSSOM API specification to increase Servo's compatibility with existing webpages <ref>https://github.com/servo/servo/wiki/CSSOM-student-project</ref>. We have created two interfaces, StyleSheet and StyleSheetList in our initial steps. As a part of our subsequent steps, we would be adding 4 new interfaces: CSSStyleSheet, CSSRule, CSSRuleList and the CSSStyleRule interface. We have implemented only the obvious methods for these interfaces so that more advanced work can be done to make this CSSOM API fully functional keeping our work as the basis.

=='''References'''==
<references/>

CSC/ECE 517 Spring 2016 M1603 Implement Common Parts of the CSSOM API

2016-04-09T02:43:39Z

Maalbash:

=='''Introduction'''==

Cascading Style Sheets ([https://en.wikipedia.org/wiki/Cascading_Style_Sheets CSS]) is a style sheet language used for describing the presentation of a document written in a markup language. Although most often used to set the visual style of web pages and user interfaces written in [https://en.wikipedia.org/wiki/HTML HTML] and [https://en.wikipedia.org/wiki/XHTML XHTML], the language can be applied to any [https://en.wikipedia.org/wiki/XML XML] document, including plain XML, [https://en.wikipedia.org/wiki/Scalable_Vector_Graphics SVG] and [https://en.wikipedia.org/wiki/XUL XUL], and is applicable to rendering in speech, or on other media. Along with HTML and [https://en.wikipedia.org/wiki/JavaScript JavaScript], CSS is a cornerstone technology used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications

==='''CSSOM'''===
CSSOM which is the CSS Object Model defines APIs (including generic parsing and serialization rules) for media queries, selectors, and CSS itself<ref>https://drafts.csswg.org/cssom/</ref>. The core features of the CSSOM are oriented towards providing basic capabilities to author-defined scripts to permit access to and manipulation of style related state information and processes. CSSOM aims at proving a way to access the CSS style classes and properties. One can even modify the CSS rules using this API. These changes can be targeted to affect individual elements or the whole webpage. <ref>https://github.com/servo/servo/wiki/CSSOM-student-project</ref>. CSSOM is actually a collection of all the CSS stylesheets found on a web page which is very similar to Document Object Model (DOM) but only stores collection of CSS instead of HTML. <ref>https://varvy.com/performance/cssom.html</ref>. CSSOM identifies which elements on your webpage require styling and modifies them. It is also used to optimize the speed at which webpages get loaded.
It is an integral part of the process that is used to display content on a webpage. The web browser first creates a DOM by examining the HTMLs, then creates a CSSOM by examining the CSS stylesheets. It then creates a render tree by comibining the DOM and the CSSOM and displays the webpage.<ref>https://varvy.com/performance/cssom.html</ref>.

==='''Rust'''===

We can organize different languages on a spectrum with control on one end and safety on the other. Languages like C and C++ fall on the end of the side of control, where as on the other side we have languages like Javascript, Ruby, Python, etc. What Rust does is stepping off this line. What it does is not a tradeoff between control and safety, but it provides you both the low level of control found in C and C++, and the high level of safety in JavaScript and Python. The three concepts that distinguish rust from other programming languages are: Ownership, Borrowing and lifetime. Ownership is how Rust achieves its largest goal, memory safety.<ref>https://en.wikipedia.org/wiki/Rust_(programming_language)</ref>

==='''Servo'''===

Servo is a project in [https://en.wikipedia.org/wiki/Mozilla Mozilla] research to write a parallel layout engine in Rust. It aims to achieve better parallelism, security, modularity and performance. Servo is built with Cargo, the rust package manager. It currently supports 64bit OSX, 64bit Linux, Android, and Gonk(Firefox OS).<ref>https://servo.org</ref>

=='''Project Description'''==

The project is to go through the following steps in a somewhat linear order:
*Compiling servo on a machine and making sure it runs on a specific url. Then emailing the mozilla mailing list to introduce the group.
*Creating a StyleSheet interface which represents an abstract, base style sheet. This creation requires a couple of steps :
**Adding a new IDL file (which contains specifications)
**Creating the Rust file which has implementations of the things specified in IDL.
**Listing the Rust file in mod.rs file.
*After that comes the creation of a StyleSheetList interface. Which represents an ordered collection of CSS style sheets. And basically because it's another interface, again the .webidl and .rs files need to be implemented.
*Adding the attribute <code>stylesheets</code> to the <code>Document.webidl</code>.
*In the three steps just mentioned some guidelines about implementation must be followed, like the return types of certain methods.
*Run the tests specified by the mozilla team.
*Finally updating the interfaces.html, and adding the new interface names.

The Subsequent steps are:
*making the <code>stylesheets</code> member of <code>Document</code> store the associated <code>Element</code> along with the actual implementation of <code>Stylesheet</code> and adding a member to <code>StyleSheet</code> for the associated element, and implement the <code>ownerNode</code> attribute of <code>StyleSheet</code> using this.
*create the CSSStyleSheet interface, containing an <code>Arc<Stylesheet></code> member. Add a method to <code>Document</code> that returns a new <code>CSSStyleSheet</code> instance for a particular index in the <code>stylesheets</code> member.
*creating the CSSRule interface which represents an abstract, base CSS Rule. It is done using the Webidl format.
*creating the CSSRuleList interface and implementing <code>CSSStyleSheet.cssRules</code> which is an array like object containing an ordered collection of CSS rules.
*implementing the <code>insertRule</code> and <code>deleteRule</code> methods of <code>CSSStyleSheet</code> to allow mutation of the contents of the vector in the <code>rules</code> member of the <code>Stylesheet</code>.
*creating the CSSStyleRule interface that extends the CSSRule interface and making <code>cssRules</code> return <code>CSSStyleRule</code> values for appropriate rules.

=='''Implementation'''==
==='''Initial Steps'''===
The following steps were followed to meet the project requirements as per this github page.
===='''Step 1'''====
We had to implement the StyleSheet interface for which we had to create two file: stylesheet.rs and StyleSheet.webidl and included stylesheet interface in the mod.rs file.
In the StyleSheet interface we avoided the three methods: ownerNode, parentStyleSheet and media as they could not be trivially implemented and the instructions were clear to avoid such methods.

===='''Step 2'''====
We had to implement StyleSheetList interface for which we had to create two file: stylesheetlist.rs and StyleSheetList.webidl and included stylesheetlist interface in the mod.rs file.
We used JS<Document> instead of [ArrayClass] as [ArrayClass] is not yet supported by Servo.
In the StyleSheetList interface we did not implement the getter as we do not have a list of stylesheets/scripts/dom.

===='''Step 3'''====
We had to implement a partial interface Document with an attribute as styleSheets. The declaration of the interface was done in Document.webidl and its implementation was done in document.rs file. The implementation returned a new instance of StyleSheetList referencing the current document.

==='''UML Diagram'''===

[[File:UMLinitial.png]]

==='''Subsequent Steps'''===

===='''Step 1'''====

We will be making changes in the <code>Document.rs</code> file to make the <code>stylesheets</code> member store the associated Element. We will then implement the ownerNode attribute in the StyleSheet inteface by making changes in the <code>StyleSheet.webidl</code> and <code>stylesheet.rs</code>. We would just declare <code>ownerNode</code> attribute in the .webidl and give its implementation in .rs file.

===='''Step 2'''====

We will be making a new interface named as <code>CSSStyleSheet</code>. In the <code>Document.rs</code> file, we will create a method to return the <code>CSSStyleSheet</code> from the <code>stylesheets</code> member of the Document by giving a particular index as the input.

===='''Step 3'''====

As the next step, we will be creating the <code>CSSRule</code> interface which has attributes like <code>type</code>, <code>cssText</code>, <code>parentRule</code> and <code>parentStyleSheet</code>. This interface will also have several constants like <code>STYLE_RULE</code>, <code>CHARSET_RULE</code> , <code>IMPORT_RULE, MEDIA_RULE</code>, <code>FONT_FACE_RULE</code>, <code>PAGE_RULE, MARGIN_RULE</code> and <code>NAMESPACE_RULE</code>.
This will require us to create two files: <code>CSSRule.webidl</code> and <code>cssrule.rs</code>

===='''Step 4'''====

We will be creating <code>CSSRuleList</code> interface by creating 2 files: <code>CSSRuleList.webidl</code> and <code>CSSRulelist.rs</code>. This interface will have one attribute, which is length and a getter which returns the <code>CSSRule</code> at a particular index. We will also implement <code>CSSStyleSheet.cssRules</code>

===='''Step 5'''====

We will make <code>rules</code> member of the <code>StyleSheet</code> type which contains a RefCell and implement the <code>insertRule</code> and <code>deleteRule</code> methods of <code>CSSStyleSheet</code>.

===='''Step 6'''====

We will be creating a new interface <code>CSSStyleRule</code> , by making 2 files: <code>CSSStyleRule.webidl<code> and <code>CSSStyleRule.rs</code>. The interface will contain two attributes, namely, <code>selectorText</code> and <code>CSSStyleDeclaration</code> style. The <code>cssRules</code> will be implemented to return <code>CSSStyleRule</code> values for appropriate rules.

=='''Design Principles'''==
In this mozilla project, we are asked to strictly follow the existing design patterns and coding conventions. The main aim of this project is to add and modify interfaces. Interfaces allow developers to follow a clean design principle wherein they do not have to program to classes. It is too easy to add a dependency on a class. In order to avoid that kind of dependency on the implementation i.e. classes, developers can program to interfaces. This type of design pattern is an architectural pattern and makes the code more modular and object oriented. Programming to an interface has a flavor of DRY principle because even if the underlying implementation changes, the handle to the implementation is an interface and that does not change. In this way, our mozilla project becomes more modular and object oriented. Servo has a utility of tests that checks the coding standards followed by Mozilla on this project. We will execute the following utility tests command.
<code>./mach test-tidy</code> Any issues encountered by executing this test can be flagged before generating the pull request. This ensures that the developers follow the coding standards.

=='''Testing'''==
Following are the steps to run all the tests:
1. Install the pre-requisites required for servo as mentioned here
2. Run the following commands
cd
git clone https://github.com/mohammed-alfatih/servo.git
cd servo
./mach build --release
'''Note''': It may take around 30 mins to build
./mach test-wpt /tests/wpt/html/dom/interfaces.html
You will see that all tests pass as expected.

'''Note''': There were no predefined test cases mentioned for our project. So now you will see 0 testcases. As far as we know there is no way to test this from UI.

=='''Conclusion'''==
We have tried to implement the most commonly-used portions of the CSSOM API specification to increase Servo's compatibility with existing webpages <ref>https://github.com/servo/servo/wiki/CSSOM-student-project</ref>. We have created two interfaces, StyleSheet and StyleSheetList in our initial steps. As a part of our subsequent steps, we would be adding 4 new interfaces: CSSStyleSheet, CSSRule, CSSRuleList and the CSSStyleRule interface. We have implemented only the obvious methods for these interfaces so that more advanced work can be done to make this CSSOM API fully functional keeping our work as the basis.

=='''References'''==
<references/>

CSC/ECE 517 Spring 2016/Implement Common Parts of the CSSOM API

2016-04-09T02:42:48Z

Maalbash: /* UML Diagram */

=='''Introduction'''==

Cascading Style Sheets ([https://en.wikipedia.org/wiki/Cascading_Style_Sheets CSS]) is a style sheet language used for describing the presentation of a document written in a markup language. Although most often used to set the visual style of web pages and user interfaces written in [https://en.wikipedia.org/wiki/HTML HTML] and [https://en.wikipedia.org/wiki/XHTML XHTML], the language can be applied to any [https://en.wikipedia.org/wiki/XML XML] document, including plain XML, [https://en.wikipedia.org/wiki/Scalable_Vector_Graphics SVG] and [https://en.wikipedia.org/wiki/XUL XUL], and is applicable to rendering in speech, or on other media. Along with HTML and [https://en.wikipedia.org/wiki/JavaScript JavaScript], CSS is a cornerstone technology used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications

==='''CSSOM'''===
CSSOM which is the CSS Object Model defines APIs (including generic parsing and serialization rules) for media queries, selectors, and CSS itself<ref>https://drafts.csswg.org/cssom/</ref>. The core features of the CSSOM are oriented towards providing basic capabilities to author-defined scripts to permit access to and manipulation of style related state information and processes. CSSOM aims at proving a way to access the CSS style classes and properties. One can even modify the CSS rules using this API. These changes can be targeted to affect individual elements or the whole webpage. <ref>https://github.com/servo/servo/wiki/CSSOM-student-project</ref>. CSSOM is actually a collection of all the CSS stylesheets found on a web page which is very similar to Document Object Model (DOM) but only stores collection of CSS instead of HTML. <ref>https://varvy.com/performance/cssom.html</ref>. CSSOM identifies which elements on your webpage require styling and modifies them. It is also used to optimize the speed at which webpages get loaded.
It is an integral part of the process that is used to display content on a webpage. The web browser first creates a DOM by examining the HTMLs, then creates a CSSOM by examining the CSS stylesheets. It then creates a render tree by comibining the DOM and the CSSOM and displays the webpage.<ref>https://varvy.com/performance/cssom.html</ref>.

==='''Rust'''===

We can organize different languages on a spectrum with control on one end and safety on the other. Languages like C and C++ fall on the end of the side of control, where as on the other side we have languages like Javascript, Ruby, Python, etc. What Rust does is stepping off this line. What it does is not a tradeoff between control and safety, but it provides you both the low level of control found in C and C++, and the high level of safety in JavaScript and Python. The three concepts that distinguish rust from other programming languages are: Ownership, Borrowing and lifetime. Ownership is how Rust achieves its largest goal, memory safety.<ref>https://en.wikipedia.org/wiki/Rust_(programming_language)</ref>

==='''Servo'''===

Servo is a project in [https://en.wikipedia.org/wiki/Mozilla Mozilla] research to write a parallel layout engine in Rust. It aims to achieve better parallelism, security, modularity and performance. Servo is built with Cargo, the rust package manager. It currently supports 64bit OSX, 64bit Linux, Android, and Gonk(Firefox OS).<ref>https://servo.org</ref>

=='''Project Description'''==

The project is to go through the following steps in a somewhat linear order:
*Compiling servo on a machine and making sure it runs on a specific url. Then emailing the mozilla mailing list to introduce the group.
*Creating a StyleSheet interface which represents an abstract, base style sheet. This creation requires a couple of steps :
**Adding a new IDL file (which contains specifications)
**Creating the Rust file which has implementations of the things specified in IDL.
**Listing the Rust file in mod.rs file.
*After that comes the creation of a StyleSheetList interface. Which represents an ordered collection of CSS style sheets. And basically because it's another interface, again the .webidl and .rs files need to be implemented.
*Adding the attribute <code>stylesheets</code> to the <code>Document.webidl</code>.
*In the three steps just mentioned some guidelines about implementation must be followed, like the return types of certain methods.
*Run the tests specified by the mozilla team.
*Finally updating the interfaces.html, and adding the new interface names.

The Subsequent steps are:
*making the <code>stylesheets</code> member of <code>Document</code> store the associated <code>Element</code> along with the actual implementation of <code>Stylesheet</code> and adding a member to <code>StyleSheet</code> for the associated element, and implement the <code>ownerNode</code> attribute of <code>StyleSheet</code> using this.
*create the CSSStyleSheet interface, containing an <code>Arc<Stylesheet></code> member. Add a method to <code>Document</code> that returns a new <code>CSSStyleSheet</code> instance for a particular index in the <code>stylesheets</code> member.
*creating the CSSRule interface which represents an abstract, base CSS Rule. It is done using the Webidl format.
*creating the CSSRuleList interface and implementing <code>CSSStyleSheet.cssRules</code> which is an array like object containing an ordered collection of CSS rules.
*implementing the <code>insertRule</code> and <code>deleteRule</code> methods of <code>CSSStyleSheet</code> to allow mutation of the contents of the vector in the <code>rules</code> member of the <code>Stylesheet</code>.
*creating the CSSStyleRule interface that extends the CSSRule interface and making <code>cssRules</code> return <code>CSSStyleRule</code> values for appropriate rules.

=='''Implementation'''==

==='''Initial Steps'''===

The following steps were followed to meet the project requirements as per this github page.

===='''Step 1'''====

We had to implement the StyleSheet interface for which we had to create two file: stylesheet.rs and StyleSheet.webidl and included stylesheet interface in the mod.rs file.
In the StyleSheet interface we avoided the three methods: ownerNode, parentStyleSheet and media as they could not be trivially implemented and the instructions were clear to avoid such methods.

===='''Step 2'''====

We had to implement StyleSheetList interface for which we had to create two file: stylesheetlist.rs and StyleSheetList.webidl and included stylesheetlist interface in the mod.rs file.
We used JS<Document> instead of [ArrayClass] as [ArrayClass] is not yet supported by Servo.
In the StyleSheetList interface we did not implement the getter as we do not have a list of stylesheets/scripts/dom.

===='''Step 3'''====

We had to implement a partial interface Document with an attribute as styleSheets. The declaration of the interface was done in Document.webidl and its implementation was done in document.rs file. The implementation returned a new instance of StyleSheetList referencing the current document.

==='''UML Diagram'''===

[[File:UMLinitial.png]]

==='''Subsequent Steps'''===

===='''Step 1'''====

We will be making changes in the <code>Document.rs</code> file to make the <code>stylesheets</code> member store the associated Element. We will then implement the ownerNode attribute in the StyleSheet inteface by making changes in the <code>StyleSheet.webidl</code> and <code>stylesheet.rs</code>. We would just declare <code>ownerNode</code> attribute in the .webidl and give its implementation in .rs file.

===='''Step 2'''====

We will be making a new interface named as <code>CSSStyleSheet</code>. In the <code>Document.rs</code> file, we will create a method to return the <code>CSSStyleSheet</code> from the <code>stylesheets</code> member of the Document by giving a particular index as the input.

===='''Step 3'''====

As the next step, we will be creating the <code>CSSRule</code> interface which has attributes like <code>type</code>, <code>cssText</code>, <code>parentRule</code> and <code>parentStyleSheet</code>. This interface will also have several constants like <code>STYLE_RULE</code>, <code>CHARSET_RULE</code> , <code>IMPORT_RULE, MEDIA_RULE</code>, <code>FONT_FACE_RULE</code>, <code>PAGE_RULE, MARGIN_RULE</code> and <code>NAMESPACE_RULE</code>.
This will require us to create two files: <code>CSSRule.webidl</code> and <code>cssrule.rs</code>

===='''Step 4'''====

We will be creating <code>CSSRuleList</code> interface by creating 2 files: <code>CSSRuleList.webidl</code> and <code>CSSRulelist.rs</code>. This interface will have one attribute, which is length and a getter which returns the <code>CSSRule</code> at a particular index. We will also implement <code>CSSStyleSheet.cssRules</code>

===='''Step 5'''====

We will make <code>rules</code> member of the <code>StyleSheet</code> type which contains a RefCell and implement the <code>insertRule</code> and <code>deleteRule</code> methods of <code>CSSStyleSheet</code>.

===='''Step 6'''====

We will be creating a new interface <code>CSSStyleRule</code> , by making 2 files: <code>CSSStyleRule.webidl<code> and <code>CSSStyleRule.rs</code>. The interface will contain two attributes, namely, <code>selectorText</code> and <code>CSSStyleDeclaration</code> style. The <code>cssRules</code> will be implemented to return <code>CSSStyleRule</code> values for appropriate rules.

=='''Design Principles'''==
In this mozilla project, we are asked to strictly follow the existing design patterns and coding conventions. The main aim of this project is to add and modify interfaces. Interfaces allow developers to follow a clean design principle wherein they do not have to program to classes. It is too easy to add a dependency on a class. In order to avoid that kind of dependency on the implementation i.e. classes, developers can program to interfaces. This type of design pattern is an architectural pattern and makes the code more modular and object oriented. Programming to an interface has a flavor of DRY principle because even if the underlying implementation changes, the handle to the implementation is an interface and that does not change. In this way, our mozilla project becomes more modular and object oriented. Servo has a utility of tests that checks the coding standards followed by Mozilla on this project. We will execute the following utility tests command.
<code>./mach test-tidy</code> Any issues encountered by executing this test can be flagged before generating the pull request. This ensures that the developers follow the coding standards.

=='''Testing'''==
Following are the steps to run all the tests:
1. Install the pre-requisites required for servo as mentioned here
2. Run the following commands
cd
git clone https://github.com/mohammed-alfatih/servo.git
cd servo
./mach build --release
'''Note''': It may take around 30 mins to build
./mach test-wpt /tests/wpt/html/dom/interfaces.html
You will see that all tests pass as expected.

'''Note''': There were no predefined test cases mentioned for our project. So now you will see 0 testcases. As far as we know there is no way to test this from UI.

=='''Conclusion'''==
We have tried to implement the most commonly-used portions of the CSSOM API specification to increase Servo's compatibility with existing webpages <ref>https://github.com/servo/servo/wiki/CSSOM-student-project</ref>. We have created two interfaces, StyleSheet and StyleSheetList in our initial steps. As a part of our subsequent steps, we would be adding 4 new interfaces: CSSStyleSheet, CSSRule, CSSRuleList and the CSSStyleRule interface. We have implemented only the obvious methods for these interfaces so that more advanced work can be done to make this CSSOM API fully functional keeping our work as the basis.

=='''References'''==
<references/>

CSC/ECE 517 Spring 2016/Implement Common Parts of the CSSOM API

2016-04-09T02:42:30Z

Maalbash:

=='''Introduction'''==

Cascading Style Sheets ([https://en.wikipedia.org/wiki/Cascading_Style_Sheets CSS]) is a style sheet language used for describing the presentation of a document written in a markup language. Although most often used to set the visual style of web pages and user interfaces written in [https://en.wikipedia.org/wiki/HTML HTML] and [https://en.wikipedia.org/wiki/XHTML XHTML], the language can be applied to any [https://en.wikipedia.org/wiki/XML XML] document, including plain XML, [https://en.wikipedia.org/wiki/Scalable_Vector_Graphics SVG] and [https://en.wikipedia.org/wiki/XUL XUL], and is applicable to rendering in speech, or on other media. Along with HTML and [https://en.wikipedia.org/wiki/JavaScript JavaScript], CSS is a cornerstone technology used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications

==='''CSSOM'''===
CSSOM which is the CSS Object Model defines APIs (including generic parsing and serialization rules) for media queries, selectors, and CSS itself<ref>https://drafts.csswg.org/cssom/</ref>. The core features of the CSSOM are oriented towards providing basic capabilities to author-defined scripts to permit access to and manipulation of style related state information and processes. CSSOM aims at proving a way to access the CSS style classes and properties. One can even modify the CSS rules using this API. These changes can be targeted to affect individual elements or the whole webpage. <ref>https://github.com/servo/servo/wiki/CSSOM-student-project</ref>. CSSOM is actually a collection of all the CSS stylesheets found on a web page which is very similar to Document Object Model (DOM) but only stores collection of CSS instead of HTML. <ref>https://varvy.com/performance/cssom.html</ref>. CSSOM identifies which elements on your webpage require styling and modifies them. It is also used to optimize the speed at which webpages get loaded.
It is an integral part of the process that is used to display content on a webpage. The web browser first creates a DOM by examining the HTMLs, then creates a CSSOM by examining the CSS stylesheets. It then creates a render tree by comibining the DOM and the CSSOM and displays the webpage.<ref>https://varvy.com/performance/cssom.html</ref>.

==='''Rust'''===

We can organize different languages on a spectrum with control on one end and safety on the other. Languages like C and C++ fall on the end of the side of control, where as on the other side we have languages like Javascript, Ruby, Python, etc. What Rust does is stepping off this line. What it does is not a tradeoff between control and safety, but it provides you both the low level of control found in C and C++, and the high level of safety in JavaScript and Python. The three concepts that distinguish rust from other programming languages are: Ownership, Borrowing and lifetime. Ownership is how Rust achieves its largest goal, memory safety.<ref>https://en.wikipedia.org/wiki/Rust_(programming_language)</ref>

==='''Servo'''===

Servo is a project in [https://en.wikipedia.org/wiki/Mozilla Mozilla] research to write a parallel layout engine in Rust. It aims to achieve better parallelism, security, modularity and performance. Servo is built with Cargo, the rust package manager. It currently supports 64bit OSX, 64bit Linux, Android, and Gonk(Firefox OS).<ref>https://servo.org</ref>

=='''Project Description'''==

The project is to go through the following steps in a somewhat linear order:
*Compiling servo on a machine and making sure it runs on a specific url. Then emailing the mozilla mailing list to introduce the group.
*Creating a StyleSheet interface which represents an abstract, base style sheet. This creation requires a couple of steps :
**Adding a new IDL file (which contains specifications)
**Creating the Rust file which has implementations of the things specified in IDL.
**Listing the Rust file in mod.rs file.
*After that comes the creation of a StyleSheetList interface. Which represents an ordered collection of CSS style sheets. And basically because it's another interface, again the .webidl and .rs files need to be implemented.
*Adding the attribute <code>stylesheets</code> to the <code>Document.webidl</code>.
*In the three steps just mentioned some guidelines about implementation must be followed, like the return types of certain methods.
*Run the tests specified by the mozilla team.
*Finally updating the interfaces.html, and adding the new interface names.

The Subsequent steps are:
*making the <code>stylesheets</code> member of <code>Document</code> store the associated <code>Element</code> along with the actual implementation of <code>Stylesheet</code> and adding a member to <code>StyleSheet</code> for the associated element, and implement the <code>ownerNode</code> attribute of <code>StyleSheet</code> using this.
*create the CSSStyleSheet interface, containing an <code>Arc<Stylesheet></code> member. Add a method to <code>Document</code> that returns a new <code>CSSStyleSheet</code> instance for a particular index in the <code>stylesheets</code> member.
*creating the CSSRule interface which represents an abstract, base CSS Rule. It is done using the Webidl format.
*creating the CSSRuleList interface and implementing <code>CSSStyleSheet.cssRules</code> which is an array like object containing an ordered collection of CSS rules.
*implementing the <code>insertRule</code> and <code>deleteRule</code> methods of <code>CSSStyleSheet</code> to allow mutation of the contents of the vector in the <code>rules</code> member of the <code>Stylesheet</code>.
*creating the CSSStyleRule interface that extends the CSSRule interface and making <code>cssRules</code> return <code>CSSStyleRule</code> values for appropriate rules.

=='''Implementation'''==

==='''Initial Steps'''===

The following steps were followed to meet the project requirements as per this github page.

===='''Step 1'''====

We had to implement the StyleSheet interface for which we had to create two file: stylesheet.rs and StyleSheet.webidl and included stylesheet interface in the mod.rs file.
In the StyleSheet interface we avoided the three methods: ownerNode, parentStyleSheet and media as they could not be trivially implemented and the instructions were clear to avoid such methods.

===='''Step 2'''====

We had to implement StyleSheetList interface for which we had to create two file: stylesheetlist.rs and StyleSheetList.webidl and included stylesheetlist interface in the mod.rs file.
We used JS<Document> instead of [ArrayClass] as [ArrayClass] is not yet supported by Servo.
In the StyleSheetList interface we did not implement the getter as we do not have a list of stylesheets/scripts/dom.

===='''Step 3'''====

We had to implement a partial interface Document with an attribute as styleSheets. The declaration of the interface was done in Document.webidl and its implementation was done in document.rs file. The implementation returned a new instance of StyleSheetList referencing the current document.

==='''UML Diagram'''===

[[File:UMLinitial.png]]

==='''Subsequent Steps'''===

===='''Step 1'''====

We will be making changes in the <code>Document.rs</code> file to make the <code>stylesheets</code> member store the associated Element. We will then implement the ownerNode attribute in the StyleSheet inteface by making changes in the <code>StyleSheet.webidl</code> and <code>stylesheet.rs</code>. We would just declare <code>ownerNode</code> attribute in the .webidl and give its implementation in .rs file.

===='''Step 2'''====

We will be making a new interface named as <code>CSSStyleSheet</code>. In the <code>Document.rs</code> file, we will create a method to return the <code>CSSStyleSheet</code> from the <code>stylesheets</code> member of the Document by giving a particular index as the input.

===='''Step 3'''====

As the next step, we will be creating the <code>CSSRule</code> interface which has attributes like <code>type</code>, <code>cssText</code>, <code>parentRule</code> and <code>parentStyleSheet</code>. This interface will also have several constants like <code>STYLE_RULE</code>, <code>CHARSET_RULE</code> , <code>IMPORT_RULE, MEDIA_RULE</code>, <code>FONT_FACE_RULE</code>, <code>PAGE_RULE, MARGIN_RULE</code> and <code>NAMESPACE_RULE</code>.
This will require us to create two files: <code>CSSRule.webidl</code> and <code>cssrule.rs</code>

===='''Step 4'''====

We will be creating <code>CSSRuleList</code> interface by creating 2 files: <code>CSSRuleList.webidl</code> and <code>CSSRulelist.rs</code>. This interface will have one attribute, which is length and a getter which returns the <code>CSSRule</code> at a particular index. We will also implement <code>CSSStyleSheet.cssRules</code>

===='''Step 5'''====

We will make <code>rules</code> member of the <code>StyleSheet</code> type which contains a RefCell and implement the <code>insertRule</code> and <code>deleteRule</code> methods of <code>CSSStyleSheet</code>.

===='''Step 6'''====

We will be creating a new interface <code>CSSStyleRule</code> , by making 2 files: <code>CSSStyleRule.webidl<code> and <code>CSSStyleRule.rs</code>. The interface will contain two attributes, namely, <code>selectorText</code> and <code>CSSStyleDeclaration</code> style. The <code>cssRules</code> will be implemented to return <code>CSSStyleRule</code> values for appropriate rules.

=='''Design Principles'''==
In this mozilla project, we are asked to strictly follow the existing design patterns and coding conventions. The main aim of this project is to add and modify interfaces. Interfaces allow developers to follow a clean design principle wherein they do not have to program to classes. It is too easy to add a dependency on a class. In order to avoid that kind of dependency on the implementation i.e. classes, developers can program to interfaces. This type of design pattern is an architectural pattern and makes the code more modular and object oriented. Programming to an interface has a flavor of DRY principle because even if the underlying implementation changes, the handle to the implementation is an interface and that does not change. In this way, our mozilla project becomes more modular and object oriented. Servo has a utility of tests that checks the coding standards followed by Mozilla on this project. We will execute the following utility tests command.
<code>./mach test-tidy</code> Any issues encountered by executing this test can be flagged before generating the pull request. This ensures that the developers follow the coding standards.

=='''Testing'''==
Following are the steps to run all the tests:
1. Install the pre-requisites required for servo as mentioned here
2. Run the following commands
cd
git clone https://github.com/mohammed-alfatih/servo.git
cd servo
./mach build --release
'''Note''': It may take around 30 mins to build
./mach test-wpt /tests/wpt/html/dom/interfaces.html
You will see that all tests pass as expected.

'''Note''': There were no predefined test cases mentioned for our project. So now you will see 0 testcases. As far as we know there is no way to test this from UI.

=='''Conclusion'''==
We have tried to implement the most commonly-used portions of the CSSOM API specification to increase Servo's compatibility with existing webpages <ref>https://github.com/servo/servo/wiki/CSSOM-student-project</ref>. We have created two interfaces, StyleSheet and StyleSheetList in our initial steps. As a part of our subsequent steps, we would be adding 4 new interfaces: CSSStyleSheet, CSSRule, CSSRuleList and the CSSStyleRule interface. We have implemented only the obvious methods for these interfaces so that more advanced work can be done to make this CSSOM API fully functional keeping our work as the basis.

=='''References'''==
<references/>

File:UMLinitial.png

2016-04-09T02:40:40Z

Maalbash:

CSC/ECE 517 Spring 2016/Implement Common Parts of the CSSOM API

2016-04-09T02:39:53Z

Maalbash:

=='''Introduction'''==

Cascading Style Sheets ([https://en.wikipedia.org/wiki/Cascading_Style_Sheets CSS]) is a style sheet language used for describing the presentation of a document written in a markup language. Although most often used to set the visual style of web pages and user interfaces written in [https://en.wikipedia.org/wiki/HTML HTML] and [https://en.wikipedia.org/wiki/XHTML XHTML], the language can be applied to any [https://en.wikipedia.org/wiki/XML XML] document, including plain XML, [https://en.wikipedia.org/wiki/Scalable_Vector_Graphics SVG] and [https://en.wikipedia.org/wiki/XUL XUL], and is applicable to rendering in speech, or on other media. Along with HTML and [https://en.wikipedia.org/wiki/JavaScript JavaScript], CSS is a cornerstone technology used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications

==='''CSSOM'''===
CSSOM which is the CSS Object Model defines APIs (including generic parsing and serialization rules) for media queries, selectors, and CSS itself<ref>https://drafts.csswg.org/cssom/</ref>. The core features of the CSSOM are oriented towards providing basic capabilities to author-defined scripts to permit access to and manipulation of style related state information and processes. CSSOM aims at proving a way to access the CSS style classes and properties. One can even modify the CSS rules using this API. These changes can be targeted to affect individual elements or the whole webpage. <ref>https://github.com/servo/servo/wiki/CSSOM-student-project</ref>. CSSOM is actually a collection of all the CSS stylesheets found on a web page which is very similar to Document Object Model (DOM) but only stores collection of CSS instead of HTML. <ref>https://varvy.com/performance/cssom.html</ref>. CSSOM identifies which elements on your webpage require styling and modifies them. It is also used to optimize the speed at which webpages get loaded.
It is an integral part of the process that is used to display content on a webpage. The web browser first creates a DOM by examining the HTMLs, then creates a CSSOM by examining the CSS stylesheets. It then creates a render tree by comibining the DOM and the CSSOM and displays the webpage.<ref>https://varvy.com/performance/cssom.html</ref>.

==='''Rust'''===

We can organize different languages on a spectrum with control on one end and safety on the other. Languages like C and C++ fall on the end of the side of control, where as on the other side we have languages like Javascript, Ruby, Python, etc. What Rust does is stepping off this line. What it does is not a tradeoff between control and safety, but it provides you both the low level of control found in C and C++, and the high level of safety in JavaScript and Python. The three concepts that distinguish rust from other programming languages are: Ownership, Borrowing and lifetime. Ownership is how Rust achieves its largest goal, memory safety.<ref>https://en.wikipedia.org/wiki/Rust_(programming_language)</ref>

==='''Servo'''===

Servo is a project in [https://en.wikipedia.org/wiki/Mozilla Mozilla] research to write a parallel layout engine in Rust. It aims to achieve better parallelism, security, modularity and performance. Servo is built with Cargo, the rust package manager. It currently supports 64bit OSX, 64bit Linux, Android, and Gonk(Firefox OS).<ref>https://servo.org</ref>

=='''Project Description'''==

The project is to go through the following steps in a somewhat linear order:
*Compiling servo on a machine and making sure it runs on a specific url. Then emailing the mozilla mailing list to introduce the group.
*Creating a StyleSheet interface which represents an abstract, base style sheet. This creation requires a couple of steps :
**Adding a new IDL file (which contains specifications)
**Creating the Rust file which has implementations of the things specified in IDL.
**Listing the Rust file in mod.rs file.
*After that comes the creation of a StyleSheetList interface. Which represents an ordered collection of CSS style sheets. And basically because it's another interface, again the .webidl and .rs files need to be implemented.
*Adding the attribute <code>stylesheets</code> to the <code>Document.webidl</code>.
*In the three steps just mentioned some guidelines about implementation must be followed, like the return types of certain methods.
*Run the tests specified by the mozilla team.
*Finally updating the interfaces.html, and adding the new interface names.

The Subsequent steps are:
*making the <code>stylesheets</code> member of <code>Document</code> store the associated <code>Element</code> along with the actual implementation of <code>Stylesheet</code> and adding a member to <code>StyleSheet</code> for the associated element, and implement the <code>ownerNode</code> attribute of <code>StyleSheet</code> using this.
*create the CSSStyleSheet interface, containing an <code>Arc<Stylesheet></code> member. Add a method to <code>Document</code> that returns a new <code>CSSStyleSheet</code> instance for a particular index in the <code>stylesheets</code> member.
*creating the CSSRule interface which represents an abstract, base CSS Rule. It is done using the Webidl format.
*creating the CSSRuleList interface and implementing <code>CSSStyleSheet.cssRules</code> which is an array like object containing an ordered collection of CSS rules.
*implementing the <code>insertRule</code> and <code>deleteRule</code> methods of <code>CSSStyleSheet</code> to allow mutation of the contents of the vector in the <code>rules</code> member of the <code>Stylesheet</code>.
*creating the CSSStyleRule interface that extends the CSSRule interface and making <code>cssRules</code> return <code>CSSStyleRule</code> values for appropriate rules.

=='''Implementation'''==

==='''Initial Steps'''===

The following steps were followed to meet the project requirements as per this github page.

===='''Step 1'''====

We had to implement the StyleSheet interface for which we had to create two file: stylesheet.rs and StyleSheet.webidl and included stylesheet interface in the mod.rs file.
In the StyleSheet interface we avoided the three methods: ownerNode, parentStyleSheet and media as they could not be trivially implemented and the instructions were clear to avoid such methods.

===='''Step 2'''====

We had to implement StyleSheetList interface for which we had to create two file: stylesheetlist.rs and StyleSheetList.webidl and included stylesheetlist interface in the mod.rs file.
We used JS<Document> instead of [ArrayClass] as [ArrayClass] is not yet supported by Servo.
In the StyleSheetList interface we did not implement the getter as we do not have a list of stylesheets/scripts/dom.

===='''Step 3'''====

We had to implement a partial interface Document with an attribute as styleSheets. The declaration of the interface was done in Document.webidl and its implementation was done in document.rs file. The implementation returned a new instance of StyleSheetList referencing the current document.

==='''UML Diagram'''===

[[File:UMLinitial.jpg]]

==='''Subsequent Steps'''===

===='''Step 1'''====

We will be making changes in the <code>Document.rs</code> file to make the <code>stylesheets</code> member store the associated Element. We will then implement the ownerNode attribute in the StyleSheet inteface by making changes in the <code>StyleSheet.webidl</code> and <code>stylesheet.rs</code>. We would just declare <code>ownerNode</code> attribute in the .webidl and give its implementation in .rs file.

===='''Step 2'''====

We will be making a new interface named as <code>CSSStyleSheet</code>. In the <code>Document.rs</code> file, we will create a method to return the <code>CSSStyleSheet</code> from the <code>stylesheets</code> member of the Document by giving a particular index as the input.

===='''Step 3'''====

As the next step, we will be creating the <code>CSSRule</code> interface which has attributes like <code>type</code>, <code>cssText</code>, <code>parentRule</code> and <code>parentStyleSheet</code>. This interface will also have several constants like <code>STYLE_RULE</code>, <code>CHARSET_RULE</code> , <code>IMPORT_RULE, MEDIA_RULE</code>, <code>FONT_FACE_RULE</code>, <code>PAGE_RULE, MARGIN_RULE</code> and <code>NAMESPACE_RULE</code>.
This will require us to create two files: <code>CSSRule.webidl</code> and <code>cssrule.rs</code>

===='''Step 4'''====

We will be creating <code>CSSRuleList</code> interface by creating 2 files: <code>CSSRuleList.webidl</code> and <code>CSSRulelist.rs</code>. This interface will have one attribute, which is length and a getter which returns the <code>CSSRule</code> at a particular index. We will also implement <code>CSSStyleSheet.cssRules</code>

===='''Step 5'''====

We will make <code>rules</code> member of the <code>StyleSheet</code> type which contains a RefCell and implement the <code>insertRule</code> and <code>deleteRule</code> methods of <code>CSSStyleSheet</code>.

===='''Step 6'''====

We will be creating a new interface <code>CSSStyleRule</code> , by making 2 files: <code>CSSStyleRule.webidl<code> and <code>CSSStyleRule.rs</code>. The interface will contain two attributes, namely, <code>selectorText</code> and <code>CSSStyleDeclaration</code> style. The <code>cssRules</code> will be implemented to return <code>CSSStyleRule</code> values for appropriate rules.

=='''Design Principles'''==
In this mozilla project, we are asked to strictly follow the existing design patterns and coding conventions. The main aim of this project is to add and modify interfaces. Interfaces allow developers to follow a clean design principle wherein they do not have to program to classes. It is too easy to add a dependency on a class. In order to avoid that kind of dependency on the implementation i.e. classes, developers can program to interfaces. This type of design pattern is an architectural pattern and makes the code more modular and object oriented. Programming to an interface has a flavor of DRY principle because even if the underlying implementation changes, the handle to the implementation is an interface and that does not change. In this way, our mozilla project becomes more modular and object oriented. Servo has a utility of tests that checks the coding standards followed by Mozilla on this project. We will execute the following utility tests command.
<code>./mach test-tidy</code> Any issues encountered by executing this test can be flagged before generating the pull request. This ensures that the developers follow the coding standards.

=='''Testing'''==
Following are the steps to run all the tests:
1. Install the pre-requisites required for servo as mentioned here
2. Run the following commands
cd
git clone https://github.com/mohammed-alfatih/servo.git
cd servo
./mach build --release
'''Note''': It may take around 30 mins to build
./mach test-wpt /tests/wpt/html/dom/interfaces.html
You will see that all tests pass as expected.

'''Note''': There were no predefined test cases mentioned for our project. So now you will see 0 testcases. As far as we know there is no way to test this from UI.

=='''Conclusion'''==
We have tried to implement the most commonly-used portions of the CSSOM API specification to increase Servo's compatibility with existing webpages <ref>https://github.com/servo/servo/wiki/CSSOM-student-project</ref>. We have created two interfaces, StyleSheet and StyleSheetList in our initial steps. As a part of our subsequent steps, we would be adding 4 new interfaces: CSSStyleSheet, CSSRule, CSSRuleList and the CSSStyleRule interface. We have implemented only the obvious methods for these interfaces so that more advanced work can be done to make this CSSOM API fully functional keeping our work as the basis.

=='''References'''==
<references/>

CSC/ECE 517 Spring 2016 M1603 Implement Common Parts of the CSSOM API

2016-04-09T02:37:39Z

Maalbash: Created page with "=='''Introduction'''== Cascading Style Sheets ([https://en.wikipedia.org/wiki/Cascading_Style_Sheets CSS]) is a style sheet language used for describing the presentation of a do..."

=='''Introduction'''==

Cascading Style Sheets ([https://en.wikipedia.org/wiki/Cascading_Style_Sheets CSS]) is a style sheet language used for describing the presentation of a document written in a markup language. Although most often used to set the visual style of web pages and user interfaces written in [https://en.wikipedia.org/wiki/HTML HTML] and [https://en.wikipedia.org/wiki/XHTML XHTML], the language can be applied to any [https://en.wikipedia.org/wiki/XML XML] document, including plain XML, [https://en.wikipedia.org/wiki/Scalable_Vector_Graphics SVG] and [https://en.wikipedia.org/wiki/XUL XUL], and is applicable to rendering in speech, or on other media. Along with HTML and [https://en.wikipedia.org/wiki/JavaScript JavaScript], CSS is a cornerstone technology used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications

==='''CSSOM'''===
CSSOM which is the CSS Object Model defines APIs (including generic parsing and serialization rules) for media queries, selectors, and CSS itself<ref>https://drafts.csswg.org/cssom/</ref>. The core features of the CSSOM are oriented towards providing basic capabilities to author-defined scripts to permit access to and manipulation of style related state information and processes. CSSOM aims at proving a way to access the CSS style classes and properties. One can even modify the CSS rules using this API. These changes can be targeted to affect individual elements or the whole webpage. <ref>https://github.com/servo/servo/wiki/CSSOM-student-project</ref>. CSSOM is actually a collection of all the CSS stylesheets found on a web page which is very similar to Document Object Model (DOM) but only stores collection of CSS instead of HTML. <ref>https://varvy.com/performance/cssom.html</ref>. CSSOM identifies which elements on your webpage require styling and modifies them. It is also used to optimize the speed at which webpages get loaded.
It is an integral part of the process that is used to display content on a webpage. The web browser first creates a DOM by examining the HTMLs, then creates a CSSOM by examining the CSS stylesheets. It then creates a render tree by comibining the DOM and the CSSOM and displays the webpage.<ref>https://varvy.com/performance/cssom.html</ref>.

==='''Rust'''===

We can organize different languages on a spectrum with control on one end and safety on the other. Languages like C and C++ fall on the end of the side of control, where as on the other side we have languages like Javascript, Ruby, Python, etc. What Rust does is stepping off this line. What it does is not a tradeoff between control and safety, but it provides you both the low level of control found in C and C++, and the high level of safety in JavaScript and Python. The three concepts that distinguish rust from other programming languages are: Ownership, Borrowing and lifetime. Ownership is how Rust achieves its largest goal, memory safety.<ref>https://en.wikipedia.org/wiki/Rust_(programming_language)</ref>

==='''Servo'''===

Servo is a project in [https://en.wikipedia.org/wiki/Mozilla Mozilla] research to write a parallel layout engine in Rust. It aims to achieve better parallelism, security, modularity and performance. Servo is built with Cargo, the rust package manager. It currently supports 64bit OSX, 64bit Linux, Android, and Gonk(Firefox OS).<ref>https://servo.org</ref>

=='''Project Description'''==

The project is to go through the following steps in a somewhat linear order:
*Compiling servo on a machine and making sure it runs on a specific url. Then emailing the mozilla mailing list to introduce the group.
*Creating a StyleSheet interface which represents an abstract, base style sheet. This creation requires a couple of steps :
**Adding a new IDL file (which contains specifications)
**Creating the Rust file which has implementations of the things specified in IDL.
**Listing the Rust file in mod.rs file.
*After that comes the creation of a StyleSheetList interface. Which represents an ordered collection of CSS style sheets. And basically because it's another interface, again the .webidl and .rs files need to be implemented.
*Adding the attribute <code>stylesheets</code> to the <code>Document.webidl</code>.
*In the three steps just mentioned some guidelines about implementation must be followed, like the return types of certain methods.
*Run the tests specified by the mozilla team.
*Finally updating the interfaces.html, and adding the new interface names.

The Subsequent steps are:
*making the <code>stylesheets</code> member of <code>Document</code> store the associated <code>Element</code> along with the actual implementation of <code>Stylesheet</code> and adding a member to <code>StyleSheet</code> for the associated element, and implement the <code>ownerNode</code> attribute of <code>StyleSheet</code> using this.
*create the CSSStyleSheet interface, containing an <code>Arc<Stylesheet></code> member. Add a method to <code>Document</code> that returns a new <code>CSSStyleSheet</code> instance for a particular index in the <code>stylesheets</code> member.
*creating the CSSRule interface which represents an abstract, base CSS Rule. It is done using the Webidl format.
*creating the CSSRuleList interface and implementing <code>CSSStyleSheet.cssRules</code> which is an array like object containing an ordered collection of CSS rules.
*implementing the <code>insertRule</code> and <code>deleteRule</code> methods of <code>CSSStyleSheet</code> to allow mutation of the contents of the vector in the <code>rules</code> member of the <code>Stylesheet</code>.
*creating the CSSStyleRule interface that extends the CSSRule interface and making <code>cssRules</code> return <code>CSSStyleRule</code> values for appropriate rules.

=='''Implementation'''==
==='''Initial Steps'''===
The following steps were followed to meet the project requirements as per this github page.
===='''Step 1'''====
We had to implement the StyleSheet interface for which we had to create two file: stylesheet.rs and StyleSheet.webidl and included stylesheet interface in the mod.rs file.
In the StyleSheet interface we avoided the three methods: ownerNode, parentStyleSheet and media as they could not be trivially implemented and the instructions were clear to avoid such methods.

===='''Step 2'''====
We had to implement StyleSheetList interface for which we had to create two file: stylesheetlist.rs and StyleSheetList.webidl and included stylesheetlist interface in the mod.rs file.
We used JS<Document> instead of [ArrayClass] as [ArrayClass] is not yet supported by Servo.
In the StyleSheetList interface we did not implement the getter as we do not have a list of stylesheets/scripts/dom.

===='''Step 3'''====
We had to implement a partial interface Document with an attribute as styleSheets. The declaration of the interface was done in Document.webidl and its implementation was done in document.rs file. The implementation returned a new instance of StyleSheetList referencing the current document.

==='''Subsequent Steps'''===

===='''Step 1'''====

We will be making changes in the <code>Document.rs</code> file to make the <code>stylesheets</code> member store the associated Element. We will then implement the ownerNode attribute in the StyleSheet inteface by making changes in the <code>StyleSheet.webidl</code> and <code>stylesheet.rs</code>. We would just declare <code>ownerNode</code> attribute in the .webidl and give its implementation in .rs file.

===='''Step 2'''====

We will be making a new interface named as <code>CSSStyleSheet</code>. In the <code>Document.rs</code> file, we will create a method to return the <code>CSSStyleSheet</code> from the <code>stylesheets</code> member of the Document by giving a particular index as the input.

===='''Step 3'''====

As the next step, we will be creating the <code>CSSRule</code> interface which has attributes like <code>type</code>, <code>cssText</code>, <code>parentRule</code> and <code>parentStyleSheet</code>. This interface will also have several constants like <code>STYLE_RULE</code>, <code>CHARSET_RULE</code> , <code>IMPORT_RULE, MEDIA_RULE</code>, <code>FONT_FACE_RULE</code>, <code>PAGE_RULE, MARGIN_RULE</code> and <code>NAMESPACE_RULE</code>.
This will require us to create two files: <code>CSSRule.webidl</code> and <code>cssrule.rs</code>

===='''Step 4'''====

We will be creating <code>CSSRuleList</code> interface by creating 2 files: <code>CSSRuleList.webidl</code> and <code>CSSRulelist.rs</code>. This interface will have one attribute, which is length and a getter which returns the <code>CSSRule</code> at a particular index. We will also implement <code>CSSStyleSheet.cssRules</code>

===='''Step 5'''====

We will make <code>rules</code> member of the <code>StyleSheet</code> type which contains a RefCell and implement the <code>insertRule</code> and <code>deleteRule</code> methods of <code>CSSStyleSheet</code>.

===='''Step 6'''====

We will be creating a new interface <code>CSSStyleRule</code> , by making 2 files: <code>CSSStyleRule.webidl<code> and <code>CSSStyleRule.rs</code>. The interface will contain two attributes, namely, <code>selectorText</code> and <code>CSSStyleDeclaration</code> style. The <code>cssRules</code> will be implemented to return <code>CSSStyleRule</code> values for appropriate rules.

=='''Design Principles'''==
In this mozilla project, we are asked to strictly follow the existing design patterns and coding conventions. The main aim of this project is to add and modify interfaces. Interfaces allow developers to follow a clean design principle wherein they do not have to program to classes. It is too easy to add a dependency on a class. In order to avoid that kind of dependency on the implementation i.e. classes, developers can program to interfaces. This type of design pattern is an architectural pattern and makes the code more modular and object oriented. Programming to an interface has a flavor of DRY principle because even if the underlying implementation changes, the handle to the implementation is an interface and that does not change. In this way, our mozilla project becomes more modular and object oriented. Servo has a utility of tests that checks the coding standards followed by Mozilla on this project. We will execute the following utility tests command.
<code>./mach test-tidy</code> Any issues encountered by executing this test can be flagged before generating the pull request. This ensures that the developers follow the coding standards.

=='''Testing'''==
Following are the steps to run all the tests:
1. Install the pre-requisites required for servo as mentioned here
2. Run the following commands
cd
git clone https://github.com/mohammed-alfatih/servo.git
cd servo
./mach build --release
'''Note''': It may take around 30 mins to build
./mach test-wpt /tests/wpt/html/dom/interfaces.html
You will see that all tests pass as expected.

'''Note''': There were no predefined test cases mentioned for our project. So now you will see 0 testcases. As far as we know there is no way to test this from UI.

=='''Conclusion'''==
We have tried to implement the most commonly-used portions of the CSSOM API specification to increase Servo's compatibility with existing webpages <ref>https://github.com/servo/servo/wiki/CSSOM-student-project</ref>. We have created two interfaces, StyleSheet and StyleSheetList in our initial steps. As a part of our subsequent steps, we would be adding 4 new interfaces: CSSStyleSheet, CSSRule, CSSRuleList and the CSSStyleRule interface. We have implemented only the obvious methods for these interfaces so that more advanced work can be done to make this CSSOM API fully functional keeping our work as the basis.

=='''References'''==
<references/>

CSC/ECE 517 Spring 2016

2016-04-09T02:37:17Z

Maalbash: /* Final Project Design Document */

==Writing Assignment 1==
*[[CSC/ECE 517 Spring 2016/Active Job]]

==Calibration Assignment Submissions==
*[[Calibration Assignment Submission (OmniAuth)]]
*[[Calibration Assignment Submission (Patch_verb)]]

==Writing Assignment 2==
*[[CSC/ECE 517 Spring 2016/Mozilla Implement HTML5 form validation]]

*[[CSC/ECE_517_Spring_2016/Mozilla Conforming Image Loading to HTML 5 Specs]]

*[[CSC/ECE 517 Spring 2016/Functional Tests for Questionnaire Controller]]

*[[CSC/ECE 517 Spring 2016 / Expertiza Self-Review Feature]]

*[[CSC/ECE 517 Spring 2016/Refactor different question types from quiz feature]]

*[[CSC/ECE 517 Spring 2016/Implement private browsing]]

*[[CSC/ECE 517 Spring 2016/Write automated tests for WebDriver]]

*[[CSC/ECE 517 Spring 2016/Refactor sign_up_sheet_controller.rb and sign_up_topic.rb]]

*[[CSC/ECE 517 Spring 2016/Implement Common Parts of the CSSOM API]]

*[[CSC/ECE 517 Spring 2016/Functional tests for assignment creation function]]

*[[CSC/ECE 517 Spring 2016/E1604. Functional tests for Calibration function]]

*[[CSC/ECE 517 Spring 2016/Refactor and write unit tests for question type.rb]]

*[[CSC/ECE 517 Spring 2016/Refactor response controller]]

*[[CSC/ECE_517_Spring_2016_OSS_M1606]]

*[[CSC/ECE_517_Spring_2016/OSS_E1601]]

==Final Project Design Document==
*[[CSC/ECE 517 Spring 2016 M1601 Implement HTML5 form validation]]
*[[CSC/ECE 517 Spring 2016 M1602 Make image loads conform with the spec]]
*[[CSC/ECE 517 Spring 2016 E1624 Compose functional tests for Suggest topics of student functionality ]]
*[[CSC/ECE 517 Spring 2016 E1631 Team-based reviewing]]
*[[CSC/ECE 517 Spring 2016 E1628 Visualization]]
*[[CSC/ECE 517 Spring 2016 E1625 Show confidence ratings for grade based on reputations of reviewers]]
*[[CSC/ECE 517 Spring 2016 E1629 Performance improvement for Course & Assignment Listing]]
*[[CSC/ECE 517 Spring 2016 M1603 Implement Common Parts of the CSSOM API]]

CSC/ECE 517 Spring 2016/Implement Common Parts of the CSSOM API

2016-04-08T22:33:35Z

Maalbash: /* Subsequent Steps */

=='''Introduction'''==

Cascading Style Sheets ([https://en.wikipedia.org/wiki/Cascading_Style_Sheets CSS]) is a style sheet language used for describing the presentation of a document written in a markup language. Although most often used to set the visual style of web pages and user interfaces written in [https://en.wikipedia.org/wiki/HTML HTML] and [https://en.wikipedia.org/wiki/XHTML XHTML], the language can be applied to any [https://en.wikipedia.org/wiki/XML XML] document, including plain XML, [https://en.wikipedia.org/wiki/Scalable_Vector_Graphics SVG] and [https://en.wikipedia.org/wiki/XUL XUL], and is applicable to rendering in speech, or on other media. Along with HTML and [https://en.wikipedia.org/wiki/JavaScript JavaScript], CSS is a cornerstone technology used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications

==='''CSSOM'''===
CSSOM which is the CSS Object Model defines APIs (including generic parsing and serialization rules) for media queries, selectors, and CSS itself<ref>https://drafts.csswg.org/cssom/</ref>. The core features of the CSSOM are oriented towards providing basic capabilities to author-defined scripts to permit access to and manipulation of style related state information and processes. CSSOM aims at proving a way to access the CSS style classes and properties. One can even modify the CSS rules using this API. These changes can be targeted to affect individual elements or the whole webpage. <ref>https://github.com/servo/servo/wiki/CSSOM-student-project</ref>. CSSOM is actually a collection of all the CSS stylesheets found on a web page which is very similar to Document Object Model (DOM) but only stores collection of CSS instead of HTML. <ref>https://varvy.com/performance/cssom.html</ref>. CSSOM identifies which elements on your webpage require styling and modifies them. It is also used to optimize the speed at which webpages get loaded.
It is an integral part of the process that is used to display content on a webpage. The web browser first creates a DOM by examining the HTMLs, then creates a CSSOM by examining the CSS stylesheets. It then creates a render tree by comibining the DOM and the CSSOM and displays the webpage.<ref>https://varvy.com/performance/cssom.html</ref>.

==='''Rust'''===

We can organize different languages on a spectrum with control on one end and safety on the other. Languages like C and C++ fall on the end of the side of control, where as on the other side we have languages like Javascript, Ruby, Python, etc. What Rust does is stepping off this line. What it does is not a tradeoff between control and safety, but it provides you both the low level of control found in C and C++, and the high level of safety in JavaScript and Python. The three concepts that distinguish rust from other programming languages are: Ownership, Borrowing and lifetime. Ownership is how Rust achieves its largest goal, memory safety.<ref>https://en.wikipedia.org/wiki/Rust_(programming_language)</ref>

==='''Servo'''===

Servo is a project in [https://en.wikipedia.org/wiki/Mozilla Mozilla] research to write a parallel layout engine in Rust. It aims to achieve better parallelism, security, modularity and performance. Servo is built with Cargo, the rust package manager. It currently supports 64bit OSX, 64bit Linux, Android, and Gonk(Firefox OS).<ref>https://servo.org</ref>

=='''Project Description'''==

The project is to go through the following steps in a somewhat linear order:
*Compiling servo on a machine and making sure it runs on a specific url. Then emailing the mozilla mailing list to introduce the group.
*Creating a StyleSheet interface which represents an abstract, base style sheet. This creation requires a couple of steps :
**Adding a new IDL file (which contains specifications)
**Creating the Rust file which has implementations of the things specified in IDL.
**Listing the Rust file in mod.rs file.
*After that comes the creation of a StyleSheetList interface. Which represents an ordered collection of CSS style sheets. And basically because it's another interface, again the .webidl and .rs files need to be implemented.
*Adding the attribute <code>stylesheets</code> to the <code>Document.webidl</code>.
*In the three steps just mentioned some guidelines about implementation must be followed, like the return types of certain methods.
*Run the tests specified by the mozilla team.
*Finally updating the interfaces.html, and adding the new interface names.

The Subsequent steps are:
*making the <code>stylesheets</code> member of <code>Document</code> store the associated <code>Element</code> along with the actual implementation of <code>Stylesheet</code> and adding a member to <code>StyleSheet</code> for the associated element, and implement the <code>ownerNode</code> attribute of <code>StyleSheet</code> using this.
*create the CSSStyleSheet interface, containing an <code>Arc<Stylesheet></code> member. Add a method to <code>Document</code> that returns a new <code>CSSStyleSheet</code> instance for a particular index in the <code>stylesheets</code> member.
*creating the CSSRule interface which represents an abstract, base CSS Rule. It is done using the Webidl format.
*creating the CSSRuleList interface and implementing <code>CSSStyleSheet.cssRules</code> which is an array like object containing an ordered collection of CSS rules.
*implementing the <code>insertRule</code> and <code>deleteRule</code> methods of <code>CSSStyleSheet</code> to allow mutation of the contents of the vector in the <code>rules</code> member of the <code>Stylesheet</code>.
*creating the CSSStyleRule interface that extends the CSSRule interface and making <code>cssRules</code> return <code>CSSStyleRule</code> values for appropriate rules.

=='''Implementation'''==
==='''Initial Steps'''===
The following steps were followed to meet the project requirements as per this github page.
===='''Step 1'''====
We had to implement the StyleSheet interface for which we had to create two file: stylesheet.rs and StyleSheet.webidl and included stylesheet interface in the mod.rs file.
In the StyleSheet interface we avoided the three methods: ownerNode, parentStyleSheet and media as they could not be trivially implemented and the instructions were clear to avoid such methods.

===='''Step 2'''====
We had to implement StyleSheetList interface for which we had to create two file: stylesheetlist.rs and StyleSheetList.webidl and included stylesheetlist interface in the mod.rs file.
We used JS<Document> instead of [ArrayClass] as [ArrayClass] is not yet supported by Servo.
In the StyleSheetList interface we did not implement the getter as we do not have a list of stylesheets/scripts/dom.

===='''Step 3'''====
We had to implement a partial interface Document with an attribute as styleSheets. The declaration of the interface was done in Document.webidl and its implementation was done in document.rs file. The implementation returned a new instance of StyleSheetList referencing the current document.

==='''Subsequent Steps'''===

===='''Step 1'''====

We will be making changes in the <code>Document.rs</code> file to make the <code>stylesheets</code> member store the associated Element. We will then implement the ownerNode attribute in the StyleSheet inteface by making changes in the <code>StyleSheet.webidl</code> and <code>stylesheet.rs</code>. We would just declare <code>ownerNode</code> attribute in the .webidl and give its implementation in .rs file.

===='''Step 2'''====

We will be making a new interface named as <code>CSSStyleSheet</code>. In the <code>Document.rs</code> file, we will create a method to return the <code>CSSStyleSheet</code> from the <code>stylesheets</code> member of the Document by giving a particular index as the input.

===='''Step 3'''====

As the next step, we will be creating the <code>CSSRule</code> interface which has attributes like <code>type</code>, <code>cssText</code>, <code>parentRule</code> and <code>parentStyleSheet</code>. This interface will also have several constants like <code>STYLE_RULE</code>, <code>CHARSET_RULE</code> , <code>IMPORT_RULE, MEDIA_RULE</code>, <code>FONT_FACE_RULE</code>, <code>PAGE_RULE, MARGIN_RULE</code> and <code>NAMESPACE_RULE</code>.
This will require us to create two files: <code>CSSRule.webidl</code> and <code>cssrule.rs</code>

===='''Step 4'''====

We will be creating <code>CSSRuleList</code> interface by creating 2 files: <code>CSSRuleList.webidl</code> and <code>CSSRulelist.rs</code>. This interface will have one attribute, which is length and a getter which returns the <code>CSSRule</code> at a particular index. We will also implement <code>CSSStyleSheet.cssRules</code>

===='''Step 5'''====

We will make <code>rules</code> member of the <code>StyleSheet</code> type which contains a RefCell and implement the <code>insertRule</code> and <code>deleteRule</code> methods of <code>CSSStyleSheet</code>.

===='''Step 6'''====

We will be creating a new interface <code>CSSStyleRule</code> , by making 2 files: <code>CSSStyleRule.webidl<code> and <code>CSSStyleRule.rs</code>. The interface will contain two attributes, namely, <code>selectorText</code> and <code>CSSStyleDeclaration</code> style. The <code>cssRules</code> will be implemented to return <code>CSSStyleRule</code> values for appropriate rules.

=='''Design Principles'''==
In this mozilla project, we are asked to strictly follow the existing design patterns and coding conventions. The main aim of this project is to add and modify interfaces. Interfaces allow developers to follow a clean design principle wherein they do not have to program to classes. It is too easy to add a dependency on a class. In order to avoid that kind of dependency on the implementation i.e. classes, developers can program to interfaces. This type of design pattern is an architectural pattern and makes the code more modular and object oriented. Programming to an interface has a flavor of DRY principle because even if the underlying implementation changes, the handle to the implementation is an interface and that does not change. In this way, our mozilla project becomes more modular and object oriented. Servo has a utility of tests that checks the coding standards followed by Mozilla on this project. We will execute the following utility tests command.
<code>./mach test-tidy</code> Any issues encountered by executing this test can be flagged before generating the pull request. This ensures that the developers follow the coding standards.

=='''Testing'''==
Following are the steps to run all the tests:
1. Install the pre-requisites required for servo as mentioned here
2. Run the following commands
cd
git clone https://github.com/mohammed-alfatih/servo.git
cd servo
./mach build --release
'''Note''': It may take around 30 mins to build
./mach test-wpt /tests/wpt/html/dom/interfaces.html
You will see that all tests pass as expected.

'''Note''': There were no predefined test cases mentioned for our project. So now you will see 0 testcases. As far as we know there is no way to test this from UI.

=='''Conclusion'''==
We have tried to implement the most commonly-used portions of the CSSOM API specification to increase Servo's compatibility with existing webpages <ref>https://github.com/servo/servo/wiki/CSSOM-student-project</ref>. We have created two interfaces, StyleSheet and StyleSheetList in our initial steps. As a part of our subsequent steps, we would be adding 4 new interfaces: CSSStyleSheet, CSSRule, CSSRuleList and the CSSStyleRule interface. We have implemented only the obvious methods for these interfaces so that more advanced work can be done to make this CSSOM API fully functional keeping our work as the basis.

=='''References'''==
<references/>

CSC/ECE 517 Spring 2016/Implement Common Parts of the CSSOM API

2016-04-08T21:14:16Z

Maalbash: /* Conclusion */

=='''Introduction'''==

Cascading Style Sheets ([https://en.wikipedia.org/wiki/Cascading_Style_Sheets CSS]) is a style sheet language used for describing the presentation of a document written in a markup language. Although most often used to set the visual style of web pages and user interfaces written in [https://en.wikipedia.org/wiki/HTML HTML] and [https://en.wikipedia.org/wiki/XHTML XHTML], the language can be applied to any [https://en.wikipedia.org/wiki/XML XML] document, including plain XML, [https://en.wikipedia.org/wiki/Scalable_Vector_Graphics SVG] and [https://en.wikipedia.org/wiki/XUL XUL], and is applicable to rendering in speech, or on other media. Along with HTML and [https://en.wikipedia.org/wiki/JavaScript JavaScript], CSS is a cornerstone technology used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications

==='''CSSOM'''===
CSSOM which is the CSS Object Model defines APIs (including generic parsing and serialization rules) for media queries, selectors, and CSS itself<ref>https://drafts.csswg.org/cssom/</ref>. The core features of the CSSOM are oriented towards providing basic capabilities to author-defined scripts to permit access to and manipulation of style related state information and processes. CSSOM aims at proving a way to access the CSS style classes and properties. One can even modify the CSS rules using this API. These changes can be targeted to affect individual elements or the whole webpage. <ref>https://github.com/servo/servo/wiki/CSSOM-student-project</ref>. CSSOM is actually a collection of all the CSS stylesheets found on a web page which is very similar to Document Object Model (DOM) but only stores collection of CSS instead of HTML. <ref>https://varvy.com/performance/cssom.html</ref>. CSSOM identifies which elements on your webpage require styling and modifies them. It is also used to optimize the speed at which webpages get loaded.
It is an integral part of the process that is used to display content on a webpage. The web browser first creates a DOM by examining the HTMLs, then creates a CSSOM by examining the CSS stylesheets. It then creates a render tree by comibining the DOM and the CSSOM and displays the webpage.<ref>https://varvy.com/performance/cssom.html</ref>.

==='''Rust'''===

We can organize different languages on a spectrum with control on one end and safety on the other. Languages like C and C++ fall on the end of the side of control, where as on the other side we have languages like Javascript, Ruby, Python, etc. What Rust does is stepping off this line. What it does is not a tradeoff between control and safety, but it provides you both the low level of control found in C and C++, and the high level of safety in JavaScript and Python. The three concepts that distinguish rust from other programming languages are: Ownership, Borrowing and lifetime. Ownership is how Rust achieves its largest goal, memory safety.<ref>https://en.wikipedia.org/wiki/Rust_(programming_language)</ref>

==='''Servo'''===

Servo is a project in [https://en.wikipedia.org/wiki/Mozilla Mozilla] research to write a parallel layout engine in Rust. It aims to achieve better parallelism, security, modularity and performance. Servo is built with Cargo, the rust package manager. It currently supports 64bit OSX, 64bit Linux, Android, and Gonk(Firefox OS).<ref>https://servo.org</ref>

=='''Project Description'''==

The project is to go through the following steps in a somewhat linear order:
*Compiling servo on a machine and making sure it runs on a specific url. Then emailing the mozilla mailing list to introduce the group.
*Creating a StyleSheet interface which represents an abstract, base style sheet. This creation requires a couple of steps :
**Adding a new IDL file (which contains specifications)
**Creating the Rust file which has implementations of the things specified in IDL.
**Listing the Rust file in mod.rs file.
*After that comes the creation of a StyleSheetList interface. Which represents an ordered collection of CSS style sheets. And basically because it's another interface, again the .webidl and .rs files need to be implemented.
*Adding the attribute <code>stylesheets</code> to the <code>Document.webidl</code>.
*In the three steps just mentioned some guidelines about implementation must be followed, like the return types of certain methods.
*Run the tests specified by the mozilla team.
*Finally updating the interfaces.html, and adding the new interface names.

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

=='''Implementation'''==
==='''Initial Steps'''===
The following steps were followed to meet the project requirements as per this github page.
===='''Step 1'''====
We had to implement the StyleSheet interface for which we had to create two file: stylesheet.rs and StyleSheet.webidl and included stylesheet interface in the mod.rs file.
In the StyleSheet interface we avoided the three methods: ownerNode, parentStyleSheet and media as they could not be trivially implemented and the instructions were clear to avoid such methods.

===='''Step 2'''====
We had to implement StyleSheetList interface for which we had to create two file: stylesheetlist.rs and StyleSheetList.webidl and included stylesheetlist interface in the mod.rs file.
We used JS<Document> instead of [ArrayClass] as [ArrayClass] is not yet supported by Servo.
In the StyleSheetList interface we did not implement the getter as we do not have a list of stylesheets/scripts/dom.

===='''Step 3'''====
We had to implement a partial interface Document with an attribute as styleSheets. The declaration of the interface was done in Document.webidl and its implementation was done in document.rs file. The implementation returned a new instance of StyleSheetList referencing the current document.

==='''Subsequent Steps'''===

===='''Step 1'''====

We will be making changes in the <code>Document.rs</code> file to make the <code>stylesheets</code> member store the associated <code>Element</code>. We're also going to implement the following:

===='''Step 2'''====

We will also implement the <code>.webidl</code> and <code>.rs</code> files for the following:

*CSSStyleSheet interface
*CSSRule interface
*CSSRuleList interface
*CSSStyleRule interface

=='''Testing'''==
Following are the steps to run all the tests:
1. Install the pre-requisites required for servo as mentioned here
2. Run the following commands
cd
git clone https://github.com/mohammed-alfatih/servo.git
cd servo
./mach build --release
'''Note''': It may take around 30 mins to build
./mach test-wpt /tests/wpt/html/dom/interfaces.html
You will see that all tests pass as expected.

'''Note''': There were no predefined test cases mentioned for our project. So now you will see 0 testcases. As far as we know there is no way to test this from UI.

=='''Conclusion'''==
We have tried to implement the most commonly-used portions of the CSSOM API specification to increase Servo's compatibility with existing webpages <ref>https://github.com/servo/servo/wiki/CSSOM-student-project</ref>. We have created two interfaces, StyleSheet and StyleSheetList in our initial steps. As a part of our subsequent steps, we would be adding 4 new interfaces: CSSStyleSheet, CSSRule, CSSRuleList and the CSSStyleRule interface. We have implemented only the obvious methods for these interfaces so that more advanced work can be done to make this CSSOM API fully functional keeping our work as the basis.

=='''References'''==
<references/>

CSC/ECE 517 Spring 2016/Implement Common Parts of the CSSOM API

2016-04-08T21:02:17Z

Maalbash: /* CSSOM */

CSC/ECE 517 Spring 2016/Implement Common Parts of the CSSOM API

2016-04-08T21:00:07Z

Maalbash: /* Project Description */

CSC/ECE 517 Spring 2016/Implement Common Parts of the CSSOM API

2016-04-08T20:50:08Z

Maalbash:

CSC/ECE 517 Spring 2016/Implement Common Parts of the CSSOM API

2016-04-08T20:48:02Z

Maalbash: /* Project Description */

CSC/ECE 517 Spring 2016/Implement Common Parts of the CSSOM API

2016-04-08T20:38:34Z

Maalbash: /* Rust */

CSC/ECE 517 Spring 2016/Implement Common Parts of the CSSOM API

2016-04-08T20:15:49Z

Maalbash:

CSC/ECE 517 Spring 2016/Implement Common Parts of the CSSOM API

2016-04-04T23:22:22Z

Maalbash: /* Subsequent Steps */

CSC/ECE 517 Spring 2016/Implement Common Parts of the CSSOM API

2016-04-04T23:21:45Z

Maalbash: /* Subsequent Steps */

CSC/ECE 517 Spring 2016/Implement Common Parts of the CSSOM API

2016-04-04T23:20:12Z

Maalbash: /* Subsequent Steps */

CSC/ECE 517 Spring 2016/Implement Common Parts of the CSSOM API

2016-04-04T23:18:20Z

Maalbash: /* Implementation */

CSC/ECE 517 Spring 2016/Implement Common Parts of the CSSOM API

2016-04-04T23:03:05Z

Maalbash: /* Project Description */

CSC/ECE 517 Spring 2016/Implement Common Parts of the CSSOM API

2016-04-04T22:49:06Z

Maalbash: /* Project Description */

CSC/ECE 517 Spring 2016/Implement Common Parts of the CSSOM API

2016-04-01T02:07:36Z

Maalbash:

CSC/ECE 517 Spring 2016/Implement Common Parts of the CSSOM API

2016-04-01T02:05:14Z

Maalbash:

File:Doc webidl.png

2016-04-01T02:02:29Z

Maalbash:

File:Doc rs.png

2016-04-01T02:02:04Z

Maalbash:

File:Stylesheetlist webidl.png

2016-04-01T02:01:45Z

Maalbash:

File:Part of stylesheetlist.png

2016-04-01T02:01:32Z

Maalbash:

File:Stylesheet webidl.png

2016-04-01T02:01:19Z

Maalbash:

File:Part of stylesheet.png

2016-04-01T02:00:52Z

Maalbash: uploaded a new version of "File:Part of stylesheet.png": Reverted to version as of 01:57, 1 April 2016

File:Part of stylesheet.png

2016-04-01T02:00:11Z

Maalbash: uploaded a new version of "File:Part of stylesheet.png"

File:Part of stylesheet.png

2016-04-01T01:57:30Z

Maalbash:

CSC/ECE 517 Spring 2016/Implement Common Parts of the CSSOM API

2016-04-01T01:57:07Z

Maalbash:

CSC/ECE 517 Spring 2016/Implement Common Parts of the CSSOM API

2016-04-01T01:34:30Z

Maalbash:

CSC/ECE 517 Spring 2016/Implement Common Parts of the CSSOM API

2016-04-01T01:31:47Z

Maalbash: /* Introduction */

CSC/ECE 517 Spring 2016/Implement Common Parts of the CSSOM API

2016-04-01T01:27:59Z

Maalbash: /* Introduction */

CSC/ECE 517 Spring 2016/Implement Common Parts of the CSSOM API

2016-03-26T22:28:55Z

Maalbash: /* Introduction */

=='''Introduction'''==

Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language.[1] Although most often used to set the visual style of web pages and user interfaces written in HTML and XHTML, the language can be applied to any XML document, including plain XML, SVG and XUL, and is applicable to rendering in speech, or on other media. Along with HTML and JavaScript, CSS is a cornerstone technology used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications

=='''CSSOM'''==
CSSOM (CSS object model) defines APIs (including generic parsing and serialization rules) for media queries, selectors, and CSS itself.
The core features of the CSSOM are oriented towards providing basic capabilities to author-defined scripts to permit access to and manipulation of style related state information and processes.

=='''Servo'''==

Servo is a project in Mozilla research to write a parallel layout engine in rust. It aims to achieve better parallelism, security, modularity and performance. Servo is built with Cargo, the rust package manager. It currently supports 64bit OSX, 64bit Linux, Android, and Gonk(Firefox OS).

=='''Rust'''==

We can organize different languages on a spectrum with control on one end and safety on the other. Languages like C and C++ fall on the end of the side of control, where as on the other side we have languages like Javascript, Ruby, Python, etc.
What Rust does is stepping off this line. What it does is not a tradeoff between control and safety, but it provides you both the low level of control found in C and C++, and the high level of safety in JavaScript and Python.
The three concepts that distinguish rust from other programming languages are: Ownership, Borrowing and lifetime. Ownership is how Rust achieves its largest goal, memory safety.

=='''Project Description'''==

The project initial steps were described as the following:
*compile Servo and ensure that it runs on <code>tests/html/about-mozilla.html</code>
*email the <code>mozilla.dev.servo</code> mailing list introducing your group and your progress
*create the <code>StyleSheet</code> 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 <code>StyleSheetList</code> interface. Leave <code>[ArrayClass]</code> commented out, since it is not yet supported by Servo. Store a <code>JS<Document></code> member to allow accessing a document's stylesheets.
*add the <code>styleSheets</code> attribute from the Document extension to <code>Document.webidl</code>, and make it return a new instance of <code>StyleSheetList</code> referencing the current document.
*run <code>./mach test-wpt</code> <code>/tests/wpt/html/dom/interfaces.html</code> and update the test result expectations according to the documentation
*update <code>tests/wpt/mozilla/tests/mozilla/interfaces.html</code> to add the new interface names and allow the test to pass

=='''Implementation'''==
The following steps were followed to meet the project requirements as per this github page.
==='''Step 1'''===
We had to implement the StyleSheet interface for which we had to create two file: stylesheet.rs and StyleSheet.webidl and included stylesheet interface in the mod.rs file.
In the StyleSheet interface we avoided the three methods: ownerNode, parentStyleSheet and media as they could not be trivially implemented and the instructions were clear to avoid such methods.

==='''Step 2'''===
We had to implement StyleSheetList interface for which we had to create two file: stylesheetlist.rs and StyleSheetList.webidl and included stylesheetlist interface in the mod.rs file.
We used JS<Document> instead of [ArrayClass] as [ArrayClass] is not yet supported by Servo.
In the StyleSheetList interface we did not implement the getter as we do not have a list of stylesheets/scripts/dom.

==='''Step 3'''===
We had to implement a partial interface Document with an attribute as styleSheets. The declaration of the interface was done in Document.webidl and its implementation was done in document.rs file. The implementation returned a new instance of StyleSheetList referencing the current docume[Snapshots of .webidl and .rs from Git]nt.

=='''Testing'''==
Following are the steps to run all the tests:
1. Install the pre-requisites required for servo as mentioned here
2. Run the following commands
cd
git clone https://github.com/mohammed-alfatih/servo.git
cd servo
./mach build --release
'''Note''': It may take around 30 mins to build
./mach test-wpt /tests/wpt/html/dom/interfaces.html
You will see that all tests pass as expected.

'''Note''': There were no predefined test cases mentioned for our project. So now you will see 0 testcases. We added the two new interfaces in tests/wpt/mozilla/tests/mozilla/interfaces.html

CSC/ECE 517 Spring 2016/Implement Common Parts of the CSSOM API

2016-03-26T22:23:06Z

Maalbash:

=='''Introduction'''==

Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language. Although most often used to set the visual style of web pages and user interfaces written in HTML and XHTML, the language can be applied to any XML document, including plain XML, SVG and XUL, and is applicable to rendering in speech, or on other media. Along with HTML and JavaScript, CSS is a cornerstone technology used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications

=='''CSSOM'''==
CSSOM (CSS object model) defines APIs (including generic parsing and serialization rules) for media queries, selectors, and CSS itself.
The core features of the CSSOM are oriented towards providing basic capabilities to author-defined scripts to permit access to and manipulation of style related state information and processes.

=='''Servo'''==

Servo is a project in Mozilla research to write a parallel layout engine in rust. It aims to achieve better parallelism, security, modularity and performance. Servo is built with Cargo, the rust package manager. It currently supports 64bit OSX, 64bit Linux, Android, and Gonk(Firefox OS).

=='''Rust'''==

We can organize different languages on a spectrum with control on one end and safety on the other. Languages like C and C++ fall on the end of the side of control, where as on the other side we have languages like Javascript, Ruby, Python, etc.
What Rust does is stepping off this line. What it does is not a tradeoff between control and safety, but it provides you both the low level of control found in C and C++, and the high level of safety in JavaScript and Python.
The three concepts that distinguish rust from other programming languages are: Ownership, Borrowing and lifetime. Ownership is how Rust achieves its largest goal, memory safety.

=='''Project Description'''==

The project initial steps were described as the following:
*compile Servo and ensure that it runs on <code>tests/html/about-mozilla.html</code>
*email the <code>mozilla.dev.servo</code> mailing list introducing your group and your progress
*create the <code>StyleSheet</code> 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 <code>StyleSheetList</code> interface. Leave <code>[ArrayClass]</code> commented out, since it is not yet supported by Servo. Store a <code>JS<Document></code> member to allow accessing a document's stylesheets.
*add the <code>styleSheets</code> attribute from the Document extension to <code>Document.webidl</code>, and make it return a new instance of <code>StyleSheetList</code> referencing the current document.
*run <code>./mach test-wpt</code> <code>/tests/wpt/html/dom/interfaces.html</code> and update the test result expectations according to the documentation
*update <code>tests/wpt/mozilla/tests/mozilla/interfaces.html</code> to add the new interface names and allow the test to pass

=='''Implementation'''==
The following steps were followed to meet the project requirements as per this github page.
==='''Step 1'''===
We had to implement the StyleSheet interface for which we had to create two file: stylesheet.rs and StyleSheet.webidl and included stylesheet interface in the mod.rs file.
In the StyleSheet interface we avoided the three methods: ownerNode, parentStyleSheet and media as they could not be trivially implemented and the instructions were clear to avoid such methods.

==='''Step 2'''===
We had to implement StyleSheetList interface for which we had to create two file: stylesheetlist.rs and StyleSheetList.webidl and included stylesheetlist interface in the mod.rs file.
We used JS<Document> instead of [ArrayClass] as [ArrayClass] is not yet supported by Servo.
In the StyleSheetList interface we did not implement the getter as we do not have a list of stylesheets/scripts/dom.

==='''Step 3'''===
We had to implement a partial interface Document with an attribute as styleSheets. The declaration of the interface was done in Document.webidl and its implementation was done in document.rs file. The implementation returned a new instance of StyleSheetList referencing the current docume[Snapshots of .webidl and .rs from Git]nt.

=='''Testing'''==
Following are the steps to run all the tests:
1. Install the pre-requisites required for servo as mentioned here
2. Run the following commands
cd
git clone https://github.com/mohammed-alfatih/servo.git
cd servo
./mach build --release
'''Note''': It may take around 30 mins to build
./mach test-wpt /tests/wpt/html/dom/interfaces.html
You will see that all tests pass as expected.

'''Note''': There were no predefined test cases mentioned for our project. So now you will see 0 testcases. We added the two new interfaces in tests/wpt/mozilla/tests/mozilla/interfaces.html

CSC/ECE 517 Spring 2016/Implement Common Parts of the CSSOM API

2016-03-26T22:19:59Z

Maalbash: /* Introduction */

=='''Introduction'''==

Cascading Style Sheets ([[CSS]]) is a style sheet language used for describing the presentation of a document written in a markup language. Although most often used to set the visual style of web pages and user interfaces written in HTML and XHTML, the language can be applied to any XML document, including plain XML, SVG and XUL, and is applicable to rendering in speech, or on other media. Along with HTML and JavaScript, CSS is a cornerstone technology used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications

=='''CSSOM'''==
CSSOM (CSS object model) defines APIs (including generic parsing and serialization rules) for media queries, selectors, and CSS itself.
The core features of the CSSOM are oriented towards providing basic capabilities to author-defined scripts to permit access to and manipulation of style related state information and processes.

=='''Servo'''==

Servo is a project in Mozilla research to write a parallel layout engine in rust. It aims to achieve better parallelism, security, modularity and performance. Servo is built with Cargo, the rust package manager. It currently supports 64bit OSX, 64bit Linux, Android, and Gonk(Firefox OS).

=='''Rust'''==

We can organize different languages on a spectrum with control on one end and safety on the other. Languages like C and C++ fall on the end of the side of control, where as on the other side we have languages like Javascript, Ruby, Python, etc.
What Rust does is stepping off this line. What it does is not a tradeoff between control and safety, but it provides you both the low level of control found in C and C++, and the high level of safety in JavaScript and Python.
The three concepts that distinguish rust from other programming languages are: Ownership, Borrowing and lifetime. Ownership is how Rust achieves its largest goal, memory safety.

=='''Project Description'''==

The project initial steps were described as the following:
*compile Servo and ensure that it runs on <code>tests/html/about-mozilla.html</code>
*email the <code>mozilla.dev.servo</code> mailing list introducing your group and your progress
*create the <code>StyleSheet</code> 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 <code>StyleSheetList</code> interface. Leave <code>[ArrayClass]</code> commented out, since it is not yet supported by Servo. Store a <code>JS<Document></code> member to allow accessing a document's stylesheets.
*add the <code>styleSheets</code> attribute from the Document extension to <code>Document.webidl</code>, and make it return a new instance of <code>StyleSheetList</code> referencing the current document.
*run <code>./mach test-wpt</code> <code>/tests/wpt/html/dom/interfaces.html</code> and update the test result expectations according to the documentation
*update <code>tests/wpt/mozilla/tests/mozilla/interfaces.html</code> to add the new interface names and allow the test to pass

=='''Implementation'''==
The following steps were followed to meet the project requirements as per this github page.
==='''Step 1'''===
We had to implement the StyleSheet interface for which we had to create two file: stylesheet.rs and StyleSheet.webidl and included stylesheet interface in the mod.rs file.
In the StyleSheet interface we avoided the three methods: ownerNode, parentStyleSheet and media as they could not be trivially implemented and the instructions were clear to avoid such methods.

==='''Step 2'''===
We had to implement StyleSheetList interface for which we had to create two file: stylesheetlist.rs and StyleSheetList.webidl and included stylesheetlist interface in the mod.rs file.
We used JS<Document> instead of [ArrayClass] as [ArrayClass] is not yet supported by Servo.
In the StyleSheetList interface we did not implement the getter as we do not have a list of stylesheets/scripts/dom.

==='''Step 3'''===
We had to implement a partial interface Document with an attribute as styleSheets. The declaration of the interface was done in Document.webidl and its implementation was done in document.rs file. The implementation returned a new instance of StyleSheetList referencing the current docume[Snapshots of .webidl and .rs from Git]nt.

=='''Testing'''==
Following are the steps to run all the tests:
1. Install the pre-requisites required for servo as mentioned here
2. Run the following commands
cd
git clone https://github.com/mohammed-alfatih/servo.git
cd servo
./mach build --release
'''Note''': It may take around 30 mins to build
./mach test-wpt /tests/wpt/html/dom/interfaces.html
You will see that all tests pass as expected.

'''Note''': There were no predefined test cases mentioned for our project. So now you will see 0 testcases. We added the two new interfaces in tests/wpt/mozilla/tests/mozilla/interfaces.html

CSC/ECE 517 Spring 2016/Implement Common Parts of the CSSOM API

2016-03-26T22:19:39Z

Maalbash: /* Introduction */

=='''Introduction'''==

Cascading Style Sheets ([CSS]) is a style sheet language used for describing the presentation of a document written in a markup language. Although most often used to set the visual style of web pages and user interfaces written in HTML and XHTML, the language can be applied to any XML document, including plain XML, SVG and XUL, and is applicable to rendering in speech, or on other media. Along with HTML and JavaScript, CSS is a cornerstone technology used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications

=='''CSSOM'''==
CSSOM (CSS object model) defines APIs (including generic parsing and serialization rules) for media queries, selectors, and CSS itself.
The core features of the CSSOM are oriented towards providing basic capabilities to author-defined scripts to permit access to and manipulation of style related state information and processes.

=='''Servo'''==

Servo is a project in Mozilla research to write a parallel layout engine in rust. It aims to achieve better parallelism, security, modularity and performance. Servo is built with Cargo, the rust package manager. It currently supports 64bit OSX, 64bit Linux, Android, and Gonk(Firefox OS).

=='''Rust'''==

We can organize different languages on a spectrum with control on one end and safety on the other. Languages like C and C++ fall on the end of the side of control, where as on the other side we have languages like Javascript, Ruby, Python, etc.
What Rust does is stepping off this line. What it does is not a tradeoff between control and safety, but it provides you both the low level of control found in C and C++, and the high level of safety in JavaScript and Python.
The three concepts that distinguish rust from other programming languages are: Ownership, Borrowing and lifetime. Ownership is how Rust achieves its largest goal, memory safety.

=='''Project Description'''==

The project initial steps were described as the following:
*compile Servo and ensure that it runs on <code>tests/html/about-mozilla.html</code>
*email the <code>mozilla.dev.servo</code> mailing list introducing your group and your progress
*create the <code>StyleSheet</code> 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 <code>StyleSheetList</code> interface. Leave <code>[ArrayClass]</code> commented out, since it is not yet supported by Servo. Store a <code>JS<Document></code> member to allow accessing a document's stylesheets.
*add the <code>styleSheets</code> attribute from the Document extension to <code>Document.webidl</code>, and make it return a new instance of <code>StyleSheetList</code> referencing the current document.
*run <code>./mach test-wpt</code> <code>/tests/wpt/html/dom/interfaces.html</code> and update the test result expectations according to the documentation
*update <code>tests/wpt/mozilla/tests/mozilla/interfaces.html</code> to add the new interface names and allow the test to pass

=='''Implementation'''==
The following steps were followed to meet the project requirements as per this github page.
==='''Step 1'''===
We had to implement the StyleSheet interface for which we had to create two file: stylesheet.rs and StyleSheet.webidl and included stylesheet interface in the mod.rs file.
In the StyleSheet interface we avoided the three methods: ownerNode, parentStyleSheet and media as they could not be trivially implemented and the instructions were clear to avoid such methods.

==='''Step 2'''===
We had to implement StyleSheetList interface for which we had to create two file: stylesheetlist.rs and StyleSheetList.webidl and included stylesheetlist interface in the mod.rs file.
We used JS<Document> instead of [ArrayClass] as [ArrayClass] is not yet supported by Servo.
In the StyleSheetList interface we did not implement the getter as we do not have a list of stylesheets/scripts/dom.

==='''Step 3'''===
We had to implement a partial interface Document with an attribute as styleSheets. The declaration of the interface was done in Document.webidl and its implementation was done in document.rs file. The implementation returned a new instance of StyleSheetList referencing the current docume[Snapshots of .webidl and .rs from Git]nt.

=='''Testing'''==
Following are the steps to run all the tests:
1. Install the pre-requisites required for servo as mentioned here
2. Run the following commands
cd
git clone https://github.com/mohammed-alfatih/servo.git
cd servo
./mach build --release
'''Note''': It may take around 30 mins to build
./mach test-wpt /tests/wpt/html/dom/interfaces.html
You will see that all tests pass as expected.

'''Note''': There were no predefined test cases mentioned for our project. So now you will see 0 testcases. We added the two new interfaces in tests/wpt/mozilla/tests/mozilla/interfaces.html

CSC/ECE 517 Spring 2016/Implement Common Parts of the CSSOM API

2016-03-26T22:19:12Z

Maalbash: /* Introduction */

CSC/ECE 517 Spring 2016/Implement Common Parts of the CSSOM API

2016-03-26T22:18:58Z

Maalbash: /* Testing */

CSC/ECE 517 Spring 2016/Implement Common Parts of the CSSOM API

2016-03-24T03:50:01Z

Maalbash:

=='''Introduction'''==

Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language. Although most often used to set the visual style of web pages and user interfaces written in HTML and XHTML, the language can be applied to any XML document, including plain XML, SVG and XUL, and is applicable to rendering in speech, or on other media. Along with HTML and JavaScript, CSS is a cornerstone technology used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications

=='''CSSOM'''==
CSSOM (CSS object model) defines APIs (including generic parsing and serialization rules) for media queries, selectors, and CSS itself.
The core features of the CSSOM are oriented towards providing basic capabilities to author-defined scripts to permit access to and manipulation of style related state information and processes.

=='''Servo'''==

Servo is a project in Mozilla research to write a parallel layout engine in rust. It aims to achieve better parallelism, security, modularity and performance. Servo is built with Cargo, the rust package manager. It currently supports 64bit OSX, 64bit Linux, Android, and Gonk(Firefox OS).

=='''Rust'''==

We can organize different languages on a spectrum with control on one end and safety on the other. Languages like C and C++ fall on the end of the side of control, where as on the other side we have languages like Javascript, Ruby, Python, etc.
What Rust does is stepping off this line. What it does is not a tradeoff between control and safety, but it provides you both the low level of control found in C and C++, and the high level of safety in JavaScript and Python.
The three concepts that distinguish rust from other programming languages are: Ownership, Borrowing and lifetime. Ownership is how Rust achieves its largest goal, memory safety.

=='''Project Description'''==

The project initial steps were described as the following:
*compile Servo and ensure that it runs on <code>tests/html/about-mozilla.html</code>
*email the <code>mozilla.dev.servo</code> mailing list introducing your group and your progress
*create the <code>StyleSheet</code> 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 <code>StyleSheetList</code> interface. Leave <code>[ArrayClass]</code> commented out, since it is not yet supported by Servo. Store a <code>JS<Document></code> member to allow accessing a document's stylesheets.
*add the <code>styleSheets</code> attribute from the Document extension to <code>Document.webidl</code>, and make it return a new instance of <code>StyleSheetList</code> referencing the current document.
*run <code>./mach test-wpt</code> <code>/tests/wpt/html/dom/interfaces.html</code> and update the test result expectations according to the documentation
*update <code>tests/wpt/mozilla/tests/mozilla/interfaces.html</code> to add the new interface names and allow the test to pass

=='''Implementation'''==
The following steps were followed to meet the project requirements as per this github page.
==='''Step 1'''===
We had to implement the StyleSheet interface for which we had to create two file: stylesheet.rs and StyleSheet.webidl and included stylesheet interface in the mod.rs file.
In the StyleSheet interface we avoided the three methods: ownerNode, parentStyleSheet and media as they could not be trivially implemented and the instructions were clear to avoid such methods.

==='''Step 2'''===
We had to implement StyleSheetList interface for which we had to create two file: stylesheetlist.rs and StyleSheetList.webidl and included stylesheetlist interface in the mod.rs file.
We used JS<Document> instead of [ArrayClass] as [ArrayClass] is not yet supported by Servo.
In the StyleSheetList interface we did not implement the getter as we do not have a list of stylesheets/scripts/dom.

==='''Step 3'''===
We had to implement a partial interface Document with an attribute as styleSheets. The declaration of the interface was done in Document.webidl and its implementation was done in document.rs file. The implementation returned a new instance of StyleSheetList referencing the current docume[Snapshots of .webidl and .rs from Git]nt.

=='''Testing'''==
Following are the steps to run all the tests:
1. Install the pre-requisites required for servo as mentioned here
2. Run the following commands
cd
git clone https://github.com/mohammed-alfatih/servo.git
cd servo
./mach build --release
'''Note''': It may take around 30 mins to build
./mach test-wpt /tests/wpt/html/dom/interfaces.html
You will see that all tests pass as expected.

'''Note''': There were no predefined test cases mentioned for our project. So no you will see 0 testcases. We added the two new interfaces in tests/wpt/mozilla/tests/mozilla/interfaces.html