@@ -1,5 +1,5 @@
 #app {
-    background-color: lightblue;
+    background-color: lightyellow;
 }
 
 .ui-tests-app-issue-1639-red {
@@ -20,4 +20,4 @@
 .ui-tests-app-issue-1639-yellow {
     color: yellow;
     margin-left: 30;
-}
+}
@@ -13,7 +13,6 @@ export function loadExamples() {
     const examples = new Map<string, string>();
     examples.set("btn-wrap-text-alignment-4266", "button/btn-wrap-text-alignment-4266-page");
     examples.set("button-border", "button/button-border-page");
-    examples.set("styles", "button/styles-page");
     examples.set("background", "button/background-page");
     examples.set("border-playground", "button/border-playground-page");
     examples.set("issue-4287", "button/issue-4287-page");
 
@@ -45,6 +45,7 @@ export function loadExamples() {
     examples.set("background-shorthand", "css/background-shorthand-page");
     examples.set("background-image-linear-gradient", "css/background-image-linear-gradient-page");
     examples.set("background-image", "css/background-image-page");
+    examples.set("styles", "css/styles-page");
 
     return examples;
 }
@@ -0,0 +1,10 @@
+import { addCss } from "tns-core-modules/application";
+
+export function onLoaded(args) {
+    var page = args.object;
+    page.addCss("#property { background-color: lightsalmon; }");
+}
+
+export function onTap() {
+    addCss("#app { background-color: lightblue; }");
+}
@@ -1,9 +1,9 @@
 <Page loaded="onLoaded">
   <WrapLayout>
-    <Button id="app" automationText="app" text="app" />
+    <Button id="app" automationText="app" text="app" tap="onTap" />
     <Button id="inline" automationText="inline" text="inline" style="background-color: lightgreen;" />
     <Button id="page" automationText="page" text="page" />
     <Button id="property" automationText="property" text="property" />
     <Button id="import" automationText="import" text="import" />
   </WrapLayout>
-</Page>
+</Page>
@@ -0,0 +1,21 @@
+import { AppiumDriver, logInfo } from "nativescript-dev-appium";
+
+import { PageObjectBaseModel } from "../../../page-object-base-model";
+
+export class StylesPage extends PageObjectBaseModel {
+
+    private readonly app = "app";
+
+    constructor(_driver: AppiumDriver) {
+        super(_driver, ["css", "styles"]);
+    }
+
+    async btnApp() {
+        return this._driver.waitForElement(this.app);
+    }
+
+    async tapAppBtn() {
+        await (await this.btnApp()).tap();
+        logInfo(`Tap on '${this.app}' button.`);
+    }
+}
@@ -0,0 +1,41 @@
+import { assert } from "chai";
+import { AppiumDriver, createDriver, nsCapabilities } from "nativescript-dev-appium";
+
+import { setImageName } from "../../../helpers/image-helper";
+import { StylesPage } from "./styles-page";
+
+const suite = "css";
+const spec = "styles";
+
+describe(`${suite}-${spec}-suite`, () => {
+    let driver: AppiumDriver;
+    let stylesPage: StylesPage;
+
+    before(async function () {
+        nsCapabilities.testReporter.context = this;
+        driver = await createDriver();
+        await driver.restartApp();
+        stylesPage = new StylesPage(driver);
+        await stylesPage.initSuite();
+    });
+
+    after(async function () {
+        await stylesPage.endSuite();
+    });
+
+    beforeEach(async function () {
+        driver.imageHelper.testName = setImageName(suite, spec, this.currentTest.title);
+    });
+
+    afterEach(async function () {
+        if (this.currentTest.state === "failed") {
+            await driver.logTestArtifacts(this.currentTest.title);
+        }
+    });
+
+    it(`${suite}-${spec}-apply`, async function () {
+        await stylesPage.tapAppBtn();
+        await driver.imageHelper.compareScreen();
+        assert.isTrue(driver.imageHelper.hasImageComparisonPassed());
+    });
+});
@@ -117,10 +117,6 @@ export function loadAppCss(): void {
     }
 }
 
-export function addCss(cssText: string): void {
-    events.notify(<CssChangedEventData>{ eventName: "cssChanged", object: app, cssText: cssText });
-}
-
 global.__onUncaughtError = function (error: NativeScriptError) {
     events.notify(<UnhandledErrorEventData>{ eventName: uncaughtErrorEvent, object: app, android: error, ios: error, error: error });
 };
Original file line number	Diff line number	Diff line change
`@@ -45,6 +45,7 @@ export function loadExamples() {`
`45`	`45`	`examples.set("background-shorthand", "css/background-shorthand-page");`
`46`	`46`	`examples.set("background-image-linear-gradient", "css/background-image-linear-gradient-page");`
`47`	`47`	`examples.set("background-image", "css/background-image-page");`
	`48`	`+ examples.set("styles", "css/styles-page");`
`48`	`49`
`49`	`50`	`return examples;`
`50`	`51`	`}`
Original file line number	Diff line number	Diff line change
`@@ -117,10 +117,6 @@ export function loadAppCss(): void {`
`117`	`117`	`}`
`118`	`118`	`}`
`119`	`119`
`120`		`-export function addCss(cssText: string): void {`
`121`		`- events.notify(<CssChangedEventData>{ eventName: "cssChanged", object: app, cssText: cssText });`
`122`		`-}`
`123`		`-`
`124`	`120`	`global.__onUncaughtError = function (error: NativeScriptError) {`
`125`	`121`	`events.notify(<UnhandledErrorEventData>{ eventName: uncaughtErrorEvent, object: app, android: error, ios: error, error: error });`
`126`	`122`	`};`