Skip to content

Commit 2d71ada

Browse files
CatchABusCatchABus
authored
feat(core): CSS wide keywords (#10709)
1 parent 5024156 commit 2d71ada

File tree

12 files changed

+246
-93
lines changed

12 files changed

+246
-93
lines changed

‎apps/automated/src/test-runner.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -176,6 +176,9 @@ allTests['STYLE'] = styleTests;
176176
import * as visualStateTests from './ui/styling/visual-state-tests';
177177
allTests['VISUAL-STATE'] = visualStateTests;
178178

179+
import * as cssKeywordsTests from './ui/styling/css-keywords-tests';
180+
allTests['CSS-KEYWORDS'] = cssKeywordsTests;
181+
179182
import * as valueSourceTests from './ui/styling/value-source-tests';
180183
allTests['VALUE-SOURCE'] = valueSourceTests;
181184

‎apps/automated/src/ui/styling/css-keywords-tests.ts‎

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
import * as helper from '../../ui-helper';
2+
import * as TKUnit from '../../tk-unit';
3+
import { Color, Button, StackLayout } from '@nativescript/core';
4+
5+
export var test_value_after_initial = function () {
6+
let page = helper.getCurrentPage();
7+
let btn = new Button();
8+
let testStack = new StackLayout();
9+
10+
page.css = 'StackLayout { background-color: #FF0000; }';
11+
12+
page.content = testStack;
13+
testStack.addChild(btn);
14+
15+
btn.backgroundColor = new Color('#0000FF');
16+
TKUnit.assertEqual(btn.backgroundColor.hex, '#0000FF', 'backgroundColor property');
17+
btn.backgroundColor = 'initial';
18+
TKUnit.assertEqual(btn.backgroundColor, undefined, 'backgroundColor property');
19+
};
20+
21+
export var test_value_Inherited_after_initial = function () {
22+
let page = helper.getCurrentPage();
23+
let btn = new Button();
24+
let testStack = new StackLayout();
25+
26+
page.css = 'StackLayout { color: #FF0000; }';
27+
28+
page.content = testStack;
29+
testStack.addChild(btn);
30+
31+
btn.color = new Color('#0000FF');
32+
TKUnit.assertEqual(btn.color.hex, '#0000FF', 'color property');
33+
(btn as any).color = 'initial';
34+
TKUnit.assertEqual(btn.color, undefined, 'color property');
35+
};
36+
37+
export var test_value_after_unset = function () {
38+
let page = helper.getCurrentPage();
39+
let btn = new Button();
40+
let testStack = new StackLayout();
41+
42+
page.css = 'StackLayout { background-color: #FF0000; }';
43+
44+
page.content = testStack;
45+
testStack.addChild(btn);
46+
47+
btn.backgroundColor = new Color('#0000FF');
48+
TKUnit.assertEqual(btn.backgroundColor.hex, '#0000FF', 'backgroundColor property');
49+
btn.backgroundColor = 'unset';
50+
TKUnit.assertEqual(btn.backgroundColor, undefined, 'backgroundColor property');
51+
};
52+
53+
export var test_value_Inherited_after_unset = function () {
54+
let page = helper.getCurrentPage();
55+
let btn = new Button();
56+
let testStack = new StackLayout();
57+
58+
page.css = 'StackLayout { color: #FF0000; }';
59+
60+
page.content = testStack;
61+
testStack.addChild(btn);
62+
63+
btn.color = new Color('#0000FF');
64+
TKUnit.assertEqual(btn.color.hex, '#0000FF', 'color property');
65+
(btn as any).color = 'unset';
66+
TKUnit.assertEqual(btn.color.hex, '#FF0000', 'color property');
67+
};
68+
69+
export var test_value_after_revert = function () {
70+
let page = helper.getCurrentPage();
71+
let btn = new Button();
72+
let testStack = new StackLayout();
73+
74+
page.css = 'StackLayout { background-color: #FF0000; }';
75+
76+
page.content = testStack;
77+
testStack.addChild(btn);
78+
79+
btn.backgroundColor = new Color('#0000FF');
80+
TKUnit.assertEqual(btn.backgroundColor.hex, '#0000FF', 'backgroundColor property');
81+
btn.backgroundColor = 'revert';
82+
TKUnit.assertEqual(btn.backgroundColor, undefined, 'backgroundColor property');
83+
};
84+
85+
export var test_value_Inherited_after_revert = function () {
86+
let page = helper.getCurrentPage();
87+
let btn = new Button();
88+
let testStack = new StackLayout();
89+
90+
page.css = 'StackLayout { color: #FF0000; }';
91+
92+
page.content = testStack;
93+
testStack.addChild(btn);
94+
95+
btn.color = new Color('#0000FF');
96+
TKUnit.assertEqual(btn.color.hex, '#0000FF', 'color property');
97+
(btn as any).color = 'revert';
98+
TKUnit.assertEqual(btn.color.hex, '#FF0000', 'color property');
99+
};
100+
101+
// TODO: Add missing inherit support for non-inherited properties
102+
export var test_value_after_inherit = function () {
103+
let page = helper.getCurrentPage();
104+
let btn = new Button();
105+
let testStack = new StackLayout();
106+
107+
page.css = 'StackLayout { background-color: #FF0000; }';
108+
109+
page.content = testStack;
110+
testStack.addChild(btn);
111+
112+
btn.backgroundColor = new Color('#0000FF');
113+
TKUnit.assertEqual(btn.backgroundColor.hex, '#0000FF', 'backgroundColor property');
114+
btn.backgroundColor = 'inherit';
115+
TKUnit.assertEqual(btn.backgroundColor, undefined, 'backgroundColor property');
116+
};
117+
118+
export var test_value_Inherited_after_inherit = function () {
119+
let page = helper.getCurrentPage();
120+
let btn = new Button();
121+
let testStack = new StackLayout();
122+
123+
page.css = 'StackLayout { color: #FF0000; }';
124+
125+
page.content = testStack;
126+
testStack.addChild(btn);
127+
128+
btn.color = new Color('#0000FF');
129+
TKUnit.assertEqual(btn.color.hex, '#0000FF', 'color property');
130+
(btn as any).color = 'inherit';
131+
TKUnit.assertEqual(btn.color.hex, '#FF0000', 'color property');
132+
};

‎packages/core/core-types/index.ts‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ import { makeValidator, makeParser } from '../ui/core/properties';
77
import { CubicBezierAnimationCurve } from '../ui/animation/animation-interfaces';
88

99
export namespace CoreTypes {
10+
export type CSSWideKeywords = 'initial' | 'inherit' | 'unset' | 'revert';
11+
1012
/**
1113
* Denotes a length number that is in device independent pixel units.
1214
*/
@@ -29,7 +31,7 @@ export namespace CoreTypes {
2931
export type LengthPxUnit = { readonly unit: 'px'; readonly value: px };
3032
export type LengthPercentUnit = { readonly unit: '%'; readonly value: percent };
3133

32-
export type FixedLengthType = dip | LengthDipUnit | LengthPxUnit;
34+
export type FixedLengthType = dip | LengthDipUnit | LengthPxUnit | CSSWideKeywords;
3335
export type LengthType = 'auto' | FixedLengthType;
3436
export type PercentLengthType = 'auto' | FixedLengthType | LengthPercentUnit;
3537

@@ -66,41 +68,39 @@ export namespace CoreTypes {
6668
export const send = 'send';
6769
}
6870

69-
export type TextAlignmentType = 'initial' | 'left' | 'center' | 'right' | 'justify';
71+
export type TextAlignmentType = 'left' | 'center' | 'right' | 'justify' | CSSWideKeywords;
7072
export namespace TextAlignment {
7173
export const left = 'left';
7274
export const center = 'center';
7375
export const right = 'right';
7476
export const justify = 'justify';
7577
}
7678

77-
export type TextDecorationType = 'none' | 'underline' | 'line-through' | 'underline line-through';
79+
export type TextDecorationType = 'none' | 'underline' | 'line-through' | 'underline line-through' | CSSWideKeywords;
7880
export namespace TextDecoration {
7981
export const none = 'none';
8082
export const underline = 'underline';
8183
export const lineThrough = 'line-through';
8284
}
8385

84-
export type TextTransformType = 'initial' | 'none' | 'capitalize' | 'uppercase' | 'lowercase';
86+
export type TextTransformType = 'none' | 'capitalize' | 'uppercase' | 'lowercase' | CSSWideKeywords;
8587
export namespace TextTransform {
8688
export const none = 'none';
8789
export const capitalize = 'capitalize';
8890
export const uppercase = 'uppercase';
8991
export const lowercase = 'lowercase';
9092
}
9193

92-
export type WhiteSpaceType = 'initial' | 'normal' | 'nowrap';
94+
export type WhiteSpaceType = 'normal' | 'nowrap' | CSSWideKeywords;
9395
export namespace WhiteSpace {
9496
export const normal = 'normal';
9597
export const nowrap = 'nowrap';
9698
}
9799

98-
export type TextOverflowType = 'clip' | 'ellipsis' | 'initial' | 'unset';
100+
export type TextOverflowType = 'clip' | 'ellipsis' | CSSWideKeywords;
99101
export namespace TextOverflow {
100102
export const clip = 'clip';
101103
export const ellipsis = 'ellipsis';
102-
export const initial = 'initial';
103-
export const unset = 'unset';
104104
}
105105

106106
export type MaxLinesType = number;
@@ -118,7 +118,7 @@ export namespace CoreTypes {
118118
export const unknown = 'unknown';
119119
}
120120

121-
export type HorizontalAlignmentType = 'left' | 'center' | 'right' | 'stretch';
121+
export type HorizontalAlignmentType = 'left' | 'center' | 'right' | 'stretch' | CSSWideKeywords;
122122
export namespace HorizontalAlignment {
123123
export const left = 'left';
124124
export const center = 'center';
@@ -128,7 +128,7 @@ export namespace CoreTypes {
128128
export const parse = makeParser<HorizontalAlignmentType>(isValid);
129129
}
130130

131-
export type VerticalAlignmentType = 'top' | 'middle' | 'bottom' | 'stretch';
131+
export type VerticalAlignmentType = 'top' | 'middle' | 'bottom' | 'stretch' | CSSWideKeywords;
132132
export namespace VerticalAlignment {
133133
export const top = 'top';
134134
export const middle = 'middle';
@@ -159,7 +159,7 @@ export namespace CoreTypes {
159159
export const fill: ImageStretchType = 'fill';
160160
}
161161

162-
export type VisibilityType = 'visible' | 'hidden' | 'collapse' | 'collapsed';
162+
export type VisibilityType = 'visible' | 'hidden' | 'collapse' | 'collapsed' | CSSWideKeywords;
163163
export namespace Visibility {
164164
export const visible: VisibilityType = 'visible';
165165
export const collapse: VisibilityType = 'collapse';
@@ -254,7 +254,7 @@ export namespace CoreTypes {
254254
export const black: string = '900';
255255
}
256256

257-
export type BackgroundRepeatType = 'repeat' | 'repeat-x' | 'repeat-y' | 'no-repeat';
257+
export type BackgroundRepeatType = 'repeat' | 'repeat-x' | 'repeat-y' | 'no-repeat' | CSSWideKeywords;
258258
export namespace BackgroundRepeat {
259259
export const repeat: BackgroundRepeatType = 'repeat';
260260
export const repeatX: BackgroundRepeatType = 'repeat-x';

0 commit comments

Comments
 (0)