Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

core(font-size): gather style declaration of type Attributes #9414

Merged
merged 3 commits into from
Jul 24, 2019
Merged

core(font-size): gather style declaration of type Attributes #9414

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6ea2306
core(font-size): gather style declaration of type Attributes
connorjclark Jul 19, 2019
37a0fb5
tests
connorjclark Jul 19, 2019
cf8b433
test
connorjclark Jul 19, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion lighthouse-core/gather/gatherers/seo/font-size.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -162,14 +162,17 @@ function findInheritedCSSRule(inheritedEntries = []) {
* @param {LH.Crdp.CSS.GetMatchedStylesForNodeResponse} matched CSS rules
* @returns {NodeFontData['cssRule']|undefined}
*/
function getEffectiveFontRule({inlineStyle, matchedCSSRules, inherited}) {
function getEffectiveFontRule({attributesStyle, inlineStyle, matchedCSSRules, inherited}) {
// Inline styles have highest priority
if (hasFontSizeDeclaration(inlineStyle)) return {type: 'Inline', ...inlineStyle};

// Rules directly referencing the node come next
const matchedRule = findMostSpecificMatchedCSSRule(matchedCSSRules);
if (matchedRule) return matchedRule;

// Then comes attributes styles (<font size="1">)
brendankenny marked this conversation as resolved.
Show resolved Hide resolved
if (hasFontSizeDeclaration(attributesStyle)) return {type: 'Attributes', ...attributesStyle};

// Finally, find an inherited property if there is one
const inheritedRule = findInheritedCSSRule(inherited);
if (inheritedRule) return inheritedRule;
Expand Down
26 changes: 24 additions & 2 deletions lighthouse-core/test/gather/gatherers/seo/font-size-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -151,6 +151,7 @@ describe('Font size gatherer', () => {

let inlineStyle;
let matchedCSSRules;
let attributesStyle;
let inherited;

beforeEach(() => {
Expand All @@ -167,6 +168,7 @@ describe('Font size gatherer', () => {

inlineStyle = createStyle({id: 1, properties: {'font-size': '1em'}});
matchedCSSRules = [{matchingSelectors: [1], rule: fontRule}];
attributesStyle = {cssProperties: createProps({'font-size': '10px'})};
inherited = [{matchedCSSRules: [{matchingSelectors: [0], rule: userAgentRule}]}];
});

Expand All @@ -184,6 +186,19 @@ describe('Font size gatherer', () => {
});
});

it('should identify attributes styles', () => {
const result = FontSizeGather.getEffectiveFontRule({attributesStyle});
expect(result).toEqual({
cssProperties: [
{
name: 'font-size',
value: '10px',
},
],
type: 'Attributes',
});
});

it('should identify direct CSS rules', () => {
const result = FontSizeGather.getEffectiveFontRule({matchedCSSRules});
expect(result).toEqual({
Expand Down Expand Up @@ -232,12 +247,19 @@ describe('Font size gatherer', () => {
});

it('should respect precendence', () => {
let result = FontSizeGather.getEffectiveFontRule({inlineStyle, matchedCSSRules, inherited});
let result = FontSizeGather.getEffectiveFontRule(
{attributesStyle, inlineStyle, matchedCSSRules, inherited});
expect(result).toMatchObject({type: 'Inline'});
result = FontSizeGather.getEffectiveFontRule({matchedCSSRules, inherited});

result = FontSizeGather.getEffectiveFontRule({attributesStyle, inherited});
expect(result).toMatchObject({type: 'Attributes'});

result = FontSizeGather.getEffectiveFontRule({attributesStyle, matchedCSSRules, inherited});
expect(result.parentRule).toMatchObject({origin: 'regular'});

result = FontSizeGather.getEffectiveFontRule({inherited});
expect(result.parentRule).toMatchObject({origin: 'user-agent'});

result = FontSizeGather.getEffectiveFontRule({});
expect(result).toBe(undefined);
});
Expand Down