Create an attribute and property for toast closebutton and attach clo…

…se functionality This change sets the groundwork for the toast closebutton, by adding an attribute to set the closebutton content, creating a closeButton property to reflect that attribute, and adding an event listener to close the toast when the closebutton is pressed. This change implements the close button API described in (https://github.com/jackbsteinberg/std-toast/blob/eec7728f7082a897d777181ac07b0448062ffca5/README.md), and is the subject of debate on issue web-platform-tests#48 on the explainer here jackbsteinberg/std-toast#48. Future CLs will add the closeButton option for showToast (https://github.com/jackbsteinberg/std-toast/tree/master#showtoastmessage-options) Link: https://chromium-review.googlesource.com/c/chromium/src/+/1706453 Bug: 972945 Change-Id: I5d6c3055791a9f93ef414e575e128c61e2a944ed Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1699269 Reviewed-by: Fergal Daly <fergal@chromium.org> Reviewed-by: Kent Tamura <tkent@chromium.org> Commit-Queue: Jack Steinberg <jacksteinberg@chromium.org> Cr-Commit-Position: refs/heads/master@{#678530}
natechapin · Aug 23, 2019 · 2b9bd37 · 2b9bd37
1 parent 26096a6
commit 2b9bd37
Show file tree

Hide file tree

Showing 2 changed files with 82 additions and 1 deletion.
diff --git a/std-toast/attributes.html b/std-toast/attributes.html
@@ -115,7 +115,7 @@
 }, 'toggling open attribute does not start timeout');
 
 testToastElement((toast) => {
-    const permitted_properties = ['constructor', 'show', 'hide', 'toggle', 'open', 'action'];
+    const permitted_properties = ['constructor', 'show', 'hide', 'toggle', 'open', 'action', 'closeButton'];
     assert_array_equals(permitted_properties.sort(), Object.getOwnPropertyNames(toast.__proto__).sort());
 }, 'toast only exposes certain properties');
 </script>
diff --git a/std-toast/closebutton.html b/std-toast/closebutton.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Toast: closebutton tests</title>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<main></main>
+
+<script type="module">
+import { testToastElement } from './resources/helpers.js';
+
+testToastElement((toast) => {
+    toast.setAttribute('closebutton', '');
+
+    assert_true(toast.closeButton);
+}, 'the closeButton property returns true with an empty attribute');
+
+testToastElement((toast) => {
+    toast.setAttribute('closebutton', 'dismiss');
+
+    assert_equals(toast.closeButton, 'dismiss');
+}, 'the closeButton property returns the set attribute value');
+
+testToastElement((toast) => {
+    assert_false(toast.closeButton);
+}, 'the closeButton property returns false with no attribute');
+
+testToastElement((toast) => {
+    toast.setAttribute('closebutton', '');
+    assert_true(toast.closeButton);
+
+    toast.setAttribute('closebutton', 'dismiss');
+    assert_equals(toast.closeButton, 'dismiss');
+
+    toast.removeAttribute('closebutton');
+    assert_false(toast.closeButton);
+}, 'the closeButton property changes when the attribute changes');
+
+testToastElement((toast) => {
+    toast.closeButton = 'dismiss';
+
+    assert_equals(toast.getAttribute('closebutton'), 'dismiss');
+}, 'setting the closeButton property to any string changes the attribute to that string');
+
+testToastElement((toast) => {
+    toast.closeButton = '';
+
+    assert_equals(toast.getAttribute('closebutton'), '');
+}, 'setting the closeButton property to empty string changes the attribute to empty string');
+
+testToastElement((toast) => {
+    toast.closeButton = true;
+
+    assert_equals(toast.getAttribute('closebutton'), '');
+}, 'setting the closeButton property to true changes the attribute to empty string');
+
+testToastElement((toast) => {
+    toast.closeButton = false;
+
+    assert_false(toast.hasAttribute('closebutton'));
+}, 'setting the closeButton property to false removes the attribute');
+
+testToastElement((toast) => {
+    toast.closeButton = undefined;
+
+    assert_equals(toast.getAttribute('closebutton'), 'undefined');
+}, 'setting the closeButton property to undefined stringifies and sets to that');
+
+testToastElement((toast) => {
+    toast.closeButton = null;
+
+    assert_equals(toast.getAttribute('closebutton'), 'null');
+}, 'setting the closeButton property to null stringifies and sets to that');
+
+testToastElement((toast) => {
+    toast.closeButton = {};
+
+    assert_equals(toast.getAttribute('closebutton'), '[object Object]');
+}, 'setting the closeButton property to {} stringifies and sets to [object Object]');
+</script>