ConFlores

by Eri

What is the Point of These?

2024-06-18

Tags: outreachy

One of the first things I saw when contributing to Servo were the pull request guidelines. They mentioned the importance of WPT tests when adding or changing features. I knew why tests were important, but I was left wondering what WPT was. Since what I was doing was some light refactoring and it didn’t require new tests, I didn't give it more thought at the time.

However, nearing the end of the contribution period I decided to tackle an issue with how videos were displayed. There are many ways the user can specify a video’s size: both width or height, just one of them, or even none. What if the video itself has a predefined size? At the moment, Servo only handled one very simple case, so there was room for improvement.

At first I imagined I would have to check all different options and write tests for them. But to my surprise, the original issue linked to a file: intrinsic_sizes.htm. What was this mysterious file? It was located inside the tests folder, which I had not touched before. And more than that, it was in the tests/wpt folder! I couldn’t go any longer without knowing what those letters meant, so I turned to a web search.

Web Platform Tests

That actually makes sense. Looking at the first result, web-platform-tests.org:

The web-platform-tests project is a cross-browser test suite for the Web-platform stack. Writing tests in a way that allows them to be run in all browsers gives browser projects confidence that they are shipping software which is compatible with other implementations, and that later implementations will be compatible with their implementations. This in turn gives Web authors/developers confidence that they can actually rely on the Web platform to deliver on the promise of working across browsers and devices without needing extra layers of abstraction to paper over the gaps left by specification editors and implementors.

Looking inside the tests/wpt directory, there were more than 120.000 files! All of them testing one specific feature to make sure it was consistent.

What they actually are

Let's take the test that I was trying to fix as an example, intrinsic_sizes.htm. This was just an HTML file that declared some of the multiple options we talked about before, with a script tag that tested each case. You can actually open this with another browser and see the expected result. You can even go here and see the full test suite online!

<video id="v1"></video>
<video id="v2" width="400"></video>
<video id="v3" height="100"></video>
<video id="v4"></video>
<video id="v5" poster="/media/poster.png"></video>
<script>
    ...
</script>

Why are they helpful

When adding the expected behaviour, it was very useful having this tests that not only told you if the result was right, but where you could see visually what was happening in the page. When they all finally listed the big OK in green, it felt really good!

Last week I was very lucky to attend a CSS Working Group panel, which was an amazing experience. It gave me much insight into how web standards are written and the people behind them are so cool! But what striked me the most was that probably the phrase they mentioned the most was: "web platform tests". They really insisted on the importance of adding WPTs to be able to test the functionality that the standard proposed and that it works the same across browsers, which is not an easy task. And they are specially useful for projects like Servo, which are implementing all of this web browser features from scratch.

What I have been working on

These past two weeks I have been working on reimplementing the web inspector feature in Servo. This works by sending JSON messages between Servo and the Firefox DevTools client. Since this API is internal to Firefox and it is not througly documented, most of the work went into reversing engineering what was happening. I went through some fun adventures, like debugging the Firefox Android browser, trying to listen to the messages in between using tools like Wireshark, putting breakpoints in the browser itself and using some cool third party projects like geckordp.

Despite you can't just yet see any difference when you click the "Inspect" button in a Servo tab, it is getting there. Now we have a Watcher actor that lists the debugging capabilities and sends DevTools a list of targets and resources that it can inspect. There are a few messages left to send, but I think that we will be able to start seeing things on the screen, like Servo's console or the webpage source code. It is always very rewarding when you finally can watch your work take shape into something specific.

I hope that you could learn something from this blog post, like I did when researching what WPT was. My main takeaways are that testing is very important, and that you should always be willing to investigate new things.

See you next week!