Case Study Examples

:defined CSS Pseudo-class

[selectors-4] :defined

Problem

The :defined pseudo-class was added to allow differentiating between custom elements that have been successfully constructed from those that have not yet been constructed or have failed to construct. This pseudo-class was defined in HTML but did not have a definition in the Selectors specification.

Solution

At first, we (Bocoup) proposed to move the definition from HTML into Selectors. Anne van Kesteren commented that previous features are defined as host language-agnostic in the Selectors specification, and the host language (such as HTML) have precise definitions as appropriate for that language.

We specified a high-level definition in the Selectors specification with examples showing how to use it for HTML.

There were already test cases in web-platform-tests, so no new tests were needed.

Impact

Developers reading the Selectors specification can learn that the :defined pseudo-class exists and how to use it.

Search Event

The “search” event

Problem

Chromium and WebKit both offered a special feature for the “search” input element, but Firefox and Edge did not. Chromium developers were working to determine if they could remove the feature without breaking any existing websites, but there had been no word from WebKit developers. In the meantime, web developers could accidentally make forms that worked in some browsers but not in others.

Solution

We alerted the WebKit developers of the incompatibility by submitting a report to the WebKit bug tracker. We also created tests for the web-platform-tests project, so-called “historical” tests which asserted that the feature was not available.

Impact

The WebKit team has acknowledged the issue and filed it among their upcoming tasks. The web-platform-tests project has accepted the new tests, and those tests have been automatically transmitted to the Chromium project. Chromium and WebKit developers can now more easily and with more confidence remove the feature and know that, if they pass the tests, their new behavior will be interoperable with Firefox.