audits(font-size): calculate accurate line/column for styles (#9356)
This commit is contained in:
Connor Clark
GitHub
Родитель
e6b3b8ce72
Коммит
31f7142257
|
|
@ -0,0 +1,7 @@
|
|||
/** some filler */
|
||||
|
||||
.small-4 {
|
||||
font-size: 6px;
|
||||
}
|
||||
|
||||
/*# sourceURL=seo-tester-styles-magic.css */
|
||||
|
|
@ -25,6 +25,15 @@
|
|||
font-size: 11px;
|
||||
}
|
||||
</style>
|
||||
<style> /* some filler to offset things */ .small-2 { font-size: 11px; }</style>
|
||||
<style>
|
||||
/* some filler to offset things */
|
||||
.small-3 {
|
||||
font-size: 6px;
|
||||
}
|
||||
/*# sourceURL=seo-tester-inline-magic.css */
|
||||
</style>
|
||||
<link rel="stylesheet" href="seo-tester-styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<!-- PASS(hreflang): should ignore links in the body -->
|
||||
|
|
@ -42,7 +51,11 @@
|
|||
|
||||
<h2>Small text</h2>
|
||||
<!-- PASS(font-size): amount of illegible text is below the 60% threshold -->
|
||||
<p class='small'> 1 </p>
|
||||
<!-- font-size items are ordered by text length, so force an order with filler for stable expectations. -->
|
||||
<p class='small'> 1.... </p>
|
||||
<p class='small-2'> 2... </p>
|
||||
<p class='small-3'> 3.. </p>
|
||||
<p class='small-4'> 4. </p>
|
||||
<h6>2</h6>
|
||||
<font size="1">3<b>4</b></font>
|
||||
<p style='font-size:10px'> 5 </p>
|
||||
|
|
|
|||
|
|
@ -117,9 +117,65 @@ module.exports = [
|
|||
'font-size': {
|
||||
score: 1,
|
||||
details: {
|
||||
items: {
|
||||
length: 6,
|
||||
items: [
|
||||
{
|
||||
source: /seo-tester\.html.+:24:12$/,
|
||||
selector: '.small',
|
||||
fontSize: '11px',
|
||||
},
|
||||
{
|
||||
source: /seo-tester\.html.+:28:55$/,
|
||||
selector: '.small-2',
|
||||
fontSize: '11px',
|
||||
},
|
||||
{
|
||||
source: /seo-tester-inline-magic\.css:3:14$/,
|
||||
selector: '.small-3',
|
||||
fontSize: '6px',
|
||||
},
|
||||
{
|
||||
source: /seo-tester-styles-magic\.css:3:10$/,
|
||||
selector: '.small-4',
|
||||
fontSize: '6px',
|
||||
},
|
||||
{
|
||||
source: 'User Agent Stylesheet',
|
||||
selector: 'h6',
|
||||
fontSize: '10px',
|
||||
},
|
||||
{
|
||||
source: /seo-tester\.html.+$/,
|
||||
selector: {
|
||||
type: 'node',
|
||||
selector: 'body',
|
||||
snippet: '<font size="1">',
|
||||
},
|
||||
fontSize: '10px',
|
||||
},
|
||||
{
|
||||
source: /seo-tester\.html.+$/,
|
||||
selector: {
|
||||
type: 'node',
|
||||
selector: 'font',
|
||||
snippet: '<b>',
|
||||
},
|
||||
fontSize: '10px',
|
||||
},
|
||||
{
|
||||
source: /seo-tester\.html.+$/,
|
||||
selector: {
|
||||
type: 'node',
|
||||
selector: 'body',
|
||||
snippet: '<p style="font-size:10px">',
|
||||
},
|
||||
fontSize: '10px',
|
||||
},
|
||||
{
|
||||
source: 'Legible text',
|
||||
selector: '',
|
||||
fontSize: '≥ 12px',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
'link-text': {
|
||||
|
|
|
|||
|
|
@ -156,13 +156,27 @@ function findStyleRuleSource(baseURL, styleDeclaration, node) {
|
|||
const range = styleDeclaration.range;
|
||||
source = `${url.href}`;
|
||||
|
||||
// !!range == has defined location in a source file (.css or .html)
|
||||
if (range) {
|
||||
// `stylesheet` can be either an external file (stylesheet.startLine will always be 0),
|
||||
// or a <style> block (stylesheet.startLine will vary)
|
||||
const absoluteStartLine = range.startLine + stylesheet.startLine + 1;
|
||||
const absoluteStartColumn = range.startColumn + stylesheet.startColumn + 1;
|
||||
let line = range.startLine + 1;
|
||||
let column = range.startColumn;
|
||||
|
||||
source += `:${absoluteStartLine}:${absoluteStartColumn}`;
|
||||
// Add the startLine/startColumn of the <style> element to the range, if stylesheet
|
||||
// is inline.
|
||||
// Always use the rule's location if a sourceURL magic comment is
|
||||
// present (`hasSourceURL` is true) - this makes the line/col relative to the start
|
||||
// of the style tag, which makes them relevant when the "file" is open in DevTool's
|
||||
// Sources panel.
|
||||
const addHtmlLocationOffset = stylesheet.isInline && !stylesheet.hasSourceURL;
|
||||
if (addHtmlLocationOffset) {
|
||||
line += stylesheet.startLine;
|
||||
// The column the stylesheet begins on is only relevant if the rule is declared on the same line.
|
||||
if (range.startLine === 0) {
|
||||
column += stylesheet.startColumn;
|
||||
}
|
||||
}
|
||||
|
||||
source += `:${line}:${column}`;
|
||||
}
|
||||
} else {
|
||||
// dynamically injected to page
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче