<!
DOCTYPE HTML>
<
html>
<!--
https://bugzilla.mozilla.org/show_bug.cgi?id=1038929
-->
<
head>
<
meta charset=
"utf-8">
<
title>Test for Bug 1038929</
title>
<
script src=
"/tests/SimpleTest/SimpleTest.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=1038929">Mozilla Bug 1038929</a>
<p id=
"display"></p>
<
div id=
"content" style=
"display: none">
<
div id=
"float-left" style=
"float: left"></
div>
<
div id=
"float-right" style=
"float: right"></
div>
<
div id=
"position-absolute" style=
"position: absolute"></
div>
<
div id=
"position-fixed" style=
"position: fixed"></
div>
</
div>
<
pre id=
"test">
<
script type=
"application/javascript">
/** Test for Bug 1038929: Test that
"display" on a floated or absolutely/fixed
position node is correctly converted to a block display as given in the
table
in CSS 2.1 9.7. */
// Maps from display value to expected conversion when floated/positioned
// This loosely follows the spec in CSS 2.1
section 9.7. Except for
"other"
// values which the spec says should be
"same as specified." For these, we do
// whatever the spec for the value itself says.
var mapping = {
"inline":
"block",
"table-row-group":
"block",
"table-column":
"block",
"table-column-group":
"block",
"table-header-group":
"block",
"table-footer-group":
"block",
"table-row":
"block",
"table-cell":
"block",
"table-caption":
"block",
"inline-block":
"block",
"block ruby":
"block ruby",
"ruby":
"block ruby",
"ruby-base":
"block",
"ruby-base-container":
"block",
"ruby-text":
"block",
"ruby-text-container":
"block",
"flex":
"flex",
"grid":
"grid",
"none":
"none",
"table":
"table",
"inline-grid":
"grid",
"inline-flex":
"flex",
"inline-table":
"table",
"block":
"block",
"contents":
"contents",
"flow-root":
"flow-root",
// Note: this is sometimes block
"list-item":
"list-item",
"inline list-item":
"list-item",
"inline flow-root list-item":
"list-item",
};
function test_display_value(val)
{
var floatLeftElem = document.getElementById(
"float-left");
floatLeftElem.
style.display = val;
var floatLeftConversion = window.getComputedStyle(floatLeftElem).display;
floatLeftElem.
style.display =
"";
var floatRightElem = document.getElementById(
"float-right");
floatRightElem.
style.display = val;
var floatRightConversion = window.getComputedStyle(floatRightElem).display;
floatRightElem.
style.display =
"";
var posAbsoluteElem = document.getElementById(
"position-absolute");
posAbsoluteElem.
style.display = val;
var posAbsoluteConversion = window.getComputedStyle(posAbsoluteElem).display;
posAbsoluteElem.
style.display =
"";
var posFixedElem = document.getElementById(
"position-fixed");
posFixedElem.
style.display = val;
var posFixedConversion = window.getComputedStyle(posFixedElem).display;
posFixedElem.
style.display =
"";
if (mapping[val]) {
is(floatLeftConversion, mapping[val],
"Element display should be converted when floated left");
is(floatRightConversion, mapping[val],
"Element display should be converted when floated right");
is(posAbsoluteConversion, mapping[val],
"Element display should be converted when absolutely positioned");
is(posFixedConversion, mapping[val],
"Element display should be converted when fixed positioned");
} else {
ok(false,
"missing rules for display value " + val);
}
}
var displayInfo = gCSSProperties.display;
displayInfo.initial_values.forEach(test_display_value);
displayInfo.other_values.forEach(test_display_value);
</
script>
</
pre>
</
body>
</
html>
