WebCompatBug
A web compatibility bug describes a behavior in Servo that makes a specific website not function properly.
A good issue targets one specific, well defined, reproducible problem.
It can be, for example, a non operational button on facebook.com due to Servo not implementing a specific JavaScript method. It can also be a out of place banner on reddit.com due to Servo not implementing correctly a CSS property.
A useful issue includes:
- the URL of the affected website
- a short description of the issue
- a reduced test case
- a screenshot of the expected result (when relevant)
- a screenshot of the actual result (when relevant)
- for graphic/rendering issue, specify if webrender was used or not
- a link to the relevant specification (whatwg.org or w3.org) (when relevant)
- for a crash, the logs found in your terminal
It is recommended to use an up-to-date release build, with webrender.
To use webrender, start Servo with the -w option:
./mach run -r -- -w http://reddit.com
It can also be useful to test without webrender to see if it's a webrender specific issue.
Examples of web compat issues with test case:
Putting together a short and standalone HTML page with inline JS and CSS will make it a lot easier to fix the bug in Servo.
Ideally, we would be able to reproduce the issue locally, without depending on remote content. No need to use a http server to run a file:
./mach run -r -- -w ./mytest.html
First step is to look at the Servo logs in the terminal. Any JavaScript error is printed there. If there's an error and it looks like it's related to the wrong behavior we are trying to identify, it should not be too hard to reproduce this error in a JS test case.
For a rendering issue, maybe the issue can be reproduced by inspecting the element from Firefox or Chrome, copying the HTML code (use the "Copy outerHTML" feature of the inspector) and its CSS rules (select and copy the rules in the inspector sidebar), and put it together into a file (the Chrome extension SnappySnippet can do most of this work automatically).
It is important to remove all non-relevant code to highlight the exact feature that is not working.
If the test is not too big, copy/paste it directly in to the issue like this:
```html
<div>foobar</div>
<script>
function foobar() {
console.log();
}
</script>
<style>
div {
border: 2px solid red;
}
</style>
```