CSC/ECE 517 Fall 2017/M1752 Implement the Microdata API: Difference between revisions
No edit summary |
No edit summary |
||
| Line 20: | Line 20: | ||
=='''Design'''== | =='''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. | 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. | ||
===Example=== | |||
[[Image:SVG example markup grid.svg]] | |||
<!-- | |||
*********************************** | |||
READ THIS: Please do not edit the SVG markup below! The SVG image included in the article is a static image which will not be updated if this code is modified. Please use https://en.wikipedia.org/wiki/Wikipedia:Sandbox for any test edits you wish to make. | |||
*********************************** | |||
--> | |||
This code will produce the shapes shown in the image (excluding the grid): | |||
<source lang="xml"> | |||
<?xml version="1.0" encoding="UTF-8" ?> | |||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> | |||
<rect x="25" y="25" width="200" height="200" fill="lime" stroke-width="4" stroke="pink" /> | |||
<circle cx="125" cy="125" r="75" fill="orange" /> | |||
<polyline points="50,150 50,200 200,200 200,100" stroke="red" stroke-width="4" fill="none" /> | |||
<line x1="50" y1="50" x2="200" y2="200" stroke="blue" stroke-width="4" /> | |||
</svg> | |||
</source> | |||
=='''Implementation'''== | =='''Implementation'''== | ||
Revision as of 09:52, 27 October 2017
M1752 : Implement the Microdata API
Introduction
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. For additional project information please refer https://github.com/servo/servo/wiki/Microdata-project.
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 an HTML file with Microdata is shown below -
https://github.com/servo/servo/wiki/Microdata-project
Some popular websites like Google, Skype and Microsoft use the Microdata.
This specification consists of the following HTML attributes. Out of which ‘itemtype’ and ‘itemprop’ are currently in scope.
For more information about the specification, please refer - The number of websites that use Microdata is growing; currently about 13% of websites use Microdata (statistics courtesy Alexa) , an % increase since 2014
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.
Example
File:SVG example markup grid.svg
This code will produce the shapes shown in the image (excluding the grid):
<?xml version="1.0" encoding="UTF-8" ?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect x="25" y="25" width="200" height="200" fill="lime" stroke-width="4" stroke="pink" />
<circle cx="125" cy="125" r="75" fill="orange" />
<polyline points="50,150 50,200 200,200 200,100" stroke="red" stroke-width="4" fill="none" />
<line x1="50" y1="50" x2="200" y2="200" stroke="blue" stroke-width="4" />
</svg>
Implementation
The implementation involved updates to the Web Interface Definition Language (webidl) files and its Rust implementation.
parse_plain_attributes ->
propertyNames ->
The method
HTMLElement.webidl ->
Configuration
The preference [Pref="dom.microdata.testing.enabled"] was added to toggle the experimental microdata methods during development.
Testing
testharness is used as the testing framework.
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.
Htmlelement.rs ->
Pull Request
The pull request used to incorporate our changes upstream is available here