CSC/ECE 517 Fall 2016/M1652 ImageMap Support Servo: Difference between revisions

From Expertiza_Wiki
Jump to navigation Jump to search
No edit summary
No edit summary
Line 12: Line 12:
===Rust===
===Rust===


[https://en.wikipedia.org/wiki/Rust_(programming_language) Rust] is a multi-paradigm, compiled programming language suited to create highly concurrent and highly safe systems. Rust has been developed with an emphasis on safety, control of memory layout, and concurrency. It is a modern, fast, memory-safe and multi-threaded programming language focusing on speed and safety to develop 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>
[https://en.wikipedia.org/wiki/Rust_(programming_language) Rust] is a multi-paradigm, compiled programming language suited to create highly concurrent and highly safe systems. Rust is a modern, fast, memory-safe and multi-threaded programming language focusing on speed and safety to develop reliable and efficient systems. <ref> http://doc.rust-lang.org/nightly/book/README.html</ref>


===Image Maps===
===Image Maps===
"In HTML and XHTML, an [https://en.wikipedia.org/wiki/Image_map Image map] is a list of coordinates relating to a specific image, created in order to hyperlink areas of the image to different destinations (as opposed to a normal image link, in which the entire area of the image links to a single destination). Servo currently doesn't support Image maps at the moment.
"In HTML and XHTML, an [https://en.wikipedia.org/wiki/Image_map Image map] is a list of coordinates relating to a specific image, created in order to hyperlink areas of the image to different destinations (as opposed to a normal image link, in which the entire area of the image links to a single destination). Servo currently doesn't support image maps.


==Scope==
==Project Scope==
The initial steps completed till now are mentioned [https://github.com/servo/servo/wiki/Image-maps-project here].


[http://wiki.expertiza.ncsu.edu/index.php/CSC/ECE_517_Fall_2016/M1652_Implement_ImageMap_Support_Servo Initial Steps]
*Compile Servo and ensure that it runs on tests/html/about-mozilla.html
*Compile Servo and ensure that it runs on tests/html/about-mozilla.html
*Define an Area enum in htmlareaelement.rs that supports rectangles, circles, and polygons (ie. coordinate representations)
*An Area enum was defined in htmlareaelement.rs to handle rectangles, circles, and polygons (ie. coordinate representations)
*Implement constructors for each variant that accept a string argument, parse them into appropriate coordinates, and return an appropriate Area instance
*Implement constructors for each variant that accept a string argument, parse them into appropriate coordinates, and return an appropriate Area instance
*Implement a hit_test method on Area that accepts a Point2D<f32> argument and returns true if the point is within the area's coordinates (return false for all polygonal areas)
*Implement a hit_test method on Area that accepts a Point2D<f32> argument and returns true if the point is within the area's coordinates (return false for all polygonal areas)
*Write tests for the Area constructors and hit tests (add a new htmlareaelement.rs to tests/unit/script/ and run ./mach test-unit -p script)
*Write tests for the Area constructors and hit tests (add a new htmlareaelement.rs to tests/unit/script/ and run ./mach test-unit -p script)
*Add a method to HTMLAreaElement that returns an Area value derived from that element's attributes
*Add a method to HTMLAreaElement that returns an Area value derived from that element's attributes
<br/><br/><br/>
[[File:Servo_011.png]]


[http://wiki.expertiza.ncsu.edu/index.php/CSC/ECE_517_Fall_2016/M1652_Implement_ImageMap_Support_Servo Link to OSS]
Subsequent steps:
*Implement an areas method to HTMLImageElement that returns a vector of Root<HTMLAreaElement> values
*Implement a method to handle activation behavior on HTMLAreaElement
*Implement a handle_event method for HTMLImageElement to handle click events


The subsequent steps are the agenda for the final project:
==Implementation Flowchart==
*We plan to add a method areas to HTMLImageElement to handle processing of a usemap attribute. The map object is to be obtained consisting all the HTML elements pertaining to the image as defined in the specification. Given the usemap attribute, we aim to retrieve the HTMLMapElement by which we will retrieve HTMLAreaelements (Children elements)
 
[[File:Servo 011.png]]
 
We will implement a method for HTMLAreaElement to handle activation behavior as defined in the [https://dom.spec.whatwg.org/#eventtarget-activation-behavior specification]
 
We will implement a method for HTMLImageElement to handle clickable events on the element. This method will use the list of HTMLAreaelements as obtained in the previous steps and the hit test method implemented in the initial steps.
 
To implement a hit test method for Polygons (Extra Credit) we plan to implement the below algorithm:
 
1) Draw a horizontal line to the right of each point and extend it to infinity
 
2) Count the number of times the line intersects with polygon edges
 
3) A point is inside the polygon if either count of intersections is odd or point lies on an edge of polygon. If none of the conditions is true, then point lies outside


==Design Pattern==
==Design Pattern==

Revision as of 04:59, 11 December 2016

M1652: Image Map support for Servo
[1] Image maps are an HTML technology that allows treating arbitrary areas in an image as separate hyperlinks. The goal of this project is to implement this missing feature on Servo.<ref>https://github.com/servo/servo/wiki/Image-maps-project</ref>

Introduction

Servo

Servo <ref> https://github.com/servo/servo </ref> is a web browser layout engine written in Rust<ref>https://github.com/rust-lang/rust</ref> and is currently being developed by Mozilla Research. The aim of the project is to create a highly parallel environment which allows several components to 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

Rust is a multi-paradigm, compiled programming language suited to create highly concurrent and highly safe systems. Rust is a modern, fast, memory-safe and multi-threaded programming language focusing on speed and safety to develop reliable and efficient systems. <ref> http://doc.rust-lang.org/nightly/book/README.html</ref>

Image Maps

"In HTML and XHTML, an Image map is a list of coordinates relating to a specific image, created in order to hyperlink areas of the image to different destinations (as opposed to a normal image link, in which the entire area of the image links to a single destination). Servo currently doesn't support image maps.

Project Scope

Initial Steps

  • Compile Servo and ensure that it runs on tests/html/about-mozilla.html
  • An Area enum was defined in htmlareaelement.rs to handle rectangles, circles, and polygons (ie. coordinate representations)
  • Implement constructors for each variant that accept a string argument, parse them into appropriate coordinates, and return an appropriate Area instance
  • Implement a hit_test method on Area that accepts a Point2D<f32> argument and returns true if the point is within the area's coordinates (return false for all polygonal areas)
  • Write tests for the Area constructors and hit tests (add a new htmlareaelement.rs to tests/unit/script/ and run ./mach test-unit -p script)
  • Add a method to HTMLAreaElement that returns an Area value derived from that element's attributes




Subsequent steps:

  • Implement an areas method to HTMLImageElement that returns a vector of Root<HTMLAreaElement> values
  • Implement a method to handle activation behavior on HTMLAreaElement
  • Implement a handle_event method for HTMLImageElement to handle click events

Implementation Flowchart

Design Pattern

Design patterns are not applicable as our task involved implementing methods in a predefined object, namely HTMLAreaElement.

Testing

Test cases were implemented for testing the Area enum and the hit test functionality. Following are the steps to run all the tests:

  1. Install the pre-requisites required for servo as mentioned here
  2. Run the following commands to clone the repository and run the tests

git clone https://github.com/shravan-achar/servo.git


cd servo


git checkout master

To run the test cases 

./mach test-unit -p script

The above command will download and compile the dependencies and the test cases. You will see that all tests pass as expected (Testcases are prefixed by HTMLAreaElement)

Testing From UI

The project after completion should be testable from the UI by handling clickable activities on this test link. The link has to be invoked from the compiled exe; the command for which is given below:

./mach build --debug

./mach run https://samuknet.github.io/test_cases/imageMap/

References

<references/>

Retrieved from "https://wiki.expertiza.ncsu.edu/index.php?title=CSC/ECE_517_Fall_2016/M1652_ImageMap_Support_Servo&oldid=106738"