Automatic Detection of Visibility Faults by Layout Changes in HTML5 Web Pages

Abstract

Modern HTML5 web pages (pages) often change various elements of their documents dynamically to provide rich functionality to users interactively. As users interact with a document via events, the combination of HTML, CSS, and JavaScript dynamically changes the document layout, which is the arrangement of the document elements visualized to the users. Web pages change their layouts not only to support user interaction but also to react to different screen sizes being used to run the pages. To support diverse devices with different screen sizes using a single web page document, developers use Responsive Web Design, which enables web page layouts to change when the sizes of the underlying devices change. While such dynamic features of web pages provide powerful experiences to users, they also make development of web pages more difficult. Even expert developers find it difficult to write HTML5 web pages correctly. In this paper, we first define the problem that functionalities of HTML5 web pages may become unusable due to layout changes, and propose a technique to detect the problem automatically. We show that our implementation detects such problems in real-world HTML5 web pages.