CSC/ECE 517 Fall 2017/M1752 Implement the Microdata API

Introduction

HTML Specification

The WHATWG Microdata HTML specification allows web data to be enriched in that it allows machines to learn more about the data in a web page. A typical example of real-world using of Microdata is illustrated here

The attributes ‘itemtype’ and ‘itemprop’ are in scope of this project.

More information about the Microdata specification is available here

Some popular websites like Google, Skype and Microsoft use the Microdata. The number of websites that use Microdata is growing; currently about 13% of websites use Microdata (statistics courtesy w3techs.com)

Servo

Servo is a modern, high-performance browser engine designed for both application and embedded use and written in the Rust programming language. It is currently developed on 64bit OS X, 64bit Linux, and Android.

Rust

Rust is a systems programming language focuses on memory safety and concurrency. It is similar to C++ but ensures memory safetely and high performance. More information about the Rust programming language is available here

Scope

The scope of this project is to implement initial support for Microdata API specification by allowing the Servo engine to read Microdata API tags from web pages and interpret them in the DOM. This should lay a groundwork for future improvements to implement features to created vCard and JSON data from Microdata on the ServoShell. Additional project information is available here

Design

As for the initial stage of this project, the scope did not require any major changes to the engine design. We implemented a DOM method to handle appropriate attributes in the Microdata API. The below diagram shows an overview of components involved in the design. The highlighted blocks have been modified.

Build

We have opened our pull request and are working on getting it merged based on the reviews received. Please use our forked repository till the pull request is merged.

Forked repository: https://github.com/CJ8664/servo

Clone command using git: git clone https://github.com/CJ8664/servo.git

Once you have the forked repo, please follow steps here to do a build.

Note that build may take up to 30 minutes, based on your system configuration. You can build on Janitor to reduce the build time.

Steps for building on Janitor

1. Create a servo container on http://janitor.technology

2. Create a new directory, and clone our repository as mentioned above

3. Follow build steps

Implementation

The implementation involved updates to the Web Interface Definition Language (webidl) files and its Rust implementation.

HTMLElement.WebIDL (/servo/components/script/dom/webidls/HTMLElement.WebIDLs)

Method Name	Return Type	Description
propertyNames()	String	Method definition only. The implementation is done in htmlelement.rs

htmlelement.rs (/servo/components/script/dom/htmlelement.rs)

Method Name	Return Type	Description	Location
parse_plain_attributes()	AttrValue	This method returns a value of an attribute associated to an the HTML Element.	traits Virtual_Methods
propertyNames()	Option<Vec<DOMString>>	This method parses the space-separated values of the 'item-type' attributes'	struct HTMLElement

Configuration

The preference [Pref="dom.microdata.testing.enabled"] was added to resources.pref toggle the experimental microdata methods during development.

Test Plan

Test Cases

In order to test our implementation, the following scenarios have been evaluated

1) Attribute with a single value should be stored properly - Input -

2) Space separated values in the attributes should be stored as different values Input - Expected Result -

3) Duplicate occurrence of attributes - Input - Expected Interpretation of the attributes -

4) Extra whitespace in the attribute list Input - Expected Interpretation of the attributes -

5) Attribute has not been set (null or empty) Input - Expected Interpretation of the attributes -

testharness.js has been used as the testing framework. It provides a convenient API for making common assertions, and to work both for testing synchronous and asynchronous DOM features in a way that promotes clear, robust, tests.

Tests are located in the directory /tests/wpt/mozilla/tests/mozilla/microdata/

The test data we created consists of HTML documents with 'itemprop' and 'itemtype' tags for different HTML elements like 'div', 'ul', 'li', 'span' etc.

Tests can be run by executing the following command on the servo directory ./mach tests-wpt /tests/wpt/mozilla/tests/mozilla/microdata/

Here is the output of test-wpt after the tests have been run successfully.

Dependencies

html5ever - HTML attribute names are fetched in Servo from a lookup file in the html5ever module. The html5ever module was augmented with the 'itemprop' and 'itemtype' attributes for use in Servo.

Pull Request

The pull request used to incorporate our changes upstream is available here

References

http://html5doctor.com/microdata/

http://web-platform-tests.org/writing-tests/testharness-api.html

https://html.spec.whatwg.org/multipage/microdata.html

https://code.tutsplus.com/tutorials/html5-microdata-welcome-to-the-machine--net-12356

http://www.servo.org