Add container tests

cypress.json

@@ -60,6 +60,14 @@
     "scheme-main": "rgb(255, 255, 255)",
     "border": "rgb(219, 219, 219)",
     "text": "rgb(74, 74, 74)",
-    "text-strong": "rgb(54, 54, 54)"
+    "text-strong": "rgb(54, 54, 54)",
+
+    "viewports": {
+      "mobile": [320, 480],
+      "tablet": [769, 640],
+      "desktop": [1024, 800],
+      "widescreen": [1216, 900],
+      "fullhd": [1408, 1200]
+    }
   }
 }

cypress/integration/elements/container.spec.js

@@ -0,0 +1,169 @@
+describe("Elements/Container", () => {
+  beforeEach(() => {
+    cy.visit("http://127.0.0.1:4000/cypress/elements/container/");
+  });
+
+  it("has a Container element", () => {
+    cy.get("#container").should("exist");
+  });
+
+  it("has fullwidth mobile Containers", () => {
+    cy.viewport(
+      Cypress.env("viewports").mobile[0],
+      Cypress.env("viewports").mobile[1]
+    );
+
+    let viewport;
+
+    cy.document()
+      .then((doc) => {
+        return doc.documentElement.getBoundingClientRect();
+      })
+      .then((rect) => {
+        viewport = rect;
+      });
+
+    cy.get("#container").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.width).to.equal(`${viewport.width}px`);
+    });
+
+    cy.get("#container-fluid").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.width).to.equal(`${viewport.width}px`);
+    });
+
+    cy.get("#container-max-desktop").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.width).to.equal(`${viewport.width}px`);
+    });
+
+    cy.get("#container-max-widescreen").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.width).to.equal(`${viewport.width}px`);
+    });
+  });
+
+  it("has centered desktop Containers", () => {
+    cy.viewport(
+      Cypress.env("viewports").desktop[0],
+      Cypress.env("viewports").desktop[1]
+    );
+
+    let viewport;
+
+    cy.document()
+      .then((doc) => {
+        return doc.documentElement.getBoundingClientRect();
+      })
+      .then((rect) => {
+        viewport = rect;
+      });
+
+    cy.get("#container").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.width).to.equal("960px");
+    });
+
+    cy.get("#container-widescreen").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.width).to.equal(`${viewport.width}px`);
+    });
+
+    cy.get("#container-fullhd").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.width).to.equal(`${viewport.width}px`);
+    });
+  });
+
+  it("has centered widescreen Containers", () => {
+    cy.viewport(
+      Cypress.env("viewports").widescreen[0],
+      Cypress.env("viewports").widescreen[1]
+    );
+
+    let viewport;
+
+    cy.document()
+      .then((doc) => {
+        return doc.documentElement.getBoundingClientRect();
+      })
+      .then((rect) => {
+        viewport = rect;
+      });
+
+    cy.get("#container").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.width).to.equal("1152px");
+    });
+
+    cy.get("#container-max-desktop").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.width).to.equal("960px");
+    });
+
+    cy.get("#container-widescreen").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.width).to.equal("1152px");
+    });
+
+    cy.get("#container-fullhd").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.width).to.equal(`${viewport.width}px`);
+    });
+  });
+
+  it("has centered fullhd Containers", () => {
+    cy.viewport(
+      Cypress.env("viewports").fullhd[0],
+      Cypress.env("viewports").fullhd[1]
+    );
+
+    cy.get("#container").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.width).to.equal("1344px");
+    });
+
+    cy.get("#container-max-desktop").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.width).to.equal("960px");
+    });
+
+    cy.get("#container-max-widescreen").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.width).to.equal("1152px");
+    });
+
+    cy.get("#container-widescreen").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.width).to.equal("1344px");
+    });
+
+    cy.get("#container-fullhd").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.width).to.equal("1344px");
+    });
+  });
+
+  it("has a fullwidth fluid Container", () => {
+    cy.viewport(
+      Cypress.env("viewports").fullhd[0],
+      Cypress.env("viewports").fullhd[1]
+    );
+
+    let viewport;
+
+    cy.document()
+      .then((doc) => {
+        return doc.documentElement.getBoundingClientRect();
+      })
+      .then((rect) => {
+        viewport = rect;
+      });
+
+    cy.get("#container-fluid").then(($) => {
+      const cs = window.getComputedStyle($[0]);
+      expect(cs.width).to.equal(`${viewport.width}px`);
+    });
+  });
+});

docs/_layouts/cypress.html

@@ -10,7 +10,7 @@
     <link rel="stylesheet" href="{{ site.url }}/vendor/fontawesome-free-5.15.2-web/css/all.min.css">
     <link rel="stylesheet" href="{{ site.url }}/css/bulma.css?v={{ site.time | date: "%Y%m%d%H%M" }}">
   </head>
-  <body style="padding: 1.5rem;">
+  <body>
     {{ content }}
   </body>
 </html>

docs/bulma.scss

@@ -1,2 +1,30 @@
 @charset "utf-8";
 @import "../bulma";
+
+.yolo {
+  content: "default";
+}
+
+@include tablet {
+  .yolo {
+    content: "tablet";
+  }
+}
+
+@include desktop {
+  .yolo {
+    content: "desktop";
+  }
+}
+
+@include widescreen {
+  .yolo {
+    content: "widescreen";
+  }
+}
+
+@include fullhd {
+  .yolo {
+    content: "fullhd";
+  }
+}

docs/css/bulma.css

@@ -11788,3 +11788,31 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
   background-color: #fafafa;
   padding: 3rem 1.5rem 6rem;
 }
+
+.yolo {
+  content: "default";
+}
+
+@media screen and (min-width: 769px), print {
+  .yolo {
+    content: "tablet";
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  .yolo {
+    content: "desktop";
+  }
+}
+
+@media screen and (min-width: 1216px) {
+  .yolo {
+    content: "widescreen";
+  }
+}
+
+@media screen and (min-width: 1408px) {
+  .yolo {
+    content: "fullhd";
+  }
+}

docs/cypress/elements/container.html

@@ -0,0 +1,28 @@
+---
+layout: cypress
+title: Elements/Container
+---
+
+<div id="container" class="container">
+  I'm a container
+</div>
+
+<div id="container-max-desktop" class="container is-max-desktop">
+  I'm a max desktop container
+</div>
+
+<div id="container-max-widescreen" class="container is-max-widescreen">
+  I'm a max widescreen container
+</div>
+
+<div id="container-widescreen" class="container is-widescreen">
+  I'm a widescreen container
+</div>
+
+<div id="container-fullhd" class="container is-fullhd">
+  I'm a fullhd container
+</div>
+
+<div id="container-fluid" class="container is-fluid">
+  I'm a fluid container
+</div>