Verifying Web Page Layouts

Опубликовано 24 сентября 2019, 20:27

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. Understanding all the ways a web page can be laid out, and ensuring that all these layouts are correct, is a persistent challenge.

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.

See more at microsoft.com/en-us/research/v...