CSC/ECE 517 Spring 2018- Project M1803: Implement a web page buzzer to find rendering mismatches: Difference between revisions
No edit summary |
No edit summary |
||
Line 50: | Line 50: | ||
==Testing== | ==Testing== | ||
As this is a Mozilla Project, it does not require to test the coverage. | As this is a Mozilla Project, it does not require to test the coverage. For more details following link would be helpful [https://tinyurl.com/y9yxpvzf] | ||
==Conclusion== | ==Conclusion== |
Revision as of 00:31, 3 April 2018
“M1803: Implement a web page buzzer to find rendering mismatches”
This helps to generate multiple skeleton HTML files with a doctype, head element, and body element. They have random content contained in itself.
Introduction
This section briefly describes the main parts of this project: Servo.
Servo
Named after a robot from the show Mystery Science Threater 3000, Servo is an experimental web browser layout engine developed by Mozilla. It is created by Mozilla Research, the Servo project is being built by a global community, from individual contributors to companies such as Mozilla and Samsung. It currently supports Linux, macOS, Windows, and Android.
Project Description
Servo is implementing a rendering engine for web content from scratch. We often rely on existing web browsers like Firefox and Chrome to help us determine if Servo is rendering web content correctly. This goal of this project is to create a tool that can randomly generate valid HTML pages, then automatically load them in both Firefox and Servo using the WebDriver protocol and report if both engines render the content identically.
Initial Steps
- adding a module to the program that enable generating random content specific to the <head> element (such as inline CSS content inside of a <style> element) and add it to the generated output
- adding a module to the program that enables generating random content specific to the <body> element (such as a
block that contains randomly generated text) and add it to the generated output
- generating random CSS that affects randomly generated content (ie. if there is an element with an id foo, generate a CSS selector like #foo that applies a style like color to it)
Subsequent Steps
- extending the program that controls Servo to also control Firefox using geckodriver
- compare the resulting screenshots and report the contents of the generated page if the screenshots differ
- extend the page generation tool with a bunch of additional strategies, such as
- generating elements trees of arbitrary depth
- generating sibling elements
- extending the set of CSS properties that can be generated (display, background, float, padding, margin, border, etc.)
- extending the set of elements that can be generated (span, div, header elements, table (and associated table contents), etc.)
- randomly choose whether to generate a document in quirks mode or not
Implementation
After setting up the environment required to develop for Servo, we built and compiled Servo as per the instructions on Servo’s Github repo. We used Mozilla’s mach tools to build Servo with Cargo, which is the rust package manager.
git clone https://github.com/servo/servo cd servo ./mach build --dev
After successfully building servo, python script was created for generating random html files. The script can be downloaded from [1] and the following commands can used for running the script.
cd Random-web-content-generator---CSC-517-OSS-Project python code_generation.py
Testing
As this is a Mozilla Project, it does not require to test the coverage. For more details following link would be helpful [2]
Conclusion
The goal for the project was to make it easy to find testcases that are rendered differently by Firefox and Servo.