CSC/CSC 517 Spring 2020/Implement ImageBitMap WebAPI - Revision history

Jviswan: /* Mentor Details */

2020-05-01T19:25:59Z

Mentor Details

← Older revision		Revision as of 19:25, 1 May 2020
Line 403:		Line 403:

	== '''Mentor Details''' ==		== '''Mentor Details''' ==
	Jay Modi		Jay Modi (jmodi3@ncsu.edu)

	== '''References''' ==		== '''References''' ==

Jviswan: /* Current Progress */

2020-05-01T19:24:29Z

Current Progress

@@ Line 244: / Line 244: @@
      };
      promise
+}
 </pre>

Jviswan: /* Test Plan */

2020-05-01T19:16:09Z

Test Plan

← Older revision		Revision as of 19:16, 1 May 2020
Line 275:		Line 275:
	=='''Test Plan'''==		=='''Test Plan'''==
	The following are the respective steps in testing:		The following are the respective steps in testing:
	* <b>Servo check ~~should be successful.~~</b>		* <b>Servo mach check test</b>
	The compiling time for servo build takes a lot of time. In order to make sure that our changes didn't break any of the existing features quickly, we run		The compiling time for servo build takes a lot of time. In order to make sure that our changes didn't break any of the existing features quickly, we run
	<pre>		<pre>
Line 288:		Line 288:
	[[File:machCheck.png]]		[[File:machCheck.png]]

	* <b>Servo ~~building~~ test ~~should be successful.~~</b>		* <b>Servo mach build test</b>
	The compiling time is based on the CPU clock speed and the OS of the system where the file is being run. For a 64-bit Linux OS, it takes from about 1 hour to 2 hours for the entire build. It takes 2.5 hours on Windows OS. This is done to make sure that the end-to-end implementation can be successfully run in a system.		The compiling time is based on the CPU clock speed and the OS of the system where the file is being run. For a 64-bit Linux OS, it takes from about 1 hour to 2 hours for the entire build. It takes 2.5 hours on Windows OS. This is done to make sure that the end-to-end implementation can be successfully run in a system.
	<pre>		<pre>
Line 314:		Line 314:
	[[File:machTestTidy.png]]		[[File:machTestTidy.png]]

	*<b>Servo automated Unit-testing ~~should be successful.~~</b>		*<b>Servo automated Unit-testing</b>
	Running the following commands will run all the unit-tests		Running the following commands will run all the unit-tests
	<pre>		<pre>
Line 328:		Line 328:
	For a DOM feature, extensive tests already exist under tests/wpt. Any change in DOM would require updating the expected results in the automated tests.		For a DOM feature, extensive tests already exist under tests/wpt. Any change in DOM would require updating the expected results in the automated tests.

	This first requires storing the log in raw format from a test run~~, for example by running~~		This first requires storing the log in raw format from a test run. We ran the following command:
	<pre>		<pre>
	./~~mach~~ test-wpt --log-~~raw~~ /~~path~~/~~for~~/~~storing~~/log/~~file~~/~~<filename>~~.log		wget https://community.taskcluster-artifacts.net/KqQWr_VwQDe55wGO_T193Q/0/public/test-wpt.log
			https://community.taskcluster-artifacts.net/PhPboOqiSa-gdhzBMJbL_w/0/public/test-wpt.log
			https://community.taskcluster-artifacts.net/Fzvx31ovS6GPF4eGGBl8rA/0/public/test-wpt.log
			https://community.taskcluster-artifacts.net/EfQsJZaXTBSTmct0hy3scw/0/public/test-wpt.log
	</pre>		</pre>

	Once log is saved, then ~~run~~ to update test expectations		Once log is saved, then we ran the following command to update the test expectations
	<pre>		<pre>
	./mach update-wpt ~~/path/to/logfile/<filename>~~.log		./mach update-wpt test-wpt.log test-wpt.log.1 test-wpt.log.2 test-wpt.log.3
	</pre>		</pre>

			This updated the test results in 73 test files to include the createImageBitmap API.

	* <b> Finally, to run the servo with a webpage (Google.com) to visually confirm that servo is working:</b>		* <b> Finally, to run the servo with a webpage (Google.com) to visually confirm that servo is working:</b>

