From bf6a2c37aa57a057a1660dfc7b02448306d15618 Mon Sep 17 00:00:00 2001
From: Paul Gschwendtner <paulgschwendtner@gmail.com>
Date: Sat, 21 Oct 2017 02:08:03 +0200
Subject: [PATCH] build: more stable screenshot tests (#7774)

* Most of the time the screenshot tests are failing because the caret is blinking and therefore the screenshot is different. Setting the caret-color to `transparent` for focused elements ensures that the screenshot tests are running more stable.
---
 src/e2e-app/e2e-app/e2e-app.css | 8 ++++++++
 src/e2e-app/e2e-app/e2e-app.ts  | 4 +++-
 2 files changed, 11 insertions(+), 1 deletion(-)
 create mode 100644 src/e2e-app/e2e-app/e2e-app.css

diff --git a/src/e2e-app/e2e-app/e2e-app.css b/src/e2e-app/e2e-app/e2e-app.css
new file mode 100644
index 00000000000..bdaafd31d70
--- /dev/null
+++ b/src/e2e-app/e2e-app/e2e-app.css
@@ -0,0 +1,8 @@
+/**
+ * Don't show the caret for focused elements since those are causing the screenshot comparisons
+ * to be flaky. The `caret-color` CSS property is not supported in most of the browsers, but since
+ * the e2e tests run against Chrome we can use that property instead of a workaround using `color`.
+ */
+*:focus {
+  caret-color: transparent;
+}
diff --git a/src/e2e-app/e2e-app/e2e-app.ts b/src/e2e-app/e2e-app/e2e-app.ts
index 64fb2e4504a..87283ec8725 100644
--- a/src/e2e-app/e2e-app/e2e-app.ts
+++ b/src/e2e-app/e2e-app/e2e-app.ts
@@ -1,4 +1,4 @@
-import {Component} from '@angular/core';
+import {Component, ViewEncapsulation} from '@angular/core';
 
 
 @Component({
@@ -11,6 +11,8 @@ export class Home {}
   moduleId: module.id,
   selector: 'e2e-app',
   templateUrl: 'e2e-app.html',
+  styleUrls: ['e2e-app.css'],
+  encapsulation: ViewEncapsulation.None,
 })
 export class E2EApp {
   showLinks: boolean = false;