LayoutTests/fast/forms/select/popup-menu-position.html - Issue 736883002: Implement <select> Popup Menu using PagePopup

Side by Side 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 unified diff | Download patch | Annotate | Revision Log

« 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')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
(Empty)
	1 <!DOCTYPE html>

	2 <html>

	3 <head>

	4 <script src="../../../resources/js-test.js"></script>

	5 <script src="../resources/picker-common.js"></script>

	6 </head>

	7 <body>

	8 <style>

	9 select {

	10 position: absolute;

	11 -webkit-appearance: none;

	12 }

	13 </style>

	14 <select id="menu" style="width: 200px; height: 10px;">

	15 </select>

	16 <p id="description" style="opacity: 0"></p>

	17 <div id="console" style="opacity: 0"></div>

	18 <script>

	19 var menu = document.getElementById('menu');

	20 var screenWidth = 500;

	21 var screenHeight = 500;

	22 var menuWidth = 200;

	23 var menuHeight = 10;

	24 test1();

	25

	26 function test1() {

	27 // Position menu at top left.

	28 menu.style.top = 0;

	29 menu.style.left = 0;

	30 setItemCount(1);

	31 openPicker(menu, function () {

	32 injectFakeScreenSize()

	33 injectFakeItemSize(20, 100, test2);

	34 });

	35 }

	36 function test2() {
	tkent 2014/12/17 01:06:21 nit: add a blank line between functions. nit: add a blank line between functions. keishi 2014/12/22 05:03:54 Done. Show quoted text On 2014/12/17 01:06:21, unavailable until Feburuary wrote: > nit: add a blank line between functions. Done.
	37 popupWindowRect = getPopupWindowRect();

	38 shouldBe('popupWindowRect.x', '0');

	39 shouldBe('popupWindowRect.y', 'menuHeight');

	40

	41 popupWindow.pagePopupController.closePopup();

	42 // Position menu at bottom right.

	43 menu.style.top = (screenHeight - menuHeight) + 'px';

	44 menu.style.left = (screenWidth - menuWidth) + 'px';

	45 setItemCount(1);

	46 openPicker(menu, function () {

	47 injectFakeScreenSize();

	48 injectFakeItemSize(20, 100, test3);

	49 });

	50 }

	51 function test3() {
	tkent 2014/12/17 01:06:21 Ditto. Ditto. keishi 2014/12/22 05:03:54 Done. Show quoted text On 2014/12/17 01:06:21, unavailable until Feburuary wrote: > Ditto. Done.
	52 popupWindowRect = getPopupWindowRect();

	53 shouldBe('popupWindowRect.x', 'screenWidth - popupWindowRect.width');

	54 shouldBe('popupWindowRect.y', 'screenHeight - popupWindowRect.height - menuH eight');

	55

	56 popupWindow.pagePopupController.closePopup();

	57 // Position menu at right edge, clipped.

	58 menu.style.top = '0';

	59 menu.style.left = (screenWidth - 100) + 'px';

	60 setItemCount(1);

	61 openPicker(menu, function () {

	62 injectFakeScreenSize();

	63 injectFakeItemSize(200, 100, test4);

	64 });

	65 }

	66 function test4() {
	tkent 2014/12/17 01:06:21 Ditto. Ditto. keishi 2014/12/22 05:03:54 Done. Show quoted text On 2014/12/17 01:06:21, unavailable until Feburuary wrote: > Ditto. Done.
	67 popupWindowRect = getPopupWindowRect();

	68 shouldBe('popupWindowRect.x', 'screenWidth - menuWidth');

	69 shouldBe('popupWindowRect.y', 'menuHeight');

	70

	71 popupWindow.pagePopupController.closePopup();

	72 // Position menu at left edge, clipped.

	73 menu.style.top = '0';

	74 menu.style.left = '-100px';

	75 setItemCount(1);

	76 openPicker(menu, function () {

	77 injectFakeScreenSize();

	78 injectFakeItemSize(200, 100, test5);

	79 });

	80 }

	81 function test5() {

	82 popupWindowRect = getPopupWindowRect();

	83 shouldBe('popupWindowRect.x', '0');

	84 shouldBe('popupWindowRect.y', 'menuHeight');

	85

	86 popupWindow.pagePopupController.closePopup();

	87 // Position close to right edge.

	88 menu.style.top = '0';

	89 menu.style.left = (screenWidth - menuWidth - 10) + 'px';

	90 setItemCount(1);

	91 openPicker(menu, function () {

	92 injectFakeScreenSize();

	93 injectFakeItemSize(250, 100, test6);

	94 });

	95 }

	96 function test6() {

	97 popupWindowRect = getPopupWindowRect();

	98 // Popup should appear right at the right edge of the screen.

	99 shouldBe('popupWindowRect.x', 'screenWidth - 250');

	100 shouldBe('popupWindowRect.y', 'menuHeight');

	101

	102 popupWindow.pagePopupController.closePopup();

	103 // Position close to bottom edge.

	104 menu.style.top = (screenHeight - 100) + 'px';

	105 menu.style.left = '0';

	106 setItemCount(2);

	107 openPicker(menu, function () {

	108 injectFakeScreenSize();

	109 injectFakeItemSize(200, 100, test7);

	110 });

	111 }

	112 function test7() {
	tkent 2014/12/17 01:06:21 Ditto. Ditto. keishi 2014/12/22 05:03:54 Done. Show quoted text On 2014/12/17 01:06:21, unavailable until Feburuary wrote: > Ditto. Done.
	113 popupWindowRect = getPopupWindowRect();

	114 // Popup should appear right at the right edge of the screen.

	115 shouldBe('popupWindowRect.x', '0');

	116 shouldBe('popupWindowRect.y', 'screenHeight - 100 - popupWindowRect.height') ;

	117

	118

	119 popupWindow.pagePopupController.closePopup();

	120 // Apply transform.

	121 menu.style.transform = 'scale(1.2)';

	122 menu.style.top = '100px';

	123 menu.style.left = '100px';

	124 setItemCount(1);

	125 openPicker(menu, function () {

	126 injectFakeScreenSize();

	127 injectFakeItemSize(200, 100, test8);

	128 });

	129 }

	130 function test8() {
	tkent 2014/12/17 01:06:21 Ditto. Ditto. keishi 2014/12/22 05:03:54 Done. Show quoted text On 2014/12/17 01:06:21, unavailable until Feburuary wrote: > Ditto. Done.
	131 popupWindowRect = getPopupWindowRect();

	132 shouldBe('popupWindowRect.x', '100 - menuWidth * 0.1');

	133 shouldBe('popupWindowRect.y', '100 + menuHeight * 1.1');

	134

	135 finishJSTest();

	136 }

	137

	138 function getPopupWindowRect() {

	139 return new popupWindow.Rectangle(popupWindow.screenX - window.screen.availLe ft, popupWindow.screenY - window.screen.availTop, popupWindow.innerWidth, popupW indow.innerHeight);

	140 }

	141 function setItemCount(count) {
	tkent 2014/12/17 01:06:21 Ditto. Ditto. keishi 2014/12/22 05:03:54 Done. Show quoted text On 2014/12/17 01:06:21, unavailable until Feburuary wrote: > Ditto. Done.
	142 menu.innerHTML = '';

	143 for (var i = 0; i < count; i++) {

	144 var option = document.createElement('option');

	145 menu.appendChild(option);

	146 }

	147 }

	148 function injectFakeScreenSize() {
	tkent 2014/12/17 01:06:21 Ditto. Ditto. keishi 2014/12/22 05:03:54 Done. Show quoted text On 2014/12/17 01:06:21, unavailable until Feburuary wrote: > Ditto. Done.
	149 Object.defineProperty(popupWindow, 'screen', {

	150 value: {

	151 width: screenWidth,

	152 height: screenHeight,

	153 availLeft: window.screen.availLeft,

	154 availTop: window.screen.availTop,

	155 availWidth: screenWidth,

	156 availHeight: screenHeight

	157 }

	158 });

	159 }

	160 function injectFakeItemSize(width, height, callback) {
	tkent 2014/12/17 01:06:21 Ditto. Ditto. keishi 2014/12/22 05:03:54 Done. Show quoted text On 2014/12/17 01:06:21, unavailable until Feburuary wrote: > Ditto. Done.
	161 var style = popupWindow.document.createElement('style');

	162 style.innerHTML = 'select { width: ' + width + 'px !important; } option { he ight: ' + height + 'px; }';

	163 popupWindow.document.body.appendChild(style);

	164 popupWindow.global.picker._fixWindowSize();

	165 popupWindow.addEventListener('resize', callback, false);

	166 }

	167 </script>

	168 </body>

	169 </html>

OLD	NEW