Automated reasoning for web page layout

Abstract

Automated Reasoning for WebWeb 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 config-urations. 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.2. This formal specification is given a precise meaning by Cassius, a formalization of the browser rendering algorithm, which precisely describes the possible layouts of a given page across a range of browser parameters. Cassius implements the core of CSS 2.1 using the quantifier-free theory of linear real arithmetic (QF-LRA).3. The formal specification can now be verified using VizAssert, which takes as input a web page, ranges for each browser parameter, and a formal specification, and either certifies that the specification is satisfied for all browser parameters in those ranges, or provides a counterexample for which the specification is violated. 15 1 define scrollable(b) = b.left ≥ 0 ∧ b.top ≥ 0 2 theorem links-scrollable = ∀b, b ∈ $(a) =⇒ scrollable(b) 3 page yoga = load yoga/index.html with 4 browser.width ∈ [800, 1920] 5 browser.height ∈ [600, 1280] 6 font.size ∈ [16, 32] 7 proof of links-scrollable for yoga # Subdivide the page into components 8 component head = $(#header) 9 component body = $(#body) 10 component foot = $(#footer) # Component...

Effective automated repair of internationalization presentation failures in web applications using style similarity clustering and search‐based techniques

“…Another technique assumes that an HTML/CSS fix has been found and focuses on propagating it to the server‐side using hybrid analysis [58]. Cassius [59‐61] is a framework for repairing faulty CSS in web pages by using the CSS information extracted from the given page layout examples as the oracle. In the IPF domain, however, the pages before and after translation share the same CSS files.…”

CSS Minification via Constraint Solving

“…We also mention that there have been works [46,52,34] on solving web page layout using constraint solvers. These works are orthogonal to this paper.…”

“…These works are orthogonal to this paper. For example, [52] provides a mechanised formalisation of the semantics of CSS for web page layout (in quantifier-free linear arithmetic), which allows them to use an SMT-solver to automatically reason about layout. Our work provides a full formalisation of CSS selectors, which is not especially relevant for layout.…”

Syntax-Guided Termination Analysis

“…SyGuS [2] is applied to various tasks related to program synthesis, e.g., [13,17,25,33,35,41]. However, the formal grammar in those applications is typically given or constructed from user-provided examples.…”