CSC/ECE 517 Spring 2020 - M2000. Implement ImageBitMap web API

From Expertiza_Wiki
Jump to navigation Jump to search

Servo is a prototype web browser engine written in the Rust language [1]. Servo is a new, experimental browser that supports synchronously compiling and executing WebAssembly code, but does not yet support asynchronous compilation. This means that the entire WebAssembly program must be fetched before compilation can begin, which leads to longer time loading pages that run WebAssembly programs than in other web browsers. The goal of the project is to support compiling WebAssembly programs asynchronously so compilation can begin while the program is still being fetched from the network.

Introduction

Servo

Servo [2] is an open source prototype web browser layout engine being developed by Mozilla, and it is written in Rust language [3]. The main idea is to create a highly parallel environment, in which different components can be handled by fine grained, isolated tasks. The different components can be rendering, HTML parsing, etc.

Rust

Rust [4] is an open source systems programming language developed by Mozilla. Servo is written in Rust. The main purpose behind its design is to be thread safe and concurrent. The emphasis is also on speed, safety and control of memory layout.

Scope

Major browsers support the ImageBitmap standard which can be used to create images that ready to be drawn efficiently to HTML canvas elements. Servo is a new, experimental browser that supports these canvas APIs; the goal of this project is to implement support for image bitmaps and improve our canvasautomated test coverage as a result.

Image Bitmap

The ImageBitmap interface [5] represents a bitmap image which can be drawn to a <canvas> [6] without undue latency. It can be created from a variety of source objects using the createImageBitmap() factory method. ImageBitmap provides an asynchronous and resource efficient pathway to prepare textures for rendering in WebGL.

Steps that are being implemented in this milestone

The following steps are being implemented in this implementation :

Step 1- add a ImageBitmap WebIDL interface to components/script/dom/webidls

Step 2- Implement its Rust code in components/script/dom/imagebitmap.rs that is backed by a Vec<u8> buffer

Step 3- add and implement the createImageBitmap method that takes no extra x/y/w/h parameters in component/script/dom/webidls/Window.webidl, handling the HTMLCanvasElement and OffscreenCanvas types from the possible image sources.

Design Pattern

Our project will not require any design patterns as it will only require the implementation of the methods. Please see below for the steps that required in the implementation.

Implementation

The following are the steps that are present it the implementation project description.

Step 1 : add a ImageBitmap WebIDL interface to components/script/dom/webidls

webidl implementation

Implemented the image bitmap webidl for the dom struct that will be taking the height and width as its attributes and close as its only function.


step 2 : Create a imagebitmap.rs code implementation for the webidl

imagebitmap implementation

Here we have implemented the image bitmap rust code that uses all the imports at this point.

Here we implement the code that reads in the various attributes and the java script objects required. It will be using the newinherited and the new method to obtain the required javascript objects and resolve the intended promises.

Here we implement the code for the height and width attributes that return the values corresponding to them.

The detailed description of the algorithm that has been implemented can be seen in the HTML Standard [7].

Pull Request

https://github.com/servo/servo/pull/26009

How to Setup and Run

The following are the steps to build the servo.

1. git clone the servo repository

2. setup all the prerequisites as mentioned in : build pre-requisites

3. switch into the "servo" directory - cd servo

4. build the project using:

4.1. For Windows 

    mach.bat build -dev

    run the project using:

    mach run -d -- https://github.com

4.2. For Linux 

    ./mach build --dev

    run the project using:

    ./mach run --release tests/html/about-mozilla.html

Testing

References

1) https://en.wikipedia.org/wiki/Rust_(programming_language)

2) https://en.wikipedia.org/wiki/Servo_(layout_engine)

3) https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas

3) https://doc.rust-lang.org/book/index.html

4) https://github.com/servo/servo/wiki/Implement-ImageBitmap-project

5) https://github.com/servo/servo/blob/master/README.md#on-windows-msvc

6) https://github.com/SasiDharKM/servo/blob/master/components/script/dom/imagebitmap.rs

Retrieved from "https://wiki.expertiza.ncsu.edu/index.php?title=CSC/ECE_517_Spring_2020_-_M2000._Implement_ImageBitMap_web_API&oldid=131722"