Automated Reasoning for Web Page Layout

Abstract

Web pages define their appearance using Cascading Style Sheets. However, the CSS language's quirks and subtleties make it difficult for designers to write, debug, and test CSS to implement their designs. Additionally, web pages can be laid out by different browsers, at varying screen sizes, and by users with different font or color preferences. Understanding all the ways a web page can be laid out, and ensuring that all these layouts are correct, is a persistent challenge. Yet meeting this challenge is essential to ensure that a web page is accessible, usable, and attractive for all users. Tools to verify such web page layout properties across a range of possible layouts would lighten the testing burden for web developers. We develop a formal verification paradigm for layout properties to support such tools. To formally verify a layout property, that property is first expressed in Visual Logic, a concise language for describing geometric properties of web page layouts. Visual Logic properties are true or false as a consequence of how a browser lays out a given page; we formalize a substantial fragment of browser layout in the Cassius framework. This formalization allows automated reasoning about CSS files and thus enables new tools that reason about the possible layouts of a web page. One such tool, VizAssert, automatically verifies that layout properties, expressed in Visual Logic, are true across a range of screen size or user configurations. Since VizAssert operates on whole web pages, it is difficult to scale to large web pages. However, large web pages are frequently composed of smaller, independent pieces. Reasoning about large pages should leverage this independence; to this end, the Troika proof assistant allows decomposing a large web page into many components and verifying those components independently. These tools provide a demonstrate formal verification for layout properties and sketch a path toward provably correct web design.