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%。

0
下载
关闭预览

相关内容

一个具体事物,总是有许许多多的性质与关系,我们把一个事物的性质与关系,都叫作事物的属性。 事物与属性是不可分的,事物都是有属性的事物,属性也都是事物的属性。 一个事物与另一个事物的相同或相异,也就是一个事物的属性与另一事物的属性的相同或相异。 由于事物属性的相同或相异,客观世界中就形成了许多不同的事物类。具有相同属性的事物就形成一类,具有不同属性的事物就分别地形成不同的类。
一种用于军事目标发现的舰船知识图谱表示学习框架
专知会员服务
40+阅读 · 2024年10月15日
软件多缺陷定位方法研究综述
专知会员服务
22+阅读 · 2022年1月25日
专知会员服务
10+阅读 · 2021年1月31日
八个不容错过的 GitHub Copilot 功能!
CSDN
11+阅读 · 2022年9月22日
TKDE 2020 | 面向严格冷启动推荐的属性图神经网络
PaperWeekly
13+阅读 · 2020年12月18日
微信小程序支持webP的WebAssembly方案
前端之巅
19+阅读 · 2019年8月14日
FaceNiff工具 - 适用于黑客的Android应用程序
黑白之道
151+阅读 · 2019年4月7日
React Native 分包哪家强?看这文就够了!
程序人生
13+阅读 · 2019年1月16日
WebAssembly在QQ邮箱中的一次实践
IMWeb前端社区
13+阅读 · 2018年12月19日
【干货】Lossless Triplet Loss: 一种高效的Siamese网络损失函数
机器学习研究会
29+阅读 · 2018年2月21日
国家自然科学基金
1+阅读 · 2015年12月31日
国家自然科学基金
4+阅读 · 2015年12月31日
国家自然科学基金
0+阅读 · 2015年12月31日
国家自然科学基金
5+阅读 · 2015年12月31日
国家自然科学基金
1+阅读 · 2015年12月31日
国家自然科学基金
12+阅读 · 2015年12月31日
国家自然科学基金
1+阅读 · 2015年12月31日
国家自然科学基金
0+阅读 · 2014年12月31日
国家自然科学基金
0+阅读 · 2014年12月31日
国家自然科学基金
0+阅读 · 2014年12月31日
VIP会员
最新内容
乌克兰纵深打击如何重塑俄罗斯的战略选择
专知会员服务
2+阅读 · 7月24日
俄乌战争中关于中程打击无人机部署的经验启示
《基于强化学习的自动化红队测试》
专知会员服务
4+阅读 · 7月23日
伊朗不对称防空战略的演进
专知会员服务
4+阅读 · 7月23日
对抗环境下超视距目标打击的情报支援
专知会员服务
11+阅读 · 7月22日
相关资讯
相关基金
国家自然科学基金
1+阅读 · 2015年12月31日
国家自然科学基金
4+阅读 · 2015年12月31日
国家自然科学基金
0+阅读 · 2015年12月31日
国家自然科学基金
5+阅读 · 2015年12月31日
国家自然科学基金
1+阅读 · 2015年12月31日
国家自然科学基金
12+阅读 · 2015年12月31日
国家自然科学基金
1+阅读 · 2015年12月31日
国家自然科学基金
0+阅读 · 2014年12月31日
国家自然科学基金
0+阅读 · 2014年12月31日
国家自然科学基金
0+阅读 · 2014年12月31日
Top
微信扫码咨询专知VIP会员