Verifying Web Page Layouts

Channel:
Microsoft Research
Subscribers:
344,000
Published on ● Video Link: https://www.youtube.com/watch?v=wKGFiAgBE80


Duration: 54:20
891 views
25

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 https://www.microsoft.com/en-us/research/video/verifying-web-page-layouts/



Other Videos By Microsoft Research


2019-09-26Boosting Innovation and Discovery of Ideas
2019-09-26Resource-Efficient Redundancy for Large-Scale Data Processing and Storage Systems
2019-09-26Optimizing Declarative Graph Queries at Large Scale
2019-09-25SILK: Preventing Latency Spikes in Log-Structured Merge Key-Value Stores
2019-09-25Coverage Guided, Property Based Testing
2019-09-25Efficient Robot Skill Learning: Grounded Simulation Learning and Imitation Learning from Observation
2019-09-25Towards Secure and Interpretable AI: Scalable Methods, Interactive Visualizations, & Practical Tools
2019-09-25Sequential Estimation of Quantiles with Applications to A/B-testing and Best-arm Identification
2019-09-25Reproducible Codes and Cryptographic Applications
2019-09-25Inside AR and VR, a technical tour of the reality spectrum with Dr. Eyal Ofek [Podcast]
2019-09-24Verifying Web Page Layouts
2019-09-23Battling Unfair Demons in Peer Review
2019-09-19Engaging with Students and Parents in Bellevue School District in Multilingual Settings
2019-09-19Internship Program - MSR Montreal
2019-09-19Recent Advances in Unsupervised Image-to-Image Translation
2019-09-19Modeling User Experience in Games: Lessons Learned
2019-09-18HCI, IR and the search for better search with Dr. Susan Dumais [Podcast]
2019-09-17Efficient and Perceptually Plausible 3-D Sound For Virtual Reality
2019-09-17Dashboard Mechanisms for Online Marketplaces
2019-09-13Fly-through in the AirSim simulation Team Explorer created for the DARPA SubT Challenge
2019-09-12Compacting the Uncompactable: The Mesh Compacting Memory Allocator


Tags:
CSS
Visual Logic
web page layout
web design
microsoft research