0898014ebd
In 4.0.20 all tests were reworked. The 'testrunner' was removed and the PhantomJS Runner QUnit plugin was added making it possible to run the tests from cli. However it is still necessary to run the tests in all supported browsers to test the fixes for all browser quirks and normalization. Also all tests are loaded in one html file. See #27014 git-svn-id: https://develop.svn.wordpress.org/trunk@27679 602fd350-edb4-49c9-b593-d223f7449a82
213 lines
6.5 KiB
JavaScript
213 lines
6.5 KiB
JavaScript
(function() {
|
|
module("tinymce.ui.GridLayout", {
|
|
setup: function() {
|
|
document.getElementById('view').innerHTML = '';
|
|
},
|
|
|
|
teardown: function() {
|
|
tinymce.dom.Event.clean(document.getElementById('view'));
|
|
}
|
|
});
|
|
|
|
function renderGridPanel(settings) {
|
|
var panel = tinymce.ui.Factory.create(tinymce.extend({
|
|
type: "panel",
|
|
layout: "grid",
|
|
defaults: {type: 'spacer'}
|
|
}, settings)).renderTo(document.getElementById('view')).reflow();
|
|
|
|
Utils.resetScroll(panel.getEl('body'));
|
|
|
|
return panel;
|
|
}
|
|
|
|
test("automatic grid size 2x2", function() {
|
|
var panel = renderGridPanel({
|
|
items: [
|
|
{classes: 'red'}, {classes: 'green'},
|
|
{classes: 'blue'}, {classes: 'cyan'}
|
|
]
|
|
});
|
|
|
|
deepEqual(Utils.rect(panel), [0, 0, 40, 40]);
|
|
deepEqual(Utils.rect(panel.find('spacer')[0]), [0, 0, 20, 20]);
|
|
deepEqual(Utils.rect(panel.find('spacer')[1]), [20, 0, 20, 20]);
|
|
deepEqual(Utils.rect(panel.find('spacer')[2]), [0, 20, 20, 20]);
|
|
deepEqual(Utils.rect(panel.find('spacer')[3]), [20, 20, 20, 20]);
|
|
});
|
|
|
|
/*
|
|
test("fixed pixel size, automatic grid size 2x2", function() {
|
|
panel = renderGridPanel({
|
|
width: 100, height: 100,
|
|
align: "center",
|
|
items: [
|
|
{classes: 'red'}, {classes: 'green'},
|
|
{classes: 'blue'}, {classes: 'cyan'}
|
|
]
|
|
});
|
|
|
|
deepEqual(Utils.rect(panel), [0, 0, 200, 200]);
|
|
deepEqual(Utils.rect(panel.find('spacer')[0]), [0, 0, 17, 22]);
|
|
deepEqual(Utils.rect(panel.find('spacer')[1]), [17, 0, 17, 22]);
|
|
deepEqual(Utils.rect(panel.find('spacer')[2]), [0, 22, 16, 22]);
|
|
deepEqual(Utils.rect(panel.find('spacer')[3]), [17, 22, 17, 22]);
|
|
});
|
|
*/
|
|
|
|
test("spacing: 3, automatic grid size 2x2", function() {
|
|
var panel = renderGridPanel({
|
|
spacing: 3,
|
|
items: [
|
|
{classes: 'red'}, {classes: 'green'},
|
|
{classes: 'blue'}, {classes: 'cyan'}
|
|
]
|
|
});
|
|
|
|
deepEqual(Utils.rect(panel), [0, 0, 43, 43]);
|
|
deepEqual(Utils.rect(panel.find('spacer')[0]), [0, 0, 20, 20]);
|
|
deepEqual(Utils.rect(panel.find('spacer')[1]), [23, 0, 20, 20]);
|
|
deepEqual(Utils.rect(panel.find('spacer')[2]), [0, 23, 20, 20]);
|
|
deepEqual(Utils.rect(panel.find('spacer')[3]), [23, 23, 20, 20]);
|
|
});
|
|
|
|
test("padding: 3, automatic grid size 2x2", function() {
|
|
var panel = renderGridPanel({
|
|
padding: 3,
|
|
items: [
|
|
{classes: 'red'}, {classes: 'green'},
|
|
{classes: 'blue'}, {classes: 'cyan'}
|
|
]
|
|
});
|
|
|
|
deepEqual(Utils.rect(panel), [0, 0, 46, 46]);
|
|
deepEqual(Utils.rect(panel.find('spacer')[0]), [3, 3, 20, 20]);
|
|
deepEqual(Utils.rect(panel.find('spacer')[1]), [23, 3, 20, 20]);
|
|
deepEqual(Utils.rect(panel.find('spacer')[2]), [3, 23, 20, 20]);
|
|
deepEqual(Utils.rect(panel.find('spacer')[3]), [23, 23, 20, 20]);
|
|
});
|
|
|
|
test("spacing: 3, padding: 3, automatic grid size 2x2", function() {
|
|
var panel = renderGridPanel({
|
|
padding: 3,
|
|
spacing: 3,
|
|
items: [
|
|
{classes: 'red'}, {classes: 'green'},
|
|
{classes: 'blue'}, {classes: 'cyan'}
|
|
]
|
|
});
|
|
|
|
deepEqual(Utils.rect(panel), [0, 0, 49, 49]);
|
|
deepEqual(Utils.rect(panel.find('spacer')[0]), [3, 3, 20, 20]);
|
|
deepEqual(Utils.rect(panel.find('spacer')[1]), [26, 3, 20, 20]);
|
|
deepEqual(Utils.rect(panel.find('spacer')[2]), [3, 26, 20, 20]);
|
|
deepEqual(Utils.rect(panel.find('spacer')[3]), [26, 26, 20, 20]);
|
|
});
|
|
|
|
test("inner elements 100x100 maxWidth/maxHeight: 118 (overflow W+H)", function() {
|
|
var panel = renderGridPanel({
|
|
autoResize: true,
|
|
autoScroll: true,
|
|
maxWidth: 118,
|
|
maxHeight: 118,
|
|
defaults: {
|
|
type: 'spacer',
|
|
minWidth: 100,
|
|
minHeight: 100
|
|
},
|
|
items: [
|
|
{classes: 'red dotted'}, {classes: 'green dotted'},
|
|
{classes: 'blue dotted'}, {classes: 'cyan dotted'}
|
|
]
|
|
});
|
|
|
|
deepEqual(Utils.rect(panel), [0, 0, 118, 118]);
|
|
deepEqual(Utils.rect(panel.find('spacer')[0]), [0, 0, 100, 100]);
|
|
deepEqual(Utils.rect(panel.find('spacer')[1]), [100, 0, 100, 100]);
|
|
deepEqual(Utils.rect(panel.find('spacer')[2]), [0, 100, 100, 100]);
|
|
deepEqual(Utils.rect(panel.find('spacer')[3]), [100, 100, 100, 100]);
|
|
equal(panel.layoutRect().w, 118);
|
|
equal(panel.layoutRect().h, 118);
|
|
equal(panel.layoutRect().contentW, 200);
|
|
equal(panel.layoutRect().contentH, 200);
|
|
});
|
|
|
|
test("inner elements: 100x100, padding: 20, spacing: 10, maxWidth/maxHeight: 118 (overflow W+H)", function() {
|
|
var panel = renderGridPanel({
|
|
autoResize: true,
|
|
autoScroll: true,
|
|
maxWidth: 118,
|
|
maxHeight: 118,
|
|
padding: 20,
|
|
spacing: 10,
|
|
defaults: {
|
|
type: 'spacer',
|
|
minWidth: 100,
|
|
minHeight: 100
|
|
},
|
|
items: [
|
|
{classes: 'red dotted'}, {classes: 'green dotted'},
|
|
{classes: 'blue dotted'}, {classes: 'cyan dotted'}
|
|
]
|
|
});
|
|
|
|
deepEqual(Utils.rect(panel), [0, 0, 118, 118]);
|
|
deepEqual(Utils.rect(panel.find('spacer')[0]), [20, 20, 100, 100]);
|
|
deepEqual(Utils.rect(panel.find('spacer')[1]), [130, 20, 100, 100]);
|
|
deepEqual(Utils.rect(panel.find('spacer')[2]), [20, 130, 100, 100]);
|
|
deepEqual(Utils.rect(panel.find('spacer')[3]), [130, 130, 100, 100]);
|
|
equal(panel.layoutRect().w, 118);
|
|
equal(panel.layoutRect().h, 118);
|
|
equal(panel.layoutRect().contentW, 20 + 200 + 10 + 20);
|
|
equal(panel.layoutRect().contentH, 20 + 200 + 10 + 20);
|
|
});
|
|
|
|
test("inner elements 100x100 maxWidth: 118 (overflow W)", function() {
|
|
var panel = renderGridPanel({
|
|
autoResize: true,
|
|
autoScroll: true,
|
|
maxWidth: 100,
|
|
defaults: {
|
|
type: 'spacer',
|
|
minWidth: 100,
|
|
minHeight: 100
|
|
},
|
|
items: [
|
|
{classes: 'red dotted'}, {classes: 'green dotted'},
|
|
{classes: 'blue dotted'}, {classes: 'cyan dotted'}
|
|
]
|
|
});
|
|
|
|
deepEqual(Utils.rect(panel.find('spacer')[0]), [0, 0, 100, 100]);
|
|
deepEqual(Utils.rect(panel.find('spacer')[1]), [100, 0, 100, 100]);
|
|
deepEqual(Utils.rect(panel.find('spacer')[2]), [0, 100, 100, 100]);
|
|
deepEqual(Utils.rect(panel.find('spacer')[3]), [100, 100, 100, 100]);
|
|
equal(panel.layoutRect().contentW, 200);
|
|
equal(panel.layoutRect().contentH, 200);
|
|
});
|
|
|
|
test("inner elements 100x100 maxHeight: 118 (overflow H)", function() {
|
|
var panel = renderGridPanel({
|
|
autoResize: true,
|
|
autoScroll: true,
|
|
maxHeight: 100,
|
|
defaults: {
|
|
type: 'spacer',
|
|
minWidth: 100,
|
|
minHeight: 100
|
|
},
|
|
items: [
|
|
{classes: 'red dotted'}, {classes: 'green dotted'},
|
|
{classes: 'blue dotted'}, {classes: 'cyan dotted'}
|
|
]
|
|
});
|
|
|
|
deepEqual(Utils.rect(panel.find('spacer')[0]), [0, 0, 100, 100]);
|
|
deepEqual(Utils.rect(panel.find('spacer')[1]), [100, 0, 100, 100]);
|
|
deepEqual(Utils.rect(panel.find('spacer')[2]), [0, 100, 100, 100]);
|
|
deepEqual(Utils.rect(panel.find('spacer')[3]), [100, 100, 100, 100]);
|
|
equal(panel.layoutRect().contentW, 200);
|
|
equal(panel.layoutRect().contentH, 200);
|
|
});
|
|
})();
|