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 Scholar
Digital Library
- J. Harper and M. Agrawala. Deconstructing and restyling d3 visualizations. UIST ’14, 2014. doi: 10.1145/2642918.2647411. Google Scholar
Digital Library
- T. Hottelier, R. Bodik, and K. Ryokai. Programming by manipulation for layout. UIST’14, 2014. doi: 10.1145/2642918.2647378. Google Scholar
Digital Library
- R. Kumar, J. O. Talton, S. Ahmad, and S. R. Klemmer. Bricolage: Example-based retargeting for web design. CHI’11. ACM, 2011. Google Scholar
Digital 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 Scholar
Digital Library
- S. Kundu, Z. Tatlock, and S. Lerner. Proving optimizations correct using parameterized program equivalence. PLDI’09, 2009. doi: 10.1145/1542476.1542513. Google Scholar
Digital 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 Scholar
Digital 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 Scholar
Digital 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 Scholar
Digital Library
- L. A. Meyerovich and R. Bodik. Fast and parallel webpage layout. WWW’10, Raleigh, North Carolina, USA, 2010. Google Scholar
Digital 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 Scholar
Digital 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 Scholar
Digital Library
- E. Torlak and R. Bodik. A lightweight symbolic virtual machine for solver-aided host languages. In PLDI, PLDI’14, 2014. Google Scholar
Digital Library
- R. Uhler and N. Dave. Smten with satisfiability-based search. Oct. 2014. doi: 10.1145/2714064.2660208. Google Scholar
Digital Library
- W3C. Css basic box model, Aug. 2007.Google Scholar
Index Terms
Automated reasoning for web page layout
Recommendations
Automated reasoning for web page layout
OOPSLA 2016: Proceedings of the 2016 ACM SIGPLAN International Conference on Object-Oriented Programming, Systems, Languages, and ApplicationsWeb 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