Skip to content

feat(core): Added basic support for CSS wide keywords #10709

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

Merged
merged 7 commits into from
Feb 26, 2025
Merged

feat(core): Added basic support for CSS wide keywords #10709

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
1c80dab
feat(core): Added basic support for CSS wide keywords
CatchABus Feb 23, 2025
59e1f54
chore: Small import type change
CatchABus Feb 23, 2025
d2b271b
fix: Use empty string for reset only if property is css
CatchABus Feb 26, 2025
a353867
test: Added automated tests
CatchABus Feb 26, 2025
33af944
fix: Re-added box-shadow unset check
CatchABus Feb 26, 2025
1641696
chore: Type casts
CatchABus Feb 26, 2025
3b99304
chore: Removed unused import
CatchABus Feb 26, 2025
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
3 changes: 3 additions & 0 deletions apps/automated/src/test-runner.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -176,6 +176,9 @@ allTests['STYLE'] = styleTests;
import * as visualStateTests from './ui/styling/visual-state-tests';
allTests['VISUAL-STATE'] = visualStateTests;

import * as cssKeywordsTests from './ui/styling/css-keywords-tests';
allTests['CSS-KEYWORDS'] = cssKeywordsTests;

import * as valueSourceTests from './ui/styling/value-source-tests';
allTests['VALUE-SOURCE'] = valueSourceTests;

Expand Down
132 changes: 132 additions & 0 deletions apps/automated/src/ui/styling/css-keywords-tests.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,132 @@
import * as helper from '../../ui-helper';
import * as TKUnit from '../../tk-unit';
import { Color, Button, StackLayout } from '@nativescript/core';

export var test_value_after_initial = function () {
let page = helper.getCurrentPage();
let btn = new Button();
let testStack = new StackLayout();

page.css = 'StackLayout { background-color: #FF0000; }';

page.content = testStack;
testStack.addChild(btn);

btn.backgroundColor = new Color('#0000FF');
TKUnit.assertEqual(btn.backgroundColor.hex, '#0000FF', 'backgroundColor property');
btn.backgroundColor = 'initial';
TKUnit.assertEqual(btn.backgroundColor, undefined, 'backgroundColor property');
};

export var test_value_Inherited_after_initial = function () {
let page = helper.getCurrentPage();
let btn = new Button();
let testStack = new StackLayout();

page.css = 'StackLayout { color: #FF0000; }';

page.content = testStack;
testStack.addChild(btn);

btn.color = new Color('#0000FF');
TKUnit.assertEqual(btn.color.hex, '#0000FF', 'color property');
(btn as any).color = 'initial';
TKUnit.assertEqual(btn.color, undefined, 'color property');
};

export var test_value_after_unset = function () {
let page = helper.getCurrentPage();
let btn = new Button();
let testStack = new StackLayout();

page.css = 'StackLayout { background-color: #FF0000; }';

page.content = testStack;
testStack.addChild(btn);

btn.backgroundColor = new Color('#0000FF');
TKUnit.assertEqual(btn.backgroundColor.hex, '#0000FF', 'backgroundColor property');
btn.backgroundColor = 'unset';
TKUnit.assertEqual(btn.backgroundColor, undefined, 'backgroundColor property');
};

export var test_value_Inherited_after_unset = function () {
let page = helper.getCurrentPage();
let btn = new Button();
let testStack = new StackLayout();

page.css = 'StackLayout { color: #FF0000; }';

page.content = testStack;
testStack.addChild(btn);

btn.color = new Color('#0000FF');
TKUnit.assertEqual(btn.color.hex, '#0000FF', 'color property');
(btn as any).color = 'unset';
TKUnit.assertEqual(btn.color.hex, '#FF0000', 'color property');
};

export var test_value_after_revert = function () {
let page = helper.getCurrentPage();
let btn = new Button();
let testStack = new StackLayout();

page.css = 'StackLayout { background-color: #FF0000; }';

page.content = testStack;
testStack.addChild(btn);

btn.backgroundColor = new Color('#0000FF');
TKUnit.assertEqual(btn.backgroundColor.hex, '#0000FF', 'backgroundColor property');
btn.backgroundColor = 'revert';
TKUnit.assertEqual(btn.backgroundColor, undefined, 'backgroundColor property');
};

export var test_value_Inherited_after_revert = function () {
let page = helper.getCurrentPage();
let btn = new Button();
let testStack = new StackLayout();

page.css = 'StackLayout { color: #FF0000; }';

page.content = testStack;
testStack.addChild(btn);

btn.color = new Color('#0000FF');
TKUnit.assertEqual(btn.color.hex, '#0000FF', 'color property');
(btn as any).color = 'revert';
TKUnit.assertEqual(btn.color.hex, '#FF0000', 'color property');
};

// TODO: Add missing inherit support for non-inherited properties
export var test_value_after_inherit = function () {
let page = helper.getCurrentPage();
let btn = new Button();
let testStack = new StackLayout();

page.css = 'StackLayout { background-color: #FF0000; }';

page.content = testStack;
testStack.addChild(btn);

btn.backgroundColor = new Color('#0000FF');
TKUnit.assertEqual(btn.backgroundColor.hex, '#0000FF', 'backgroundColor property');
btn.backgroundColor = 'inherit';
TKUnit.assertEqual(btn.backgroundColor, undefined, 'backgroundColor property');
};

