1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
|
# "Introduction to WPT" video transcript
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/zuK1uyXPZS0"
frameborder="0"
allow="autoplay; encrypted-media"
allowfullscreen></iframe>
**Still image of the WPT logo. The song ["My
Luck"](http://brokeforfree.bandcamp.com/track/my-luck) by [Broke for
Free](http://brokeforfree.com/) (licensed under [Creative Commons Attribution
3.0](https://creativecommons.org/licenses/by/3.0/))
plays in the background.**
> Hello, and welcome to the Web Platform Tests!
>
> The goal of this project is to ensure that all web browsers present websites
> in exactly the way the authors intended.
>
> But what is the web platform, exactly? You can think of it as having three
> main parts.
**A top-down shot of a blank sheet of graph paper**
> First, there are the web browsers.
A hand places a paper cutout depicting a browser window in the lower-right
corner of the sheet.
> Applications like Firefox, Chrome, and Safari allow people to interact with
> pages and with each other.
>
> Second, there are the web standards.
A hand places a paper cutout depicting a scroll of parchment paper in the
lower-left corner of the sheet.
> These documents define how the browsers are supposed to behave.
**A screen recording of a web browser**
`https://platform.html5.org` is entered into the location bar, and the browser
loads the page.
> That includes everything from how text is rendered to how augmented reality
> apps are built. Specifying it all takes a lot of work!
The browser clicks through to the Fetch standard and begins scrolling.
> And as you might expect, the standards can get really complicated.
**Return to the graph paper**
A hand draws an arrow from the cutout of the scroll to the cutout of the
browser window.
> The people who build the browsers use the specifications as a blue print for
> their work. A shared set of generic instructions like these make it possible
> for people to choose between different browsers, but only if the browsers get
> it right.
A hand places a cutout representing a stack of papers on the top-center of the
sheet and draws an arrow from that cutout to the cutout of the browser window.
> To verify their work, the browser maintainers rely on the third part of the
> web platform: conformance tests.
A hand draws an arrow from the cutout of the scroll to the cutout of the tests.
> We author tests to describe the same behavior as the standards, just
> formatted in a way that a computer can understand.
A hand draws an arrow from the cutout of the browser window to the cutout of
the scroll.
> In the process, the maintainers sometimes uncover problems in the design of
> the specifications, and they recommend changes to fix them.
A hand draws an arrow from the cutout of the tests to the cutout of the scroll.
> Test authors also find and fix these so-called "spec bugs."
A hand draws an arrow from the cutout of the browser window to the cutout of
the tests.
> ...and as they implement the standards, the maintainers of each browser
> frequently write new tests that can be shared with the others.
>
> This is how thousands of people coordinate to build the cohesive programming
> platform that we call the world wide web. The web-platform-tests project is
> one of the test suites that make this possible.
>
> That's pretty abstract, though! Let's take a quick look at the tests
> themselves.
**A screen recording of a web browser**
`http://wpt.live` is entered into the location bar, and the browser loads the
page.
> The latest version of the tests is publicly hosted in executable form on the
> web at wpt.live.
The browser begins scrolling through the enormous list of directories.
> There, were can navigate among all the tests for all the different web
> technologies.
>
> Let's take a look at a typical test.
The browser stops scrolling, and a mouse cursor clicks on `fetch`, then `api`,
then `headers`, and finally `headers-basic.html`.
> This test is written with the web-platform-tests's testing framework,
> testharness.js. The test completes almost instantly, and testharness.js
> reports that this browser passes all but one subtest. To understand the
> failure, we can read the source code.
The mouse opens a context menu, selects "View Source", and scrolls to the
source of the failing test.
> It looks like the failing subtest is for what happens when a `Headers`
> instance has a custom JavaScript iterator method. That's a strange edge case,
> but it's important for browsers to agree on every detail!
The mouse clicks on the browser's "Back" button and then navigates through the
directory structure to the test at
`css/css-transforms/transform-transformed-tr-contains-fixed-position.html`. It
displays text rendered at an angle.
> Many tests don't use testharness.js at all. Let's take a look at a couple
> other test types.
>
> When it comes to the visual appearance of a page, it can be hard to verify
> the intended behavior using JavaScript alone. For these situations, the
> web-platform-tests uses what's known as a reftest.
>
> Short for "reference test", this type of test uses at least two different web
> pages.
>
> The first page demonstrates the feature under test.
The mouse opens a context menu, selects "View Source", and clicks on the `href`
value for the matching reference. It looks identical to the previous page.
> Inside of it, we'll find a link to a second page. This second page is the
> reference page. It's designed to use a different approach to produce the same
> output.
The mouse clicks back and forth between the browser tabs displaying the test
page and the reference page.
> When tests like these are run automatically, a computer verifies that
> screenshots of the two pages are identical.
The mouse clicks on the browser's "Back" button and then navigates through the
directory structure to the test at
`css/css-animations/animation-fill-mode-002-manual.html`. The page includes the
text, "Test passes if there is a filled color square with 'Filler Text', whose
color gradually changes in the order: YELLOW to GREEN." It also includes the
described animated square.
> Even with testharness.js and reftests, there are many web platform features
> that a computer can't automatically verify. In cases like these, we fall back
> to using manual tests.
>
> Manual tests can only be verified by a living, breathing human. They describe
> their expectations in plain English so that a human operator can easily
> determine whether the browser is behaving correctly.
`https://web-platform-tests.org` is entered into the location bar, and the
browser loads the page.
> You can read more about all the test types in the project documentation at
> [web-platform-tests.org](https://web-platform-tests.org).
`https://wpt.fyi` is entered into the location bar, and the browser loads the
page.
> [wpt.fyi](https://wpt.fyi) is a great way to see how today's browsers are
> performing on the web-platform-tests.
The browser scrolls to `fetch`, and a mouse cursor clicks on `fetch`, then
`api`, then `headers`, and finally `headers-basic.html`.
> Here, you'll find all the same tests, just presented with the results from
> various browsers.
`https://web-platform-tests.live/LICENSE.md` is entered into the location bar,
and the browser loads the page.
> The web-platform-tests project is free and open source software. From bug
> reports to documentation improvements and brand new tests, we welcome all
> sorts of contributions from everyone.
`https://github.com/web-platform-tests/wpt` is entered into the location bar,
and the browser loads the page.
> To get involved, you can visit the project management website hosted on
> GitHub.com.
The browser navigates to the project's "issues" list and filters the list for
just the ones labeled as "good first issue."
> Some issues are more difficult than others, but many are perfect for people who
> are just getting started with the project. When we come across an issue like
> that, we label it as a "good first issue."
`https://lists.w3.org/Archives/Public/public-test-infra` is entered into the
location bar, and the browser loads the page.
> You can also join the mailing list to receive e-mail with announcements and
> discussion about the project.
`http://irc.w3.org/` is entered into the location bar, and the browser loads
the page. `web4all` is entered as the Nickname, and `#testing` is entered as
the channel name. A mouse clicks on the "Connect" button.
> For more immediate communication, you can join the "testing" channel on the
> IRC server run by the W3C.
**Return to the graph paper**
A hand places a paper cutout depicting a human silhouette on the sheet. It then
draws arrows from the new cutout to each of the three previously-introduced
cutouts.
> We're looking forward to working with you!
|
