mirror of
https://gitlab.winehq.org/wine/wine-gecko.git
synced 2024-09-13 09:24:08 -07:00
140 lines
4.5 KiB
HTML
140 lines
4.5 KiB
HTML
<!DOCTYPE HTML>
|
|
<html>
|
|
<!--
|
|
https://bugzilla.mozilla.org/show_bug.cgi?id=666041
|
|
-->
|
|
<head>
|
|
<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>
|
|
<p id="display"></p>
|
|
<div id="content">
|
|
</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.
|
|
*/
|
|
|
|
SimpleTest.waitForExplicitFinish();
|
|
|
|
function getComputedStyleWrapper(elem, prop)
|
|
{
|
|
return window.getComputedStyle(elem, null).getPropertyValue(prop);
|
|
}
|
|
|
|
// 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 = "-moz-flex";
|
|
|
|
flexContainer.style[aPropertyMapping["_main-size"]] = gDefaultFlexContainerSize;
|
|
|
|
flexContainer.style.MozFlexDirection = aFlexDirection;
|
|
|
|
// 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])) {
|
|
is(aChildSpec[propName].length, 2,
|
|
"unexpected number of elements in array within child spec");
|
|
}
|
|
|
|
let actualPropName = (propName in aPropertyMapping ?
|
|
aPropertyMapping[propName] : propName);
|
|
if (!gCSSProperties[actualPropName]) {
|
|
ok(false, "Bug in test: property '" + actualPropName +
|
|
"' doesn't exist in gCSSProperties");
|
|
} else if (specifiedValue !== null) {
|
|
let domPropName = gCSSProperties[actualPropName].domProp;
|
|
child.style[domPropName] = specifiedValue;
|
|
}
|
|
}
|
|
|
|
// 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);
|
|
is(getComputedStyleWrapper(child, actualPropName), expectedVal,
|
|
"computed value of '" + actualPropName + "' should match expected");
|
|
}
|
|
}
|
|
|
|
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);
|
|
}
|
|
);
|
|
SimpleTest.finish();
|
|
}
|
|
|
|
window.addEventListener("load", main, false);
|
|
</script>
|
|
</pre>
|
|
</body>
|
|
</html>
|