chrome/test/data/webui/cr_elements/cr_action_menu_test.js - chromium/src - Git at Google

 // Copyright 2016 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.

 /**
  * @fileoverview Tests for cr-action-menu element. Runs as an interactive UI
  * test, since many of these tests check focus behavior.
  */
 suite('CrActionMenu', function() {
   /** @type {?CrActionMenuElement} */
   let menu = null;

   /** @type {?NodeList<HTMLElement>} */
   let items = null;

   /** @type {HTMLElement} */
   let dots = null;

   setup(function() {
     PolymerTest.clearBody();

     document.body.innerHTML = `
       <button id="dots">...</button>
       <dialog is="cr-action-menu">
         <button class="dropdown-item">Un</button>
         <hr>
         <button class="dropdown-item">Dos</button>
         <button class="dropdown-item">Tres</button>
       </dialog>
     `;

     menu = document.querySelector('dialog[is=cr-action-menu]');
     items = menu.querySelectorAll('.dropdown-item');
     dots = document.querySelector('#dots');
     assertEquals(3, items.length);
   });

   teardown(function() {
     document.body.style.direction = 'ltr';

     if (menu.open)
       menu.close();
   });

   function down() {
     MockInteractions.keyDownOn(menu, 'ArrowDown', [], 'ArrowDown');
   }

   function up() {
     MockInteractions.keyDownOn(menu, 'ArrowUp', [], 'ArrowUp');
   }

   test('hidden or disabled items', function() {
     menu.showAt(dots);
     down();
     assertEquals(menu.root.activeElement, items[0]);

     menu.close();
     items[0].hidden = true;
     menu.showAt(dots);
     down();
     assertEquals(menu.root.activeElement, items[1]);

     menu.close();
     items[1].disabled = true;
     menu.showAt(dots);
     down();
     assertEquals(menu.root.activeElement, items[2]);
   });

   test('focus after down/up arrow', function() {
     menu.showAt(dots);

     // The menu should be focused when shown, but not on any of the items.
     assertEquals(menu, document.activeElement);
     assertNotEquals(items[0], menu.root.activeElement);
     assertNotEquals(items[1], menu.root.activeElement);
     assertNotEquals(items[2], menu.root.activeElement);

     down();
     assertEquals(items[0], menu.root.activeElement);
     down();
     assertEquals(items[1], menu.root.activeElement);
     down();
     assertEquals(items[2], menu.root.activeElement);
     down();
     assertEquals(items[0], menu.root.activeElement);
     up();
     assertEquals(items[2], menu.root.activeElement);
     up();
     assertEquals(items[1], menu.root.activeElement);
     up();
     assertEquals(items[0], menu.root.activeElement);
     up();
     assertEquals(items[2], menu.root.activeElement);

     items[1].disabled = true;
     up();
     assertEquals(items[0], menu.root.activeElement);
   });

   test('pressing up arrow when no focus will focus last item', function() {
     menu.showAt(dots);
     assertEquals(menu, document.activeElement);

     up();
     assertEquals(items[items.length - 1], menu.root.activeElement);
   });

   test('can navigate to dynamically added items', function() {
     // Can modify children after attached() and before showAt().
     const item = document.createElement('button');
     item.classList.add('dropdown-item');
     menu.insertBefore(item, items[0]);
     menu.showAt(dots);

     down();
     assertEquals(item, menu.root.activeElement);
     down();
     assertEquals(items[0], menu.root.activeElement);

     // Can modify children while menu is open.
     menu.removeChild(item);

     up();
     // Focus should have wrapped around to final item.
     assertEquals(items[2], menu.root.activeElement);
   });

   test('close on resize', function() {
     menu.showAt(dots);
     assertTrue(menu.open);

     window.dispatchEvent(new CustomEvent('resize'));
     assertFalse(menu.open);
   });

   test('close on popstate', function() {
     menu.showAt(dots);
     assertTrue(menu.open);

     window.dispatchEvent(new CustomEvent('popstate'));
     assertFalse(menu.open);
   });

   /** @param {string} key The key to use for closing. */
   function testFocusAfterClosing(key) {
     return new Promise(function(resolve) {
       menu.showAt(dots);
       assertTrue(menu.open);

       // Check that focus returns to the anchor element.
       dots.addEventListener('focus', resolve);
       MockInteractions.keyDownOn(menu, key, [], key);
       assertFalse(menu.open);
     });
   }

   test('close on Tab', function() {
     return testFocusAfterClosing('Tab');
   });
   test('close on Escape', function() {
     return testFocusAfterClosing('Escape');
   });

   test('mouse movement focus options', function() {
     function makeMouseoverEvent(node) {
       const e = new MouseEvent('mouseover', {bubbles: true});
       node.dispatchEvent(e);
     }

     menu.showAt(dots);

     // Moving mouse on option 1 should focus it.
     assertNotEquals(items[0], menu.root.activeElement);
     makeMouseoverEvent(items[0]);
     assertEquals(items[0], menu.root.activeElement);

     // Moving mouse on the menu (not on option) should focus the menu.
     makeMouseoverEvent(menu);
     assertNotEquals(items[0], menu.root.activeElement);
     assertEquals(menu, document.activeElement);

     // Moving mouse on a disabled item should focus the menu.
     items[2].setAttribute('disabled', '');
     makeMouseoverEvent(items[2]);
     assertNotEquals(items[2], menu.root.activeElement);
     assertEquals(menu, document.activeElement);

     // Mouse movements should override keyboard focus.
     down();
     down();
     assertEquals(items[1], menu.root.activeElement);
     makeMouseoverEvent(items[0]);
     assertEquals(items[0], menu.root.activeElement);
   });

   test('items automatically given accessibility role', function() {
     const newItem = document.createElement('button');
     newItem.classList.add('dropdown-item');

     items[1].setAttribute('role', 'checkbox');
     menu.showAt(dots);

     return PolymerTest.flushTasks().then(() => {
       assertEquals('menuitem', items[0].getAttribute('role'));
       assertEquals('checkbox', items[1].getAttribute('role'));

       menu.insertBefore(newItem, items[0]);
       return PolymerTest.flushTasks();
     }).then(() => {
       assertEquals('menuitem', newItem.getAttribute('role'));
     });
   });

   test('positioning', function() {
     // A 40x10 box at (100, 250).
     const config = {
       left: 100,
       top: 250,
       width: 40,
       height: 10,
       maxX: 1000,
       maxY: 2000,
     };

     // Show right and bottom aligned by default.
     menu.showAtPosition(config);
     assertTrue(menu.open);
     assertEquals('100px', menu.style.left);
     assertEquals('250px', menu.style.top);
     menu.close();

     // Center the menu horizontally.
     menu.showAtPosition(Object.assign({}, config, {
       anchorAlignmentX: AnchorAlignment.CENTER,
     }));
     const menuWidth = menu.offsetWidth;
     const menuHeight = menu.offsetHeight;
     assertEquals(`${120 - menuWidth / 2}px`, menu.style.left);
     assertEquals('250px', menu.style.top);
     menu.close();

     // Center the menu in both axes.
     menu.showAtPosition(Object.assign({}, config, {
       anchorAlignmentX: AnchorAlignment.CENTER,
       anchorAlignmentY: AnchorAlignment.CENTER,
     }));
     assertEquals(`${120 - menuWidth / 2}px`, menu.style.left);
     assertEquals(`${255 - menuHeight / 2}px`, menu.style.top);
     menu.close();

     // Left and top align the menu.
     menu.showAtPosition(Object.assign({}, config, {
       anchorAlignmentX: AnchorAlignment.BEFORE_END,
       anchorAlignmentY: AnchorAlignment.BEFORE_END,
     }));
     assertEquals(`${140 - menuWidth}px`, menu.style.left);
     assertEquals(`${260 - menuHeight}px`, menu.style.top);
     menu.close();

     // Being left and top aligned at (0, 0) should anchor to the bottom right.
     menu.showAtPosition(Object.assign({}, config, {
       anchorAlignmentX: AnchorAlignment.BEFORE_END,
       anchorAlignmentY: AnchorAlignment.BEFORE_END,
       left: 0,
       top: 0,
     }));
     assertEquals(`0px`, menu.style.left);
     assertEquals(`0px`, menu.style.top);
     menu.close();

     // Being aligned to a point in the bottom right should anchor to the top
     // left.
     menu.showAtPosition({
       left: 1000,
       top: 2000,
       maxX: 1000,
       maxY: 2000,
     });
     assertEquals(`${1000 - menuWidth}px`, menu.style.left);
     assertEquals(`${2000 - menuHeight}px`, menu.style.top);
     menu.close();

     // If the viewport can't fit the menu, align the menu to the viewport.
     menu.showAtPosition({
       left: menuWidth - 5,
       top: 0,
       width: 0,
       height: 0,
       maxX: menuWidth * 2 - 10,
     });
     assertEquals(`${menuWidth - 10}px`, menu.style.left);
     assertEquals(`0px`, menu.style.top);
     menu.close();

     // Alignment is reversed in RTL.
     document.body.style.direction = 'rtl';
     menu.showAtPosition(config);
     assertTrue(menu.open);
     assertEquals(140 - menuWidth, menu.offsetLeft);
     assertEquals('250px', menu.style.top);
     menu.close();
   });

   suite('offscreen scroll positioning', function() {
     const bodyHeight = 10000;
     const bodyWidth = 20000;
     const containerLeft = 5000;
     const containerTop = 10000;
     const containerWidth = 500;
     const containerHeight = 500;
     const menuWidth = 100;
     const menuHeight = 200;

     setup(function() {
       document.body.scrollTop = 0;
       document.body.scrollLeft = 0;
       document.body.innerHTML = `
         <style>
           body {
             height: ${bodyHeight}px;
             width: ${bodyWidth}px;
           }

           #container {
             overflow: auto;
             position: absolute;
             top: ${containerTop}px;
             left: ${containerLeft}px;
             right: ${containerLeft}px;
             height: ${containerHeight}px;
             width: ${containerWidth}px;
           }

           #inner-container {
             height: 1000px;
             width: 1000px;
           }

           dialog {
             height: ${menuHeight};
             width: ${menuWidth};
             padding: 0;
           }
         </style>
         <div id="container">
           <div id="inner-container">
             <button id="dots">...</button>
             <dialog is="cr-action-menu">
               <button class="dropdown-item">Un</button>
               <hr>
               <button class="dropdown-item">Dos</button>
               <button class="dropdown-item">Tres</button>
             </dialog>
           </div>
         </div>
       `;
       menu = document.querySelector('dialog[is=cr-action-menu]');
       dots = document.querySelector('#dots');
     });

     // Show the menu, scrolling the body to the button.
     test('simple offscreen', function() {
       menu.showAt(dots, {anchorAlignmentX: AnchorAlignment.AFTER_START});
       assertEquals(`${containerLeft}px`, menu.style.left);
       assertEquals(`${containerTop}px`, menu.style.top);
       menu.close();
     });

     // Show the menu, scrolling the container to the button, and the body to the
     // button.
     test('offscreen and out of scroll container viewport', function() {
       document.body.scrollLeft = bodyWidth;
       document.body.scrollTop = bodyHeight;
       const container = document.querySelector('#container');

       container.scrollLeft = containerLeft;
       container.scrollTop = containerTop;

       menu.showAt(dots, {anchorAlignmentX: AnchorAlignment.AFTER_START});
       assertEquals(`${containerLeft}px`, menu.style.left);
       assertEquals(`${containerTop}px`, menu.style.top);
       menu.close();
     });

     // Show the menu for an already onscreen button. The anchor should be
     // overridden so that no scrolling happens.
     test('onscreen forces anchor change', function() {
       const rect = dots.getBoundingClientRect();
       document.body.scrollLeft = rect.right - document.body.clientWidth + 10;
       document.body.scrollTop = rect.bottom - document.body.clientHeight + 10;

       menu.showAt(dots, {anchorAlignmentX: AnchorAlignment.AFTER_START});
       const buttonWidth = dots.offsetWidth;
       const buttonHeight = dots.offsetHeight;
       assertEquals(containerLeft - menuWidth + buttonWidth, menu.offsetLeft);
       assertEquals(containerTop - menuHeight + buttonHeight, menu.offsetTop);
       menu.close();
     });

     test('scroll position maintained for showAtPosition', function() {
       document.body.scrollLeft = 500;
       document.body.scrollTop = 1000;
       menu.showAtPosition({top: 50, left: 50});
       assertEquals(550, menu.offsetLeft);
       assertEquals(1050, menu.offsetTop);
       menu.close();
     });

     test('rtl', function() {
       // Anchor to an item in RTL.
       document.body.style.direction = 'rtl';
       menu.showAt(dots, {anchorAlignmentX: AnchorAlignment.AFTER_START});
       assertEquals(
           container.offsetLeft + containerWidth - menuWidth,
           menu.offsetLeft);
       assertEquals(containerTop, menu.offsetTop);
       menu.close();
     });
   });
 });
	// Copyright 2016 The Chromium Authors. All rights reserved.
	// Use of this source code is governed by a BSD-style license that can be
	// found in the LICENSE file.

	/**
	* @fileoverview Tests for cr-action-menu element. Runs as an interactive UI
	* test, since many of these tests check focus behavior.
	*/
	suite('CrActionMenu', function() {
	/** @type {?CrActionMenuElement} */
	let menu = null;

	/** @type {?NodeList<HTMLElement>} */
	let items = null;

	/** @type {HTMLElement} */
	let dots = null;

	setup(function() {
	PolymerTest.clearBody();

	document.body.innerHTML = `
	<button id="dots">...</button>
	<dialog is="cr-action-menu">
	<button class="dropdown-item">Un</button>
	<hr>
	<button class="dropdown-item">Dos</button>
	<button class="dropdown-item">Tres</button>
	</dialog>
	`;

	menu = document.querySelector('dialog[is=cr-action-menu]');
	items = menu.querySelectorAll('.dropdown-item');
	dots = document.querySelector('#dots');
	assertEquals(3, items.length);
	});

	teardown(function() {
	document.body.style.direction = 'ltr';

	if (menu.open)
	menu.close();
	});

	function down() {
	MockInteractions.keyDownOn(menu, 'ArrowDown', [], 'ArrowDown');
	}

	function up() {
	MockInteractions.keyDownOn(menu, 'ArrowUp', [], 'ArrowUp');
	}

	test('hidden or disabled items', function() {
	menu.showAt(dots);
	down();
	assertEquals(menu.root.activeElement, items[0]);

	menu.close();
	items[0].hidden = true;
	menu.showAt(dots);
	down();
	assertEquals(menu.root.activeElement, items[1]);

	menu.close();
	items[1].disabled = true;
	menu.showAt(dots);
	down();
	assertEquals(menu.root.activeElement, items[2]);
	});

	test('focus after down/up arrow', function() {
	menu.showAt(dots);

	// The menu should be focused when shown, but not on any of the items.
	assertEquals(menu, document.activeElement);
	assertNotEquals(items[0], menu.root.activeElement);
	assertNotEquals(items[1], menu.root.activeElement);
	assertNotEquals(items[2], menu.root.activeElement);

	down();
	assertEquals(items[0], menu.root.activeElement);
	down();
	assertEquals(items[1], menu.root.activeElement);
	down();
	assertEquals(items[2], menu.root.activeElement);
	down();
	assertEquals(items[0], menu.root.activeElement);
	up();
	assertEquals(items[2], menu.root.activeElement);
	up();
	assertEquals(items[1], menu.root.activeElement);
	up();
	assertEquals(items[0], menu.root.activeElement);
	up();
	assertEquals(items[2], menu.root.activeElement);

	items[1].disabled = true;
	up();
	assertEquals(items[0], menu.root.activeElement);
	});

	test('pressing up arrow when no focus will focus last item', function() {
	menu.showAt(dots);
	assertEquals(menu, document.activeElement);

	up();
	assertEquals(items[items.length - 1], menu.root.activeElement);
	});

	test('can navigate to dynamically added items', function() {
	// Can modify children after attached() and before showAt().
	const item = document.createElement('button');
	item.classList.add('dropdown-item');
	menu.insertBefore(item, items[0]);
	menu.showAt(dots);

	down();
	assertEquals(item, menu.root.activeElement);
	down();
	assertEquals(items[0], menu.root.activeElement);

	// Can modify children while menu is open.
	menu.removeChild(item);

	up();
	// Focus should have wrapped around to final item.
	assertEquals(items[2], menu.root.activeElement);
	});

	test('close on resize', function() {
	menu.showAt(dots);
	assertTrue(menu.open);

	window.dispatchEvent(new CustomEvent('resize'));
	assertFalse(menu.open);
	});

	test('close on popstate', function() {
	menu.showAt(dots);
	assertTrue(menu.open);

	window.dispatchEvent(new CustomEvent('popstate'));
	assertFalse(menu.open);
	});

	/** @param {string} key The key to use for closing. */
	function testFocusAfterClosing(key) {
	return new Promise(function(resolve) {
	menu.showAt(dots);
	assertTrue(menu.open);

	// Check that focus returns to the anchor element.
	dots.addEventListener('focus', resolve);
	MockInteractions.keyDownOn(menu, key, [], key);
	assertFalse(menu.open);
	});
	}

	test('close on Tab', function() {
	return testFocusAfterClosing('Tab');
	});
	test('close on Escape', function() {
	return testFocusAfterClosing('Escape');
	});

	test('mouse movement focus options', function() {
	function makeMouseoverEvent(node) {
	const e = new MouseEvent('mouseover', {bubbles: true});
	node.dispatchEvent(e);
	}

	menu.showAt(dots);

	// Moving mouse on option 1 should focus it.
	assertNotEquals(items[0], menu.root.activeElement);
	makeMouseoverEvent(items[0]);
	assertEquals(items[0], menu.root.activeElement);

	// Moving mouse on the menu (not on option) should focus the menu.
	makeMouseoverEvent(menu);
	assertNotEquals(items[0], menu.root.activeElement);
	assertEquals(menu, document.activeElement);

	// Moving mouse on a disabled item should focus the menu.
	items[2].setAttribute('disabled', '');
	makeMouseoverEvent(items[2]);
	assertNotEquals(items[2], menu.root.activeElement);
	assertEquals(menu, document.activeElement);

	// Mouse movements should override keyboard focus.
	down();
	down();
	assertEquals(items[1], menu.root.activeElement);
	makeMouseoverEvent(items[0]);
	assertEquals(items[0], menu.root.activeElement);
	});

	test('items automatically given accessibility role', function() {
	const newItem = document.createElement('button');
	newItem.classList.add('dropdown-item');

	items[1].setAttribute('role', 'checkbox');
	menu.showAt(dots);

	return PolymerTest.flushTasks().then(() => {
	assertEquals('menuitem', items[0].getAttribute('role'));
	assertEquals('checkbox', items[1].getAttribute('role'));

	menu.insertBefore(newItem, items[0]);
	return PolymerTest.flushTasks();
	}).then(() => {
	assertEquals('menuitem', newItem.getAttribute('role'));
	});
	});

	test('positioning', function() {
	// A 40x10 box at (100, 250).
	const config = {
	left: 100,
	top: 250,
	width: 40,
	height: 10,
	maxX: 1000,
	maxY: 2000,
	};

	// Show right and bottom aligned by default.
	menu.showAtPosition(config);
	assertTrue(menu.open);
	assertEquals('100px', menu.style.left);
	assertEquals('250px', menu.style.top);
	menu.close();

	// Center the menu horizontally.
	menu.showAtPosition(Object.assign({}, config, {
	anchorAlignmentX: AnchorAlignment.CENTER,
	}));
	const menuWidth = menu.offsetWidth;
	const menuHeight = menu.offsetHeight;
	assertEquals(`${120 - menuWidth / 2}px`, menu.style.left);
	assertEquals('250px', menu.style.top);
	menu.close();

	// Center the menu in both axes.
	menu.showAtPosition(Object.assign({}, config, {
	anchorAlignmentX: AnchorAlignment.CENTER,
	anchorAlignmentY: AnchorAlignment.CENTER,
	}));
	assertEquals(`${120 - menuWidth / 2}px`, menu.style.left);
	assertEquals(`${255 - menuHeight / 2}px`, menu.style.top);
	menu.close();

	// Left and top align the menu.
	menu.showAtPosition(Object.assign({}, config, {
	anchorAlignmentX: AnchorAlignment.BEFORE_END,
	anchorAlignmentY: AnchorAlignment.BEFORE_END,
	}));
	assertEquals(`${140 - menuWidth}px`, menu.style.left);
	assertEquals(`${260 - menuHeight}px`, menu.style.top);
	menu.close();

	// Being left and top aligned at (0, 0) should anchor to the bottom right.
	menu.showAtPosition(Object.assign({}, config, {
	anchorAlignmentX: AnchorAlignment.BEFORE_END,
	anchorAlignmentY: AnchorAlignment.BEFORE_END,
	left: 0,
	top: 0,
	}));
	assertEquals(`0px`, menu.style.left);
	assertEquals(`0px`, menu.style.top);
	menu.close();

	// Being aligned to a point in the bottom right should anchor to the top
	// left.
	menu.showAtPosition({
	left: 1000,
	top: 2000,
	maxX: 1000,
	maxY: 2000,
	});
	assertEquals(`${1000 - menuWidth}px`, menu.style.left);
	assertEquals(`${2000 - menuHeight}px`, menu.style.top);
	menu.close();

	// If the viewport can't fit the menu, align the menu to the viewport.
	menu.showAtPosition({
	left: menuWidth - 5,
	top: 0,
	width: 0,
	height: 0,
	maxX: menuWidth * 2 - 10,
	});
	assertEquals(`${menuWidth - 10}px`, menu.style.left);
	assertEquals(`0px`, menu.style.top);
	menu.close();

	// Alignment is reversed in RTL.
	document.body.style.direction = 'rtl';
	menu.showAtPosition(config);
	assertTrue(menu.open);
	assertEquals(140 - menuWidth, menu.offsetLeft);
	assertEquals('250px', menu.style.top);
	menu.close();
	});

	suite('offscreen scroll positioning', function() {
	const bodyHeight = 10000;
	const bodyWidth = 20000;
	const containerLeft = 5000;
	const containerTop = 10000;
	const containerWidth = 500;
	const containerHeight = 500;
	const menuWidth = 100;
	const menuHeight = 200;

	setup(function() {
	document.body.scrollTop = 0;
	document.body.scrollLeft = 0;
	document.body.innerHTML = `
	<style>
	body {
	height: ${bodyHeight}px;
	width: ${bodyWidth}px;
	}

	#container {
	overflow: auto;
	position: absolute;
	top: ${containerTop}px;
	left: ${containerLeft}px;
	right: ${containerLeft}px;
	height: ${containerHeight}px;
	width: ${containerWidth}px;
	}

	#inner-container {
	height: 1000px;
	width: 1000px;
	}

	dialog {
	height: ${menuHeight};
	width: ${menuWidth};
	padding: 0;
	}
	</style>
	<div id="container">
	<div id="inner-container">
	<button id="dots">...</button>
	<dialog is="cr-action-menu">
	<button class="dropdown-item">Un</button>
	<hr>
	<button class="dropdown-item">Dos</button>
	<button class="dropdown-item">Tres</button>
	</dialog>
	</div>
	</div>
	`;
	menu = document.querySelector('dialog[is=cr-action-menu]');
	dots = document.querySelector('#dots');
	});

	// Show the menu, scrolling the body to the button.
	test('simple offscreen', function() {
	menu.showAt(dots, {anchorAlignmentX: AnchorAlignment.AFTER_START});
	assertEquals(`${containerLeft}px`, menu.style.left);
	assertEquals(`${containerTop}px`, menu.style.top);
	menu.close();
	});

	// Show the menu, scrolling the container to the button, and the body to the
	// button.
	test('offscreen and out of scroll container viewport', function() {
	document.body.scrollLeft = bodyWidth;
	document.body.scrollTop = bodyHeight;
	const container = document.querySelector('#container');

	container.scrollLeft = containerLeft;
	container.scrollTop = containerTop;

	menu.showAt(dots, {anchorAlignmentX: AnchorAlignment.AFTER_START});
	assertEquals(`${containerLeft}px`, menu.style.left);
	assertEquals(`${containerTop}px`, menu.style.top);
	menu.close();
	});

	// Show the menu for an already onscreen button. The anchor should be
	// overridden so that no scrolling happens.
	test('onscreen forces anchor change', function() {
	const rect = dots.getBoundingClientRect();
	document.body.scrollLeft = rect.right - document.body.clientWidth + 10;
	document.body.scrollTop = rect.bottom - document.body.clientHeight + 10;

	menu.showAt(dots, {anchorAlignmentX: AnchorAlignment.AFTER_START});
	const buttonWidth = dots.offsetWidth;
	const buttonHeight = dots.offsetHeight;
	assertEquals(containerLeft - menuWidth + buttonWidth, menu.offsetLeft);
	assertEquals(containerTop - menuHeight + buttonHeight, menu.offsetTop);
	menu.close();
	});

	test('scroll position maintained for showAtPosition', function() {
	document.body.scrollLeft = 500;
	document.body.scrollTop = 1000;
	menu.showAtPosition({top: 50, left: 50});
	assertEquals(550, menu.offsetLeft);
	assertEquals(1050, menu.offsetTop);
	menu.close();
	});

	test('rtl', function() {
	// Anchor to an item in RTL.
	document.body.style.direction = 'rtl';
	menu.showAt(dots, {anchorAlignmentX: AnchorAlignment.AFTER_START});
	assertEquals(
	container.offsetLeft + containerWidth - menuWidth,
	menu.offsetLeft);
	assertEquals(containerTop, menu.offsetTop);
	menu.close();
	});
	});
	});