Responsive Layout Failures (RLFs) typically arise from CSS properties that hinder proper layout behavior in different screen sizes. To find an accurate and effective solution for repairing RLFs, localization of those problematic properties is necessary. However, existing approaches only detect RLFs and apply broad CSS patches for them. The patches alter the entire layout without localizing the root cause of failure. To address this gap, we propose a heuristic approach to identify the specific CSS properties that developers would typically localize manually. The approach first detects the RLFs existing in a webpage and their affected elements. Next, it localizes the nearby HTML elements using RLF direction and relative alignment of the elements present in the RLF region. The involved CSS properties of those elements are then identified using a ranked search set of CSS properties, created by analyzing Quora and Stack Overflow queries. Finally, elements and their corresponding property pairs are ranked based on their impact on RLFs. We have implemented this approach into a tool called {\normalfont \textsc{LocaliCSS}} and evaluated it on a set of webpages using Top N Rank, MRR and P@K metrics. The tool achieved localization accuracy ranging from 45.2% (Top-1) to 92.86% (Top-7), with an MRR of 76% and a P@3 of 77.13%. Additionally, experienced front-end engineers manually localized the RLFs as part of our evaluation. Their preferred CSS properties matched the suggestions from our approach in 42.86% of cases for Top-1 rankings and up to 90.48% for Top-7 rankings.
翻译:响应式布局失效(RLF)通常源于阻碍不同屏幕尺寸下正确布局行为的CSS属性。为找到修复RLF的精准有效方案,必须定位这些有问题的属性。然而现有方法仅能检测RLF并施以宽泛的CSS补丁——这些补丁会改变整体布局却未定位失效的根源。针对这一缺陷,我们提出一种启发式方法,用于识别开发者通常需手动定位的特定CSS属性。该方法首先检测网页中存在的RLF及其影响元素,随后利用RLF方向与失效区域内元素的相对对齐方式定位邻近HTML元素,继而通过分析Quora与Stack Overflow问答构建的CSS属性排序搜索集,识别这些元素涉及的CSS属性。最后根据属性对RLF的影响程度对元素及其对应属性对进行排序。我们将该方法实现为名为{\normalfont \textsc{LocaliCSS}}的工具,并采用Top N Rank、MRR和P@K指标在网页集上开展评估。该工具定位准确率介于45.2%(Top-1)至92.86%(Top-7),MRR达76%,P@3达77.13%。此外,经验丰富的前端工程师作为评估环节手动定位RLF,其首选的CSS属性在Top-1排名中有42.86%的案例与我们的方法建议匹配,在Top-7排名中则达90.48%。