diff --git a/apps/app/ui-tests-app/action-bar/background-css.css b/apps/app/ui-tests-app/action-bar/background-css.css
new file mode 100644
index 000000000..adba23489
--- /dev/null
+++ b/apps/app/ui-tests-app/action-bar/background-css.css
@@ -0,0 +1,3 @@
+.action {
+  background-color: red;
+}
\ No newline at end of file
diff --git a/apps/app/ui-tests-app/action-bar/background-css.ts b/apps/app/ui-tests-app/action-bar/background-css.ts
new file mode 100644
index 000000000..84b0c257d
--- /dev/null
+++ b/apps/app/ui-tests-app/action-bar/background-css.ts
@@ -0,0 +1,5 @@
+import frame = require("ui/frame");
+
+export function navigate(args) {
+    frame.topmost().navigate("ui-tests-app/action-bar/clean");
+}
\ No newline at end of file
diff --git a/apps/app/ui-tests-app/action-bar/background-css.xml b/apps/app/ui-tests-app/action-bar/background-css.xml
new file mode 100644
index 000000000..317736b57
--- /dev/null
+++ b/apps/app/ui-tests-app/action-bar/background-css.xml
@@ -0,0 +1,6 @@
+<Page>
+  <ActionBar title="This is RED" class="action" />
+  <StackLayout>
+    <Button text="go to cleared page" tap="navigate"/>
+  </StackLayout>
+</Page>
\ No newline at end of file
diff --git a/apps/app/ui-tests-app/action-bar/main-page.ts b/apps/app/ui-tests-app/action-bar/main-page.ts
index 24f418d93..09e62ba82 100644
--- a/apps/app/ui-tests-app/action-bar/main-page.ts
+++ b/apps/app/ui-tests-app/action-bar/main-page.ts
@@ -16,6 +16,7 @@ export function pageLoaded(args: EventData) {
     examples.set("actIcons", "action-bar/system-icons");
     examples.set("actView", "action-bar/action-view");
     examples.set("actionItemPosition", "action-bar/action-item-position");
+    examples.set("actBGCss", "action-bar/background-css");
 
     let viewModel = new SubMianPageViewModel(wrapLayout, examples);
     page.bindingContext = viewModel;