Bug 1468416 Part 2: Update a grid API test to check fieldsets and buttons. r=mats
authorBrad Werth <bwerth@mozilla.com>
Fri, 15 Jun 2018 09:27:26 -0700
changeset 809860 f63604ec72d12f32ba0691c3f05ba40bdf533b82
parent 809859 ad40d4b300a6d0b152d7ca7db2eae4bda2b352c0
child 809861 a538fcc4c12492ccd7ab9f20dcf217d65647bc5f
push id113833
push userbmo:ato@sny.no
push dateSat, 23 Jun 2018 12:17:51 +0000
reviewersmats
bugs1468416
milestone62.0a1
Bug 1468416 Part 2: Update a grid API test to check fieldsets and buttons. r=mats MozReview-Commit-ID: C12piKGougo
dom/grid/test/chrome/test_grid_object.html
--- a/dom/grid/test/chrome/test_grid_object.html
+++ b/dom/grid/test/chrome/test_grid_object.html
@@ -8,62 +8,107 @@
 body {
   margin: 40px;
 }
 .wrapper {
   display: grid;
   width: 400px;
   grid-gap: 10px;
   grid-template-columns: 100px 1fr 1fr 100px;
-  background-color: #f00;
+}
+.oh {
+  overflow: hidden;
 }
 .box {
   background-color: #444;
   color: #fff;
 }
 </style>
 
 <script>
 'use strict';
 
 SimpleTest.waitForExplicitFinish();
 
 function runTests() {
-  var wrapper = document.getElementById("wrapper");
-  var boxA = document.getElementById("boxA");
+  // Test 1: elements styled with display:grid
+  let idsWithGrid = [
+    "gridDiv",
+    "gridFieldset",
+    "gridButton",
+    "gridDivOh",
+    "gridFieldsetOh",
+    "gridButtonOh",
+  ];
 
-  // test function existence
-  is(typeof(wrapper.getGridFragments), "function",
-    "getGridFragments function exists."
-  );
+  for (let id of idsWithGrid) {
+    let wrapper = document.getElementById(id);
+
+    // test function existence
+    is(typeof(wrapper.getGridFragments), "function",
+      id + ": getGridFragments function exists."
+    );
 
-  // test that display:grid elements have grids and display:block elements don't
-  is(boxA.getGridFragments().length, 0, "No grid on display:block styled objects.");
-  is(wrapper.getGridFragments().length, 1,
-    "One grid on an un-fragmented display:grid styled object."
-  );
+    // test that wrapper has one grid
+    let gridFragments = wrapper.getGridFragments();
+    is(gridFragments.length, 1,
+      id + ": one grid on an un-fragmented display:grid styled element."
+    );
+
+    // test that the grid has cols and rows properties
+    if (gridFragments.length > 0) {
+      let grid = gridFragments[0];
+      isnot(typeof(grid.cols), "undefined", id + ": Grid.cols property exists.");
+      isnot(typeof(grid.rows), "undefined", id + ": Grid.rows property exists.");
+    }
+  }
 
-  if (wrapper.getGridFragments().length == 1) {
-    var grid = wrapper.getGridFragments()[0];
+  // Test 2: elements styled without display:grid
+  let idsWithoutGrid = [
+    "boxA"
+  ];
 
-    isnot(typeof(grid.cols), "undefined", "Grid.cols property exists.");
-    isnot(typeof(grid.rows), "undefined", "Grid.rows property exists.");
+  for (let id of idsWithoutGrid) {
+    let wrapper = document.getElementById(id);
+
+    // test that wrapper has no grid
+    let gridFragments = wrapper.getGridFragments();
+    is(gridFragments.length, 0,
+      id + ": no grid on element."
+    );
   }
 
   SimpleTest.finish();
 }
 </script>
 </head>
 <body onLoad="runTests();">
 
-  <div id="wrapper" class="wrapper">
-    <div id="boxA" class="box a">A</div>
-    <div class="box b">B</div>
-    <div class="box c">C</div>
-    <div class="box d">D</div>
-    <div class="box e">E</div>
-    <div class="box f">F</div>
-    <div class="box g">G</div>
-    <div class="box h">H</div>
+  <div id="gridDiv" class="wrapper">
+    <div id="boxA" class="box">A</div>
   </div>
 
+  <fieldset id="gridFieldset" class="wrapper">
+  <legend>a fieldset</legend>
+  <label for="name">name</label>
+  <input id="name">
+  </fieldset>
+
+  <button id="gridButton" class="wrapper">
+  <span style="grid-row:2">test</span>
+  </button>
+
+  <div id="gridDivOh" class="wrapper oh">
+    <div id="boxAOh" class="box">A</div>
+  </div>
+
+  <fieldset id="gridFieldsetOh" class="wrapper oh">
+  <legend>a fieldset</legend>
+  <label for="nameOh">name</label>
+  <input id="nameOh">
+  </fieldset>
+
+  <button id="gridButtonOh" class="wrapper oh">
+  <span style="grid-row:2">test</span>
+  </button>
+
 </body>
 </html>