Responsive Web Design (RWD) is a strategy that allows developers to create webpages that adjust their layout according to available screen size. Since modern web applications must format correctly on the small displays of mobile devices up to the large displays on desktop computers, and given this dramatic difference in screen space, Responsive Layout Failures (RLFs) — visual discrepancies that are only apparent at certain screen sizes — can easily creep into live production webpages. These can include, for example, HTML elements protruding off the edge of the page or into one another as layout space becomes scarce. This leaves webpages looking unprofessional at best and non-functional at worst. This paper presents a technique for repairing RLFs, implemented into a tool called Layout Dr. After detecting an RLF, Layout Dr harvests layouts from the page’s responsive design that are closest to the point of failure, but where the RLF does not occur. It then transforms these layouts so that they can be transplanted over the failure, effectively “hiding” the original RLF from the end user. We evaluated Layout Dr on 19 subjects, containing 55 RLFs in total. Layout Dr could find a suitable fix for each of them. When we conducted a human study of the repairs, 92% of the participants preferred the repaired version of the page compared to the original containing the RLF
Thu 7 AprDisplayed time zone: Amsterdam, Berlin, Bern, Rome, Stockholm, Vienna change
11:30 - 12:45 | ICST API Testing and Program RepairIndustry / Research Papers at Margaret Hamilton Chair(s): Thomas Durieux KTH | ||
11:30 15mTalk | Harvesting Production GraphQL Queries to Detect Schema Faults Research Papers Louise Zetterlund Redeye AB, Deepika Tiwari KTH Royal Institute of Technology, Martin Monperrus KTH Royal Institute of Technology, Benoit Baudry KTH | ||
11:45 15mTalk | Automated Repair of Responsive Web Page Layouts Research Papers Ibrahim Althomali The University of Sheffield, Gregory Kapfhammer Allegheny College, Phil McMinn University of Sheffield | ||
12:00 15mTalk | Repairing Fragile GUI Test Cases Using Word and Layout Embedding Industry Juyeon Yoon Korea Advanced Institute of Science and Technology, Seungjun Chung KAIST, Kihyuck Shin Samsung Electronics, Jinhan Kim KAIST, Shin Hong Handong Global University, Shin Yoo KAIST | ||
12:15 15mTalk | Testing a PL/I Compiler using Precomputation-based Program Generation Industry Jesse Postema Universiteit Van Amsterdam, Johan Fabry Raincode Labs, Belgium, Yannick Barthol Raincode Labs, Ana Oprescu University of Amsterdam | ||
12:30 15mLive Q&A | Discussion and Q&A Research Papers |