mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
Add column sizes specs
This commit is contained in:
Jeremy Thomas
parent
895e17ab14
commit
0e7659d624
@ -1,6 +1,12 @@
|
||||
---
|
||||
layout: cypress
|
||||
title: Grid/Columns
|
||||
screens:
|
||||
- mobile
|
||||
- tablet
|
||||
- desktop
|
||||
- widescreen
|
||||
- fullhd
|
||||
widths:
|
||||
- three-quarters
|
||||
- two-thirds
|
||||
@ -54,6 +60,12 @@ widths:
|
||||
Column {{ width }}
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
{% for i in (1..12) %}
|
||||
<div class="column is-{{ i }}">
|
||||
Column {{ i }}
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% endcapture %}
|
||||
|
||||
<div id="columns" class="columns">
|
||||
@ -105,5 +117,63 @@ widths:
|
||||
</div>
|
||||
|
||||
<div id="columns-special" class="columns is-multiline">
|
||||
{{ special_columns }}
|
||||
<div class="column is-narrow">
|
||||
Column narrow
|
||||
</div>
|
||||
|
||||
<div class="column is-full">
|
||||
Column full
|
||||
</div>
|
||||
|
||||
{% for width in page.widths %}
|
||||
<div class="column is-{{ width }}">
|
||||
Column {{ width }}
|
||||
</div>
|
||||
|
||||
<div class="column is-offset-{{ width }}">
|
||||
Column {{ width }}
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
{% for i in (1..12) %}
|
||||
<div class="column is-{{ i }}">
|
||||
Column {{ i }}
|
||||
</div>
|
||||
|
||||
<div class="column is-offset-{{ i }}">
|
||||
Column {{ i }}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
{% for screen in page.screens %}
|
||||
<div id="columns-special-{{ screen }}" class="columns is-multiline is-{{ screen }}">
|
||||
<div class="column is-narrow-{{ screen }}">
|
||||
Column narrow
|
||||
</div>
|
||||
|
||||
<div class="column is-full-{{ screen }}">
|
||||
Column full
|
||||
</div>
|
||||
|
||||
{% for width in page.widths %}
|
||||
<div class="column is-{{ width }}-{{ screen }}">
|
||||
Column {{ width }}
|
||||
</div>
|
||||
|
||||
<div class="column is-offset-{{ width }}-{{ screen }}">
|
||||
Column {{ width }}
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
{% for i in (1..12) %}
|
||||
<div class="column is-{{ i }}-{{ screen }}">
|
||||
Column {{ i }}
|
||||
</div>
|
||||
|
||||
<div class="column is-offset-{{ i }}-{{ screen }}">
|
||||
Column {{ i }}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
@ -1,4 +1,18 @@
|
||||
import { setMobile, setTablet, setDesktop } from "../utils";
|
||||
import {
|
||||
setMobile,
|
||||
setTablet,
|
||||
setDesktop,
|
||||
setWidescreen,
|
||||
setFullHD,
|
||||
} from "../utils";
|
||||
|
||||
const SCREENS = [
|
||||
["-mobile", setMobile],
|
||||
["-tablet", setTablet],
|
||||
["-desktop", setDesktop],
|
||||
["-widescreen", setWidescreen],
|
||||
["-fullhd", setFullHD],
|
||||
];
|
||||
|
||||
const WIDTHS = [
|
||||
["three-quarters", 0.75],
|
||||
@ -12,131 +26,119 @@ const WIDTHS = [
|
||||
["four-fifths", 0.8],
|
||||
];
|
||||
|
||||
// const OFFSETS = [
|
||||
// ["offset-three-quarters", 0.75],
|
||||
// ["offset-two-thirds", 0.6666],
|
||||
// ["offset-half", 0.5],
|
||||
// ["offset-one-third", 0.3333],
|
||||
// ["offset-one-quarter", 0.25],
|
||||
// ["offset-one-fifth", 0.2],
|
||||
// ["offset-two-fifths", 0.4],
|
||||
// ["offset-three-fifths", 0.6],
|
||||
// ["offset-four-fifths", 0.8],
|
||||
// ];
|
||||
describe("Grid/Columns", () => {
|
||||
beforeEach(() => {
|
||||
cy.visit("http://127.0.0.1:4000/cyp/grid/columns/");
|
||||
setDesktop();
|
||||
});
|
||||
|
||||
// describe("Grid/Columns", () => {
|
||||
// beforeEach(() => {
|
||||
// cy.visit("http://127.0.0.1:4000/cyp/grid/columns/");
|
||||
// setDesktop();
|
||||
// });
|
||||
it("has Columns", () => {
|
||||
cy.get(".columns").should("exist");
|
||||
});
|
||||
|
||||
// it("has Columns", () => {
|
||||
// cy.get(".columns").should("exist");
|
||||
// });
|
||||
it("has correct Columns", () => {
|
||||
cy.get("#columns").then(($) => {
|
||||
const cs = window.getComputedStyle($[0]);
|
||||
expect(cs.display).to.equal("flex");
|
||||
expect(cs.marginBottom).to.equal("12px");
|
||||
expect(cs.marginLeft).to.equal("-12px");
|
||||
expect(cs.marginRight).to.equal("-12px");
|
||||
expect(cs.marginTop).to.equal("-12px");
|
||||
});
|
||||
});
|
||||
|
||||
// it("has correct Columns", () => {
|
||||
// cy.get("#columns").then(($) => {
|
||||
// const cs = window.getComputedStyle($[0]);
|
||||
// expect(cs.display).to.equal("flex");
|
||||
// expect(cs.marginBottom).to.equal("12px");
|
||||
// expect(cs.marginLeft).to.equal("-12px");
|
||||
// expect(cs.marginRight).to.equal("-12px");
|
||||
// expect(cs.marginTop).to.equal("-12px");
|
||||
// });
|
||||
// });
|
||||
it("has correct last Columns", () => {
|
||||
cy.get("#columns-last").then(($) => {
|
||||
const cs = window.getComputedStyle($[0]);
|
||||
expect(cs.marginBottom).to.equal("-12px");
|
||||
});
|
||||
});
|
||||
|
||||
// it("has correct last Columns", () => {
|
||||
// cy.get("#columns-last").then(($) => {
|
||||
// const cs = window.getComputedStyle($[0]);
|
||||
// expect(cs.marginBottom).to.equal("-12px");
|
||||
// });
|
||||
// });
|
||||
it("has correct centered Columns", () => {
|
||||
cy.get("#columns-centered").then(($) => {
|
||||
const cs = window.getComputedStyle($[0]);
|
||||
expect(cs.justifyContent).to.equal("center");
|
||||
});
|
||||
});
|
||||
|
||||
// it("has correct centered Columns", () => {
|
||||
// cy.get("#columns-centered").then(($) => {
|
||||
// const cs = window.getComputedStyle($[0]);
|
||||
// expect(cs.justifyContent).to.equal("center");
|
||||
// });
|
||||
// });
|
||||
it("has correct gapless Columns", () => {
|
||||
cy.get("#columns-gapless").then(($) => {
|
||||
const cs = window.getComputedStyle($[0]);
|
||||
expect(cs.marginBottom).to.equal("24px");
|
||||
expect(cs.marginLeft).to.equal("0px");
|
||||
expect(cs.marginRight).to.equal("0px");
|
||||
expect(cs.marginTop).to.equal("0px");
|
||||
});
|
||||
|
||||
// it("has correct gapless Columns", () => {
|
||||
// cy.get("#columns-gapless").then(($) => {
|
||||
// const cs = window.getComputedStyle($[0]);
|
||||
// expect(cs.marginBottom).to.equal("24px");
|
||||
// expect(cs.marginLeft).to.equal("0px");
|
||||
// expect(cs.marginRight).to.equal("0px");
|
||||
// expect(cs.marginTop).to.equal("0px");
|
||||
// });
|
||||
cy.get("#columns-gapless .column").then(($) => {
|
||||
const cs = window.getComputedStyle($[0]);
|
||||
expect(cs.margin).to.equal("0px");
|
||||
expect(cs.padding).to.equal("0px");
|
||||
});
|
||||
});
|
||||
|
||||
// cy.get("#columns-gapless .column").then(($) => {
|
||||
// const cs = window.getComputedStyle($[0]);
|
||||
// expect(cs.margin).to.equal("0px");
|
||||
// expect(cs.padding).to.equal("0px");
|
||||
// });
|
||||
// });
|
||||
it("has correct gapless last Columns", () => {
|
||||
cy.get("#columns-gapless-last").then(($) => {
|
||||
const cs = window.getComputedStyle($[0]);
|
||||
expect(cs.marginBottom).to.equal("0px");
|
||||
});
|
||||
});
|
||||
|
||||
// it("has correct gapless last Columns", () => {
|
||||
// cy.get("#columns-gapless-last").then(($) => {
|
||||
// const cs = window.getComputedStyle($[0]);
|
||||
// expect(cs.marginBottom).to.equal("0px");
|
||||
// });
|
||||
// });
|
||||
it("has correct multiline Columns", () => {
|
||||
cy.get("#columns-multiline").then(($) => {
|
||||
const cs = window.getComputedStyle($[0]);
|
||||
expect(cs.flexWrap).to.equal("wrap");
|
||||
});
|
||||
});
|
||||
|
||||
// it("has correct multiline Columns", () => {
|
||||
// cy.get("#columns-multiline").then(($) => {
|
||||
// const cs = window.getComputedStyle($[0]);
|
||||
// expect(cs.flexWrap).to.equal("wrap");
|
||||
// });
|
||||
// });
|
||||
it("has correct vcentered Columns", () => {
|
||||
cy.get("#columns-vcentered").then(($) => {
|
||||
const cs = window.getComputedStyle($[0]);
|
||||
expect(cs.alignItems).to.equal("center");
|
||||
});
|
||||
});
|
||||
|
||||
// it("has correct vcentered Columns", () => {
|
||||
// cy.get("#columns-vcentered").then(($) => {
|
||||
// const cs = window.getComputedStyle($[0]);
|
||||
// expect(cs.alignItems).to.equal("center");
|
||||
// });
|
||||
// });
|
||||
// Responsiveness
|
||||
|
||||
// // Responsiveness
|
||||
it("has correct mobile Columns", () => {
|
||||
setMobile();
|
||||
|
||||
// it("has correct mobile Columns", () => {
|
||||
// setMobile();
|
||||
cy.get("#columns-mobile").then(($) => {
|
||||
const cs = window.getComputedStyle($[0]);
|
||||
expect(cs.display).to.equal("flex");
|
||||
});
|
||||
|
||||
// cy.get("#columns-mobile").then(($) => {
|
||||
// const cs = window.getComputedStyle($[0]);
|
||||
// expect(cs.display).to.equal("flex");
|
||||
// });
|
||||
setDesktop();
|
||||
|
||||
// setDesktop();
|
||||
cy.get("#columns-mobile").then(($) => {
|
||||
const cs = window.getComputedStyle($[0]);
|
||||
expect(cs.display).to.equal("flex");
|
||||
});
|
||||
});
|
||||
|
||||
// cy.get("#columns-mobile").then(($) => {
|
||||
// const cs = window.getComputedStyle($[0]);
|
||||
// expect(cs.display).to.equal("flex");
|
||||
// });
|
||||
// });
|
||||
it("has correct desktop Columns", () => {
|
||||
setMobile();
|
||||
|
||||
// it("has correct desktop Columns", () => {
|
||||
// setMobile();
|
||||
cy.get("#columns-desktop").then(($) => {
|
||||
const cs = window.getComputedStyle($[0]);
|
||||
expect(cs.display).to.equal("block");
|
||||
});
|
||||
|
||||
// cy.get("#columns-desktop").then(($) => {
|
||||
// const cs = window.getComputedStyle($[0]);
|
||||
// expect(cs.display).to.equal("block");
|
||||
// });
|
||||
setTablet();
|
||||
|
||||
// setTablet();
|
||||
cy.get("#columns-desktop").then(($) => {
|
||||
const cs = window.getComputedStyle($[0]);
|
||||
expect(cs.display).to.equal("block");
|
||||
});
|
||||
|
||||
// cy.get("#columns-desktop").then(($) => {
|
||||
// const cs = window.getComputedStyle($[0]);
|
||||
// expect(cs.display).to.equal("block");
|
||||
// });
|
||||
setDesktop();
|
||||
|
||||
// setDesktop();
|
||||
|
||||
// cy.get("#columns-desktop").then(($) => {
|
||||
// const cs = window.getComputedStyle($[0]);
|
||||
// expect(cs.display).to.equal("flex");
|
||||
// });
|
||||
// });
|
||||
// });
|
||||
cy.get("#columns-desktop").then(($) => {
|
||||
const cs = window.getComputedStyle($[0]);
|
||||
expect(cs.display).to.equal("flex");
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("Grid/Column", () => {
|
||||
beforeEach(() => {
|
||||
@ -160,51 +162,80 @@ describe("Grid/Column", () => {
|
||||
});
|
||||
|
||||
it("has a correct Column sizes", () => {
|
||||
cy.get(`#columns-special`).then(($) => {
|
||||
const columnsWidth = $[0].clientWidth;
|
||||
SCREENS.forEach((screen) => {
|
||||
const suffix = screen[0];
|
||||
const fn = screen[1];
|
||||
|
||||
const $full = $.find(`.column.is-full`);
|
||||
const csfull = window.getComputedStyle($full[0]);
|
||||
const actualFullWidth = csfull.width.substring(
|
||||
0,
|
||||
csfull.width.length - 2
|
||||
);
|
||||
expect(csfull.flexBasis).to.equal("auto");
|
||||
expect(csfull.flexGrow).to.equal("0");
|
||||
expect(csfull.flexShrink).to.equal("0");
|
||||
expect(`${Math.round(actualFullWidth)}px`).to.equal(
|
||||
`${Math.round(columnsWidth)}px`
|
||||
);
|
||||
fn();
|
||||
|
||||
const $narrow = $.find(`.column.is-narrow`);
|
||||
const csnarrow = window.getComputedStyle($narrow[0]);
|
||||
expect(csnarrow.flexBasis).to.equal("auto");
|
||||
expect(csnarrow.flexGrow).to.equal("0");
|
||||
expect(csnarrow.flexShrink).to.equal("0");
|
||||
cy.get(`#columns-special${suffix}`).then(($) => {
|
||||
const columnsWidth = $[0].clientWidth;
|
||||
|
||||
WIDTHS.forEach((width) => {
|
||||
const name = width[0];
|
||||
const factor = width[1];
|
||||
|
||||
const $1 = $.find(`.column.is-${name}`);
|
||||
const cs1 = window.getComputedStyle($1[0]);
|
||||
const actualWidth = cs1.width.substring(0, cs1.width.length - 2);
|
||||
expect(cs1.flexBasis).to.equal("auto");
|
||||
expect(cs1.flexGrow).to.equal("0");
|
||||
expect(cs1.flexShrink).to.equal("0");
|
||||
expect(`${Math.round(actualWidth)}px`).to.equal(
|
||||
`${Math.round(factor * columnsWidth)}px`
|
||||
);
|
||||
|
||||
const $2 = $.find(`.column.is-offset-${name}`);
|
||||
const cs = window.getComputedStyle($2[0]);
|
||||
const actualMarginLeft = cs.marginLeft.substring(
|
||||
const $full = $.find(`.column.is-full${suffix}`);
|
||||
const csfull = window.getComputedStyle($full[0]);
|
||||
const actualFullWidth = csfull.width.substring(
|
||||
0,
|
||||
cs.marginLeft.length - 2
|
||||
csfull.width.length - 2
|
||||
);
|
||||
expect(`${Math.round(actualMarginLeft)}px`).to.equal(
|
||||
`${Math.round(factor * columnsWidth)}px`
|
||||
expect(csfull.flexBasis).to.equal("auto");
|
||||
expect(csfull.flexGrow).to.equal("0");
|
||||
expect(csfull.flexShrink).to.equal("0");
|
||||
expect(`${Math.round(actualFullWidth)}px`).to.equal(
|
||||
`${Math.round(columnsWidth)}px`
|
||||
);
|
||||
|
||||
const $narrow = $.find(`.column.is-narrow${suffix}`);
|
||||
const csnarrow = window.getComputedStyle($narrow[0]);
|
||||
expect(csnarrow.flexBasis).to.equal("auto");
|
||||
expect(csnarrow.flexGrow).to.equal("0");
|
||||
expect(csnarrow.flexShrink).to.equal("0");
|
||||
|
||||
WIDTHS.forEach((width) => {
|
||||
const name = width[0];
|
||||
const factor = width[1];
|
||||
|
||||
const $1 = $.find(`.column.is-${name}${suffix}`);
|
||||
const cs1 = window.getComputedStyle($1[0]);
|
||||
const actualWidth = cs1.width.substring(0, cs1.width.length - 2);
|
||||
expect(cs1.flexBasis).to.equal("auto");
|
||||
expect(cs1.flexGrow).to.equal("0");
|
||||
expect(cs1.flexShrink).to.equal("0");
|
||||
expect(`${Math.round(actualWidth)}px`).to.equal(
|
||||
`${Math.round(factor * columnsWidth)}px`
|
||||
);
|
||||
|
||||
const $2 = $.find(`.column.is-offset-${name}${suffix}`);
|
||||
const cs2 = window.getComputedStyle($2[0]);
|
||||
const actualMarginLeft = cs2.marginLeft.substring(
|
||||
0,
|
||||
cs2.marginLeft.length - 2
|
||||
);
|
||||
expect(`${Math.round(actualMarginLeft)}px`).to.equal(
|
||||
`${Math.round(factor * columnsWidth)}px`
|
||||
);
|
||||
|
||||
for (let i = 1; i <= 12; i++) {
|
||||
const $3 = $.find(`.column.is-${i}${suffix}`);
|
||||
const cs3 = window.getComputedStyle($3[0]);
|
||||
const actualWidth = cs3.width.substring(0, cs3.width.length - 2);
|
||||
expect(cs3.flexBasis).to.equal("auto");
|
||||
expect(cs3.flexGrow).to.equal("0");
|
||||
expect(cs3.flexShrink).to.equal("0");
|
||||
expect(`${Math.round(actualWidth)}px`).to.equal(
|
||||
`${Math.round((i / 12) * columnsWidth)}px`
|
||||
);
|
||||
|
||||
const $4 = $.find(`.column.is-offset-${i}${suffix}`);
|
||||
const cs4 = window.getComputedStyle($4[0]);
|
||||
const actualMarginLeft = cs4.marginLeft.substring(
|
||||
0,
|
||||
cs4.marginLeft.length - 2
|
||||
);
|
||||
expect(`${Math.round(actualMarginLeft)}px`).to.equal(
|
||||
`${Math.round((i / 12) * columnsWidth)}px`
|
||||
);
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@ -27,14 +27,8 @@
|
||||
"url": "https://github.com/jgthms/bulma/issues"
|
||||
},
|
||||
"devDependencies": {
|
||||
<<<<<<< HEAD
|
||||
"autoprefixer": "^10.4.7",
|
||||
"clean-css-cli": "^5.6.0",
|
||||
=======
|
||||
"autoprefixer": "^10.4.5",
|
||||
"clean-css-cli": "^5.6.0",
|
||||
"cypress": "^9.6.0",
|
||||
>>>>>>> 3c413174e41e0aa0c9bf60a9a5e35dc47831d25e
|
||||
"node-sass": "^7.0.1",
|
||||
"postcss-cli": "^9.1.0",
|
||||
"rimraf": "^3.0.2"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user