From f27cd050eb61379503a8eb413ad5b22a7f88a88b Mon Sep 17 00:00:00 2001
From: Jack Steinberg <jacksteinberg@chromium.org>
Date: Tue, 23 Jul 2019 11:45:11 -0700
Subject: [PATCH] Add toast type attribute support with IDL property and
 default styles

This change adds the toast type attribute and property
according to the PR on the toast explainer here:
https://github.com/jackbsteinberg/std-toast/pull/49

There is still work TODO on implementing this PR,
w.r.t the showToast type option, a11y behavior for warning / error,
and default features for those types (Infinity duration, closebutton, etc)

Additionally, a follow-up CL will come out to reconfigure the current
reflection tests for type and open to use established reflection test
methodology
(ex: https://cs.chromium.org/chromium/src/third_party/blink/web_tests/wpt_internal/std-switch/tentative/form-associated-basic.js)

Bug: 972945
Change-Id: I58c7079dc4f748928eea44103dece835e549986e
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1708313
Commit-Queue: Jack Steinberg <jacksteinberg@chromium.org>
Reviewed-by: Fergal Daly <fergal@chromium.org>
Cr-Commit-Position: refs/heads/master@{#680073}
---
 std-toast/attributes.html | 43 ++++++++++++++++++++++++++++++++++++++-
 std-toast/styles.html     | 38 +++++++++++++++++++++++++++++++++-
 2 files changed, 79 insertions(+), 2 deletions(-)

diff --git a/std-toast/attributes.html b/std-toast/attributes.html
index 97bab585c704535..6b6aca6241bae96 100644
--- a/std-toast/attributes.html
+++ b/std-toast/attributes.html
@@ -115,7 +115,48 @@
 }, 'toggling open attribute does not start timeout');
 
 testToastElement((toast) => {
-    const permitted_properties = ['constructor', 'show', 'hide', 'toggle', 'open', 'action', 'closeButton'];
+    const permitted_properties = ['constructor', 'show', 'hide', 'toggle', 'open', 'action', 'closeButton', 'type'];
     assert_array_equals(permitted_properties.sort(), Object.getOwnPropertyNames(toast.__proto__).sort());
 }, 'toast only exposes certain properties');
+
+testToastElement((toast) => {
+    assert_false(toast.hasAttribute('type'));
+    assert_equals(toast.type, '');
+}, 'default type is empty string without attribute present');
+
+testToastElement((toast) => {
+    toast.type = 'warning';
+    assert_equals(toast.getAttribute('type'), 'warning');
+    assert_equals(toast.type, 'warning');
+}, 'setting type property to an enumerated value changes the type attribute to that value');
+
+testToastElement((toast) => {
+    toast.type = 'WaRnInG';
+    assert_equals(toast.getAttribute('type'), 'WaRnInG');
+    assert_equals(toast.type, 'warning');
+}, 'setting type property to an enumerated value is case-insensitive');
+
+testToastElement((toast) => {
+    toast.type = '  WaRnInG ';
+    assert_equals(toast.getAttribute('type'), '  WaRnInG ');
+    assert_equals(toast.type, '');
+}, 'setting type property to an enumerated value with whitespace does not work');
+
+testToastElement((toast) => {
+    toast.type = 'test';
+    assert_equals(toast.type, '');
+    assert_equals(toast.getAttribute('type'), 'test');
+}, 'setting type to a non-enumerated value sets the type property to empty string');
+
+testToastElement((toast) => {
+    toast.setAttribute('type', 'test');
+    assert_equals(toast.type, '');
+    assert_equals(toast.getAttribute('type'), 'test');
+}, 'setting type attribute to a non-enumerated value sets the type property to empty string');
+
+testToastElement((toast) => {
+    toast.type = 'info';
+    assert_equals(toast.type, '');
+    assert_equals(toast.getAttribute('type'), 'info');
+}, 'info was briefly a valid type, but no longer is, so it will return empty string');
 </script>
diff --git a/std-toast/styles.html b/std-toast/styles.html
index 98e6723c3c8b16f..1db8620485dc459 100644
--- a/std-toast/styles.html
+++ b/std-toast/styles.html
@@ -61,4 +61,40 @@
 
     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
+
+testToastElement((toast) => {
+  toast.type = 'error';
+
+  const styles = window.getComputedStyle(toast);
+  assert_equals(styles.borderColor, 'rgb(255, 0, 0)');
+}, 'changing type to error changes the border color to red');
+
+testToastElement((toast) => {
+  toast.type = 'warning';
+
+  const styles = window.getComputedStyle(toast);
+  assert_equals(styles.borderColor, 'rgb(255, 165, 0)');
+}, 'changing type to warning changes the border color to orange');
+
+testToastElement((toast) => {
+  toast.type = 'success';
+
+  const styles = window.getComputedStyle(toast);
+  assert_equals(styles.borderColor, 'rgb(0, 128, 0)');
+}, 'changing type to success changes the border color to green');
+
+testToastElement((toast) => {
+  const styler = document.createElement('style');
+  styler.append(`
+    [type=error i] {
+      border-color: pink;
+    }
+  `);
+  document.querySelector('main').appendChild(styler);
+
+  toast.type = 'error';
+
+  const styles = window.getComputedStyle(toast);
+  assert_equals(styles.borderColor, 'rgb(255, 192, 203)');
+}, 'outside styles can set type styles');
+</script>