From 69a0578e006c1f62975512c0905dbcaed82561cb Mon Sep 17 00:00:00 2001
From: Oussama Ben Brahim <benbraou@gmail.com>
Date: Tue, 20 Feb 2018 22:03:19 +0100
Subject: [PATCH] docs(aio): fix the css of the heroes component's buttons
 (#22333)

Fixes #22222

PR Close #22333
---
 .../examples/toh-pt6/e2e/app.e2e-spec.ts      | 23 +++++++++++++++++++
 .../src/app/heroes/heroes.component.css       |  2 +-
 2 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/aio/content/examples/toh-pt6/e2e/app.e2e-spec.ts b/aio/content/examples/toh-pt6/e2e/app.e2e-spec.ts
index b51be25f84..cbd0df76d4 100644
--- a/aio/content/examples/toh-pt6/e2e/app.e2e-spec.ts
+++ b/aio/content/examples/toh-pt6/e2e/app.e2e-spec.ts
@@ -190,6 +190,29 @@ describe('Tutorial part 6', () => {
       const maxId = heroesBefore[heroesBefore.length - 1].id;
       expect(heroesAfter[numHeroes]).toEqual({id: maxId + 1, name: newHeroName});
     });
+
+    it('displays correctly styled buttons', async () => {
+      element.all(by.buttonText('x')).then(buttons => {
+        for (const button of buttons) {
+          // Inherited styles from styles.css
+          expect(button.getCssValue('font-family')).toBe('Arial');
+          expect(button.getCssValue('border')).toContain('none');
+          expect(button.getCssValue('padding')).toBe('5px 10px');
+          expect(button.getCssValue('border-radius')).toBe('4px');
+          // Styles defined in heroes.component.css
+          expect(button.getCssValue('left')).toBe('194px');
+          expect(button.getCssValue('top')).toBe('-32px');
+        }
+      });
+
+      const addButton = element(by.buttonText('add'));
+      // Inherited styles from styles.css
+      expect(addButton.getCssValue('font-family')).toBe('Arial');
+      expect(addButton.getCssValue('border')).toContain('none');
+      expect(addButton.getCssValue('padding')).toBe('5px 10px');
+      expect(addButton.getCssValue('border-radius')).toBe('4px');
+    });
+
   });
 
   describe('Progressive hero search', () => {
diff --git a/aio/content/examples/toh-pt6/src/app/heroes/heroes.component.css b/aio/content/examples/toh-pt6/src/app/heroes/heroes.component.css
index 62634648ad..c345d1d970 100644
--- a/aio/content/examples/toh-pt6/src/app/heroes/heroes.component.css
+++ b/aio/content/examples/toh-pt6/src/app/heroes/heroes.component.css
@@ -51,7 +51,7 @@
 }
 
 /* #docregion additions */
-.button {
+button {
   background-color: #eee;
   border: none;
   padding: 5px 10px;