summaryrefslogtreecommitdiffstats
path: root/layout/style/test/test_flexbox_layout.html
diff options
context:
space:
mode:
authorMatt A. Tobin <mattatobin@localhost.localdomain>2018-02-02 04:16:08 -0500
committerMatt A. Tobin <mattatobin@localhost.localdomain>2018-02-02 04:16:08 -0500
commit5f8de423f190bbb79a62f804151bc24824fa32d8 (patch)
tree10027f336435511475e392454359edea8e25895d /layout/style/test/test_flexbox_layout.html
parent49ee0794b5d912db1f95dce6eb52d781dc210db5 (diff)
downloadUXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.gz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.lz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.xz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.zip
Add m-esr52 at 52.6.0
Diffstat (limited to 'layout/style/test/test_flexbox_layout.html')
-rw-r--r--layout/style/test/test_flexbox_layout.html184
1 files changed, 184 insertions, 0 deletions
diff --git a/layout/style/test/test_flexbox_layout.html b/layout/style/test/test_flexbox_layout.html
new file mode 100644
index 000000000..c484030be
--- /dev/null
+++ b/layout/style/test/test_flexbox_layout.html
@@ -0,0 +1,184 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=666041
+-->
+<head>
+ <meta charset="utf-8">
+ <title>Test for Bug 666041</title>
+ <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
+ <script type="text/javascript" src="flexbox_layout_testcases.js"></script>
+ <script type="text/javascript" src="property_database.js"></script>
+ <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+</head>
+<body>
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=666041">Mozilla Bug 666041</a>
+<div id="display">
+ <div id="content">
+ </div>
+</div>
+<pre id="test">
+<script type="application/javascript;version=1.7">
+"use strict";
+
+/** Test for Bug 666041 **/
+
+/* Flexbox Layout Tests
+ * --------------------
+ * This mochitest exercises our implementation of the flexbox layout algorithm
+ * by creating a flex container, inserting some flexible children, and then
+ * verifying that the computed width of those children is what we expect.
+ *
+ * See flexbox_layout_testcases.js for the actual testcases & testcase format.
+ */
+
+function getComputedStyleWrapper(elem, prop)
+{
+ return window.getComputedStyle(elem, null).getPropertyValue(prop);
+}
+
+function setPossiblyAliasedProperty(aElem, aPropertyName, aPropertyValue,
+ aPropertyMapping)
+{
+ let actualPropertyName = (aPropertyName in aPropertyMapping ?
+ aPropertyMapping[aPropertyName] : aPropertyName);
+
+ if (!gCSSProperties[actualPropertyName]) {
+ ok(false, "Bug in test: property '" + actualPropertyName +
+ "' doesn't exist in gCSSProperties");
+ } else {
+ let domPropertyName = gCSSProperties[actualPropertyName].domProp;
+ aElem.style[domPropertyName] = aPropertyValue;
+ }
+}
+
+// Helper function to strip "px" off the end of a string
+// (so that we can compare two lengths using "isfuzzy()" with an epsilon)
+function stripPx(aLengthInPx)
+{
+ let pxOffset = aLengthInPx.length - 2; // subtract off length of "px"
+
+ // Sanity-check the arg:
+ ok(pxOffset > 0 && aLengthInPx.substr(pxOffset) == "px",
+ "expecting value with 'px' units");
+
+ return aLengthInPx.substr(0, pxOffset);
+}
+
+// The main test function.
+// aFlexboxTestcase is an entry from the list in flexbox_layout_testcases.js
+function testFlexboxTestcase(aFlexboxTestcase, aFlexDirection, aPropertyMapping)
+{
+ let content = document.getElementById("content");
+
+ // Create flex container
+ let flexContainer = document.createElement("div");
+ flexContainer.style.display = "flex";
+ flexContainer.style.flexDirection = aFlexDirection;
+ setPossiblyAliasedProperty(flexContainer, "_main-size",
+ gDefaultFlexContainerSize,
+ aPropertyMapping);
+
+ // Apply testcase's customizations for flex container (if any).
+ if (aFlexboxTestcase.container_properties) {
+ for (let propName in aFlexboxTestcase.container_properties) {
+ let propValue = aFlexboxTestcase.container_properties[propName];
+ setPossiblyAliasedProperty(flexContainer, propName, propValue,
+ aPropertyMapping);
+ }
+ }
+
+ // Create & append flex items
+ aFlexboxTestcase.items.forEach(function(aChildSpec) {
+ // Create an element for our item
+ let child = document.createElement("div");
+
+ // Set all the specified properties on our item
+ for (let propName in aChildSpec) {
+ // aChildSpec[propName] is either a specified value,
+ // or an array of [specifiedValue, computedValue]
+ let specifiedValue = Array.isArray(aChildSpec[propName]) ?
+ aChildSpec[propName][0] :
+ aChildSpec[propName];
+
+ // SANITY CHECK:
+ if (Array.isArray(aChildSpec[propName])) {
+ ok(aChildSpec[propName].length >= 2 &&
+ aChildSpec[propName].length <= 3,
+ "unexpected number of elements in array within child spec");
+ }
+
+ if (specifiedValue !== null) {
+ setPossiblyAliasedProperty(child, propName, specifiedValue,
+ aPropertyMapping);
+ }
+ }
+
+ // Append the item to the flex container
+ flexContainer.appendChild(child);
+ });
+
+ // Append the flex container
+ content.appendChild(flexContainer);
+
+ // NOW: Test the computed style on the flex items
+ let child = flexContainer.firstChild;
+ for (let i = 0; i < aFlexboxTestcase.items.length; i++) {
+ if (!child) { // sanity
+ ok(false, "should have created a child for each child-spec");
+ }
+
+ let childSpec = aFlexboxTestcase.items[i];
+ for (let propName in childSpec) {
+ if (Array.isArray(childSpec[propName])) {
+ let expectedVal = childSpec[propName][1];
+ let actualPropName = (propName in aPropertyMapping ?
+ aPropertyMapping[propName] : propName);
+ let actualVal = getComputedStyleWrapper(child, actualPropName);
+ let message = "computed value of '" + actualPropName +
+ "' should match expected";
+
+ if (childSpec[propName].length > 2) {
+ // 3rd entry in array is epsilon
+ // Need to strip off "px" units in order to use epsilon:
+ let actualValNoPx = stripPx(actualVal);
+ let expectedValNoPx = stripPx(expectedVal);
+ isfuzzy(actualValNoPx, expectedValNoPx,
+ childSpec[propName][2], message);
+ } else {
+ is(actualVal, expectedVal, message);
+ }
+ }
+ }
+
+ child = child.nextSibling;
+ }
+
+ // Clean up: drop the flex container.
+ content.removeChild(flexContainer);
+}
+
+function main()
+{
+ gFlexboxTestcases.forEach(
+ function(aTestcase) {
+ testFlexboxTestcase(aTestcase, "",
+ gRowPropertyMapping);
+ testFlexboxTestcase(aTestcase, "row",
+ gRowPropertyMapping);
+ testFlexboxTestcase(aTestcase, "row-reverse",
+ gRowReversePropertyMapping);
+ testFlexboxTestcase(aTestcase, "column",
+ gColumnPropertyMapping);
+ testFlexboxTestcase(aTestcase, "column-reverse",
+ gColumnReversePropertyMapping);
+ }
+ );
+}
+
+main();
+
+</script>
+</pre>
+</body>
+</html>
generated by cgit v1.2.3 (git 2.25.1) at 2024-12-03 16:16:14 +0000