Set toast default styling

Updated the styling to reflect the changes to the explainer in PR https://github.com/jackbsteinberg/std-toast/pull/44 BUG=972945 Change-Id: I5e89886712b2b5704555352c4f25fe2348441e11 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1702124Reviewed-by: Kent Tamura <tkent@chromium.org> Commit-Queue: Jack Steinberg <jacksteinberg@chromium.org> Cr-Commit-Position: refs/heads/master@{#678032}

Set toast default styling
Updated the styling to reflect the changes to the explainer in PR https://github.com/jackbsteinberg/std-toast/pull/44 BUG=972945 Change-Id: I5e89886712b2b5704555352c4f25fe2348441e11 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1702124Reviewed-by: Kent Tamura <tkent@chromium.org> Commit-Queue: Jack Steinberg <jacksteinberg@chromium.org> Cr-Commit-Position: refs/heads/master@{#678032}
f0e02fd6 · Jack Steinberg · Commit Bot · e02ac053 · f0e02fd6 · f0e02fd6
Commit f0e02fd6 authored Jul 16, 2019 by Jack Steinberg Committed by Commit Bot Jul 16, 2019
3 changed files
--- a/third_party/blink/renderer/core/script/resources/layered_api/elements/toast/index.mjs
+++ b/third_party/blink/renderer/core/script/resources/layered_api/elements/toast/index.mjs
@@ -22,24 +22,21 @@ function stylesheetFactory() {
      stylesheet.replaceSync(`
        :host {
          position: fixed;
-          bottom: 0;
-          right: 0;
+          bottom: 1em;
+          right: 1em;
+          border: solid;
+          padding: 1em;
+          background: white;
+          color: black;
          z-index: 1;
-          background-color: #FFFFFF;
-          color: #000000;
-          font-size: 20px;
-          border-color: #000000;
-          border-style: solid;
-          border-width: 2px;
-          border-radius: 2.5px;
-          padding: 10px;
-          margin: 10px;
        }

        :host(:not([open])) {
          display: none;
        }
      `);
+      // TODO(jacksteinberg): use offset-block-end: / offset-inline-end: over bottom: / right:
+      // when implemented https://bugs.chromium.org/p/chromium/issues/detail?id=538475
    }
    return stylesheet;
  };

--- a/third_party/blink/web_tests/external/wpt/std-toast/resources/helpers.js
+++ b/third_party/blink/web_tests/external/wpt/std-toast/resources/helpers.js
@@ -70,6 +70,20 @@ export const assertActionButtonOnToast = (action, toast) => {
    assert_equals(action, toast.querySelector('button'));
 };

+export const assertComputedStyleMapsEqual = (element1, element2) => {
+    assert_greater_than(element1.computedStyleMap().size, 0);
+    for (const [styleProperty, baseStyleValues] of element1.computedStyleMap()) {
+        const refStyleValues = element2.computedStyleMap().getAll(styleProperty);
+        assert_equals(baseStyleValues.length, refStyleValues.length, `${styleProperty} length`);
+
+        for (let i = 0; i < baseStyleValues.length; ++i) {
+            const baseStyleValue = baseStyleValues[i];
+            const refStyleValue = refStyleValues[i];
+            assert_equals(baseStyleValue.toString(), refStyleValue.toString(), `diff at value ${styleProperty}`);
+        }
+    }
+}
+
 export class EventCollector {
    events = [];


--- a/third_party/blink/web_tests/external/wpt/std-toast/styles.html
+++ b/third_party/blink/web_tests/external/wpt/std-toast/styles.html
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Toast: style tests</title>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<main>
+</main>
+
+<script type="module">
+import { testToastElement, assertComputedStyleMapsEqual } from './resources/helpers.js';
+
+testToastElement((toast) => {
+    toast.open = true;
+
+    const mockToast = document.createElement('span');
+    mockToast.id = 'mock-toast-open';
+    mockToast.textContent = 'Message';
+
+    const mockStyler = document.createElement('style');
+    mockStyler.textContent = `
+        #mock-toast-open {
+          position: fixed;
+          bottom: 1em;
+          right: 1em;
+          border: solid;
+          padding: 1em;
+          background: white;
+          color: black;
+          z-index: 1;
+        }`;
+
+    document.querySelector('main').appendChild(mockStyler);
+    document.querySelector('main').appendChild(mockToast);
+
+    assertComputedStyleMapsEqual(toast, mockToast);
+}, 'the computed style map of an open unstyled toast is the same as a span given toast defaults');
+
+testToastElement((toast) => {
+    const mockToast = document.createElement('span');
+    mockToast.id = 'mock-toast-hidden';
+    mockToast.textContent = 'Message';
+
+    const mockStyler = document.createElement('style');
+    mockStyler.textContent = `
+        #mock-toast-hidden {
+          position: fixed;
+          bottom: 1em;
+          right: 1em;
+          border: solid;
+          padding: 1em;
+          background: white;
+          color: black;
+          z-index: 1;
+          display: none;
+        }`;
+
+    document.querySelector('main').appendChild(mockStyler);
+    document.querySelector('main').appendChild(mockToast);
+
+    assertComputedStyleMapsEqual(toast, mockToast);
+}, 'the computed style map of a closed unstyled toast is the same as a span given toast defaults');
+</script>
\ No newline at end of file