Skip to content

Commit 9cc8637

Browse files
cdoublevcdoublev
committed
Minor things
1 parent 70b510b commit 9cc8637

File tree

12 files changed

+89
-148
lines changed

12 files changed

+89
-148
lines changed

‎__tests__/style.js‎

Lines changed: 39 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -1185,7 +1185,7 @@ describe('-webkit-line-clamp', () => {
11851185
expect(style.webkitLineClamp).toBe('')
11861186
expect(style.cssText).toBe('line-clamp: none;')
11871187

1188-
// All longhands cannot always be represented
1188+
// All longhands cannot be represented
11891189
style.blockEllipsis = 'auto'
11901190
style.continue = '-webkit-legacy'
11911191
expect(style.webkitLineClamp).toBe('')
@@ -1418,10 +1418,7 @@ describe('animation-trigger', () => {
14181418
expect(style.cssText).toBe('animation-trigger: once;')
14191419
style.animationTrigger = 'once --timeline normal normal'
14201420
longhands.forEach(longhand =>
1421-
expect(style[longhand])
1422-
.toBe(longhand === 'animation-trigger-timeline'
1423-
? '--timeline'
1424-
: initial(longhand)))
1421+
expect(style[longhand]).toBe(longhand === 'animation-trigger-timeline' ? '--timeline' : initial(longhand)))
14251422
expect(style.animationTrigger).toBe('--timeline')
14261423
expect(style.cssText).toBe('animation-trigger: --timeline;')
14271424

@@ -1432,10 +1429,7 @@ describe('animation-trigger', () => {
14321429
expect(style.cssText).toBe('animation-trigger: once;')
14331430
style.animationTrigger = 'none'
14341431
longhands.forEach(longhand =>
1435-
expect(style[longhand])
1436-
.toBe(longhand === 'animation-trigger-timeline'
1437-
? 'none'
1438-
: initial(longhand)))
1432+
expect(style[longhand]).toBe(longhand === 'animation-trigger-timeline' ? 'none' : initial(longhand)))
14391433
expect(style.animationTrigger).toBe('none')
14401434
expect(style.cssText).toBe('animation-trigger: none;')
14411435
style.animationTrigger = '--timeline entry'
@@ -1709,16 +1703,6 @@ describe('background', () => {
17091703
expect(style.background).toBe('toggle(none)')
17101704
expect(style.cssText).toBe('background: toggle(none);')
17111705

1712-
// Coordinated value list
1713-
style.background = `${background.replace(' transparent', '')}, ${background}`
1714-
longhands.forEach(longhand =>
1715-
expect(style[longhand]).toBe(
1716-
(longhand === 'background-color' || resetOnly.includes(longhand))
1717-
? initial(longhand)
1718-
: `${initial(longhand)}, ${initial(longhand)}`))
1719-
expect(style.background).toBe('none, none')
1720-
expect(style.cssText).toBe('background: none, none;')
1721-
17221706
// background-position background-size
17231707
style.background = '0% 0% / cover'
17241708
longhands.forEach(longhand =>
@@ -1741,28 +1725,29 @@ describe('background', () => {
17411725
// background-origin background-clip
17421726
style.background = 'padding-box content-box'
17431727
longhands.forEach(longhand =>
1744-
expect(style[longhand])
1745-
.toBe(longhand === 'background-clip'
1746-
? 'content-box'
1747-
: initial(longhand)))
1728+
expect(style[longhand]).toBe(longhand === 'background-clip' ? 'content-box' : initial(longhand)))
17481729
expect(style.background).toBe('content-box')
17491730
expect(style.cssText).toBe('background: content-box;')
17501731
style.background = 'padding-box'
17511732
longhands.forEach(longhand =>
1752-
expect(style[longhand])
1753-
.toBe(longhand === 'background-clip'
1754-
? 'padding-box'
1755-
: initial(longhand)))
1733+
expect(style[longhand]).toBe(longhand === 'background-clip' ? 'padding-box' : initial(longhand)))
17561734
expect(style.background).toBe('padding-box')
17571735
expect(style.cssText).toBe('background: padding-box;')
17581736
style.background = 'border-box border-box'
17591737
longhands.forEach(longhand =>
1760-
expect(style[longhand])
1761-
.toBe(longhand === 'background-origin'
1762-
? 'border-box'
1763-
: initial(longhand)))
1738+
expect(style[longhand]).toBe(longhand === 'background-origin' ? 'border-box' : initial(longhand)))
17641739
expect(style.background).toBe('border-box')
17651740
expect(style.cssText).toBe('background: border-box;')
1741+
1742+
// Coordinated value list
1743+
style.background = `${background.replace(' transparent', '')}, ${background}`
1744+
longhands.forEach(longhand =>
1745+
expect(style[longhand]).toBe(
1746+
(longhand === 'background-color' || resetOnly.includes(longhand))
1747+
? initial(longhand)
1748+
: `${initial(longhand)}, ${initial(longhand)}`))
1749+
expect(style.background).toBe('none, none')
1750+
expect(style.cssText).toBe('background: none, none;')
17661751
})
17671752
test('shorthand reification', () => {
17681753

@@ -1813,6 +1798,8 @@ describe('background', () => {
18131798
expect(style.cssText).toBe('background-position: toggle(initial); background-size: toggle(initial); background-repeat-x: toggle(initial); background-repeat-y: toggle(initial); background-attachment: toggle(initial); background-origin: toggle(initial); background-clip: toggle(initial); background-color: toggle(initial); background-blend-mode: toggle(initial); background-image: toggle(initial);')
18141799
style.background = 'toggle(initial)'
18151800
style.backgroundImage = 'toggle(initial)'
1801+
expect(style.background).toBe('')
1802+
expect(style.cssText).toBe('background-position: ; background-size: ; background-repeat-x: ; background-repeat-y: ; background-attachment: ; background-origin: ; background-clip: ; background-color: ; background-blend-mode: ; background-image: toggle(initial);')
18161803
})
18171804
})
18181805
describe('background-repeat', () => {
@@ -2405,21 +2392,13 @@ describe('box-shadow', () => {
24052392

24062393
// Missing longhand values
24072394
style.boxShadow = 'none'
2408-
expect(style).toHaveLength(longhands.length)
24092395
longhands.forEach(longhand =>
2410-
expect(style[longhand])
2411-
.toBe(longhand === 'box-shadow-color'
2412-
? 'transparent'
2413-
: initial(longhand)))
2396+
expect(style[longhand]).toBe(longhand === 'box-shadow-color' ? 'transparent' : initial(longhand)))
24142397
expect(style.boxShadow).toBe('none')
24152398
expect(style.cssText).toBe('box-shadow: none;')
24162399
style.boxShadow = '0px 0px'
2417-
expect(style).toHaveLength(longhands.length)
24182400
longhands.forEach(longhand =>
2419-
expect(style[longhand])
2420-
.toBe(longhand === 'box-shadow-offset'
2421-
? '0px 0px'
2422-
: initial(longhand)))
2401+
expect(style[longhand]).toBe(longhand === 'box-shadow-offset' ? '0px 0px' : initial(longhand)))
24232402
expect(style.boxShadow).toBe('0px 0px')
24242403
expect(style.cssText).toBe('box-shadow: 0px 0px;')
24252404

@@ -2818,10 +2797,7 @@ describe('font', () => {
28182797
// System font
28192798
style.font = 'caption'
28202799
longhands.forEach(longhand =>
2821-
expect(style[longhand])
2822-
.toBe(resetOnly.includes(longhand)
2823-
? initial(longhand)
2824-
: ''))
2800+
expect(style[longhand]).toBe(resetOnly.includes(longhand) ? initial(longhand) : ''))
28252801
expect(style.font).toBe('caption')
28262802
expect(style.cssText).toBe('font: caption;')
28272803
style.fontStyle = 'italic'
@@ -2873,10 +2849,7 @@ describe('font-variant', () => {
28732849
// none
28742850
style.fontVariant = 'none'
28752851
longhands.forEach(longhand =>
2876-
expect(style[longhand])
2877-
.toBe(longhand === 'font-variant-ligatures'
2878-
? 'none'
2879-
: initial(longhand)))
2852+
expect(style[longhand]).toBe(longhand === 'font-variant-ligatures' ? 'none' : initial(longhand)))
28802853
expect(style.fontVariant).toBe('none')
28812854
expect(style.cssText).toBe('font-variant: none;')
28822855
})
@@ -2988,10 +2961,7 @@ describe('grid', () => {
29882961
style.grid = 'none'
29892962
expect(style).toHaveLength(longhands.length)
29902963
longhands.forEach(longhand =>
2991-
expect(style[longhand])
2992-
.toBe(longhand.startsWith('grid-auto')
2993-
? initial(longhand)
2994-
: 'none'))
2964+
expect(style[longhand]).toBe(longhand.startsWith('grid-auto') ? initial(longhand) : 'none'))
29952965
expect(style.grid).toBe('none')
29962966
expect(style.cssText).toBe('grid: none;')
29972967

@@ -3420,7 +3390,7 @@ describe('line-clamp', () => {
34203390
expect(style.lineClamp).toBe('none')
34213391
expect(style.cssText).toBe('line-clamp: none;')
34223392

3423-
// All longhands cannot always be represented
3393+
// All longhands cannot be represented
34243394
style.maxLines = '1'
34253395
expect(style.lineClamp).toBe('')
34263396
expect(style.cssText).toBe('max-lines: 1; block-ellipsis: none; continue: auto;')
@@ -3612,26 +3582,14 @@ describe('mask', () => {
36123582
expect(style.mask).toBe('none')
36133583
expect(style.cssText).toBe('mask: none;')
36143584

3615-
// Coordinated value list
3616-
style.mask = `${mask}, ${mask}`
3617-
longhands.forEach(longhand =>
3618-
expect(style[longhand]).toBe(resetOnly.includes(longhand)
3619-
? initial(longhand)
3620-
: `${initial(longhand)}, ${initial(longhand)}`))
3621-
expect(style.mask).toBe('none, none')
3622-
expect(style.cssText).toBe('mask: none, none;')
3623-
36243585
// no-clip
36253586
style.mask = 'border-box no-clip'
36263587
longhands.forEach(longhand =>
3627-
expect(style[longhand])
3628-
.toBe(longhand === 'mask-clip'
3629-
? 'no-clip'
3630-
: initial(longhand)))
3588+
expect(style[longhand]).toBe(longhand === 'mask-clip' ? 'no-clip' : initial(longhand)))
36313589
expect(style.mask).toBe('no-clip')
36323590
expect(style.cssText).toBe('mask: no-clip;')
36333591

3634-
// Single <geometry-box>
3592+
// mask-origin mask-clip
36353593
style.mask = 'fill-box'
36363594
longhands.forEach(longhand =>
36373595
expect(style[longhand])
@@ -3640,8 +3598,6 @@ describe('mask', () => {
36403598
: initial(longhand)))
36413599
expect(style.mask).toBe('fill-box')
36423600
expect(style.cssText).toBe('mask: fill-box;')
3643-
3644-
// Same <geometry-box>
36453601
style.mask = 'fill-box fill-box'
36463602
longhands.forEach(longhand =>
36473603
expect(style[longhand])
@@ -3650,6 +3606,15 @@ describe('mask', () => {
36503606
: initial(longhand)))
36513607
expect(style.mask).toBe('fill-box')
36523608
expect(style.cssText).toBe('mask: fill-box;')
3609+
3610+
// Coordinated value list
3611+
style.mask = `${mask}, ${mask}`
3612+
longhands.forEach(longhand =>
3613+
expect(style[longhand]).toBe(resetOnly.includes(longhand)
3614+
? initial(longhand)
3615+
: `${initial(longhand)}, ${initial(longhand)}`))
3616+
expect(style.mask).toBe('none, none')
3617+
expect(style.cssText).toBe('mask: none, none;')
36533618
})
36543619
test('shorthand reification', () => {
36553620

@@ -3719,9 +3684,7 @@ describe('offset', () => {
37193684
expect(style.cssText).toBe('offset: normal;')
37203685
style.offset = 'normal / left'
37213686
longhands.forEach(longhand =>
3722-
style[longhand] = longhand === 'offset-anchor'
3723-
? 'left center'
3724-
: initial(longhand))
3687+
expect(style[longhand]).toBe(longhand === 'offset-anchor' ? 'left center' : initial(longhand)))
37253688
expect(style.offset).toBe('normal / left center')
37263689
expect(style.cssText).toBe('offset: normal / left center;')
37273690
})
@@ -3759,11 +3722,7 @@ describe('outline', () => {
37593722
// Lone `auto` sets both `outline-style` and `outline-color`
37603723
style.outline = 'auto'
37613724
longhands.forEach(longhand =>
3762-
expect(style[longhand])
3763-
.toBe(
3764-
longhand === 'outline-width'
3765-
? initial(longhand)
3766-
: 'auto'))
3725+
expect(style[longhand]).toBe(longhand === 'outline-width' ? initial(longhand) : 'auto'))
37673726
expect(style.outline).toBe('auto')
37683727
expect(style.cssText).toBe('outline: auto;')
37693728
})
@@ -4395,7 +4354,7 @@ describe('text-box', () => {
43954354

43964355
const style = createStyleBlock()
43974356

4398-
// normal
4357+
// Initial longhand values
43994358
style.textBox = 'none auto'
44004359
expect(style).toHaveLength(longhands.length)
44014360
longhands.forEach(longhand => expect(style[longhand]).toBe(initial(longhand)))
@@ -4423,7 +4382,7 @@ describe('text-box', () => {
44234382
expect(style.textBox).toBe('normal')
44244383
expect(style.cssText).toBe('text-box: normal;')
44254384

4426-
// All longhands cannot always be represented
4385+
// All longhands cannot be represented
44274386
style.textBoxEdge = 'text'
44284387
expect(style.textBox).toBe('')
44294388
expect(style.cssText).toBe('text-box-trim: none; text-box-edge: text;')

‎__tests__/stylesheet.js‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,12 @@ import {
55
INSERT_INVALID_IMPORT_ERROR,
66
INVALID_FONT_FEATURE_VALUE_ERROR,
77
INVALID_NAMESPACE_STATE_ERROR,
8+
INVALID_RULE_ERROR,
89
INVALID_RULE_INDEX_ERROR,
910
INVALID_RULE_POSITION_ERROR,
10-
INVALID_RULE_SYNTAX_ERROR,
1111
MISSING_RULE_ERROR,
12-
SET_INVALID_KEY_TEXT_ERROR,
13-
SET_INVALID_NAME_ERROR,
12+
SET_INVALID_KEYFRAME_SELECTOR_ERROR,
13+
SET_INVALID_KEYFRAMES_NAME_ERROR,
1414
UPDATE_LOCKED_STYLESHEET_ERROR,
1515
} from '../lib/error.js'
1616
import {
@@ -150,10 +150,10 @@ describe('CSSStyleSheet.insertRule(), CSSStyleSheet.deleteRule()', () => {
150150
it('throws an error when trying to insert an invalid rule according to the CSS grammar', () => {
151151
const styleSheet = createStyleSheet()
152152
expect(() => styleSheet.insertRule(' ')).toThrow(MISSING_RULE_ERROR)
153-
expect(() => styleSheet.insertRule('@charset "utf-8";')).toThrow(INVALID_RULE_SYNTAX_ERROR)
154-
expect(() => styleSheet.insertRule('@top-left {}')).toThrow(INVALID_RULE_SYNTAX_ERROR)
155-
expect(() => styleSheet.insertRule('@media;')).toThrow(INVALID_RULE_SYNTAX_ERROR)
156-
expect(() => styleSheet.insertRule('style;')).toThrow(INVALID_RULE_SYNTAX_ERROR)
153+
expect(() => styleSheet.insertRule('@charset "utf-8";')).toThrow(INVALID_RULE_ERROR)
154+
expect(() => styleSheet.insertRule('@top-left {}')).toThrow(INVALID_RULE_ERROR)
155+
expect(() => styleSheet.insertRule('@media;')).toThrow(INVALID_RULE_ERROR)
156+
expect(() => styleSheet.insertRule('style;')).toThrow(INVALID_RULE_ERROR)
157157
expect(() => styleSheet.insertRule('style {};')).toThrow(EXTRA_RULE_ERROR)
158158
})
159159
it('throws an error when trying to insert @import in a constructed style sheet', () => {
@@ -599,7 +599,7 @@ describe('CSSKeyframeRule', () => {
599599
rule.keyText = 'from'
600600
expect(rule.keyText).toBe('0%')
601601
expect(rule.cssText).toBe('0% { color: green; }')
602-
expect(() => rule.keyText = '101%').toThrow(SET_INVALID_KEY_TEXT_ERROR)
602+
expect(() => rule.keyText = '101%').toThrow(SET_INVALID_KEYFRAME_SELECTOR_ERROR)
603603
expect(CSSKeyframeProperties.is(rule.style)).toBeTruthy()
604604
})
605605
})
@@ -622,7 +622,7 @@ describe('CSSKeyframesRule', () => {
622622
rule.name = '\n'
623623
expect(rule.name).toBe('\\a')
624624
expect(rule.cssText).toBe('@keyframes \\a { 100% {} }')
625-
expect(() => rule.name = '').toThrow(SET_INVALID_NAME_ERROR)
625+
expect(() => rule.name = '').toThrow(SET_INVALID_KEYFRAMES_NAME_ERROR)
626626
})
627627
test('methods', () => {
628628

@@ -637,7 +637,7 @@ describe('CSSKeyframesRule', () => {
637637
expect(rule.findRule('100%')).toBe(keyframes[0])
638638
expect(keyframes).toHaveLength(1)
639639
expect(keyframes[0].style.color).toBe('orange')
640-
expect(() => rule.appendRule('invalid')).toThrow(INVALID_RULE_SYNTAX_ERROR)
640+
expect(() => rule.appendRule('invalid')).toThrow(INVALID_RULE_ERROR)
641641

642642
rule.appendRule('to { color: green }')
643643
const to = keyframes[1]
@@ -950,10 +950,10 @@ describe('CSSStyleRule', () => {
950950
expect(() => rule.insertRule('style {}', -1)).toThrow(INVALID_RULE_INDEX_ERROR)
951951
expect(() => rule.insertRule(' ')).toThrow(MISSING_RULE_ERROR)
952952
expect(() => rule.insertRule('style {};')).toThrow(EXTRA_RULE_ERROR)
953-
expect(() => rule.insertRule('style;')).toThrow(INVALID_RULE_SYNTAX_ERROR)
954-
expect(() => rule.insertRule('@charset "utf-8";')).toThrow(INVALID_RULE_SYNTAX_ERROR)
955-
expect(() => rule.insertRule('@import "./global.css";')).toThrow(INVALID_RULE_SYNTAX_ERROR)
956-
expect(() => rule.insertRule('@media screen;')).toThrow(INVALID_RULE_SYNTAX_ERROR)
953+
expect(() => rule.insertRule('style;')).toThrow(INVALID_RULE_ERROR)
954+
expect(() => rule.insertRule('@charset "utf-8";')).toThrow(INVALID_RULE_ERROR)
955+
expect(() => rule.insertRule('@import "./global.css";')).toThrow(INVALID_RULE_ERROR)
956+
expect(() => rule.insertRule('@media screen;')).toThrow(INVALID_RULE_ERROR)
957957

958958
rule.insertRule('@media print {}')
959959

‎doc/parse/README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@ Tokens are either preserved as "primitive" component values, or consumed into st
8484
>
8585
> Consume a token from `input`, and let `function` be a new function with its name equal the returned token’s value, and a value set to an empty list.
8686
87-
`CSSStyleDeclaration` does not store CSS declarations for shorthands. The result from parsing a shorthand value must be expanded to a CSS declaration for each of its longhands. CSSOM is [rather hand-wavy](https://github.com/w3c/csswg-drafts/issues/6451) about this in the procedure for `CSSStyleDeclaration.setProperty()` and `CSSStyleDeclaration.cssText`.
87+
`CSSStyleDeclaration` does not store CSS declarations for shorthands. The result of parsing a shorthand value must be expanded to a CSS declaration for each of its longhands. CSSOM is [rather hand-wavy](https://github.com/w3c/csswg-drafts/issues/6451) about this in the procedure for `CSSStyleDeclaration.setProperty()` and `CSSStyleDeclaration.cssText`.
8888

8989
---
9090

‎doc/serialize/README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ CSS values are currently represented either as a `List` or a plain object, with
4040

4141
*Serialize a CSS value* accepts a single longhand declaration, or a list of declarations for a shorthand that must be reduced into a single declaration. Then the declaration value is represented as a list (plain array) of CSS component values (step 2), simplified according to the shortest serialization principle.
4242

43-
`serializeCSSComponentValueList()` is a custom abstraction of steps 4 to 5 that can be used by other specific serialization functions, and serializes the provided list ignoring its `types` and using its `separator` (default: whitespace), whereas `serializeCSSComponentValue()` is the implementation of *serialize a CSS component value*, and run any specific serialization function according to its `types`:
43+
`serializeComponentValueList()` is a custom abstraction of steps 4 to 5 that can be used by other specific serialization functions, and serializes the provided list ignoring its `types` and using its `separator` (default: whitespace), whereas `serializeComponentValue()` is the implementation of *serialize a CSS component value*, and run any specific serialization function according to its `types`:
4444

4545
> 3. Remove any `<whitespace-token>`s from components.
4646
> 4. Replace each component value in components with the result of invoking *serialize a CSS component value*.

‎lib/cssom/CSSKeyframeRule-impl.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11

2-
import { SET_INVALID_KEY_TEXT_ERROR, create as error } from '../error.js'
2+
import { SET_INVALID_KEYFRAME_SELECTOR_ERROR, create as error } from '../error.js'
33
import CSSKeyframeProperties from './CSSKeyframeProperties.js'
44
import CSSRuleImpl from './CSSRule-impl.js'
55
import { isFailure } from '../utils/value.js'
@@ -52,7 +52,7 @@ export default class CSSKeyframeRuleImpl extends CSSRuleImpl {
5252
set keyText(selector) {
5353
selector = parseGrammar(selector, '<keyframe-selector>#', this)
5454
if (isFailure(selector)) {
55-
throw error(SET_INVALID_KEY_TEXT_ERROR)
55+
throw error(SET_INVALID_KEYFRAME_SELECTOR_ERROR)
5656
}
5757
this._keyText = selector
5858
}

0 commit comments

Comments
 (0)