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/resources/popup-menu-common.js » ('j') | Source/core/dom/StyleEngine.h » ('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>

	5 window.enablePixelTesting = true;

	6 </script>

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

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

	9 </head>

	10 <body>

	11 <style>

	12 select {

	13 position: absolute;

	14 -webkit-appearance: none;

	15 }

	16 </style>

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

	18 </select>

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

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

	21 <script>

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

	23 var windowWidth = 500;

	24 var windowHeight = 500;

	25 var menuWidth = 200;

	26 var menuHeight = 10;

	27 test1();

	28

	29 function test1() {

	30 // Position menu at top left.

	31 menu.style.top = 0;

	32 menu.style.left = 0;

	33 setItemCount(1);

	34 openPicker(menu, function () {

	35 injectFakeScreenSize()

	36 injectFakeItemSize(20, 100, test2);

	37 });

	38 }

	39 function test2() {

	40 popupWindowRect = getPopupWindowRect();

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

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

	43

	44 popupWindow.pagePopupController.closePopup();

	45 // Position menu at bottom right.

	46 menu.style.top = (500 - menuHeight) + 'px';

	47 menu.style.left = (500 - menuWidth) + 'px';

	48 setItemCount(1);

	49 openPicker(menu, function () {

	50 injectFakeScreenSize();

	51 injectFakeItemSize(20, 100, test3);

	52 });

	53 }

	54 function test3() {

	55 popupWindowRect = getPopupWindowRect();

	56 shouldBe('popupWindowRect.x', 'windowWidth - popupWindowRect.width');

	57 shouldBe('popupWindowRect.y', 'windowHeight - popupWindowRect.height - menuH eight');

	58

	59 popupWindow.pagePopupController.closePopup();

	60 // Position menu at right edge, clipped.

	61 menu.style.top = '0';

	62 menu.style.left = (500 - 100) + 'px';

	63 setItemCount(1);

	64 openPicker(menu, function () {

	65 injectFakeScreenSize();

	66 injectFakeItemSize(200, 100, test4);

	67 });

	68 }

	69 function test4() {

	70 popupWindowRect = getPopupWindowRect();

	71 shouldBe('popupWindowRect.x', 'windowWidth - menuWidth');

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

	73

	74 popupWindow.pagePopupController.closePopup();

	75 // Position menu at right edge, clipped.

	76 menu.style.top = '0';

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

	78 setItemCount(1);

	79 openPicker(menu, function () {

	80 injectFakeScreenSize();

	81 injectFakeItemSize(200, 100, test5);

	82 });

	83 }

	84 function test5() {

	85 popupWindowRect = getPopupWindowRect();

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

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

	88

	89 finishJSTest();

	90 }

	91

	92 function getPopupWindowRect() {

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

	94 }

	95 function setItemCount(count) {

	96 menu.innerHTML = '';

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

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

	99 menu.appendChild(option);

	100 }

	101 }

	102 function injectFakeScreenSize() {

	103 Object.defineProperty(popupWindow, 'screen', {

	104 value: {

	105 width: windowWidth,

	106 height: windowHeight,

	107 availLeft: window.screen.availLeft,

	108 availTop: window.screen.availTop,

	109 availWidth: windowWidth,

	110 availHeight: windowHeight

	111 }

	112 });

	113 }

	114 function injectFakeItemSize(width, height, callback) {

	115 var style = popupWindow.document.createElement('style');

	116 style.innerHTML = 'option { width: ' + width + 'px; height: ' + height + 'px ; }';

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

	118 popupWindow.global.picker._fixWindowSize();

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

	120 }

	121 </script>

	122 </body>

	123 </html>

OLD	NEW