Bug 1567380 [wpt PR 17923] - Add toast type attribute support with ID…

…L property and default styles, a=testonly

Automatic update from web-platform-tests
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:
jackbsteinberg/std-toast#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 <[email protected]>
Reviewed-by: Fergal Daly <[email protected]>
Cr-Commit-Position: refs/heads/master@{#680073}

--

wpt-commits: 109a7d171d08bceb61dce865576de3c15f61c16c
wpt-pr: 17923

testing/web-platform/tests/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>

testing/web-platform/tests/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>
+
+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>