245 lines
7.1 KiB
HTML
245 lines
7.1 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8" />
|
||
|
|
<title>ui.GridLayout Test Suite</title>
|
||
|
|
<link type="text/css" rel="stylesheet" href="../../../../../src/wp-includes/js/tinymce/skins/lightgray/skin.min.css" />
|
||
|
|
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
|
||
|
|
<link rel="stylesheet" href="css/ui-overrides.css" type="text/css" />
|
||
|
|
<link rel="stylesheet" href="http://code.jquery.com/qunit/qunit-git.css" type="text/css" />
|
||
|
|
<script src="http://code.jquery.com/qunit/qunit-git.js"></script>
|
||
|
|
<script src="../../js/qunit/reporter.js"></script>
|
||
|
|
<script src="../../js/utils.js"></script>
|
||
|
|
<script src="../../js/tinymce_loader.js"></script>
|
||
|
|
<script type="text/javascript">
|
||
|
|
var panel;
|
||
|
|
|
||
|
|
QUnit.config.autostart = false;
|
||
|
|
QUnit.config.reorder = false;
|
||
|
|
|
||
|
|
module("ui.GridLayout", {
|
||
|
|
setup: function() {
|
||
|
|
document.getElementById('view').innerHTML = '';
|
||
|
|
},
|
||
|
|
|
||
|
|
teardown: function() {
|
||
|
|
//document.getElementById('view').innerHTML = '';
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
window.onload = function() {
|
||
|
|
QUnit.start();
|
||
|
|
};
|
||
|
|
|
||
|
|
function renderGridPanel(settings) {
|
||
|
|
var panel = tinymce.ui.Factory.create(tinymce.extend({
|
||
|
|
type: "panel",
|
||
|
|
layout: "grid",
|
||
|
|
defaults: {type: 'spacer'}
|
||
|
|
}, settings)).renderTo(document.getElementById('view')).reflow();
|
||
|
|
|
||
|
|
resetScroll(panel.getEl('body'));
|
||
|
|
|
||
|
|
return panel;
|
||
|
|
}
|
||
|
|
|
||
|
|
test("automatic grid size 2x2", function() {
|
||
|
|
panel = renderGridPanel({
|
||
|
|
items: [
|
||
|
|
{classes: 'red'}, {classes: 'green'},
|
||
|
|
{classes: 'blue'}, {classes: 'cyan'}
|
||
|
|
]
|
||
|
|
});
|
||
|
|
|
||
|
|
deepEqual(rect(panel), [0, 0, 40, 40]);
|
||
|
|
deepEqual(rect(panel.find('spacer')[0]), [0, 0, 20, 20]);
|
||
|
|
deepEqual(rect(panel.find('spacer')[1]), [20, 0, 20, 20]);
|
||
|
|
deepEqual(rect(panel.find('spacer')[2]), [0, 20, 20, 20]);
|
||
|
|
deepEqual(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(rect(panel), [0, 0, 200, 200]);
|
||
|
|
deepEqual(rect(panel.find('spacer')[0]), [0, 0, 17, 22]);
|
||
|
|
deepEqual(rect(panel.find('spacer')[1]), [17, 0, 17, 22]);
|
||
|
|
deepEqual(rect(panel.find('spacer')[2]), [0, 22, 16, 22]);
|
||
|
|
deepEqual(rect(panel.find('spacer')[3]), [17, 22, 17, 22]);
|
||
|
|
});
|
||
|
|
*/
|
||
|
|
|
||
|
|
test("spacing: 3, automatic grid size 2x2", function() {
|
||
|
|
panel = renderGridPanel({
|
||
|
|
spacing: 3,
|
||
|
|
items: [
|
||
|
|
{classes: 'red'}, {classes: 'green'},
|
||
|
|
{classes: 'blue'}, {classes: 'cyan'}
|
||
|
|
]
|
||
|
|
});
|
||
|
|
|
||
|
|
deepEqual(rect(panel), [0, 0, 43, 43]);
|
||
|
|
deepEqual(rect(panel.find('spacer')[0]), [0, 0, 20, 20]);
|
||
|
|
deepEqual(rect(panel.find('spacer')[1]), [23, 0, 20, 20]);
|
||
|
|
deepEqual(rect(panel.find('spacer')[2]), [0, 23, 20, 20]);
|
||
|
|
deepEqual(rect(panel.find('spacer')[3]), [23, 23, 20, 20]);
|
||
|
|
});
|
||
|
|
|
||
|
|
test("padding: 3, automatic grid size 2x2", function() {
|
||
|
|
panel = renderGridPanel({
|
||
|
|
padding: 3,
|
||
|
|
items: [
|
||
|
|
{classes: 'red'}, {classes: 'green'},
|
||
|
|
{classes: 'blue'}, {classes: 'cyan'}
|
||
|
|
]
|
||
|
|
});
|
||
|
|
|
||
|
|
deepEqual(rect(panel), [0, 0, 46, 46]);
|
||
|
|
deepEqual(rect(panel.find('spacer')[0]), [3, 3, 20, 20]);
|
||
|
|
deepEqual(rect(panel.find('spacer')[1]), [23, 3, 20, 20]);
|
||
|
|
deepEqual(rect(panel.find('spacer')[2]), [3, 23, 20, 20]);
|
||
|
|
deepEqual(rect(panel.find('spacer')[3]), [23, 23, 20, 20]);
|
||
|
|
});
|
||
|
|
|
||
|
|
test("spacing: 3, padding: 3, automatic grid size 2x2", function() {
|
||
|
|
panel = renderGridPanel({
|
||
|
|
padding: 3,
|
||
|
|
spacing: 3,
|
||
|
|
items: [
|
||
|
|
{classes: 'red'}, {classes: 'green'},
|
||
|
|
{classes: 'blue'}, {classes: 'cyan'}
|
||
|
|
]
|
||
|
|
});
|
||
|
|
|
||
|
|
deepEqual(rect(panel), [0, 0, 49, 49]);
|
||
|
|
deepEqual(rect(panel.find('spacer')[0]), [3, 3, 20, 20]);
|
||
|
|
deepEqual(rect(panel.find('spacer')[1]), [26, 3, 20, 20]);
|
||
|
|
deepEqual(rect(panel.find('spacer')[2]), [3, 26, 20, 20]);
|
||
|
|
deepEqual(rect(panel.find('spacer')[3]), [26, 26, 20, 20]);
|
||
|
|
});
|
||
|
|
|
||
|
|
test("inner elements 100x100 maxWidth/maxHeight: 118 (overflow W+H)", function() {
|
||
|
|
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(rect(panel), [0, 0, 118, 118]);
|
||
|
|
deepEqual(rect(panel.find('spacer')[0]), [0, 0, 100, 100]);
|
||
|
|
deepEqual(rect(panel.find('spacer')[1]), [100, 0, 100, 100]);
|
||
|
|
deepEqual(rect(panel.find('spacer')[2]), [0, 100, 100, 100]);
|
||
|
|
deepEqual(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() {
|
||
|
|
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(rect(panel), [0, 0, 118, 118]);
|
||
|
|
deepEqual(rect(panel.find('spacer')[0]), [20, 20, 100, 100]);
|
||
|
|
deepEqual(rect(panel.find('spacer')[1]), [130, 20, 100, 100]);
|
||
|
|
deepEqual(rect(panel.find('spacer')[2]), [20, 130, 100, 100]);
|
||
|
|
deepEqual(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() {
|
||
|
|
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(rect(panel.find('spacer')[0]), [0, 0, 100, 100]);
|
||
|
|
deepEqual(rect(panel.find('spacer')[1]), [100, 0, 100, 100]);
|
||
|
|
deepEqual(rect(panel.find('spacer')[2]), [0, 100, 100, 100]);
|
||
|
|
deepEqual(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() {
|
||
|
|
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(rect(panel.find('spacer')[0]), [0, 0, 100, 100]);
|
||
|
|
deepEqual(rect(panel.find('spacer')[1]), [100, 0, 100, 100]);
|
||
|
|
deepEqual(rect(panel.find('spacer')[2]), [0, 100, 100, 100]);
|
||
|
|
deepEqual(rect(panel.find('spacer')[3]), [100, 100, 100, 100]);
|
||
|
|
equal(panel.layoutRect().contentW, 200);
|
||
|
|
equal(panel.layoutRect().contentH, 200);
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<h1 id="qunit-header">ui.GridLayout Test Suite</h1>
|
||
|
|
<h2 id="qunit-banner"></h2>
|
||
|
|
<h2 id="qunit-userAgent"></h2>
|
||
|
|
<ol id="qunit-tests">
|
||
|
|
</ol>
|
||
|
|
<div id="view" style="position: absolute; right: 0; top: 0"></div>
|
||
|
|
</body>
|
||
|
|
</html>
|