зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1566163 [wpt PR 17840] - Set toast default styling, a=testonly
Automatic update from web-platform-tests 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/+/1702124 Reviewed-by: Kent Tamura <tkent@chromium.org> Commit-Queue: Jack Steinberg <jacksteinberg@chromium.org> Cr-Commit-Position: refs/heads/master@{#678032} -- wpt-commits: b4b6c5833f861786f90629463aa7b98382cb2ff7 wpt-pr: 17840
This commit is contained in:
Родитель
94de10fa0c
Коммит
a0feb637d0
|
@ -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 = [];
|
||||
|
||||
|
|
|
@ -0,0 +1,64 @@
|
|||
<!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>
|
Загрузка…
Ссылка в новой задаче