audits(font-size): calculate accurate line/column for styles (#9356)

This commit is contained in:
Connor Clark 2019-07-15 16:49:06 -07:00 коммит произвёл GitHub
Родитель e6b3b8ce72
Коммит 31f7142257
Не найден ключ, соответствующий данной подписи
Идентификатор ключа GPG: 4AEE18F83AFDEB23
4 изменённых файлов: 100 добавлений и 10 удалений

7
lighthouse-cli/test/fixtures/seo/seo-tester-styles.css поставляемый Normal file
Просмотреть файл

@ -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