mirror of
https://github.com/chartjs/Chart.js.git
synced 2024-10-08 21:29:07 +02:00
350 lines
11 KiB
JavaScript
350 lines
11 KiB
JavaScript
describe('DOM helpers tests', function() {
|
|
let helpers;
|
|
|
|
beforeAll(function() {
|
|
helpers = window.Chart.helpers;
|
|
});
|
|
|
|
it ('should get the maximum size for a node', function() {
|
|
// Create div with fixed size as a test bed
|
|
var div = document.createElement('div');
|
|
div.style.width = '200px';
|
|
div.style.height = '300px';
|
|
|
|
document.body.appendChild(div);
|
|
|
|
// Create the div we want to get the max size for
|
|
var innerDiv = document.createElement('div');
|
|
div.appendChild(innerDiv);
|
|
|
|
expect(helpers.getMaximumSize(innerDiv)).toEqual(jasmine.objectContaining({width: 200, height: 300}));
|
|
|
|
document.body.removeChild(div);
|
|
});
|
|
|
|
it ('should get the maximum width and height for a node in a ShadowRoot', function() {
|
|
// Create div with fixed size as a test bed
|
|
var div = document.createElement('div');
|
|
div.style.width = '200px';
|
|
div.style.height = '300px';
|
|
|
|
document.body.appendChild(div);
|
|
|
|
if (!div.attachShadow) {
|
|
// Shadow DOM is not natively supported
|
|
return;
|
|
}
|
|
|
|
var shadow = div.attachShadow({mode: 'closed'});
|
|
|
|
// Create the div we want to get the max size for
|
|
var innerDiv = document.createElement('div');
|
|
shadow.appendChild(innerDiv);
|
|
|
|
expect(helpers.getMaximumSize(innerDiv)).toEqual(jasmine.objectContaining({width: 200, height: 300}));
|
|
|
|
document.body.removeChild(div);
|
|
});
|
|
|
|
it ('should get the maximum width of a node that has a max-width style', function() {
|
|
// Create div with fixed size as a test bed
|
|
var div = document.createElement('div');
|
|
div.style.width = '200px';
|
|
div.style.height = '300px';
|
|
|
|
document.body.appendChild(div);
|
|
|
|
// Create the div we want to get the max size for and set a max-width style
|
|
var innerDiv = document.createElement('div');
|
|
innerDiv.style.maxWidth = '150px';
|
|
div.appendChild(innerDiv);
|
|
|
|
expect(helpers.getMaximumSize(innerDiv)).toEqual(jasmine.objectContaining({width: 150}));
|
|
|
|
document.body.removeChild(div);
|
|
});
|
|
|
|
it ('should get the maximum height of a node that has a max-height style', function() {
|
|
// Create div with fixed size as a test bed
|
|
var div = document.createElement('div');
|
|
div.style.width = '200px';
|
|
div.style.height = '300px';
|
|
|
|
document.body.appendChild(div);
|
|
|
|
// Create the div we want to get the max size for and set a max-height style
|
|
var innerDiv = document.createElement('div');
|
|
innerDiv.style.maxHeight = '150px';
|
|
div.appendChild(innerDiv);
|
|
|
|
expect(helpers.getMaximumSize(innerDiv)).toEqual(jasmine.objectContaining({height: 150}));
|
|
|
|
document.body.removeChild(div);
|
|
});
|
|
|
|
it ('should get the maximum width of a node when the parent has a max-width style', function() {
|
|
// Create div with fixed size as a test bed
|
|
var div = document.createElement('div');
|
|
div.style.width = '200px';
|
|
div.style.height = '300px';
|
|
|
|
document.body.appendChild(div);
|
|
|
|
// Create an inner wrapper around our div we want to size and give that a max-width style
|
|
var parentDiv = document.createElement('div');
|
|
parentDiv.style.maxWidth = '150px';
|
|
div.appendChild(parentDiv);
|
|
|
|
// Create the div we want to get the max size for
|
|
var innerDiv = document.createElement('div');
|
|
parentDiv.appendChild(innerDiv);
|
|
|
|
expect(helpers.getMaximumSize(innerDiv)).toEqual(jasmine.objectContaining({width: 150}));
|
|
|
|
document.body.removeChild(div);
|
|
});
|
|
|
|
it ('should get the maximum height of a node when the parent has a max-height style', function() {
|
|
// Create div with fixed size as a test bed
|
|
var div = document.createElement('div');
|
|
div.style.width = '200px';
|
|
div.style.height = '300px';
|
|
|
|
document.body.appendChild(div);
|
|
|
|
// Create an inner wrapper around our div we want to size and give that a max-height style
|
|
var parentDiv = document.createElement('div');
|
|
parentDiv.style.maxHeight = '150px';
|
|
div.appendChild(parentDiv);
|
|
|
|
// Create the div we want to get the max size for
|
|
var innerDiv = document.createElement('div');
|
|
innerDiv.style.height = '300px'; // make it large
|
|
parentDiv.appendChild(innerDiv);
|
|
|
|
expect(helpers.getMaximumSize(innerDiv)).toEqual(jasmine.objectContaining({height: 150}));
|
|
|
|
document.body.removeChild(div);
|
|
});
|
|
|
|
it ('should get the maximum width of a node that has a percentage max-width style', function() {
|
|
// Create div with fixed size as a test bed
|
|
var div = document.createElement('div');
|
|
div.style.width = '200px';
|
|
div.style.height = '300px';
|
|
|
|
document.body.appendChild(div);
|
|
|
|
// Create the div we want to get the max size for and set a max-width style
|
|
var innerDiv = document.createElement('div');
|
|
innerDiv.style.maxWidth = '50%';
|
|
div.appendChild(innerDiv);
|
|
|
|
expect(helpers.getMaximumSize(innerDiv)).toEqual(jasmine.objectContaining({width: 100}));
|
|
|
|
document.body.removeChild(div);
|
|
});
|
|
|
|
it('should get the maximum height of a node that has a percentage max-height style', function() {
|
|
// Create div with fixed size as a test bed
|
|
var div = document.createElement('div');
|
|
div.style.width = '200px';
|
|
div.style.height = '300px';
|
|
|
|
document.body.appendChild(div);
|
|
|
|
// Create the div we want to get the max size for and set a max-height style
|
|
var innerDiv = document.createElement('div');
|
|
innerDiv.style.maxHeight = '50%';
|
|
div.appendChild(innerDiv);
|
|
|
|
expect(helpers.getMaximumSize(innerDiv)).toEqual(jasmine.objectContaining({height: 150}));
|
|
|
|
document.body.removeChild(div);
|
|
});
|
|
|
|
it ('should get the maximum width of a node when the parent has a percentage max-width style', function() {
|
|
// Create div with fixed size as a test bed
|
|
var div = document.createElement('div');
|
|
div.style.width = '200px';
|
|
div.style.height = '300px';
|
|
|
|
document.body.appendChild(div);
|
|
|
|
// Create an inner wrapper around our div we want to size and give that a max-width style
|
|
var parentDiv = document.createElement('div');
|
|
parentDiv.style.maxWidth = '50%';
|
|
div.appendChild(parentDiv);
|
|
|
|
// Create the div we want to get the max size for
|
|
var innerDiv = document.createElement('div');
|
|
parentDiv.appendChild(innerDiv);
|
|
|
|
expect(helpers.getMaximumSize(innerDiv)).toEqual(jasmine.objectContaining({width: 100}));
|
|
|
|
document.body.removeChild(div);
|
|
});
|
|
|
|
it ('should get the maximum height of a node when the parent has a percentage max-height style', function() {
|
|
// Create div with fixed size as a test bed
|
|
var div = document.createElement('div');
|
|
div.style.width = '200px';
|
|
div.style.height = '300px';
|
|
|
|
document.body.appendChild(div);
|
|
|
|
// Create an inner wrapper around our div we want to size and give that a max-height style
|
|
var parentDiv = document.createElement('div');
|
|
parentDiv.style.maxHeight = '50%';
|
|
div.appendChild(parentDiv);
|
|
|
|
var innerDiv = document.createElement('div');
|
|
innerDiv.style.height = '300px'; // make it large
|
|
parentDiv.appendChild(innerDiv);
|
|
|
|
expect(helpers.getMaximumSize(innerDiv)).toEqual(jasmine.objectContaining({height: 150}));
|
|
|
|
document.body.removeChild(div);
|
|
});
|
|
|
|
it ('Should get padding of parent as number (pixels) when defined as percent (returns incorrectly in IE11)', function() {
|
|
|
|
// Create div with fixed size as a test bed
|
|
var div = document.createElement('div');
|
|
div.style.width = '300px';
|
|
div.style.height = '300px';
|
|
document.body.appendChild(div);
|
|
|
|
// Inner DIV to have 5% padding of parent
|
|
var innerDiv = document.createElement('div');
|
|
|
|
div.appendChild(innerDiv);
|
|
|
|
var canvas = document.createElement('canvas');
|
|
innerDiv.appendChild(canvas);
|
|
|
|
// No padding
|
|
expect(helpers.getMaximumSize(canvas)).toEqual(jasmine.objectContaining({width: 300}));
|
|
|
|
// test with percentage
|
|
innerDiv.style.padding = '5%';
|
|
expect(helpers.getMaximumSize(canvas)).toEqual(jasmine.objectContaining({width: 270}));
|
|
|
|
// test with pixels
|
|
innerDiv.style.padding = '10px';
|
|
expect(helpers.getMaximumSize(canvas)).toEqual(jasmine.objectContaining({width: 280}));
|
|
|
|
document.body.removeChild(div);
|
|
});
|
|
|
|
it ('should leave styled height and width on canvas if explicitly set', function() {
|
|
var chart = window.acquireChart({}, {
|
|
canvas: {
|
|
height: 200,
|
|
width: 200,
|
|
style: 'height: 400px; width: 400px;'
|
|
}
|
|
});
|
|
|
|
helpers.retinaScale(chart, true);
|
|
|
|
var canvas = chart.canvas;
|
|
|
|
expect(canvas.style.height).toBe('400px');
|
|
expect(canvas.style.width).toBe('400px');
|
|
});
|
|
|
|
describe('getRelativePosition', function() {
|
|
it('should use offsetX/Y when available', function() {
|
|
const event = {offsetX: 50, offsetY: 100};
|
|
const chart = window.acquireChart({}, {
|
|
canvas: {
|
|
height: 200,
|
|
width: 200,
|
|
}
|
|
});
|
|
expect(helpers.getRelativePosition(event, chart)).toEqual({x: 50, y: 100});
|
|
|
|
const chart2 = window.acquireChart({}, {
|
|
canvas: {
|
|
height: 200,
|
|
width: 200,
|
|
style: 'padding: 10px'
|
|
}
|
|
});
|
|
expect(helpers.getRelativePosition(event, chart2)).toEqual({
|
|
x: Math.round((event.offsetX - 10) / 180 * 200),
|
|
y: Math.round((event.offsetY - 10) / 180 * 200)
|
|
});
|
|
|
|
const chart3 = window.acquireChart({}, {
|
|
canvas: {
|
|
height: 200,
|
|
width: 200,
|
|
style: 'width: 400px, height: 400px; padding: 10px'
|
|
}
|
|
});
|
|
expect(helpers.getRelativePosition(event, chart3)).toEqual({
|
|
x: Math.round((event.offsetX - 10) / 360 * 400),
|
|
y: Math.round((event.offsetY - 10) / 360 * 400)
|
|
});
|
|
|
|
const chart4 = window.acquireChart({}, {
|
|
canvas: {
|
|
height: 200,
|
|
width: 200,
|
|
style: 'width: 400px, height: 400px; padding: 10px; position: absolute; left: 20, top: 20'
|
|
}
|
|
});
|
|
expect(helpers.getRelativePosition(event, chart4)).toEqual({
|
|
x: Math.round((event.offsetX - 10) / 360 * 400),
|
|
y: Math.round((event.offsetY - 10) / 360 * 400)
|
|
});
|
|
|
|
});
|
|
|
|
it('should calculate from clientX/Y as fallback', function() {
|
|
const chart = window.acquireChart({}, {
|
|
canvas: {
|
|
height: 200,
|
|
width: 200,
|
|
}
|
|
});
|
|
|
|
const event = {
|
|
clientX: 50,
|
|
clientY: 100
|
|
};
|
|
|
|
const rect = chart.canvas.getBoundingClientRect();
|
|
const pos = helpers.getRelativePosition(event, chart);
|
|
expect(Math.abs(pos.x - Math.round(event.clientX - rect.x))).toBeLessThanOrEqual(1);
|
|
expect(Math.abs(pos.y - Math.round(event.clientY - rect.y))).toBeLessThanOrEqual(1);
|
|
|
|
const chart2 = window.acquireChart({}, {
|
|
canvas: {
|
|
height: 200,
|
|
width: 200,
|
|
style: 'padding: 10px'
|
|
}
|
|
});
|
|
const rect2 = chart2.canvas.getBoundingClientRect();
|
|
const pos2 = helpers.getRelativePosition(event, chart2);
|
|
expect(Math.abs(pos2.x - Math.round((event.clientX - rect2.x - 10) / 180 * 200))).toBeLessThanOrEqual(1);
|
|
expect(Math.abs(pos2.y - Math.round((event.clientY - rect2.y - 10) / 180 * 200))).toBeLessThanOrEqual(1);
|
|
|
|
const chart3 = window.acquireChart({}, {
|
|
canvas: {
|
|
height: 200,
|
|
width: 200,
|
|
style: 'width: 400px, height: 400px; padding: 10px'
|
|
}
|
|
});
|
|
const rect3 = chart3.canvas.getBoundingClientRect();
|
|
const pos3 = helpers.getRelativePosition(event, chart3);
|
|
expect(Math.abs(pos3.x - Math.round((event.clientX - rect3.x - 10) / 360 * 400))).toBeLessThanOrEqual(1);
|
|
expect(Math.abs(pos3.y - Math.round((event.clientY - rect3.y - 10) / 360 * 400))).toBeLessThanOrEqual(1);
|
|
});
|
|
});
|
|
});
|