Jviswan: /* Current Progress */

2020-05-01T14:42:34Z

Current Progress

← Older revision		Revision as of 14:42, 1 May 2020
Line 246:		Line 246:
	}		}
	</pre>		</pre>
	* Updated wpt tests results to include createImageBitmap API and reject non-canvas image source elements.		* Updated wpt(Web Platform Tests) tests results to include createImageBitmap API and reject non-canvas image source elements.

			* For this implementation, we followed the DRY principle and strategy pattern.

	== '''Design of the createImageBitmap() method''' ==		== '''Design of the createImageBitmap() method''' ==

Jviswan: /* Current Progress */

2020-05-01T14:32:52Z

Current Progress

← Older revision		Revision as of 14:32, 1 May 2020
Line 246:		Line 246:
	}		}
	</pre>		</pre>
	* ~~Tested the build using ‘mach’ commands~~		* Updated wpt tests results to include createImageBitmap API and reject non-canvas image source elements.

	== '''Design of the createImageBitmap() method''' ==		== '''Design of the createImageBitmap() method''' ==

Nradhak2: /* Future Work */

2020-05-01T14:16:57Z

Future Work

← Older revision		Revision as of 14:16, 1 May 2020
Line 350:		Line 350:
	== '''Future Work ''' ==		== '''Future Work ''' ==
	The createImageBitmap() method can be extended to support the subsequent steps as shown in the steps for implementation.		The createImageBitmap() method can be extended to support the subsequent steps as shown in the steps for implementation.
	- The method can be extended to support other image sources such as SVGImage, video sources, ImageData source, and so on.		1. The method can be extended to support other image sources such as SVGImage, video sources, ImageData source, and so on.
	- Overload the createImageBitmap() method to accept the s/y/w/h parameters		2. Overload the createImageBitmap() method to accept the s/y/w/h parameters
	- Also implement support for ImageBitmaps as canvas image sources in the canvas_state.rs file		3. Also implement support for ImageBitmaps as canvas image sources in the canvas_state.rs file

	=='''Code submission and Pull request'''==		=='''Code submission and Pull request'''==

Nradhak2 at 14:15, 1 May 2020

2020-05-01T14:15:45Z

← Older revision		Revision as of 14:15, 1 May 2020
Line 347:		Line 347:

	[[File:machRun.png]]		[[File:machRun.png]]

			== '''Future Work ''' ==
			The createImageBitmap() method can be extended to support the subsequent steps as shown in the steps for implementation.
			- The method can be extended to support other image sources such as SVGImage, video sources, ImageData source, and so on.
			- Overload the createImageBitmap() method to accept the s/y/w/h parameters
			- Also implement support for ImageBitmaps as canvas image sources in the canvas_state.rs file

	=='''Code submission and Pull request'''==		=='''Code submission and Pull request'''==

Jviswan: /* Current Progress */

2020-05-01T14:14:24Z

Current Progress

