Expertiza_Wiki - User contributions [en]

CSC/ECE 517 Spring 2016 M1602 Make image loads conform with the spec

2016-04-08T18:27:00Z

Smshah4: /* Step 2 */

Making image load conform with the spec 
[https://en.wikipedia.org/wiki/HTML5 HTML 5] specifies a complex model for image loading on a web browser. It has specifications<ref>https://html.spec.whatwg.org/multipage/#the-picture-element</ref> for [https://html.spec.whatwg.org/multipage/#the-picture-element picture element] as well as img element, and browsers need to follow these HTML 5 specifications to conform to the standard. Servo's current implementation of image loading is [http://mxr.mozilla.org/servo/source/components/script/dom/htmlimageelement.rs#107 straightforward, but non-compliant] with HTML 5 standards<ref>https://html.spec.whatwg.org/multipage/</ref> in a number of important ways. The goal of this project is to implement image loading behavior on Servo browser that is more compliant with HTML 5 so its easy to both implement and verify against the text of the specification.
==Introduction==

===Servo===

[https://github.com/servo/servo Servo] is a [https://en.wikipedia.org/wiki/Web_browser web browser] layout engine written in [https://www.mozilla.org/en-US/?v=b Mozilla]'s new [https://en.wikipedia.org/wiki/System_programming_language systems language] [https://en.wikipedia.org/wiki/Rust_(programming_language) Rust]<ref>https://servo.org/</ref>. It is currently being developed by Mozilla Research. The aim of the project is not to create a full browser but rather to create better parallelism<ref>https://www.usenix.org/legacy/event/hotpar09/tech/full_papers/jones/jones.pdf</ref>, security<ref>https://en.wikipedia.org/wiki/Browser_security</ref>, modularity<ref>https://msdn.microsoft.com/en-us/library/ff709921.aspx</ref> and performance. The Servo project is [https://en.wikipedia.org/wiki/Open-source_software open sourced] and receives contributions from individual contributors from around the globe. It currently supports [https://www.linux.com/ Linux], [http://www.apple.com/osx/ OS X], [https://www.microsoft.com/en-us/windows Windows], [https://www.android.com/ Android], and [https://en.wikipedia.org/wiki/Gonk Gonk] (Firefox OS).

===Rust===

Hatched by Mozilla employee Graydon Hoare back in 2009, Rust was built from the ground up using elements from modern programming language design<ref>http://readwrite.com/2015/07/02/mozilla-rust-programming-language-potential/</ref>. Rust is a [https://en.wikipedia.org/wiki/General-purpose_programming_language general-purpose], [https://developer.mozilla.org/ar/docs/multiparadigmlanguage.html multi-paradigm], [https://en.wikipedia.org/wiki/Compiled_language compiled programming] language, supporting pure-functional, imperative-procedural, and object-oriented styles<ref>https://en.wikipedia.org/wiki/Rust_(programming_language)</ref>. It focuses on performance, parallelization, and memory safety and does so because unlike other programming languages it doesn't suffer from "backward-compatibility requirements"<ref>http://readwrite.com/2015/07/02/mozilla-rust-programming-language-potential/</ref>.

==Project Description==
The detailed description of the project can be found [https://github.com/servo/servo/wiki/Image-load-conformance-student-project here].

The steps are as follows:

===Compilation and Build===
* The first step is to compile Servo browser and build it on a local machine. The steps for compiling and building Servo are:
Servo is built with [https://mail.mozilla.org/pipermail/rust-dev/2014-March/009090.html Cargo], the Rust package manager. Mozilla's Mach tools are used to orchestrate the build and other tasks.

git clone https://github.com/servo/servo
cd servo
./mach build --dev
./mach run tests/html/about-mozilla.html

compile Servo and ensure that it runs tests/html/about-mozilla.html

===Initial Steps===
The initial steps for the project were completed as a part of OSS project 2. The functionalities implemented were:
* Define data types to represent the image request concept, and add pending and current requests to the HTMLImageElement type in htmlimageelement.rs . These should subsume the existing fields in HTMLImageElement that are used for storing the image's properties, and the fields of the current request should be used instead.
* Implement the crossOrigin attribute using the make_enumerated_getter / make_setter macros and uncommenting the attribute in HTMLImageElement.webidl
* Implement the currentSrc attribute by adding the appropriate attribute to HTMLImageElement.webidl
* Run ./mach test-wpt tests/wpt/web-platform-tests/html/dom/interfaces.html and adjust the test result expectations according to the documenatation.
* Add a command for the image cache task that accepts a URL and a vector of bytes. This command should instruct the cache to store this data as a newly-complete network request and continue decoding the result into pixel data.

===Subsequent Steps===
The subsequent steps for the project are to be implemented as a part of final semester project. The steps to do are:
* Replace the code in htmlimageelement.rs that instructs the image cache to fetch a URL with code that directly performs a network request (see HTMLScriptElement::prepare for an example that uses the NetworkListener helper and Document::load_async). The result should be sent to the image cache using the newly-added command.
* Implement the parse a srcset attribute algorithm by defining a parse_a_srcset_attribute function in htmlimageelement.rs. Write unit tests demonstrating correctness in tests/unit/script/htmlimageelement.rs (./mach test-unit -p script/dom/htmlimageelement).
* Implement the parse a sizes attribute algorithm by defining a parse_a_sizes_attribute function in htmlimageelement.rs. Write unit tests demonstrating correctness in tests/unit/script/htmlimageelement.rs.
* Implement the normalize the source densities algorithm - create data types for source set and image source.
* Implement the update the source set algorithm by defining a update_the_source_set function in htmlimageelement.rs.
* Implement the select an image source algorithm by defining a select_an_image_source function in htmlimageelement.rs.

==Design Principles==

There were no particular design principles used in this project as it was a modification of existing code. .

We were not supposed to modify the existing design apart from adding a new behaviour/ability for HTMLImageElement. The same principals of the original Servo code can be thought of as being followed by the project.
The main aim was to increase the code coverage and to make the Servo browser more compliant to HMTL 5 standards when it comes to image loading.

We attempted to follow good OO practices throughout development. While using enums and also while defining new methods, we tried to follow the DRY principle in order to avoid repetition of code. Servo has it's own coding standards which are checked by running following command

./mach test-tidy

Issues reported by test are to be fixed before pull request can be generated. This ensures that developers would adhere to coding standards. We have fixed all the issues reported by tidy-test.

==Implementation==
===Initial Steps===
The following steps were followed to meet the project requirements as per this [https://github.com/servo/servo/wiki/Image-load-conformance-student-project github page].

====Step 1====

As we need to define data types to represent the image request concept, and add pending and current requests to the HTMLImageElement type in htmlimageelement.rs . These should subsume the existing fields in HTMLImageElement that are used for storing the image's properties, and the fields of the current request should be used instead.

[[File:ImageRequest.png]]

====Step 2====

As we had to implement the crossOrigin attribute , we uncommented it in the HTMLImageElement.webidl file and then we created a getter and setter method for it in the HTMLImageElement.rd file using the make_enumerated_getter / make_setter macros .

[[File:CrossOrigin_webidl.png]]

HTMLImageElement.rs file

[[File:CrossOrigin.png]]

====Step 3====

implement the currentSrc attribute by adding the appropriate attribute to HTMLImageElement.webidl

[[File:currentSrc.png]]

===Subsequent Steps===
Following is the class diagram for the main classes affected in the project . Class HTMLImageElement (HTMLImageElement.rs file) . Also provided flowcharts for the algorithms we are to implement .

[[File:class_diagram_M1602.png]]
====Step 1====
replace the code in htmlimageelement.rs that instructs the image cache to fetch a URL with code that directly performs a network request (see HTMLScriptElement::prepare for an example that uses the NetworkListener helper and Document::load_async ). The result should be sent to the image cache using the newly-added command.

====Step 2====
implement the parse a srcset attribute algorithm by defining a parse_a_srcset_attribute function in htmlimageelement.rs . Write unit tests demonstrating correctness in tests/unit/script/htmlimageelement.rs ( ./mach test-unit -p script/dom/htmlimageelement )

The flowchart of the above step is :

====Step 3====
implement the parse a sizes attribute algorithm by defining a parse_a_sizes_attribute function in htmlimageelement.rs . Write unit tests demonstrating correctness in tests/unit/script/htmlimageelement.rs .

[[File:parsasize.png]]

====Step 4====
implement the normalize the source densities algorithm - create data types for source set and image source
====Step 5====
implement the update the source set algorithm by defining a update_the_source_set function in htmlimageelement.rs

[[File:updatesrc.png]]

[[File:updatesrc_2.png]]

====Step 6====
implement the select an image source algorithm by defining a select_an_image_source function in htmlimageelement.rs

== Testing ==

Following are the steps to run all the tests for HTMLImageElement:

# Install the pre-requisites required for servo as mentioned [https://github.com/servo/servo/blob/master/README.md here]
# Run the following commands

<code>
cd
</code>

<code>
git clone https://github.com/akhan7/servo.git
</code>

<code>
cd servo
</code>

<code>
./mach build --dev
</code>

'''Note:''' It may take around 30-40 mins to build. Check to see if the build is successful by running

<code>
./mach run tests/html/about-mozilla.html
</code>

The Servo browser should open and load the about-Mozilla web page.
Now open terminal and run

<code>
./mach test-wpt tests/wpt/web-platform-tests/html/dom/interfaces.html
</code>

You will see that all tests pass as expected.

'''Note:''' We have not added any new tests to the test suite as servo follows TDD and tests were previously written for HTML image element. We have just adjusted some of the test expectations for the tests which now pass due to our implementation.

=== Testing From UI ===

Our project cannot be tested from UI since the project aims to make image loading on Servo browser more conformant to HTML5 standards. However you can check that it doesn't break the existing code and the browser runs correctly by running a test page on servo after performing the build as mentioned above.

Run the following command after the project is build:

<code>
./mach run tests/html/about-mozilla.html
</code>

==Pull Request==
Here is our [https://github.com/servo/servo/pull/10134 pull request]. In the link you can see all code snippets changed due to implementing the above steps, as well as integration test progression information.

==References==
<references/>

CSC/ECE 517 Spring 2016 M1602 Make image loads conform with the spec

2016-04-06T20:45:44Z

Smshah4: /* Subsequent Steps */

Making image load conform with the spec 
[https://en.wikipedia.org/wiki/HTML5 HTML 5] specifies a complex model for image loading on a web browser. It has specifications<ref>https://html.spec.whatwg.org/multipage/#the-picture-element</ref> for [https://html.spec.whatwg.org/multipage/#the-picture-element picture element] as well as img element, and browsers need to follow these HTML 5 specifications to conform to the standard. Servo's current implementation of image loading is [http://mxr.mozilla.org/servo/source/components/script/dom/htmlimageelement.rs#107 straightforward, but non-compliant] with HTML 5 standards<ref>https://html.spec.whatwg.org/multipage/</ref> in a number of important ways. The goal of this project is to implement image loading behavior on Servo browser that is more compliant with HTML 5 so its easy to both implement and verify against the text of the specification.
==Introduction==

===Servo===

[https://github.com/servo/servo Servo] is a [https://en.wikipedia.org/wiki/Web_browser web browser] layout engine written in [https://www.mozilla.org/en-US/?v=b Mozilla]'s new [https://en.wikipedia.org/wiki/System_programming_language systems language] [https://en.wikipedia.org/wiki/Rust_(programming_language) Rust]<ref>https://servo.org/</ref>. It is currently being developed by Mozilla Research. The aim of the project is not to create a full browser but rather to create better parallelism<ref>https://www.usenix.org/legacy/event/hotpar09/tech/full_papers/jones/jones.pdf</ref>, security<ref>https://en.wikipedia.org/wiki/Browser_security</ref>, modularity<ref>https://msdn.microsoft.com/en-us/library/ff709921.aspx</ref> and performance. The Servo project is [https://en.wikipedia.org/wiki/Open-source_software open sourced] and receives contributions from individual contributors from around the globe. It currently supports [https://www.linux.com/ Linux], [http://www.apple.com/osx/ OS X], [https://www.microsoft.com/en-us/windows Windows], [https://www.android.com/ Android], and [https://en.wikipedia.org/wiki/Gonk Gonk] (Firefox OS).

===Rust===

Hatched by Mozilla employee Graydon Hoare back in 2009, Rust was built from the ground up using elements from modern programming language design<ref>http://readwrite.com/2015/07/02/mozilla-rust-programming-language-potential/</ref>. Rust is a [https://en.wikipedia.org/wiki/General-purpose_programming_language general-purpose], [https://developer.mozilla.org/ar/docs/multiparadigmlanguage.html multi-paradigm], [https://en.wikipedia.org/wiki/Compiled_language compiled programming] language, supporting pure-functional, imperative-procedural, and object-oriented styles<ref>https://en.wikipedia.org/wiki/Rust_(programming_language)</ref>. It focuses on performance, parallelization, and memory safety and does so because unlike other programming languages it doesn't suffer from "backward-compatibility requirements"<ref>http://readwrite.com/2015/07/02/mozilla-rust-programming-language-potential/</ref>.

==Project Description==
The detailed description of the project can be found [https://github.com/servo/servo/wiki/Image-load-conformance-student-project here].

The steps are as follows:

===Compilation and Build===
* The first step is to compile Servo browser and build it on a local machine. The steps for compiling and building Servo are:
Servo is built with [https://mail.mozilla.org/pipermail/rust-dev/2014-March/009090.html Cargo], the Rust package manager. Mozilla's Mach tools are used to orchestrate the build and other tasks.

git clone https://github.com/servo/servo
cd servo
./mach build --dev
./mach run tests/html/about-mozilla.html

compile Servo and ensure that it runs tests/html/about-mozilla.html

===Initial Steps===
The initial steps for the project were completed as a part of OSS project 2. The functionalities implemented were:
* Define data types to represent the image request concept, and add pending and current requests to the HTMLImageElement type in htmlimageelement.rs . These should subsume the existing fields in HTMLImageElement that are used for storing the image's properties, and the fields of the current request should be used instead.
* Implement the crossOrigin attribute using the make_enumerated_getter / make_setter macros and uncommenting the attribute in HTMLImageElement.webidl
* Implement the currentSrc attribute by adding the appropriate attribute to HTMLImageElement.webidl
* Run ./mach test-wpt tests/wpt/web-platform-tests/html/dom/interfaces.html and adjust the test result expectations according to the documenatation.
* Add a command for the image cache task that accepts a URL and a vector of bytes. This command should instruct the cache to store this data as a newly-complete network request and continue decoding the result into pixel data.

===Subsequent Steps===
The subsequent steps for the project are to be implemented as a part of final semester project. The steps to do are:
* Replace the code in htmlimageelement.rs that instructs the image cache to fetch a URL with code that directly performs a network request (see HTMLScriptElement::prepare for an example that uses the NetworkListener helper and Document::load_async). The result should be sent to the image cache using the newly-added command.
* Implement the parse a srcset attribute algorithm by defining a parse_a_srcset_attribute function in htmlimageelement.rs. Write unit tests demonstrating correctness in tests/unit/script/htmlimageelement.rs (./mach test-unit -p script/dom/htmlimageelement).
* Implement the parse a sizes attribute algorithm by defining a parse_a_sizes_attribute function in htmlimageelement.rs. Write unit tests demonstrating correctness in tests/unit/script/htmlimageelement.rs.
* Implement the normalize the source densities algorithm - create data types for source set and image source.
* Implement the update the source set algorithm by defining a update_the_source_set function in htmlimageelement.rs.
* Implement the select an image source algorithm by defining a select_an_image_source function in htmlimageelement.rs.

==Design Principles==

There were no particular design principles used in this project as it was a modification of existing code. .

We were not supposed to modify the existing design apart from adding a new behaviour/ability for HTMLImageElement. The same principals of the original Servo code can be thought of as being followed by the project.
The main aim was to increase the code coverage and to make the Servo browser more compliant to HMTL 5 standards when it comes to image loading.

We attempted to follow good OO practices throughout development. While using enums and also while defining new methods, we tried to follow the DRY principle in order to avoid repetition of code. Servo has it's own coding standards which are checked by running following command

./mach test-tidy

Issues reported by test are to be fixed before pull request can be generated. This ensures that developers would adhere to coding standards. We have fixed all the issues reported by tidy-test.

==Implementation==
===Initial Steps===
The following steps were followed to meet the project requirements as per this [https://github.com/servo/servo/wiki/Image-load-conformance-student-project github page].

====Step 1====

As we need to define data types to represent the image request concept, and add pending and current requests to the HTMLImageElement type in htmlimageelement.rs . These should subsume the existing fields in HTMLImageElement that are used for storing the image's properties, and the fields of the current request should be used instead.

[[File:ImageRequest.png]]

====Step 2====

As we had to implement the crossOrigin attribute , we uncommented it in the HTMLImageElement.webidl file and then we created a getter and setter method for it in the HTMLImageElement.rd file using the make_enumerated_getter / make_setter macros .

[[File:CrossOrigin_webidl.png]]

HTMLImageElement.rs file

[[File:CrossOrigin.png]]

====Step 3====

implement the currentSrc attribute by adding the appropriate attribute to HTMLImageElement.webidl

[[File:currentSrc.png]]

===Subsequent Steps===
Following is the class diagram for the main classes affected in the project . Class HTMLImageElement (HTMLImageElement.rs file) . Also provided flowcharts for the algorithms we are to implement .

[[File:class_diagram_M1602.png]]
====Step 1====
replace the code in htmlimageelement.rs that instructs the image cache to fetch a URL with code that directly performs a network request (see HTMLScriptElement::prepare for an example that uses the NetworkListener helper and Document::load_async ). The result should be sent to the image cache using the newly-added command.

====Step 2====
implement the parse a srcset attribute algorithm by defining a parse_a_srcset_attribute function in htmlimageelement.rs . Write unit tests demonstrating correctness in tests/unit/script/htmlimageelement.rs ( ./mach test-unit -p script/dom/htmlimageelement )

The flowchart of the above step is :

[[File:parseAsrcset.jpg]]

====Step 3====
implement the parse a sizes attribute algorithm by defining a parse_a_sizes_attribute function in htmlimageelement.rs . Write unit tests demonstrating correctness in tests/unit/script/htmlimageelement.rs .

[[File:parsasize.png]]

====Step 4====
implement the normalize the source densities algorithm - create data types for source set and image source
====Step 5====
implement the update the source set algorithm by defining a update_the_source_set function in htmlimageelement.rs

[[File:updatesrc.png]]

[[File:updatesrc_2.png]]

====Step 6====
implement the select an image source algorithm by defining a select_an_image_source function in htmlimageelement.rs

== Testing ==

Following are the steps to run all the tests for HTMLImageElement:

# Install the pre-requisites required for servo as mentioned [https://github.com/servo/servo/blob/master/README.md here]
# Run the following commands

<code>
cd
</code>

<code>
git clone https://github.com/akhan7/servo.git
</code>

<code>
cd servo
</code>

<code>
./mach build --dev
</code>

'''Note:''' It may take around 30-40 mins to build. Check to see if the build is successful by running

<code>
./mach run tests/html/about-mozilla.html
</code>

The Servo browser should open and load the about-Mozilla web page.
Now open terminal and run

<code>
./mach test-wpt tests/wpt/web-platform-tests/html/dom/interfaces.html
</code>

You will see that all tests pass as expected.

'''Note:''' We have not added any new tests to the test suite as servo follows TDD and tests were previously written for HTML image element. We have just adjusted some of the test expectations for the tests which now pass due to our implementation.

=== Testing From UI ===

Our project cannot be tested from UI since the project aims to make image loading on Servo browser more conformant to HTML5 standards. However you can check that it doesn't break the existing code and the browser runs correctly by running a test page on servo after performing the build as mentioned above.

Run the following command after the project is build:

<code>
./mach run tests/html/about-mozilla.html
</code>

==Pull Request==
Here is our [https://github.com/servo/servo/pull/10134 pull request]. In the link you can see all code snippets changed due to implementing the above steps, as well as integration test progression information.

==References==
<references/>

CSC/ECE 517 Spring 2016 M1602 Make image loads conform with the spec

2016-04-06T20:38:32Z

Smshah4: /* Subsequent Steps */

Making image load conform with the spec 
[https://en.wikipedia.org/wiki/HTML5 HTML 5] specifies a complex model for image loading on a web browser. It has specifications<ref>https://html.spec.whatwg.org/multipage/#the-picture-element</ref> for [https://html.spec.whatwg.org/multipage/#the-picture-element picture element] as well as img element, and browsers need to follow these HTML 5 specifications to conform to the standard. Servo's current implementation of image loading is [http://mxr.mozilla.org/servo/source/components/script/dom/htmlimageelement.rs#107 straightforward, but non-compliant] with HTML 5 standards<ref>https://html.spec.whatwg.org/multipage/</ref> in a number of important ways. The goal of this project is to implement image loading behavior on Servo browser that is more compliant with HTML 5 so its easy to both implement and verify against the text of the specification.
==Introduction==

===Servo===

[https://github.com/servo/servo Servo] is a [https://en.wikipedia.org/wiki/Web_browser web browser] layout engine written in [https://www.mozilla.org/en-US/?v=b Mozilla]'s new [https://en.wikipedia.org/wiki/System_programming_language systems language] [https://en.wikipedia.org/wiki/Rust_(programming_language) Rust]<ref>https://servo.org/</ref>. It is currently being developed by Mozilla Research. The aim of the project is not to create a full browser but rather to create better parallelism<ref>https://www.usenix.org/legacy/event/hotpar09/tech/full_papers/jones/jones.pdf</ref>, security<ref>https://en.wikipedia.org/wiki/Browser_security</ref>, modularity<ref>https://msdn.microsoft.com/en-us/library/ff709921.aspx</ref> and performance. The Servo project is [https://en.wikipedia.org/wiki/Open-source_software open sourced] and receives contributions from individual contributors from around the globe. It currently supports [https://www.linux.com/ Linux], [http://www.apple.com/osx/ OS X], [https://www.microsoft.com/en-us/windows Windows], [https://www.android.com/ Android], and [https://en.wikipedia.org/wiki/Gonk Gonk] (Firefox OS).

===Rust===

Hatched by Mozilla employee Graydon Hoare back in 2009, Rust was built from the ground up using elements from modern programming language design<ref>http://readwrite.com/2015/07/02/mozilla-rust-programming-language-potential/</ref>. Rust is a [https://en.wikipedia.org/wiki/General-purpose_programming_language general-purpose], [https://developer.mozilla.org/ar/docs/multiparadigmlanguage.html multi-paradigm], [https://en.wikipedia.org/wiki/Compiled_language compiled programming] language, supporting pure-functional, imperative-procedural, and object-oriented styles<ref>https://en.wikipedia.org/wiki/Rust_(programming_language)</ref>. It focuses on performance, parallelization, and memory safety and does so because unlike other programming languages it doesn't suffer from "backward-compatibility requirements"<ref>http://readwrite.com/2015/07/02/mozilla-rust-programming-language-potential/</ref>.

==Project Description==
The detailed description of the project can be found [https://github.com/servo/servo/wiki/Image-load-conformance-student-project here].

The steps are as follows:

===Compilation and Build===
* The first step is to compile Servo browser and build it on a local machine. The steps for compiling and building Servo are:
Servo is built with [https://mail.mozilla.org/pipermail/rust-dev/2014-March/009090.html Cargo], the Rust package manager. Mozilla's Mach tools are used to orchestrate the build and other tasks.

git clone https://github.com/servo/servo
cd servo
./mach build --dev
./mach run tests/html/about-mozilla.html

compile Servo and ensure that it runs tests/html/about-mozilla.html

===Initial Steps===
The initial steps for the project were completed as a part of OSS project 2. The functionalities implemented were:
* Define data types to represent the image request concept, and add pending and current requests to the HTMLImageElement type in htmlimageelement.rs . These should subsume the existing fields in HTMLImageElement that are used for storing the image's properties, and the fields of the current request should be used instead.
* Implement the crossOrigin attribute using the make_enumerated_getter / make_setter macros and uncommenting the attribute in HTMLImageElement.webidl
* Implement the currentSrc attribute by adding the appropriate attribute to HTMLImageElement.webidl
* Run ./mach test-wpt tests/wpt/web-platform-tests/html/dom/interfaces.html and adjust the test result expectations according to the documenatation.
* Add a command for the image cache task that accepts a URL and a vector of bytes. This command should instruct the cache to store this data as a newly-complete network request and continue decoding the result into pixel data.

===Subsequent Steps===
The subsequent steps for the project are to be implemented as a part of final semester project. The steps to do are:
* Replace the code in htmlimageelement.rs that instructs the image cache to fetch a URL with code that directly performs a network request (see HTMLScriptElement::prepare for an example that uses the NetworkListener helper and Document::load_async). The result should be sent to the image cache using the newly-added command.
* Implement the parse a srcset attribute algorithm by defining a parse_a_srcset_attribute function in htmlimageelement.rs. Write unit tests demonstrating correctness in tests/unit/script/htmlimageelement.rs (./mach test-unit -p script/dom/htmlimageelement).
* Implement the parse a sizes attribute algorithm by defining a parse_a_sizes_attribute function in htmlimageelement.rs. Write unit tests demonstrating correctness in tests/unit/script/htmlimageelement.rs.
* Implement the normalize the source densities algorithm - create data types for source set and image source.
* Implement the update the source set algorithm by defining a update_the_source_set function in htmlimageelement.rs.
* Implement the select an image source algorithm by defining a select_an_image_source function in htmlimageelement.rs.

==Design Principles==

There were no particular design principles used in this project as it was a modification of existing code. .

We were not supposed to modify the existing design apart from adding a new behaviour/ability for HTMLImageElement. The same principals of the original Servo code can be thought of as being followed by the project.
The main aim was to increase the code coverage and to make the Servo browser more compliant to HMTL 5 standards when it comes to image loading.

We attempted to follow good OO practices throughout development. While using enums and also while defining new methods, we tried to follow the DRY principle in order to avoid repetition of code. Servo has it's own coding standards which are checked by running following command

./mach test-tidy

Issues reported by test are to be fixed before pull request can be generated. This ensures that developers would adhere to coding standards. We have fixed all the issues reported by tidy-test.

==Implementation==
===Initial Steps===
The following steps were followed to meet the project requirements as per this [https://github.com/servo/servo/wiki/Image-load-conformance-student-project github page].

====Step 1====

As we need to define data types to represent the image request concept, and add pending and current requests to the HTMLImageElement type in htmlimageelement.rs . These should subsume the existing fields in HTMLImageElement that are used for storing the image's properties, and the fields of the current request should be used instead.

[[File:ImageRequest.png]]

====Step 2====

As we had to implement the crossOrigin attribute , we uncommented it in the HTMLImageElement.webidl file and then we created a getter and setter method for it in the HTMLImageElement.rd file using the make_enumerated_getter / make_setter macros .

[[File:CrossOrigin_webidl.png]]

HTMLImageElement.rs file

[[File:CrossOrigin.png]]

====Step 3====

implement the currentSrc attribute by adding the appropriate attribute to HTMLImageElement.webidl

[[File:currentSrc.png]]

===Subsequent Steps===
Since the main changes are in class HTMLImageElement (HTMLImageElement.rs file) we have made class diagram for it and also provided flowcharts for the algorithms we are to implement .

[[File:class_diagram_M1602.png]]
====Step 1====
replace the code in htmlimageelement.rs that instructs the image cache to fetch a URL with code that directly performs a network request (see HTMLScriptElement::prepare for an example that uses the NetworkListener helper and Document::load_async ). The result should be sent to the image cache using the newly-added command.

====Step 2====
implement the parse a srcset attribute algorithm by defining a parse_a_srcset_attribute function in htmlimageelement.rs . Write unit tests demonstrating correctness in tests/unit/script/htmlimageelement.rs ( ./mach test-unit -p script/dom/htmlimageelement )

The flowchart of the above step is :

[[File:parseAsrcset.jpg]]

====Step 3====
implement the parse a sizes attribute algorithm by defining a parse_a_sizes_attribute function in htmlimageelement.rs . Write unit tests demonstrating correctness in tests/unit/script/htmlimageelement.rs .

[[File:parsasize.png]]

====Step 4====
implement the normalize the source densities algorithm - create data types for source set and image source
====Step 5====
implement the update the source set algorithm by defining a update_the_source_set function in htmlimageelement.rs

[[File:updatesrc.png]]

[[File:updatesrc_2.png]]

====Step 6====
implement the select an image source algorithm by defining a select_an_image_source function in htmlimageelement.rs

== Testing ==

Following are the steps to run all the tests for HTMLImageElement:

# Install the pre-requisites required for servo as mentioned [https://github.com/servo/servo/blob/master/README.md here]
# Run the following commands

<code>
cd
</code>

<code>
git clone https://github.com/akhan7/servo.git
</code>

<code>
cd servo
</code>

<code>
./mach build --dev
</code>

'''Note:''' It may take around 30-40 mins to build. Check to see if the build is successful by running

<code>
./mach run tests/html/about-mozilla.html
</code>

The Servo browser should open and load the about-Mozilla web page.
Now open terminal and run

<code>
./mach test-wpt tests/wpt/web-platform-tests/html/dom/interfaces.html
</code>

You will see that all tests pass as expected.

'''Note:''' We have not added any new tests to the test suite as servo follows TDD and tests were previously written for HTML image element. We have just adjusted some of the test expectations for the tests which now pass due to our implementation.

=== Testing From UI ===

Our project cannot be tested from UI since the project aims to make image loading on Servo browser more conformant to HTML5 standards. However you can check that it doesn't break the existing code and the browser runs correctly by running a test page on servo after performing the build as mentioned above.

Run the following command after the project is build:

<code>
./mach run tests/html/about-mozilla.html
</code>

==Pull Request==
Here is our [https://github.com/servo/servo/pull/10134 pull request]. In the link you can see all code snippets changed due to implementing the above steps, as well as integration test progression information.

==References==
<references/>

File:Class diagram M1602.png

2016-04-06T20:37:14Z

Smshah4:

CSC/ECE 517 Spring 2016 M1602 Make image loads conform with the spec

2016-04-06T20:37:01Z

Smshah4: /* Subsequent Steps */

Making image load conform with the spec 
[https://en.wikipedia.org/wiki/HTML5 HTML 5] specifies a complex model for image loading on a web browser. It has specifications<ref>https://html.spec.whatwg.org/multipage/#the-picture-element</ref> for [https://html.spec.whatwg.org/multipage/#the-picture-element picture element] as well as img element, and browsers need to follow these HTML 5 specifications to conform to the standard. Servo's current implementation of image loading is [http://mxr.mozilla.org/servo/source/components/script/dom/htmlimageelement.rs#107 straightforward, but non-compliant] with HTML 5 standards<ref>https://html.spec.whatwg.org/multipage/</ref> in a number of important ways. The goal of this project is to implement image loading behavior on Servo browser that is more compliant with HTML 5 so its easy to both implement and verify against the text of the specification.
==Introduction==

===Servo===

[https://github.com/servo/servo Servo] is a [https://en.wikipedia.org/wiki/Web_browser web browser] layout engine written in [https://www.mozilla.org/en-US/?v=b Mozilla]'s new [https://en.wikipedia.org/wiki/System_programming_language systems language] [https://en.wikipedia.org/wiki/Rust_(programming_language) Rust]<ref>https://servo.org/</ref>. It is currently being developed by Mozilla Research. The aim of the project is not to create a full browser but rather to create better parallelism<ref>https://www.usenix.org/legacy/event/hotpar09/tech/full_papers/jones/jones.pdf</ref>, security<ref>https://en.wikipedia.org/wiki/Browser_security</ref>, modularity<ref>https://msdn.microsoft.com/en-us/library/ff709921.aspx</ref> and performance. The Servo project is [https://en.wikipedia.org/wiki/Open-source_software open sourced] and receives contributions from individual contributors from around the globe. It currently supports [https://www.linux.com/ Linux], [http://www.apple.com/osx/ OS X], [https://www.microsoft.com/en-us/windows Windows], [https://www.android.com/ Android], and [https://en.wikipedia.org/wiki/Gonk Gonk] (Firefox OS).

===Rust===

Hatched by Mozilla employee Graydon Hoare back in 2009, Rust was built from the ground up using elements from modern programming language design<ref>http://readwrite.com/2015/07/02/mozilla-rust-programming-language-potential/</ref>. Rust is a [https://en.wikipedia.org/wiki/General-purpose_programming_language general-purpose], [https://developer.mozilla.org/ar/docs/multiparadigmlanguage.html multi-paradigm], [https://en.wikipedia.org/wiki/Compiled_language compiled programming] language, supporting pure-functional, imperative-procedural, and object-oriented styles<ref>https://en.wikipedia.org/wiki/Rust_(programming_language)</ref>. It focuses on performance, parallelization, and memory safety and does so because unlike other programming languages it doesn't suffer from "backward-compatibility requirements"<ref>http://readwrite.com/2015/07/02/mozilla-rust-programming-language-potential/</ref>.

==Project Description==
The detailed description of the project can be found [https://github.com/servo/servo/wiki/Image-load-conformance-student-project here].

The steps are as follows:

===Compilation and Build===
* The first step is to compile Servo browser and build it on a local machine. The steps for compiling and building Servo are:
Servo is built with [https://mail.mozilla.org/pipermail/rust-dev/2014-March/009090.html Cargo], the Rust package manager. Mozilla's Mach tools are used to orchestrate the build and other tasks.

git clone https://github.com/servo/servo
cd servo
./mach build --dev
./mach run tests/html/about-mozilla.html

compile Servo and ensure that it runs tests/html/about-mozilla.html

===Initial Steps===
The initial steps for the project were completed as a part of OSS project 2. The functionalities implemented were:
* Define data types to represent the image request concept, and add pending and current requests to the HTMLImageElement type in htmlimageelement.rs . These should subsume the existing fields in HTMLImageElement that are used for storing the image's properties, and the fields of the current request should be used instead.
* Implement the crossOrigin attribute using the make_enumerated_getter / make_setter macros and uncommenting the attribute in HTMLImageElement.webidl
* Implement the currentSrc attribute by adding the appropriate attribute to HTMLImageElement.webidl
* Run ./mach test-wpt tests/wpt/web-platform-tests/html/dom/interfaces.html and adjust the test result expectations according to the documenatation.
* Add a command for the image cache task that accepts a URL and a vector of bytes. This command should instruct the cache to store this data as a newly-complete network request and continue decoding the result into pixel data.

===Subsequent Steps===
The subsequent steps for the project are to be implemented as a part of final semester project. The steps to do are:
* Replace the code in htmlimageelement.rs that instructs the image cache to fetch a URL with code that directly performs a network request (see HTMLScriptElement::prepare for an example that uses the NetworkListener helper and Document::load_async). The result should be sent to the image cache using the newly-added command.
* Implement the parse a srcset attribute algorithm by defining a parse_a_srcset_attribute function in htmlimageelement.rs. Write unit tests demonstrating correctness in tests/unit/script/htmlimageelement.rs (./mach test-unit -p script/dom/htmlimageelement).
* Implement the parse a sizes attribute algorithm by defining a parse_a_sizes_attribute function in htmlimageelement.rs. Write unit tests demonstrating correctness in tests/unit/script/htmlimageelement.rs.
* Implement the normalize the source densities algorithm - create data types for source set and image source.
* Implement the update the source set algorithm by defining a update_the_source_set function in htmlimageelement.rs.
* Implement the select an image source algorithm by defining a select_an_image_source function in htmlimageelement.rs.

==Design Principles==

There were no particular design principles used in this project as it was a modification of existing code. .

We were not supposed to modify the existing design apart from adding a new behaviour/ability for HTMLImageElement. The same principals of the original Servo code can be thought of as being followed by the project.
The main aim was to increase the code coverage and to make the Servo browser more compliant to HMTL 5 standards when it comes to image loading.

We attempted to follow good OO practices throughout development. While using enums and also while defining new methods, we tried to follow the DRY principle in order to avoid repetition of code. Servo has it's own coding standards which are checked by running following command

./mach test-tidy

Issues reported by test are to be fixed before pull request can be generated. This ensures that developers would adhere to coding standards. We have fixed all the issues reported by tidy-test.

==Implementation==
===Initial Steps===
The following steps were followed to meet the project requirements as per this [https://github.com/servo/servo/wiki/Image-load-conformance-student-project github page].

====Step 1====

As we need to define data types to represent the image request concept, and add pending and current requests to the HTMLImageElement type in htmlimageelement.rs . These should subsume the existing fields in HTMLImageElement that are used for storing the image's properties, and the fields of the current request should be used instead.

[[File:ImageRequest.png]]

====Step 2====

As we had to implement the crossOrigin attribute , we uncommented it in the HTMLImageElement.webidl file and then we created a getter and setter method for it in the HTMLImageElement.rd file using the make_enumerated_getter / make_setter macros .

[[File:CrossOrigin_webidl.png]]

HTMLImageElement.rs file

[[File:CrossOrigin.png]]

====Step 3====

implement the currentSrc attribute by adding the appropriate attribute to HTMLImageElement.webidl

[[File:currentSrc.png]]

===Subsequent Steps===
Since the change is in this single file Htmlimageelement.rs , we haven't made any class diagram , but provided flowcharts for the algorithms we are to implement.

[[File:class_diagram_M1602.png]]
====Step 1====
replace the code in htmlimageelement.rs that instructs the image cache to fetch a URL with code that directly performs a network request (see HTMLScriptElement::prepare for an example that uses the NetworkListener helper and Document::load_async ). The result should be sent to the image cache using the newly-added command.

====Step 2====
implement the parse a srcset attribute algorithm by defining a parse_a_srcset_attribute function in htmlimageelement.rs . Write unit tests demonstrating correctness in tests/unit/script/htmlimageelement.rs ( ./mach test-unit -p script/dom/htmlimageelement )

The flowchart of the above step is :

[[File:parseAsrcset.jpg]]

====Step 3====
implement the parse a sizes attribute algorithm by defining a parse_a_sizes_attribute function in htmlimageelement.rs . Write unit tests demonstrating correctness in tests/unit/script/htmlimageelement.rs .

[[File:parsasize.png]]

====Step 4====
implement the normalize the source densities algorithm - create data types for source set and image source
====Step 5====
implement the update the source set algorithm by defining a update_the_source_set function in htmlimageelement.rs

[[File:updatesrc.png]]

[[File:updatesrc_2.png]]

====Step 6====
implement the select an image source algorithm by defining a select_an_image_source function in htmlimageelement.rs

== Testing ==

Following are the steps to run all the tests for HTMLImageElement:

# Install the pre-requisites required for servo as mentioned [https://github.com/servo/servo/blob/master/README.md here]
# Run the following commands

<code>
cd
</code>

<code>
git clone https://github.com/akhan7/servo.git
</code>

<code>
cd servo
</code>

<code>
./mach build --dev
</code>

'''Note:''' It may take around 30-40 mins to build. Check to see if the build is successful by running

<code>
./mach run tests/html/about-mozilla.html
</code>

The Servo browser should open and load the about-Mozilla web page.
Now open terminal and run

<code>
./mach test-wpt tests/wpt/web-platform-tests/html/dom/interfaces.html
</code>

You will see that all tests pass as expected.

'''Note:''' We have not added any new tests to the test suite as servo follows TDD and tests were previously written for HTML image element. We have just adjusted some of the test expectations for the tests which now pass due to our implementation.

=== Testing From UI ===

Our project cannot be tested from UI since the project aims to make image loading on Servo browser more conformant to HTML5 standards. However you can check that it doesn't break the existing code and the browser runs correctly by running a test page on servo after performing the build as mentioned above.

Run the following command after the project is build:

<code>
./mach run tests/html/about-mozilla.html
</code>

==Pull Request==
Here is our [https://github.com/servo/servo/pull/10134 pull request]. In the link you can see all code snippets changed due to implementing the above steps, as well as integration test progression information.

==References==
<references/>

CSC/ECE 517 Spring 2016 M1602 Make image loads conform with the spec

2016-04-06T20:36:28Z

Smshah4: /* Subsequent Steps */

Making image load conform with the spec 
[https://en.wikipedia.org/wiki/HTML5 HTML 5] specifies a complex model for image loading on a web browser. It has specifications<ref>https://html.spec.whatwg.org/multipage/#the-picture-element</ref> for [https://html.spec.whatwg.org/multipage/#the-picture-element picture element] as well as img element, and browsers need to follow these HTML 5 specifications to conform to the standard. Servo's current implementation of image loading is [http://mxr.mozilla.org/servo/source/components/script/dom/htmlimageelement.rs#107 straightforward, but non-compliant] with HTML 5 standards<ref>https://html.spec.whatwg.org/multipage/</ref> in a number of important ways. The goal of this project is to implement image loading behavior on Servo browser that is more compliant with HTML 5 so its easy to both implement and verify against the text of the specification.
==Introduction==

===Servo===

[https://github.com/servo/servo Servo] is a [https://en.wikipedia.org/wiki/Web_browser web browser] layout engine written in [https://www.mozilla.org/en-US/?v=b Mozilla]'s new [https://en.wikipedia.org/wiki/System_programming_language systems language] [https://en.wikipedia.org/wiki/Rust_(programming_language) Rust]<ref>https://servo.org/</ref>. It is currently being developed by Mozilla Research. The aim of the project is not to create a full browser but rather to create better parallelism<ref>https://www.usenix.org/legacy/event/hotpar09/tech/full_papers/jones/jones.pdf</ref>, security<ref>https://en.wikipedia.org/wiki/Browser_security</ref>, modularity<ref>https://msdn.microsoft.com/en-us/library/ff709921.aspx</ref> and performance. The Servo project is [https://en.wikipedia.org/wiki/Open-source_software open sourced] and receives contributions from individual contributors from around the globe. It currently supports [https://www.linux.com/ Linux], [http://www.apple.com/osx/ OS X], [https://www.microsoft.com/en-us/windows Windows], [https://www.android.com/ Android], and [https://en.wikipedia.org/wiki/Gonk Gonk] (Firefox OS).

===Rust===

Hatched by Mozilla employee Graydon Hoare back in 2009, Rust was built from the ground up using elements from modern programming language design<ref>http://readwrite.com/2015/07/02/mozilla-rust-programming-language-potential/</ref>. Rust is a [https://en.wikipedia.org/wiki/General-purpose_programming_language general-purpose], [https://developer.mozilla.org/ar/docs/multiparadigmlanguage.html multi-paradigm], [https://en.wikipedia.org/wiki/Compiled_language compiled programming] language, supporting pure-functional, imperative-procedural, and object-oriented styles<ref>https://en.wikipedia.org/wiki/Rust_(programming_language)</ref>. It focuses on performance, parallelization, and memory safety and does so because unlike other programming languages it doesn't suffer from "backward-compatibility requirements"<ref>http://readwrite.com/2015/07/02/mozilla-rust-programming-language-potential/</ref>.

==Project Description==
The detailed description of the project can be found [https://github.com/servo/servo/wiki/Image-load-conformance-student-project here].

The steps are as follows:

===Compilation and Build===
* The first step is to compile Servo browser and build it on a local machine. The steps for compiling and building Servo are:
Servo is built with [https://mail.mozilla.org/pipermail/rust-dev/2014-March/009090.html Cargo], the Rust package manager. Mozilla's Mach tools are used to orchestrate the build and other tasks.

git clone https://github.com/servo/servo
cd servo
./mach build --dev
./mach run tests/html/about-mozilla.html

compile Servo and ensure that it runs tests/html/about-mozilla.html

===Initial Steps===
The initial steps for the project were completed as a part of OSS project 2. The functionalities implemented were:
* Define data types to represent the image request concept, and add pending and current requests to the HTMLImageElement type in htmlimageelement.rs . These should subsume the existing fields in HTMLImageElement that are used for storing the image's properties, and the fields of the current request should be used instead.
* Implement the crossOrigin attribute using the make_enumerated_getter / make_setter macros and uncommenting the attribute in HTMLImageElement.webidl
* Implement the currentSrc attribute by adding the appropriate attribute to HTMLImageElement.webidl
* Run ./mach test-wpt tests/wpt/web-platform-tests/html/dom/interfaces.html and adjust the test result expectations according to the documenatation.
* Add a command for the image cache task that accepts a URL and a vector of bytes. This command should instruct the cache to store this data as a newly-complete network request and continue decoding the result into pixel data.

===Subsequent Steps===
The subsequent steps for the project are to be implemented as a part of final semester project. The steps to do are:
* Replace the code in htmlimageelement.rs that instructs the image cache to fetch a URL with code that directly performs a network request (see HTMLScriptElement::prepare for an example that uses the NetworkListener helper and Document::load_async). The result should be sent to the image cache using the newly-added command.
* Implement the parse a srcset attribute algorithm by defining a parse_a_srcset_attribute function in htmlimageelement.rs. Write unit tests demonstrating correctness in tests/unit/script/htmlimageelement.rs (./mach test-unit -p script/dom/htmlimageelement).
* Implement the parse a sizes attribute algorithm by defining a parse_a_sizes_attribute function in htmlimageelement.rs. Write unit tests demonstrating correctness in tests/unit/script/htmlimageelement.rs.
* Implement the normalize the source densities algorithm - create data types for source set and image source.
* Implement the update the source set algorithm by defining a update_the_source_set function in htmlimageelement.rs.
* Implement the select an image source algorithm by defining a select_an_image_source function in htmlimageelement.rs.

==Design Principles==

There were no particular design principles used in this project as it was a modification of existing code. .

We were not supposed to modify the existing design apart from adding a new behaviour/ability for HTMLImageElement. The same principals of the original Servo code can be thought of as being followed by the project.
The main aim was to increase the code coverage and to make the Servo browser more compliant to HMTL 5 standards when it comes to image loading.

We attempted to follow good OO practices throughout development. While using enums and also while defining new methods, we tried to follow the DRY principle in order to avoid repetition of code. Servo has it's own coding standards which are checked by running following command

./mach test-tidy

Issues reported by test are to be fixed before pull request can be generated. This ensures that developers would adhere to coding standards. We have fixed all the issues reported by tidy-test.

==Implementation==
===Initial Steps===
The following steps were followed to meet the project requirements as per this [https://github.com/servo/servo/wiki/Image-load-conformance-student-project github page].

====Step 1====

As we need to define data types to represent the image request concept, and add pending and current requests to the HTMLImageElement type in htmlimageelement.rs . These should subsume the existing fields in HTMLImageElement that are used for storing the image's properties, and the fields of the current request should be used instead.

[[File:ImageRequest.png]]

====Step 2====

As we had to implement the crossOrigin attribute , we uncommented it in the HTMLImageElement.webidl file and then we created a getter and setter method for it in the HTMLImageElement.rd file using the make_enumerated_getter / make_setter macros .

[[File:CrossOrigin_webidl.png]]

HTMLImageElement.rs file

[[File:CrossOrigin.png]]

====Step 3====

implement the currentSrc attribute by adding the appropriate attribute to HTMLImageElement.webidl

[[File:currentSrc.png]]

===Subsequent Steps===
Since the change is in this single file Htmlimageelement.rs , we haven't made any class diagram , but provided flowcharts for the algorithms we are to implement.

[[File:class_diagram.png]]
====Step 1====
replace the code in htmlimageelement.rs that instructs the image cache to fetch a URL with code that directly performs a network request (see HTMLScriptElement::prepare for an example that uses the NetworkListener helper and Document::load_async ). The result should be sent to the image cache using the newly-added command.

====Step 2====
implement the parse a srcset attribute algorithm by defining a parse_a_srcset_attribute function in htmlimageelement.rs . Write unit tests demonstrating correctness in tests/unit/script/htmlimageelement.rs ( ./mach test-unit -p script/dom/htmlimageelement )

The flowchart of the above step is :

[[File:parseAsrcset.jpg]]

====Step 3====
implement the parse a sizes attribute algorithm by defining a parse_a_sizes_attribute function in htmlimageelement.rs . Write unit tests demonstrating correctness in tests/unit/script/htmlimageelement.rs .

[[File:parsasize.png]]

====Step 4====
implement the normalize the source densities algorithm - create data types for source set and image source
====Step 5====
implement the update the source set algorithm by defining a update_the_source_set function in htmlimageelement.rs

[[File:updatesrc.png]]

[[File:updatesrc_2.png]]

====Step 6====
implement the select an image source algorithm by defining a select_an_image_source function in htmlimageelement.rs

== Testing ==

Following are the steps to run all the tests for HTMLImageElement:

# Install the pre-requisites required for servo as mentioned [https://github.com/servo/servo/blob/master/README.md here]
# Run the following commands

<code>
cd
</code>

<code>
git clone https://github.com/akhan7/servo.git
</code>

<code>
cd servo
</code>

<code>
./mach build --dev
</code>

'''Note:''' It may take around 30-40 mins to build. Check to see if the build is successful by running

<code>
./mach run tests/html/about-mozilla.html
</code>

The Servo browser should open and load the about-Mozilla web page.
Now open terminal and run

<code>
./mach test-wpt tests/wpt/web-platform-tests/html/dom/interfaces.html
</code>

You will see that all tests pass as expected.

'''Note:''' We have not added any new tests to the test suite as servo follows TDD and tests were previously written for HTML image element. We have just adjusted some of the test expectations for the tests which now pass due to our implementation.

=== Testing From UI ===

Our project cannot be tested from UI since the project aims to make image loading on Servo browser more conformant to HTML5 standards. However you can check that it doesn't break the existing code and the browser runs correctly by running a test page on servo after performing the build as mentioned above.

Run the following command after the project is build:

<code>
./mach run tests/html/about-mozilla.html
</code>

==Pull Request==
Here is our [https://github.com/servo/servo/pull/10134 pull request]. In the link you can see all code snippets changed due to implementing the above steps, as well as integration test progression information.

==References==
<references/>

File:Parsasize.png

2016-04-06T10:16:25Z

Smshah4:

CSC/ECE 517 Spring 2016 M1602 Make image loads conform with the spec

2016-04-06T10:15:31Z

Smshah4: /* Step 3 */

Making image load conform with the spec 
[https://en.wikipedia.org/wiki/HTML5 HTML 5] specifies a complex model for image loading on a web browser. It has specifications<ref>https://html.spec.whatwg.org/multipage/#the-picture-element</ref> for [https://html.spec.whatwg.org/multipage/#the-picture-element picture element] as well as img element, and browsers need to follow these HTML 5 specifications to conform to the standard. Servo's current implementation of image loading is [http://mxr.mozilla.org/servo/source/components/script/dom/htmlimageelement.rs#107 straightforward, but non-compliant] with HTML 5 standards<ref>https://html.spec.whatwg.org/multipage/</ref> in a number of important ways. The goal of this project is to implement image loading behavior on Servo browser that is more compliant with HTML 5 so its easy to both implement and verify against the text of the specification.
==Introduction==

===Servo===

[https://github.com/servo/servo Servo] is a [https://en.wikipedia.org/wiki/Web_browser web browser] layout engine written in [https://www.mozilla.org/en-US/?v=b Mozilla]'s new [https://en.wikipedia.org/wiki/System_programming_language systems language] [https://en.wikipedia.org/wiki/Rust_(programming_language) Rust]<ref>https://servo.org/</ref>. It is currently being developed by Mozilla Research. The aim of the project is not to create a full browser but rather to create better parallelism<ref>https://www.usenix.org/legacy/event/hotpar09/tech/full_papers/jones/jones.pdf</ref>, security<ref>https://en.wikipedia.org/wiki/Browser_security</ref>, modularity<ref>https://msdn.microsoft.com/en-us/library/ff709921.aspx</ref> and performance. The Servo project is [https://en.wikipedia.org/wiki/Open-source_software open sourced] and receives contributions from individual contributors from around the globe. It currently supports [https://www.linux.com/ Linux], [http://www.apple.com/osx/ OS X], [https://www.microsoft.com/en-us/windows Windows], [https://www.android.com/ Android], and [https://en.wikipedia.org/wiki/Gonk Gonk] (Firefox OS).

===Rust===

Hatched by Mozilla employee Graydon Hoare back in 2009, Rust was built from the ground up using elements from modern programming language design<ref>http://readwrite.com/2015/07/02/mozilla-rust-programming-language-potential/</ref>. Rust is a [https://en.wikipedia.org/wiki/General-purpose_programming_language general-purpose], [https://developer.mozilla.org/ar/docs/multiparadigmlanguage.html multi-paradigm], [https://en.wikipedia.org/wiki/Compiled_language compiled programming] language, supporting pure-functional, imperative-procedural, and object-oriented styles<ref>https://en.wikipedia.org/wiki/Rust_(programming_language)</ref>. It focuses on performance, parallelization, and memory safety and does so because unlike other programming languages it doesn't suffer from "backward-compatibility requirements"<ref>http://readwrite.com/2015/07/02/mozilla-rust-programming-language-potential/</ref>.

==Project Description==
The detailed description of the project can be found [https://github.com/servo/servo/wiki/Image-load-conformance-student-project here].

The steps are as follows:

===Compilation and Build===
* The first step is to compile Servo browser and build it on a local machine. The steps for compiling and building Servo are:
Servo is built with [https://mail.mozilla.org/pipermail/rust-dev/2014-March/009090.html Cargo], the Rust package manager. Mozilla's Mach tools are used to orchestrate the build and other tasks.

git clone https://github.com/servo/servo
cd servo
./mach build --dev
./mach run tests/html/about-mozilla.html

compile Servo and ensure that it runs tests/html/about-mozilla.html

===Initial Steps===
The initial steps for the project were completed as a part of OSS project 2. The functionalities implemented were:
* Define data types to represent the image request concept, and add pending and current requests to the HTMLImageElement type in htmlimageelement.rs . These should subsume the existing fields in HTMLImageElement that are used for storing the image's properties, and the fields of the current request should be used instead.
* Implement the crossOrigin attribute using the make_enumerated_getter / make_setter macros and uncommenting the attribute in HTMLImageElement.webidl
* Implement the currentSrc attribute by adding the appropriate attribute to HTMLImageElement.webidl
* Run ./mach test-wpt tests/wpt/web-platform-tests/html/dom/interfaces.html and adjust the test result expectations according to the documenatation.
* Add a command for the image cache task that accepts a URL and a vector of bytes. This command should instruct the cache to store this data as a newly-complete network request and continue decoding the result into pixel data.

===Subsequent Steps===
The subsequent steps for the project are to be implemented as a part of final semester project. The steps to do are:
* Replace the code in htmlimageelement.rs that instructs the image cache to fetch a URL with code that directly performs a network request (see HTMLScriptElement::prepare for an example that uses the NetworkListener helper and Document::load_async). The result should be sent to the image cache using the newly-added command.
* Implement the parse a srcset attribute algorithm by defining a parse_a_srcset_attribute function in htmlimageelement.rs. Write unit tests demonstrating correctness in tests/unit/script/htmlimageelement.rs (./mach test-unit -p script/dom/htmlimageelement).
* Implement the parse a sizes attribute algorithm by defining a parse_a_sizes_attribute function in htmlimageelement.rs. Write unit tests demonstrating correctness in tests/unit/script/htmlimageelement.rs.
* Implement the normalize the source densities algorithm - create data types for source set and image source.
* Implement the update the source set algorithm by defining a update_the_source_set function in htmlimageelement.rs.
* Implement the select an image source algorithm by defining a select_an_image_source function in htmlimageelement.rs.

==Design Principles==

There were no particular design principles used in this project as it was a modification of existing code. .

We were not supposed to modify the existing design apart from adding a new behaviour/ability for HTMLImageElement. The same principals of the original Servo code can be thought of as being followed by the project.
The main aim was to increase the code coverage and to make the Servo browser more compliant to HMTL 5 standards when it comes to image loading.

We attempted to follow good OO practices throughout development. While using enums and also while defining new methods, we tried to follow the DRY principle in order to avoid repetition of code. Servo has it's own coding standards which are checked by running following command

./mach test-tidy

Issues reported by test are to be fixed before pull request can be generated. This ensures that developers would adhere to coding standards. We have fixed all the issues reported by tidy-test.

==Implementation==
===Initial Steps===
The following steps were followed to meet the project requirements as per this [https://github.com/servo/servo/wiki/Image-load-conformance-student-project github page].

====Step 1====

As we need to define data types to represent the image request concept, and add pending and current requests to the HTMLImageElement type in htmlimageelement.rs . These should subsume the existing fields in HTMLImageElement that are used for storing the image's properties, and the fields of the current request should be used instead.

[[File:ImageRequest.png]]

====Step 2====

As we had to implement the crossOrigin attribute , we uncommented it in the HTMLImageElement.webidl file and then we created a getter and setter method for it in the HTMLImageElement.rd file using the make_enumerated_getter / make_setter macros .

[[File:CrossOrigin_webidl.png]]

HTMLImageElement.rs file

[[File:CrossOrigin.png]]

====Step 3====

implement the currentSrc attribute by adding the appropriate attribute to HTMLImageElement.webidl

[[File:currentSrc.png]]

===Subsequent Steps===
Since the change is in this single file Htmlimageelement.rs , we haven't made any class diagram , but provided flowcharts for the algorithms we are to implement.
====Step 1====
replace the code in htmlimageelement.rs that instructs the image cache to fetch a URL with code that directly performs a network request (see HTMLScriptElement::prepare for an example that uses the NetworkListener helper and Document::load_async ). The result should be sent to the image cache using the newly-added command.

====Step 2====
implement the parse a srcset attribute algorithm by defining a parse_a_srcset_attribute function in htmlimageelement.rs . Write unit tests demonstrating correctness in tests/unit/script/htmlimageelement.rs ( ./mach test-unit -p script/dom/htmlimageelement )

The flowchart of the above step is :

[[File:parseAsrcset.jpg]]

====Step 3====
implement the parse a sizes attribute algorithm by defining a parse_a_sizes_attribute function in htmlimageelement.rs . Write unit tests demonstrating correctness in tests/unit/script/htmlimageelement.rs .

[[File:parsasize.png]]

====Step 4====
implement the normalize the source densities algorithm - create data types for source set and image source
====Step 5====
implement the update the source set algorithm by defining a update_the_source_set function in htmlimageelement.rs

[[File:updatesrc.png]]

[[File:updatesrc_2.png]]

====Step 6====
implement the select an image source algorithm by defining a select_an_image_source function in htmlimageelement.rs

== Testing ==

Following are the steps to run all the tests for HTMLImageElement:

# Install the pre-requisites required for servo as mentioned [https://github.com/servo/servo/blob/master/README.md here]
# Run the following commands

<code>
cd
</code>

<code>
git clone https://github.com/akhan7/servo.git
</code>

<code>
cd servo
</code>

<code>
./mach build --dev
</code>

'''Note:''' It may take around 30-40 mins to build. Check to see if the build is successful by running

<code>
./mach run tests/html/about-mozilla.html
</code>

The Servo browser should open and load the about-Mozilla web page.
Now open terminal and run

<code>
./mach test-wpt tests/wpt/web-platform-tests/html/dom/interfaces.html
</code>

You will see that all tests pass as expected.

'''Note:''' We have not added any new tests to the test suite as servo follows TDD and tests were previously written for HTML image element. We have just adjusted some of the test expectations for the tests which now pass due to our implementation.

=== Testing From UI ===

Our project cannot be tested from UI since the project aims to make image loading on Servo browser more conformant to HTML5 standards. However you can check that it doesn't break the existing code and the browser runs correctly by running a test page on servo after performing the build as mentioned above.

Run the following command after the project is build:

<code>
./mach run tests/html/about-mozilla.html
</code>

==Pull Request==
Here is our [https://github.com/servo/servo/pull/10134 pull request]. In the link you can see all code snippets changed due to implementing the above steps, as well as integration test progression information.

==References==
<references/>

CSC/ECE 517 Spring 2016 M1602 Make image loads conform with the spec

2016-04-06T10:15:14Z

Smshah4: /* Step 3 */

Making image load conform with the spec 
[https://en.wikipedia.org/wiki/HTML5 HTML 5] specifies a complex model for image loading on a web browser. It has specifications<ref>https://html.spec.whatwg.org/multipage/#the-picture-element</ref> for [https://html.spec.whatwg.org/multipage/#the-picture-element picture element] as well as img element, and browsers need to follow these HTML 5 specifications to conform to the standard. Servo's current implementation of image loading is [http://mxr.mozilla.org/servo/source/components/script/dom/htmlimageelement.rs#107 straightforward, but non-compliant] with HTML 5 standards<ref>https://html.spec.whatwg.org/multipage/</ref> in a number of important ways. The goal of this project is to implement image loading behavior on Servo browser that is more compliant with HTML 5 so its easy to both implement and verify against the text of the specification.
==Introduction==

===Servo===

[https://github.com/servo/servo Servo] is a [https://en.wikipedia.org/wiki/Web_browser web browser] layout engine written in [https://www.mozilla.org/en-US/?v=b Mozilla]'s new [https://en.wikipedia.org/wiki/System_programming_language systems language] [https://en.wikipedia.org/wiki/Rust_(programming_language) Rust]<ref>https://servo.org/</ref>. It is currently being developed by Mozilla Research. The aim of the project is not to create a full browser but rather to create better parallelism<ref>https://www.usenix.org/legacy/event/hotpar09/tech/full_papers/jones/jones.pdf</ref>, security<ref>https://en.wikipedia.org/wiki/Browser_security</ref>, modularity<ref>https://msdn.microsoft.com/en-us/library/ff709921.aspx</ref> and performance. The Servo project is [https://en.wikipedia.org/wiki/Open-source_software open sourced] and receives contributions from individual contributors from around the globe. It currently supports [https://www.linux.com/ Linux], [http://www.apple.com/osx/ OS X], [https://www.microsoft.com/en-us/windows Windows], [https://www.android.com/ Android], and [https://en.wikipedia.org/wiki/Gonk Gonk] (Firefox OS).

===Rust===

Hatched by Mozilla employee Graydon Hoare back in 2009, Rust was built from the ground up using elements from modern programming language design<ref>http://readwrite.com/2015/07/02/mozilla-rust-programming-language-potential/</ref>. Rust is a [https://en.wikipedia.org/wiki/General-purpose_programming_language general-purpose], [https://developer.mozilla.org/ar/docs/multiparadigmlanguage.html multi-paradigm], [https://en.wikipedia.org/wiki/Compiled_language compiled programming] language, supporting pure-functional, imperative-procedural, and object-oriented styles<ref>https://en.wikipedia.org/wiki/Rust_(programming_language)</ref>. It focuses on performance, parallelization, and memory safety and does so because unlike other programming languages it doesn't suffer from "backward-compatibility requirements"<ref>http://readwrite.com/2015/07/02/mozilla-rust-programming-language-potential/</ref>.

==Project Description==
The detailed description of the project can be found [https://github.com/servo/servo/wiki/Image-load-conformance-student-project here].

The steps are as follows:

===Compilation and Build===
* The first step is to compile Servo browser and build it on a local machine. The steps for compiling and building Servo are:
Servo is built with [https://mail.mozilla.org/pipermail/rust-dev/2014-March/009090.html Cargo], the Rust package manager. Mozilla's Mach tools are used to orchestrate the build and other tasks.

git clone https://github.com/servo/servo
cd servo
./mach build --dev
./mach run tests/html/about-mozilla.html

compile Servo and ensure that it runs tests/html/about-mozilla.html

===Initial Steps===
The initial steps for the project were completed as a part of OSS project 2. The functionalities implemented were:
* Define data types to represent the image request concept, and add pending and current requests to the HTMLImageElement type in htmlimageelement.rs . These should subsume the existing fields in HTMLImageElement that are used for storing the image's properties, and the fields of the current request should be used instead.
* Implement the crossOrigin attribute using the make_enumerated_getter / make_setter macros and uncommenting the attribute in HTMLImageElement.webidl
* Implement the currentSrc attribute by adding the appropriate attribute to HTMLImageElement.webidl
* Run ./mach test-wpt tests/wpt/web-platform-tests/html/dom/interfaces.html and adjust the test result expectations according to the documenatation.
* Add a command for the image cache task that accepts a URL and a vector of bytes. This command should instruct the cache to store this data as a newly-complete network request and continue decoding the result into pixel data.

===Subsequent Steps===
The subsequent steps for the project are to be implemented as a part of final semester project. The steps to do are:
* Replace the code in htmlimageelement.rs that instructs the image cache to fetch a URL with code that directly performs a network request (see HTMLScriptElement::prepare for an example that uses the NetworkListener helper and Document::load_async). The result should be sent to the image cache using the newly-added command.
* Implement the parse a srcset attribute algorithm by defining a parse_a_srcset_attribute function in htmlimageelement.rs. Write unit tests demonstrating correctness in tests/unit/script/htmlimageelement.rs (./mach test-unit -p script/dom/htmlimageelement).
* Implement the parse a sizes attribute algorithm by defining a parse_a_sizes_attribute function in htmlimageelement.rs. Write unit tests demonstrating correctness in tests/unit/script/htmlimageelement.rs.
* Implement the normalize the source densities algorithm - create data types for source set and image source.
* Implement the update the source set algorithm by defining a update_the_source_set function in htmlimageelement.rs.
* Implement the select an image source algorithm by defining a select_an_image_source function in htmlimageelement.rs.

==Design Principles==

There were no particular design principles used in this project as it was a modification of existing code. .

We were not supposed to modify the existing design apart from adding a new behaviour/ability for HTMLImageElement. The same principals of the original Servo code can be thought of as being followed by the project.
The main aim was to increase the code coverage and to make the Servo browser more compliant to HMTL 5 standards when it comes to image loading.

We attempted to follow good OO practices throughout development. While using enums and also while defining new methods, we tried to follow the DRY principle in order to avoid repetition of code. Servo has it's own coding standards which are checked by running following command

./mach test-tidy

Issues reported by test are to be fixed before pull request can be generated. This ensures that developers would adhere to coding standards. We have fixed all the issues reported by tidy-test.

==Implementation==
===Initial Steps===
The following steps were followed to meet the project requirements as per this [https://github.com/servo/servo/wiki/Image-load-conformance-student-project github page].

====Step 1====

As we need to define data types to represent the image request concept, and add pending and current requests to the HTMLImageElement type in htmlimageelement.rs . These should subsume the existing fields in HTMLImageElement that are used for storing the image's properties, and the fields of the current request should be used instead.

[[File:ImageRequest.png]]

====Step 2====

As we had to implement the crossOrigin attribute , we uncommented it in the HTMLImageElement.webidl file and then we created a getter and setter method for it in the HTMLImageElement.rd file using the make_enumerated_getter / make_setter macros .

[[File:CrossOrigin_webidl.png]]

HTMLImageElement.rs file

[[File:CrossOrigin.png]]

====Step 3====

implement the currentSrc attribute by adding the appropriate attribute to HTMLImageElement.webidl

[[File:currentSrc.png]]

===Subsequent Steps===
Since the change is in this single file Htmlimageelement.rs , we haven't made any class diagram , but provided flowcharts for the algorithms we are to implement.
====Step 1====
replace the code in htmlimageelement.rs that instructs the image cache to fetch a URL with code that directly performs a network request (see HTMLScriptElement::prepare for an example that uses the NetworkListener helper and Document::load_async ). The result should be sent to the image cache using the newly-added command.

====Step 2====
implement the parse a srcset attribute algorithm by defining a parse_a_srcset_attribute function in htmlimageelement.rs . Write unit tests demonstrating correctness in tests/unit/script/htmlimageelement.rs ( ./mach test-unit -p script/dom/htmlimageelement )

The flowchart of the above step is :

[[File:parseAsrcset.jpg]]

====Step 3====
implement the parse a sizes attribute algorithm by defining a parse_a_sizes_attribute function in htmlimageelement.rs . Write unit tests demonstrating correctness in tests/unit/script/htmlimageelement.rs .
[[File:parsasize.png]]

====Step 4====
implement the normalize the source densities algorithm - create data types for source set and image source
====Step 5====
implement the update the source set algorithm by defining a update_the_source_set function in htmlimageelement.rs

[[File:updatesrc.png]]

[[File:updatesrc_2.png]]

====Step 6====
implement the select an image source algorithm by defining a select_an_image_source function in htmlimageelement.rs

== Testing ==

Following are the steps to run all the tests for HTMLImageElement:

# Install the pre-requisites required for servo as mentioned [https://github.com/servo/servo/blob/master/README.md here]
# Run the following commands

<code>
cd
</code>

<code>
git clone https://github.com/akhan7/servo.git
</code>

<code>
cd servo
</code>

<code>
./mach build --dev
</code>

'''Note:''' It may take around 30-40 mins to build. Check to see if the build is successful by running

<code>
./mach run tests/html/about-mozilla.html
</code>

The Servo browser should open and load the about-Mozilla web page.
Now open terminal and run

<code>
./mach test-wpt tests/wpt/web-platform-tests/html/dom/interfaces.html
</code>

You will see that all tests pass as expected.

'''Note:''' We have not added any new tests to the test suite as servo follows TDD and tests were previously written for HTML image element. We have just adjusted some of the test expectations for the tests which now pass due to our implementation.

=== Testing From UI ===

Our project cannot be tested from UI since the project aims to make image loading on Servo browser more conformant to HTML5 standards. However you can check that it doesn't break the existing code and the browser runs correctly by running a test page on servo after performing the build as mentioned above.

Run the following command after the project is build:

<code>
./mach run tests/html/about-mozilla.html
</code>

==Pull Request==
Here is our [https://github.com/servo/servo/pull/10134 pull request]. In the link you can see all code snippets changed due to implementing the above steps, as well as integration test progression information.

==References==
<references/>

CSC/ECE 517 Spring 2016 M1602 Make image loads conform with the spec

2016-04-05T20:57:16Z

Smshah4: /* Design Principles */

Making image load conform with the spec 
[https://en.wikipedia.org/wiki/HTML5 HTML 5] specifies a complex model for image loading on a web browser. It has specifications<ref>https://html.spec.whatwg.org/multipage/#the-picture-element</ref> for [https://html.spec.whatwg.org/multipage/#the-picture-element picture element] as well as img element, and browsers need to follow these HTML 5 specifications to conform to the standard. Servo's current implementation of image loading is [http://mxr.mozilla.org/servo/source/components/script/dom/htmlimageelement.rs#107 straightforward, but non-compliant] with HTML 5 standards<ref>https://html.spec.whatwg.org/multipage/</ref> in a number of important ways. The goal of this project is to implement image loading behavior on Servo browser that is more compliant with HTML 5 so its easy to both implement and verify against the text of the specification.
==Introduction==

===Servo===

[https://github.com/servo/servo Servo] is a [https://en.wikipedia.org/wiki/Web_browser web browser] layout engine written in [https://www.mozilla.org/en-US/?v=b Mozilla]'s new [https://en.wikipedia.org/wiki/System_programming_language systems language] [https://en.wikipedia.org/wiki/Rust_(programming_language) Rust]<ref>https://servo.org/</ref>. It is currently being developed by Mozilla Research. The aim of the project is not to create a full browser but rather to create better parallelism<ref>https://www.usenix.org/legacy/event/hotpar09/tech/full_papers/jones/jones.pdf</ref>, security<ref>https://en.wikipedia.org/wiki/Browser_security</ref>, modularity<ref>https://msdn.microsoft.com/en-us/library/ff709921.aspx</ref> and performance. The Servo project is [https://en.wikipedia.org/wiki/Open-source_software open sourced] and receives contributions from individual contributors from around the globe. It currently supports [https://www.linux.com/ Linux], [http://www.apple.com/osx/ OS X], [https://www.microsoft.com/en-us/windows Windows], [https://www.android.com/ Android], and [https://en.wikipedia.org/wiki/Gonk Gonk] (Firefox OS).

===Rust===

Hatched by Mozilla employee Graydon Hoare back in 2009, Rust was built from the ground up using elements from modern programming language design<ref>http://readwrite.com/2015/07/02/mozilla-rust-programming-language-potential/</ref>. Rust is a [https://en.wikipedia.org/wiki/General-purpose_programming_language general-purpose], [https://developer.mozilla.org/ar/docs/multiparadigmlanguage.html multi-paradigm], [https://en.wikipedia.org/wiki/Compiled_language compiled programming] language, supporting pure-functional, imperative-procedural, and object-oriented styles<ref>https://en.wikipedia.org/wiki/Rust_(programming_language)</ref>. It focuses on performance, parallelization, and memory safety and does so because unlike other programming languages it doesn't suffer from "backward-compatibility requirements"<ref>http://readwrite.com/2015/07/02/mozilla-rust-programming-language-potential/</ref>.

==Project Description==
The detailed description of the project can be found [https://github.com/servo/servo/wiki/Image-load-conformance-student-project here].

The steps are as follows:

===Compilation and Build===
* The first step is to compile Servo browser and build it on a local machine. The steps for compiling and building Servo are:
Servo is built with [https://mail.mozilla.org/pipermail/rust-dev/2014-March/009090.html Cargo], the Rust package manager. Mozilla's Mach tools are used to orchestrate the build and other tasks.

git clone https://github.com/servo/servo
cd servo
./mach build --dev
./mach run tests/html/about-mozilla.html

compile Servo and ensure that it runs tests/html/about-mozilla.html

===Initial Steps===
The initial steps for the project were completed as a part of OSS project 2. The functionalities implemented were:
* Define data types to represent the image request concept, and add pending and current requests to the HTMLImageElement type in htmlimageelement.rs . These should subsume the existing fields in HTMLImageElement that are used for storing the image's properties, and the fields of the current request should be used instead.
* Implement the crossOrigin attribute using the make_enumerated_getter / make_setter macros and uncommenting the attribute in HTMLImageElement.webidl
* Implement the currentSrc attribute by adding the appropriate attribute to HTMLImageElement.webidl
* Run ./mach test-wpt tests/wpt/web-platform-tests/html/dom/interfaces.html and adjust the test result expectations according to the documenatation.
* Add a command for the image cache task that accepts a URL and a vector of bytes. This command should instruct the cache to store this data as a newly-complete network request and continue decoding the result into pixel data.

===Subsequent Steps===
The subsequent steps for the project are to be implemented as a part of final semester project. The steps to do are:
* Replace the code in htmlimageelement.rs that instructs the image cache to fetch a URL with code that directly performs a network request (see HTMLScriptElement::prepare for an example that uses the NetworkListener helper and Document::load_async). The result should be sent to the image cache using the newly-added command.
* Implement the parse a srcset attribute algorithm by defining a parse_a_srcset_attribute function in htmlimageelement.rs. Write unit tests demonstrating correctness in tests/unit/script/htmlimageelement.rs (./mach test-unit -p script/dom/htmlimageelement).
* Implement the parse a sizes attribute algorithm by defining a parse_a_sizes_attribute function in htmlimageelement.rs. Write unit tests demonstrating correctness in tests/unit/script/htmlimageelement.rs.
* Implement the normalize the source densities algorithm - create data types for source set and image source.
* Implement the update the source set algorithm by defining a update_the_source_set function in htmlimageelement.rs.
* Implement the select an image source algorithm by defining a select_an_image_source function in htmlimageelement.rs.

==Design Principles==

There were no particular design principles used in this project as it was a modification of existing code. .

We were not supposed to modify the existing design apart from adding a new behaviour/ability for HTMLImageElement. The same principals of the original Servo code can be thought of as being followed by the project.
The main aim was to increase the code coverage and to make the Servo browser more compliant to HMTL 5 standards when it comes to image loading.

We attempted to follow good OO practices throughout development. While using enums and also while defining new methods, we tried to follow the DRY principle in order to avoid repetition of code. Servo has it's own coding standards which are checked by running following command

./mach test-tidy

Issues reported by test are to be fixed before pull request can be generated. This ensures that developers would adhere to coding standards. We have fixed all the issues reported by tidy-test.

==Implementation==
===Initial Steps===
The following steps were followed to meet the project requirements as per this [https://github.com/servo/servo/wiki/Image-load-conformance-student-project github page].

====Step 1====

As we need to define data types to represent the image request concept, and add pending and current requests to the HTMLImageElement type in htmlimageelement.rs . These should subsume the existing fields in HTMLImageElement that are used for storing the image's properties, and the fields of the current request should be used instead.

[[File:ImageRequest.png]]

====Step 2====

As we had to implement the crossOrigin attribute , we uncommented it in the HTMLImageElement.webidl file and then we created a getter and setter method for it in the HTMLImageElement.rd file using the make_enumerated_getter / make_setter macros .

[[File:CrossOrigin_webidl.png]]

HTMLImageElement.rs file

[[File:CrossOrigin.png]]

====Step 3====

implement the currentSrc attribute by adding the appropriate attribute to HTMLImageElement.webidl

[[File:currentSrc.png]]

===Subsequent Steps===
Since the change is in this single file Htmlimageelement.rs , we haven't made any class diagram , but provided flowcharts for the algorithms we are to implement.
====Step 1====
replace the code in htmlimageelement.rs that instructs the image cache to fetch a URL with code that directly performs a network request (see HTMLScriptElement::prepare for an example that uses the NetworkListener helper and Document::load_async ). The result should be sent to the image cache using the newly-added command.

====Step 2====
implement the parse a srcset attribute algorithm by defining a parse_a_srcset_attribute function in htmlimageelement.rs . Write unit tests demonstrating correctness in tests/unit/script/htmlimageelement.rs ( ./mach test-unit -p script/dom/htmlimageelement )

The flowchart of the above step is :

[[File:parseAsrcset.jpg]]

====Step 3====
implement the parse a sizes attribute algorithm by defining a parse_a_sizes_attribute function in htmlimageelement.rs . Write unit tests demonstrating correctness in tests/unit/script/htmlimageelement.rs .
====Step 4====
implement the normalize the source densities algorithm - create data types for source set and image source
====Step 5====
implement the update the source set algorithm by defining a update_the_source_set function in htmlimageelement.rs

[[File:updatesrc.png]]

[[File:updatesrc_2.png]]

====Step 6====
implement the select an image source algorithm by defining a select_an_image_source function in htmlimageelement.rs

== Testing ==

Following are the steps to run all the tests for HTMLImageElement:

# Install the pre-requisites required for servo as mentioned [https://github.com/servo/servo/blob/master/README.md here]
# Run the following commands

<code>
cd
</code>

<code>
git clone https://github.com/akhan7/servo.git
</code>

<code>
cd servo
</code>

<code>
./mach build --dev
</code>

'''Note:''' It may take around 30-40 mins to build. Check to see if the build is successful by running

<code>
./mach run tests/html/about-mozilla.html
</code>

The Servo browser should open and load the about-Mozilla web page.
Now open terminal and run

<code>
./mach test-wpt tests/wpt/web-platform-tests/html/dom/interfaces.html
</code>

You will see that all tests pass as expected.

'''Note:''' We have not added any new tests to the test suite as servo follows TDD and tests were previously written for HTML image element. We have just adjusted some of the test expectations for the tests which now pass due to our implementation.

=== Testing From UI ===

Our project cannot be tested from UI since the project aims to make image loading on Servo browser more conformant to HTML5 standards. However you can check that it doesn't break the existing code and the browser runs correctly by running a test page on servo after performing the build as mentioned above.

Run the following command after the project is build:

<code>
./mach run tests/html/about-mozilla.html
</code>

==Pull Request==
Here is our [https://github.com/servo/servo/pull/10134 pull request]. In the link you can see all code snippets changed due to implementing the above steps, as well as integration test progression information.

==References==
<references/>

CSC/ECE 517 Spring 2016 M1602 Make image loads conform with the spec

2016-04-05T20:55:12Z

Smshah4: /* Subsequent Steps */

Making image load conform with the spec 
[https://en.wikipedia.org/wiki/HTML5 HTML 5] specifies a complex model for image loading on a web browser. It has specifications<ref>https://html.spec.whatwg.org/multipage/#the-picture-element</ref> for [https://html.spec.whatwg.org/multipage/#the-picture-element picture element] as well as img element, and browsers need to follow these HTML 5 specifications to conform to the standard. Servo's current implementation of image loading is [http://mxr.mozilla.org/servo/source/components/script/dom/htmlimageelement.rs#107 straightforward, but non-compliant] with HTML 5 standards<ref>https://html.spec.whatwg.org/multipage/</ref> in a number of important ways. The goal of this project is to implement image loading behavior on Servo browser that is more compliant with HTML 5 so its easy to both implement and verify against the text of the specification.
==Introduction==

===Servo===

[https://github.com/servo/servo Servo] is a [https://en.wikipedia.org/wiki/Web_browser web browser] layout engine written in [https://www.mozilla.org/en-US/?v=b Mozilla]'s new [https://en.wikipedia.org/wiki/System_programming_language systems language] [https://en.wikipedia.org/wiki/Rust_(programming_language) Rust]<ref>https://servo.org/</ref>. It is currently being developed by Mozilla Research. The aim of the project is not to create a full browser but rather to create better parallelism<ref>https://www.usenix.org/legacy/event/hotpar09/tech/full_papers/jones/jones.pdf</ref>, security<ref>https://en.wikipedia.org/wiki/Browser_security</ref>, modularity<ref>https://msdn.microsoft.com/en-us/library/ff709921.aspx</ref> and performance. The Servo project is [https://en.wikipedia.org/wiki/Open-source_software open sourced] and receives contributions from individual contributors from around the globe. It currently supports [https://www.linux.com/ Linux], [http://www.apple.com/osx/ OS X], [https://www.microsoft.com/en-us/windows Windows], [https://www.android.com/ Android], and [https://en.wikipedia.org/wiki/Gonk Gonk] (Firefox OS).

===Rust===

Hatched by Mozilla employee Graydon Hoare back in 2009, Rust was built from the ground up using elements from modern programming language design<ref>http://readwrite.com/2015/07/02/mozilla-rust-programming-language-potential/</ref>. Rust is a [https://en.wikipedia.org/wiki/General-purpose_programming_language general-purpose], [https://developer.mozilla.org/ar/docs/multiparadigmlanguage.html multi-paradigm], [https://en.wikipedia.org/wiki/Compiled_language compiled programming] language, supporting pure-functional, imperative-procedural, and object-oriented styles<ref>https://en.wikipedia.org/wiki/Rust_(programming_language)</ref>. It focuses on performance, parallelization, and memory safety and does so because unlike other programming languages it doesn't suffer from "backward-compatibility requirements"<ref>http://readwrite.com/2015/07/02/mozilla-rust-programming-language-potential/</ref>.

==Project Description==
The detailed description of the project can be found [https://github.com/servo/servo/wiki/Image-load-conformance-student-project here].

The steps are as follows:

===Compilation and Build===
* The first step is to compile Servo browser and build it on a local machine. The steps for compiling and building Servo are:
Servo is built with [https://mail.mozilla.org/pipermail/rust-dev/2014-March/009090.html Cargo], the Rust package manager. Mozilla's Mach tools are used to orchestrate the build and other tasks.

git clone https://github.com/servo/servo
cd servo
./mach build --dev
./mach run tests/html/about-mozilla.html

compile Servo and ensure that it runs tests/html/about-mozilla.html

===Initial Steps===
The initial steps for the project were completed as a part of OSS project 2. The functionalities implemented were:
* Define data types to represent the image request concept, and add pending and current requests to the HTMLImageElement type in htmlimageelement.rs . These should subsume the existing fields in HTMLImageElement that are used for storing the image's properties, and the fields of the current request should be used instead.
* Implement the crossOrigin attribute using the make_enumerated_getter / make_setter macros and uncommenting the attribute in HTMLImageElement.webidl
* Implement the currentSrc attribute by adding the appropriate attribute to HTMLImageElement.webidl
* Run ./mach test-wpt tests/wpt/web-platform-tests/html/dom/interfaces.html and adjust the test result expectations according to the documenatation.
* Add a command for the image cache task that accepts a URL and a vector of bytes. This command should instruct the cache to store this data as a newly-complete network request and continue decoding the result into pixel data.

===Subsequent Steps===
The subsequent steps for the project are to be implemented as a part of final semester project. The steps to do are:
* Replace the code in htmlimageelement.rs that instructs the image cache to fetch a URL with code that directly performs a network request (see HTMLScriptElement::prepare for an example that uses the NetworkListener helper and Document::load_async). The result should be sent to the image cache using the newly-added command.
* Implement the parse a srcset attribute algorithm by defining a parse_a_srcset_attribute function in htmlimageelement.rs. Write unit tests demonstrating correctness in tests/unit/script/htmlimageelement.rs (./mach test-unit -p script/dom/htmlimageelement).
* Implement the parse a sizes attribute algorithm by defining a parse_a_sizes_attribute function in htmlimageelement.rs. Write unit tests demonstrating correctness in tests/unit/script/htmlimageelement.rs.
* Implement the normalize the source densities algorithm - create data types for source set and image source.
* Implement the update the source set algorithm by defining a update_the_source_set function in htmlimageelement.rs.
* Implement the select an image source algorithm by defining a select_an_image_source function in htmlimageelement.rs.

==Design Principles==

There were no particular design principles used in this project as it was a modification of existing code. The same principals of the original Servo code can be thought of as being followed by the project. The main aim was to increase the code coverage and to make the Servo browser more compliant to HMTL 5 standards when it comes to image loading.

==Implementation==
===Initial Steps===
The following steps were followed to meet the project requirements as per this [https://github.com/servo/servo/wiki/Image-load-conformance-student-project github page].

====Step 1====

As we need to define data types to represent the image request concept, and add pending and current requests to the HTMLImageElement type in htmlimageelement.rs . These should subsume the existing fields in HTMLImageElement that are used for storing the image's properties, and the fields of the current request should be used instead.

[[File:ImageRequest.png]]

====Step 2====

As we had to implement the crossOrigin attribute , we uncommented it in the HTMLImageElement.webidl file and then we created a getter and setter method for it in the HTMLImageElement.rd file using the make_enumerated_getter / make_setter macros .

[[File:CrossOrigin_webidl.png]]

HTMLImageElement.rs file

[[File:CrossOrigin.png]]

====Step 3====

implement the currentSrc attribute by adding the appropriate attribute to HTMLImageElement.webidl

[[File:currentSrc.png]]

===Subsequent Steps===
Since the change is in this single file Htmlimageelement.rs , we haven't made any class diagram , but provided flowcharts for the algorithms we are to implement.
====Step 1====
replace the code in htmlimageelement.rs that instructs the image cache to fetch a URL with code that directly performs a network request (see HTMLScriptElement::prepare for an example that uses the NetworkListener helper and Document::load_async ). The result should be sent to the image cache using the newly-added command.

====Step 2====
implement the parse a srcset attribute algorithm by defining a parse_a_srcset_attribute function in htmlimageelement.rs . Write unit tests demonstrating correctness in tests/unit/script/htmlimageelement.rs ( ./mach test-unit -p script/dom/htmlimageelement )

The flowchart of the above step is :

[[File:parseAsrcset.jpg]]

====Step 3====
implement the parse a sizes attribute algorithm by defining a parse_a_sizes_attribute function in htmlimageelement.rs . Write unit tests demonstrating correctness in tests/unit/script/htmlimageelement.rs .
====Step 4====
implement the normalize the source densities algorithm - create data types for source set and image source
====Step 5====
implement the update the source set algorithm by defining a update_the_source_set function in htmlimageelement.rs

[[File:updatesrc.png]]

[[File:updatesrc_2.png]]

====Step 6====
implement the select an image source algorithm by defining a select_an_image_source function in htmlimageelement.rs

== Testing ==

Following are the steps to run all the tests for HTMLImageElement:

# Install the pre-requisites required for servo as mentioned [https://github.com/servo/servo/blob/master/README.md here]
# Run the following commands

<code>
cd
</code>

<code>
git clone https://github.com/akhan7/servo.git
</code>

<code>
cd servo
</code>

<code>
./mach build --dev
</code>

'''Note:''' It may take around 30-40 mins to build. Check to see if the build is successful by running

<code>
./mach run tests/html/about-mozilla.html
</code>

The Servo browser should open and load the about-Mozilla web page.
Now open terminal and run

<code>
./mach test-wpt tests/wpt/web-platform-tests/html/dom/interfaces.html
</code>

You will see that all tests pass as expected.

'''Note:''' We have not added any new tests to the test suite as servo follows TDD and tests were previously written for HTML image element. We have just adjusted some of the test expectations for the tests which now pass due to our implementation.

=== Testing From UI ===

Our project cannot be tested from UI since the project aims to make image loading on Servo browser more conformant to HTML5 standards. However you can check that it doesn't break the existing code and the browser runs correctly by running a test page on servo after performing the build as mentioned above.

Run the following command after the project is build:

<code>
./mach run tests/html/about-mozilla.html
</code>

==Pull Request==
Here is our [https://github.com/servo/servo/pull/10134 pull request]. In the link you can see all code snippets changed due to implementing the above steps, as well as integration test progression information.

==References==
<references/>

File:Updatesrc 2.png

2016-04-05T20:48:26Z

Smshah4:

CSC/ECE 517 Spring 2016 M1602 Make image loads conform with the spec

2016-04-05T20:48:17Z

Smshah4: /* Step 5 */

Making image load conform with the spec 
[https://en.wikipedia.org/wiki/HTML5 HTML 5] specifies a complex model for image loading on a web browser. It has specifications<ref>https://html.spec.whatwg.org/multipage/#the-picture-element</ref> for [https://html.spec.whatwg.org/multipage/#the-picture-element picture element] as well as img element, and browsers need to follow these HTML 5 specifications to conform to the standard. Servo's current implementation of image loading is [http://mxr.mozilla.org/servo/source/components/script/dom/htmlimageelement.rs#107 straightforward, but non-compliant] with HTML 5 standards<ref>https://html.spec.whatwg.org/multipage/</ref> in a number of important ways. The goal of this project is to implement image loading behavior on Servo browser that is more compliant with HTML 5 so its easy to both implement and verify against the text of the specification.
==Introduction==

===Servo===

[https://github.com/servo/servo Servo] is a [https://en.wikipedia.org/wiki/Web_browser web browser] layout engine written in [https://www.mozilla.org/en-US/?v=b Mozilla]'s new [https://en.wikipedia.org/wiki/System_programming_language systems language] [https://en.wikipedia.org/wiki/Rust_(programming_language) Rust]<ref>https://servo.org/</ref>. It is currently being developed by Mozilla Research. The aim of the project is not to create a full browser but rather to create better parallelism<ref>https://www.usenix.org/legacy/event/hotpar09/tech/full_papers/jones/jones.pdf</ref>, security<ref>https://en.wikipedia.org/wiki/Browser_security</ref>, modularity<ref>https://msdn.microsoft.com/en-us/library/ff709921.aspx</ref> and performance. The Servo project is [https://en.wikipedia.org/wiki/Open-source_software open sourced] and receives contributions from individual contributors from around the globe. It currently supports [https://www.linux.com/ Linux], [http://www.apple.com/osx/ OS X], [https://www.microsoft.com/en-us/windows Windows], [https://www.android.com/ Android], and [https://en.wikipedia.org/wiki/Gonk Gonk] (Firefox OS).

===Rust===

Hatched by Mozilla employee Graydon Hoare back in 2009, Rust was built from the ground up using elements from modern programming language design<ref>http://readwrite.com/2015/07/02/mozilla-rust-programming-language-potential/</ref>. Rust is a [https://en.wikipedia.org/wiki/General-purpose_programming_language general-purpose], [https://developer.mozilla.org/ar/docs/multiparadigmlanguage.html multi-paradigm], [https://en.wikipedia.org/wiki/Compiled_language compiled programming] language, supporting pure-functional, imperative-procedural, and object-oriented styles<ref>https://en.wikipedia.org/wiki/Rust_(programming_language)</ref>. It focuses on performance, parallelization, and memory safety and does so because unlike other programming languages it doesn't suffer from "backward-compatibility requirements"<ref>http://readwrite.com/2015/07/02/mozilla-rust-programming-language-potential/</ref>.

==Project Description==
The detailed description of the project can be found [https://github.com/servo/servo/wiki/Image-load-conformance-student-project here].

The steps are as follows:

===Compilation and Build===
* The first step is to compile Servo browser and build it on a local machine. The steps for compiling and building Servo are:
Servo is built with [https://mail.mozilla.org/pipermail/rust-dev/2014-March/009090.html Cargo], the Rust package manager. Mozilla's Mach tools are used to orchestrate the build and other tasks.

git clone https://github.com/servo/servo
cd servo
./mach build --dev
./mach run tests/html/about-mozilla.html

compile Servo and ensure that it runs tests/html/about-mozilla.html

===Initial Steps===
The initial steps for the project were completed as a part of OSS project 2. The functionalities implemented were:
* Define data types to represent the image request concept, and add pending and current requests to the HTMLImageElement type in htmlimageelement.rs . These should subsume the existing fields in HTMLImageElement that are used for storing the image's properties, and the fields of the current request should be used instead.
* Implement the crossOrigin attribute using the make_enumerated_getter / make_setter macros and uncommenting the attribute in HTMLImageElement.webidl
* Implement the currentSrc attribute by adding the appropriate attribute to HTMLImageElement.webidl
* Run ./mach test-wpt tests/wpt/web-platform-tests/html/dom/interfaces.html and adjust the test result expectations according to the documenatation.
* Add a command for the image cache task that accepts a URL and a vector of bytes. This command should instruct the cache to store this data as a newly-complete network request and continue decoding the result into pixel data.

===Subsequent Steps===
The subsequent steps for the project are to be implemented as a part of final semester project. The steps to do are:
* Replace the code in htmlimageelement.rs that instructs the image cache to fetch a URL with code that directly performs a network request (see HTMLScriptElement::prepare for an example that uses the NetworkListener helper and Document::load_async). The result should be sent to the image cache using the newly-added command.
* Implement the parse a srcset attribute algorithm by defining a parse_a_srcset_attribute function in htmlimageelement.rs. Write unit tests demonstrating correctness in tests/unit/script/htmlimageelement.rs (./mach test-unit -p script/dom/htmlimageelement).
* Implement the parse a sizes attribute algorithm by defining a parse_a_sizes_attribute function in htmlimageelement.rs. Write unit tests demonstrating correctness in tests/unit/script/htmlimageelement.rs.
* Implement the normalize the source densities algorithm - create data types for source set and image source.
* Implement the update the source set algorithm by defining a update_the_source_set function in htmlimageelement.rs.
* Implement the select an image source algorithm by defining a select_an_image_source function in htmlimageelement.rs.

==Design Principles==

There were no particular design principles used in this project as it was a modification of existing code. The same principals of the original Servo code can be thought of as being followed by the project. The main aim was to increase the code coverage and to make the Servo browser more compliant to HMTL 5 standards when it comes to image loading.

==Implementation==
===Initial Steps===
The following steps were followed to meet the project requirements as per this [https://github.com/servo/servo/wiki/Image-load-conformance-student-project github page].

====Step 1====

As we need to define data types to represent the image request concept, and add pending and current requests to the HTMLImageElement type in htmlimageelement.rs . These should subsume the existing fields in HTMLImageElement that are used for storing the image's properties, and the fields of the current request should be used instead.

[[File:ImageRequest.png]]

====Step 2====

As we had to implement the crossOrigin attribute , we uncommented it in the HTMLImageElement.webidl file and then we created a getter and setter method for it in the HTMLImageElement.rd file using the make_enumerated_getter / make_setter macros .

[[File:CrossOrigin_webidl.png]]

HTMLImageElement.rs file

[[File:CrossOrigin.png]]

====Step 3====

implement the currentSrc attribute by adding the appropriate attribute to HTMLImageElement.webidl

[[File:currentSrc.png]]

===Subsequent Steps===
====Step 1====
replace the code in htmlimageelement.rs that instructs the image cache to fetch a URL with code that directly performs a network request (see HTMLScriptElement::prepare for an example that uses the NetworkListener helper and Document::load_async ). The result should be sent to the image cache using the newly-added command.

====Step 2====
implement the parse a srcset attribute algorithm by defining a parse_a_srcset_attribute function in htmlimageelement.rs . Write unit tests demonstrating correctness in tests/unit/script/htmlimageelement.rs ( ./mach test-unit -p script/dom/htmlimageelement )

The flowchart of the above step is :

[[File:parseAsrcset.jpg]]

====Step 3====
implement the parse a sizes attribute algorithm by defining a parse_a_sizes_attribute function in htmlimageelement.rs . Write unit tests demonstrating correctness in tests/unit/script/htmlimageelement.rs .
====Step 4====
implement the normalize the source densities algorithm - create data types for source set and image source
====Step 5====
implement the update the source set algorithm by defining a update_the_source_set function in htmlimageelement.rs

[[File:updatesrc.png]]

[[File:updatesrc_2.png]]

====Step 6====
implement the select an image source algorithm by defining a select_an_image_source function in htmlimageelement.rs

== Testing ==

Following are the steps to run all the tests for HTMLImageElement:

# Install the pre-requisites required for servo as mentioned [https://github.com/servo/servo/blob/master/README.md here]
# Run the following commands

<code>
cd
</code>

<code>
git clone https://github.com/akhan7/servo.git
</code>

<code>
cd servo
</code>

<code>
./mach build --dev
</code>

'''Note:''' It may take around 30-40 mins to build. Check to see if the build is successful by running

<code>
./mach run tests/html/about-mozilla.html
</code>

The Servo browser should open and load the about-Mozilla web page.
Now open terminal and run

<code>
./mach test-wpt tests/wpt/web-platform-tests/html/dom/interfaces.html
</code>

You will see that all tests pass as expected.

'''Note:''' We have not added any new tests to the test suite as servo follows TDD and tests were previously written for HTML image element. We have just adjusted some of the test expectations for the tests which now pass due to our implementation.

=== Testing From UI ===

Our project cannot be tested from UI since the project aims to make image loading on Servo browser more conformant to HTML5 standards. However you can check that it doesn't break the existing code and the browser runs correctly by running a test page on servo after performing the build as mentioned above.

Run the following command after the project is build:

<code>
./mach run tests/html/about-mozilla.html
</code>

==Pull Request==
Here is our [https://github.com/servo/servo/pull/10134 pull request]. In the link you can see all code snippets changed due to implementing the above steps, as well as integration test progression information.

==References==
<references/>

File:Updatesrc.png

2016-04-05T20:45:20Z

Smshah4:

CSC/ECE 517 Spring 2016 M1602 Make image loads conform with the spec

2016-04-05T20:45:11Z

Smshah4: /* Step 5 */

Making image load conform with the spec 
[https://en.wikipedia.org/wiki/HTML5 HTML 5] specifies a complex model for image loading on a web browser. It has specifications<ref>https://html.spec.whatwg.org/multipage/#the-picture-element</ref> for [https://html.spec.whatwg.org/multipage/#the-picture-element picture element] as well as img element, and browsers need to follow these HTML 5 specifications to conform to the standard. Servo's current implementation of image loading is [http://mxr.mozilla.org/servo/source/components/script/dom/htmlimageelement.rs#107 straightforward, but non-compliant] with HTML 5 standards<ref>https://html.spec.whatwg.org/multipage/</ref> in a number of important ways. The goal of this project is to implement image loading behavior on Servo browser that is more compliant with HTML 5 so its easy to both implement and verify against the text of the specification.
==Introduction==

===Servo===

[https://github.com/servo/servo Servo] is a [https://en.wikipedia.org/wiki/Web_browser web browser] layout engine written in [https://www.mozilla.org/en-US/?v=b Mozilla]'s new [https://en.wikipedia.org/wiki/System_programming_language systems language] [https://en.wikipedia.org/wiki/Rust_(programming_language) Rust]<ref>https://servo.org/</ref>. It is currently being developed by Mozilla Research. The aim of the project is not to create a full browser but rather to create better parallelism<ref>https://www.usenix.org/legacy/event/hotpar09/tech/full_papers/jones/jones.pdf</ref>, security<ref>https://en.wikipedia.org/wiki/Browser_security</ref>, modularity<ref>https://msdn.microsoft.com/en-us/library/ff709921.aspx</ref> and performance. The Servo project is [https://en.wikipedia.org/wiki/Open-source_software open sourced] and receives contributions from individual contributors from around the globe. It currently supports [https://www.linux.com/ Linux], [http://www.apple.com/osx/ OS X], [https://www.microsoft.com/en-us/windows Windows], [https://www.android.com/ Android], and [https://en.wikipedia.org/wiki/Gonk Gonk] (Firefox OS).

===Rust===

Hatched by Mozilla employee Graydon Hoare back in 2009, Rust was built from the ground up using elements from modern programming language design<ref>http://readwrite.com/2015/07/02/mozilla-rust-programming-language-potential/</ref>. Rust is a [https://en.wikipedia.org/wiki/General-purpose_programming_language general-purpose], [https://developer.mozilla.org/ar/docs/multiparadigmlanguage.html multi-paradigm], [https://en.wikipedia.org/wiki/Compiled_language compiled programming] language, supporting pure-functional, imperative-procedural, and object-oriented styles<ref>https://en.wikipedia.org/wiki/Rust_(programming_language)</ref>. It focuses on performance, parallelization, and memory safety and does so because unlike other programming languages it doesn't suffer from "backward-compatibility requirements"<ref>http://readwrite.com/2015/07/02/mozilla-rust-programming-language-potential/</ref>.

==Project Description==
The detailed description of the project can be found [https://github.com/servo/servo/wiki/Image-load-conformance-student-project here].

The steps are as follows:

===Compilation and Build===
* The first step is to compile Servo browser and build it on a local machine. The steps for compiling and building Servo are:
Servo is built with [https://mail.mozilla.org/pipermail/rust-dev/2014-March/009090.html Cargo], the Rust package manager. Mozilla's Mach tools are used to orchestrate the build and other tasks.

git clone https://github.com/servo/servo
cd servo
./mach build --dev
./mach run tests/html/about-mozilla.html

compile Servo and ensure that it runs tests/html/about-mozilla.html

===Initial Steps===
The initial steps for the project were completed as a part of OSS project 2. The functionalities implemented were:
* Define data types to represent the image request concept, and add pending and current requests to the HTMLImageElement type in htmlimageelement.rs . These should subsume the existing fields in HTMLImageElement that are used for storing the image's properties, and the fields of the current request should be used instead.
* Implement the crossOrigin attribute using the make_enumerated_getter / make_setter macros and uncommenting the attribute in HTMLImageElement.webidl
* Implement the currentSrc attribute by adding the appropriate attribute to HTMLImageElement.webidl
* Run ./mach test-wpt tests/wpt/web-platform-tests/html/dom/interfaces.html and adjust the test result expectations according to the documenatation.
* Add a command for the image cache task that accepts a URL and a vector of bytes. This command should instruct the cache to store this data as a newly-complete network request and continue decoding the result into pixel data.

===Subsequent Steps===
The subsequent steps for the project are to be implemented as a part of final semester project. The steps to do are:
* Replace the code in htmlimageelement.rs that instructs the image cache to fetch a URL with code that directly performs a network request (see HTMLScriptElement::prepare for an example that uses the NetworkListener helper and Document::load_async). The result should be sent to the image cache using the newly-added command.
* Implement the parse a srcset attribute algorithm by defining a parse_a_srcset_attribute function in htmlimageelement.rs. Write unit tests demonstrating correctness in tests/unit/script/htmlimageelement.rs (./mach test-unit -p script/dom/htmlimageelement).
* Implement the parse a sizes attribute algorithm by defining a parse_a_sizes_attribute function in htmlimageelement.rs. Write unit tests demonstrating correctness in tests/unit/script/htmlimageelement.rs.
* Implement the normalize the source densities algorithm - create data types for source set and image source.
* Implement the update the source set algorithm by defining a update_the_source_set function in htmlimageelement.rs.
* Implement the select an image source algorithm by defining a select_an_image_source function in htmlimageelement.rs.

==Design Principles==

There were no particular design principles used in this project as it was a modification of existing code. The same principals of the original Servo code can be thought of as being followed by the project. The main aim was to increase the code coverage and to make the Servo browser more compliant to HMTL 5 standards when it comes to image loading.

==Implementation==
===Initial Steps===
The following steps were followed to meet the project requirements as per this [https://github.com/servo/servo/wiki/Image-load-conformance-student-project github page].

====Step 1====

As we need to define data types to represent the image request concept, and add pending and current requests to the HTMLImageElement type in htmlimageelement.rs . These should subsume the existing fields in HTMLImageElement that are used for storing the image's properties, and the fields of the current request should be used instead.

[[File:ImageRequest.png]]

====Step 2====

As we had to implement the crossOrigin attribute , we uncommented it in the HTMLImageElement.webidl file and then we created a getter and setter method for it in the HTMLImageElement.rd file using the make_enumerated_getter / make_setter macros .

[[File:CrossOrigin_webidl.png]]

HTMLImageElement.rs file

[[File:CrossOrigin.png]]

====Step 3====

implement the currentSrc attribute by adding the appropriate attribute to HTMLImageElement.webidl

[[File:currentSrc.png]]

===Subsequent Steps===
====Step 1====
replace the code in htmlimageelement.rs that instructs the image cache to fetch a URL with code that directly performs a network request (see HTMLScriptElement::prepare for an example that uses the NetworkListener helper and Document::load_async ). The result should be sent to the image cache using the newly-added command.

====Step 2====
implement the parse a srcset attribute algorithm by defining a parse_a_srcset_attribute function in htmlimageelement.rs . Write unit tests demonstrating correctness in tests/unit/script/htmlimageelement.rs ( ./mach test-unit -p script/dom/htmlimageelement )

The flowchart of the above step is :

[[File:parseAsrcset.jpg]]

====Step 3====
implement the parse a sizes attribute algorithm by defining a parse_a_sizes_attribute function in htmlimageelement.rs . Write unit tests demonstrating correctness in tests/unit/script/htmlimageelement.rs .
====Step 4====
implement the normalize the source densities algorithm - create data types for source set and image source
====Step 5====
implement the update the source set algorithm by defining a update_the_source_set function in htmlimageelement.rs

[[File:updatesrc.png]]

====Step 6====
implement the select an image source algorithm by defining a select_an_image_source function in htmlimageelement.rs

== Testing ==

Following are the steps to run all the tests for HTMLImageElement:

# Install the pre-requisites required for servo as mentioned [https://github.com/servo/servo/blob/master/README.md here]
# Run the following commands

<code>
cd
</code>

<code>
git clone https://github.com/akhan7/servo.git
</code>

<code>
cd servo
</code>

<code>
./mach build --dev
</code>

'''Note:''' It may take around 30-40 mins to build. Check to see if the build is successful by running

<code>
./mach run tests/html/about-mozilla.html
</code>

The Servo browser should open and load the about-Mozilla web page.
Now open terminal and run

<code>
./mach test-wpt tests/wpt/web-platform-tests/html/dom/interfaces.html
</code>

You will see that all tests pass as expected.

'''Note:''' We have not added any new tests to the test suite as servo follows TDD and tests were previously written for HTML image element. We have just adjusted some of the test expectations for the tests which now pass due to our implementation.

=== Testing From UI ===

Our project cannot be tested from UI since the project aims to make image loading on Servo browser more conformant to HTML5 standards. However you can check that it doesn't break the existing code and the browser runs correctly by running a test page on servo after performing the build as mentioned above.

Run the following command after the project is build:

<code>
./mach run tests/html/about-mozilla.html
</code>

==Pull Request==
Here is our [https://github.com/servo/servo/pull/10134 pull request]. In the link you can see all code snippets changed due to implementing the above steps, as well as integration test progression information.

==References==
<references/>

File:Updatesrc.jpg

2016-04-05T20:40:21Z

Smshah4: uploaded a new version of "File:Updatesrc.jpg"

File:Updatesrc.jpg

2016-04-05T20:37:55Z

Smshah4:

CSC/ECE 517 Spring 2016 M1602 Make image loads conform with the spec

2016-04-05T20:37:43Z

Smshah4: /* Step 5 */

Making image load conform with the spec 
[https://en.wikipedia.org/wiki/HTML5 HTML 5] specifies a complex model for image loading on a web browser. It has specifications<ref>https://html.spec.whatwg.org/multipage/#the-picture-element</ref> for [https://html.spec.whatwg.org/multipage/#the-picture-element picture element] as well as img element, and browsers need to follow these HTML 5 specifications to conform to the standard. Servo's current implementation of image loading is [http://mxr.mozilla.org/servo/source/components/script/dom/htmlimageelement.rs#107 straightforward, but non-compliant] with HTML 5 standards<ref>https://html.spec.whatwg.org/multipage/</ref> in a number of important ways. The goal of this project is to implement image loading behavior on Servo browser that is more compliant with HTML 5 so its easy to both implement and verify against the text of the specification.
==Introduction==

===Servo===

[https://github.com/servo/servo Servo] is a [https://en.wikipedia.org/wiki/Web_browser web browser] layout engine written in [https://www.mozilla.org/en-US/?v=b Mozilla]'s new [https://en.wikipedia.org/wiki/System_programming_language systems language] [https://en.wikipedia.org/wiki/Rust_(programming_language) Rust]<ref>https://servo.org/</ref>. It is currently being developed by Mozilla Research. The aim of the project is not to create a full browser but rather to create better parallelism<ref>https://www.usenix.org/legacy/event/hotpar09/tech/full_papers/jones/jones.pdf</ref>, security<ref>https://en.wikipedia.org/wiki/Browser_security</ref>, modularity<ref>https://msdn.microsoft.com/en-us/library/ff709921.aspx</ref> and performance. The Servo project is [https://en.wikipedia.org/wiki/Open-source_software open sourced] and receives contributions from individual contributors from around the globe. It currently supports [https://www.linux.com/ Linux], [http://www.apple.com/osx/ OS X], [https://www.microsoft.com/en-us/windows Windows], [https://www.android.com/ Android], and [https://en.wikipedia.org/wiki/Gonk Gonk] (Firefox OS).

===Rust===

Hatched by Mozilla employee Graydon Hoare back in 2009, Rust was built from the ground up using elements from modern programming language design<ref>http://readwrite.com/2015/07/02/mozilla-rust-programming-language-potential/</ref>. Rust is a [https://en.wikipedia.org/wiki/General-purpose_programming_language general-purpose], [https://developer.mozilla.org/ar/docs/multiparadigmlanguage.html multi-paradigm], [https://en.wikipedia.org/wiki/Compiled_language compiled programming] language, supporting pure-functional, imperative-procedural, and object-oriented styles<ref>https://en.wikipedia.org/wiki/Rust_(programming_language)</ref>. It focuses on performance, parallelization, and memory safety and does so because unlike other programming languages it doesn't suffer from "backward-compatibility requirements"<ref>http://readwrite.com/2015/07/02/mozilla-rust-programming-language-potential/</ref>.

==Project Description==
The detailed description of the project can be found [https://github.com/servo/servo/wiki/Image-load-conformance-student-project here].

The steps are as follows:

===Compilation and Build===
* The first step is to compile Servo browser and build it on a local machine. The steps for compiling and building Servo are:
Servo is built with [https://mail.mozilla.org/pipermail/rust-dev/2014-March/009090.html Cargo], the Rust package manager. Mozilla's Mach tools are used to orchestrate the build and other tasks.

git clone https://github.com/servo/servo
cd servo
./mach build --dev
./mach run tests/html/about-mozilla.html

compile Servo and ensure that it runs tests/html/about-mozilla.html

===Initial Steps===
The initial steps for the project were completed as a part of OSS project 2. The functionalities implemented were:
* Define data types to represent the image request concept, and add pending and current requests to the HTMLImageElement type in htmlimageelement.rs . These should subsume the existing fields in HTMLImageElement that are used for storing the image's properties, and the fields of the current request should be used instead.
* Implement the crossOrigin attribute using the make_enumerated_getter / make_setter macros and uncommenting the attribute in HTMLImageElement.webidl
* Implement the currentSrc attribute by adding the appropriate attribute to HTMLImageElement.webidl
* Run ./mach test-wpt tests/wpt/web-platform-tests/html/dom/interfaces.html and adjust the test result expectations according to the documenatation.
* Add a command for the image cache task that accepts a URL and a vector of bytes. This command should instruct the cache to store this data as a newly-complete network request and continue decoding the result into pixel data.

===Subsequent Steps===
The subsequent steps for the project are to be implemented as a part of final semester project. The steps to do are:
* Replace the code in htmlimageelement.rs that instructs the image cache to fetch a URL with code that directly performs a network request (see HTMLScriptElement::prepare for an example that uses the NetworkListener helper and Document::load_async). The result should be sent to the image cache using the newly-added command.
* Implement the parse a srcset attribute algorithm by defining a parse_a_srcset_attribute function in htmlimageelement.rs. Write unit tests demonstrating correctness in tests/unit/script/htmlimageelement.rs (./mach test-unit -p script/dom/htmlimageelement).
* Implement the parse a sizes attribute algorithm by defining a parse_a_sizes_attribute function in htmlimageelement.rs. Write unit tests demonstrating correctness in tests/unit/script/htmlimageelement.rs.
* Implement the normalize the source densities algorithm - create data types for source set and image source.
* Implement the update the source set algorithm by defining a update_the_source_set function in htmlimageelement.rs.
* Implement the select an image source algorithm by defining a select_an_image_source function in htmlimageelement.rs.

==Design Principles==

There were no particular design principles used in this project as it was a modification of existing code. The same principals of the original Servo code can be thought of as being followed by the project. The main aim was to increase the code coverage and to make the Servo browser more compliant to HMTL 5 standards when it comes to image loading.

==Implementation==
===Initial Steps===
The following steps were followed to meet the project requirements as per this [https://github.com/servo/servo/wiki/Image-load-conformance-student-project github page].

====Step 1====

As we need to define data types to represent the image request concept, and add pending and current requests to the HTMLImageElement type in htmlimageelement.rs . These should subsume the existing fields in HTMLImageElement that are used for storing the image's properties, and the fields of the current request should be used instead.

[[File:ImageRequest.png]]

====Step 2====

As we had to implement the crossOrigin attribute , we uncommented it in the HTMLImageElement.webidl file and then we created a getter and setter method for it in the HTMLImageElement.rd file using the make_enumerated_getter / make_setter macros .

[[File:CrossOrigin_webidl.png]]

HTMLImageElement.rs file

[[File:CrossOrigin.png]]

====Step 3====

implement the currentSrc attribute by adding the appropriate attribute to HTMLImageElement.webidl

[[File:currentSrc.png]]

===Subsequent Steps===
====Step 1====
replace the code in htmlimageelement.rs that instructs the image cache to fetch a URL with code that directly performs a network request (see HTMLScriptElement::prepare for an example that uses the NetworkListener helper and Document::load_async ). The result should be sent to the image cache using the newly-added command.

====Step 2====
implement the parse a srcset attribute algorithm by defining a parse_a_srcset_attribute function in htmlimageelement.rs . Write unit tests demonstrating correctness in tests/unit/script/htmlimageelement.rs ( ./mach test-unit -p script/dom/htmlimageelement )

The flowchart of the above step is :

[[File:parseAsrcset.jpg]]

====Step 3====
implement the parse a sizes attribute algorithm by defining a parse_a_sizes_attribute function in htmlimageelement.rs . Write unit tests demonstrating correctness in tests/unit/script/htmlimageelement.rs .
====Step 4====
implement the normalize the source densities algorithm - create data types for source set and image source
====Step 5====
implement the update the source set algorithm by defining a update_the_source_set function in htmlimageelement.rs

[[File:updatesrc.jpg]]

====Step 6====
implement the select an image source algorithm by defining a select_an_image_source function in htmlimageelement.rs

== Testing ==

Following are the steps to run all the tests for HTMLImageElement:

# Install the pre-requisites required for servo as mentioned [https://github.com/servo/servo/blob/master/README.md here]
# Run the following commands

<code>
cd
</code>

<code>
git clone https://github.com/akhan7/servo.git
</code>

<code>
cd servo
</code>

<code>
./mach build --dev
</code>

'''Note:''' It may take around 30-40 mins to build. Check to see if the build is successful by running

<code>
./mach run tests/html/about-mozilla.html
</code>

The Servo browser should open and load the about-Mozilla web page.
Now open terminal and run

<code>
./mach test-wpt tests/wpt/web-platform-tests/html/dom/interfaces.html
</code>

You will see that all tests pass as expected.

'''Note:''' We have not added any new tests to the test suite as servo follows TDD and tests were previously written for HTML image element. We have just adjusted some of the test expectations for the tests which now pass due to our implementation.

=== Testing From UI ===

Our project cannot be tested from UI since the project aims to make image loading on Servo browser more conformant to HTML5 standards. However you can check that it doesn't break the existing code and the browser runs correctly by running a test page on servo after performing the build as mentioned above.

Run the following command after the project is build:

<code>
./mach run tests/html/about-mozilla.html
</code>

==Pull Request==
Here is our [https://github.com/servo/servo/pull/10134 pull request]. In the link you can see all code snippets changed due to implementing the above steps, as well as integration test progression information.

==References==
<references/>

CSC/ECE 517 Spring 2016 M1602 Make image loads conform with the spec

2016-04-05T20:37:34Z

Smshah4: /* Step 5 */

Making image load conform with the spec 
[https://en.wikipedia.org/wiki/HTML5 HTML 5] specifies a complex model for image loading on a web browser. It has specifications<ref>https://html.spec.whatwg.org/multipage/#the-picture-element</ref> for [https://html.spec.whatwg.org/multipage/#the-picture-element picture element] as well as img element, and browsers need to follow these HTML 5 specifications to conform to the standard. Servo's current implementation of image loading is [http://mxr.mozilla.org/servo/source/components/script/dom/htmlimageelement.rs#107 straightforward, but non-compliant] with HTML 5 standards<ref>https://html.spec.whatwg.org/multipage/</ref> in a number of important ways. The goal of this project is to implement image loading behavior on Servo browser that is more compliant with HTML 5 so its easy to both implement and verify against the text of the specification.
==Introduction==

===Servo===

[https://github.com/servo/servo Servo] is a [https://en.wikipedia.org/wiki/Web_browser web browser] layout engine written in [https://www.mozilla.org/en-US/?v=b Mozilla]'s new [https://en.wikipedia.org/wiki/System_programming_language systems language] [https://en.wikipedia.org/wiki/Rust_(programming_language) Rust]<ref>https://servo.org/</ref>. It is currently being developed by Mozilla Research. The aim of the project is not to create a full browser but rather to create better parallelism<ref>https://www.usenix.org/legacy/event/hotpar09/tech/full_papers/jones/jones.pdf</ref>, security<ref>https://en.wikipedia.org/wiki/Browser_security</ref>, modularity<ref>https://msdn.microsoft.com/en-us/library/ff709921.aspx</ref> and performance. The Servo project is [https://en.wikipedia.org/wiki/Open-source_software open sourced] and receives contributions from individual contributors from around the globe. It currently supports [https://www.linux.com/ Linux], [http://www.apple.com/osx/ OS X], [https://www.microsoft.com/en-us/windows Windows], [https://www.android.com/ Android], and [https://en.wikipedia.org/wiki/Gonk Gonk] (Firefox OS).

===Rust===

Hatched by Mozilla employee Graydon Hoare back in 2009, Rust was built from the ground up using elements from modern programming language design<ref>http://readwrite.com/2015/07/02/mozilla-rust-programming-language-potential/</ref>. Rust is a [https://en.wikipedia.org/wiki/General-purpose_programming_language general-purpose], [https://developer.mozilla.org/ar/docs/multiparadigmlanguage.html multi-paradigm], [https://en.wikipedia.org/wiki/Compiled_language compiled programming] language, supporting pure-functional, imperative-procedural, and object-oriented styles<ref>https://en.wikipedia.org/wiki/Rust_(programming_language)</ref>. It focuses on performance, parallelization, and memory safety and does so because unlike other programming languages it doesn't suffer from "backward-compatibility requirements"<ref>http://readwrite.com/2015/07/02/mozilla-rust-programming-language-potential/</ref>.

==Project Description==
The detailed description of the project can be found [https://github.com/servo/servo/wiki/Image-load-conformance-student-project here].

The steps are as follows:

===Compilation and Build===
* The first step is to compile Servo browser and build it on a local machine. The steps for compiling and building Servo are:
Servo is built with [https://mail.mozilla.org/pipermail/rust-dev/2014-March/009090.html Cargo], the Rust package manager. Mozilla's Mach tools are used to orchestrate the build and other tasks.

git clone https://github.com/servo/servo
cd servo
./mach build --dev
./mach run tests/html/about-mozilla.html

compile Servo and ensure that it runs tests/html/about-mozilla.html

===Initial Steps===
The initial steps for the project were completed as a part of OSS project 2. The functionalities implemented were:
* Define data types to represent the image request concept, and add pending and current requests to the HTMLImageElement type in htmlimageelement.rs . These should subsume the existing fields in HTMLImageElement that are used for storing the image's properties, and the fields of the current request should be used instead.
* Implement the crossOrigin attribute using the make_enumerated_getter / make_setter macros and uncommenting the attribute in HTMLImageElement.webidl
* Implement the currentSrc attribute by adding the appropriate attribute to HTMLImageElement.webidl
* Run ./mach test-wpt tests/wpt/web-platform-tests/html/dom/interfaces.html and adjust the test result expectations according to the documenatation.
* Add a command for the image cache task that accepts a URL and a vector of bytes. This command should instruct the cache to store this data as a newly-complete network request and continue decoding the result into pixel data.

===Subsequent Steps===
The subsequent steps for the project are to be implemented as a part of final semester project. The steps to do are:
* Replace the code in htmlimageelement.rs that instructs the image cache to fetch a URL with code that directly performs a network request (see HTMLScriptElement::prepare for an example that uses the NetworkListener helper and Document::load_async). The result should be sent to the image cache using the newly-added command.
* Implement the parse a srcset attribute algorithm by defining a parse_a_srcset_attribute function in htmlimageelement.rs. Write unit tests demonstrating correctness in tests/unit/script/htmlimageelement.rs (./mach test-unit -p script/dom/htmlimageelement).
* Implement the parse a sizes attribute algorithm by defining a parse_a_sizes_attribute function in htmlimageelement.rs. Write unit tests demonstrating correctness in tests/unit/script/htmlimageelement.rs.
* Implement the normalize the source densities algorithm - create data types for source set and image source.
* Implement the update the source set algorithm by defining a update_the_source_set function in htmlimageelement.rs.
* Implement the select an image source algorithm by defining a select_an_image_source function in htmlimageelement.rs.

==Design Principles==

There were no particular design principles used in this project as it was a modification of existing code. The same principals of the original Servo code can be thought of as being followed by the project. The main aim was to increase the code coverage and to make the Servo browser more compliant to HMTL 5 standards when it comes to image loading.

==Implementation==
===Initial Steps===
The following steps were followed to meet the project requirements as per this [https://github.com/servo/servo/wiki/Image-load-conformance-student-project github page].

====Step 1====

As we need to define data types to represent the image request concept, and add pending and current requests to the HTMLImageElement type in htmlimageelement.rs . These should subsume the existing fields in HTMLImageElement that are used for storing the image's properties, and the fields of the current request should be used instead.

[[File:ImageRequest.png]]

====Step 2====

As we had to implement the crossOrigin attribute , we uncommented it in the HTMLImageElement.webidl file and then we created a getter and setter method for it in the HTMLImageElement.rd file using the make_enumerated_getter / make_setter macros .

[[File:CrossOrigin_webidl.png]]

HTMLImageElement.rs file

[[File:CrossOrigin.png]]

====Step 3====

implement the currentSrc attribute by adding the appropriate attribute to HTMLImageElement.webidl

[[File:currentSrc.png]]

===Subsequent Steps===
====Step 1====
replace the code in htmlimageelement.rs that instructs the image cache to fetch a URL with code that directly performs a network request (see HTMLScriptElement::prepare for an example that uses the NetworkListener helper and Document::load_async ). The result should be sent to the image cache using the newly-added command.

====Step 2====
implement the parse a srcset attribute algorithm by defining a parse_a_srcset_attribute function in htmlimageelement.rs . Write unit tests demonstrating correctness in tests/unit/script/htmlimageelement.rs ( ./mach test-unit -p script/dom/htmlimageelement )

The flowchart of the above step is :

[[File:parseAsrcset.jpg]]

====Step 3====
implement the parse a sizes attribute algorithm by defining a parse_a_sizes_attribute function in htmlimageelement.rs . Write unit tests demonstrating correctness in tests/unit/script/htmlimageelement.rs .
====Step 4====
implement the normalize the source densities algorithm - create data types for source set and image source
====Step 5====
implement the update the source set algorithm by defining a update_the_source_set function in htmlimageelement.rs
[[File:updatesrc.jpg]]

====Step 6====
implement the select an image source algorithm by defining a select_an_image_source function in htmlimageelement.rs

== Testing ==

Following are the steps to run all the tests for HTMLImageElement:

# Install the pre-requisites required for servo as mentioned [https://github.com/servo/servo/blob/master/README.md here]
# Run the following commands

<code>
cd
</code>

<code>
git clone https://github.com/akhan7/servo.git
</code>

<code>
cd servo
</code>

<code>
./mach build --dev
</code>

'''Note:''' It may take around 30-40 mins to build. Check to see if the build is successful by running

<code>
./mach run tests/html/about-mozilla.html
</code>

The Servo browser should open and load the about-Mozilla web page.
Now open terminal and run

<code>
./mach test-wpt tests/wpt/web-platform-tests/html/dom/interfaces.html
</code>

You will see that all tests pass as expected.

'''Note:''' We have not added any new tests to the test suite as servo follows TDD and tests were previously written for HTML image element. We have just adjusted some of the test expectations for the tests which now pass due to our implementation.

=== Testing From UI ===

Our project cannot be tested from UI since the project aims to make image loading on Servo browser more conformant to HTML5 standards. However you can check that it doesn't break the existing code and the browser runs correctly by running a test page on servo after performing the build as mentioned above.

Run the following command after the project is build:

<code>
./mach run tests/html/about-mozilla.html
</code>

==Pull Request==
Here is our [https://github.com/servo/servo/pull/10134 pull request]. In the link you can see all code snippets changed due to implementing the above steps, as well as integration test progression information.

==References==
<references/>

CSC/ECE 517 Spring 2016 M1602 Make image loads conform with the spec

2016-04-05T20:36:38Z

Smshah4: /* Step 5 */

Making image load conform with the spec 
[https://en.wikipedia.org/wiki/HTML5 HTML 5] specifies a complex model for image loading on a web browser. It has specifications<ref>https://html.spec.whatwg.org/multipage/#the-picture-element</ref> for [https://html.spec.whatwg.org/multipage/#the-picture-element picture element] as well as img element, and browsers need to follow these HTML 5 specifications to conform to the standard. Servo's current implementation of image loading is [http://mxr.mozilla.org/servo/source/components/script/dom/htmlimageelement.rs#107 straightforward, but non-compliant] with HTML 5 standards<ref>https://html.spec.whatwg.org/multipage/</ref> in a number of important ways. The goal of this project is to implement image loading behavior on Servo browser that is more compliant with HTML 5 so its easy to both implement and verify against the text of the specification.
==Introduction==

===Servo===

[https://github.com/servo/servo Servo] is a [https://en.wikipedia.org/wiki/Web_browser web browser] layout engine written in [https://www.mozilla.org/en-US/?v=b Mozilla]'s new [https://en.wikipedia.org/wiki/System_programming_language systems language] [https://en.wikipedia.org/wiki/Rust_(programming_language) Rust]<ref>https://servo.org/</ref>. It is currently being developed by Mozilla Research. The aim of the project is not to create a full browser but rather to create better parallelism<ref>https://www.usenix.org/legacy/event/hotpar09/tech/full_papers/jones/jones.pdf</ref>, security<ref>https://en.wikipedia.org/wiki/Browser_security</ref>, modularity<ref>https://msdn.microsoft.com/en-us/library/ff709921.aspx</ref> and performance. The Servo project is [https://en.wikipedia.org/wiki/Open-source_software open sourced] and receives contributions from individual contributors from around the globe. It currently supports [https://www.linux.com/ Linux], [http://www.apple.com/osx/ OS X], [https://www.microsoft.com/en-us/windows Windows], [https://www.android.com/ Android], and [https://en.wikipedia.org/wiki/Gonk Gonk] (Firefox OS).

===Rust===

Hatched by Mozilla employee Graydon Hoare back in 2009, Rust was built from the ground up using elements from modern programming language design<ref>http://readwrite.com/2015/07/02/mozilla-rust-programming-language-potential/</ref>. Rust is a [https://en.wikipedia.org/wiki/General-purpose_programming_language general-purpose], [https://developer.mozilla.org/ar/docs/multiparadigmlanguage.html multi-paradigm], [https://en.wikipedia.org/wiki/Compiled_language compiled programming] language, supporting pure-functional, imperative-procedural, and object-oriented styles<ref>https://en.wikipedia.org/wiki/Rust_(programming_language)</ref>. It focuses on performance, parallelization, and memory safety and does so because unlike other programming languages it doesn't suffer from "backward-compatibility requirements"<ref>http://readwrite.com/2015/07/02/mozilla-rust-programming-language-potential/</ref>.

==Project Description==
The detailed description of the project can be found [https://github.com/servo/servo/wiki/Image-load-conformance-student-project here].

The steps are as follows:

===Compilation and Build===
* The first step is to compile Servo browser and build it on a local machine. The steps for compiling and building Servo are:
Servo is built with [https://mail.mozilla.org/pipermail/rust-dev/2014-March/009090.html Cargo], the Rust package manager. Mozilla's Mach tools are used to orchestrate the build and other tasks.

git clone https://github.com/servo/servo
cd servo
./mach build --dev
./mach run tests/html/about-mozilla.html

compile Servo and ensure that it runs tests/html/about-mozilla.html

===Initial Steps===
The initial steps for the project were completed as a part of OSS project 2. The functionalities implemented were:
* Define data types to represent the image request concept, and add pending and current requests to the HTMLImageElement type in htmlimageelement.rs . These should subsume the existing fields in HTMLImageElement that are used for storing the image's properties, and the fields of the current request should be used instead.
* Implement the crossOrigin attribute using the make_enumerated_getter / make_setter macros and uncommenting the attribute in HTMLImageElement.webidl
* Implement the currentSrc attribute by adding the appropriate attribute to HTMLImageElement.webidl
* Run ./mach test-wpt tests/wpt/web-platform-tests/html/dom/interfaces.html and adjust the test result expectations according to the documenatation.
* Add a command for the image cache task that accepts a URL and a vector of bytes. This command should instruct the cache to store this data as a newly-complete network request and continue decoding the result into pixel data.

===Subsequent Steps===
The subsequent steps for the project are to be implemented as a part of final semester project. The steps to do are:
* Replace the code in htmlimageelement.rs that instructs the image cache to fetch a URL with code that directly performs a network request (see HTMLScriptElement::prepare for an example that uses the NetworkListener helper and Document::load_async). The result should be sent to the image cache using the newly-added command.
* Implement the parse a srcset attribute algorithm by defining a parse_a_srcset_attribute function in htmlimageelement.rs. Write unit tests demonstrating correctness in tests/unit/script/htmlimageelement.rs (./mach test-unit -p script/dom/htmlimageelement).
* Implement the parse a sizes attribute algorithm by defining a parse_a_sizes_attribute function in htmlimageelement.rs. Write unit tests demonstrating correctness in tests/unit/script/htmlimageelement.rs.
* Implement the normalize the source densities algorithm - create data types for source set and image source.
* Implement the update the source set algorithm by defining a update_the_source_set function in htmlimageelement.rs.
* Implement the select an image source algorithm by defining a select_an_image_source function in htmlimageelement.rs.

==Design Principles==

There were no particular design principles used in this project as it was a modification of existing code. The same principals of the original Servo code can be thought of as being followed by the project. The main aim was to increase the code coverage and to make the Servo browser more compliant to HMTL 5 standards when it comes to image loading.

==Implementation==
===Initial Steps===
The following steps were followed to meet the project requirements as per this [https://github.com/servo/servo/wiki/Image-load-conformance-student-project github page].

====Step 1====

As we need to define data types to represent the image request concept, and add pending and current requests to the HTMLImageElement type in htmlimageelement.rs . These should subsume the existing fields in HTMLImageElement that are used for storing the image's properties, and the fields of the current request should be used instead.

[[File:ImageRequest.png]]

====Step 2====

As we had to implement the crossOrigin attribute , we uncommented it in the HTMLImageElement.webidl file and then we created a getter and setter method for it in the HTMLImageElement.rd file using the make_enumerated_getter / make_setter macros .

[[File:CrossOrigin_webidl.png]]

HTMLImageElement.rs file

[[File:CrossOrigin.png]]

====Step 3====

implement the currentSrc attribute by adding the appropriate attribute to HTMLImageElement.webidl

[[File:currentSrc.png]]

===Subsequent Steps===
====Step 1====
replace the code in htmlimageelement.rs that instructs the image cache to fetch a URL with code that directly performs a network request (see HTMLScriptElement::prepare for an example that uses the NetworkListener helper and Document::load_async ). The result should be sent to the image cache using the newly-added command.

====Step 2====
implement the parse a srcset attribute algorithm by defining a parse_a_srcset_attribute function in htmlimageelement.rs . Write unit tests demonstrating correctness in tests/unit/script/htmlimageelement.rs ( ./mach test-unit -p script/dom/htmlimageelement )

The flowchart of the above step is :

[[File:parseAsrcset.jpg]]

====Step 3====
implement the parse a sizes attribute algorithm by defining a parse_a_sizes_attribute function in htmlimageelement.rs . Write unit tests demonstrating correctness in tests/unit/script/htmlimageelement.rs .
====Step 4====
implement the normalize the source densities algorithm - create data types for source set and image source
====Step 5====
implement the update the source set algorithm by defining a update_the_source_set function in htmlimageelement.rs

[[update_Src.jpg]]

====Step 6====
implement the select an image source algorithm by defining a select_an_image_source function in htmlimageelement.rs

== Testing ==

Following are the steps to run all the tests for HTMLImageElement:

# Install the pre-requisites required for servo as mentioned [https://github.com/servo/servo/blob/master/README.md here]
# Run the following commands

<code>
cd
</code>

<code>
git clone https://github.com/akhan7/servo.git
</code>

<code>
cd servo
</code>

<code>
./mach build --dev
</code>

'''Note:''' It may take around 30-40 mins to build. Check to see if the build is successful by running

<code>
./mach run tests/html/about-mozilla.html
</code>

The Servo browser should open and load the about-Mozilla web page.
Now open terminal and run

<code>
./mach test-wpt tests/wpt/web-platform-tests/html/dom/interfaces.html
</code>

You will see that all tests pass as expected.

'''Note:''' We have not added any new tests to the test suite as servo follows TDD and tests were previously written for HTML image element. We have just adjusted some of the test expectations for the tests which now pass due to our implementation.

=== Testing From UI ===

Our project cannot be tested from UI since the project aims to make image loading on Servo browser more conformant to HTML5 standards. However you can check that it doesn't break the existing code and the browser runs correctly by running a test page on servo after performing the build as mentioned above.

Run the following command after the project is build:

<code>
./mach run tests/html/about-mozilla.html
</code>

==Pull Request==
Here is our [https://github.com/servo/servo/pull/10134 pull request]. In the link you can see all code snippets changed due to implementing the above steps, as well as integration test progression information.

==References==
<references/>

File:ParseAsrcset.jpg

2016-04-05T20:33:45Z

Smshah4: uploaded a new version of "File:ParseAsrcset.jpg"

File:ParseAsrcset.jpg

2016-04-05T20:29:01Z

Smshah4:

CSC/ECE 517 Spring 2016 M1602 Make image loads conform with the spec

2016-04-05T20:28:53Z

Smshah4: /* Step 2 */

Making image load conform with the spec 
[https://en.wikipedia.org/wiki/HTML5 HTML 5] specifies a complex model for image loading on a web browser. It has specifications<ref>https://html.spec.whatwg.org/multipage/#the-picture-element</ref> for [https://html.spec.whatwg.org/multipage/#the-picture-element picture element] as well as img element, and browsers need to follow these HTML 5 specifications to conform to the standard. Servo's current implementation of image loading is [http://mxr.mozilla.org/servo/source/components/script/dom/htmlimageelement.rs#107 straightforward, but non-compliant] with HTML 5 standards<ref>https://html.spec.whatwg.org/multipage/</ref> in a number of important ways. The goal of this project is to implement image loading behavior on Servo browser that is more compliant with HTML 5 so its easy to both implement and verify against the text of the specification.
==Introduction==

===Servo===

[https://github.com/servo/servo Servo] is a [https://en.wikipedia.org/wiki/Web_browser web browser] layout engine written in [https://www.mozilla.org/en-US/?v=b Mozilla]'s new [https://en.wikipedia.org/wiki/System_programming_language systems language] [https://en.wikipedia.org/wiki/Rust_(programming_language) Rust]<ref>https://servo.org/</ref>. It is currently being developed by Mozilla Research. The aim of the project is not to create a full browser but rather to create better parallelism<ref>https://www.usenix.org/legacy/event/hotpar09/tech/full_papers/jones/jones.pdf</ref>, security<ref>https://en.wikipedia.org/wiki/Browser_security</ref>, modularity<ref>https://msdn.microsoft.com/en-us/library/ff709921.aspx</ref> and performance. The Servo project is [https://en.wikipedia.org/wiki/Open-source_software open sourced] and receives contributions from individual contributors from around the globe. It currently supports [https://www.linux.com/ Linux], [http://www.apple.com/osx/ OS X], [https://www.microsoft.com/en-us/windows Windows], [https://www.android.com/ Android], and [https://en.wikipedia.org/wiki/Gonk Gonk] (Firefox OS).

===Rust===

Hatched by Mozilla employee Graydon Hoare back in 2009, Rust was built from the ground up using elements from modern programming language design<ref>http://readwrite.com/2015/07/02/mozilla-rust-programming-language-potential/</ref>. Rust is a [https://en.wikipedia.org/wiki/General-purpose_programming_language general-purpose], [https://developer.mozilla.org/ar/docs/multiparadigmlanguage.html multi-paradigm], [https://en.wikipedia.org/wiki/Compiled_language compiled programming] language, supporting pure-functional, imperative-procedural, and object-oriented styles<ref>https://en.wikipedia.org/wiki/Rust_(programming_language)</ref>. It focuses on performance, parallelization, and memory safety and does so because unlike other programming languages it doesn't suffer from "backward-compatibility requirements"<ref>http://readwrite.com/2015/07/02/mozilla-rust-programming-language-potential/</ref>.

==Project Description==
The detailed description of the project can be found [https://github.com/servo/servo/wiki/Image-load-conformance-student-project here].

The steps are as follows:

===Compilation and Build===
* The first step is to compile Servo browser and build it on a local machine. The steps for compiling and building Servo are:
Servo is built with [https://mail.mozilla.org/pipermail/rust-dev/2014-March/009090.html Cargo], the Rust package manager. Mozilla's Mach tools are used to orchestrate the build and other tasks.

git clone https://github.com/servo/servo
cd servo
./mach build --dev
./mach run tests/html/about-mozilla.html

compile Servo and ensure that it runs tests/html/about-mozilla.html

===Initial Steps===
The initial steps for the project were completed as a part of OSS project 2. The functionalities implemented were:
* Define data types to represent the image request concept, and add pending and current requests to the HTMLImageElement type in htmlimageelement.rs . These should subsume the existing fields in HTMLImageElement that are used for storing the image's properties, and the fields of the current request should be used instead.
* Implement the crossOrigin attribute using the make_enumerated_getter / make_setter macros and uncommenting the attribute in HTMLImageElement.webidl
* Implement the currentSrc attribute by adding the appropriate attribute to HTMLImageElement.webidl
* Run ./mach test-wpt tests/wpt/web-platform-tests/html/dom/interfaces.html and adjust the test result expectations according to the documenatation.
* Add a command for the image cache task that accepts a URL and a vector of bytes. This command should instruct the cache to store this data as a newly-complete network request and continue decoding the result into pixel data.

===Subsequent Steps===
The subsequent steps for the project are to be implemented as a part of final semester project. The steps to do are:
* Replace the code in htmlimageelement.rs that instructs the image cache to fetch a URL with code that directly performs a network request (see HTMLScriptElement::prepare for an example that uses the NetworkListener helper and Document::load_async). The result should be sent to the image cache using the newly-added command.
* Implement the parse a srcset attribute algorithm by defining a parse_a_srcset_attribute function in htmlimageelement.rs. Write unit tests demonstrating correctness in tests/unit/script/htmlimageelement.rs (./mach test-unit -p script/dom/htmlimageelement).
* Implement the parse a sizes attribute algorithm by defining a parse_a_sizes_attribute function in htmlimageelement.rs. Write unit tests demonstrating correctness in tests/unit/script/htmlimageelement.rs.
* Implement the normalize the source densities algorithm - create data types for source set and image source.
* Implement the update the source set algorithm by defining a update_the_source_set function in htmlimageelement.rs.
* Implement the select an image source algorithm by defining a select_an_image_source function in htmlimageelement.rs.

==Design Principles==

There were no particular design principles used in this project as it was a modification of existing code. The same principals of the original Servo code can be thought of as being followed by the project. The main aim was to increase the code coverage and to make the Servo browser more compliant to HMTL 5 standards when it comes to image loading.

==Implementation==
===Initial Steps===
The following steps were followed to meet the project requirements as per this [https://github.com/servo/servo/wiki/Image-load-conformance-student-project github page].

====Step 1====

As we need to define data types to represent the image request concept, and add pending and current requests to the HTMLImageElement type in htmlimageelement.rs . These should subsume the existing fields in HTMLImageElement that are used for storing the image's properties, and the fields of the current request should be used instead.

[[File:ImageRequest.png]]

====Step 2====

As we had to implement the crossOrigin attribute , we uncommented it in the HTMLImageElement.webidl file and then we created a getter and setter method for it in the HTMLImageElement.rd file using the make_enumerated_getter / make_setter macros .

[[File:CrossOrigin_webidl.png]]

HTMLImageElement.rs file

[[File:CrossOrigin.png]]

====Step 3====

implement the currentSrc attribute by adding the appropriate attribute to HTMLImageElement.webidl

[[File:currentSrc.png]]

===Subsequent Steps===
====Step 1====
replace the code in htmlimageelement.rs that instructs the image cache to fetch a URL with code that directly performs a network request (see HTMLScriptElement::prepare for an example that uses the NetworkListener helper and Document::load_async ). The result should be sent to the image cache using the newly-added command.

====Step 2====
implement the parse a srcset attribute algorithm by defining a parse_a_srcset_attribute function in htmlimageelement.rs . Write unit tests demonstrating correctness in tests/unit/script/htmlimageelement.rs ( ./mach test-unit -p script/dom/htmlimageelement )

The flowchart of the above step is :

[[File:parseAsrcset.jpg]]

====Step 3====
implement the parse a sizes attribute algorithm by defining a parse_a_sizes_attribute function in htmlimageelement.rs . Write unit tests demonstrating correctness in tests/unit/script/htmlimageelement.rs .
====Step 4====
implement the normalize the source densities algorithm - create data types for source set and image source
====Step 5====
implement the update the source set algorithm by defining a update_the_source_set function in htmlimageelement.rs
====Step 6====
implement the select an image source algorithm by defining a select_an_image_source function in htmlimageelement.rs

== Testing ==

Following are the steps to run all the tests for HTMLImageElement:

# Install the pre-requisites required for servo as mentioned [https://github.com/servo/servo/blob/master/README.md here]
# Run the following commands

<code>
cd
</code>

<code>
git clone https://github.com/akhan7/servo.git
</code>

<code>
cd servo
</code>

<code>
./mach build --dev
</code>

'''Note:''' It may take around 30-40 mins to build. Check to see if the build is successful by running

<code>
./mach run tests/html/about-mozilla.html
</code>

The Servo browser should open and load the about-Mozilla web page.
Now open terminal and run

<code>
./mach test-wpt tests/wpt/web-platform-tests/html/dom/interfaces.html
</code>

You will see that all tests pass as expected.

'''Note:''' We have not added any new tests to the test suite as servo follows TDD and tests were previously written for HTML image element. We have just adjusted some of the test expectations for the tests which now pass due to our implementation.

=== Testing From UI ===

Our project cannot be tested from UI since the project aims to make image loading on Servo browser more conformant to HTML5 standards. However you can check that it doesn't break the existing code and the browser runs correctly by running a test page on servo after performing the build as mentioned above.

Run the following command after the project is build:

<code>
./mach run tests/html/about-mozilla.html
</code>

==Pull Request==
Here is our [https://github.com/servo/servo/pull/10134 pull request]. In the link you can see all code snippets changed due to implementing the above steps, as well as integration test progression information.

==References==
<references/>

CSC/ECE 517 Spring 2016 M1602 Make image loads conform with the spec

2016-04-05T20:19:41Z

Smshah4: /* Implementation */

Making image load conform with the spec 
[https://en.wikipedia.org/wiki/HTML5 HTML 5] specifies a complex model for image loading on a web browser. It has specifications<ref>https://html.spec.whatwg.org/multipage/#the-picture-element</ref> for [https://html.spec.whatwg.org/multipage/#the-picture-element picture element] as well as img element, and browsers need to follow these HTML 5 specifications to conform to the standard. Servo's current implementation of image loading is [http://mxr.mozilla.org/servo/source/components/script/dom/htmlimageelement.rs#107 straightforward, but non-compliant] with HTML 5 standards<ref>https://html.spec.whatwg.org/multipage/</ref> in a number of important ways. The goal of this project is to implement image loading behavior on Servo browser that is more compliant with HTML 5 so its easy to both implement and verify against the text of the specification.
==Introduction==

===Servo===

[https://github.com/servo/servo Servo] is a [https://en.wikipedia.org/wiki/Web_browser web browser] layout engine written in [https://www.mozilla.org/en-US/?v=b Mozilla]'s new [https://en.wikipedia.org/wiki/System_programming_language systems language] [https://en.wikipedia.org/wiki/Rust_(programming_language) Rust]<ref>https://servo.org/</ref>. It is currently being developed by Mozilla Research. The aim of the project is not to create a full browser but rather to create better parallelism<ref>https://www.usenix.org/legacy/event/hotpar09/tech/full_papers/jones/jones.pdf</ref>, security<ref>https://en.wikipedia.org/wiki/Browser_security</ref>, modularity<ref>https://msdn.microsoft.com/en-us/library/ff709921.aspx</ref> and performance. The Servo project is [https://en.wikipedia.org/wiki/Open-source_software open sourced] and receives contributions from individual contributors from around the globe. It currently supports [https://www.linux.com/ Linux], [http://www.apple.com/osx/ OS X], [https://www.microsoft.com/en-us/windows Windows], [https://www.android.com/ Android], and [https://en.wikipedia.org/wiki/Gonk Gonk] (Firefox OS).

===Rust===

Hatched by Mozilla employee Graydon Hoare back in 2009, Rust was built from the ground up using elements from modern programming language design<ref>http://readwrite.com/2015/07/02/mozilla-rust-programming-language-potential/</ref>. Rust is a [https://en.wikipedia.org/wiki/General-purpose_programming_language general-purpose], [https://developer.mozilla.org/ar/docs/multiparadigmlanguage.html multi-paradigm], [https://en.wikipedia.org/wiki/Compiled_language compiled programming] language, supporting pure-functional, imperative-procedural, and object-oriented styles<ref>https://en.wikipedia.org/wiki/Rust_(programming_language)</ref>. It focuses on performance, parallelization, and memory safety and does so because unlike other programming languages it doesn't suffer from "backward-compatibility requirements"<ref>http://readwrite.com/2015/07/02/mozilla-rust-programming-language-potential/</ref>.

==Project Description==
The detailed description of the project can be found [https://github.com/servo/servo/wiki/Image-load-conformance-student-project here].

The steps are as follows:

===Compilation and Build===
* The first step is to compile Servo browser and build it on a local machine. The steps for compiling and building Servo are:
Servo is built with [https://mail.mozilla.org/pipermail/rust-dev/2014-March/009090.html Cargo], the Rust package manager. Mozilla's Mach tools are used to orchestrate the build and other tasks.

git clone https://github.com/servo/servo
cd servo
./mach build --dev
./mach run tests/html/about-mozilla.html

compile Servo and ensure that it runs tests/html/about-mozilla.html

===Initial Steps===
The initial steps for the project were completed as a part of OSS project 2. The functionalities implemented were:
* Define data types to represent the image request concept, and add pending and current requests to the HTMLImageElement type in htmlimageelement.rs . These should subsume the existing fields in HTMLImageElement that are used for storing the image's properties, and the fields of the current request should be used instead.
* Implement the crossOrigin attribute using the make_enumerated_getter / make_setter macros and uncommenting the attribute in HTMLImageElement.webidl
* Implement the currentSrc attribute by adding the appropriate attribute to HTMLImageElement.webidl
* Run ./mach test-wpt tests/wpt/web-platform-tests/html/dom/interfaces.html and adjust the test result expectations according to the documenatation.
* Add a command for the image cache task that accepts a URL and a vector of bytes. This command should instruct the cache to store this data as a newly-complete network request and continue decoding the result into pixel data.

===Subsequent Steps===
The subsequent steps for the project are to be implemented as a part of final semester project. The steps to do are:
* Replace the code in htmlimageelement.rs that instructs the image cache to fetch a URL with code that directly performs a network request (see HTMLScriptElement::prepare for an example that uses the NetworkListener helper and Document::load_async). The result should be sent to the image cache using the newly-added command.
* Implement the parse a srcset attribute algorithm by defining a parse_a_srcset_attribute function in htmlimageelement.rs. Write unit tests demonstrating correctness in tests/unit/script/htmlimageelement.rs (./mach test-unit -p script/dom/htmlimageelement).
* Implement the parse a sizes attribute algorithm by defining a parse_a_sizes_attribute function in htmlimageelement.rs. Write unit tests demonstrating correctness in tests/unit/script/htmlimageelement.rs.
* Implement the normalize the source densities algorithm - create data types for source set and image source.
* Implement the update the source set algorithm by defining a update_the_source_set function in htmlimageelement.rs.
* Implement the select an image source algorithm by defining a select_an_image_source function in htmlimageelement.rs.

==Design Principles==

There were no particular design principles used in this project as it was a modification of existing code. The same principals of the original Servo code can be thought of as being followed by the project. The main aim was to increase the code coverage and to make the Servo browser more compliant to HMTL 5 standards when it comes to image loading.

==Implementation==
===Initial Steps===
The following steps were followed to meet the project requirements as per this [https://github.com/servo/servo/wiki/Image-load-conformance-student-project github page].

====Step 1====

As we need to define data types to represent the image request concept, and add pending and current requests to the HTMLImageElement type in htmlimageelement.rs . These should subsume the existing fields in HTMLImageElement that are used for storing the image's properties, and the fields of the current request should be used instead.

[[File:ImageRequest.png]]

====Step 2====

As we had to implement the crossOrigin attribute , we uncommented it in the HTMLImageElement.webidl file and then we created a getter and setter method for it in the HTMLImageElement.rd file using the make_enumerated_getter / make_setter macros .

[[File:CrossOrigin_webidl.png]]

HTMLImageElement.rs file

[[File:CrossOrigin.png]]

====Step 3====

implement the currentSrc attribute by adding the appropriate attribute to HTMLImageElement.webidl

[[File:currentSrc.png]]

===Subsequent Steps===
====Step 1====
replace the code in htmlimageelement.rs that instructs the image cache to fetch a URL with code that directly performs a network request (see HTMLScriptElement::prepare for an example that uses the NetworkListener helper and Document::load_async ). The result should be sent to the image cache using the newly-added command.

====Step 2====
implement the parse a srcset attribute algorithm by defining a parse_a_srcset_attribute function in htmlimageelement.rs . Write unit tests demonstrating correctness in tests/unit/script/htmlimageelement.rs ( ./mach test-unit -p script/dom/htmlimageelement )

The flowchart of the above step is :

[[File:parseAsrcset.png]]
====Step 3====
implement the parse a sizes attribute algorithm by defining a parse_a_sizes_attribute function in htmlimageelement.rs . Write unit tests demonstrating correctness in tests/unit/script/htmlimageelement.rs .
====Step 4====
implement the normalize the source densities algorithm - create data types for source set and image source
====Step 5====
implement the update the source set algorithm by defining a update_the_source_set function in htmlimageelement.rs
====Step 6====
implement the select an image source algorithm by defining a select_an_image_source function in htmlimageelement.rs

== Testing ==

Following are the steps to run all the tests for HTMLImageElement:

# Install the pre-requisites required for servo as mentioned [https://github.com/servo/servo/blob/master/README.md here]
# Run the following commands

<code>
cd
</code>

<code>
git clone https://github.com/akhan7/servo.git
</code>

<code>
cd servo
</code>

<code>
./mach build --dev
</code>

'''Note:''' It may take around 30-40 mins to build. Check to see if the build is successful by running

<code>
./mach run tests/html/about-mozilla.html
</code>

The Servo browser should open and load the about-Mozilla web page.
Now open terminal and run

<code>
./mach test-wpt tests/wpt/web-platform-tests/html/dom/interfaces.html
</code>

You will see that all tests pass as expected.

'''Note:''' We have not added any new tests to the test suite as servo follows TDD and tests were previously written for HTML image element. We have just adjusted some of the test expectations for the tests which now pass due to our implementation.

=== Testing From UI ===

Our project cannot be tested from UI since the project aims to make image loading on Servo browser more conformant to HTML5 standards. However you can check that it doesn't break the existing code and the browser runs correctly by running a test page on servo after performing the build as mentioned above.

Run the following command after the project is build:

<code>
./mach run tests/html/about-mozilla.html
</code>

==Pull Request==
Here is our [https://github.com/servo/servo/pull/10134 pull request]. In the link you can see all code snippets changed due to implementing the above steps, as well as integration test progression information.

==References==
<references/>

CSC/ECE 517 Spring 2016 M1602 Make image loads conform with the spec

2016-04-05T20:18:39Z

Smshah4: /* Implementation */

Making image load conform with the spec 
[https://en.wikipedia.org/wiki/HTML5 HTML 5] specifies a complex model for image loading on a web browser. It has specifications<ref>https://html.spec.whatwg.org/multipage/#the-picture-element</ref> for [https://html.spec.whatwg.org/multipage/#the-picture-element picture element] as well as img element, and browsers need to follow these HTML 5 specifications to conform to the standard. Servo's current implementation of image loading is [http://mxr.mozilla.org/servo/source/components/script/dom/htmlimageelement.rs#107 straightforward, but non-compliant] with HTML 5 standards<ref>https://html.spec.whatwg.org/multipage/</ref> in a number of important ways. The goal of this project is to implement image loading behavior on Servo browser that is more compliant with HTML 5 so its easy to both implement and verify against the text of the specification.
==Introduction==

===Servo===

[https://github.com/servo/servo Servo] is a [https://en.wikipedia.org/wiki/Web_browser web browser] layout engine written in [https://www.mozilla.org/en-US/?v=b Mozilla]'s new [https://en.wikipedia.org/wiki/System_programming_language systems language] [https://en.wikipedia.org/wiki/Rust_(programming_language) Rust]<ref>https://servo.org/</ref>. It is currently being developed by Mozilla Research. The aim of the project is not to create a full browser but rather to create better parallelism<ref>https://www.usenix.org/legacy/event/hotpar09/tech/full_papers/jones/jones.pdf</ref>, security<ref>https://en.wikipedia.org/wiki/Browser_security</ref>, modularity<ref>https://msdn.microsoft.com/en-us/library/ff709921.aspx</ref> and performance. The Servo project is [https://en.wikipedia.org/wiki/Open-source_software open sourced] and receives contributions from individual contributors from around the globe. It currently supports [https://www.linux.com/ Linux], [http://www.apple.com/osx/ OS X], [https://www.microsoft.com/en-us/windows Windows], [https://www.android.com/ Android], and [https://en.wikipedia.org/wiki/Gonk Gonk] (Firefox OS).

===Rust===

Hatched by Mozilla employee Graydon Hoare back in 2009, Rust was built from the ground up using elements from modern programming language design<ref>http://readwrite.com/2015/07/02/mozilla-rust-programming-language-potential/</ref>. Rust is a [https://en.wikipedia.org/wiki/General-purpose_programming_language general-purpose], [https://developer.mozilla.org/ar/docs/multiparadigmlanguage.html multi-paradigm], [https://en.wikipedia.org/wiki/Compiled_language compiled programming] language, supporting pure-functional, imperative-procedural, and object-oriented styles<ref>https://en.wikipedia.org/wiki/Rust_(programming_language)</ref>. It focuses on performance, parallelization, and memory safety and does so because unlike other programming languages it doesn't suffer from "backward-compatibility requirements"<ref>http://readwrite.com/2015/07/02/mozilla-rust-programming-language-potential/</ref>.

==Project Description==
The detailed description of the project can be found [https://github.com/servo/servo/wiki/Image-load-conformance-student-project here].

The steps are as follows:

===Compilation and Build===
* The first step is to compile Servo browser and build it on a local machine. The steps for compiling and building Servo are:
Servo is built with [https://mail.mozilla.org/pipermail/rust-dev/2014-March/009090.html Cargo], the Rust package manager. Mozilla's Mach tools are used to orchestrate the build and other tasks.

git clone https://github.com/servo/servo
cd servo
./mach build --dev
./mach run tests/html/about-mozilla.html

compile Servo and ensure that it runs tests/html/about-mozilla.html

===Initial Steps===
The initial steps for the project were completed as a part of OSS project 2. The functionalities implemented were:
* Define data types to represent the image request concept, and add pending and current requests to the HTMLImageElement type in htmlimageelement.rs . These should subsume the existing fields in HTMLImageElement that are used for storing the image's properties, and the fields of the current request should be used instead.
* Implement the crossOrigin attribute using the make_enumerated_getter / make_setter macros and uncommenting the attribute in HTMLImageElement.webidl
* Implement the currentSrc attribute by adding the appropriate attribute to HTMLImageElement.webidl
* Run ./mach test-wpt tests/wpt/web-platform-tests/html/dom/interfaces.html and adjust the test result expectations according to the documenatation.
* Add a command for the image cache task that accepts a URL and a vector of bytes. This command should instruct the cache to store this data as a newly-complete network request and continue decoding the result into pixel data.

===Subsequent Steps===
The subsequent steps for the project are to be implemented as a part of final semester project. The steps to do are:
* Replace the code in htmlimageelement.rs that instructs the image cache to fetch a URL with code that directly performs a network request (see HTMLScriptElement::prepare for an example that uses the NetworkListener helper and Document::load_async). The result should be sent to the image cache using the newly-added command.
* Implement the parse a srcset attribute algorithm by defining a parse_a_srcset_attribute function in htmlimageelement.rs. Write unit tests demonstrating correctness in tests/unit/script/htmlimageelement.rs (./mach test-unit -p script/dom/htmlimageelement).
* Implement the parse a sizes attribute algorithm by defining a parse_a_sizes_attribute function in htmlimageelement.rs. Write unit tests demonstrating correctness in tests/unit/script/htmlimageelement.rs.
* Implement the normalize the source densities algorithm - create data types for source set and image source.
* Implement the update the source set algorithm by defining a update_the_source_set function in htmlimageelement.rs.
* Implement the select an image source algorithm by defining a select_an_image_source function in htmlimageelement.rs.

==Design Principles==

There were no particular design principles used in this project as it was a modification of existing code. The same principals of the original Servo code can be thought of as being followed by the project. The main aim was to increase the code coverage and to make the Servo browser more compliant to HMTL 5 standards when it comes to image loading.

==Implementation==
===Initial Steps===
The following steps were followed to meet the project requirements as per this [https://github.com/servo/servo/wiki/Image-load-conformance-student-project github page].

====Step 1====

As we need to define data types to represent the image request concept, and add pending and current requests to the HTMLImageElement type in htmlimageelement.rs . These should subsume the existing fields in HTMLImageElement that are used for storing the image's properties, and the fields of the current request should be used instead.

[[File:ImageRequest.png]]

====Step 2====

As we had to implement the crossOrigin attribute , we uncommented it in the HTMLImageElement.webidl file and then we created a getter and setter method for it in the HTMLImageElement.rd file using the make_enumerated_getter / make_setter macros .

[[File:CrossOrigin_webidl.png]]

HTMLImageElement.rs file

[[File:CrossOrigin.png]]

====Step 3====

implement the currentSrc attribute by adding the appropriate attribute to HTMLImageElement.webidl

[[File:currentSrc.png]]

===Subsequent Steps===
====Step 1====
replace the code in htmlimageelement.rs that instructs the image cache to fetch a URL with code that directly performs a network request (see HTMLScriptElement::prepare for an example that uses the NetworkListener helper and Document::load_async ). The result should be sent to the image cache using the newly-added command.

====Step 2====
implement the parse a srcset attribute algorithm by defining a parse_a_srcset_attribute function in htmlimageelement.rs . Write unit tests demonstrating correctness in tests/unit/script/htmlimageelement.rs ( ./mach test-unit -p script/dom/htmlimageelement )
====Step 3====
implement the parse a sizes attribute algorithm by defining a parse_a_sizes_attribute function in htmlimageelement.rs . Write unit tests demonstrating correctness in tests/unit/script/htmlimageelement.rs .
====Step 4====
implement the normalize the source densities algorithm - create data types for source set and image source
====Step 5====
implement the update the source set algorithm by defining a update_the_source_set function in htmlimageelement.rs
====Step 6====
implement the select an image source algorithm by defining a select_an_image_source function in htmlimageelement.rs

== Testing ==

Following are the steps to run all the tests for HTMLImageElement:

# Install the pre-requisites required for servo as mentioned [https://github.com/servo/servo/blob/master/README.md here]
# Run the following commands

<code>
cd
</code>

<code>
git clone https://github.com/akhan7/servo.git
</code>

<code>
cd servo
</code>

<code>
./mach build --dev
</code>

'''Note:''' It may take around 30-40 mins to build. Check to see if the build is successful by running

<code>
./mach run tests/html/about-mozilla.html
</code>

The Servo browser should open and load the about-Mozilla web page.
Now open terminal and run

<code>
./mach test-wpt tests/wpt/web-platform-tests/html/dom/interfaces.html
</code>

You will see that all tests pass as expected.

'''Note:''' We have not added any new tests to the test suite as servo follows TDD and tests were previously written for HTML image element. We have just adjusted some of the test expectations for the tests which now pass due to our implementation.

=== Testing From UI ===

Our project cannot be tested from UI since the project aims to make image loading on Servo browser more conformant to HTML5 standards. However you can check that it doesn't break the existing code and the browser runs correctly by running a test page on servo after performing the build as mentioned above.

Run the following command after the project is build:

<code>
./mach run tests/html/about-mozilla.html
</code>

==Pull Request==
Here is our [https://github.com/servo/servo/pull/10134 pull request]. In the link you can see all code snippets changed due to implementing the above steps, as well as integration test progression information.

==References==
<references/>

File:ImageRequest.png

2016-03-22T23:39:56Z

Smshah4:

CSC/ECE 517 Spring 2016/Mozilla Conforming Image Loading to HTML 5 Specs

2016-03-22T23:39:33Z

Smshah4: /* Step 1 */

CSC/ECE 517 Spring 2016/Mozilla Conforming Image Loading to HTML 5 Specs

2016-03-22T23:21:13Z

Smshah4: /* Testing */

File:CurrentSrc.png

2016-03-22T23:20:13Z

Smshah4:

CSC/ECE 517 Spring 2016/Mozilla Conforming Image Loading to HTML 5 Specs

2016-03-22T23:20:01Z

Smshah4: /* Step 3 */

Making image load conform with the spec 
HTML5 specifies a complex model for image loading on a web browser. It has specifications for picture element as well as img element and browsers need to to follow these HTML5 specifications to conform the standard. Servo's current implementation of image loading is straightforward, but non-compliant with HTML5 standards in a number of important ways. The goal of this project is to implement image loading behavior on Servo browser that is more compliant with HTML5 so its easy to both implement and verify against the text of the specification.
==Introduction==

===Servo===

Servo is a web browser layout engine written in Mozilla's new systems language, Rust. It is currently being developed by Mozilla Research. The aim of the project is not to create a full browser but rather to create better parallelism, security, modularity and performance. The Servo project is open sourced and receives contributions from individual contributors from around the globe. It currently supports Linux, OSX, Windows, Android, and Gonk (Firefox OS).

===Rust===

Hatched by Mozilla employee Graydon Hoare back in 2009, Rust was built from the ground up using elements from modern programming language design. Rust is a general-purpose, multi-paradigm, compiled programming language, supporting pure-functional, imperative-procedural, and object-oriented styles. It focuses on performance, parallelization, and memory safety and does so because unlike other programming languages it doesn't suffer from "backward-compatibility requirements".

===HTML Image Element===
HTML image element has "image request" parameter which further has 3 parameters:
* State
* Current URL
* Image data

The state parameter can be classified as one of 4 possible states:
* Unavailable
The user agent hasn't obtained any image data, or has obtained some or all of the image data but hasn't yet decoded enough of the image to get the image dimensions.
* Partially available
The user agent has obtained some of the image data and at least the image dimensions are available.
* Completely available
The user agent has obtained all of the image data and at least the image dimensions are available.
* Broken
The user agent has obtained all of the image data that it can, but it cannot even decode the image enough to get the image dimensions (e.g. the image is corrupted, or the format is not supported, or no data could be obtained).

Image request can be set to Pending Request, which is initially set to null or Current Request, which usually refers to the img element itself.

==Scope==
The scope of the project was to complete the initial steps mentioned [https://github.com/servo/servo/wiki/Image-load-conformance-student-project here].

The steps are as follows:
compile Servo and ensure that it runs on tests/html/about-mozilla.html
* Define data types to represent the image request concept, and add pending and current requests to the HTMLImageElement type in htmlimageelement.rs . These should subsume the existing fields in HTMLImageElement that are used for storing the image's properties, and the fields of the current request should be used instead.
* Implement the crossOrigin attribute using the make_enumerated_getter / make_setter macros and uncommenting the attribute in HTMLImageElement.webidl
* Implement the currentSrc attribute by adding the appropriate attribute to HTMLImageElement.webidl
* Run ./mach test-wpt tests/wpt/web-platform-tests/html/dom/interfaces.html and adjust the test result expectations according to the documenatation.
* Add a command for the image cache task that accepts a URL and a vector of bytes. This command should instruct the cache to store this data as a newly-complete network request and continue decoding the result into pixel data.

The subsequent steps mentioned [https://github.com/servo/servo/wiki/Image-load-conformance-student-project here] are to be done for the final project.

==Implementation==

The following steps were followed to meet the project requirements as per this [https://github.com/servo/servo/wiki/Implement-support-for-missing-XMLHttpRequest-APIs github page].

===Step 1===

As we need to define data types to represent the image request concept, and add pending and current requests to the HTMLImageElement type in htmlimageelement.rs . These should subsume the existing fields in HTMLImageElement that are used for storing the image's properties, and the fields of the current request should be used instead.

[[File:Uncomment-overrideMimeType.png]]

===Step 2===

As we had to implement the crossOrigin attribute , we uncommented it in the HTMLImageElement.webidl file and then we created a getter and setter method for it in the HTMLImageElement.rd file using the make_enumerated_getter / make_setter macros .

[[File:CrossOrigin_webidl.png]]

HTMLImageElement.rs file

[[File:CrossOrigin.png]]

===Step 3===

implement the currentSrc attribute by adding the appropriate attribute to HTMLImageElement.webidl

[[File:currentSrc.png]]

== Testing ==

Following are the steps to run all the tests for XMLHttpRequest:

# Install the pre-requisites required for servo as mentioned [https://github.com/servo/servo/blob/master/README.md here]
# Run the following commands

<code>
cd
</code>

<code>
git clone https://github.com/akhan7/servo.git
</code>

<code>
cd servo
</code>

<code>
./mach build --dev
</code>

'''Note:''' It may take around 30-40 mins to build. Check to see if the build is successful by running

<code>
./mach run tests/html/about-mozilla.html
</code>

The Servo browser should open and load the about-Mozilla web page.
Now open terminal and run

<code>
./mach test-wpt tests/wpt/web-platform-tests/html/dom/interfaces.html
</code>

You will see that all tests pass as expected.

'''Note:''' We have not added any new tests to the test suite as servo follows TDD and tests were previously written for HTML image element. We have just adjusted some of the test expectations for the tests which now pass due to our implementation.

=== Testing From UI ===

Our project cannot be tested from UI since the project aims to make image loading on Servo browser more conformant to HTML5 standards. However you can check that it doesn't break the existing code and the browser runs correctly by running a test page on servo after performing the build as mentioned above.

Run the following command after the project is build:

<code>
./mach run tests/html/about-mozilla.html
</code>

==Pull Request==
Here is our [https://github.com/servo/servo/pull/8182 pull request]. In the link you can see all code snippets changed due to implementing the above steps, as well as integration test progression information.

==References==
<references/>

CSC/ECE 517 Spring 2016/Mozilla Conforming Image Loading to HTML 5 Specs

2016-03-22T23:18:15Z

Smshah4: /* Step 3 */

Making image load conform with the spec 
HTML5 specifies a complex model for image loading on a web browser. It has specifications for picture element as well as img element and browsers need to to follow these HTML5 specifications to conform the standard. Servo's current implementation of image loading is straightforward, but non-compliant with HTML5 standards in a number of important ways. The goal of this project is to implement image loading behavior on Servo browser that is more compliant with HTML5 so its easy to both implement and verify against the text of the specification.
==Introduction==

===Servo===

Servo is a web browser layout engine written in Mozilla's new systems language, Rust. It is currently being developed by Mozilla Research. The aim of the project is not to create a full browser but rather to create better parallelism, security, modularity and performance. The Servo project is open sourced and receives contributions from individual contributors from around the globe. It currently supports Linux, OSX, Windows, Android, and Gonk (Firefox OS).

===Rust===

Hatched by Mozilla employee Graydon Hoare back in 2009, Rust was built from the ground up using elements from modern programming language design. Rust is a general-purpose, multi-paradigm, compiled programming language, supporting pure-functional, imperative-procedural, and object-oriented styles. It focuses on performance, parallelization, and memory safety and does so because unlike other programming languages it doesn't suffer from "backward-compatibility requirements".

===HTML Image Element===
HTML image element has "image request" parameter which further has 3 parameters:
* State
* Current URL
* Image data

The state parameter can be classified as one of 4 possible states:
* Unavailable
The user agent hasn't obtained any image data, or has obtained some or all of the image data but hasn't yet decoded enough of the image to get the image dimensions.
* Partially available
The user agent has obtained some of the image data and at least the image dimensions are available.
* Completely available
The user agent has obtained all of the image data and at least the image dimensions are available.
* Broken
The user agent has obtained all of the image data that it can, but it cannot even decode the image enough to get the image dimensions (e.g. the image is corrupted, or the format is not supported, or no data could be obtained).

Image request can be set to Pending Request, which is initially set to null or Current Request, which usually refers to the img element itself.

==Scope==
The scope of the project was to complete the initial steps mentioned [https://github.com/servo/servo/wiki/Image-load-conformance-student-project here].

The steps are as follows:
compile Servo and ensure that it runs on tests/html/about-mozilla.html
* Define data types to represent the image request concept, and add pending and current requests to the HTMLImageElement type in htmlimageelement.rs . These should subsume the existing fields in HTMLImageElement that are used for storing the image's properties, and the fields of the current request should be used instead.
* Implement the crossOrigin attribute using the make_enumerated_getter / make_setter macros and uncommenting the attribute in HTMLImageElement.webidl
* Implement the currentSrc attribute by adding the appropriate attribute to HTMLImageElement.webidl
* Run ./mach test-wpt tests/wpt/web-platform-tests/html/dom/interfaces.html and adjust the test result expectations according to the documenatation.
* Add a command for the image cache task that accepts a URL and a vector of bytes. This command should instruct the cache to store this data as a newly-complete network request and continue decoding the result into pixel data.

The subsequent steps mentioned [https://github.com/servo/servo/wiki/Image-load-conformance-student-project here] are to be done for the final project.

==Implementation==

The following steps were followed to meet the project requirements as per this [https://github.com/servo/servo/wiki/Implement-support-for-missing-XMLHttpRequest-APIs github page].

===Step 1===

As we need to define data types to represent the image request concept, and add pending and current requests to the HTMLImageElement type in htmlimageelement.rs . These should subsume the existing fields in HTMLImageElement that are used for storing the image's properties, and the fields of the current request should be used instead.

[[File:Uncomment-overrideMimeType.png]]

===Step 2===

As we had to implement the crossOrigin attribute , we uncommented it in the HTMLImageElement.webidl file and then we created a getter and setter method for it in the HTMLImageElement.rd file using the make_enumerated_getter / make_setter macros .

[[File:CrossOrigin_webidl.png]]

HTMLImageElement.rs file

[[File:CrossOrigin.png]]

===Step 3===

implement the currentSrc attribute by adding the appropriate attribute to HTMLImageElement.webidl

[[File:overrideMimeType.png]]

== Testing ==

Following are the steps to run all the tests for XMLHttpRequest:

# Install the pre-requisites required for servo as mentioned [https://github.com/servo/servo/blob/master/README.md here]
# Run the following commands

<code>
cd
</code>

<code>
git clone https://github.com/akhan7/servo.git
</code>

<code>
cd servo
</code>

<code>
./mach build --dev
</code>

'''Note:''' It may take around 30-40 mins to build. Check to see if the build is successful by running

<code>
./mach run tests/html/about-mozilla.html
</code>

The Servo browser should open and load the about-Mozilla web page.
Now open terminal and run

<code>
./mach test-wpt tests/wpt/web-platform-tests/html/dom/interfaces.html
</code>

You will see that all tests pass as expected.

'''Note:''' We have not added any new tests to the test suite as servo follows TDD and tests were previously written for HTML image element. We have just adjusted some of the test expectations for the tests which now pass due to our implementation.

=== Testing From UI ===

Our project cannot be tested from UI since the project aims to make image loading on Servo browser more conformant to HTML5 standards. However you can check that it doesn't break the existing code and the browser runs correctly by running a test page on servo after performing the build as mentioned above.

Run the following command after the project is build:

<code>
./mach run tests/html/about-mozilla.html
</code>

==Pull Request==
Here is our [https://github.com/servo/servo/pull/8182 pull request]. In the link you can see all code snippets changed due to implementing the above steps, as well as integration test progression information.

==References==
<references/>

CSC/ECE 517 Spring 2016/Mozilla Conforming Image Loading to HTML 5 Specs

2016-03-22T23:17:44Z

Smshah4: /* Step 1 */

Making image load conform with the spec 
HTML5 specifies a complex model for image loading on a web browser. It has specifications for picture element as well as img element and browsers need to to follow these HTML5 specifications to conform the standard. Servo's current implementation of image loading is straightforward, but non-compliant with HTML5 standards in a number of important ways. The goal of this project is to implement image loading behavior on Servo browser that is more compliant with HTML5 so its easy to both implement and verify against the text of the specification.
==Introduction==

===Servo===

Servo is a web browser layout engine written in Mozilla's new systems language, Rust. It is currently being developed by Mozilla Research. The aim of the project is not to create a full browser but rather to create better parallelism, security, modularity and performance. The Servo project is open sourced and receives contributions from individual contributors from around the globe. It currently supports Linux, OSX, Windows, Android, and Gonk (Firefox OS).

===Rust===

Hatched by Mozilla employee Graydon Hoare back in 2009, Rust was built from the ground up using elements from modern programming language design. Rust is a general-purpose, multi-paradigm, compiled programming language, supporting pure-functional, imperative-procedural, and object-oriented styles. It focuses on performance, parallelization, and memory safety and does so because unlike other programming languages it doesn't suffer from "backward-compatibility requirements".

===HTML Image Element===
HTML image element has "image request" parameter which further has 3 parameters:
* State
* Current URL
* Image data

The state parameter can be classified as one of 4 possible states:
* Unavailable
The user agent hasn't obtained any image data, or has obtained some or all of the image data but hasn't yet decoded enough of the image to get the image dimensions.
* Partially available
The user agent has obtained some of the image data and at least the image dimensions are available.
* Completely available
The user agent has obtained all of the image data and at least the image dimensions are available.
* Broken
The user agent has obtained all of the image data that it can, but it cannot even decode the image enough to get the image dimensions (e.g. the image is corrupted, or the format is not supported, or no data could be obtained).

Image request can be set to Pending Request, which is initially set to null or Current Request, which usually refers to the img element itself.

==Scope==
The scope of the project was to complete the initial steps mentioned [https://github.com/servo/servo/wiki/Image-load-conformance-student-project here].

The steps are as follows:
compile Servo and ensure that it runs on tests/html/about-mozilla.html
* Define data types to represent the image request concept, and add pending and current requests to the HTMLImageElement type in htmlimageelement.rs . These should subsume the existing fields in HTMLImageElement that are used for storing the image's properties, and the fields of the current request should be used instead.
* Implement the crossOrigin attribute using the make_enumerated_getter / make_setter macros and uncommenting the attribute in HTMLImageElement.webidl
* Implement the currentSrc attribute by adding the appropriate attribute to HTMLImageElement.webidl
* Run ./mach test-wpt tests/wpt/web-platform-tests/html/dom/interfaces.html and adjust the test result expectations according to the documenatation.
* Add a command for the image cache task that accepts a URL and a vector of bytes. This command should instruct the cache to store this data as a newly-complete network request and continue decoding the result into pixel data.

The subsequent steps mentioned [https://github.com/servo/servo/wiki/Image-load-conformance-student-project here] are to be done for the final project.

==Implementation==

The following steps were followed to meet the project requirements as per this [https://github.com/servo/servo/wiki/Implement-support-for-missing-XMLHttpRequest-APIs github page].

===Step 1===

As we need to define data types to represent the image request concept, and add pending and current requests to the HTMLImageElement type in htmlimageelement.rs . These should subsume the existing fields in HTMLImageElement that are used for storing the image's properties, and the fields of the current request should be used instead.

[[File:Uncomment-overrideMimeType.png]]

===Step 2===

As we had to implement the crossOrigin attribute , we uncommented it in the HTMLImageElement.webidl file and then we created a getter and setter method for it in the HTMLImageElement.rd file using the make_enumerated_getter / make_setter macros .

[[File:CrossOrigin_webidl.png]]

HTMLImageElement.rs file

[[File:CrossOrigin.png]]

===Step 3===

Finally, we have implemented the overrideMimeType method according to the [https://xhr.spec.whatwg.org/#the-overridemimetype%28%29-method XHR specifications].
* If the state is loading or done, we have returned Invalid State Error
* Then we have parsed the mime passed in the argument
* If the parsing of mime was successful, we have saved the appropriate values in override_mime_type and override_charset

[[File:overrideMimeType.png]]

== Testing ==

Following are the steps to run all the tests for XMLHttpRequest:

# Install the pre-requisites required for servo as mentioned [https://github.com/servo/servo/blob/master/README.md here]
# Run the following commands

<code>
cd
</code>

<code>
git clone https://github.com/akhan7/servo.git
</code>

<code>
cd servo
</code>

<code>
./mach build --dev
</code>

'''Note:''' It may take around 30-40 mins to build. Check to see if the build is successful by running

<code>
./mach run tests/html/about-mozilla.html
</code>

The Servo browser should open and load the about-Mozilla web page.
Now open terminal and run

<code>
./mach test-wpt tests/wpt/web-platform-tests/html/dom/interfaces.html
</code>

You will see that all tests pass as expected.

'''Note:''' We have not added any new tests to the test suite as servo follows TDD and tests were previously written for HTML image element. We have just adjusted some of the test expectations for the tests which now pass due to our implementation.

=== Testing From UI ===

Our project cannot be tested from UI since the project aims to make image loading on Servo browser more conformant to HTML5 standards. However you can check that it doesn't break the existing code and the browser runs correctly by running a test page on servo after performing the build as mentioned above.

Run the following command after the project is build:

<code>
./mach run tests/html/about-mozilla.html
</code>

==Pull Request==
Here is our [https://github.com/servo/servo/pull/8182 pull request]. In the link you can see all code snippets changed due to implementing the above steps, as well as integration test progression information.

==References==
<references/>

CSC/ECE 517 Spring 2016/Mozilla Conforming Image Loading to HTML 5 Specs

2016-03-22T23:17:02Z

Smshah4: /* Step 2 */

Making image load conform with the spec 
HTML5 specifies a complex model for image loading on a web browser. It has specifications for picture element as well as img element and browsers need to to follow these HTML5 specifications to conform the standard. Servo's current implementation of image loading is straightforward, but non-compliant with HTML5 standards in a number of important ways. The goal of this project is to implement image loading behavior on Servo browser that is more compliant with HTML5 so its easy to both implement and verify against the text of the specification.
==Introduction==

===Servo===

Servo is a web browser layout engine written in Mozilla's new systems language, Rust. It is currently being developed by Mozilla Research. The aim of the project is not to create a full browser but rather to create better parallelism, security, modularity and performance. The Servo project is open sourced and receives contributions from individual contributors from around the globe. It currently supports Linux, OSX, Windows, Android, and Gonk (Firefox OS).

===Rust===

Hatched by Mozilla employee Graydon Hoare back in 2009, Rust was built from the ground up using elements from modern programming language design. Rust is a general-purpose, multi-paradigm, compiled programming language, supporting pure-functional, imperative-procedural, and object-oriented styles. It focuses on performance, parallelization, and memory safety and does so because unlike other programming languages it doesn't suffer from "backward-compatibility requirements".

===HTML Image Element===
HTML image element has "image request" parameter which further has 3 parameters:
* State
* Current URL
* Image data

The state parameter can be classified as one of 4 possible states:
* Unavailable
The user agent hasn't obtained any image data, or has obtained some or all of the image data but hasn't yet decoded enough of the image to get the image dimensions.
* Partially available
The user agent has obtained some of the image data and at least the image dimensions are available.
* Completely available
The user agent has obtained all of the image data and at least the image dimensions are available.
* Broken
The user agent has obtained all of the image data that it can, but it cannot even decode the image enough to get the image dimensions (e.g. the image is corrupted, or the format is not supported, or no data could be obtained).

Image request can be set to Pending Request, which is initially set to null or Current Request, which usually refers to the img element itself.

==Scope==
The scope of the project was to complete the initial steps mentioned [https://github.com/servo/servo/wiki/Image-load-conformance-student-project here].

The steps are as follows:
compile Servo and ensure that it runs on tests/html/about-mozilla.html
* Define data types to represent the image request concept, and add pending and current requests to the HTMLImageElement type in htmlimageelement.rs . These should subsume the existing fields in HTMLImageElement that are used for storing the image's properties, and the fields of the current request should be used instead.
* Implement the crossOrigin attribute using the make_enumerated_getter / make_setter macros and uncommenting the attribute in HTMLImageElement.webidl
* Implement the currentSrc attribute by adding the appropriate attribute to HTMLImageElement.webidl
* Run ./mach test-wpt tests/wpt/web-platform-tests/html/dom/interfaces.html and adjust the test result expectations according to the documenatation.
* Add a command for the image cache task that accepts a URL and a vector of bytes. This command should instruct the cache to store this data as a newly-complete network request and continue decoding the result into pixel data.

The subsequent steps mentioned [https://github.com/servo/servo/wiki/Image-load-conformance-student-project here] are to be done for the final project.

==Implementation==

The following steps were followed to meet the project requirements as per this [https://github.com/servo/servo/wiki/Implement-support-for-missing-XMLHttpRequest-APIs github page].

===Step 1===

As we need to implement the overrideMimeType() method, we have uncommented the overrideMimeType() method from the XMLHttpRequest interface (components/script/dom/webidls/XMLHttpRequest.webidl).

[[File:Uncomment-overrideMimeType.png]]

===Step 2===

As we had to implement the crossOrigin attribute , we uncommented it in the HTMLImageElement.webidl file and then we created a getter and setter method for it in the HTMLImageElement.rd file using the make_enumerated_getter / make_setter macros .

[[File:CrossOrigin_webidl.png]]

HTMLImageElement.rs file

[[File:CrossOrigin.png]]

===Step 3===

Finally, we have implemented the overrideMimeType method according to the [https://xhr.spec.whatwg.org/#the-overridemimetype%28%29-method XHR specifications].
* If the state is loading or done, we have returned Invalid State Error
* Then we have parsed the mime passed in the argument
* If the parsing of mime was successful, we have saved the appropriate values in override_mime_type and override_charset

[[File:overrideMimeType.png]]

== Testing ==

Following are the steps to run all the tests for XMLHttpRequest:

# Install the pre-requisites required for servo as mentioned [https://github.com/servo/servo/blob/master/README.md here]
# Run the following commands

<code>
cd
</code>

<code>
git clone https://github.com/akhan7/servo.git
</code>

<code>
cd servo
</code>

<code>
./mach build --dev
</code>

'''Note:''' It may take around 30-40 mins to build. Check to see if the build is successful by running

<code>
./mach run tests/html/about-mozilla.html
</code>

The Servo browser should open and load the about-Mozilla web page.
Now open terminal and run

<code>
./mach test-wpt tests/wpt/web-platform-tests/html/dom/interfaces.html
</code>

You will see that all tests pass as expected.

'''Note:''' We have not added any new tests to the test suite as servo follows TDD and tests were previously written for HTML image element. We have just adjusted some of the test expectations for the tests which now pass due to our implementation.

=== Testing From UI ===

Our project cannot be tested from UI since the project aims to make image loading on Servo browser more conformant to HTML5 standards. However you can check that it doesn't break the existing code and the browser runs correctly by running a test page on servo after performing the build as mentioned above.

Run the following command after the project is build:

<code>
./mach run tests/html/about-mozilla.html
</code>

==Pull Request==
Here is our [https://github.com/servo/servo/pull/8182 pull request]. In the link you can see all code snippets changed due to implementing the above steps, as well as integration test progression information.

==References==
<references/>

File:CrossOrigin.png

2016-03-22T23:16:20Z

Smshah4: uploaded a new version of "File:CrossOrigin.png"

CSC/ECE 517 Spring 2016/Mozilla Conforming Image Loading to HTML 5 Specs

2016-03-22T23:15:21Z

Smshah4: /* Step 2 */

Making image load conform with the spec 
HTML5 specifies a complex model for image loading on a web browser. It has specifications for picture element as well as img element and browsers need to to follow these HTML5 specifications to conform the standard. Servo's current implementation of image loading is straightforward, but non-compliant with HTML5 standards in a number of important ways. The goal of this project is to implement image loading behavior on Servo browser that is more compliant with HTML5 so its easy to both implement and verify against the text of the specification.
==Introduction==

===Servo===

Servo is a web browser layout engine written in Mozilla's new systems language, Rust. It is currently being developed by Mozilla Research. The aim of the project is not to create a full browser but rather to create better parallelism, security, modularity and performance. The Servo project is open sourced and receives contributions from individual contributors from around the globe. It currently supports Linux, OSX, Windows, Android, and Gonk (Firefox OS).

===Rust===

Hatched by Mozilla employee Graydon Hoare back in 2009, Rust was built from the ground up using elements from modern programming language design. Rust is a general-purpose, multi-paradigm, compiled programming language, supporting pure-functional, imperative-procedural, and object-oriented styles. It focuses on performance, parallelization, and memory safety and does so because unlike other programming languages it doesn't suffer from "backward-compatibility requirements".

===HTML Image Element===
HTML image element has "image request" parameter which further has 3 parameters:
* State
* Current URL
* Image data

The state parameter can be classified as one of 4 possible states:
* Unavailable
The user agent hasn't obtained any image data, or has obtained some or all of the image data but hasn't yet decoded enough of the image to get the image dimensions.
* Partially available
The user agent has obtained some of the image data and at least the image dimensions are available.
* Completely available
The user agent has obtained all of the image data and at least the image dimensions are available.
* Broken
The user agent has obtained all of the image data that it can, but it cannot even decode the image enough to get the image dimensions (e.g. the image is corrupted, or the format is not supported, or no data could be obtained).

Image request can be set to Pending Request, which is initially set to null or Current Request, which usually refers to the img element itself.

==Scope==
The scope of the project was to complete the initial steps mentioned [https://github.com/servo/servo/wiki/Image-load-conformance-student-project here].

The steps are as follows:
compile Servo and ensure that it runs on tests/html/about-mozilla.html
* Define data types to represent the image request concept, and add pending and current requests to the HTMLImageElement type in htmlimageelement.rs . These should subsume the existing fields in HTMLImageElement that are used for storing the image's properties, and the fields of the current request should be used instead.
* Implement the crossOrigin attribute using the make_enumerated_getter / make_setter macros and uncommenting the attribute in HTMLImageElement.webidl
* Implement the currentSrc attribute by adding the appropriate attribute to HTMLImageElement.webidl
* Run ./mach test-wpt tests/wpt/web-platform-tests/html/dom/interfaces.html and adjust the test result expectations according to the documenatation.
* Add a command for the image cache task that accepts a URL and a vector of bytes. This command should instruct the cache to store this data as a newly-complete network request and continue decoding the result into pixel data.

The subsequent steps mentioned [https://github.com/servo/servo/wiki/Image-load-conformance-student-project here] are to be done for the final project.

==Implementation==

The following steps were followed to meet the project requirements as per this [https://github.com/servo/servo/wiki/Implement-support-for-missing-XMLHttpRequest-APIs github page].

===Step 1===

As we need to implement the overrideMimeType() method, we have uncommented the overrideMimeType() method from the XMLHttpRequest interface (components/script/dom/webidls/XMLHttpRequest.webidl).

[[File:Uncomment-overrideMimeType.png]]

===Step 2===

As we had to implement the crossOrigin attribute , we uncommented it in the HTMLImageElement.webidl file and then we created a getter and setter method for it in the HTMLImageElement.rd file using the make_enumerated_getter / make_setter macros .

[[File:CrossOrigin_webidl.png]]

[[File:CrossOrigin.png]]

===Step 3===

Finally, we have implemented the overrideMimeType method according to the [https://xhr.spec.whatwg.org/#the-overridemimetype%28%29-method XHR specifications].
* If the state is loading or done, we have returned Invalid State Error
* Then we have parsed the mime passed in the argument
* If the parsing of mime was successful, we have saved the appropriate values in override_mime_type and override_charset

[[File:overrideMimeType.png]]

== Testing ==

Following are the steps to run all the tests for XMLHttpRequest:

# Install the pre-requisites required for servo as mentioned [https://github.com/servo/servo/blob/master/README.md here]
# Run the following commands

<code>
cd
</code>

<code>
git clone https://github.com/akhan7/servo.git
</code>

<code>
cd servo
</code>

<code>
./mach build --dev
</code>

'''Note:''' It may take around 30-40 mins to build. Check to see if the build is successful by running

<code>
./mach run tests/html/about-mozilla.html
</code>

The Servo browser should open and load the about-Mozilla web page.
Now open terminal and run

<code>
./mach test-wpt tests/wpt/web-platform-tests/html/dom/interfaces.html
</code>

You will see that all tests pass as expected.

'''Note:''' We have not added any new tests to the test suite as servo follows TDD and tests were previously written for HTML image element. We have just adjusted some of the test expectations for the tests which now pass due to our implementation.

=== Testing From UI ===

Our project cannot be tested from UI since the project aims to make image loading on Servo browser more conformant to HTML5 standards. However you can check that it doesn't break the existing code and the browser runs correctly by running a test page on servo after performing the build as mentioned above.

Run the following command after the project is build:

<code>
./mach run tests/html/about-mozilla.html
</code>

==Pull Request==
Here is our [https://github.com/servo/servo/pull/8182 pull request]. In the link you can see all code snippets changed due to implementing the above steps, as well as integration test progression information.

==References==
<references/>

File:CrossOrigin webidl.png

2016-03-22T23:14:52Z

Smshah4:

CSC/ECE 517 Spring 2016/Mozilla Conforming Image Loading to HTML 5 Specs

2016-03-22T23:14:30Z

Smshah4: /* Step 2 */

Making image load conform with the spec 
HTML5 specifies a complex model for image loading on a web browser. It has specifications for picture element as well as img element and browsers need to to follow these HTML5 specifications to conform the standard. Servo's current implementation of image loading is straightforward, but non-compliant with HTML5 standards in a number of important ways. The goal of this project is to implement image loading behavior on Servo browser that is more compliant with HTML5 so its easy to both implement and verify against the text of the specification.
==Introduction==

===Servo===

Servo is a web browser layout engine written in Mozilla's new systems language, Rust. It is currently being developed by Mozilla Research. The aim of the project is not to create a full browser but rather to create better parallelism, security, modularity and performance. The Servo project is open sourced and receives contributions from individual contributors from around the globe. It currently supports Linux, OSX, Windows, Android, and Gonk (Firefox OS).

===Rust===

Hatched by Mozilla employee Graydon Hoare back in 2009, Rust was built from the ground up using elements from modern programming language design. Rust is a general-purpose, multi-paradigm, compiled programming language, supporting pure-functional, imperative-procedural, and object-oriented styles. It focuses on performance, parallelization, and memory safety and does so because unlike other programming languages it doesn't suffer from "backward-compatibility requirements".

===HTML Image Element===
HTML image element has "image request" parameter which further has 3 parameters:
* State
* Current URL
* Image data

The state parameter can be classified as one of 4 possible states:
* Unavailable
The user agent hasn't obtained any image data, or has obtained some or all of the image data but hasn't yet decoded enough of the image to get the image dimensions.
* Partially available
The user agent has obtained some of the image data and at least the image dimensions are available.
* Completely available
The user agent has obtained all of the image data and at least the image dimensions are available.
* Broken
The user agent has obtained all of the image data that it can, but it cannot even decode the image enough to get the image dimensions (e.g. the image is corrupted, or the format is not supported, or no data could be obtained).

Image request can be set to Pending Request, which is initially set to null or Current Request, which usually refers to the img element itself.

==Scope==
The scope of the project was to complete the initial steps mentioned [https://github.com/servo/servo/wiki/Image-load-conformance-student-project here].

The steps are as follows:
compile Servo and ensure that it runs on tests/html/about-mozilla.html
* Define data types to represent the image request concept, and add pending and current requests to the HTMLImageElement type in htmlimageelement.rs . These should subsume the existing fields in HTMLImageElement that are used for storing the image's properties, and the fields of the current request should be used instead.
* Implement the crossOrigin attribute using the make_enumerated_getter / make_setter macros and uncommenting the attribute in HTMLImageElement.webidl
* Implement the currentSrc attribute by adding the appropriate attribute to HTMLImageElement.webidl
* Run ./mach test-wpt tests/wpt/web-platform-tests/html/dom/interfaces.html and adjust the test result expectations according to the documenatation.
* Add a command for the image cache task that accepts a URL and a vector of bytes. This command should instruct the cache to store this data as a newly-complete network request and continue decoding the result into pixel data.

The subsequent steps mentioned [https://github.com/servo/servo/wiki/Image-load-conformance-student-project here] are to be done for the final project.

==Implementation==

The following steps were followed to meet the project requirements as per this [https://github.com/servo/servo/wiki/Implement-support-for-missing-XMLHttpRequest-APIs github page].

===Step 1===

As we need to implement the overrideMimeType() method, we have uncommented the overrideMimeType() method from the XMLHttpRequest interface (components/script/dom/webidls/XMLHttpRequest.webidl).

[[File:Uncomment-overrideMimeType.png]]

===Step 2===

As we had to implement the crossOrigin attribute , we uncommented it in the HTMLImageElement.webidl file and then we created a getter and setter method for it in the HTMLImageElement.rd file using the make_enumerated_getter / make_setter macros .

[[File:CrossOrigin.png]]

[[File:CrossOrigin_webidl.png]]

===Step 3===

Finally, we have implemented the overrideMimeType method according to the [https://xhr.spec.whatwg.org/#the-overridemimetype%28%29-method XHR specifications].
* If the state is loading or done, we have returned Invalid State Error
* Then we have parsed the mime passed in the argument
* If the parsing of mime was successful, we have saved the appropriate values in override_mime_type and override_charset

[[File:overrideMimeType.png]]

== Testing ==

Following are the steps to run all the tests for XMLHttpRequest:

# Install the pre-requisites required for servo as mentioned [https://github.com/servo/servo/blob/master/README.md here]
# Run the following commands

<code>
cd
</code>

<code>
git clone https://github.com/akhan7/servo.git
</code>

<code>
cd servo
</code>

<code>
./mach build --dev
</code>

Note: It may take around 30-40 mins to build. Check to see if the build is successful by running

<code>
./mach run tests/html/about-mozilla.html
</code>

The Servo browser should open and load the about-Mozilla web page.
Now open terminal and run

<code>
./mach test-wpt tests/wpt/web-platform-tests/html/dom/interfaces.html
</code>

You will see that all tests pass as expected.

'''Note:''' We have not added any new tests to the test suite as servo follows TDD and tests were previously written for HTML image element. We have just adjusted some of the test expectations for the tests which now pass due to our implementation.

=== Testing From UI ===

Our project cannot be tested from UI since the project aims to make image loading on Servo browser more conformant to HTML5 standards. However you can check that it doesn't break the existing code and the browser runs correctly by running a test page on servo after performing the build as mentioned above.

Run the following command after the project is build:

<code>
./mach run tests/html/about-mozilla.html
</code>

==Pull Request==
Here is our [https://github.com/servo/servo/pull/8182 pull request]. In the link you can see all code snippets changed due to implementing the above steps, as well as integration test progression information.

==References==
<references/>

File:CrossOrigin.png

2016-03-22T23:07:26Z

Smshah4: uploaded a new version of "File:CrossOrigin.png"

File:CrossOrigin.png

2016-03-22T23:07:01Z

Smshah4: uploaded a new version of "File:CrossOrigin.png"

File:CrossOrigin.png

2016-03-22T23:05:47Z

Smshah4:

CSC/ECE 517 Spring 2016/Mozilla Conforming Image Loading to HTML 5 Specs

2016-03-22T23:04:33Z

Smshah4: /* Step 2 */

Making image load conform with the spec 
HTML5 specifies a complex model for image loading on a web browser. It has specifications for picture element as well as img element and browsers need to to follow these HTML5 specifications to conform the standard. Servo's current implementation of image loading is straightforward, but non-compliant with HTML5 standards in a number of important ways. The goal of this project is to implement image loading behavior on Servo browser that is more compliant with HTML5 so its easy to both implement and verify against the text of the specification.
==Introduction==

===Servo===

Servo is a web browser layout engine written in Mozilla's new systems language, Rust. It is currently being developed by Mozilla Research. The aim of the project is not to create a full browser but rather to create better parallelism, security, modularity and performance. The Servo project is open sourced and receives contributions from individual contributors from around the globe. It currently supports Linux, OSX, Windows, Android, and Gonk (Firefox OS).

===Rust===

Hatched by Mozilla employee Graydon Hoare back in 2009, Rust was built from the ground up using elements from modern programming language design. Rust is a general-purpose, multi-paradigm, compiled programming language, supporting pure-functional, imperative-procedural, and object-oriented styles. It focuses on performance, parallelization, and memory safety and does so because unlike other programming languages it doesn't suffer from "backward-compatibility requirements".

===XMLHttpRequest===
"[https://xhr.spec.whatwg.org/ XMLHttpRequest] is a definition of an [https://en.wikipedia.org/wiki/Application_programming_interface API] that provides scripted client functionality for transferring data between a client and a server."<ref>https://xhr.spec.whatwg.org/</ref> XMLHttpRequest provides a way for data to be retrieved from a URL without having to retrieve the entire page. It supports protocols other than HTTP and can be used to retrieve any type of data.<ref>https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest</ref>

==Scope==
The scope of the project was to complete the initial steps mentioned [https://github.com/servo/servo/wiki/Image-load-conformance-student-project here].

The steps are as follows:
compile Servo and ensure that it runs on tests/html/about-mozilla.html
* Define data types to represent the image request concept, and add pending and current requests to the HTMLImageElement type in htmlimageelement.rs . These should subsume the existing fields in HTMLImageElement that are used for storing the image's properties, and the fields of the current request should be used instead.
* Implement the crossOrigin attribute using the make_enumerated_getter / make_setter macros and uncommenting the attribute in HTMLImageElement.webidl
* Implement the currentSrc attribute by adding the appropriate attribute to HTMLImageElement.webidl
* Run ./mach test-wpt tests/wpt/web-platform-tests/html/dom/interfaces.html and adjust the test result expectations according to the documenatation.
* Add a command for the image cache task that accepts a URL and a vector of bytes. This command should instruct the cache to store this data as a newly-complete network request and continue decoding the result into pixel data.

The subsequent steps mentioned [https://github.com/servo/servo/wiki/Image-load-conformance-student-project here] are to be done for the final project.

==Implementation==

The following steps were followed to meet the project requirements as per this [https://github.com/servo/servo/wiki/Implement-support-for-missing-XMLHttpRequest-APIs github page].

===Step 1===

As we need to implement the overrideMimeType() method, we have uncommented the overrideMimeType() method from the XMLHttpRequest interface (components/script/dom/webidls/XMLHttpRequest.webidl).

[[File:Uncomment-overrideMimeType.png]]

===Step 2===

As two new fields are necessary for overrideMimeType() method implementation, override_mime_type to store the mime type of the mime passed in the argument and override_charset to store the charset of the mime passed in the argument.
Hence, we have added two new fields: override_mime_type and override_charset to the XMLHttpRequest structure.

[[File:CrossOrigin.png]]

===Step 3===

Finally, we have implemented the overrideMimeType method according to the [https://xhr.spec.whatwg.org/#the-overridemimetype%28%29-method XHR specifications].
* If the state is loading or done, we have returned Invalid State Error
* Then we have parsed the mime passed in the argument
* If the parsing of mime was successful, we have saved the appropriate values in override_mime_type and override_charset

[[File:overrideMimeType.png]]

== Testing ==

Following are the steps to run all the tests for XMLHttpRequest:

# Install the pre-requisites required for servo as mentioned [https://github.com/servo/servo/blob/master/README.md here]
# Run the following commands

<code>
cd
</code>

<code>
git clone https://github.com/jitendra29/servo.git
</code>

<code>
cd servo
</code>

<code>
git checkout -b test origin/overrideMimeType
</code>

<code>
./mach build --release
</code>

Note: It may take around 30 mins to build

<code>
./mach test-wpt XMLHttpRequest/ --release
</code>

You will see that all tests pass as expected.

'''Note:''' We have not added any new tests to the test suite as servo follows TDD and tests were previously written for XMLHttpRequest. We have just adjusted some of the test expectations for the tests which now pass due to our implementation.

=== Testing From UI ===

Our project cannot be tested from UI since it is basically improving some javascript features (XMLHttpRequest) in servo. However you can check that it doesn't break the existing code and the browser runs correctly by running a test page on servo after performing the build as mentioned above.

Run the following command after the project is build:

<code>
./mach run tests/html/about-mozilla.html
</code>

==Pull Request==
Here is our [https://github.com/servo/servo/pull/8182 pull request]. In the link you can see all code snippets changed due to implementing the above steps, as well as integration test progression information.

==References==
<references/>

CSC/ECE 517 Spring 2016/Mozilla Conforming Image Loading to HTML 5 Specs

2016-03-22T22:42:37Z

Smshah4: /* Scope */

Making image load conform with the spec 
HTML5 specifies a complex model for image loading on a web browser. It has specifications for picture element as well as img element and browsers need to to follow these HTML5 specifications to conform the standard. Servo's current implementation of image loading is straightforward, but non-compliant with HTML5 standards in a number of important ways. The goal of this project is to implement image loading behavior on Servo browser that is more compliant with HTML5 so its easy to both implement and verify against the text of the specification.
==Introduction==

===Servo===

Servo <ref> https://github.com/servo/servo </ref> is a web browser layout engine written in [https://github.com/rust-lang/rust Rust]<ref>https://github.com/rust-lang/rust</ref> and is currently being developed by [https://en.wikipedia.org/wiki/Mozilla Mozilla Research]. The aim of the project is not to create a full browser but is rather to create a highly parallel environment that allows for many components be handled by fine-grained, isolated tasks.<ref>https://en.wikipedia.org/wiki/Servo_(layout_engine)</ref>

Servo is built on top of Rust to provide a secure and reliable foundation and is focused on creating a reliable and fast browser engine.

===Rust===

[https://en.wikipedia.org/wiki/Rust_(programming_language) Rust] is a multi-paradigm, compiled programming language that is a good language for creating highly safe systems. Rust and Servo have a symbiotic relationship as the development of servo has influenced the design of the language.

Rust is a modern, fast, memory safe and multithreaded programming language that focuses on speed and safety for developing reliable and efficient systems. It eliminates all data races by having numerous compile-time safety checks that adds no runtime overhead.<ref> http://doc.rust-lang.org/nightly/book/README.html</ref>

===XMLHttpRequest===
"[https://xhr.spec.whatwg.org/ XMLHttpRequest] is a definition of an [https://en.wikipedia.org/wiki/Application_programming_interface API] that provides scripted client functionality for transferring data between a client and a server."<ref>https://xhr.spec.whatwg.org/</ref> XMLHttpRequest provides a way for data to be retrieved from a URL without having to retrieve the entire page. It supports protocols other than HTTP and can be used to retrieve any type of data.<ref>https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest</ref>

==Scope==
The scope of the project was to complete the initial steps mentioned [https://github.com/servo/servo/wiki/Image-load-conformance-student-project here].

The steps are as follows:
compile Servo and ensure that it runs on tests/html/about-mozilla.html
* define data types to represent the image request concept, and add pending and current requests to the HTMLImageElement type in htmlimageelement.rs . These should subsume the existing fields in HTMLImageElement that are used for storing the image's properties, and the fields of the current request should be used instead.
* implement the crossOrigin attribute using the make_enumerated_getter / make_setter macros and uncommenting the attribute in HTMLImageElement.webidl
* implement the currentSrc attribute by adding the appropriate attribute to HTMLImageElement.webidl
* run ./mach test-wpt tests/wpt/web-platform-tests/html/dom/interfaces.html and adjust the test result expectations according to the documenatation.
* add a command for the image cache task that accepts a URL and a vector of bytes. This command should instruct the cache to store this data as a newly-complete network request and continue decoding the result into pixel data.

The subsequent steps mentioned [https://github.com/servo/servo/wiki/Image-load-conformance-student-project here] are to be done for the final project.

==Design Pattern==
Design patterns are not applicable as our task involved just implementing a method. However, the [[CSC/ECE_517_Fall_2015/oss_M1504_JJD#Implementation|Implementation]] section below provides details of the steps as why it was implemented, the way it was implemented.

==Implementation==

The following steps were followed to meet the project requirements as per this [https://github.com/servo/servo/wiki/Implement-support-for-missing-XMLHttpRequest-APIs github page].

===Step 1===

As we need to implement the overrideMimeType() method, we have uncommented the overrideMimeType() method from the XMLHttpRequest interface (components/script/dom/webidls/XMLHttpRequest.webidl).

[[File:Uncomment-overrideMimeType.png]]

===Step 2===

As two new fields are necessary for overrideMimeType() method implementation, override_mime_type to store the mime type of the mime passed in the argument and override_charset to store the charset of the mime passed in the argument.
Hence, we have added two new fields: override_mime_type and override_charset to the XMLHttpRequest structure.

[[File:XHRStruct.png]]

===Step 3===

Finally, we have implemented the overrideMimeType method according to the [https://xhr.spec.whatwg.org/#the-overridemimetype%28%29-method XHR specifications].
* If the state is loading or done, we have returned Invalid State Error
* Then we have parsed the mime passed in the argument
* If the parsing of mime was successful, we have saved the appropriate values in override_mime_type and override_charset

[[File:overrideMimeType.png]]

== Testing ==

Following are the steps to run all the tests for XMLHttpRequest:

# Install the pre-requisites required for servo as mentioned [https://github.com/servo/servo/blob/master/README.md here]
# Run the following commands

<code>
cd
</code>

<code>
git clone https://github.com/jitendra29/servo.git
</code>

<code>
cd servo
</code>

<code>
git checkout -b test origin/overrideMimeType
</code>

<code>
./mach build --release
</code>

Note: It may take around 30 mins to build

<code>
./mach test-wpt XMLHttpRequest/ --release
</code>

You will see that all tests pass as expected.

'''Note:''' We have not added any new tests to the test suite as servo follows TDD and tests were previously written for XMLHttpRequest. We have just adjusted some of the test expectations for the tests which now pass due to our implementation.

=== Testing From UI ===

Our project cannot be tested from UI since it is basically improving some javascript features (XMLHttpRequest) in servo. However you can check that it doesn't break the existing code and the browser runs correctly by running a test page on servo after performing the build as mentioned above.

Run the following command after the project is build:

<code>
./mach run tests/html/about-mozilla.html
</code>

==Pull Request==
Here is our [https://github.com/servo/servo/pull/8182 pull request]. In the link you can see all code snippets changed due to implementing the above steps, as well as integration test progression information.

==References==
<references/>

CSC/ECE 517 Spring 2016/Mozilla Conforming Image Loading to HTML 5 Specs

2016-03-22T22:41:03Z

Smshah4: /* Scope */

Making image load conform with the spec 
HTML5 specifies a complex model for image loading on a web browser. It has specifications for picture element, img element and browsers need to to follow these HTML5 specifications to conform the standard. Servo's current implementation of image loading is straightforward, but non-compliant with HTML5 standards in a number of important ways. The goal of this project is to implement image loading behavior on Servo browser that is more compliant with HTML5 so its easy to both implement and verify against the text of the specification.
==Introduction==

===Servo===

Servo <ref> https://github.com/servo/servo </ref> is a web browser layout engine written in [https://github.com/rust-lang/rust Rust]<ref>https://github.com/rust-lang/rust</ref> and is currently being developed by [https://en.wikipedia.org/wiki/Mozilla Mozilla Research]. The aim of the project is not to create a full browser but is rather to create a highly parallel environment that allows for many components be handled by fine-grained, isolated tasks.<ref>https://en.wikipedia.org/wiki/Servo_(layout_engine)</ref>

Servo is built on top of Rust to provide a secure and reliable foundation and is focused on creating a reliable and fast browser engine.

===Rust===

[https://en.wikipedia.org/wiki/Rust_(programming_language) Rust] is a multi-paradigm, compiled programming language that is a good language for creating highly safe systems. Rust and Servo have a symbiotic relationship as the development of servo has influenced the design of the language.

Rust is a modern, fast, memory safe and multithreaded programming language that focuses on speed and safety for developing reliable and efficient systems. It eliminates all data races by having numerous compile-time safety checks that adds no runtime overhead.<ref> http://doc.rust-lang.org/nightly/book/README.html</ref>

===XMLHttpRequest===
"[https://xhr.spec.whatwg.org/ XMLHttpRequest] is a definition of an [https://en.wikipedia.org/wiki/Application_programming_interface API] that provides scripted client functionality for transferring data between a client and a server."<ref>https://xhr.spec.whatwg.org/</ref> XMLHttpRequest provides a way for data to be retrieved from a URL without having to retrieve the entire page. It supports protocols other than HTTP and can be used to retrieve any type of data.<ref>https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest</ref>

==Scope==
The scope of the project was to complete the initial steps mentioned [https://github.com/servo/servo/wiki/Image-load-conformance-student-project here].

The steps are as follows:
compile Servo and ensure that it runs on tests/html/about-mozilla.html
•define data types to represent the image request concept, and add pending and current requests to the HTMLImageElement type in htmlimageelement.rs . These should subsume the existing fields in HTMLImageElement that are used for storing the image's properties, and the fields of the current request should be used instead.
•implement the crossOrigin attribute using the make_enumerated_getter / make_setter macros and uncommenting the attribute in HTMLImageElement.webidl
•implement the currentSrc attribute by adding the appropriate attribute to HTMLImageElement.webidl
•run ./mach test-wpt tests/wpt/web-platform-tests/html/dom/interfaces.html and adjust the test result expectations according to the documenatation.
•add a command for the image cache task that accepts a URL and a vector of bytes. This command should instruct the cache to store this data as a newly-complete network request and continue decoding the result into pixel data.

The subsequent steps mentioned [https://github.com/servo/servo/wiki/Image-load-conformance-student-project here] are to be done for the final project.

==Design Pattern==
Design patterns are not applicable as our task involved just implementing a method. However, the [[CSC/ECE_517_Fall_2015/oss_M1504_JJD#Implementation|Implementation]] section below provides details of the steps as why it was implemented, the way it was implemented.

==Implementation==

The following steps were followed to meet the project requirements as per this [https://github.com/servo/servo/wiki/Implement-support-for-missing-XMLHttpRequest-APIs github page].

===Step 1===

As we need to implement the overrideMimeType() method, we have uncommented the overrideMimeType() method from the XMLHttpRequest interface (components/script/dom/webidls/XMLHttpRequest.webidl).

[[File:Uncomment-overrideMimeType.png]]

===Step 2===

As two new fields are necessary for overrideMimeType() method implementation, override_mime_type to store the mime type of the mime passed in the argument and override_charset to store the charset of the mime passed in the argument.
Hence, we have added two new fields: override_mime_type and override_charset to the XMLHttpRequest structure.

[[File:XHRStruct.png]]

===Step 3===

Finally, we have implemented the overrideMimeType method according to the [https://xhr.spec.whatwg.org/#the-overridemimetype%28%29-method XHR specifications].
* If the state is loading or done, we have returned Invalid State Error
* Then we have parsed the mime passed in the argument
* If the parsing of mime was successful, we have saved the appropriate values in override_mime_type and override_charset

[[File:overrideMimeType.png]]

== Testing ==

Following are the steps to run all the tests for XMLHttpRequest:

# Install the pre-requisites required for servo as mentioned [https://github.com/servo/servo/blob/master/README.md here]
# Run the following commands

<code>
cd
</code>

<code>
git clone https://github.com/jitendra29/servo.git
</code>

<code>
cd servo
</code>

<code>
git checkout -b test origin/overrideMimeType
</code>

<code>
./mach build --release
</code>

Note: It may take around 30 mins to build

<code>
./mach test-wpt XMLHttpRequest/ --release
</code>

You will see that all tests pass as expected.

'''Note:''' We have not added any new tests to the test suite as servo follows TDD and tests were previously written for XMLHttpRequest. We have just adjusted some of the test expectations for the tests which now pass due to our implementation.

=== Testing From UI ===

Our project cannot be tested from UI since it is basically improving some javascript features (XMLHttpRequest) in servo. However you can check that it doesn't break the existing code and the browser runs correctly by running a test page on servo after performing the build as mentioned above.

Run the following command after the project is build:

<code>
./mach run tests/html/about-mozilla.html
</code>

==Pull Request==
Here is our [https://github.com/servo/servo/pull/8182 pull request]. In the link you can see all code snippets changed due to implementing the above steps, as well as integration test progression information.

==References==
<references/>

CSC/ECE 517 Spring 2016/Mozilla Conforming Image Loading to HTML 5 Specs

2016-03-22T22:40:47Z

Smshah4: /* Scope */

Making image load conform with the spec 
HTML5 specifies a complex model for image loading on a web browser. It has specifications for picture element, img element and browsers need to to follow these HTML5 specifications to conform the standard. Servo's current implementation of image loading is straightforward, but non-compliant with HTML5 standards in a number of important ways. The goal of this project is to implement image loading behavior on Servo browser that is more compliant with HTML5 so its easy to both implement and verify against the text of the specification.
==Introduction==

===Servo===

Servo <ref> https://github.com/servo/servo </ref> is a web browser layout engine written in [https://github.com/rust-lang/rust Rust]<ref>https://github.com/rust-lang/rust</ref> and is currently being developed by [https://en.wikipedia.org/wiki/Mozilla Mozilla Research]. The aim of the project is not to create a full browser but is rather to create a highly parallel environment that allows for many components be handled by fine-grained, isolated tasks.<ref>https://en.wikipedia.org/wiki/Servo_(layout_engine)</ref>

Servo is built on top of Rust to provide a secure and reliable foundation and is focused on creating a reliable and fast browser engine.

===Rust===

[https://en.wikipedia.org/wiki/Rust_(programming_language) Rust] is a multi-paradigm, compiled programming language that is a good language for creating highly safe systems. Rust and Servo have a symbiotic relationship as the development of servo has influenced the design of the language.

Rust is a modern, fast, memory safe and multithreaded programming language that focuses on speed and safety for developing reliable and efficient systems. It eliminates all data races by having numerous compile-time safety checks that adds no runtime overhead.<ref> http://doc.rust-lang.org/nightly/book/README.html</ref>

===XMLHttpRequest===
"[https://xhr.spec.whatwg.org/ XMLHttpRequest] is a definition of an [https://en.wikipedia.org/wiki/Application_programming_interface API] that provides scripted client functionality for transferring data between a client and a server."<ref>https://xhr.spec.whatwg.org/</ref> XMLHttpRequest provides a way for data to be retrieved from a URL without having to retrieve the entire page. It supports protocols other than HTTP and can be used to retrieve any type of data.<ref>https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest</ref>

==Scope==
The scope of the project was to complete the initial steps mentioned [https://github.com/servo/servo/wiki/Image-load-conformance-student-project here].

The steps are as follows:
compile Servo and ensure that it runs on tests/html/about-mozilla.html
•define data types to represent the image request concept, and add pending and current requests to the HTMLImageElement type in htmlimageelement.rs . These should subsume the existing fields in HTMLImageElement that are used for storing the image's properties, and the fields of the current request should be used instead.
•implement the crossOrigin attribute using the make_enumerated_getter / make_setter macros and uncommenting the attribute in HTMLImageElement.webidl
•implement the currentSrc attribute by adding the appropriate attribute to HTMLImageElement.webidl
•run ./mach test-wpt tests/wpt/web-platform-tests/html/dom/interfaces.html and adjust the test result expectations according to the documenatation.
•add a command for the image cache task that accepts a URL and a vector of bytes. This command should instruct the cache to store this data as a newly-complete network request and continue decoding the result into pixel data.

The subsequent steps mentioned https://github.com/servo/servo/wiki/Image-load-conformance-student-project here] are to be done for the final project.

==Design Pattern==
Design patterns are not applicable as our task involved just implementing a method. However, the [[CSC/ECE_517_Fall_2015/oss_M1504_JJD#Implementation|Implementation]] section below provides details of the steps as why it was implemented, the way it was implemented.

==Implementation==

The following steps were followed to meet the project requirements as per this [https://github.com/servo/servo/wiki/Implement-support-for-missing-XMLHttpRequest-APIs github page].

===Step 1===

As we need to implement the overrideMimeType() method, we have uncommented the overrideMimeType() method from the XMLHttpRequest interface (components/script/dom/webidls/XMLHttpRequest.webidl).

[[File:Uncomment-overrideMimeType.png]]

===Step 2===

As two new fields are necessary for overrideMimeType() method implementation, override_mime_type to store the mime type of the mime passed in the argument and override_charset to store the charset of the mime passed in the argument.
Hence, we have added two new fields: override_mime_type and override_charset to the XMLHttpRequest structure.

[[File:XHRStruct.png]]

===Step 3===

Finally, we have implemented the overrideMimeType method according to the [https://xhr.spec.whatwg.org/#the-overridemimetype%28%29-method XHR specifications].
* If the state is loading or done, we have returned Invalid State Error
* Then we have parsed the mime passed in the argument
* If the parsing of mime was successful, we have saved the appropriate values in override_mime_type and override_charset

[[File:overrideMimeType.png]]

== Testing ==

Following are the steps to run all the tests for XMLHttpRequest:

# Install the pre-requisites required for servo as mentioned [https://github.com/servo/servo/blob/master/README.md here]
# Run the following commands

<code>
cd
</code>

<code>
git clone https://github.com/jitendra29/servo.git
</code>

<code>
cd servo
</code>

<code>
git checkout -b test origin/overrideMimeType
</code>

<code>
./mach build --release
</code>

Note: It may take around 30 mins to build

<code>
./mach test-wpt XMLHttpRequest/ --release
</code>

You will see that all tests pass as expected.

'''Note:''' We have not added any new tests to the test suite as servo follows TDD and tests were previously written for XMLHttpRequest. We have just adjusted some of the test expectations for the tests which now pass due to our implementation.

=== Testing From UI ===

Our project cannot be tested from UI since it is basically improving some javascript features (XMLHttpRequest) in servo. However you can check that it doesn't break the existing code and the browser runs correctly by running a test page on servo after performing the build as mentioned above.

Run the following command after the project is build:

<code>
./mach run tests/html/about-mozilla.html
</code>

==Pull Request==
Here is our [https://github.com/servo/servo/pull/8182 pull request]. In the link you can see all code snippets changed due to implementing the above steps, as well as integration test progression information.

==References==
<references/>

CSC/ECE 517 Spring 2016/Mozilla Conforming Image Loading to HTML 5 Specs

2016-03-22T22:37:58Z

Smshah4: /* Scope */

Making image load conform with the spec 
This is change by Ahmad
Background information: The HTML5 specification defines a surprisingly complex model for loading images in a web page. Servo's current implementation is straightforward, but non-compliant in a number of important ways. The goal of this project is to implement image loading behaviour that is both more correct and easy to verify against the text of the specification.
==Introduction==

===Servo===

Servo <ref> https://github.com/servo/servo </ref> is a web browser layout engine written in [https://github.com/rust-lang/rust Rust]<ref>https://github.com/rust-lang/rust</ref> and is currently being developed by [https://en.wikipedia.org/wiki/Mozilla Mozilla Research]. The aim of the project is not to create a full browser but is rather to create a highly parallel environment that allows for many components be handled by fine-grained, isolated tasks.<ref>https://en.wikipedia.org/wiki/Servo_(layout_engine)</ref>

Servo is built on top of Rust to provide a secure and reliable foundation and is focused on creating a reliable and fast browser engine.

===Rust===

[https://en.wikipedia.org/wiki/Rust_(programming_language) Rust] is a multi-paradigm, compiled programming language that is a good language for creating highly safe systems. Rust and Servo have a symbiotic relationship as the development of servo has influenced the design of the language.

Rust is a modern, fast, memory safe and multithreaded programming language that focuses on speed and safety for developing reliable and efficient systems. It eliminates all data races by having numerous compile-time safety checks that adds no runtime overhead.<ref> http://doc.rust-lang.org/nightly/book/README.html</ref>

===XMLHttpRequest===
"[https://xhr.spec.whatwg.org/ XMLHttpRequest] is a definition of an [https://en.wikipedia.org/wiki/Application_programming_interface API] that provides scripted client functionality for transferring data between a client and a server."<ref>https://xhr.spec.whatwg.org/</ref> XMLHttpRequest provides a way for data to be retrieved from a URL without having to retrieve the entire page. It supports protocols other than HTTP and can be used to retrieve any type of data.<ref>https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest</ref>

==Scope==
The scope of the project was to complete the initial steps mentioned [https://github.com/servo/servo/wiki/Implement-support-for-missing-XMLHttpRequest-APIs here].

The steps are as follows:
compile Servo and ensure that it runs on tests/html/about-mozilla.html
•define data types to represent the image request concept, and add pending and current requests to the HTMLImageElement type in htmlimageelement.rs . These should subsume the existing fields in HTMLImageElement that are used for storing the image's properties, and the fields of the current request should be used instead.
•implement the crossOrigin attribute using the make_enumerated_getter / make_setter macros and uncommenting the attribute in HTMLImageElement.webidl
•implement the currentSrc attribute by adding the appropriate attribute to HTMLImageElement.webidl
•run ./mach test-wpt tests/wpt/web-platform-tests/html/dom/interfaces.html and adjust the test result expectations according to the documenatation.
•add a command for the image cache task that accepts a URL and a vector of bytes. This command should instruct the cache to store this data as a newly-complete network request and continue decoding the result into pixel data.

The subsequent steps mentioned [https://github.com/servo/servo/wiki/Implement-support-for-missing-XMLHttpRequest-APIs here] are to be done for the final project.

==Design Pattern==
Design patterns are not applicable as our task involved just implementing a method. However, the [[CSC/ECE_517_Fall_2015/oss_M1504_JJD#Implementation|Implementation]] section below provides details of the steps as why it was implemented, the way it was implemented.

==Implementation==

The following steps were followed to meet the project requirements as per this [https://github.com/servo/servo/wiki/Implement-support-for-missing-XMLHttpRequest-APIs github page].

===Step 1===

As we need to implement the overrideMimeType() method, we have uncommented the overrideMimeType() method from the XMLHttpRequest interface (components/script/dom/webidls/XMLHttpRequest.webidl).

[[File:Uncomment-overrideMimeType.png]]

===Step 2===

As two new fields are necessary for overrideMimeType() method implementation, override_mime_type to store the mime type of the mime passed in the argument and override_charset to store the charset of the mime passed in the argument.
Hence, we have added two new fields: override_mime_type and override_charset to the XMLHttpRequest structure.

[[File:XHRStruct.png]]

===Step 3===

Finally, we have implemented the overrideMimeType method according to the [https://xhr.spec.whatwg.org/#the-overridemimetype%28%29-method XHR specifications].
* If the state is loading or done, we have returned Invalid State Error
* Then we have parsed the mime passed in the argument
* If the parsing of mime was successful, we have saved the appropriate values in override_mime_type and override_charset

[[File:overrideMimeType.png]]

== Testing ==

Following are the steps to run all the tests for XMLHttpRequest:

# Install the pre-requisites required for servo as mentioned [https://github.com/servo/servo/blob/master/README.md here]
# Run the following commands

<code>
cd
</code>

<code>
git clone https://github.com/jitendra29/servo.git
</code>

<code>
cd servo
</code>

<code>
git checkout -b test origin/overrideMimeType
</code>

<code>
./mach build --release
</code>

Note: It may take around 30 mins to build

<code>
./mach test-wpt XMLHttpRequest/ --release
</code>

You will see that all tests pass as expected.

'''Note:''' We have not added any new tests to the test suite as servo follows TDD and tests were previously written for XMLHttpRequest. We have just adjusted some of the test expectations for the tests which now pass due to our implementation.

=== Testing From UI ===

Our project cannot be tested from UI since it is basically improving some javascript features (XMLHttpRequest) in servo. However you can check that it doesn't break the existing code and the browser runs correctly by running a test page on servo after performing the build as mentioned above.

Run the following command after the project is build:

<code>
./mach run tests/html/about-mozilla.html
</code>

==Pull Request==
Here is our [https://github.com/servo/servo/pull/8182 pull request]. In the link you can see all code snippets changed due to implementing the above steps, as well as integration test progression information.

==References==
<references/>

CSC/ECE 517 Spring 2016/Mozilla Conforming Image Loading to HTML 5 Specs

2016-03-22T22:32:29Z

Smshah4: Created page with "Making image load conform with the spec Background information: The HTML5 specification defines a surprisingly complex model for loading images in a web..."

Making image load conform with the spec 
Background information: The HTML5 specification defines a surprisingly complex model for loading images in a web page. Servo's current implementation is straightforward, but non-compliant in a number of important ways. The goal of this project is to implement image loading behaviour that is both more correct and easy to verify against the text of the specification.
==Introduction==

===Servo===

Servo <ref> https://github.com/servo/servo </ref> is a web browser layout engine written in [https://github.com/rust-lang/rust Rust]<ref>https://github.com/rust-lang/rust</ref> and is currently being developed by [https://en.wikipedia.org/wiki/Mozilla Mozilla Research]. The aim of the project is not to create a full browser but is rather to create a highly parallel environment that allows for many components be handled by fine-grained, isolated tasks.<ref>https://en.wikipedia.org/wiki/Servo_(layout_engine)</ref>

Servo is built on top of Rust to provide a secure and reliable foundation and is focused on creating a reliable and fast browser engine.

===Rust===

[https://en.wikipedia.org/wiki/Rust_(programming_language) Rust] is a multi-paradigm, compiled programming language that is a good language for creating highly safe systems. Rust and Servo have a symbiotic relationship as the development of servo has influenced the design of the language.

Rust is a modern, fast, memory safe and multithreaded programming language that focuses on speed and safety for developing reliable and efficient systems. It eliminates all data races by having numerous compile-time safety checks that adds no runtime overhead.<ref> http://doc.rust-lang.org/nightly/book/README.html</ref>

===XMLHttpRequest===
"[https://xhr.spec.whatwg.org/ XMLHttpRequest] is a definition of an [https://en.wikipedia.org/wiki/Application_programming_interface API] that provides scripted client functionality for transferring data between a client and a server."<ref>https://xhr.spec.whatwg.org/</ref> XMLHttpRequest provides a way for data to be retrieved from a URL without having to retrieve the entire page. It supports protocols other than HTTP and can be used to retrieve any type of data.<ref>https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest</ref>

==Scope==
The scope of the project was to complete the initial steps mentioned [https://github.com/servo/servo/wiki/Implement-support-for-missing-XMLHttpRequest-APIs here].

The steps are as follows:
* compile Servo and ensure that it runs on tests/html/about-mozilla.html
* uncomment the overrideMimeType API in XMLHttpRequest.webidl, and add a stub method that allows Servo to compile again to xmlhttprequest.rs.
* run the tests via ./mach test-wpt tests/wpt/web-platform-tests/XMLHttpRequest/ and adjust the expectations for any that now pass (tests/wpt/metadata/XMLHttpRequest/)
* add new override_charset and override_mime_type fields to the XMLHttpRequest structure
* implement the overrideMimeType steps described in the specification
* update any tests that now pass

The subsequent steps mentioned [https://github.com/servo/servo/wiki/Implement-support-for-missing-XMLHttpRequest-APIs here] are to be done for the final project.

==Design Pattern==
Design patterns are not applicable as our task involved just implementing a method. However, the [[CSC/ECE_517_Fall_2015/oss_M1504_JJD#Implementation|Implementation]] section below provides details of the steps as why it was implemented, the way it was implemented.

==Implementation==

The following steps were followed to meet the project requirements as per this [https://github.com/servo/servo/wiki/Implement-support-for-missing-XMLHttpRequest-APIs github page].

===Step 1===

As we need to implement the overrideMimeType() method, we have uncommented the overrideMimeType() method from the XMLHttpRequest interface (components/script/dom/webidls/XMLHttpRequest.webidl).

[[File:Uncomment-overrideMimeType.png]]

===Step 2===

As two new fields are necessary for overrideMimeType() method implementation, override_mime_type to store the mime type of the mime passed in the argument and override_charset to store the charset of the mime passed in the argument.
Hence, we have added two new fields: override_mime_type and override_charset to the XMLHttpRequest structure.

[[File:XHRStruct.png]]

===Step 3===

Finally, we have implemented the overrideMimeType method according to the [https://xhr.spec.whatwg.org/#the-overridemimetype%28%29-method XHR specifications].
* If the state is loading or done, we have returned Invalid State Error
* Then we have parsed the mime passed in the argument
* If the parsing of mime was successful, we have saved the appropriate values in override_mime_type and override_charset

[[File:overrideMimeType.png]]

== Testing ==

Following are the steps to run all the tests for XMLHttpRequest:

# Install the pre-requisites required for servo as mentioned [https://github.com/servo/servo/blob/master/README.md here]
# Run the following commands

<code>
cd
</code>

<code>
git clone https://github.com/jitendra29/servo.git
</code>

<code>
cd servo
</code>

<code>
git checkout -b test origin/overrideMimeType
</code>

<code>
./mach build --release
</code>

Note: It may take around 30 mins to build

<code>
./mach test-wpt XMLHttpRequest/ --release
</code>

You will see that all tests pass as expected.

'''Note:''' We have not added any new tests to the test suite as servo follows TDD and tests were previously written for XMLHttpRequest. We have just adjusted some of the test expectations for the tests which now pass due to our implementation.

=== Testing From UI ===

Our project cannot be tested from UI since it is basically improving some javascript features (XMLHttpRequest) in servo. However you can check that it doesn't break the existing code and the browser runs correctly by running a test page on servo after performing the build as mentioned above.

Run the following command after the project is build:

<code>
./mach run tests/html/about-mozilla.html
</code>

==Pull Request==
Here is our [https://github.com/servo/servo/pull/8182 pull request]. In the link you can see all code snippets changed due to implementing the above steps, as well as integration test progression information.

==References==
<references/>