-
-
Notifications
You must be signed in to change notification settings - Fork 69
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix: handle size/position/attachment in background
Fixes [#3169](jsdom/jsdom#3169).
- Loading branch information
Showing
3 changed files
with
223 additions
and
25 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,19 +1,161 @@ | ||
| 'use strict'; | ||
|
|
||
| var shorthandSetter = require('../parsers').shorthandSetter; | ||
| var shorthandGetter = require('../parsers').shorthandGetter; | ||
|
|
||
| var shorthand_for = { | ||
| 'background-color': require('./backgroundColor'), | ||
| 'background-image': require('./backgroundImage'), | ||
| 'background-repeat': require('./backgroundRepeat'), | ||
| 'background-attachment': require('./backgroundAttachment'), | ||
| 'background-position': require('./backgroundPosition'), | ||
| const { shorthandGetter, shorthandSetter, splitTokens, ws } = require('../parsers'); | ||
| const { parse: parseBackgroundAttachment } = require('./backgroundAttachment'); | ||
| const { parse: parseBackgroundColor } = require('./backgroundColor'); | ||
| const { parse: parseBackgroundImage } = require('./backgroundImage'); | ||
| const { parse: parseBackgroundPosition } = require('./backgroundPosition'); | ||
| const { parse: parseBackgroundSize } = require('./backgroundSize'); | ||
| const { parse: parseBackgroundRepeat } = require('./backgroundRepeat'); | ||
| const { parse: parseBackgroundOrigin } = require('./backgroundOrigin'); | ||
| const { parse: parseBackgroundClip } = require('./backgroundClip'); | ||
|
|
||
| const before = { | ||
| 'background-color': '', | ||
| 'background-image': '', | ||
| 'background-position': '', | ||
| }; | ||
| const after = { | ||
| 'background-size': '', | ||
| 'background-repeat': '', | ||
| 'background-attachment': '', | ||
| 'background-origin': '', | ||
| 'background-clip': '', | ||
| }; | ||
| const separatorRegExp = new RegExp(`${ws}/${ws}`); | ||
| const shorthandFor = [before, after]; | ||
|
|
||
| function shorthandParser(v, shorthandFor) { | ||
| if (v.toLowerCase() === 'inherit') { | ||
| return {}; | ||
| } | ||
|
|
||
| const longhands = { ...shorthandFor }; | ||
| if (v === '') { | ||
| return longhands; | ||
| } | ||
|
|
||
| let [[argsBefore, argsAfter]] = splitTokens(v, separatorRegExp); | ||
|
|
||
| [argsBefore] = splitTokens(argsBefore); | ||
|
|
||
| const { length: argsBeforeLength } = argsBefore; | ||
| let positionArg = []; | ||
| let positionArgIndex = 0; | ||
| let i = 0; | ||
| for (; i < argsBeforeLength; i++) { | ||
| const arg = argsBefore[i]; | ||
| const color = parseBackgroundColor(arg); | ||
| if (color) { | ||
| if (longhands['background-color']) { | ||
| return undefined; | ||
| } | ||
| longhands['background-color'] = color; | ||
| continue; | ||
| } | ||
| const image = parseBackgroundImage(arg); | ||
| if (image) { | ||
| if (longhands['background-image']) { | ||
| return undefined; | ||
| } | ||
| longhands['background-image'] = image; | ||
| continue; | ||
| } | ||
| // First or consecutive <position> | ||
| if (positionArg.length === 0 || positionArgIndex - i === -1) { | ||
| positionArgIndex = i; | ||
| positionArg.push(arg); | ||
| continue; | ||
| } | ||
| return undefined; | ||
| } | ||
| if (!(longhands['background-color'] || longhands['background-image'])) { | ||
| return undefined; | ||
| } | ||
| if ((positionArg = positionArg.join(' '))) { | ||
| const position = parseBackgroundPosition(positionArg); | ||
| if (position === undefined) { | ||
| return undefined; | ||
| } | ||
| longhands['background-position'] = position; | ||
| } | ||
|
|
||
| if (argsAfter) { | ||
| [argsAfter] = splitTokens(argsAfter); | ||
|
|
||
| const { length: argsAfterLength } = argsAfter; | ||
| const sizeBoxArgs = []; | ||
| let sizeBoxArgIndex = 0; | ||
| for (let i = 0; i < argsAfterLength; i++) { | ||
| const arg = argsAfter[i]; | ||
| const repeat = parseBackgroundRepeat(arg); | ||
| if (repeat) { | ||
| if (longhands['background-repeat']) { | ||
| return undefined; | ||
| } | ||
| longhands['background-repeat'] = repeat; | ||
| continue; | ||
| } | ||
| const attachment = parseBackgroundAttachment(arg); | ||
| if (attachment) { | ||
| if (longhands['background-attachment']) { | ||
| return undefined; | ||
| } | ||
| longhands['background-attachment'] = attachment; | ||
| continue; | ||
| } | ||
| // First or consecutive <box|size> | ||
| if (sizeBoxArgs.length === 0 || sizeBoxArgs.length === 2 || sizeBoxArgIndex - i === -1) { | ||
| sizeBoxArgIndex = i; | ||
| sizeBoxArgs.push(arg); | ||
| continue; | ||
| } | ||
| return undefined; | ||
| } | ||
|
|
||
| const { length: sizeBoxArgsLength } = sizeBoxArgs; | ||
| if (sizeBoxArgsLength > 4) { | ||
| return undefined; | ||
| } | ||
| if (sizeBoxArgsLength > 0) { | ||
| const [sizeX, sizeY = '', origin = '', clip = ''] = sizeBoxArgs; | ||
| let parsedSize = parseBackgroundSize(`${sizeX}${sizeY ? ` ${sizeY}` : ''}`); | ||
| let parsedOrigin = parseBackgroundOrigin(origin); | ||
| let parsedClip = parseBackgroundClip(clip); | ||
| if (parsedSize !== undefined && parsedOrigin !== undefined && parsedClip !== undefined) { | ||
| longhands['background-size'] = parsedSize; | ||
| longhands['background-origin'] = parsedOrigin; | ||
| longhands['background-clip'] = parsedClip; | ||
| return longhands; | ||
| } | ||
| parsedSize = parseBackgroundSize(`${origin}${clip ? ` ${clip}` : ''}`); | ||
| parsedOrigin = parseBackgroundOrigin(sizeX); | ||
| parsedClip = parseBackgroundOrigin(sizeY); | ||
| if (parsedSize !== undefined && parsedOrigin !== undefined && parsedClip !== undefined) { | ||
| longhands['background-size'] = parsedSize; | ||
| longhands['background-origin'] = parsedOrigin; | ||
| longhands['background-clip'] = parsedClip; | ||
| return longhands; | ||
| } | ||
| parsedSize = parseBackgroundSize(sizeX); | ||
| parsedOrigin = parseBackgroundOrigin(sizeY); | ||
| parsedClip = parseBackgroundOrigin(origin); | ||
| if (parsedSize !== undefined && parsedOrigin !== undefined && parsedClip !== undefined) { | ||
| longhands['background-size'] = parsedSize; | ||
| longhands['background-origin'] = parsedOrigin; | ||
| longhands['background-clip'] = parsedClip; | ||
| return longhands; | ||
| } | ||
| return undefined; | ||
| } | ||
| } | ||
|
|
||
| return longhands; | ||
| } | ||
|
|
||
| module.exports.definition = { | ||
| set: shorthandSetter('background', shorthand_for), | ||
| get: shorthandGetter('background', shorthand_for), | ||
| set: shorthandSetter('background', shorthandFor, shorthandParser), | ||
| get: shorthandGetter('background', shorthandFor), | ||
| enumerable: true, | ||
| configurable: true, | ||
| }; |