(function() {
module("tinymce.ui.TabPanel", {
setup: function() {
document.getElementById('view').innerHTML = '';
},
teardown: function() {
tinymce.dom.Event.clean(document.getElementById('view'));
}
});
function createTabPanel(settings) {
return tinymce.ui.Factory.create(tinymce.extend({
type: 'tabpanel',
items: [
{title: 'a', type: 'spacer', classes: 'red'},
{title: 'b', type: 'spacer', classes: 'green'},
{title: 'c', type: 'spacer', classes: 'blue'}
]
}, settings)).renderTo(document.getElementById('view')).reflow();
}
test("panel width: 100, height: 100", function() {
var panel = createTabPanel({
width: 100,
height: 100,
layout: 'fit'
});
deepEqual(Utils.rect(panel), [0, 0, 100, 100]);
Utils.nearlyEqualRects(Utils.rect(panel.items()[0]), [0, 31, 100, 69], 4);
});
test("panel width: 100, height: 100, border: 1", function() {
var panel = createTabPanel({
width: 100,
height: 100,
border: 1,
layout: 'fit'
});
deepEqual(Utils.rect(panel), [0, 0, 100, 100]);
Utils.nearlyEqualRects(Utils.rect(panel.items()[0]), [0, 31, 100, 69], 4);
});
test("panel width: 100, height: 100, activeTab: 1", function() {
var panel = createTabPanel({
width: 100,
height: 100,
activeTab: 1,
layout: 'fit'
});
deepEqual(Utils.rect(panel), [0, 0, 100, 100]);
Utils.nearlyEqualRects(Utils.rect(panel.items()[1]), [0, 31, 100, 69], 4);
});
test("panel width: auto, height: auto, mixed sized widgets", function() {
var panel = createTabPanel({
items: [
{title: 'a', type: 'spacer', classes: 'red', style: 'width: 100px; height: 100px'},
{title: 'b', type: 'spacer', classes: 'green', style: 'width: 70px; height: 70px'},
{title: 'c', type: 'spacer', classes: 'blue', style: 'width: 120px; height: 120px'}
]
});
Utils.nearlyEqualRects(Utils.rect(panel), [0, 0, 120, 151], 4);
Utils.nearlyEqualRects(Utils.rect(panel.items()[0]), [0, 31, 120, 120], 4);
panel.activateTab(1);
Utils.nearlyEqualRects(Utils.rect(panel.items()[1]), [0, 31, 120, 120], 4);
panel.activateTab(2);
Utils.nearlyEqualRects(Utils.rect(panel.items()[2]), [0, 31, 120, 120], 4);
});
test("panel width: auto, height: auto, mixed sized containers", function() {
var panel = createTabPanel({
items: [
{
title: 'a',
type: 'panel',
layout: 'flex',
align: 'stretch',
items: {
type: 'spacer',
classes: 'red',
flex: 1,
minWidth: 100,
minHeight: 100
}
},
{
title: 'b',
type: 'panel',
layout: 'flex',
align: 'stretch',
items: {
type: 'spacer',
flex: 1,
classes: 'green',
minWidth: 70,
minHeight: 70
}
},
{
title: 'c',
type: 'panel',
layout: 'flex',
align: 'stretch',
items: {
type: 'spacer',
classes: 'blue',
flex: 1,
minWidth: 120,
minHeight: 120
}
}
]
});
Utils.nearlyEqualRects(Utils.rect(panel), [0, 0, 120, 151], 4);
Utils.nearlyEqualRects(Utils.rect(panel.items()[0]), [0, 31, 120, 120], 4);
panel.activateTab(1);
Utils.nearlyEqualRects(Utils.rect(panel.items()[1]), [0, 31, 120, 120], 4);
panel.activateTab(2);
Utils.nearlyEqualRects(Utils.rect(panel.items()[2]), [0, 31, 120, 120], 4);
});
})();
|
Download
