HTML_CodeSniffer
HTML_CodeSniffer copied to clipboard
"Point to Element" scrolls to wrong position in iframes
Firefox 66.0.2 Google Chrome 73.0.3683.103
Procedure to reproduce
- Open test1.html below.
- Open HTML CodeSniffer by bookmarklet.
- Open 1st issue. (and click on "Point to Element" to try again)
Expected Behavior
The icon points to the text "line 1" and the scrolltop of iframe body is 0.
Actual Behavior
The icon points to the text "line 1" but the scrolltop of iframe body is 121.
Other information
It seems padding-top:200px;
has something to do with the issue.
test1.html
<html lang="ja">
<title>test1</title>
<style>
body {
padding-top:200px;
}
iframe {
width:100%;
height:300px;
}
</style>
<body>
<iframe src="./test2.html" title="Main Content"></iframe>
</body>
</html>
test2.html
<html lang="ja">
<title>test2</title>
<style>
body {
background-color:#aaa;
color:#bbb;
}
* {
box-sizing:border-box;
font-size:20px;
}
</style>
<body>
<strong>line 1</strong>
<br><strong>line 2</strong>
<br><strong>line 3</strong>
<br><strong>line 4</strong>
<br><strong>line 5</strong>
<br><strong>line 6</strong>
<br><strong>line 7</strong>
<br><strong>line 8</strong>
<br><strong>line 9</strong>
<br><strong>line 11</strong>
<br><strong>line 12</strong>
<br><strong>line 13</strong>
<br><strong>line 14</strong>
<br><strong>line 15</strong>
<br><strong>line 16</strong>
<br><strong>line 17</strong>
<br><strong>line 18</strong>
<br><strong>line 19</strong>
<br><strong>line 20</strong>
</body>
</html>
I can replicate this. The element positioning math needs to be reviewed so that it works correctly for content inside iframes (Roughly in Auditor/HTMLCSAuditor.js line 1978 where targetY is calculated).