javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-11-05 13:26:48 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(core): css-what parser for CSS selectors + support for :not(), :is(), and :where() Level 4 and ~ (#10514)

Browse Source
This commit is contained in:
Dimitris-Rafail Katsampas
2024-06-28 23:57:29 +03:00
committed by GitHub
parent 88a047254b
commit 2fb4f23670
10 changed files with 750 additions and 449 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
apps/automated/src/ui/styling/style-tests.ts
View File

@@ -278,6 +278,111 @@ export function test_id_selector() {
TKUnit.assert(btnWithNoId.style.color === undefined, 'Color should not have a value');
}
export function test_not_pseudo_class_selector() {
let page = helper.getClearCurrentPage();
page.style.color = unsetValue;
let btnWithId: Button;
let btnWithNoId: Button;
// >> article-using-not-pseudo-class-selector
page.css = 'Button:not(#myButton) { color: red; }';
//// Will be styled
btnWithNoId = new Button();
// << article-using-not-pseudo-class-selector
//// Won't be styled
btnWithId = new Button();
btnWithId.id = 'myButton';
const stack = new StackLayout();
page.content = stack;
stack.addChild(btnWithNoId);
stack.addChild(btnWithId);
helper.assertViewColor(btnWithNoId, '#FF0000');
TKUnit.assert(btnWithId.style.color === undefined, 'Color should not have a value');
}
export function test_is_pseudo_class_selector() {
let page = helper.getClearCurrentPage();
page.style.color = unsetValue;
let btnWithId: Button;
let btnWithNoId: Button;
// >> article-using-is-pseudo-class-selector
page.css = 'Button:is(#myButton) { color: red; }';
//// Will be styled
btnWithId = new Button();
btnWithId.id = 'myButton';
//// Won't be styled
btnWithNoId = new Button();
// << article-using-is-pseudo-class-selector
const stack = new StackLayout();
page.content = stack;
stack.addChild(btnWithId);
stack.addChild(btnWithNoId);
helper.assertViewColor(btnWithId, '#FF0000');
TKUnit.assert(btnWithNoId.style.color === undefined, 'Color should not have a value');
}
export function test_where_pseudo_class_selector() {
let page = helper.getClearCurrentPage();
page.style.color = unsetValue;
let btnWithId: Button;
let btnWithNoId: Button;
// >> article-using-where-pseudo-class-selector
page.css = 'Button:where(#myButton) { color: red; }';
//// Will be styled
btnWithId = new Button();
btnWithId.id = 'myButton';
//// Won't be styled
btnWithNoId = new Button();
// << article-using-where-pseudo-class-selector
const stack = new StackLayout();
page.content = stack;
stack.addChild(btnWithId);
stack.addChild(btnWithNoId);
helper.assertViewColor(btnWithId, '#FF0000');
TKUnit.assert(btnWithNoId.style.color === undefined, 'Color should not have a value');
}
export function test_where_pseudo_class_selector_zero_specificity() {
let page = helper.getClearCurrentPage();
page.style.color = unsetValue;
let btnWithId: Button;
let btnWithNoId: Button;
// >> article-using-where-pseudo-class-selector-zero-specificity
page.css = '#myButton { color: green; } Button:where(#myButton) { color: red; }';
//// Will be styled
btnWithId = new Button();
btnWithId.id = 'myButton';
//// Won't be styled
btnWithNoId = new Button();
// << article-using-where-pseudo-class-selector-zero-specificity
const stack = new StackLayout();
page.content = stack;
stack.addChild(btnWithId);
stack.addChild(btnWithNoId);
// Pseudo-class :where() has zero specificity, therefore we expect the first rule to be applied
helper.assertViewColor(btnWithId, '#008000');
TKUnit.assert(btnWithNoId.style.color === undefined, 'Color should not have a value');
}
// State selector tests
export function test_state_selector() {
let page = helper.getClearCurrentPage();
@@ -763,7 +868,7 @@ export function test_set_invalid_CSS_values_dont_cause_crash() {
(views: Array<View>) => {
TKUnit.assertEqual(30, testButton.style.fontSize);
},
{ pageCss: invalidCSS }
{ pageCss: invalidCSS },
);
}
@@ -782,7 +887,7 @@ export function test_set_mixed_CSS_cases_works() {
helper.assertViewBackgroundColor(testButton, '#FF0000');
helper.assertViewColor(testButton, '#0000FF');
},
{ pageCss: casedCSS }
{ pageCss: casedCSS },
);
}

23
apps/ui/src/css/combinators-page.css
View File

@@ -31,6 +31,29 @@
color: white;
}
.general-sibling--type Button ~ Label {
background-color: green;
color: white;
}
.general-sibling--class .test-child ~ .test-child-2 {
background-color: yellow;
}
.general-sibling--attribute Button[data="test-child"] ~ Button[data="test-child-2"] {
background-color: blueviolet;
color: white;
}
.general-sibling--pseudo-selector Button.ref ~ Button:disabled {
background-color: black;
color: white;
}
.sibling-test-label {
text-align: center;
}
.sibling-test-label {
margin-top: 8;
}

33
apps/ui/src/css/combinators-page.xml
View File

@@ -61,6 +61,39 @@
<Button isEnabled="false" text="But I am!"/>
</StackLayout>
<StackLayout class="general-sibling--type">
<Label text="General sibling test by type"/>
<Label class="sibling-test-label" text="I'm not!"/>
<Button text="I'm the ref"/>
<Label class="sibling-test-label" text="I'm a general sibling!"/>
<Label class="sibling-test-label" text="Me too!"/>
</StackLayout>
<StackLayout class="general-sibling--class">
<Label text="General sibling test by class"/>
<Button class="test-child-2" text="I'm not!"/>
<Button class="test-child" text="I'm the ref"/>
<Button class="test-child-2" text="I'm a general sibling!"/>
<Button class="test-child-2" text="Me too!"/>
</StackLayout>
<StackLayout class="general-sibling--attribute">
<Label text="General sibling test by attribute"/>
<Button data="test-child-2" text="I'm not!"/>
<Button data="test-child" text="I'm the ref"/>
<Button data="test-child-2" text="I'm a general sibling!"/>
<Button data="test-child-2" text="Me too!"/>
</StackLayout>
<StackLayout class="general-sibling--pseudo-selector">
<Label text="General sibling test by pseudo-selector"/>
<Button text="I'm not!"/>
<Button isEnabled="false" text="I'm not either!"/>
<Button class="ref" text="I'm the ref"/>
<Button isEnabled="false" text="I'm a general sibling!"/>
<Button isEnabled="false" text="Me too!"/>
</StackLayout>
</StackLayout>
</ScrollView>
</Page>