зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1740373 [wpt PR 31568] - [SelectMenu] Fix popup position when zoom is used., a=testonly
Automatic update from web-platform-tests [SelectMenu] Fix popup position when zoom is used. This CL fixes the popup position when zoom is used by ensuring that the computed coordinates are zoom adjusted. This CL also updates the behavior so that recomputing the position isn't required only when the popup is closed since there are some cases where the position needs to be recomputed (e.g. popup receives focus when the scrollbar is clicked). The new behavior is validated by: selectmenu-popup-position-with-zoom and selectmenu-many-options. Bug: 1121840 Change-Id: Ib924000963a241825b83b4555b25c75c5470f097 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3271770 Commit-Queue: Ionel Popescu <iopopesc@microsoft.com> Reviewed-by: Mason Freed <masonf@chromium.org> Reviewed-by: Dan Clark <daniec@microsoft.com> Cr-Commit-Position: refs/heads/main@{#940173} -- wpt-commits: 60960e42ad3db540d6bf8310e0cd1f1f9e1948af wpt-pr: 31568
This commit is contained in:
Ionel Popescu
moz-wptsync-bot
Родитель
62ecab46ee
Коммит
1a7f7d9a80
|
|
@ -0,0 +1,131 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<title>HTMLSelectMenuElement Test: many options</title>
|
||||
<link rel="author" title="Ionel Popescu" href="mailto:iopopesc@microsoft.com">
|
||||
<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>
|
||||
|
||||
<style>
|
||||
#selectMenu0 {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<selectmenu id="selectMenu0">
|
||||
<popup slot="listbox" behavior="listbox" id="selectMenu0-popup">
|
||||
<option>bottom left</option>
|
||||
<option>two</option>
|
||||
<option>three</option>
|
||||
<option>two</option>
|
||||
<option>three</option>
|
||||
<option>two</option>
|
||||
<option>three</option>
|
||||
<option>two</option>
|
||||
<option>three</option>
|
||||
<option>two</option>
|
||||
<option>three</option>
|
||||
<option>two</option>
|
||||
<option>three</option>
|
||||
<option>two</option>
|
||||
<option>three</option>
|
||||
<option>two</option>
|
||||
<option>three</option>
|
||||
<option>two</option>
|
||||
<option>three</option>
|
||||
<option>two</option>
|
||||
<option>three</option>
|
||||
<option>two</option>
|
||||
<option>three</option>
|
||||
<option>two</option>
|
||||
<option>three</option>
|
||||
<option>two</option>
|
||||
<option>three</option>
|
||||
<option>two</option>
|
||||
<option>three</option>
|
||||
<option>two</option>
|
||||
<option>three</option>
|
||||
<option>two</option>
|
||||
<option>three</option>
|
||||
<option>two</option>
|
||||
<option>three</option>
|
||||
<option>two</option>
|
||||
<option>three</option>
|
||||
<option>two</option>
|
||||
<option>three</option>
|
||||
<option>two</option>
|
||||
<option>three</option>
|
||||
<option>two</option>
|
||||
<option>three</option>
|
||||
<option>two</option>
|
||||
<option>three</option>
|
||||
<option>two</option>
|
||||
<option>three</option>
|
||||
<option>two</option>
|
||||
<option>three</option>
|
||||
<option>two</option>
|
||||
<option>three</option>
|
||||
<option>two</option>
|
||||
<option>three</option>
|
||||
<option>two</option>
|
||||
<option>three</option>
|
||||
<option>two</option>
|
||||
<option>three</option>
|
||||
<option>two</option>
|
||||
<option>three</option>
|
||||
<option>two</option>
|
||||
<option>three</option>
|
||||
<option>two</option>
|
||||
<option>three</option>
|
||||
<option>two</option>
|
||||
<option>three</option>
|
||||
<option>two</option>
|
||||
<option>three</option>
|
||||
<option>two</option>
|
||||
<option>three</option>
|
||||
<option>two</option>
|
||||
<option>three</option>
|
||||
<option>two</option>
|
||||
<option>three</option>
|
||||
<option>two</option>
|
||||
<option>three</option>
|
||||
<option>two</option>
|
||||
<option>three</option>
|
||||
<option>two</option>
|
||||
<option>three</option>
|
||||
<option>two</option>
|
||||
<option>three</option>
|
||||
<option>two</option>
|
||||
<option>three</option>
|
||||
<option>two</option>
|
||||
<option>three</option>
|
||||
<option>two</option>
|
||||
<option>three</option>
|
||||
</popup>
|
||||
</selectmenu>
|
||||
<br>
|
||||
|
||||
<script>
|
||||
function clickOn(element) {
|
||||
const actions = new test_driver.Actions();
|
||||
return actions.pointerMove(0, 0, {origin: element})
|
||||
.pointerDown({button: actions.ButtonType.LEFT})
|
||||
.pointerUp({button: actions.ButtonType.LEFT})
|
||||
.send();
|
||||
}
|
||||
|
||||
promise_test(async () => {
|
||||
const selectMenu0 = document.getElementById("selectMenu0");
|
||||
const selectMenu0Popup = document.getElementById("selectMenu0-popup");
|
||||
|
||||
await clickOn(selectMenu0);
|
||||
assert_equals(Math.round(selectMenu0.getBoundingClientRect().bottom), Math.round(selectMenu0Popup.getBoundingClientRect().top));
|
||||
assert_equals(Math.round(selectMenu0.getBoundingClientRect().left), Math.round(selectMenu0Popup.getBoundingClientRect().left));
|
||||
assert_equals(window.innerHeight, Math.round(selectMenu0Popup.getBoundingClientRect().bottom));
|
||||
}, "The popup should be bottom left positioned");
|
||||
|
||||
</script>
|
||||
|
|
@ -25,10 +25,14 @@
|
|||
/* Per settings in test file: */
|
||||
width: fit-content;
|
||||
height: fit-content;
|
||||
border: 1px solid;
|
||||
padding: 1em;
|
||||
background: -internal-light-dark(white, black);
|
||||
color: -internal-light-dark(black, white);
|
||||
border: 1px solid rgba(0, 0, 0, 0.15);
|
||||
border-radius: 0px;
|
||||
box-shadow: 0px 12.8px 28.8px rgba(0, 0, 0, 0.13), 0px 0px 9.2px rgba(0, 0, 0, 0.11);
|
||||
box-sizing: border-box;
|
||||
overflow: auto;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
selectmenu {
|
||||
|
|
|
|||
|
|
@ -20,10 +20,14 @@
|
|||
popup {
|
||||
width: fit-content;
|
||||
height: fit-content;
|
||||
border: 1px solid;
|
||||
padding: 1em;
|
||||
background: white;
|
||||
color: black;
|
||||
border: 1px solid rgba(0, 0, 0, 0.15);
|
||||
border-radius: 0px;
|
||||
box-shadow: 0px 12.8px 28.8px rgba(0, 0, 0, 0.13), 0px 0px 9.2px rgba(0, 0, 0, 0.11);
|
||||
box-sizing: border-box;
|
||||
overflow: auto;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
option {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,135 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<title>HTMLSelectMenuElement Test: popup position with zoom</title>
|
||||
<link rel="author" title="Ionel Popescu" href="mailto:iopopesc@microsoft.com">
|
||||
<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>
|
||||
|
||||
<style>
|
||||
#selectMenu0 {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
zoom: 2;
|
||||
}
|
||||
|
||||
#selectMenu1 {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
zoom: 1.5;
|
||||
}
|
||||
|
||||
#selectMenu1-popup {
|
||||
zoom: 2;
|
||||
}
|
||||
|
||||
#selectMenu2 {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
zoom: 3;
|
||||
}
|
||||
|
||||
#selectMenu3 {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
right: 0px;
|
||||
zoom: 4;
|
||||
}
|
||||
|
||||
#selectMenu3-popup {
|
||||
zoom: 1.5;
|
||||
}
|
||||
</style>
|
||||
|
||||
<selectmenu id="selectMenu0">
|
||||
<div slot="button" behavior="button" id="selectMenu0-button">Custom bottom left</div>
|
||||
<popup slot="listbox" behavior="listbox" id="selectMenu0-popup">
|
||||
<option>bottom left</option>
|
||||
<option>two</option>
|
||||
<option>three</option>
|
||||
</popup>
|
||||
</selectmenu>
|
||||
<br>
|
||||
|
||||
<selectmenu id="selectMenu1">
|
||||
<div slot="button" behavior="button" id="selectMenu1-button">Custom top left</div>
|
||||
<popup slot="listbox" behavior="listbox" id="selectMenu1-popup">
|
||||
<option>top left</option>
|
||||
<option>two</option>
|
||||
<option>three</option>
|
||||
</popup>
|
||||
</selectmenu>
|
||||
|
||||
<selectmenu id="selectMenu2">
|
||||
<div slot="button" behavior="button" id="selectMenu2-button">Custom bottom right</div>
|
||||
<popup slot="listbox" behavior="listbox" id="selectMenu2-popup">
|
||||
<option>bottom right</option>
|
||||
<option>two</option>
|
||||
<option>three</option>
|
||||
</popup>
|
||||
</selectmenu>
|
||||
|
||||
<selectmenu id="selectMenu3">
|
||||
<div slot="button" behavior="button" id="selectMenu3-button">Custom top right</div>
|
||||
<popup slot="listbox" behavior="listbox" id="selectMenu3-popup">
|
||||
<option>top right</option>
|
||||
<option>two</option>
|
||||
<option>three</option>
|
||||
</popup>
|
||||
</selectmenu>
|
||||
|
||||
<script>
|
||||
function clickOn(element) {
|
||||
const actions = new test_driver.Actions();
|
||||
return actions.pointerMove(0, 0, {origin: element})
|
||||
.pointerDown({button: actions.ButtonType.LEFT})
|
||||
.pointerUp({button: actions.ButtonType.LEFT})
|
||||
.send();
|
||||
}
|
||||
|
||||
promise_test(async () => {
|
||||
const selectMenu0 = document.getElementById("selectMenu0");
|
||||
const selectMenu0Popup = document.getElementById("selectMenu0-popup");
|
||||
const selectMenu0Button = document.getElementById("selectMenu0-button");
|
||||
|
||||
await clickOn(selectMenu0);
|
||||
assert_equals(Math.round(selectMenu0.getBoundingClientRect().bottom), Math.round(selectMenu0Popup.getBoundingClientRect().top));
|
||||
assert_equals(Math.round(selectMenu0.getBoundingClientRect().left), Math.round(selectMenu0Popup.getBoundingClientRect().left));
|
||||
}, "The popup should be bottom left positioned");
|
||||
|
||||
promise_test(async () => {
|
||||
const selectMenu1 = document.getElementById("selectMenu1");
|
||||
const selectMenu1Popup = document.getElementById("selectMenu1-popup");
|
||||
const selectMenu1Button = document.getElementById("selectMenu1-button");
|
||||
|
||||
selectMenu1Button.click();
|
||||
assert_equals(Math.round(selectMenu1.getBoundingClientRect().top), Math.round(selectMenu1Popup.getBoundingClientRect().bottom * 2));
|
||||
assert_equals(Math.round(selectMenu1.getBoundingClientRect().left), Math.round(selectMenu1Popup.getBoundingClientRect().left * 2));
|
||||
}, "The popup should be top left positioned");
|
||||
|
||||
promise_test(async () => {
|
||||
const selectMenu2 = document.getElementById("selectMenu2");
|
||||
const selectMenu2Popup = document.getElementById("selectMenu2-popup");
|
||||
const selectMenu2Button = document.getElementById("selectMenu2-button");
|
||||
|
||||
selectMenu2Button.click();
|
||||
assert_equals(Math.round(selectMenu2.getBoundingClientRect().bottom), Math.round(selectMenu2Popup.getBoundingClientRect().top));
|
||||
assert_equals(Math.round(selectMenu2.getBoundingClientRect().right), Math.round(selectMenu2Popup.getBoundingClientRect().right));
|
||||
}, "The popup should be bottom right positioned");
|
||||
|
||||
promise_test(async () => {
|
||||
const selectMenu3 = document.getElementById("selectMenu3");
|
||||
const selectMenu3Popup = document.getElementById("selectMenu3-popup");
|
||||
const selectMenu3Button = document.getElementById("selectMenu3-button");
|
||||
|
||||
selectMenu3Button.click();
|
||||
assert_equals(Math.round(selectMenu3.getBoundingClientRect().top), Math.round(selectMenu3Popup.getBoundingClientRect().bottom * 1.5));
|
||||
assert_equals(Math.round(selectMenu3.getBoundingClientRect().right), Math.round(selectMenu3Popup.getBoundingClientRect().right * 1.5));
|
||||
}, "The popup should be top right positioned");
|
||||
|
||||
</script>
|
||||
Загрузка…
Ссылка в новой задаче