]> git.ipfire.org Git - thirdparty/foundation/foundation-sites.git/commitdiff
projects / thirdparty / foundation / foundation-sites.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: d5b8a24)
Add a full suite of visual tests
authorBrett Mason <brettsmason@gmail.com>
Tue, 30 May 2017 18:49:57 +0000 (19:49 +0100)
committerBrett Mason <brettsmason@gmail.com>
Tue, 30 May 2017 18:49:57 +0000 (19:49 +0100)
test/visual/zf-grid/collapse.html [new file with mode: 0644] patch | blob
test/visual/zf-grid/kitchen-sink.html [deleted file] patch | blob | blame | history
test/visual/zf-grid/margin-grid.html patch | blob | blame | history
test/visual/zf-grid/offset.html [new file with mode: 0644] patch | blob
test/visual/zf-grid/padding-grid.html patch | blob | blame | history
test/visual/zf-grid/vertical-grid.html patch | blob | blame | history

diff --git a/test/visual/zf-grid/collapse.html b/test/visual/zf-grid/collapse.html
new file mode 100644 (file)
index 0000000..a0985d0
--- /dev/null
+++ b/test/visual/zf-grid/collapse.html
@@ -0,0 +1,77 @@
+<!doctype html>
+<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
+<html class="no-js" lang="en" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>Collapse classes</title>
+    <link href="../assets/css/foundation.css" rel="stylesheet" />
+    <style>
+      body {
+        padding: 30px;
+      }
+
+      .demo {
+        background: #1779ba;
+      }
+
+      .cell {
+        /*background: dodgerblue;*/
+        line-height: 50px;
+        height: 50px;
+        color: white;
+        text-align: center;
+        margin-bottom: 30px;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>Grid Collapse</h1>
+
+    <h2>Margin Grid Collapse</h2>
+    <p>Gutters should collapse on large.</p>
+
+    <div class="grid margin-gutters large-margin-collapse">
+      <div class="cell medium-12"><div class="demo">12</div></div>
+      <div class="cell medium-11"><div class="demo">11</div></div>
+      <div class="cell medium-1"><div class="demo">1</div></div>
+      <div class="cell medium-10"><div class="demo">10</div></div>
+      <div class="cell medium-2"><div class="demo">2</div></div>
+      <div class="cell medium-9"><div class="demo">9</div></div>
+      <div class="cell medium-3"><div class="demo">3</div></div>
+      <div class="cell medium-8"><div class="demo">8</div></div>
+      <div class="cell medium-4"><div class="demo">4</div></div>
+      <div class="cell medium-7"><div class="demo">7</div></div>
+      <div class="cell medium-5"><div class="demo">5</div></div>
+      <div class="cell medium-6"><div class="demo">6</div></div>
+      <div class="cell medium-4"><div class="demo">4</div></div>
+    </div>
+
+    <hr>
+
+    <h2>Padding Grid Collapse</h2>
+    <p>Gutters should collapse on medium.</p>
+
+    <div class="grid padding-gutters medium-padding-collapse">
+      <div class="cell medium-12"><div class="demo">12</div></div>
+      <div class="cell medium-11"><div class="demo">11</div></div>
+      <div class="cell medium-1"><div class="demo">1</div></div>
+      <div class="cell medium-10"><div class="demo">10</div></div>
+      <div class="cell medium-2"><div class="demo">2</div></div>
+      <div class="cell medium-9"><div class="demo">9</div></div>
+      <div class="cell medium-3"><div class="demo">3</div></div>
+      <div class="cell medium-8"><div class="demo">8</div></div>
+      <div class="cell medium-4"><div class="demo">4</div></div>
+      <div class="cell medium-7"><div class="demo">7</div></div>
+      <div class="cell medium-5"><div class="demo">5</div></div>
+      <div class="cell medium-6"><div class="demo">6</div></div>
+      <div class="cell medium-4"><div class="demo">4</div></div>
+    </div>
+
+    <script src="../assets/js/vendor.js"></script>
+    <script src="../assets/js/foundation.js"></script>
+    <script>
+      $(document).foundation();
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/test/visual/zf-grid/kitchen-sink.html b/test/visual/zf-grid/kitchen-sink.html
deleted file mode 100644 (file)
index 5051412..0000000
--- a/test/visual/zf-grid/kitchen-sink.html
+++ /dev/null
@@ -1,149 +0,0 @@
-<!doctype html>
-<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
-<html class="no-js" lang="en" dir="ltr">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <title>Foundation for Sites Testing</title>
-    <link href="../motion-ui/dist/motion-ui.css" rel="stylesheet" />
-    <link href="../assets/css/foundation.css" rel="stylesheet" />
-    <style>
-      body {
-        padding: 30px;
-      }
-
-      .demo {
-        background: tomato;
-      }
-
-      .cell {
-        background: dodgerblue;
-        margin-bottom: 30px;
-        height: 50px;
-        line-height: 50px;
-        color: white;
-        text-align: center;
-      }
-
-      .dodgerblue {
-        background: dodgerblue;
-        padding: 10px;
-        color: white;
-        width: 50%;
-        float: left;
-      }
-
-      .tomato {
-        background: tomato;
-        padding: 10px;
-        color: white;
-        width: 50%;
-        float: left;
-      }
-    </style>
-  </head>
-  <body>
-
-    <h1>Demo showing the padding/margin gutter options</h1>
-
-    <h2>Key:</h2>
-    <div class="dodgerblue">This shows the padding of the cells</div>
-    <div class="tomato">This shows the cell</div>
-
-    <hr>
-
-    <button class="button toggle-margin-gutters">Toggle margin gutters</button>
-    <button class="button toggle-padding-gutters">Toggle padding gutters</button>
-
-    <div class="grid toggle-classes">
-      <div class="cell medium-12"><div class="demo">12</div></div>
-      <div class="cell medium-11"><div class="demo">11</div></div>
-      <div class="cell medium-1"><div class="demo">1</div></div>
-      <div class="cell medium-10"><div class="demo">10</div></div>
-      <div class="cell medium-2"><div class="demo">2</div></div>
-      <div class="cell medium-9"><div class="demo">9</div></div>
-      <div class="cell medium-3"><div class="demo">3</div></div>
-      <div class="cell medium-8"><div class="demo">8</div></div>
-      <div class="cell medium-4"><div class="demo">4</div></div>
-      <div class="cell medium-7"><div class="demo">7</div></div>
-      <div class="cell medium-5"><div class="demo">5</div></div>
-      <div class="cell medium-6"><div class="demo">6</div></div>
-      <div class="cell medium-4"><div class="demo">4</div></div>
-    </div>
-
-    <h2>Margin gutters nested example</h2>
-    <div class="grid margin-gutters">
-      <div class="cell medium-6">
-        <div class="grid margin-gutters">
-           <div class="cell medium-6"><div class="demo">6 nested</div></div>
-           <div class="cell medium-6"><div class="demo">6 nested</div></div>
-        </div>
-      </div>
-      <div class="cell medium-6"><div class="demo">6</div></div>
-    </div>
-
-    <h2>Padding gutters nested example</h2>
-    <div class="grid padding-gutters">
-      <div class="cell medium-6">
-        <div class="grid padding-gutters">
-           <div class="cell medium-6"><div class="demo">6 nested</div></div>
-           <div class="cell medium-6"><div class="demo">6 nested</div></div>
-        </div>
-      </div>
-      <div class="cell medium-6"><div class="demo">6</div></div>
-    </div>
-
-    <h2>Mixed gutters nested example</h2>
-    <div class="grid padding-gutters">
-      <div class="cell medium-6">
-        <div class="grid margin-gutters">
-           <div class="cell medium-6"><div class="demo">6 nested</div></div>
-           <div class="cell medium-6"><div class="demo">6 nested</div></div>
-        </div>
-      </div>
-      <div class="cell medium-6"><div class="demo">6</div></div>
-    </div>
-
-    <h2>Mixed gutters nested example</h2>
-    <div class="grid margin-gutters">
-      <div class="cell medium-6">
-        <div class="grid padding-gutters">
-           <div class="cell medium-6"><div class="demo">6 nested</div></div>
-           <div class="cell medium-6"><div class="demo">6 nested</div></div>
-        </div>
-      </div>
-      <div class="cell medium-6"><div class="demo">6</div></div>
-    </div>
-
-    <h2>Vertical grid</h2>
-    <div class="grid grid-vertical toggle-classes" style="height: 500px;">
-      <div class="cell medium-vertical-12"><div class="demo">12</div></div>
-      <div class="cell medium-vertical-11"><div class="demo">11</div></div>
-      <div class="cell medium-vertical-1"><div class="demo">1</div></div>
-      <div class="cell medium-vertical-10"><div class="demo">10</div></div>
-      <div class="cell medium--vertical-2"><div class="demo">2</div></div>
-      <div class="cell medium-vertical-9"><div class="demo">9</div></div>
-      <div class="cell medium-vertical-3"><div class="demo">3</div></div>
-      <div class="cell medium-vertical-8"><div class="demo">8</div></div>
-      <div class="cell medium-vertical-4"><div class="demo">4</div></div>
-      <div class="cell medium-vertical-7"><div class="demo">7</div></div>
-      <div class="cell medium-vertical-5"><div class="demo">5</div></div>
-      <div class="cell medium-vertical-6"><div class="demo">6</div></div>
-      <div class="cell medium-vertical-4"><div class="demo">4</div></div>
-    </div>
-
-    <script src="../assets/js/vendor.js"></script>
-    <script src="../assets/js/foundation.js"></script>
-    <script>
-      $(document).foundation();
-
-      $('.toggle-margin-gutters').click(function() {
-        $('.toggle-classes').toggleClass('margin-gutters');
-      });
-
-      $('.toggle-padding-gutters').click(function() {
-        $('.toggle-classes').toggleClass('padding-gutters');
-      });
-    </script>
-  </body>
-</html>
diff --git a/test/visual/zf-grid/margin-grid.html b/test/visual/zf-grid/margin-grid.html
index c4ab8975c249bf3d2bc26f3a7a664cf022116d06..f5ab444e4988d51c56db3bb0997410e5d32181df 100644 (file)
--- a/test/visual/zf-grid/margin-grid.html
+++ b/test/visual/zf-grid/margin-grid.html
@@ -90,13 +90,6 @@
       <div class="cell medium-4"><div class="demo">4</div></div>
     </div>
 
-    <h2>Push/Pull</h2>
-
-    <div class="grid margin-gutters">
-      <div class="cell medium-3 medium-push-2"><div class="demo">3</div></div>
-      <div class="cell medium-4 medium-pull-1"><div class="demo">4</div></div>
-    </div>
-
     <script src="../assets/js/vendor.js"></script>
     <script src="../assets/js/foundation.js"></script>
     <script>
diff --git a/test/visual/zf-grid/offset.html b/test/visual/zf-grid/offset.html
new file mode 100644 (file)
index 0000000..26124db
--- /dev/null
+++ b/test/visual/zf-grid/offset.html
@@ -0,0 +1,109 @@
+<!doctype html>
+<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
+<html class="no-js" lang="en" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>Offset classes</title>
+    <link href="../assets/css/foundation.css" rel="stylesheet" />
+    <style>
+      body {
+        padding: 30px;
+      }
+
+      .demo {
+        background: #1779ba;
+      }
+
+      .cell {
+        /*background: dodgerblue;*/
+        line-height: 50px;
+        height: 50px;
+        color: white;
+        text-align: center;
+        margin-bottom: 30px;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>Grid Offset</h1>
+
+    <h2>Margin Grid Offset</h2>
+
+    <div class="grid margin-gutters">
+      <div class="cell small-1 small-offset-1"><div class="demo">1</div></div>
+    </div>
+    <div class="grid margin-gutters">
+      <div class="cell small-1 small-offset-2"><div class="demo">2</div></div>
+    </div>
+    <div class="grid margin-gutters">
+      <div class="cell small-1 small-offset-3"><div class="demo">3</div></div>
+    </div>
+    <div class="grid margin-gutters">
+      <div class="cell small-1 small-offset-4"><div class="demo">4</div></div>
+    </div>
+    <div class="grid margin-gutters">
+      <div class="cell small-1 small-offset-5"><div class="demo">5</div></div>
+    </div>
+    <div class="grid margin-gutters">
+      <div class="cell small-1 small-offset-6"><div class="demo">6</div></div>
+    </div>
+    <div class="grid margin-gutters">
+      <div class="cell small-1 small-offset-7"><div class="demo">7</div></div>
+    </div>
+    <div class="grid margin-gutters">
+      <div class="cell small-1 small-offset-8"><div class="demo">8</div></div>
+    </div>
+    <div class="grid margin-gutters">
+      <div class="cell small-1 small-offset-9"><div class="demo">95</div></div>
+    </div>
+    <div class="grid margin-gutters">
+      <div class="cell small-1 small-offset-10"><div class="demo">10</div></div>
+    </div>
+    <div class="grid margin-gutters">
+      <div class="cell small-1 small-offset-11"><div class="demo">11</div></div>
+    </div>
+
+    <h2>Padding Grid Offset</h2>
+
+    <div class="grid padding-gutters">
+      <div class="cell small-1 small-offset-1"><div class="demo">1</div></div>
+    </div>
+    <div class="grid padding-gutters">
+      <div class="cell small-1 small-offset-2"><div class="demo">2</div></div>
+    </div>
+    <div class="grid padding-gutters">
+      <div class="cell small-1 small-offset-3"><div class="demo">3</div></div>
+    </div>
+    <div class="grid padding-gutters">
+      <div class="cell small-1 small-offset-4"><div class="demo">4</div></div>
+    </div>
+    <div class="grid padding-gutters">
+      <div class="cell small-1 small-offset-5"><div class="demo">5</div></div>
+    </div>
+    <div class="grid padding-gutters">
+      <div class="cell small-1 small-offset-6"><div class="demo">6</div></div>
+    </div>
+    <div class="grid padding-gutters">
+      <div class="cell small-1 small-offset-7"><div class="demo">7</div></div>
+    </div>
+    <div class="grid padding-gutters">
+      <div class="cell small-1 small-offset-8"><div class="demo">8</div></div>
+    </div>
+    <div class="grid padding-gutters">
+      <div class="cell small-1 small-offset-9"><div class="demo">95</div></div>
+    </div>
+    <div class="grid padding-gutters">
+      <div class="cell small-1 small-offset-10"><div class="demo">10</div></div>
+    </div>
+    <div class="grid padding-gutters">
+      <div class="cell small-1 small-offset-11"><div class="demo">11</div></div>
+    </div>
+
+    <script src="../assets/js/vendor.js"></script>
+    <script src="../assets/js/foundation.js"></script>
+    <script>
+      $(document).foundation();
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/test/visual/zf-grid/padding-grid.html b/test/visual/zf-grid/padding-grid.html
index 84c8ac4907f1d4da39860fe6c497250e05bcce12..0dce82c4826acabdbdc619115529489a608f1d34 100644 (file)
--- a/test/visual/zf-grid/padding-grid.html
+++ b/test/visual/zf-grid/padding-grid.html
@@ -90,13 +90,6 @@
       <div class="cell medium-4"><div class="demo">4</div></div>
     </div>
 
-    <h2>Push/Pull</h2>
-
-    <div class="grid padding-gutters">
-      <div class="cell medium-3 medium-push-2"><div class="demo">3</div></div>
-      <div class="cell medium-4 medium-pull-1"><div class="demo">4</div></div>
-    </div>
-
     <script src="../assets/js/vendor.js"></script>
     <script src="../assets/js/foundation.js"></script>
     <script>
diff --git a/test/visual/zf-grid/vertical-grid.html b/test/visual/zf-grid/vertical-grid.html
index 4158d124e7bf7c4612c5d6d402809f0282d16c8e..f52da6d8f69de7ce746a428c273aaf037e6001f8 100644 (file)
--- a/test/visual/zf-grid/vertical-grid.html
+++ b/test/visual/zf-grid/vertical-grid.html
@@ -4,7 +4,7 @@
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <title>zf vertical grid</title>
+    <title>Vertical Grid</title>
     <link href="../assets/css/foundation.css" rel="stylesheet" />
     <style>
       body {
@@ -15,58 +15,32 @@
         background: #1779ba;
         height: 100%;
       }
-      .grid-vertical {
-        height: 300px;
-      }
 
       .cell {
         /*background: dodgerblue;*/
+        line-height: 50px;
+        height: 50px;
         color: white;
         text-align: center;
+        margin-bottom: 30px;
       }
     </style>
   </head>
   <body>
     <h1>Vertical Grid</h1>
 
-    <h2>Sizing Classes</h2>
-
-    <div class="grid-vertical grid-frame margin-gutters">
-      <div class="cell medium-vertical-5"><div class="demo">5</div></div>
-      <div class="cell medium-vertical-4"><div class="demo">4</div></div>
-      <div class="cell medium-vertical-3"><div class="demo">3</div></div>
-    </div>
-
-    <h2>Auto and Shrink</h2>
-
-    <div class="grid-vertical grid-frame margin-gutters">
-      <div class="cell medium-vertical-shrink"><div class="demo">Shrink on medium</div></div>
-      <div class="cell medium-vertical-auto"><div class="demo">Auto on medium</div></div>
+    <div class="grid-vertical margin-gutters" style="height: 800px;">
+      <div class="cell small-vertical-auto medium-vertical-3 large-vertical-1"><div class="demo">auto/3/1</div></div>
+      <div class="cell small-vertical-auto medium-vertical-3 large-vertical-2"><div class="demo">auto/3/2</div></div>
+      <div class="cell small-vertical-auto medium-vertical-3 large-vertical-4"><div class="demo">auto/3/4</div></div>
+      <div class="cell small-vertical-auto medium-vertical-3 large-vertical-5"><div class="demo">auto/3/5</div></div>
     </div>
 
-    <h2>Collapse</h2>
-
-    <div class="grid-vertical margin-gutters large-collapse">
-      <div class="cell medium-vertical-12"><div class="demo">12</div></div>
-      <div class="cell medium-vertical-11"><div class="demo">11</div></div>
-      <div class="cell medium-vertical-1"><div class="demo">1</div></div>
-      <div class="cell medium-vertical-10"><div class="demo">10</div></div>
-      <div class="cell medium-vertical-2"><div class="demo">2</div></div>
-      <div class="cell medium-vertical-9"><div class="demo">9</div></div>
-      <div class="cell medium-vertical-3"><div class="demo">3</div></div>
-      <div class="cell medium-vertical-8"><div class="demo">8</div></div>
-      <div class="cell medium-vertical-4"><div class="demo">4</div></div>
-      <div class="cell medium-vertical-7"><div class="demo">7</div></div>
-      <div class="cell medium-vertical-5"><div class="demo">5</div></div>
-      <div class="cell medium-vertical-6"><div class="demo">6</div></div>
-      <div class="cell medium-vertical-4"><div class="demo">4</div></div>
-    </div>
-
-    <h2>Offset</h2>
-
-    <div class="grid-vertical grid-frame margin-gutters">
-      <div class="cell medium-vertical-3 medium-offset-2"><div class="demo">3</div></div>
-      <div class="cell medium-vertical-4"><div class="demo">4</div></div>
+    <div class="grid-vertical grid-frame padding-gutters" style="height: 800px;">
+      <div class="cell small-vertical-auto medium-vertical-3 large-vertical-1"><div class="demo">auto/3/1</div></div>
+      <div class="cell small-vertical-auto medium-vertical-3 large-vertical-2"><div class="demo">auto/3/2</div></div>
+      <div class="cell small-vertical-auto medium-vertical-3 large-vertical-4"><div class="demo">auto/3/4</div></div>
+      <div class="cell small-vertical-auto medium-vertical-3 large-vertical-5"><div class="demo">auto/3/5</div></div>
     </div>
 
     <script src="../assets/js/vendor.js"></script>
@@ -75,4 +49,4 @@
       $(document).foundation();
     </script>
   </body>
-</html>
+</html>
\ No newline at end of file
Mirror of https://github.com/foundation/foundation-sites.git