[webui][ntp] Test boxed doodle alignment

Bug: 688960
Change-Id: I8da036e642476b1eff6d0247f5bce3c2113c36e6
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2268957Reviewed-by: Esmael Elmoslimany <aee@chromium.org>
Commit-Queue: Esmael Elmoslimany <aee@chromium.org>
Auto-Submit: Tibor Goldschwendt <tiborg@chromium.org>
Cr-Commit-Position: refs/heads/master@{#785859}

chrome/browser/resources/new_tab_page/logo.html

 <style include="cr-hidden-style">
   :host {
     --ntp-logo-height: 230px;
-    display: inline-block;
+    display: flex;
+    flex-direction: column;
     flex-shrink: 0;
+    justify-content: center;
     min-height: var(--ntp-logo-height);
   }
 
+  :host([doodle-boxed_]) {
+    justify-content: flex-end;
+  }
+
   #logo {
     height: 92px;
     margin-top: 108px;
@@ -23,17 +29,6 @@
     background-image: url(chrome://resources/images/google_logo.svg);
   }
 
-  #doodle {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    justify-content: center;
-  }
-
-  :host([doodle-boxed_]) #doodle {
-    justify-content: flex-end;
-  }
-
   #imageDoodle {
     cursor: pointer;
     outline: none;

chrome/test/data/webui/new_tab_page/logo_test.js

@@ -166,6 +166,24 @@ function createSuite(themeModeDoodlesEnabled) {
     });
   });
 
+  [[1000, 500] /* too large */,
+   [100, 50] /* too small */,
+  ].forEach(([width, height]) => {
+    test(`${width}x${height} boxed doodle aligned correctly`, async () => {
+      // Act.
+      const logo = await createLogo(createImageDoodle(width, height));
+      logo.dark = true;
+      logo.backgroundColor = {value: 0xff0000ff};
+
+      // Assert.
+      assertEquals(230, logo.offsetHeight);
+      assertGE(160, $$(logo, '#image').offsetHeight);
+      const pos = getRelativePosition($$(logo, '#imageDoodle'), logo);
+      assertGE(pos.top, 8);
+      assertEquals(-30, pos.bottom);
+    });
+  });
+
   test('dark mode and no dark doodle shows logo', async () => {
     // Arrange.
     const doodle = createImageDoodle();