Skip to content

Commit ee5bba6

Browse files
cdoublevcdoublev
committed
Minor fixes and refactoring
1 parent 00ce25a commit ee5bba6

4 files changed

Lines changed: 124 additions & 76 deletions

File tree

‎__tests__/style.js‎

Lines changed: 53 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ describe('CSSStyleDeclaration', () => {
5555
const { properties: { aliases, mappings } } = compatibility
5656
const names = [...aliases.keys(), ...mappings.keys(), ...Object.keys(properties)]
5757

58-
// Camel/kebab/pascal cased attributes
58+
// Camel/kebab/pascal cased attribute
5959
names.forEach(property => {
6060

6161
if (property === '--*') {
@@ -330,15 +330,15 @@ describe('CSSFontFaceDescriptors', () => {
330330
expect(style.fontWeight).toBe('')
331331

332332
const invalid = [
333-
// Substitution accepted in element-dependent context
333+
// Element-dependent substitution
334334
['attr(name)'],
335335
['random-item(--key, 1)', 'random-item(--key, 1%)'],
336-
['mix(50%, 1, 1)', 'mix(50%, 1%, 1%)'],
337-
['toggle(1, 1)', 'toggle(1%, 1%)'],
336+
['mix(0, 1, 1)', 'mix(0, 1%, 1%)'],
337+
['toggle(1)', 'toggle(1%)'],
338338
['calc-mix(0, 1, 1)', 'calc-mix(0, 1%, 1%)'],
339339
['random(1, 1)', 'random(1%, 1%)'],
340340
['sibling-count()', 'calc(1% * sibling-count())'],
341-
// Substitution accepted in cascade-dependent context
341+
// Cascade-dependent substitution
342342
['var(--custom)'],
343343
['initial'],
344344
]
@@ -359,7 +359,7 @@ describe('CSSFontFaceDescriptors', () => {
359359
expect(style.fontStretch).toBe('condensed')
360360
expect(style.fontWidth).toBe('condensed')
361361

362-
// Substitution accepted in any context
362+
// Dependency-free substitution
363363
style.fontWeight = 'env(name, attr(name))'
364364
style.sizeAdjust = 'env(name, attr(name))'
365365
expect(style.fontWeight).toBe('env(name, attr(name))')
@@ -373,7 +373,7 @@ describe('CSSFontFaceDescriptors', () => {
373373
expect(style.fontWeight).toBe('calc(1)')
374374
expect(style.sizeAdjust).toBe('calc(1%)')
375375

376-
// Specific serialization rules
376+
// Specific serialization rule
377377
style.ascentOverride = '1% 1%'
378378
expect(style.ascentOverride).toBe('1%')
379379
style.descentOverride = '1% 1%'
@@ -420,27 +420,27 @@ describe('CSSKeyframeProperties', () => {
420420
style.setProperty('--custom', 'green')
421421
expect(style.getPropertyValue('--custom')).toBe('green')
422422

423-
// Substitution accepted in any context
423+
// Dependency-free substitution
424424
style.fontWeight = 'env(name)'
425425
expect(style.fontWeight).toBe('env(name)')
426426
style.fontWeight = 'first-valid(1)'
427427
expect(style.fontWeight).toBe('first-valid(1)')
428428
style.fontWeight = 'calc(progress(1 from 0 to 1))'
429429
expect(style.fontWeight).toBe('calc(1)')
430430

431-
// Substitution accepted in element-dependent context
431+
// Element-dependent substitution
432432
style.fontWeight = 'attr(name)'
433433
expect(style.fontWeight).toBe('attr(name)')
434434
style.fontWeight = 'random-item(--key, 1)'
435435
expect(style.fontWeight).toBe('random-item(--key, 1)')
436-
style.fontWeight = 'mix(50%, 1, 1)'
437-
expect(style.fontWeight).toBe('mix(50%, 1, 1)')
438-
style.fontWeight = 'toggle(1, 1)'
439-
expect(style.fontWeight).toBe('toggle(1, 1)')
436+
style.fontWeight = 'mix(0, 1, 1)'
437+
expect(style.fontWeight).toBe('mix(0, 1, 1)')
438+
style.fontWeight = 'toggle(1)'
439+
expect(style.fontWeight).toBe('toggle(1)')
440440
style.fontWeight = 'calc-mix(0, random(1, 1), sibling-count())'
441441
expect(style.fontWeight).toBe('calc-mix(0, random(1, 1), sibling-count())')
442442

443-
// Substitution accepted in cascade-dependent context
443+
// Cascade-dependent substitution
444444
style.fontWeight = 'var(--custom)'
445445
expect(style.fontWeight).toBe('var(--custom)')
446446
style.fontWeight = 'initial'
@@ -458,12 +458,12 @@ describe('CSSMarginDescriptors', () => {
458458
expect(style.top).toBeUndefined()
459459

460460
const invalid = [
461-
// Substitution accepted in element-dependent context
461+
// Element-dependent substitution
462462
'attr(name)',
463463
'env(attr(name))',
464464
'random-item(--key, 1)',
465-
'mix(50%, 1, 1)',
466-
'toggle(1, 1)',
465+
'mix(0, 1, 1)',
466+
'toggle(1)',
467467
'calc-mix(0, 1, 1)',
468468
'random(1, 1)',
469469
'sibling-count()',
@@ -486,15 +486,15 @@ describe('CSSMarginDescriptors', () => {
486486
expect(style.fontWeight).toBe('1')
487487
expect(style.getPropertyPriority('font-weight')).toBe('important')
488488

489-
// Substitution accepted in any context
489+
// Dependency-free substitution
490490
style.fontWeight = 'env(name)'
491491
expect(style.fontWeight).toBe('env(name)')
492492
style.fontWeight = 'first-valid(1)'
493493
expect(style.fontWeight).toBe('first-valid(1)')
494494
style.fontWeight = 'calc(progress(1 from 0 to 1))'
495495
expect(style.fontWeight).toBe('calc(1)')
496496

497-
// Substitution accepted in cascade-dependent context
497+
// Cascade-dependent substitution
498498
style.fontWeight = 'var(--custom)'
499499
expect(style.fontWeight).toBe('var(--custom)')
500500
style.fontWeight = 'initial'
@@ -512,11 +512,11 @@ describe('CSSPageDescriptors', () => {
512512
expect(style.top).toBeUndefined()
513513

514514
const invalid = [
515-
// Substitution accepted in element-dependent context
515+
// Element-dependent substitution
516516
['attr(name)'],
517517
['random-item(--key, 1)', 'random-item(--key, 1px)'],
518-
['mix(50%, 1, 1)', 'mix(50%, 1px, 1px)'],
519-
['toggle(1, 1)', 'toggle(1px, 1px)'],
518+
['mix(0, 1, 1)', 'mix(0, 1px, 1px)'],
519+
['toggle(1)', 'toggle(1px)'],
520520
['calc-mix(0, 1, 1)', 'calc-mix(0, 1px, 1px)'],
521521
['random(1, 1)', 'random(1px, 1px)'],
522522
['sibling-count()', 'calc(1px * sibling-count())'],
@@ -541,7 +541,7 @@ describe('CSSPageDescriptors', () => {
541541
expect(style.size).toBe('1px')
542542
expect(style.getPropertyPriority('size')).toBe('important')
543543

544-
// Substitution accepted in any context
544+
// Dependency-free substitution
545545
style.fontWeight = 'env(name, attr(name))'
546546
style.size = 'env(name, attr(name))'
547547
expect(style.fontWeight).toBe('env(name, attr(name))')
@@ -555,7 +555,7 @@ describe('CSSPageDescriptors', () => {
555555
expect(style.fontWeight).toBe('calc(1)')
556556
expect(style.size).toBe('calc(1px)')
557557

558-
// Substitution accepted in cascade-dependent context
558+
// Cascade-dependent substitution
559559
style.fontWeight = 'var(--custom)'
560560
style.size = 'var(--custom)'
561561
expect(style.fontWeight).toBe('var(--custom)')
@@ -565,7 +565,7 @@ describe('CSSPageDescriptors', () => {
565565
expect(style.fontWeight).toBe('initial')
566566
expect(style.size).toBe('initial')
567567

568-
// Specific serialization rules
568+
// Specific serialization rule
569569
style.size = '1px 1px'
570570
expect(style.size).toBe('1px')
571571
})
@@ -592,27 +592,27 @@ describe('CSSPositionTryDescriptors', () => {
592592

593593
const style = CSSPositionTryDescriptors.create(globalThis, undefined, { parentRule: positionTryRule })
594594

595-
// Substitution accepted in any context
595+
// Dependency-free substitution
596596
style.top = 'env(name)'
597597
expect(style.top).toBe('env(name)')
598598
style.top = 'first-valid(1px)'
599599
expect(style.top).toBe('first-valid(1px)')
600600
style.top = 'calc(1px * progress(1 from 0 to 1))'
601601
expect(style.top).toBe('calc(1px)')
602602

603-
// Substitution accepted in element-dependent context
603+
// Element-dependent substitution
604604
style.top = 'attr(name)'
605605
expect(style.top).toBe('attr(name)')
606606
style.top = 'random-item(--key, 1px)'
607607
expect(style.top).toBe('random-item(--key, 1px)')
608-
style.top = 'mix(50%, 1px, 1px)'
609-
expect(style.top).toBe('mix(50%, 1px, 1px)')
610-
style.top = 'toggle(1px, 1px)'
611-
expect(style.top).toBe('toggle(1px, 1px)')
608+
style.top = 'mix(0, 1px, 1px)'
609+
expect(style.top).toBe('mix(0, 1px, 1px)')
610+
style.top = 'toggle(1px)'
611+
expect(style.top).toBe('toggle(1px)')
612612
style.top = 'calc-mix(sibling-count(), random(1px, 1px), 1px)'
613613
expect(style.top).toBe('calc-mix(sibling-count(), random(1px, 1px), 1px)')
614614

615-
// Substitution accepted in cascade-dependent context
615+
// Cascade-dependent substitution
616616
style.top = 'var(--custom)'
617617
expect(style.top).toBe('var(--custom)')
618618
style.top = 'initial'
@@ -635,7 +635,7 @@ describe('arbitrary substitution', () => {
635635
const invalid = [
636636
'attr(name, attr())',
637637
'env(name, env())',
638-
'random-item(1, random-item())',
638+
'random-item(--key, random-item())',
639639
'var(--custom, var())',
640640
]
641641
invalid.forEach(input => {
@@ -649,17 +649,17 @@ describe('arbitrary substitution', () => {
649649
// Valid at parse time
650650
['unknown(attr(name))'],
651651
['unknown(env(name))'],
652-
['unknown(random-item(--key, 1, 1))'],
652+
['unknown(random-item(--key, 1))'],
653653
['unknown(var(--custom))'],
654654
// Nested inside itself
655655
['attr(name, attr(name))'],
656656
['env(name, env(name))'],
657-
['random-item(--key, random-item(--key, 1, 1), 1)'],
657+
['random-item(--key, random-item(--key, 1))'],
658658
['var(--custom, var(--custom))'],
659659
// Serialize the list of tokens
660660
[' /**/ attr( name, /**/ 1e0 /**/ ', 'attr(name, 1)'],
661661
[' /**/ env( name, /**/ 1e0 /**/ ', 'env(name, 1)'],
662-
[' /**/ random-item( --key, /**/ 1, 1e0 /**/ ', 'random-item(--key, 1, 1)'],
662+
[' /**/ random-item( --key, /**/ 1e0 /**/ ', 'random-item(--key, 1)'],
663663
[' /**/ var( --custom, /**/ 1e0 /**/ ', 'var(--custom, 1)'],
664664
// Non-strict comma-containing production
665665
['var(--custom,,)'],
@@ -677,17 +677,17 @@ describe('<whole-value>', () => {
677677
const invalid = [
678678
// Not the <whole-value>
679679
['first-valid(0) 0', 'margin'],
680-
['mix(0%, 0, 0) 0', 'margin'],
681-
['mix(0%, 0, first-valid(0) 0)', 'margin'],
682-
['toggle(0, 0) 0', 'margin'],
683-
['toggle(0, first-valid(0) 0)', 'margin'],
680+
['mix(0, 0, 0) 0', 'margin'],
681+
['mix(0, 0, first-valid(0) 0)', 'margin'],
682+
['toggle(0) 0', 'margin'],
683+
['toggle(first-valid(0) 0)', 'margin'],
684684
// Invalid <whole-value> argument for the property
685-
['mix(0%, mix(0%, invalid, red), red)', 'color'],
686-
['toggle(red, invalid)', 'color'],
685+
['mix(0, mix(0, invalid, red), red)', 'color'],
686+
['toggle(invalid)', 'color'],
687687
// mix() for non-animatable property
688-
['mix(0%, 0s, 0s)', 'animation-duration'],
688+
['mix(0, 1s, 1s)', 'animation-duration'],
689689
// toggle() nested inside itself
690-
['toggle(0, toggle(0, 0))', 'opacity'],
690+
['toggle(toggle(1))', 'opacity'],
691691
]
692692
invalid.forEach(([substitution, property]) => {
693693
style.setProperty(property, substitution)
@@ -696,24 +696,23 @@ describe('<whole-value>', () => {
696696
})
697697
test('valid', () => {
698698
const style = createStyleBlock()
699-
// TODO: add support for comma-containing productions nested in {}
700699
const valid = [
701700
// Serialize the list of tokens
702-
[' /**/ first-valid( 0, /**/ 1e0 /**/ ', 'first-valid(0, 1)', 'opacity'],
703-
// [' /**/ mix( 0%, 0, /**/ 1e0 /**/ ', 'mix(0%, 0, 1)', 'opacity'],
704-
// [' /**/ toggle( 0, /**/ 1e0 /**/ ', 'toggle(0, 1)', 'opacity'],
701+
[' /**/ first-valid( /**/ 1e0 /**/ ', 'first-valid(1)', 'opacity'],
702+
[' /**/ mix( 0, 1, /**/ 1e0 /**/ ', 'mix(0, 1, 1)', 'opacity'],
703+
[' /**/ toggle( /**/ 1e0 /**/ ', 'toggle(1)', 'opacity'],
705704
// Nested inside itself
706705
['first-valid(toggle(first-valid(1)))', 'first-valid(toggle(first-valid(1)))', 'opacity'],
707-
// ['mix(0%, 1, toggle(mix(0%, 1, 1))', 'mix(0%, 0, mix(0%, 1, 1))', 'opacity'],
706+
['mix(0, 1, toggle(mix(0, 1, 1)))', 'mix(0, 1, toggle(mix(0, 1, 1)))', 'opacity'],
708707
// Omitted value
709-
['mix(0%,,)', 'mix(0%,,)', '--custom'],
708+
['mix(0,,)', 'mix(0,,)', '--custom'],
710709
['toggle(,)', 'toggle(,)', '--custom'],
711710
// Priority to the declaration value range
712711
['first-valid(1) 1', 'first-valid(1) 1', '--custom'],
713-
['mix(0%, 1, 1) 1', 'mix(0%, 1, 1) 1', '--custom'],
712+
['mix(0, 1, 1) 1', 'mix(0, 1, 1) 1', '--custom'],
714713
['toggle(1) 1', 'toggle(1) 1', '--custom'],
715714
['toggle(toggle(1))', 'toggle(toggle(1))', '--custom'],
716-
// <first-valid()> arguments are validated at parse time
715+
// <first-valid()> arguments are not validated at parse time
717716
['first-valid(first-valid(invalid))', 'first-valid(first-valid(invalid))', 'opacity'],
718717
]
719718
valid.forEach(([input, expected, property]) => {
@@ -731,9 +730,9 @@ describe('--*', () => {
731730
[''],
732731
[' /**/ ', ''],
733732
[' /**/ Red , ( orange /**/ ) , green /**/ ', 'Red , ( orange /**/ ) , green'],
734-
// Substitutions
733+
// Substitution
735734
['var( --PROPerty, /**/ 1e0 /**/ ) ', 'var( --PROPerty, /**/ 1e0 /**/ )'],
736-
['mix(50,/**/, 1e0 ) ', 'mix(50,/**/, 1e0 )'],
735+
['mix(0,/**/, 1e0 ) ', 'mix(0,/**/, 1e0 )'],
737736
['initial'],
738737
['initial initial'],
739738
]

‎__tests__/stylesheet.js‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1608,9 +1608,13 @@ describe('CSS grammar', () => {
16081608
['', '<length>'],
16091609
['1', '<length>'],
16101610
['initial', '<length>'],
1611+
['attr(name)', '<length>'],
16111612
['env(name)', '<length>'],
1613+
['random-item(--key, 1px)', '<length>'],
16121614
['var(--custom)', '<length>'],
1613-
['random-item(1px, 1px)', '<length>'],
1615+
['first-valid(1px)', '<length>'],
1616+
['mix(0, 1px, 1px)', '<length>'],
1617+
['toggle(1px)', '<length>'],
16141618
// Computationally dependent
16151619
['1em', '<length>'],
16161620
['calc(1em + 1px)', '<length>'],
@@ -1627,6 +1631,9 @@ describe('CSS grammar', () => {
16271631
['1in', '<length>'],
16281632
['1%', '<length-percentage>'],
16291633
['calc(1% + 1px)', '<length-percentage>'],
1634+
['calc-mix(0, 1px, 1px)', '<length>'],
1635+
['random(1px, 1px)', '<length>'],
1636+
['calc(1px * sibling-index())', '<length>'],
16301637
['translate(1px)', '<transform-function>'],
16311638
// Substitutions
16321639
['env(name)', '*'],

0 commit comments

Comments
 (0)