mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-11-08 20:47:44 +00:00
07aa124808
--HG-- rename : layout/style/test/file_flexbox_align_self_auto.html => layout/style/test/test_flexbox_align_self_auto.html rename : layout/style/test/file_flexbox_child_display_values.xhtml => layout/style/test/test_flexbox_child_display_values.xhtml rename : layout/style/test/file_flexbox_flex_grow_and_shrink.html => layout/style/test/test_flexbox_flex_grow_and_shrink.html rename : layout/style/test/file_flexbox_flex_shorthand.html => layout/style/test/test_flexbox_flex_shorthand.html rename : layout/style/test/file_flexbox_layout.html => layout/style/test/test_flexbox_layout.html rename : layout/style/test/file_flexbox_order.html => layout/style/test/test_flexbox_order.html rename : layout/style/test/file_flexbox_order_table.html => layout/style/test/test_flexbox_order_table.html
159 lines
5.2 KiB
HTML
159 lines
5.2 KiB
HTML
<!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;
|
|
}
|
|
}
|
|
|
|
// 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])) {
|
|
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()
|
|
{
|
|
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>
|