Add exceptions for a few elements that do rely on their frame tree size (mostly text controls). These are fixable but separate bug at the very least. Add reftests for <iframe> and <img>. Also, test all HTML elements in all writing modes to ensure that they don't trigger assertions. The <svg> case can't be easily reftested, afaict, because fullscreen will change the size of the reftest window and <svg> doesn't support popover. Differential Revision: https://phabricator.services.mozilla.com/D282451
62 lines
2.6 KiB
HTML
62 lines
2.6 KiB
HTML
<!DOCTYPE html>
|
|
<meta charset="utf-8">
|
|
<link rel="author" href="mailto:masonf@chromium.org">
|
|
<link rel=help href="https://open-ui.org/components/popover.research.explainer">
|
|
<meta name="timeout" content="long">
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<script src="/resources/testdriver.js"></script>
|
|
<script src="/resources/testdriver-actions.js"></script>
|
|
<script src="/resources/testdriver-vendor.js"></script>
|
|
<script src="resources/popover-utils.js"></script>
|
|
<script src="../../resources/common.js"></script>
|
|
|
|
<body>
|
|
<script>
|
|
setup({ explicit_done: true });
|
|
window.onload = () => {
|
|
// Loop through all HTML elements that render a box by default:
|
|
let elementsThatDontRender = ['area', 'audio','base','br','datalist','dialog','embed','head','link','meta','noscript','optgroup','option','param','rp','script','slot','style','template','title','wbr'];
|
|
const elements = HTML5_ELEMENTS.filter(el => !elementsThatDontRender.includes(el));
|
|
elements.forEach(tag => {
|
|
test((t) => {
|
|
const element = document.createElement(tag);
|
|
element.setAttribute('popover','auto');
|
|
document.body.appendChild(element);
|
|
t.add_cleanup(() => element.remove());
|
|
assertIsFunctionalPopover(element, true);
|
|
}, `A <${tag} popover> should behave as a popover.`);
|
|
for (let dir of ["ltr", "rtl"]) {
|
|
for (let wm of ["horizontal-tb", "vertical-rl", "vertical-lr", "sideways-rl", "sideways-lr"]) {
|
|
test((t) => {
|
|
const element = document.createElement(tag);
|
|
element.setAttribute('popover','auto');
|
|
element.setAttribute("dir", dir);
|
|
element.style.writingMode = wm;
|
|
document.body.appendChild(element);
|
|
t.add_cleanup(() => element.remove());
|
|
element.showPopover({ modal: true });
|
|
element.getBoundingClientRect();
|
|
}, `A <${tag} popover> with direction=${dir}, wm=${wm} element should not assert.`);
|
|
}
|
|
}
|
|
test((t) => {
|
|
const element = document.createElement(tag);
|
|
document.body.appendChild(element);
|
|
t.add_cleanup(() => element.remove());
|
|
assertNotAPopover(element);
|
|
}, `A <${tag}> element without popover attr should *not* behave as a popover.`);
|
|
});
|
|
elementsThatDontRender.forEach(tag => {
|
|
test((t) => {
|
|
const element = document.createElement(tag);
|
|
element.setAttribute('popover','auto');
|
|
document.body.appendChild(element);
|
|
t.add_cleanup(() => element.remove());
|
|
assertIsFunctionalPopover(element, false);
|
|
}, `A <${tag} popover> element should not be rendered.`);
|
|
});
|
|
done();
|
|
};
|
|
</script>
|