← Older revision		Revision as of 14:14, 1 May 2020
Line 160:		Line 160:
	<pre>		<pre>
	// https://html.spec.whatwg.org/multipage/#dom-createimagebitmap		// https://html.spec.whatwg.org/multipage/#dom-createimagebitmap
	fn ~~CreateImageBitmap~~(		pub fn create_image_bitmap(
	&self,		&self,
	image: ImageBitmapSource,		image: ImageBitmapSource,
	options: &ImageBitmapOptions,		options: &ImageBitmapOptions,
	) -> Rc<Promise> {		) -> Rc<Promise> {
	~~let global = self.global();~~		let in_realm_proof = AlreadyInRealm::assert(&self);
	let in_realm_proof = AlreadyInRealm::assert(&~~global~~);		// Created a new promise object p
	// ~~The following line creates~~ promise ~~element which is to be returned~~		let p = Promise::new_in_current_realm(&self, InRealm::Already(&in_realm_proof));
	let p = Promise::new_in_current_realm(&~~global~~, InRealm::Already(&in_realm_proof));
	if options.resizeWidth.~~unwrap~~() == 0 {		// If resizewidth is present and is equal to 0, reject p with InvalidState error
	p.reject_error(Error::InvalidState)		if options.resizeWidth.map_or(false, \|w\| w == 0) {
			p.reject_error(Error::InvalidState);
			return p;
	}		}

	if options.resizeHeight.~~unwrap~~() == 0 {		// If resizeheight is present and is equal to 0, reject p with InvalidState error
	p.reject_error(Error::InvalidState)		if options.resizeHeight.map_or(false, \|w\| w == 0) {
			p.reject_error(Error::InvalidState);
			return p;
	}		}

	~~let image_bitmap = ImageBitmap::new(&global, 0, 0).unwrap();~~		// match the image to different types of image source and return the resolved p

	// match the image ~~type~~ to ~~promise element~~
	let promise = match image {		let promise = match image {
	// ~~Check~~ if ~~the imageBitmapSource~~ is of HTMLCanvasElement ~~type~~		// check if image source is HTMLCanvasElement
	ImageBitmapSource::HTMLCanvasElement(ref canvas) => {		ImageBitmapSource::HTMLCanvasElement(ref canvas) => {
	// https://html.spec.whatwg.org/multipage/#check-the-usability-of-the-image-argument		// https://html.spec.whatwg.org/multipage/#check-the-usability-of-the-image-argument
			// check if the image source is valid
	if !canvas.is_valid() {		if !canvas.is_valid() {
	p.reject_error(Error::InvalidState)		p.reject_error(Error::InvalidState);
			return p;
	}		}

	// ~~Use~~ fetch_all_data() ~~from canvas_state.rs to return~~ the ~~image~~ data and ~~its~~ size ~~and assign it to a DomRefCell as a vector~~		// the fetch_all_data() method returns the bitmap data and size of the image
	if let Some((data, size)) = canvas.fetch_all_data() {		if let Some((data, size)) = canvas.fetch_all_data() {
	let data = ~~DomRefCell::new(~~		// convert the data to a <vec> type
	~~data~~.map(\|data\| data.to_vec())		let data = data
	.unwrap_or_else(\|\| vec![0; size.area() as usize * 4]),		.map(\|data\| data.to_vec())
	);		.unwrap_or_else(\|\| vec![0; size.area() as usize * 4]);
	// ~~Set imageBitmap's bitmap~~ data to ~~a copy~~ of ~~image's bitmap data~~		//create imageBitmap object using the height and width of the image
			let image_bitmap = ImageBitmap::new(&self, size.width, size.height).unwrap();

			// copy the data to bitmap_data of imageBitmap object
	image_bitmap.set_bitmap_data(data);		image_bitmap.set_bitmap_data(data);
	// ~~Set~~ the origin-clean flag of ~~the imageBitmap's bitmap~~ to ~~the same value as the origin-clean~~ flag of ~~image's bitmap~~		// copy the origin clean flag of canvas image to origin_clean flag of imageBitmap object
	image_bitmap.set_origin_clean(canvas.origin_is_clean());		image_bitmap.set_origin_clean(canvas.origin_is_clean());
	// ~~Resolve~~ p with imageBitmap		// resolve p with imageBitmap object
	p.resolve_native(&(image_bitmap));		p.resolve_native(&(image_bitmap));
	}		}
	p		p
	},		},
	// ~~Check~~ if ~~the imageBitmapSource~~ is of OffscreenCanvas ~~type~~		// check if image source is OffscreenCanvas
	ImageBitmapSource::OffscreenCanvas(ref canvas) => {		ImageBitmapSource::OffscreenCanvas(ref canvas) => {
	// https://html.spec.whatwg.org/multipage/#check-the-usability-of-the-image-argument		// https://html.spec.whatwg.org/multipage/#check-the-usability-of-the-image-argument
			// check if the image source is valid
	if !canvas.is_valid() {		if !canvas.is_valid() {
	p.reject_error(Error::InvalidState)		p.reject_error(Error::InvalidState);
			return p;
	}		}
	// ~~Use~~ fetch_all_data() ~~from canvas_state.rs to return~~ the ~~image~~ data and ~~its~~ size ~~and assign it to a DomRefCell as a vector~~
			// the fetch_all_data() method returns the bitmap data and size of the image
	if let Some((data, size)) = canvas.fetch_all_data() {		if let Some((data, size)) = canvas.fetch_all_data() {
	let data = ~~DomRefCell::new(~~		// convert the data to a <vec> type
	~~data~~.map(\|data\| data.to_vec())		let data = data
	.unwrap_or_else(\|\| vec![0; size.area() as usize * 4]), // ~~set value as 0 if~~ image ~~data is null~~		.map(\|data\| data.to_vec())
	);		.unwrap_or_else(\|\| vec![0; size.area() as usize * 4]);
	// ~~Set imageBitmap's bitmap~~ data to ~~a copy~~ of ~~image's bitmap data~~		//create imageBitmap object using the height and width of the image
	image_bitmap.set_bitmap_data(data);		let image_bitmap = ImageBitmap::new(&self, size.width, size.height).unwrap();
	// ~~Set~~ the origin-clean flag of ~~the imageBitmap's bitmap~~ to ~~the same value as the origin-clean~~ flag of ~~image's bitmap~~
			// copy the data to bitmap_data of imageBitmap object
			image_bitmap.set_bitmap_data(data);
			// copy the origin clean flag of canvas image to origin_clean flag of imageBitmap object
	image_bitmap.set_origin_clean(canvas.origin_is_clean());		image_bitmap.set_origin_clean(canvas.origin_is_clean());
	// ~~Resolve~~ p with imageBitmap		// resolve p with imageBitmap object
	p.resolve_native(&(image_bitmap));		p.resolve_native(&(image_bitmap));
	}		}
	p		p
	},		},
	_ => p,		_ => {
			// if the image source is not HTMLCanvasElement or OffscreenCanvas, reject p with NotSupported Error
			p.reject_error(Error::NotSupported);
			return p;
			},
	};		};
	promise		promise

Jviswan: /* Current Progress */

2020-05-01T13:41:36Z

Current Progress

← Older revision		Revision as of 13:41, 1 May 2020
Line 156:		Line 156:
	== '''Current Progress''' ==		== '''Current Progress''' ==

	* Implemented createImageBitmap method for canvas image source(HTMLCanvasElement and OffscreenCanvas) using RUST programming language in the '''components/script/dom/~~workerglobalscope~~.rs''' ~~and '''components/script/dom/window.rs''' files~~. The comments in the following code will explain the functionality that it carries out.		* Implemented createImageBitmap method for canvas image source(HTMLCanvasElement and OffscreenCanvas) using RUST programming language in the '''components/script/dom/globalscope.rs''' file. The comments in the following code will explain the functionality that it carries out.

	<pre>		<pre>

Jviswan: /* Proposed Implementation */

2020-05-01T13:40:26Z

Proposed Implementation

← Older revision		Revision as of 13:40, 1 May 2020
Line 128:		Line 128:
	Among the remaining steps in the initial and subsequent phases, the focus will be on step 2 of initial phase and once there is progress made on this step, implementation of the subsequent steps will take place.		Among the remaining steps in the initial and subsequent phases, the focus will be on step 2 of initial phase and once there is progress made on this step, implementation of the subsequent steps will take place.

	;~~Starting with~~ createImageBitmap()		;Implementing createImageBitmap web API

	:*The createImageBitmap() method creates a bitmap from a given source, optionally cropped to contain only a portion of that source. The method exists on the global scope in both windows and workers. It accepts a variety of different image sources, and returns a Promise which resolves to an ImageBitmap.		:*The createImageBitmap() method creates a bitmap from a given source, optionally cropped to contain only a portion of that source. The method exists on the global scope in both windows and workers. It accepts a variety of different image sources, and returns a Promise which resolves to an ImageBitmap.
	:*This ~~method~~ is defined in the file ''components/script/dom/webidls/WindowOrWorkerGlobalScope.webidl'' and rust code is implemented at ''components/script/dom/window.rs''.		:*This web interface is defined in the file ''components/script/dom/webidls/WindowOrWorkerGlobalScope.webidl'' and rust code is implemented at ''components/script/dom/globalscope.rs''. It is then called in ''components/script/dom/window.rs'' and ''components/script/dom/workerglobalscope.rs''
	:*The syntax of the method looks like		:*The syntax of the method looks like
	:::const imageBitmapPromise = createImageBitmap(image[, options]);		:::const imageBitmapPromise = createImageBitmap(image[, options]);