WebKit
Interactive Catalog Navigation Proposal
Objective
The objective of this proposal is to introduce a test case that models user interaction with a CSS heavy web page that features an image carousel and a dashboard or a catalog. Some popular examples are: Netflix Top 10 TV, IMDB index and Facebook Photo
Motivation
CSS is an essential component of modern web development that helps developers build a large number of appealing and engaging websites. When CSS enables fancy webpages, the performance of CSS becomes an important factor affecting user experience on the web. Therefore, we propose adding a CSS heavy test case into Speedometer3 to help browsers measure and improve CSS performance. This proposal exercises CSS and DOM operations in the popular format of an image carousel and a linked dashboard.
Description
The test case reflects real-world patterns by testing interactions listed in the column “ Typical User Interactions” in the following table
| Real World Scenario | URL | Typical UI Elements | Typical User Interactions | Typical Web tech exercised |
|---|---|---|---|---|
| Netflix Top 10 TV | https://top10.netflix.com/tv | Carousel & Table of Popular contents | Change selection in Dropdown triggers the update of carousel images and contents in table | CSS transform, opacity/size settings |
| IMDB Index | https://www.imdb.com/ | Carousel & List of contents in DIV blocks | Click the arrow button in carousel to update the list of the contents | CSS transform, opacity/color settings |
| Facebook photo | https://www.facebook.com/photo/?fbid=742932955788401&set=a.636245978533785 | Slideshow & List of contents in DIV blocks | Click the arrow button in carousel to update the list of the contents | CSS opacity/color/padding settings |
It simulates a food menu with 5 kinds of food. Each food category contains 100 choices in a table. And it switches the food pictures and refreshes the table through click events. The proposal exercises many CSS property operations (referencing the statistics from https://chromestatus.com/), such as transform animation, opacity/color setting, position/size adjustment etc. The web page of this proposal looks like the image below.
Measurement methodology
The proposal mainly measures two scenarios: image carousel and table refresh. The measurement starts with a click event on food pictures and ends with the layout after the click event. The image below shows the duration measured in Chrome trace.
NOTE: Please see issue #175 for more information on this proposal
