Skip to content

GitLab

T
tangled
Commit 9c7e7252 authored by Jack Steinberg's avatar Jack Steinberg Committed by Commit Bot
Browse files
Options

Add slotting for toast action buttons, 

alongside test scaffolding for future action testing.

BUG=972945

Change-Id: I852f3aa0603e87e8cb6c66e47837512b88ec0193
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1682474
Commit-Queue: Jack Steinberg <jacksteinberg@chromium.org>
Reviewed-by: default avatarFergal Daly <fergal@chromium.org>
Reviewed-by: default avatarKent Tamura <tkent@chromium.org>
Cr-Commit-Position: refs/heads/master@{#675883}
parent 39302750
Hide whitespace changes
Inline Side-by-side
Showing with 37 additions and 2 deletions
third_party/blink/renderer/core/script/resources/layered_api/elements/toast/index.mjs
View file @ 9c7e7252
...@@ -51,6 +51,7 @@ export class StdToastElement extends HTMLElement { ...@@ -51,6 +51,7 @@ export class StdToastElement extends HTMLElement {
static observedAttributes = ['open']; static observedAttributes = ['open'];
#shadow = this.attachShadow({mode: 'closed'}); #shadow = this.attachShadow({mode: 'closed'});
#timeoutID; #timeoutID;
#actionSlot;
constructor(message) { constructor(message) {
super(); super();
...@@ -58,6 +59,10 @@ export class StdToastElement extends HTMLElement { ...@@ -58,6 +59,10 @@ export class StdToastElement extends HTMLElement {
this.#shadow.adoptedStyleSheets = [generateStylesheet()]; this.#shadow.adoptedStyleSheets = [generateStylesheet()];
this.#shadow.innerHTML = `<slot></slot>`; this.#shadow.innerHTML = `<slot></slot>`;
this.#actionSlot = document.createElement('slot');
this.#actionSlot.setAttribute('name', 'action');
this.#shadow.appendChild(this.#actionSlot);
if (message !== undefined) { if (message !== undefined) {
this.textContent = message; this.textContent = message;
} }
......
third_party/blink/web_tests/external/wpt/std-toast/ref-tests/toast-slotting-expected.html 0 → 100644
View file @ 9c7e7252
<!DOCTYPE html>
<meta charset="utf-8">
<title>Toast: slotting test reference</title>
<script type="module">
import 'std:elements/toast';
</script>
<p>Pass if the toast is displayed with the action button last.</p>
<std-toast open>First. Second. <button>Last.</button></std-toast>
third_party/blink/web_tests/external/wpt/std-toast/ref-tests/toast-slotting.html 0 → 100644
View file @ 9c7e7252
<!DOCTYPE html>
<meta charset="utf-8">
<title>Toast: slotting test</title>
<link rel="help" href="https://github.com/jackbsteinberg/std-toast">
<meta name="assert" content="Toast slots action button behind any text">
<link rel="match" href="toast-slotting-expected.html">
<script type="module">
import 'std:elements/toast';
</script>
<p>Pass if the toast is displayed with the action button last.</p>
<std-toast open>First. <button slot="action">Last.</button> Second. </std-toast>
\ No newline at end of file
third_party/blink/web_tests/external/wpt/std-toast/resources/helpers.js
View file @ 9c7e7252
...@@ -2,10 +2,10 @@ import { showToast, StdToastElement } from 'std:elements/toast'; ...@@ -2,10 +2,10 @@ import { showToast, StdToastElement } from 'std:elements/toast';
// helper functions to keep tests from bleeding into each other // helper functions to keep tests from bleeding into each other
const runTest = (testFn, name, toast) => { const runTest = (testFn, name, toast, action) => {
try { try {
test(() => { test(() => {
testFn(toast); testFn(toast, action);
}, name); }, name);
} finally { } finally {
toast.remove(); toast.remove();
...@@ -41,6 +41,17 @@ export const testShowToast = (testFn, name) => { ...@@ -41,6 +41,17 @@ export const testShowToast = (testFn, name) => {
runTest(testFn, name, toast); runTest(testFn, name, toast);
}; };
export const testActionToast = (testFn, name) => {
const toast = new StdToastElement('Message', {});
const action = document.createElement('button');
action.setAttribute('slot', 'action');
action.textContent = 'action';
toast.appendChild(action);
document.querySelector('main').appendChild(toast);
runTest(testFn, name, toast, action);
};
export const assertToastShown = (toast) => { export const assertToastShown = (toast) => {
assert_not_equals(window.getComputedStyle(toast).display, 'none'); assert_not_equals(window.getComputedStyle(toast).display, 'none');
assert_true(toast.hasAttribute('open')); assert_true(toast.hasAttribute('open'));
......
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