Bug 1648774 Part 2: Add a test that display:flex elements generate computed flex info. r=dholbert
authorBrad Werth <bwerth@mozilla.com>
Thu, 23 Jul 2020 20:48:04 +0000
changeset 541831 0b2ccdb92cb37a1e26ad391c8c3a99923a84c373
parent 541830 9d10a11e7846939de1ce55003cced2161dc9c09f
child 541832 47667fbae73407a94c4f8e359814b468ad96a07d
push id37633
push userccoroiu@mozilla.com
push dateFri, 24 Jul 2020 09:32:06 +0000
treeherdermozilla-central@141543043270 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdholbert
bugs1648774
milestone80.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1648774 Part 2: Add a test that display:flex elements generate computed flex info. r=dholbert Differential Revision: https://phabricator.services.mozilla.com/D84627
dom/flex/test/chrome.ini
dom/flex/test/chrome/test_flex_object.html
--- a/dom/flex/test/chrome.ini
+++ b/dom/flex/test/chrome.ini
@@ -1,6 +1,7 @@
 [chrome/test_flex_axis_directions.html]
 [chrome/test_flex_item_clamp.html]
 [chrome/test_flex_item_rect.html]
 [chrome/test_flex_items.html]
 [chrome/test_flex_lines.html]
+[chrome/test_flex_object.html]
 [chrome/test_flex_parent.html]
new file mode 100644
--- /dev/null
+++ b/dom/flex/test/chrome/test_flex_object.html
@@ -0,0 +1,132 @@
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
+<link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css" />
+<style>
+body {
+  margin: 40px;
+}
+.flexWrapper {
+  display: flex;
+  width: 400px;
+}
+.nonFlexWrapper {
+  display: block;
+  width: 400px;
+}
+.oh {
+  overflow: hidden;
+}
+.box {
+  background-color: #444;
+  color: #fff;
+}
+</style>
+
+<script>
+"use strict";
+
+SimpleTest.waitForExplicitFinish();
+
+function runTests() {
+  // Test 1: elements styled with display:flex
+  let idsWithFlex = [
+    "flexDiv",
+    "flexDivOh",
+
+    "flexFieldset",
+    "flexFieldsetEmpty",
+    "flexFieldsetOh",
+
+    "flexButton",
+    "flexButtonOh",
+  ];
+
+  for (let id of idsWithFlex) {
+    let wrapper = document.getElementById(id);
+
+    // Test that we got a flex info object from the element.
+    let flex = wrapper.getAsFlexContainer();
+    ok(flex, `Expected that element id ${id} would have flex info.`);
+  }
+
+  // Test 2: elements styled without display:flex
+  let idsWithoutFlex = [
+    "boxA",
+
+    "nonFlexFieldset",
+    "nonFlexFieldsetOh",
+
+    "nonFlexButton",
+    "nonFlexButtonOh",
+  ];
+
+  for (let id of idsWithoutFlex) {
+    let wrapper = document.getElementById(id);
+
+    // Test that we didn't get a flex info object from the element.
+    let flex = wrapper.getAsFlexContainer();
+    ok(!flex, `Expected that element id ${id} would not have flex info.`);
+  }
+
+  SimpleTest.finish();
+}
+</script>
+</head>
+<body onLoad="runTests();">
+
+  <div id="flexDiv" class="flexWrapper">
+    <div id="boxA" class="box">A</div>
+  </div>
+
+  <div id="flexDivOh" class="flexWrapper oh">
+    <div id="boxAOh" class="box">A</div>
+  </div>
+
+  <fieldset id="flexFieldset" class="flexWrapper">
+    <legend>a fieldset</legend>
+    <label for="name">name</label>
+    <input id="name">
+  </fieldset>
+
+  <fieldset id="flexFieldsetEmpty" class="flexWrapper">
+  </fieldset>
+
+  <fieldset id="flexFieldsetOh" class="flexWrapper oh">
+    <legend>a fieldset</legend>
+    <label for="nameOh">name</label>
+    <input id="nameOh">
+  </fieldset>
+
+  <button id="flexButton" class="flexWrapper">
+    <span>test</span>
+  </button>
+
+  <button id="flexButtonOh" class="flexWrapper oh">
+    <span>test</span>
+  </button>
+
+  <fieldset id="nonFlexFieldset" class="nonFlexWrapper">
+    <legend>a fieldset</legend>
+    <label for="name">name</label>
+    <input id="name">
+  </fieldset>
+
+  <fieldset id="nonFlexFieldsetOh" class="nonFlexWrapper oh">
+    <legend>a fieldset</legend>
+    <label for="name">name</label>
+    <input id="name">
+  </fieldset>
+
+  <button id="nonFlexButton" class="nonFlexWrapper">
+    <span>test</span>
+  </button>
+
+  <button id="nonFlexButtonOh" class="nonFlexWrapper oh">
+    <span>test</span>
+  </button>
+
+</body>
+</html>