| Current Path : /var/www/html/rocksensor3/web/core/tests/Drupal/Nightwatch/Tests/ |
Linux ift1.ift-informatik.de 5.4.0-216-generic #236-Ubuntu SMP Fri Apr 11 19:53:21 UTC 2025 x86_64 |
| Current File : /var/www/html/rocksensor3/web/core/tests/Drupal/Nightwatch/Tests/jQueryUIPositionShimTest.js |
/**
* The testScenarios object is for testing a wide range of jQuery UI position
* configuration options. The object properties are:
* {
* - How the `of:` option will be used. This option determines the element the
* positioned element will attach to. This can be a selector, window, a
* jQuery object, or a vanilla JS element.
* - `my`: Sets the 'my' option for position().
* - `at`: Sets the 'at' option for position().
* - `x`: The expected X position of the element being positioned.
* - `y`: The expected Y position of the element being positioned.
* }
* This covers every possible combination of `my:` and `at:` using fixed amounts
* (left, right, center, top, bottom), with additional scenarios that include
* offsets.
*/
/* cSpell:disable */
const testScenarios = {
window: {
centerbottomcenterbottom: {
at: 'center bottom',
my: 'center bottom',
x: 38.5,
y: 77,
},
centerbottomcentercenter: {
at: 'center center',
my: 'center bottom',
x: 38.5,
y: 77,
},
centerbottomcentertop: {
at: 'center top',
my: 'center bottom',
x: 38.5,
y: -76.984375,
},
centerbottomleftbottom: {
at: 'left bottom',
my: 'center bottom',
x: -38.5,
y: 77,
},
centerbottomleftcenter: {
at: 'left center',
my: 'center bottom',
x: -38.5,
y: 77,
},
centerbottomlefttop: {
at: 'left top',
my: 'center bottom',
x: -38.5,
y: -76.984375,
},
centerbottomrightbottom: {
at: 'right bottom',
my: 'center bottom',
x: 38.5,
y: 77,
},
centerbottomrightcenter: {
at: 'right center',
my: 'center bottom',
x: 38.5,
y: 77,
},
centerbottomrightminus80bottomminus40: {
at: 'right-80 bottom-40',
my: 'center bottom',
x: 118.5,
y: 117,
},
centerbottomrighttop: {
at: 'right top',
my: 'center bottom',
x: 38.5,
y: -76.984375,
},
centerminus40topplus40leftplus20ptop: {
at: 'left+20 top',
my: 'center-40 top+40',
x: -58.5,
y: 40,
},
centerplus10perpbottomcenterminus10pertop: {
at: 'center+110 top',
my: 'center+150 bottom',
x: -221.5,
y: -76.984375,
},
centerplus20ptopplus20pcenterbottom: {
at: 'center bottom',
my: 'center+100 top-200',
x: -61.5,
y: 200,
},
centerplus40topminus15pcentercenterplus40: {
at: 'center center+40',
my: 'center+40 top+15',
x: -1.5,
y: -55,
},
centerplus80bottomminus90leftbottom: {
at: 'left bottom',
my: 'center+80 bottom-90',
x: 41.5,
y: 167,
},
centertopcenterbottom: {
at: 'center bottom',
my: 'center top',
x: 38.5,
y: 0,
},
centertopcentercenter: {
at: 'center center',
my: 'center top',
x: 38.5,
y: 0,
},
centertopcenterplus20ptopplus20p: {
at: 'center+70 top+60',
my: 'center top',
x: -31.5,
y: 60,
},
centertopcentertop: { at: 'center top', my: 'center top', x: 38.5, y: 0 },
centertopleftbottom: {
at: 'left bottom',
my: 'center top',
x: -38.5,
y: 0,
},
centertopleftcenter: {
at: 'left center',
my: 'center top',
x: -38.5,
y: 0,
},
centertoplefttop: { at: 'left top', my: 'center top', x: -38.5, y: 0 },
centertoprightbottom: {
at: 'right bottom',
my: 'center top',
x: 38.5,
y: 0,
},
centertoprightcenter: {
at: 'right center',
my: 'center top',
x: 38.5,
y: 0,
},
centertoprighttop: { at: 'right top', my: 'center top', x: 38.5, y: 0 },
leftbottomcenterbottom: {
at: 'center bottom',
my: 'left bottom',
x: 0,
y: 77,
},
leftbottomcentercenter: {
at: 'center center',
my: 'left bottom',
x: 0,
y: 77,
},
leftbottomcentertop: {
at: 'center top',
my: 'left bottom',
x: 0,
y: -76.984375,
},
leftbottomleftbottom: { at: 'left bottom', my: 'left bottom', x: 0, y: 77 },
leftbottomleftcenter: { at: 'left center', my: 'left bottom', x: 0, y: 77 },
leftbottomlefttop: {
at: 'left top',
my: 'left bottom',
x: 0,
y: -76.984375,
},
leftbottomrightbottom: {
at: 'right bottom',
my: 'left bottom',
x: 0,
y: 77,
},
leftbottomrightcenter: {
at: 'right center',
my: 'left bottom',
x: 0,
y: 77,
},
leftbottomrighttop: {
at: 'right top',
my: 'left bottom',
x: 0,
y: -76.984375,
},
leftcentercenterbottom: {
at: 'center bottom',
my: 'left center',
x: 0,
y: 38.5,
},
leftcentercentercenter: {
at: 'center center',
my: 'left center',
x: 0,
y: 38.5,
},
leftcentercentertop: {
at: 'center top',
my: 'left center',
x: 0,
y: -38.484375,
},
leftcenterleftbottom: {
at: 'left bottom',
my: 'left center',
x: 0,
y: 38.5,
},
leftcenterleftcenter: {
at: 'left center',
my: 'left center',
x: 0,
y: 38.5,
},
leftcenterlefttop: {
at: 'left top',
my: 'left center',
x: 0,
y: -38.484375,
},
leftcenterrightbottom: {
at: 'right bottom',
my: 'left center',
x: 0,
y: 38.5,
},
leftcenterrightcenter: {
at: 'right center',
my: 'left center',
x: 0,
y: 38.5,
},
leftcenterrighttop: {
at: 'right top',
my: 'left center',
x: 0,
y: -38.484375,
},
lefttopcenterbottom: { at: 'center bottom', my: 'left top', x: 0, y: 0 },
lefttopcentercenter: { at: 'center center', my: 'left top', x: 0, y: 0 },
lefttopcentertop: { at: 'center top', my: 'left top', x: 0, y: 0 },
lefttopleftbottom: { at: 'left bottom', my: 'left top', x: 0, y: 0 },
lefttopleftcenter: { at: 'left center', my: 'left top', x: 0, y: 0 },
lefttoplefttop: { at: 'left top', my: 'left top', x: 0, y: 0 },
lefttoprightbottom: { at: 'right bottom', my: 'left top', x: 0, y: 0 },
lefttoprightcenter: { at: 'right center', my: 'left top', x: 0, y: 0 },
lefttoprighttop: { at: 'right top', my: 'left top', x: 0, y: 0 },
rightbottomcenterbottom: {
at: 'center bottom',
my: 'right bottom',
x: 77,
y: 77,
},
rightbottomcentercenter: {
at: 'center center',
my: 'right bottom',
x: 77,
y: 77,
},
rightbottomcentertop: {
at: 'center top',
my: 'right bottom',
x: 77,
y: -76.984375,
},
rightbottomleftbottom: {
at: 'left bottom',
my: 'right bottom',
x: -77,
y: 77,
},
rightbottomleftcenter: {
at: 'left center',
my: 'right bottom',
x: -77,
y: 77,
},
rightbottomlefttop: {
at: 'left top',
my: 'right bottom',
x: -77,
y: -76.984375,
},
rightbottomrightbottom: {
at: 'right bottom',
my: 'right bottom',
x: 77,
y: 77,
},
rightbottomrightcenter: {
at: 'right center',
my: 'right bottom',
x: 77,
y: 77,
},
rightbottomrighttop: {
at: 'right top',
my: 'right bottom',
x: 77,
y: -76.984375,
},
rightcentercenterbottom: {
at: 'center bottom',
my: 'right center',
x: 77,
y: 38.5,
},
rightcentercentercenter: {
at: 'center center',
my: 'right center',
x: 77,
y: 38.5,
},
rightcentercentertop: {
at: 'center top',
my: 'right center',
x: 77,
y: -38.484375,
},
rightcenterleftbottom: {
at: 'left bottom',
my: 'right center',
x: -77,
y: 38.5,
},
rightcenterleftcenter: {
at: 'left center',
my: 'right center',
x: -77,
y: 38.5,
},
rightcenterlefttop: {
at: 'left top',
my: 'right center',
x: -77,
y: -38.484375,
},
rightcenterrightbottom: {
at: 'right bottom',
my: 'right center',
x: 77,
y: 38.5,
},
rightcenterrightcenter: {
at: 'right center',
my: 'right center',
x: 77,
y: 38.5,
},
rightcenterrighttop: {
at: 'right top',
my: 'right center',
x: 77,
y: -38.484375,
},
righttopcenterbottom: { at: 'center bottom', my: 'right top', x: 77, y: 0 },
righttopcentercenter: { at: 'center center', my: 'right top', x: 77, y: 0 },
righttopcentertop: { at: 'center top', my: 'right top', x: 77, y: 0 },
righttopleftbottom: { at: 'left bottom', my: 'right top', x: -77, y: 0 },
righttopleftcenter: { at: 'left center', my: 'right top', x: -77, y: 0 },
righttoplefttop: { at: 'left top', my: 'right top', x: -77, y: 0 },
righttoprightbottom: { at: 'right bottom', my: 'right top', x: 77, y: 0 },
righttoprightcenter: { at: 'right center', my: 'right top', x: 77, y: 0 },
righttoprighttop: { at: 'right top', my: 'right top', x: 77, y: 0 },
},
selector: {
centerbottomcenterbottom: {
at: 'center bottom',
my: 'center bottom',
x: 62.5,
y: 125,
},
centerbottomcentercenter: {
at: 'center center',
my: 'center bottom',
x: 62.5,
y: 24,
},
centerbottomcentertop: {
at: 'center top',
my: 'center bottom',
x: 62.5,
y: -77,
},
centerbottomleftbottom: {
at: 'left bottom',
my: 'center bottom',
x: -38.5,
y: 125,
},
centerbottomleftcenter: {
at: 'left center',
my: 'center bottom',
x: -38.5,
y: 24,
},
centerbottomlefttop: {
at: 'left top',
my: 'center bottom',
x: -38.5,
y: -77,
},
centerbottomrightbottom: {
at: 'right bottom',
my: 'center bottom',
x: 163.5,
y: 125,
},
centerbottomrightcenter: {
at: 'right center',
my: 'center bottom',
x: 163.5,
y: 24,
},
centerbottomrightplus40bottomminus40: {
at: 'right+40 bottom-40',
my: 'center bottom',
x: 203.5,
y: 85,
},
centerbottomrighttop: {
at: 'right top',
my: 'center bottom',
x: 163.5,
y: -77,
},
centerminus40topplus40leftminus20ptop: {
at: 'left-20% top',
my: 'center-40 top+40',
x: -118.890625,
y: 40,
},
centerplus10perpbottomcenterminus10pertop: {
at: 'center-20% top',
my: 'center+20% bottom',
x: 37.5,
y: -77,
},
centerplus40bottomminus40leftbottom: {
at: 'left bottom',
my: 'center+40 bottom-40',
x: 1.5,
y: 85,
},
centerplus40topminus15pcentercenterplus40: {
at: 'center center+40',
my: 'center+40 top-15%',
x: 102.5,
y: 129.4375,
},
centertopcenterbottom: {
at: 'center bottom',
my: 'center top',
x: 62.5,
y: 202,
},
centertopcentercenter: {
at: 'center center',
my: 'center top',
x: 62.5,
y: 101,
},
centertopcenterplus20ptopplus20p: {
at: 'center+20% top+20%',
my: 'center top',
x: 102.890625,
y: 40.390625,
},
centertopcentertop: { at: 'center top', my: 'center top', x: 62.5, y: 0 },
centertopleftbottom: {
at: 'left bottom',
my: 'center top',
x: -38.5,
y: 202,
},
centertopleftcenter: {
at: 'left center',
my: 'center top',
x: -38.5,
y: 101,
},
centertoplefttop: { at: 'left top', my: 'center top', x: -38.5, y: 0 },
centertoprightbottom: {
at: 'right bottom',
my: 'center top',
x: 163.5,
y: 202,
},
centertoprightcenter: {
at: 'right center',
my: 'center top',
x: 163.5,
y: 101,
},
centertoprighttop: { at: 'right top', my: 'center top', x: 163.5, y: 0 },
leftbottomcenterbottom: {
at: 'center bottom',
my: 'left bottom',
x: 101,
y: 125,
},
leftbottomcentercenter: {
at: 'center center',
my: 'left bottom',
x: 101,
y: 24,
},
leftbottomcentertop: {
at: 'center top',
my: 'left bottom',
x: 101,
y: -77,
},
leftbottomleftbottom: {
at: 'left bottom',
my: 'left bottom',
x: 0,
y: 125,
},
leftbottomleftcenter: { at: 'left center', my: 'left bottom', x: 0, y: 24 },
leftbottomlefttop: { at: 'left top', my: 'left bottom', x: 0, y: -77 },
leftbottomrightbottom: {
at: 'right bottom',
my: 'left bottom',
x: 202,
y: 125,
},
leftbottomrightcenter: {
at: 'right center',
my: 'left bottom',
x: 202,
y: 24,
},
leftbottomrighttop: { at: 'right top', my: 'left bottom', x: 202, y: -77 },
leftcentercenterbottom: {
at: 'center bottom',
my: 'left center',
x: 101,
y: 163.5,
},
leftcentercentercenter: {
at: 'center center',
my: 'left center',
x: 101,
y: 62.5,
},
leftcentercentertop: {
at: 'center top',
my: 'left center',
x: 101,
y: -38.5,
},
leftcenterleftbottom: {
at: 'left bottom',
my: 'left center',
x: 0,
y: 163.5,
},
leftcenterleftcenter: {
at: 'left center',
my: 'left center',
x: 0,
y: 62.5,
},
leftcenterlefttop: { at: 'left top', my: 'left center', x: 0, y: -38.5 },
leftcenterrightbottom: {
at: 'right bottom',
my: 'left center',
x: 202,
y: 163.5,
},
leftcenterrightcenter: {
at: 'right center',
my: 'left center',
x: 202,
y: 62.5,
},
leftcenterrighttop: {
at: 'right top',
my: 'left center',
x: 202,
y: -38.5,
},
lefttopcenterbottom: {
at: 'center bottom',
my: 'left top',
x: 101,
y: 202,
},
lefttopcentercenter: {
at: 'center center',
my: 'left top',
x: 101,
y: 101,
},
lefttopcentertop: { at: 'center top', my: 'left top', x: 101, y: 0 },
lefttopleftbottom: { at: 'left bottom', my: 'left top', x: 0, y: 202 },
lefttopleftcenter: { at: 'left center', my: 'left top', x: 0, y: 101 },
lefttoplefttop: { at: 'left top', my: 'left top', x: 0, y: 0 },
lefttoprightbottom: { at: 'right bottom', my: 'left top', x: 202, y: 202 },
lefttoprightcenter: { at: 'right center', my: 'left top', x: 202, y: 101 },
lefttoprighttop: { at: 'right top', my: 'left top', x: 202, y: 0 },
rightbottomcenterbottom: {
at: 'center bottom',
my: 'right bottom',
x: 24,
y: 125,
},
rightbottomcentercenter: {
at: 'center center',
my: 'right bottom',
x: 24,
y: 24,
},
rightbottomcentertop: {
at: 'center top',
my: 'right bottom',
x: 24,
y: -77,
},
rightbottomleftbottom: {
at: 'left bottom',
my: 'right bottom',
x: -77,
y: 125,
},
rightbottomleftcenter: {
at: 'left center',
my: 'right bottom',
x: -77,
y: 24,
},
rightbottomlefttop: { at: 'left top', my: 'right bottom', x: -77, y: -77 },
rightbottomrightbottom: {
at: 'right bottom',
my: 'right bottom',
x: 125,
y: 125,
},
rightbottomrightcenter: {
at: 'right center',
my: 'right bottom',
x: 125,
y: 24,
},
rightbottomrighttop: {
at: 'right top',
my: 'right bottom',
x: 125,
y: -77,
},
rightcentercenterbottom: {
at: 'center bottom',
my: 'right center',
x: 24,
y: 163.5,
},
rightcentercentercenter: {
at: 'center center',
my: 'right center',
x: 24,
y: 62.5,
},
rightcentercentertop: {
at: 'center top',
my: 'right center',
x: 24,
y: -38.5,
},
rightcenterleftbottom: {
at: 'left bottom',
my: 'right center',
x: -77,
y: 163.5,
},
rightcenterleftcenter: {
at: 'left center',
my: 'right center',
x: -77,
y: 62.5,
},
rightcenterlefttop: {
at: 'left top',
my: 'right center',
x: -77,
y: -38.5,
},
rightcenterrightbottom: {
at: 'right bottom',
my: 'right center',
x: 125,
y: 163.5,
},
rightcenterrightcenter: {
at: 'right center',
my: 'right center',
x: 125,
y: 62.5,
},
rightcenterrighttop: {
at: 'right top',
my: 'right center',
x: 125,
y: -38.5,
},
righttopcenterbottom: {
at: 'center bottom',
my: 'right top',
x: 24,
y: 202,
},
righttopcentercenter: {
at: 'center center',
my: 'right top',
x: 24,
y: 101,
},
righttopcentertop: { at: 'center top', my: 'right top', x: 24, y: 0 },
righttopleftbottom: { at: 'left bottom', my: 'right top', x: -77, y: 202 },
righttopleftcenter: { at: 'left center', my: 'right top', x: -77, y: 101 },
righttoplefttop: { at: 'left top', my: 'right top', x: -77, y: 0 },
righttoprightbottom: {
at: 'right bottom',
my: 'right top',
x: 125,
y: 202,
},
righttoprightcenter: {
at: 'right center',
my: 'right top',
x: 125,
y: 101,
},
righttoprighttop: { at: 'right top', my: 'right top', x: 125, y: 0 },
},
};
/* cSpell:enable */
// Testing `of:` using jQuery or vanilla JS elements can use the same test
// scenarios and expected values as those using a selector.
testScenarios.jQuery = testScenarios.selector;
testScenarios.element = testScenarios.selector;
module.exports = {
'@tags': ['core'],
before(browser) {
browser.drupalInstall().drupalInstallModule('position_shim_test');
},
after(browser) {
browser.drupalUninstall();
},
beforeEach(browser) {
if (browser.currentTest.name !== 'test position') {
browser
.drupalRelativeURL('/position-shim-test-ported-from-jqueryui')
.waitForElementVisible('#el1', 1000);
}
},
'test position': (browser) => {
browser
.setWindowSize(1200, 600)
.drupalRelativeURL('/position-shim-test')
.waitForElementPresent('#position-reference-1', 1000)
.executeAsync(
// eslint-disable-next-line func-names, prefer-arrow-callback
function (testIterations, done) {
const $ = jQuery;
const toReturn = {};
/**
* Confirms a coordinate is acceptably close to the expected value.
*
* @param {number} actual
* The actual coordinate value.
* @param {number} expected
* The expected coordinate value.
* @return {boolean}
* True if the actual is within 3px of the expected.
*/
const withinRange = (actual, expected) => {
return actual <= expected + 3 && actual >= expected - 3;
};
/**
* Parses a jQuery UI position config string for `at:` or `my:`.
*
* A position config string can contain both alignment and offset
* configuration. This string is parsed and returned as an object that
* separates horizontal and vertical alignment and their respective
* offsets into distinct object properties.
*
* This is a copy of the parseOffset function from the jQuery position
* API.
*
* @param {string} offset
* Offset configuration in jQuery UI Position format.
* @param {Element} element
* The element being positioned.
* @return {{horizontal: (*|string), verticalOffset: number, vertical: (*|string), horizontalOffset: number}}
* The horizontal and vertical alignment and offset values for the element.
*
* @see core/misc/position.js
*/
const parseOffset = (offset, element) => {
const regexHorizontal = /left|center|right/;
const regexVertical = /top|center|bottom/;
const regexOffset = /[+-]\d+(\.[\d]+)?%?/;
const regexPosition = /^\w+/;
let positions = offset.split(' ');
if (positions.length === 1) {
if (regexHorizontal.test(positions[0])) {
positions.push('center');
} else if (regexVertical.test(positions[0])) {
positions = ['center'].concat(positions);
}
}
const horizontalOffset = regexOffset.exec(positions[0]);
const verticalOffset = regexOffset.exec(positions[1]);
positions = positions.map((pos) => regexPosition.exec(pos)[0]);
return {
horizontalOffset: horizontalOffset
? parseFloat(horizontalOffset[0]) *
(horizontalOffset[0].endsWith('%')
? element.offsetWidth / 100
: 1)
: 0,
verticalOffset: verticalOffset
? parseFloat(verticalOffset[0]) *
(verticalOffset[0].endsWith('%')
? element.offsetWidth / 100
: 1)
: 0,
horizontal: positions[0],
vertical: positions[1],
};
};
/**
* Checks the position of an element.
*
* The position values of an element are based on their distance
* relative to the element they're positioned against.
*
* @param {jQuery} tip
* The element being positioned.
* @param {Object} options
* The position options.
* @param {string} attachToType
* A string representing the data type used for the value of the `of`
* option. This could be 'selector', 'window', 'jQuery', 'element'.
*
* @param {string} idKey
* The unique id of the element indicating the use case scenario.
*
* @return {Promise}
* Resolve after the tip position is calculated.
*/
const checkPosition = (tip, options, attachToType, idKey) =>
new Promise((resolve) => {
setTimeout(() => {
const box = tip[0].getBoundingClientRect();
let { x, y } = box;
// If the tip is attaching to the window, X and Y are measured
// based on their distance from the closest window boundary.
if (attachToType === 'window') {
// Parse options.at to get the configured the horizontal and
// vertical positioning within the window. This will be used
// to get the tip distance relative to the configured position
// within the window. This provides a reliable way of
// getting position info that doesn't rely on an exact
// viewport width.
const atOffsets = parseOffset(options.at, tip[0]);
if (atOffsets.horizontal === 'center') {
x = document.documentElement.clientWidth / 2 - x;
} else if (atOffsets.horizontal === 'right') {
x = document.documentElement.clientWidth - x;
}
if (atOffsets.vertical === 'center') {
y = document.documentElement.clientHeight / 2 - y;
} else if (atOffsets.vertical === 'bottom') {
y = document.documentElement.clientHeight - y;
} else {
y += window.pageYOffset;
}
} else {
// Measure the distance of the tip from the reference element.
const refRect = document
.querySelector('#position-reference-1')
.getBoundingClientRect();
x -= refRect.x;
y -= refRect.y;
}
if (!withinRange(x, options.x) || !withinRange(y, options.y)) {
toReturn[idKey] =
`${idKey} EXPECTED x:${options.x} y:${options.y} ACTUAL x:${x} y:${y}`;
} else {
toReturn[idKey] = true;
}
resolve();
}, 25);
});
const attachScenarios = {
selector: '#position-reference-1',
window,
jQuery: $('#position-reference-1'),
element: document.querySelector('#position-reference-1'),
};
// Loop through testScenarios and attachScenarios to get config for a
// positioned tip.
(async function iterate() {
const attachToTypes = Object.keys(attachScenarios);
for (let i = 0; i < attachToTypes.length; i++) {
const attachToType = attachToTypes[i];
const scenarios = Object.keys(testIterations[attachToType]);
for (let j = 0; j < scenarios.length; j++) {
const key = scenarios[j];
const options = testIterations[attachToType][key];
options.of = attachScenarios[attachToType];
options.collision = 'none';
const idKey = `${attachToType}${key}`;
// eslint-disable-next-line no-await-in-loop
const tip = await new Promise((resolve) => {
const addedTip = $(
`<div class="test-tip" style="position:${
attachToType === 'window' ? 'fixed' : 'absolute'
}" id="${idKey}">${idKey}</div>`,
).appendTo('main');
addedTip.position(options);
setTimeout(() => {
resolve(addedTip);
});
});
// eslint-disable-next-line no-await-in-loop
await checkPosition(tip, options, attachToType, idKey);
tip.remove();
}
}
done(toReturn);
})();
},
[testScenarios],
(result) => {
let numberOfScenarios = 0;
Object.keys(testScenarios).forEach((scenario) => {
numberOfScenarios += Object.keys(testScenarios[scenario]).length;
});
const valueKeys = Object.keys(result.value);
browser.assert.equal(valueKeys.length, numberOfScenarios);
valueKeys.forEach((item) => {
browser.assert.equal(
result.value[item],
true,
`expected position: ${item}`,
);
});
},
);
},
// The remaining tests are ported from jQuery UI's QUnit tests.
'my, at, of': (browser) => {
browser.execute(
// eslint-disable-next-line func-names
function () {
const $ = jQuery;
const toReturn = {};
const $elx = $('#elx');
$elx.position({
my: 'left top',
at: 'left top',
of: '#parentX',
collision: 'none',
});
toReturn['left top, left top'] = {
actual: $elx.offset(),
expected: { top: 40, left: 40 },
};
$elx.position({
my: 'left top',
at: 'left bottom',
of: '#parentX',
collision: 'none',
});
toReturn['left top, left bottom'] = {
actual: $elx.offset(),
expected: { top: 60, left: 40 },
};
$elx.position({
my: 'left',
at: 'bottom',
of: '#parentX',
collision: 'none',
});
toReturn['left, bottom'] = {
actual: $elx.offset(),
expected: { top: 55, left: 50 },
};
$elx.position({
my: 'left foo',
at: 'bar baz',
of: '#parentX',
collision: 'none',
});
toReturn['left foo, bar baz'] = {
actual: $elx.offset(),
expected: { top: 45, left: 50 },
};
return toReturn;
},
[],
(result) => {
browser.assert.equal(Object.keys(result.value).length, 4);
Object.entries(result.value).forEach(([key, value]) => {
browser.assert.equal(typeof value, 'object');
browser.assert.deepEqual(value.actual, value.expected, key);
});
},
);
},
'multiple elements': (browser) => {
browser.execute(
// eslint-disable-next-line func-names
function () {
const $ = jQuery;
const toReturn = {};
const elements = $('#el1, #el2');
const result = elements.position({
my: 'left top',
at: 'left bottom',
of: '#parent',
collision: 'none',
});
toReturn['elements return'] = {
actual: result,
expected: elements,
};
// eslint-disable-next-line func-names
elements.each(function (index) {
toReturn[`element${index}`] = {
actual: $(this).offset(),
expected: { top: 10, left: 4 },
};
});
return toReturn;
},
[],
(result) => {
browser.assert.equal(Object.keys(result.value).length, 3);
Object.entries(result.value).forEach(([key, value]) => {
browser.assert.equal(typeof value, 'object');
browser.assert.deepEqual(value.actual, value.expected, key);
});
},
);
},
positions: (browser) => {
browser.execute(
// eslint-disable-next-line func-names
function () {
const $ = jQuery;
const toReturn = {};
const offsets = {
left: 0,
center: 3,
right: 6,
top: 0,
bottom: 6,
};
const start = { left: 4, top: 4 };
const el = $('#el1');
$.each([0, 1], (my) => {
$.each(['top', 'center', 'bottom'], (vIndex, vertical) => {
// eslint-disable-next-line max-nested-callbacks
$.each(['left', 'center', 'right'], (hIndex, horizontal) => {
const _my = my ? `${horizontal} ${vertical}` : 'left top';
const _at = !my ? `${horizontal} ${vertical}` : 'left top';
el.position({
my: _my,
at: _at,
of: '#parent',
collision: 'none',
});
toReturn[`my: ${_my} at: ${_at}`] = {
actual: el.offset(),
expected: {
top: start.top + offsets[vertical] * (my ? -1 : 1),
left: start.left + offsets[horizontal] * (my ? -1 : 1),
},
};
});
});
});
return toReturn;
},
[],
(result) => {
browser.assert.equal(Object.keys(result.value).length, 17);
Object.entries(result.value).forEach(([key, value]) => {
browser.assert.equal(typeof value, 'object');
browser.assert.deepEqual(value.actual, value.expected, key);
});
},
);
},
of: (browser) => {
browser.execute(
// eslint-disable-next-line func-names
function () {
const $ = jQuery;
const toReturn = {};
const $elx = $('#elx');
const $parentX = $('#parentX');
const win = $(window);
let event;
// eslint-disable-next-line func-names
let scrollTopSupport = function () {
const support = win.scrollTop(1).scrollTop() === 1;
win.scrollTop(0);
// eslint-disable-next-line func-names
scrollTopSupport = function () {
return support;
};
return support;
};
$elx.position({
my: 'left top',
at: 'left top',
of: '#parentX',
collision: 'none',
});
toReturn.selector = {
actual: $elx.offset(),
expected: { top: 40, left: 40 },
};
$elx.position({
my: 'left top',
at: 'left bottom',
of: $parentX,
collision: 'none',
});
toReturn['jQuery object'] = {
actual: $elx.offset(),
expected: { top: 60, left: 40 },
};
$elx.position({
my: 'left top',
at: 'left top',
of: $parentX[0],
collision: 'none',
});
toReturn['DOM element'] = {
actual: $elx.offset(),
expected: { top: 40, left: 40 },
};
$elx.position({
my: 'right bottom',
at: 'right bottom',
of: document,
collision: 'none',
});
toReturn.document = {
actual: $elx.offset(),
expected: {
top: $(document).height() - 10,
left: $(document).width() - 10,
},
};
$elx.position({
my: 'right bottom',
at: 'right bottom',
of: $(document),
collision: 'none',
});
toReturn['document as jQuery object'] = {
actual: $elx.offset(),
expected: {
top: $(document).height() - 10,
left: $(document).width() - 10,
},
};
win.scrollTop(0);
$elx.position({
my: 'right bottom',
at: 'right bottom',
of: window,
collision: 'none',
});
toReturn.window = {
actual: $elx.offset(),
expected: {
top: win.height() - 10,
left: win.width() - 10,
},
};
$elx.position({
my: 'right bottom',
at: 'right bottom',
of: win,
collision: 'none',
});
toReturn['window as jQuery object'] = {
actual: $elx.offset(),
expected: {
top: win.height() - 10,
left: win.width() - 10,
},
};
if (scrollTopSupport()) {
win.scrollTop(500).scrollLeft(200);
$elx.position({
my: 'right bottom',
at: 'right bottom',
of: window,
collision: 'none',
});
toReturn['window, scrolled'] = {
actual: $elx.offset(),
expected: {
top: win.height() + 500 - 10,
left: win.width() + 200 - 10,
},
};
win.scrollTop(0).scrollLeft(0);
}
event = $.extend($.Event('someEvent'), { pageX: 200, pageY: 300 });
$elx.position({
my: 'left top',
at: 'left top',
of: event,
collision: 'none',
});
toReturn['event - left top, left top'] = {
actual: $elx.offset(),
expected: {
top: 300,
left: 200,
},
};
event = $.extend($.Event('someEvent'), { pageX: 400, pageY: 600 });
$elx.position({
my: 'left top',
at: 'right bottom',
of: event,
collision: 'none',
});
toReturn['event - left top, right bottom'] = {
actual: $elx.offset(),
expected: {
top: 600,
left: 400,
},
};
return toReturn;
},
[],
(result) => {
browser.assert.equal(Object.keys(result.value).length, 10);
Object.entries(result.value).forEach(([key, value]) => {
browser.assert.equal(typeof value, 'object');
browser.assert.deepEqual(value.actual, value.expected, key);
});
},
);
},
offsets: (browser) => {
browser.execute(
// eslint-disable-next-line func-names
function () {
const $ = jQuery;
const toReturn = {
deepEquals: {},
trues: {},
};
const $elx = $('#elx');
let offset;
$elx.position({
my: 'left top',
at: 'left+10 bottom+10',
of: '#parentX',
collision: 'none',
});
toReturn.deepEquals['offsets in at'] = {
actual: $elx.offset(),
expected: { top: 70, left: 50 },
};
$elx.position({
my: 'left+10 top-10',
at: 'left bottom',
of: '#parentX',
collision: 'none',
});
toReturn.deepEquals['offsets in my'] = {
actual: $elx.offset(),
expected: { top: 50, left: 50 },
};
$elx.position({
my: 'left top',
at: 'left+50% bottom-10%',
of: '#parentX',
collision: 'none',
});
toReturn.deepEquals['percentage offsets in at'] = {
actual: $elx.offset(),
expected: { top: 58, left: 50 },
};
$elx.position({
my: 'left-30% top+50%',
at: 'left bottom',
of: '#parentX',
collision: 'none',
});
toReturn.deepEquals['percentage offsets in my'] = {
actual: $elx.offset(),
expected: { top: 65, left: 37 },
};
$elx.position({
my: 'left-30.001% top+50.0%',
at: 'left bottom',
of: '#parentX',
collision: 'none',
});
offset = $elx.offset();
toReturn.trues['decimal percentage top offsets in my'] =
Math.round(offset.top) === 65;
toReturn.trues['decimal percentage left offsets in my'] =
Math.round(offset.left) === 37;
$elx.position({
my: 'left+10.4 top-10.6',
at: 'left bottom',
of: '#parentX',
collision: 'none',
});
offset = $elx.offset();
toReturn.trues['decimal top offsets in my'] =
Math.round(offset.top) === 49;
toReturn.trues['decimal left offsets in my'] =
Math.round(offset.left) === 50;
$elx.position({
my: 'left+right top-left',
at: 'left-top bottom-bottom',
of: '#parentX',
collision: 'none',
});
toReturn.deepEquals['invalid offsets'] = {
actual: $elx.offset(),
expected: { top: 60, left: 40 },
};
return toReturn;
},
[],
(result) => {
browser.assert.equal(Object.keys(result.value.trues).length, 4);
browser.assert.equal(Object.keys(result.value.deepEquals).length, 5);
Object.entries(result.value.deepEquals).forEach(([key, value]) => {
browser.assert.deepEqual(value.actual, value.expected, key);
});
Object.entries(result.value.trues).forEach(([key, value]) => {
browser.assert.equal(value, true, key);
});
},
);
},
using: (browser) => {
browser.execute(
// eslint-disable-next-line func-names
function () {
const $ = jQuery;
const toReturn = {};
let count = 0;
const elems = $('#el1, #el2');
const of = $('#parentX');
const expectedPosition = { top: 60, left: 60 };
const expectedFeedback = {
target: {
element: of,
width: 20,
height: 20,
left: 40,
top: 40,
},
element: {
width: 6,
height: 6,
left: 60,
top: 60,
},
horizontal: 'left',
vertical: 'top',
important: 'vertical',
};
const originalPosition = elems
.position({
my: 'right bottom',
at: 'right bottom',
of: '#parentX',
collision: 'none',
})
.offset();
elems.position({
my: 'left top',
at: 'center+10 bottom',
of: '#parentX',
using(position, feedback) {
toReturn[`correct context for call #${count}`] = {
actual: this,
expected: elems[count],
};
toReturn[`correct position for call #${count}`] = {
actual: position,
expected: expectedPosition,
};
toReturn[`feedback and element match for call #${count}`] = {
actual: feedback.element.element[0],
expected: elems[count],
};
// assert.deepEqual(feedback.element.element[0], elems[count]);
delete feedback.element.element;
toReturn[`expected feedback after delete for call #${count}`] = {
actual: feedback,
expected: expectedFeedback,
};
count += 1;
},
});
// eslint-disable-next-line func-names
elems.each(function (index) {
toReturn[`elements not moved: ${index}`] = {
actual: $(this).offset(),
expected: originalPosition,
};
});
return toReturn;
},
[],
(result) => {
browser.assert.equal(Object.keys(result.value).length, 10);
Object.entries(result.value).forEach(([key, value]) => {
browser.assert.equal(typeof value, 'object');
browser.assert.deepEqual(value.actual, value.expected, key);
});
},
);
},
'collision: fit, no collision': (browser) => {
browser.execute(
// eslint-disable-next-line func-names
function () {
const $ = jQuery;
const toReturn = {};
const $elx = $('#elx');
$elx.position({
my: 'left top',
at: 'right bottom',
of: '#parent',
collision: 'fit',
});
toReturn['no offset'] = {
actual: $elx.offset(),
expected: {
top: 10,
left: 10,
},
};
$elx.position({
my: 'left top',
at: 'right+2 bottom+3',
of: '#parent',
collision: 'fit',
});
toReturn['with offset'] = {
actual: $elx.offset(),
expected: {
top: 13,
left: 12,
},
};
return toReturn;
},
[],
(result) => {
browser.assert.equal(Object.keys(result.value).length, 2);
Object.entries(result.value).forEach(([key, value]) => {
browser.assert.equal(typeof value, 'object');
browser.assert.deepEqual(value.actual, value.expected, key);
});
},
);
},
'collision: fit, collision': (browser) => {
browser.execute(
// eslint-disable-next-line func-names
function () {
const $ = jQuery;
const toReturn = {};
const $elx = $('#elx');
const win = $(window);
// eslint-disable-next-line func-names
let scrollTopSupport = function () {
const support = win.scrollTop(1).scrollTop() === 1;
win.scrollTop(0);
// eslint-disable-next-line func-names
scrollTopSupport = function () {
return support;
};
return support;
};
$elx.position({
my: 'right bottom',
at: 'left top',
of: '#parent',
collision: 'fit',
});
toReturn['no offset'] = {
actual: $elx.offset(),
expected: {
top: 0,
left: 0,
},
};
$elx.position({
my: 'right bottom',
at: 'left+2 top+3',
of: '#parent',
collision: 'fit',
});
toReturn['with offset'] = {
actual: $elx.offset(),
expected: {
top: 0,
left: 0,
},
};
if (scrollTopSupport()) {
win.scrollTop(300).scrollLeft(200);
$elx.position({
my: 'right bottom',
at: 'left top',
of: '#parent',
collision: 'fit',
});
toReturn['window scrolled'] = {
actual: $elx.offset(),
expected: {
top: 300,
left: 200,
},
};
win.scrollTop(0).scrollLeft(0);
}
return toReturn;
},
[],
(result) => {
browser.assert.equal(Object.keys(result.value).length, 3);
Object.entries(result.value).forEach(([key, value]) => {
browser.assert.deepEqual(value.actual, value.expected, key);
});
},
);
},
'collision: flip, no collision': (browser) => {
browser.execute(
// eslint-disable-next-line func-names
function () {
const $ = jQuery;
const toReturn = {};
const $elx = $('#elx');
$elx.position({
my: 'left top',
at: 'right bottom',
of: '#parent',
collision: 'flip',
});
toReturn['no offset'] = {
actual: $elx.offset(),
expected: {
top: 10,
left: 10,
},
};
$elx.position({
my: 'left top',
at: 'right+2 bottom+3',
of: '#parent',
collision: 'flip',
});
toReturn['with offset'] = {
actual: $elx.offset(),
expected: {
top: 13,
left: 12,
},
};
return toReturn;
},
[],
(result) => {
browser.assert.equal(Object.keys(result.value).length, 2);
Object.entries(result.value).forEach(([key, value]) => {
browser.assert.equal(typeof value, 'object');
browser.assert.deepEqual(value.actual, value.expected, key);
});
},
);
},
'collision: flip, collision': (browser) => {
browser.execute(
// eslint-disable-next-line func-names
function () {
const $ = jQuery;
const toReturn = {};
const $elx = $('#elx');
$elx.position({
my: 'right bottom',
at: 'left top',
of: '#parent',
collision: 'flip',
});
toReturn['no offset'] = {
actual: $elx.offset(),
expected: {
top: 10,
left: 10,
},
};
$elx.position({
my: 'right bottom',
at: 'left+2 top+3',
of: '#parent',
collision: 'flip',
});
toReturn['with offset'] = {
actual: $elx.offset(),
expected: {
top: 7,
left: 8,
},
};
return toReturn;
},
[],
(result) => {
browser.assert.equal(Object.keys(result.value).length, 2);
Object.entries(result.value).forEach(([key, value]) => {
browser.assert.equal(typeof value, 'object');
browser.assert.deepEqual(value.actual, value.expected, key);
});
},
);
},
'collision: flipfit, no collision': (browser) => {
browser.execute(
// eslint-disable-next-line func-names
function () {
const $ = jQuery;
const toReturn = {};
const $elx = $('#elx');
$elx.position({
my: 'left top',
at: 'right bottom',
of: '#parent',
collision: 'flipfit',
});
toReturn['no offset'] = {
actual: $elx.offset(),
expected: {
top: 10,
left: 10,
},
};
$elx.position({
my: 'left top',
at: 'right+2 bottom+3',
of: '#parent',
collision: 'flipfit',
});
toReturn['with offset'] = {
actual: $elx.offset(),
expected: {
top: 13,
left: 12,
},
};
return toReturn;
},
[],
(result) => {
browser.assert.equal(Object.keys(result.value).length, 2);
Object.entries(result.value).forEach(([key, value]) => {
browser.assert.equal(typeof value, 'object');
browser.assert.deepEqual(value.actual, value.expected, key);
});
},
);
},
'collision: flipfit, collision': (browser) => {
browser.execute(
// eslint-disable-next-line func-names
function () {
const $ = jQuery;
const toReturn = {};
const $elx = $('#elx');
$elx.position({
my: 'right bottom',
at: 'left top',
of: '#parent',
collision: 'flipfit',
});
toReturn['no offset'] = {
actual: $elx.offset(),
expected: {
top: 10,
left: 10,
},
};
$elx.position({
my: 'right bottom',
at: 'left+2 top+3',
of: '#parent',
collision: 'flipfit',
});
toReturn['with offset'] = {
actual: $elx.offset(),
expected: {
top: 7,
left: 8,
},
};
return toReturn;
},
[],
(result) => {
browser.assert.equal(Object.keys(result.value).length, 2);
Object.entries(result.value).forEach(([key, value]) => {
browser.assert.equal(typeof value, 'object');
browser.assert.deepEqual(value.actual, value.expected, key);
});
},
);
},
'collision: none, no collision': (browser) => {
browser.execute(
// eslint-disable-next-line func-names
function () {
const $ = jQuery;
const toReturn = {};
const $elx = $('#elx');
$elx.position({
my: 'left top',
at: 'right bottom',
of: '#parent',
collision: 'none',
});
toReturn['no offset'] = {
actual: $elx.offset(),
expected: {
top: 10,
left: 10,
},
};
$elx.position({
my: 'left top',
at: 'right+2 bottom+3',
of: '#parent',
collision: 'none',
});
toReturn['with offset'] = {
actual: $elx.offset(),
expected: {
top: 13,
left: 12,
},
};
return toReturn;
},
[],
(result) => {
browser.assert.equal(Object.keys(result.value).length, 2);
Object.entries(result.value).forEach(([key, value]) => {
browser.assert.equal(typeof value, 'object');
browser.assert.deepEqual(value.actual, value.expected, key);
});
},
);
},
'collision: none, collision': (browser) => {
browser.execute(
// eslint-disable-next-line func-names
function () {
const $ = jQuery;
const toReturn = {};
const $elx = $('#elx');
$elx.position({
my: 'right bottom',
at: 'left top',
of: '#parent',
collision: 'none',
});
toReturn['no offset'] = {
actual: $elx.offset(),
expected: {
top: -6,
left: -6,
},
};
$elx.position({
my: 'right bottom',
at: 'left+2 top+3',
of: '#parent',
collision: 'none',
});
toReturn['with offset'] = {
actual: $elx.offset(),
expected: {
top: -3,
left: -4,
},
};
return toReturn;
},
[],
(result) => {
browser.assert.equal(Object.keys(result.value).length, 2);
Object.entries(result.value).forEach(([key, value]) => {
browser.assert.equal(typeof value, 'object');
browser.assert.deepEqual(value.actual, value.expected, key);
});
},
);
},
'collision: fit, with margin': (browser) => {
browser.execute(
// eslint-disable-next-line func-names
function () {
const $ = jQuery;
const toReturn = {};
const $elx = $('#elx');
Object.assign($elx[0].style, {
marginTop: '6px',
marginLeft: '4px',
});
$elx.position({
my: 'left top',
at: 'right bottom',
of: '#parent',
collision: 'fit',
});
toReturn['right bottom'] = {
actual: $elx.offset(),
expected: {
top: 10,
left: 10,
},
};
$elx.position({
my: 'right bottom',
at: 'left top',
of: '#parent',
collision: 'fit',
});
toReturn['left top'] = {
actual: $elx.offset(),
expected: {
top: 6,
left: 4,
},
};
return toReturn;
},
[],
(result) => {
browser.assert.equal(Object.keys(result.value).length, 2);
Object.entries(result.value).forEach(([key, value]) => {
browser.assert.equal(typeof value, 'object');
browser.assert.deepEqual(value.actual, value.expected, key);
});
},
);
},
'collision: flip, with margin': (browser) => {
browser.execute(
// eslint-disable-next-line func-names
function () {
const $ = jQuery;
const toReturn = {};
const $elx = $('#elx');
Object.assign($elx[0].style, {
marginTop: '6px',
marginLeft: '4px',
});
$elx.position({
my: 'left top',
at: 'right bottom',
of: '#parent',
collision: 'flip',
});
toReturn['left top'] = {
actual: $elx.offset(),
expected: {
top: 10,
left: 10,
},
};
$elx.position({
my: 'right bottom',
at: 'left top',
of: '#parent',
collision: 'flip',
});
toReturn['right bottom'] = {
actual: $elx.offset(),
expected: {
top: 10,
left: 10,
},
};
$elx.position({
my: 'left top',
at: 'left top',
of: '#parent',
collision: 'flip',
});
toReturn['left top left top'] = {
actual: $elx.offset(),
expected: {
top: 0,
left: 4,
},
};
return toReturn;
},
[],
(result) => {
browser.assert.equal(Object.keys(result.value).length, 3);
Object.entries(result.value).forEach(([key, value]) => {
browser.assert.equal(typeof value, 'object');
browser.assert.deepEqual(value.actual, value.expected, key);
});
},
);
},
within: (browser) => {
browser.execute(
// eslint-disable-next-line func-names
function () {
const $ = jQuery;
const toReturn = {};
const $elx = $('#elx');
$elx.position({
my: 'left top',
at: 'right bottom',
of: '#parent',
within: document,
});
toReturn['within document'] = {
actual: $elx.offset(),
expected: {
top: 10,
left: 10,
},
};
$elx.position({
my: 'left top',
at: 'right bottom',
of: '#parent',
collision: 'fit',
within: '#within',
});
toReturn['fit - right bottom'] = {
actual: $elx.offset(),
expected: {
top: 4,
left: 2,
},
};
$elx.position({
my: 'right bottom',
at: 'left top',
of: '#parent',
within: '#within',
collision: 'fit',
});
toReturn['fit - left top'] = {
actual: $elx.offset(),
expected: {
top: 2,
left: 0,
},
};
$elx.position({
my: 'left top',
at: 'right bottom',
of: '#parent',
within: '#within',
collision: 'flip',
});
toReturn['flip - right bottom'] = {
actual: $elx.offset(),
expected: {
top: 10,
left: -6,
},
};
$elx.position({
my: 'right bottom',
at: 'left top',
of: '#parent',
within: '#within',
collision: 'flip',
});
toReturn['flip - left top'] = {
actual: $elx.offset(),
expected: {
top: 10,
left: -6,
},
};
$elx.position({
my: 'left top',
at: 'right bottom',
of: '#parent',
within: '#within',
collision: 'flipfit',
});
toReturn['flipfit - right bottom'] = {
actual: $elx.offset(),
expected: {
top: 4,
left: 0,
},
};
$elx.position({
my: 'right bottom',
at: 'left top',
of: '#parent',
within: '#within',
collision: 'flipfit',
});
toReturn['flipfit - left top'] = {
actual: $elx.offset(),
expected: {
top: 4,
left: 0,
},
};
return toReturn;
},
[],
(result) => {
browser.assert.equal(Object.keys(result.value).length, 7);
Object.entries(result.value).forEach(([key, value]) => {
browser.assert.equal(typeof value, 'object');
browser.assert.deepEqual(value.actual, value.expected, key);
});
},
);
},
'with scrollbars': (browser) => {
browser.execute(
// eslint-disable-next-line func-names
function () {
const $ = jQuery;
const toReturn = {};
const $scrollX = $('#scrollX');
Object.assign($scrollX[0].style, {
width: '100px',
height: '100px',
left: 0,
top: 0,
});
const $elx = $('#elx').position({
my: 'left top',
at: 'right bottom',
of: '#scrollX',
within: '#scrollX',
collision: 'fit',
});
toReturn.visible = {
actual: $elx.offset(),
expected: {
top: 90,
left: 90,
},
};
const scrollbarInfo = $.position.getScrollInfo(
$.position.getWithinInfo($('#scrollX')),
);
$elx.position({
of: '#scrollX',
collision: 'fit',
within: '#scrollX',
my: 'left top',
at: 'right bottom',
});
toReturn.scroll = {
actual: $elx.offset(),
expected: {
top: 90 - scrollbarInfo.height,
left: 90 - scrollbarInfo.width,
},
};
$scrollX[0].style.overflow = 'auto';
toReturn['auto, no scroll"'] = {
actual: $elx.offset(),
expected: {
top: 90,
left: 90,
},
};
$scrollX[0].style.overflow = 'auto';
$scrollX.append($('<div>').height(300).width(300));
$elx.position({
of: '#scrollX',
collision: 'fit',
within: '#scrollX',
my: 'left top',
at: 'right bottom',
});
toReturn['auto, with scroll'] = {
actual: $elx.offset(),
expected: {
top: 90 - scrollbarInfo.height,
left: 90 - scrollbarInfo.width,
},
};
return toReturn;
},
[],
(result) => {
browser.assert.equal(Object.keys(result.value).length, 4);
Object.entries(result.value).forEach((key, value) => {
browser.assert.deepEqual(value.actual, value.expected, key);
});
},
);
},
fractions: (browser) => {
browser.execute(
// eslint-disable-next-line func-names
function () {
const $ = jQuery;
const toReturn = {};
const $fractionElement = $('#fractions-element').position({
my: 'left top',
at: 'left top',
of: '#fractions-parent',
collision: 'none',
});
toReturn['left top, left top'] = {
actual: $fractionElement.offset(),
expected: $('#fractions-parent').offset(),
};
return toReturn;
},
[],
(result) => {
browser.assert.equal(Object.keys(result.value).length, 1);
Object.entries(result.value).forEach((key, value) => {
browser.assert.deepEqual(value.actual, value.expected, key);
});
},
);
},
'bug #5280: consistent results (avoid fractional values)': (browser) => {
browser.execute(
// eslint-disable-next-line func-names
function () {
const $ = jQuery;
const toReturn = {};
const wrapper = $('#bug-5280');
const elem = wrapper.children();
const offset1 = elem
.position({
my: 'center',
at: 'center',
of: wrapper,
collision: 'none',
})
.offset();
const offset2 = elem
.position({
my: 'center',
at: 'center',
of: wrapper,
collision: 'none',
})
.offset();
toReturn['offsets consistent'] = {
actual: offset1,
expected: offset2,
};
return toReturn;
},
[],
(result) => {
browser.assert.equal(Object.keys(result.value).length, 1);
Object.entries(result.value).forEach((key, value) => {
browser.assert.deepEqual(value.actual, value.expected, key);
});
},
);
},
'bug #8710: flip if flipped position fits more': (browser) => {
browser.execute(
// eslint-disable-next-line func-names
function () {
const $ = jQuery;
const toReturn = {};
const $elx = $('#elx');
$elx.position({
my: 'left top',
within: '#bug-8710-within-smaller',
of: '#parentX',
collision: 'flip',
at: 'right bottom+30',
});
toReturn['flip - top fits all'] = {
actual: $elx.offset(),
expected: {
top: 0,
left: 60,
},
};
$elx.position({
my: 'left top',
within: '#bug-8710-within-smaller',
of: '#parentX',
collision: 'flip',
at: 'right bottom+32',
});
toReturn['flip - top fits more'] = {
actual: $elx.offset(),
expected: {
top: -2,
left: 60,
},
};
$elx.position({
my: 'left top',
within: '#bug-8710-within-bigger',
of: '#parentX',
collision: 'flip',
at: 'right bottom+32',
});
toReturn['no flip - top fits less'] = {
actual: $elx.offset(),
expected: {
top: 92,
left: 60,
},
};
return toReturn;
},
[],
(result) => {
browser.assert.equal(Object.keys(result.value).length, 3);
Object.entries(result.value).forEach((key, value) => {
browser.assert.deepEqual(value.actual, value.expected, key);
});
},
);
},
};