Add column sizes specs

docs/cyp/grid/columns.html

@@ -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 %}

docs/cypress/integration/grid/columns.spec.js

@@ -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();
-//   });
-
-//   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 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 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");
-//     });
-//   });
-
-//   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 vcentered Columns", () => {
-//     cy.get("#columns-vcentered").then(($) => {
-//       const cs = window.getComputedStyle($[0]);
-//       expect(cs.alignItems).to.equal("center");
-//     });
-//   });
-
-//   // Responsiveness
-
-//   it("has correct mobile Columns", () => {
-//     setMobile();
-
-//     cy.get("#columns-mobile").then(($) => {
-//       const cs = window.getComputedStyle($[0]);
-//       expect(cs.display).to.equal("flex");
-//     });
-
-//     setDesktop();
-
-//     cy.get("#columns-mobile").then(($) => {
-//       const cs = window.getComputedStyle($[0]);
-//       expect(cs.display).to.equal("flex");
-//     });
-//   });
-
-//   it("has correct desktop Columns", () => {
-//     setMobile();
-
-//     cy.get("#columns-desktop").then(($) => {
-//       const cs = window.getComputedStyle($[0]);
-//       expect(cs.display).to.equal("block");
-//     });
-
-//     setTablet();
-
-//     cy.get("#columns-desktop").then(($) => {
-//       const cs = window.getComputedStyle($[0]);
-//       expect(cs.display).to.equal("block");
-//     });
-
-//     setDesktop();
-
-//     cy.get("#columns-desktop").then(($) => {
-//       const cs = window.getComputedStyle($[0]);
-//       expect(cs.display).to.equal("flex");
-//     });
-//   });
-// });
+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 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 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");
+    });
+
+    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 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");
+    });
+  });
+
+  // Responsiveness
+
+  it("has correct mobile Columns", () => {
+    setMobile();
+
+    cy.get("#columns-mobile").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.display).to.equal("flex");
+    });
+
+    setDesktop();
+
+    cy.get("#columns-mobile").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.display).to.equal("flex");
+    });
+  });
+
+  it("has correct desktop Columns", () => {
+    setMobile();
+
+    cy.get("#columns-desktop").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.display).to.equal("block");
+    });
+
+    setTablet();
+
+    cy.get("#columns-desktop").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.display).to.equal("block");
+    });
+
+    setDesktop();
+
+    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;
-
-      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`
-      );
-
-      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");
-
-      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`
-        );
+    SCREENS.forEach((screen) => {
+      const suffix = screen[0];
+      const fn = screen[1];
+
+      fn();
 
-        const $2 = $.find(`.column.is-offset-${name}`);
-        const cs = window.getComputedStyle($2[0]);
-        const actualMarginLeft = cs.marginLeft.substring(
+      cy.get(`#columns-special${suffix}`).then(($) => {
+        const columnsWidth = $[0].clientWidth;
+
+        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`
+            );
+          }
+        });
       });
     });
   });

package.json

@@ -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"