Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(42)

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: LayoutTests/fast/forms/select/popup-menu-position.html

Issue 736883002: Implement <select> Popup Menu using PagePopup (Closed) Base URL: svn://svn.chromium.org/blink/trunk
Patch Set: Created 6 years ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « LayoutTests/fast/forms/select/popup-menu-mouse-operations-expected.txt ('k') | LayoutTests/fast/forms/select/popup-menu-position-expected.txt » ('j') | Source/web/resources/pickerCommon.js » ('J')
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: LayoutTests/fast/forms/select/popup-menu-position.html
diff --git a/LayoutTests/fast/forms/select/popup-menu-position.html b/LayoutTests/fast/forms/select/popup-menu-position.html
new file mode 100644
index 0000000000000000000000000000000000000000..486c1c14327d13ae7facd6c62a44d91ea7f9fbf9
--- /dev/null
+++ b/LayoutTests/fast/forms/select/popup-menu-position.html
@@ -0,0 +1,169 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script src="../../../resources/js-test.js"></script>
+<script src="../resources/picker-common.js"></script>
+</head>
+<body>
+<style>
+select {
+ position: absolute;
+ -webkit-appearance: none;
+}
+</style>
+<select id="menu" style="width: 200px; height: 10px;">
+</select>
+<p id="description" style="opacity: 0"></p>
+<div id="console" style="opacity: 0"></div>
+<script>
+var menu = document.getElementById('menu');
+var screenWidth = 500;
+var screenHeight = 500;
+var menuWidth = 200;
+var menuHeight = 10;
+test1();
+
+function test1() {
+ // Position menu at top left.
+ menu.style.top = 0;
+ menu.style.left = 0;
+ setItemCount(1);
+ openPicker(menu, function () {
+ injectFakeScreenSize()
+ injectFakeItemSize(20, 100, test2);
+ });
+}
+function test2() {
tkent 2014/12/17 01:06:21 nit: add a blank line between functions.
keishi 2014/12/22 05:03:54 Done.
+ popupWindowRect = getPopupWindowRect();
+ shouldBe('popupWindowRect.x', '0');
+ shouldBe('popupWindowRect.y', 'menuHeight');
+
+ popupWindow.pagePopupController.closePopup();
+ // Position menu at bottom right.
+ menu.style.top = (screenHeight - menuHeight) + 'px';
+ menu.style.left = (screenWidth - menuWidth) + 'px';
+ setItemCount(1);
+ openPicker(menu, function () {
+ injectFakeScreenSize();
+ injectFakeItemSize(20, 100, test3);
+ });
+}
+function test3() {
tkent 2014/12/17 01:06:21 Ditto.
keishi 2014/12/22 05:03:54 Done.
+ popupWindowRect = getPopupWindowRect();
+ shouldBe('popupWindowRect.x', 'screenWidth - popupWindowRect.width');
+ shouldBe('popupWindowRect.y', 'screenHeight - popupWindowRect.height - menuHeight');
+
+ popupWindow.pagePopupController.closePopup();
+ // Position menu at right edge, clipped.
+ menu.style.top = '0';
+ menu.style.left = (screenWidth - 100) + 'px';
+ setItemCount(1);
+ openPicker(menu, function () {
+ injectFakeScreenSize();
+ injectFakeItemSize(200, 100, test4);
+ });
+}
+function test4() {
tkent 2014/12/17 01:06:21 Ditto.
keishi 2014/12/22 05:03:54 Done.
+ popupWindowRect = getPopupWindowRect();
+ shouldBe('popupWindowRect.x', 'screenWidth - menuWidth');
+ shouldBe('popupWindowRect.y', 'menuHeight');
+
+ popupWindow.pagePopupController.closePopup();
+ // Position menu at left edge, clipped.
+ menu.style.top = '0';
+ menu.style.left = '-100px';
+ setItemCount(1);
+ openPicker(menu, function () {
+ injectFakeScreenSize();
+ injectFakeItemSize(200, 100, test5);
+ });
+}
+function test5() {
+ popupWindowRect = getPopupWindowRect();
+ shouldBe('popupWindowRect.x', '0');
+ shouldBe('popupWindowRect.y', 'menuHeight');
+
+ popupWindow.pagePopupController.closePopup();
+ // Position close to right edge.
+ menu.style.top = '0';
+ menu.style.left = (screenWidth - menuWidth - 10) + 'px';
+ setItemCount(1);
+ openPicker(menu, function () {
+ injectFakeScreenSize();
+ injectFakeItemSize(250, 100, test6);
+ });
+}
+function test6() {
+ popupWindowRect = getPopupWindowRect();
+ // Popup should appear right at the right edge of the screen.
+ shouldBe('popupWindowRect.x', 'screenWidth - 250');
+ shouldBe('popupWindowRect.y', 'menuHeight');
+
+ popupWindow.pagePopupController.closePopup();
+ // Position close to bottom edge.
+ menu.style.top = (screenHeight - 100) + 'px';
+ menu.style.left = '0';
+ setItemCount(2);
+ openPicker(menu, function () {
+ injectFakeScreenSize();
+ injectFakeItemSize(200, 100, test7);
+ });
+}
+function test7() {
tkent 2014/12/17 01:06:21 Ditto.
keishi 2014/12/22 05:03:54 Done.
+ popupWindowRect = getPopupWindowRect();
+ // Popup should appear right at the right edge of the screen.
+ shouldBe('popupWindowRect.x', '0');
+ shouldBe('popupWindowRect.y', 'screenHeight - 100 - popupWindowRect.height');
+
+
+ popupWindow.pagePopupController.closePopup();
+ // Apply transform.
+ menu.style.transform = 'scale(1.2)';
+ menu.style.top = '100px';
+ menu.style.left = '100px';
+ setItemCount(1);
+ openPicker(menu, function () {
+ injectFakeScreenSize();
+ injectFakeItemSize(200, 100, test8);
+ });
+}
+function test8() {
tkent 2014/12/17 01:06:21 Ditto.
keishi 2014/12/22 05:03:54 Done.
+ popupWindowRect = getPopupWindowRect();
+ shouldBe('popupWindowRect.x', '100 - menuWidth * 0.1');
+ shouldBe('popupWindowRect.y', '100 + menuHeight * 1.1');
+
+ finishJSTest();
+}
+
+function getPopupWindowRect() {
+ return new popupWindow.Rectangle(popupWindow.screenX - window.screen.availLeft, popupWindow.screenY - window.screen.availTop, popupWindow.innerWidth, popupWindow.innerHeight);
+}
+function setItemCount(count) {
tkent 2014/12/17 01:06:21 Ditto.
keishi 2014/12/22 05:03:54 Done.
+ menu.innerHTML = '';
+ for (var i = 0; i < count; i++) {
+ var option = document.createElement('option');
+ menu.appendChild(option);
+ }
+}
+function injectFakeScreenSize() {
tkent 2014/12/17 01:06:21 Ditto.
keishi 2014/12/22 05:03:54 Done.
+ Object.defineProperty(popupWindow, 'screen', {
+ value: {
+ width: screenWidth,
+ height: screenHeight,
+ availLeft: window.screen.availLeft,
+ availTop: window.screen.availTop,
+ availWidth: screenWidth,
+ availHeight: screenHeight
+ }
+ });
+}
+function injectFakeItemSize(width, height, callback) {
tkent 2014/12/17 01:06:21 Ditto.
keishi 2014/12/22 05:03:54 Done.
+ var style = popupWindow.document.createElement('style');
+ style.innerHTML = 'select { width: ' + width + 'px !important; } option { height: ' + height + 'px; }';
+ popupWindow.document.body.appendChild(style);
+ popupWindow.global.picker._fixWindowSize();
+ popupWindow.addEventListener('resize', callback, false);
+}
+</script>
+</body>
+</html>
« no previous file with comments | « LayoutTests/fast/forms/select/popup-menu-mouse-operations-expected.txt ('k') | LayoutTests/fast/forms/select/popup-menu-position-expected.txt » ('j') | Source/web/resources/pickerCommon.js » ('J')

Powered by Google App Engine
This is Rietveld 408576698