Pavel Panchekha
Emina Torlak
ABSTRACT
Web pages define their appearance using Cascading Style Sheets, a modular language for layout of tree-structured documents. In principle, using CSS is easy: the developer specifies declarative constraints on the layout of an HTML document (such as the positioning of nodes in the HTML tree), and the browser solves the constraints to produce a box-based rendering of that document. In practice, however, the subtleties of CSS semantics make it difficult to develop stylesheets that produce the intended layout across different user preferences and browser settings.
This paper presents the first mechanized formalization of a substantial fragment of the CSS semantics. This formalization is equipped with an efficient reduction to the theory of quantifier-free linear real arithmetic, enabling effective automated reasoning about CSS stylesheets and their behavior. We implement this reduction in Cassius, a solver-aided framework for building semantics-aware tools for CSS. To demonstrate the utility of Cassius, we prototype new tools for automated verification, debugging, and synthesis of CSS code. We show that these tools work on fragments of real-world websites, and that Cassius is a practical first step toward solver-aided programming for the web.
- G. J. Badros, A. Borning, K. Marriott, and P. J. Stuckey. Constraint cascading style sheets for the web. UIST’15, 1999. doi: 10. 1145/320719.322588. Google Scholar
Digital Library
- C. Barrett, P. Fontaine, and C. Tinelli. The SMT-LIB Standard: Version 2.5. Technical report, Department of Computer Science, The University of Iowa, 2015.Google Scholar
- CSSWG. CSS2.1 test suite, 2011.Google Scholar
- A. Fogel, S. Fung, L. Pedrosa, M. Walraed-Sullivan, R. Govindan, R. Mahajan, and T. Millstein. A general approach to network configuration analysis. NSDI’15, Oakland, CA, May 2015. USENIX Association. M. Hague, A. W. Lin, and L. Ong. Detecting redundant CSS rules in HTML5 applications: A tree-rewriting approach. CoRR, 2014. Google ScholarDigital Library
- J. Harper and M. Agrawala. Deconstructing and restyling d3 visualizations. UIST ’14, 2014. doi: 10.1145/2642918.2647411. Google ScholarDigital Library
- T. Hottelier, R. Bodik, and K. Ryokai. Programming by manipulation for layout. UIST’14, 2014. doi: 10.1145/2642918.2647378. Google ScholarDigital Library
- R. Kumar, J. O. Talton, S. Ahmad, and S. R. Klemmer. Bricolage: Example-based retargeting for web design. CHI’11. ACM, 2011. Google ScholarDigital Library
- doi: 10.1145/1978942.1979262.Google Scholar
- R. Kumar, A. Satyanarayan, C. Torres, M. Lim, S. Ahmad, S. R. Klemmer, and J. O. Talton. Webzeitgeist: Design mining the web. CHI’13, 2013. doi: 10.1145/2470654.2466420. Google ScholarDigital Library
- S. Kundu, Z. Tatlock, and S. Lerner. Proving optimizations correct using parameterized program equivalence. PLDI’09, 2009. doi: 10.1145/1542476.1542513. Google ScholarDigital Library
- K. R. M. Leino. This is Boogie 2. Technical report, Microsoft Research, June 2008.Google Scholar
- K. R. M. Leino. Dafny: An automatic program verifier for functional correctness. LPAR’10, 2010. Google ScholarDigital Library
- H.-S. Liang, K.-H. Kuo, P.-W. Lee, Y.-C. Chan, Y.-C. Lin, and M. Y. Chen. Seess: Seeing what i broke – visualizing change impact of cascading style sheets (CSS). UIST ’13, 2013. doi: 10.1145/2501988.2502006. Google ScholarDigital Library
- N. P. Lopes, D. Menendez, S. Nagarakatte, and J. Regehr. Provably correct peephole optimizations with Alive. In Proceedings of the 36th ACM SIGPLAN Conference on Programming Language Design and Implementation, PLDI’15, 2015. doi: 10.1145/2737924.2737965. Google ScholarDigital Library
- L. A. Meyerovich and R. Bodik. Fast and parallel webpage layout. WWW’10, Raleigh, North Carolina, USA, 2010. Google ScholarDigital Library
- T. A. Nguyen and C. Csallner. Reverse engineering mobile application user interfaces with remaui. In Proc. 30th IEEE/ACM International Conference on Automated Software Engineering (ASE), ASE’15. IEEE, Nov. 2015.Google ScholarDigital Library
- M. Otto and J. Thornton. Bootstrap: the world’s most popular mobile-first and responsive front-end framework, 2015.Google Scholar
- doi: 10.1145/1168857.1168907.Google Scholar
- E. Torlak and R. Bodik. Growing solver-aided languages with Rosette. In Onward!, 2013. Google ScholarDigital Library
- E. Torlak and R. Bodik. A lightweight symbolic virtual machine for solver-aided host languages. In PLDI, PLDI’14, 2014. Google ScholarDigital Library
- R. Uhler and N. Dave. Smten with satisfiability-based search. Oct. 2014. doi: 10.1145/2714064.2660208. Google ScholarDigital Library
- W3C. Css basic box model, Aug. 2007.Google Scholar
Index Terms
- Automated reasoning for web page layout
Recommendations
Modular verification of web page layout
Automated verification can ensure that a web page satisfies accessibility, usability, and design properties regardless of the end user's device, preferences, and assistive technologies. However, state-of-the-art verification tools for layout properties ...
Automated reasoning for web page layout
OOPSLA '16Web pages define their appearance using Cascading Style Sheets, a modular language for layout of tree-structured documents. In principle, using CSS is easy: the developer specifies declarative constraints on the layout of an HTML document (such as the ...
Comments