Add container tests

diff --git a/cypress.json b/cypress.json
index 25998d1a69dc4ee87a562df67adaf7c3ad368708..1fa27aadf668989e32ef1404ddc2b77c563988a6 100644 (file)
--- a/cypress.json
+++ b/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]
+    }
   }
 }

diff --git a/cypress/integration/elements/container.spec.js b/cypress/integration/elements/container.spec.js
new file mode 100644 (file)
index 0000000..1cc5059
--- /dev/null
+++ b/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`);
+    });
+  });
+});

diff --git a/docs/_layouts/cypress.html b/docs/_layouts/cypress.html
index 0b16c9835d19a813d50162175d16253422f12acb..9906ea9270b3ce30439c95753f8fcc0a2c31ae43 100644 (file)
--- a/docs/_layouts/cypress.html
+++ b/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>

diff --git a/docs/bulma.scss b/docs/bulma.scss
index 1292aa4cc6493959397a9307e54f0660f541baf8..c04c1dbfb951a00db9a999fc32b558fede308902 100644 (file)
--- a/docs/bulma.scss
+++ b/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";
+  }
+}

diff --git a/docs/css/bulma.css b/docs/css/bulma.css
index 746d31d14b0c17c092288f192269531c1eac403e..6a48de2203e11183defea11824a8b5006d3b874f 100644 (file)
--- a/docs/css/bulma.css
+++ b/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";
+  }
+}

diff --git a/docs/cypress/elements/container.html b/docs/cypress/elements/container.html
new file mode 100644 (file)
index 0000000..15b40c4
--- /dev/null
+++ b/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>