Commit 68897c83 authored by Kyle Milka's avatar Kyle Milka Committed by Commit Bot

[NTP] Increase --logo-margin-bottom

Increase the bottom margin by 9px. This prevents shifting of page
contents in dark mode.

before: http://screen/AF6E8KpyjxM.png
after: http://screen/7RFWj2Qv87k.png

Bug: 983457
Change-Id: I70d5cf81d2650829d1bc3121e5fbeb251a6420eb
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1699687
Commit-Queue: Kyle Milka <kmilka@chromium.org>
Reviewed-by: default avatarKristi Park <kristipark@chromium.org>
Cr-Commit-Position: refs/heads/master@{#677112}
parent 798f4f01
...@@ -394,7 +394,6 @@ doodles.showLogoOrDoodle = function(fromCache) { ...@@ -394,7 +394,6 @@ doodles.showLogoOrDoodle = function(fromCache) {
const isDarkModeEnabled = const isDarkModeEnabled =
window.matchMedia('(prefers-color-scheme: dark)').matches; window.matchMedia('(prefers-color-scheme: dark)').matches;
if (isDarkModeEnabled) { if (isDarkModeEnabled) {
document.body.style.setProperty('--logo-margin-bottom', '34px');
$(doodles.IDS.LOGO_DOODLE_WRAPPER).style.backgroundColor = $(doodles.IDS.LOGO_DOODLE_WRAPPER).style.backgroundColor =
doodles.targetDoodle.metadata.darkBackgroundColor; doodles.targetDoodle.metadata.darkBackgroundColor;
} }
......
...@@ -17,7 +17,7 @@ html { ...@@ -17,7 +17,7 @@ html {
--logo-height: 200px; /* Normal height of a doodle. */ --logo-height: 200px; /* Normal height of a doodle. */
--logo-margin-top: 56px; /* Expected OGB height, so logo doesn't overlap. */ --logo-margin-top: 56px; /* Expected OGB height, so logo doesn't overlap. */
--logo-margin-bottom: 29px; /* Between logo and fakebox. */ --logo-margin-bottom: 38px; /* Between logo and fakebox. */
/* Initial height determines the margin between the logo and the fakebox. If /* Initial height determines the margin between the logo and the fakebox. If
* the iframe height exceeds the normal --logo-height, the difference is * the iframe height exceeds the normal --logo-height, the difference is
......
...@@ -48,13 +48,10 @@ namespace { ...@@ -48,13 +48,10 @@ namespace {
const char kCachedB64[] = "\161\247\041\171\337\276"; // b64decode("cached++") const char kCachedB64[] = "\161\247\041\171\337\276"; // b64decode("cached++")
const char kFreshB64[] = "abc"; // b64decode("YWJj") const char kFreshB64[] = "abc"; // b64decode("YWJj")
const int kFakeboxTopPx = 56 + 200 + 29; // top margin + height + bottom margin const int kFakeboxTopPx = 56 + 200 + 38; // top margin + height + bottom margin
#if defined(OS_WIN) || defined(OS_MACOSX) #if defined(OS_WIN) || defined(OS_MACOSX)
const char kFreshDarkB64[] = "xyz"; // b64decode("eHl6"); const char kFreshDarkB64[] = "xyz"; // b64decode("eHl6");
const int kDarkModeFakeboxTopPx =
56 + 200 + 29 +
5; // top margin + height + bottom margin + extra spacing in dark mode
#endif #endif
// A base64 encoding of a tiny but valid gif file. // A base64 encoding of a tiny but valid gif file.
...@@ -1495,8 +1492,7 @@ IN_PROC_BROWSER_TEST_F(LocalNTPDarkModeDoodleTest, ...@@ -1495,8 +1492,7 @@ IN_PROC_BROWSER_TEST_F(LocalNTPDarkModeDoodleTest,
ui_test_utils::NavigateToURL(browser(), GURL(chrome::kChromeUINewTabURL)); ui_test_utils::NavigateToURL(browser(), GURL(chrome::kChromeUINewTabURL));
WaitForFadeIn(active_tab, "logo-doodle"); WaitForFadeIn(active_tab, "logo-doodle");
EXPECT_THAT(GetDimension(active_tab, "fakebox", "top"), EXPECT_THAT(GetDimension(active_tab, "fakebox", "top"), Eq(kFakeboxTopPx));
Eq(kDarkModeFakeboxTopPx));
EXPECT_THAT(GetComputedOpacity(active_tab, "logo-default"), Eq(0.0)); EXPECT_THAT(GetComputedOpacity(active_tab, "logo-default"), Eq(0.0));
EXPECT_THAT(GetComputedOpacity(active_tab, "logo-doodle"), Eq(1.0)); EXPECT_THAT(GetComputedOpacity(active_tab, "logo-doodle"), Eq(1.0));
EXPECT_THAT(GetComputedDisplay(active_tab, "logo-doodle-container"), EXPECT_THAT(GetComputedDisplay(active_tab, "logo-doodle-container"),
...@@ -1587,8 +1583,7 @@ IN_PROC_BROWSER_TEST_F(LocalNTPDarkModeDoodleTest, ...@@ -1587,8 +1583,7 @@ IN_PROC_BROWSER_TEST_F(LocalNTPDarkModeDoodleTest,
WaitForLogoSwap(active_tab, "logo-doodle"); WaitForLogoSwap(active_tab, "logo-doodle");
EXPECT_TRUE(GetIsDarkModeApplied(active_tab)); EXPECT_TRUE(GetIsDarkModeApplied(active_tab));
EXPECT_THAT(GetDimension(active_tab, "fakebox", "top"), EXPECT_THAT(GetDimension(active_tab, "fakebox", "top"), Eq(kFakeboxTopPx));
Eq(kDarkModeFakeboxTopPx));
EXPECT_THAT(GetComputedOpacity(active_tab, "logo-default"), Eq(0.0)); EXPECT_THAT(GetComputedOpacity(active_tab, "logo-default"), Eq(0.0));
EXPECT_THAT(GetComputedOpacity(active_tab, "logo-doodle"), Eq(1.0)); EXPECT_THAT(GetComputedOpacity(active_tab, "logo-doodle"), Eq(1.0));
EXPECT_THAT(GetComputedDisplay(active_tab, "logo-doodle-container"), EXPECT_THAT(GetComputedDisplay(active_tab, "logo-doodle-container"),
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment