mirror of
https://gitlab.winehq.org/wine/wine-gecko.git
synced 2024-09-13 09:24:08 -07:00
30e8481488
--HG-- rename : layout/style/test/test_flexbox_align_self_auto.html => layout/style/test/file_flexbox_align_self_auto.html rename : layout/style/test/test_flexbox_flex_grow_and_shrink.html => layout/style/test/file_flexbox_flex_grow_and_shrink.html rename : layout/style/test/test_flexbox_flex_shorthand.html => layout/style/test/file_flexbox_flex_shorthand.html rename : layout/style/test/test_flexbox_layout.html => layout/style/test/file_flexbox_layout.html
155 lines
5.0 KiB
HTML
155 lines
5.0 KiB
HTML
<!DOCTYPE HTML>
|
|
<html>
|
|
<head>
|
|
<script type="text/javascript" src="flexbox_layout_testcases.js"></script>
|
|
<script type="text/javascript" src="property_database.js"></script>
|
|
</head>
|
|
<body>
|
|
<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.
|
|
*/
|
|
|
|
// Use "is()" and "ok()" from parent document.
|
|
var is = parent.is;
|
|
var ok = parent.ok;
|
|
|
|
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;
|
|
}
|
|
}
|
|
|
|
// 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.MozFlexDirection = 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])) {
|
|
is(aChildSpec[propName].length, 2,
|
|
"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);
|
|
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()
|
|
{
|
|
ok(SpecialPowers.getBoolPref("layout.css.flexbox.enabled"),
|
|
"expecting to be run with flexbox support enabled");
|
|
|
|
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);
|
|
}
|
|
);
|
|
|
|
parent.finish();
|
|
}
|
|
|
|
window.addEventListener("load", main, false);
|
|
</script>
|
|
</pre>
|
|
</body>
|
|
</html>
|