export var test_value_Inherited_after_inherit = function () {
let page = helper.getCurrentPage();
let btn = new Button();
let testStack = new StackLayout();

page.css = 'StackLayout { color: #FF0000; }';

page.content = testStack;
testStack.addChild(btn);

btn.color = new Color('#0000FF');
TKUnit.assertEqual(btn.color.hex, '#0000FF', 'color property');
(btn as any).color = 'inherit';
TKUnit.assertEqual(btn.color.hex, '#FF0000', 'color property');
};
24 changes: 12 additions & 12 deletions packages/core/core-types/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ import { makeValidator, makeParser } from '../ui/core/properties';
import { CubicBezierAnimationCurve } from '../ui/animation/animation-interfaces';

export namespace CoreTypes {
export type CSSWideKeywords = 'initial' | 'inherit' | 'unset' | 'revert';

/**
* Denotes a length number that is in device independent pixel units.
*/
Expand All @@ -29,7 +31,7 @@ export namespace CoreTypes {
export type LengthPxUnit = { readonly unit: 'px'; readonly value: px };
export type LengthPercentUnit = { readonly unit: '%'; readonly value: percent };

export type FixedLengthType = dip | LengthDipUnit | LengthPxUnit;
export type FixedLengthType = dip | LengthDipUnit | LengthPxUnit | CSSWideKeywords;
export type LengthType = 'auto' | FixedLengthType;
export type PercentLengthType = 'auto' | FixedLengthType | LengthPercentUnit;

Expand Down Expand Up @@ -66,41 +68,39 @@ export namespace CoreTypes {
export const send = 'send';
}

export type TextAlignmentType = 'initial' | 'left' | 'center' | 'right' | 'justify';
export type TextAlignmentType = 'left' | 'center' | 'right' | 'justify' | CSSWideKeywords;
export namespace TextAlignment {
export const left = 'left';
export const center = 'center';
export const right = 'right';
export const justify = 'justify';
}

export type TextDecorationType = 'none' | 'underline' | 'line-through' | 'underline line-through';
export type TextDecorationType = 'none' | 'underline' | 'line-through' | 'underline line-through' | CSSWideKeywords;
export namespace TextDecoration {
export const none = 'none';
export const underline = 'underline';
export const lineThrough = 'line-through';
}

export type TextTransformType = 'initial' | 'none' | 'capitalize' | 'uppercase' | 'lowercase';
export type TextTransformType = 'none' | 'capitalize' | 'uppercase' | 'lowercase' | CSSWideKeywords;
export namespace TextTransform {
export const none = 'none';
export const capitalize = 'capitalize';
export const uppercase = 'uppercase';
export const lowercase = 'lowercase';
}

export type WhiteSpaceType = 'initial' | 'normal' | 'nowrap';
export type WhiteSpaceType = 'normal' | 'nowrap' | CSSWideKeywords;
export namespace WhiteSpace {
export const normal = 'normal';
export const nowrap = 'nowrap';
}

export type TextOverflowType = 'clip' | 'ellipsis' | 'initial' | 'unset';
export type TextOverflowType = 'clip' | 'ellipsis' | CSSWideKeywords;
export namespace TextOverflow {
export const clip = 'clip';
export const ellipsis = 'ellipsis';
export const initial = 'initial';
export const unset = 'unset';
}

export type MaxLinesType = number;
Expand All @@ -118,7 +118,7 @@ export namespace CoreTypes {
export const unknown = 'unknown';
}

export type HorizontalAlignmentType = 'left' | 'center' | 'right' | 'stretch';
export type HorizontalAlignmentType = 'left' | 'center' | 'right' | 'stretch' | CSSWideKeywords;
export namespace HorizontalAlignment {
export const left = 'left';
export const center = 'center';
Expand All @@ -128,7 +128,7 @@ export namespace CoreTypes {
export const parse = makeParser<HorizontalAlignmentType>(isValid);
}

export type VerticalAlignmentType = 'top' | 'middle' | 'bottom' | 'stretch';
export type VerticalAlignmentType = 'top' | 'middle' | 'bottom' | 'stretch' | CSSWideKeywords;
export namespace VerticalAlignment {
export const top = 'top';
export const middle = 'middle';
Expand Down Expand Up @@ -159,7 +159,7 @@ export namespace CoreTypes {
export const fill: ImageStretchType = 'fill';
}

export type VisibilityType = 'visible' | 'hidden' | 'collapse' | 'collapsed';
export type VisibilityType = 'visible' | 'hidden' | 'collapse' | 'collapsed' | CSSWideKeywords;
export namespace Visibility {
export const visible: VisibilityType = 'visible';
export const collapse: VisibilityType = 'collapse';
Expand Down Expand Up @@ -254,7 +254,7 @@ export namespace CoreTypes {
export const black: string = '900';
}

export type BackgroundRepeatType = 'repeat' | 'repeat-x' | 'repeat-y' | 'no-repeat';
export type BackgroundRepeatType = 'repeat' | 'repeat-x' | 'repeat-y' | 'no-repeat' | CSSWideKeywords;
export namespace BackgroundRepeat {
export const repeat: BackgroundRepeatType = 'repeat';
export const repeatX: BackgroundRepeatType = 'repeat-x';
Expand Down
Loading