OOBE: Make welcome illustration shrinkable as well

Also center similar to other illustrations

Bug: 1019879
Change-Id: I864c425d46694d9370d48636daf996c8b27d657e
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1939407Reviewed-by: Denis Kuznetsov [CET] <antrim@chromium.org>
Commit-Queue: Roman Sorokin [CET] <rsorokin@chromium.org>
Cr-Commit-Position: refs/heads/master@{#719612}

chrome/browser/resources/chromeos/login/oobe_welcome_dialog.css

@@ -12,9 +12,6 @@
 }
 
 .welcome-illustration {
-  align-items: center;
-  justify-content: center;
-  margin: auto;
   user-select: none;
 }
 

chrome/browser/resources/chromeos/login/oobe_welcome_dialog.html

@@ -61,26 +61,31 @@
     <link rel="stylesheet" href="oobe_flex_layout.css">
     <link rel="stylesheet" href="oobe_welcome_dialog.css">
     <style include="cr-shared-style"></style>
-    <oobe-dialog has-buttons>
+    <oobe-dialog has-buttons footer-shrinkable>
       <h1 slot="title" id="title">
         [[i18nDynamic(locale, 'welcomeScreenGreeting')]]
       </h1>
-      <div slot="footer" class="welcome-illustration layout vertical">
+      <div slot="footer" class="welcome-illustration flex layout vertical center
+          center-justified">
         <if expr="chromeos and _google_chrome">
           <video muted hidden oobe_devices="chromebox"
               oobe_orientations="portrait,landscape" oobe_types="intro"
+              class="oobe-illustration"
               src="../../../internal/resources/chromeos/animations/oobe-welcome/chromebox_intro_2x.webm">
           </video>
           <video muted loop hidden oobe_devices="chromebox"
               oobe_orientations="portrait,landscape" oobe_types="loop"
+              class="oobe-illustration"
               src="../../../internal/resources/chromeos/animations/oobe-welcome/chromebox_loop_2x.webm">
           </video>
           <video muted hidden oobe_devices="laptop_G"
               oobe_orientations="portrait,landscape" oobe_types="intro"
+              class="oobe-illustration"
               src="../../../internal/resources/chromeos/animations/oobe-welcome/laptop_G_intro_2x.webm">
           </video>
           <video muted loop hidden oobe_devices="laptop_G"
               oobe_orientations="portrait,landscape" oobe_types="loop"
+              class="oobe-illustration"
               src="../../../internal/resources/chromeos/animations/oobe-welcome/laptop_G_loop_2x.webm">
           </video>
           <video muted hidden oobe_devices="laptop"
@@ -89,22 +94,27 @@
           </video>
           <video muted loop hidden oobe_devices="laptop"
               oobe_orientations="portrait,landscape" oobe_types="loop"
+              class="oobe-illustration"
               src="../../../internal/resources/chromeos/animations/oobe-welcome/laptop_loop_2x.webm">
           </video>
           <video muted hidden oobe_devices="tablet_G"
               oobe_orientations="portrait,landscape" oobe_types="intro"
+              class="oobe-illustration"
               src="../../../internal/resources/chromeos/animations/oobe-welcome/tablet_G_intro_2x.webm">
           </video>
           <video muted loop hidden oobe_devices="tablet_G"
               oobe_orientations="portrait,landscape" oobe_types="loop"
+              class="oobe-illustration"
               src="../../../internal/resources/chromeos/animations/oobe-welcome/tablet_G_loop_2x.webm">
           </video>
           <video muted hidden oobe_devices="tablet"
               oobe_orientations="portrait,landscape" oobe_types="intro"
+              class="oobe-illustration"
               src="../../../internal/resources/chromeos/animations/oobe-welcome/tablet_intro_2x.webm">
           </video>
           <video muted loop hidden oobe_devices="tablet"
               oobe_orientations="portrait,landscape" oobe_types="loop"
+              class="oobe-illustration"
               src="../../../internal/resources/chromeos/animations/oobe-welcome/tablet_loop_2x.webm">
           </video>
         </if>