Bug 1122253 - Support -moz-min-content etc. keywords in {,min-,max-}inline-size and their physical equivalents. r=bzbarsky

This commit is contained in:
Cameron McCormack 2015-06-25 08:40:38 +10:00
parent 7d626c26ae
commit 187d432e47
6 changed files with 291 additions and 41 deletions

View File

@ -684,8 +684,8 @@ CSS_PROP_LOGICAL(
CSS_PROPERTY_LOGICAL_AXIS |
CSS_PROPERTY_LOGICAL_BLOCK_AXIS,
"layout.css.vertical-text.enabled",
VARIANT_AHKLP | VARIANT_CALC,
kWidthKTable,
VARIANT_AHLP | VARIANT_CALC,
nullptr,
Size,
Position,
CSS_PROP_NO_OFFSET,
@ -2124,8 +2124,8 @@ CSS_PROP_POSITION(
CSS_PROPERTY_UNITLESS_LENGTH_QUIRK |
CSS_PROPERTY_GETCS_NEEDS_LAYOUT_FLUSH,
"",
VARIANT_AHLP | VARIANT_CALC,
nullptr,
VARIANT_AHKLP | VARIANT_CALC,
kWidthKTable,
offsetof(nsStylePosition, mHeight),
eStyleAnimType_Coord)
CSS_PROP_VISIBILITY(
@ -2427,8 +2427,8 @@ CSS_PROP_LOGICAL(
CSS_PROPERTY_LOGICAL_AXIS |
CSS_PROPERTY_LOGICAL_BLOCK_AXIS,
"layout.css.vertical-text.enabled",
VARIANT_HKLPO | VARIANT_CALC,
kWidthKTable,
VARIANT_HLPO | VARIANT_CALC,
nullptr,
MaxSize,
Position,
CSS_PROP_NO_OFFSET,
@ -2443,8 +2443,8 @@ CSS_PROP_POSITION(
CSS_PROPERTY_UNITLESS_LENGTH_QUIRK |
CSS_PROPERTY_GETCS_NEEDS_LAYOUT_FLUSH,
"",
VARIANT_HLPO | VARIANT_CALC,
nullptr,
VARIANT_HKLPO | VARIANT_CALC,
kWidthKTable,
offsetof(nsStylePosition, mMaxHeight),
eStyleAnimType_Coord)
CSS_PROP_LOGICAL(
@ -2489,8 +2489,8 @@ CSS_PROP_POSITION(
CSS_PROPERTY_UNITLESS_LENGTH_QUIRK |
CSS_PROPERTY_GETCS_NEEDS_LAYOUT_FLUSH,
"",
VARIANT_AHLP | VARIANT_CALC,
nullptr,
VARIANT_AHKLP | VARIANT_CALC,
kWidthKTable,
offsetof(nsStylePosition, mMinHeight),
eStyleAnimType_Coord)
CSS_PROP_LOGICAL(
@ -2506,8 +2506,8 @@ CSS_PROP_LOGICAL(
CSS_PROPERTY_LOGICAL_AXIS |
CSS_PROPERTY_LOGICAL_BLOCK_AXIS,
"layout.css.vertical-text.enabled",
VARIANT_AHKLP | VARIANT_CALC,
kWidthKTable,
VARIANT_AHLP | VARIANT_CALC,
nullptr,
MinSize,
Position,
CSS_PROP_NO_OFFSET,

View File

@ -4264,8 +4264,8 @@ nsComputedDOMStyle::DoGetHeight()
&nsComputedDOMStyle::GetCBContentHeight,
nscoord_MAX, true);
SetValueToCoord(val, positionData->mHeight, true, nullptr, nullptr,
minHeight, maxHeight);
SetValueToCoord(val, positionData->mHeight, true, nullptr,
nsCSSProps::kWidthKTable, minHeight, maxHeight);
}
return val;
@ -4320,7 +4320,8 @@ nsComputedDOMStyle::DoGetMaxHeight()
{
nsROCSSPrimitiveValue *val = new nsROCSSPrimitiveValue;
SetValueToCoord(val, StylePosition()->mMaxHeight, true,
&nsComputedDOMStyle::GetCBContentHeight);
&nsComputedDOMStyle::GetCBContentHeight,
nsCSSProps::kWidthKTable);
return val;
}
@ -4349,7 +4350,8 @@ nsComputedDOMStyle::DoGetMinHeight()
}
SetValueToCoord(val, minHeight, true,
&nsComputedDOMStyle::GetCBContentHeight);
&nsComputedDOMStyle::GetCBContentHeight,
nsCSSProps::kWidthKTable);
return val;
}

View File

@ -7632,42 +7632,73 @@ nsRuleNode::ComputePositionData(void* aStartStruct,
}
}
SetCoord(*aRuleData->ValueForWidth(), pos->mWidth, parentPos->mWidth,
// We allow the enumerated box size property values -moz-min-content, etc. to
// be specified on both the {,min-,max-}width properties and the
// {,min-,max-}height properties, regardless of the writing mode. This is
// because the writing mode is not determined until here, at computed value
// time. Since we do not support layout behavior of these keywords on the
// block-axis properties, we turn them into unset if we find them in
// that case.
bool vertical;
switch (aContext->StyleVisibility()->mWritingMode) {
default:
MOZ_ASSERT(false, "unexpected writing-mode value");
// fall through
case NS_STYLE_WRITING_MODE_HORIZONTAL_TB:
vertical = false;
break;
case NS_STYLE_WRITING_MODE_VERTICAL_RL:
case NS_STYLE_WRITING_MODE_VERTICAL_LR:
vertical = true;
break;
}
const nsCSSValue* width = aRuleData->ValueForWidth();
SetCoord(width->GetUnit() == eCSSUnit_Enumerated && vertical ?
nsCSSValue(eCSSUnit_Unset) : *width,
pos->mWidth, parentPos->mWidth,
SETCOORD_LPAEH | SETCOORD_INITIAL_AUTO | SETCOORD_STORE_CALC |
SETCOORD_UNSET_INITIAL,
aContext, mPresContext, conditions);
SetCoord(*aRuleData->ValueForMinWidth(), pos->mMinWidth, parentPos->mMinWidth,
const nsCSSValue* minWidth = aRuleData->ValueForMinWidth();
SetCoord(minWidth->GetUnit() == eCSSUnit_Enumerated && vertical ?
nsCSSValue(eCSSUnit_Unset) : *minWidth,
pos->mMinWidth, parentPos->mMinWidth,
SETCOORD_LPAEH | SETCOORD_INITIAL_AUTO | SETCOORD_STORE_CALC |
SETCOORD_UNSET_INITIAL,
aContext, mPresContext, conditions);
SetCoord(*aRuleData->ValueForMaxWidth(), pos->mMaxWidth, parentPos->mMaxWidth,
const nsCSSValue* maxWidth = aRuleData->ValueForMaxWidth();
SetCoord(maxWidth->GetUnit() == eCSSUnit_Enumerated && vertical ?
nsCSSValue(eCSSUnit_Unset) : *maxWidth,
pos->mMaxWidth, parentPos->mMaxWidth,
SETCOORD_LPOEH | SETCOORD_INITIAL_NONE | SETCOORD_STORE_CALC |
SETCOORD_UNSET_INITIAL,
aContext, mPresContext, conditions);
// We can get enumerated values for {,min-,max-}height (-moz-min-content,
// -moz-max-content, etc.) since we parse the logical properties with all the
// values that width accepts. If we get a value we don't support on these
// properties, turn them into unset.
const nsCSSValue* height = aRuleData->ValueForHeight();
SetCoord(height->GetUnit() == eCSSUnit_Enumerated ?
SetCoord(height->GetUnit() == eCSSUnit_Enumerated && !vertical ?
nsCSSValue(eCSSUnit_Unset) : *height,
pos->mHeight, parentPos->mHeight,
SETCOORD_LPAH | SETCOORD_INITIAL_AUTO | SETCOORD_STORE_CALC |
SETCOORD_LPAEH | SETCOORD_INITIAL_AUTO | SETCOORD_STORE_CALC |
SETCOORD_UNSET_INITIAL,
aContext, mPresContext, conditions);
const nsCSSValue* minHeight = aRuleData->ValueForMinHeight();
SetCoord(minHeight->GetUnit() == eCSSUnit_Enumerated ?
SetCoord(minHeight->GetUnit() == eCSSUnit_Enumerated && !vertical ?
nsCSSValue(eCSSUnit_Unset) : *minHeight,
pos->mMinHeight, parentPos->mMinHeight,
SETCOORD_LPAH | SETCOORD_INITIAL_AUTO | SETCOORD_STORE_CALC |
SETCOORD_LPAEH | SETCOORD_INITIAL_AUTO | SETCOORD_STORE_CALC |
SETCOORD_UNSET_INITIAL,
aContext, mPresContext, conditions);
const nsCSSValue* maxHeight = aRuleData->ValueForMaxHeight();
SetCoord(maxHeight->GetUnit() == eCSSUnit_Enumerated ?
SetCoord(maxHeight->GetUnit() == eCSSUnit_Enumerated && !vertical ?
nsCSSValue(eCSSUnit_Unset) : *maxHeight,
pos->mMaxHeight, parentPos->mMaxHeight,
SETCOORD_LPOH | SETCOORD_INITIAL_NONE | SETCOORD_STORE_CALC |
SETCOORD_LPOEH | SETCOORD_INITIAL_NONE | SETCOORD_STORE_CALC |
SETCOORD_UNSET_INITIAL,
aContext, mPresContext, conditions);

View File

@ -276,3 +276,4 @@ support-files = ../../reftests/fonts/Ahem.ttf file_animations_async_tests.html
[test_setPropertyWithNull.html]
[test_attribute_selector_eof_behavior.html]
[test_css_loader_crossorigin_data_url.html]
[test_box_size_keywords.html]

View File

@ -2684,7 +2684,11 @@ var gCSSProperties = {
inherited: false,
type: CSS_TYPE_LONGHAND,
/* FIXME: test zero, and test calc clamping */
initial_values: [ " auto" ],
initial_values: [ " auto",
// these four keywords compute to the initial value when the
// writing mode is horizontal, and that's the context we're testing in
"-moz-max-content", "-moz-min-content", "-moz-fit-content", "-moz-available",
],
/* computed value tests for height test more with display:block */
prerequisites: { "display": "block" },
other_values: [ "15px", "3em", "15%",
@ -2694,7 +2698,7 @@ var gCSSProperties = {
"calc(25px*3)",
"calc(3*25px + 50%)",
],
invalid_values: [ "none", "-moz-max-content", "-moz-min-content", "-moz-fit-content", "-moz-available" ],
invalid_values: [ "none" ],
quirks_values: { "5": "5px" },
},
"ime-mode": {
@ -2945,7 +2949,11 @@ var gCSSProperties = {
inherited: false,
type: CSS_TYPE_LONGHAND,
prerequisites: { "display": "block" },
initial_values: [ "none" ],
initial_values: [ "none",
// these four keywords compute to the initial value when the
// writing mode is horizontal, and that's the context we're testing in
"-moz-max-content", "-moz-min-content", "-moz-fit-content", "-moz-available",
],
other_values: [ "30px", "50%", "0",
"calc(2px)",
"calc(-2px)",
@ -2955,7 +2963,7 @@ var gCSSProperties = {
"calc(25px*3)",
"calc(3*25px + 50%)",
],
invalid_values: [ "auto", "-moz-max-content", "-moz-min-content", "-moz-fit-content", "-moz-available" ],
invalid_values: [ "auto" ],
quirks_values: { "5": "5px" },
},
"max-width": {
@ -2964,7 +2972,11 @@ var gCSSProperties = {
type: CSS_TYPE_LONGHAND,
prerequisites: { "display": "block" },
initial_values: [ "none" ],
other_values: [ "30px", "50%", "0", "-moz-max-content", "-moz-min-content", "-moz-fit-content", "-moz-available",
other_values: [ "30px", "50%", "0",
// these four keywords compute to the initial value only when the
// writing mode is vertical, and we're testing with a horizontal
// writing mode
"-moz-max-content", "-moz-min-content", "-moz-fit-content", "-moz-available",
"calc(2px)",
"calc(-2px)",
"calc(0px)",
@ -2981,7 +2993,11 @@ var gCSSProperties = {
inherited: false,
type: CSS_TYPE_LONGHAND,
prerequisites: { "display": "block" },
initial_values: [ "auto", "0", "calc(0em)", "calc(-2px)", "calc(-1%)" ],
initial_values: [ "auto", "0", "calc(0em)", "calc(-2px)", "calc(-1%)",
// these four keywords compute to the initial value when the
// writing mode is horizontal, and that's the context we're testing in
"-moz-max-content", "-moz-min-content", "-moz-fit-content", "-moz-available",
],
other_values: [ "30px", "50%",
"calc(2px)",
"calc(50%)",
@ -2989,7 +3005,7 @@ var gCSSProperties = {
"calc(25px*3)",
"calc(3*25px + 50%)",
],
invalid_values: ["none", "-moz-max-content", "-moz-min-content", "-moz-fit-content", "-moz-available" ],
invalid_values: ["none"],
quirks_values: { "5": "5px" },
},
"min-width": {
@ -2998,7 +3014,11 @@ var gCSSProperties = {
type: CSS_TYPE_LONGHAND,
prerequisites: { "display": "block" },
initial_values: [ "auto", "0", "calc(0em)", "calc(-2px)", "calc(-1%)" ],
other_values: [ "30px", "50%", "-moz-max-content", "-moz-min-content", "-moz-fit-content", "-moz-available",
other_values: [ "30px", "50%",
// these four keywords compute to the initial value only when the
// writing mode is vertical, and we're testing with a horizontal
// writing mode
"-moz-max-content", "-moz-min-content", "-moz-fit-content", "-moz-available",
"calc(2px)",
"calc(50%)",
"calc(3*25px)",
@ -3515,7 +3535,15 @@ var gCSSProperties = {
prerequisites: { "display": "block" },
initial_values: [ " auto" ],
/* XXX these have prerequisites */
other_values: [ "15px", "3em", "15%", "-moz-max-content", "-moz-min-content", "-moz-fit-content", "-moz-available",
other_values: [ "15px", "3em", "15%",
// these three keywords compute to the initial value only when the
// writing mode is vertical, and we're testing with a horizontal
// writing mode
"-moz-max-content", "-moz-min-content", "-moz-fit-content",
// whether -moz-available computes to the initial value depends on
// the container size, and for the container size we're testing
// with, it does
// "-moz-available",
"3e1px", "3e+1px", "3e0px", "3e+0px", "3e-0px", "3e-1px",
"3.2e1px", "3.2e+1px", "3.2e0px", "3.2e+0px", "3.2e-0px", "3.2e-1px",
"3e1%", "3e+1%", "3e0%", "3e+0%", "3e-0%", "3e-1%",
@ -4723,7 +4751,7 @@ if (SpecialPowers.getBoolPref("layout.css.vertical-text.enabled")) {
"calc(25px*3)",
"calc(3*25px + 50%)",
],
invalid_values: [ "none" ],
invalid_values: [ "none", "-moz-max-content", "-moz-min-content", "-moz-fit-content", "-moz-available" ],
},
"border-block-end-color": {
domProp: "borderBlockEndColor",
@ -4929,6 +4957,14 @@ if (SpecialPowers.getBoolPref("layout.css.vertical-text.enabled")) {
initial_values: [ "auto" ],
prerequisites: { "display": "block" },
other_values: [ "15px", "3em", "15%",
// these three keywords compute to the initial value only when the
// writing mode is vertical, and we're testing with a horizontal
// writing mode
"-moz-max-content", "-moz-min-content", "-moz-fit-content",
// whether -moz-available computes to the initial value depends on
// the container size, and for the container size we're testing
// with, it does
// "-moz-available",
"calc(2px)",
"calc(50%)",
"calc(3*25px)",
@ -5025,7 +5061,7 @@ if (SpecialPowers.getBoolPref("layout.css.vertical-text.enabled")) {
"calc(25px*3)",
"calc(3*25px + 50%)",
],
invalid_values: [ "auto", "5" ]
invalid_values: [ "auto", "5", "-moz-max-content", "-moz-min-content", "-moz-fit-content", "-moz-available" ]
},
"max-inline-size": {
domProp: "maxInlineSize",
@ -5037,6 +5073,10 @@ if (SpecialPowers.getBoolPref("layout.css.vertical-text.enabled")) {
prerequisites: { "display": "block" },
initial_values: [ "none" ],
other_values: [ "30px", "50%",
// these four keywords compute to the initial value only when the
// writing mode is vertical, and we're testing with a horizontal
// writing mode
"-moz-max-content", "-moz-min-content", "-moz-fit-content", "-moz-available",
"calc(2px)",
"calc(50%)",
"calc(3*25px)",
@ -5061,7 +5101,7 @@ if (SpecialPowers.getBoolPref("layout.css.vertical-text.enabled")) {
"calc(25px*3)",
"calc(3*25px + 50%)",
],
invalid_values: [ "none", "5" ]
invalid_values: [ "none", "5", "-moz-max-content", "-moz-min-content", "-moz-fit-content", "-moz-available" ]
},
"min-inline-size": {
domProp: "minInlineSize",
@ -5073,6 +5113,10 @@ if (SpecialPowers.getBoolPref("layout.css.vertical-text.enabled")) {
prerequisites: { "display": "block" },
initial_values: [ "auto", "0", "calc(0em)", "calc(-2px)", "calc(-1%)" ],
other_values: [ "30px", "50%",
// these four keywords compute to the initial value only when the
// writing mode is vertical, and we're testing with a horizontal
// writing mode
"-moz-max-content", "-moz-min-content", "-moz-fit-content", "-moz-available",
"calc(2px)",
"calc(50%)",
"calc(3*25px)",

View File

@ -0,0 +1,172 @@
<!DOCTYPE HTML>
<html>
<!--
https://bugzilla.mozilla.org/show_bug.cgi?id=1122253
-->
<head>
<title>Test for Bug 1122253</title>
<script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
<script 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=1122253">Mozilla Bug 1122253</a>
<style>
#outer {
position: absolute;
width: 200px;
height: 200px;
}
#horizontal, #vertical {
background-color: #ccc;
line-height: 1px;
}
#vertical {
writing-mode: vertical-rl;
position: relative;
top: 10px;
}
.small, .big {
display: inline-block;
block-size: 10px;
}
.small {
background-image: linear-gradient(to bottom right, black, fuchsia);
inline-size: 10px;
}
.big {
background-image: linear-gradient(to bottom right, black, cyan);
inline-size: 90px;
}
</style>
<div id=outer>
<div id=horizontal><span class=small></span><span class=big></span><span class=big></span><span class=big></span></div>
<div id=vertical><span class=small></span><span class=big></span><span class=big></span><span class=big></span></div>
</div>
<pre id="test">
<script class="testbody" type="text/javascript">
/** Test for Bug 1122253 **/
// Test that the -moz-available, -moz-min-content, -moz-max-content, and
// -moz-fit-content keywords are usable only on width, when the writing
// mode is horizontal, or height, when the writing mode is vertical,
// and that they are always available on inline-size and never on
// block-size. When used on the wrong properties, they should be
// equivalent to unset.
//
// Also test the corresponding min-* and max-* properties.
var gTests = [
{ orientation: "horizontal", property: "width", specified_value: "-moz-available", computed_value: "200px", },
{ orientation: "horizontal", property: "width", specified_value: "-moz-min-content", computed_value: "90px", },
{ orientation: "horizontal", property: "width", specified_value: "-moz-max-content", computed_value: "280px", },
{ orientation: "horizontal", property: "width", specified_value: "-moz-fit-content", computed_value: "200px", },
{ orientation: "horizontal", property: "inline-size", specified_value: "-moz-available", computed_value: "200px", },
{ orientation: "horizontal", property: "inline-size", specified_value: "-moz-min-content", computed_value: "90px", },
{ orientation: "horizontal", property: "inline-size", specified_value: "-moz-max-content", computed_value: "280px", },
{ orientation: "horizontal", property: "inline-size", specified_value: "-moz-fit-content", computed_value: "200px", },
{ orientation: "horizontal", property: "min-width", specified_value: "-moz-available", computed_value: "-moz-available", },
{ orientation: "horizontal", property: "min-width", specified_value: "-moz-min-content", computed_value: "-moz-min-content", },
{ orientation: "horizontal", property: "min-width", specified_value: "-moz-max-content", computed_value: "-moz-max-content", },
{ orientation: "horizontal", property: "min-width", specified_value: "-moz-fit-content", computed_value: "-moz-fit-content", },
{ orientation: "horizontal", property: "min-inline-size", specified_value: "-moz-available", computed_value: "-moz-available", },
{ orientation: "horizontal", property: "min-inline-size", specified_value: "-moz-min-content", computed_value: "-moz-min-content", },
{ orientation: "horizontal", property: "min-inline-size", specified_value: "-moz-max-content", computed_value: "-moz-max-content", },
{ orientation: "horizontal", property: "min-inline-size", specified_value: "-moz-fit-content", computed_value: "-moz-fit-content", },
{ orientation: "horizontal", property: "max-width", specified_value: "-moz-available", computed_value: "-moz-available", },
{ orientation: "horizontal", property: "max-width", specified_value: "-moz-min-content", computed_value: "-moz-min-content", },
{ orientation: "horizontal", property: "max-width", specified_value: "-moz-max-content", computed_value: "-moz-max-content", },
{ orientation: "horizontal", property: "max-width", specified_value: "-moz-fit-content", computed_value: "-moz-fit-content", },
{ orientation: "horizontal", property: "max-inline-size", specified_value: "-moz-available", computed_value: "-moz-available", },
{ orientation: "horizontal", property: "max-inline-size", specified_value: "-moz-min-content", computed_value: "-moz-min-content", },
{ orientation: "horizontal", property: "max-inline-size", specified_value: "-moz-max-content", computed_value: "-moz-max-content", },
{ orientation: "horizontal", property: "max-inline-size", specified_value: "-moz-fit-content", computed_value: "-moz-fit-content", },
{ orientation: "vertical", property: "height", specified_value: "-moz-available", computed_value: "200px", },
{ orientation: "vertical", property: "height", specified_value: "-moz-min-content", computed_value: "90px", },
{ orientation: "vertical", property: "height", specified_value: "-moz-max-content", computed_value: "280px", },
{ orientation: "vertical", property: "height", specified_value: "-moz-fit-content", computed_value: "200px", },
{ orientation: "vertical", property: "inline-size", specified_value: "-moz-available", computed_value: "200px", },
{ orientation: "vertical", property: "inline-size", specified_value: "-moz-min-content", computed_value: "90px", },
{ orientation: "vertical", property: "inline-size", specified_value: "-moz-max-content", computed_value: "280px", },
{ orientation: "vertical", property: "inline-size", specified_value: "-moz-fit-content", computed_value: "200px", },
{ orientation: "vertical", property: "min-height", specified_value: "-moz-available", computed_value: "-moz-available", },
{ orientation: "vertical", property: "min-height", specified_value: "-moz-min-content", computed_value: "-moz-min-content", },
{ orientation: "vertical", property: "min-height", specified_value: "-moz-max-content", computed_value: "-moz-max-content", },
{ orientation: "vertical", property: "min-height", specified_value: "-moz-fit-content", computed_value: "-moz-fit-content", },
{ orientation: "vertical", property: "min-inline-size", specified_value: "-moz-available", computed_value: "-moz-available", },
{ orientation: "vertical", property: "min-inline-size", specified_value: "-moz-min-content", computed_value: "-moz-min-content", },
{ orientation: "vertical", property: "min-inline-size", specified_value: "-moz-max-content", computed_value: "-moz-max-content", },
{ orientation: "vertical", property: "min-inline-size", specified_value: "-moz-fit-content", computed_value: "-moz-fit-content", },
{ orientation: "vertical", property: "max-height", specified_value: "-moz-available", computed_value: "-moz-available", },
{ orientation: "vertical", property: "max-height", specified_value: "-moz-min-content", computed_value: "-moz-min-content", },
{ orientation: "vertical", property: "max-height", specified_value: "-moz-max-content", computed_value: "-moz-max-content", },
{ orientation: "vertical", property: "max-height", specified_value: "-moz-fit-content", computed_value: "-moz-fit-content", },
{ orientation: "vertical", property: "max-inline-size", specified_value: "-moz-available", computed_value: "-moz-available", },
{ orientation: "vertical", property: "max-inline-size", specified_value: "-moz-min-content", computed_value: "-moz-min-content", },
{ orientation: "vertical", property: "max-inline-size", specified_value: "-moz-max-content", computed_value: "-moz-max-content", },
{ orientation: "vertical", property: "max-inline-size", specified_value: "-moz-fit-content", computed_value: "-moz-fit-content", },
{ orientation: "vertical", prerequisites: "width: 30px; ", property: "width", specified_value: "-moz-available", computed_value: "20px", },
{ orientation: "vertical", prerequisites: "width: 30px; ", property: "width", specified_value: "-moz-min-content", computed_value: "20px", },
{ orientation: "vertical", prerequisites: "width: 30px; ", property: "width", specified_value: "-moz-max-content", computed_value: "20px", },
{ orientation: "vertical", prerequisites: "width: 30px; ", property: "width", specified_value: "-moz-fit-content", computed_value: "20px", },
{ orientation: "vertical", prerequisites: "block-size: 30px; ", property: "block-size", specified_value: "-moz-available", computed_value: "30px", },
{ orientation: "vertical", prerequisites: "block-size: 30px; ", property: "block-size", specified_value: "-moz-min-content", computed_value: "30px", },
{ orientation: "vertical", prerequisites: "block-size: 30px; ", property: "block-size", specified_value: "-moz-max-content", computed_value: "30px", },
{ orientation: "vertical", prerequisites: "block-size: 30px; ", property: "block-size", specified_value: "-moz-fit-content", computed_value: "30px", },
{ orientation: "vertical", prerequisites: "min-width: 30px; ", property: "min-width", specified_value: "-moz-available", computed_value: "0px", },
{ orientation: "vertical", prerequisites: "min-width: 30px; ", property: "min-width", specified_value: "-moz-min-content", computed_value: "0px", },
{ orientation: "vertical", prerequisites: "min-width: 30px; ", property: "min-width", specified_value: "-moz-max-content", computed_value: "0px", },
{ orientation: "vertical", prerequisites: "min-width: 30px; ", property: "min-width", specified_value: "-moz-fit-content", computed_value: "0px", },
{ orientation: "vertical", prerequisites: "min-block-size: 30px; ", property: "min-block-size", specified_value: "-moz-available", computed_value: "30px", },
{ orientation: "vertical", prerequisites: "min-block-size: 30px; ", property: "min-block-size", specified_value: "-moz-min-content", computed_value: "30px", },
{ orientation: "vertical", prerequisites: "min-block-size: 30px; ", property: "min-block-size", specified_value: "-moz-max-content", computed_value: "30px", },
{ orientation: "vertical", prerequisites: "min-block-size: 30px; ", property: "min-block-size", specified_value: "-moz-fit-content", computed_value: "30px", },
{ orientation: "vertical", prerequisites: "max-width: 30px; ", property: "max-width", specified_value: "-moz-available", computed_value: "none", },
{ orientation: "vertical", prerequisites: "max-width: 30px; ", property: "max-width", specified_value: "-moz-min-content", computed_value: "none", },
{ orientation: "vertical", prerequisites: "max-width: 30px; ", property: "max-width", specified_value: "-moz-max-content", computed_value: "none", },
{ orientation: "vertical", prerequisites: "max-width: 30px; ", property: "max-width", specified_value: "-moz-fit-content", computed_value: "none", },
{ orientation: "vertical", prerequisites: "max-block-size: 30px; ", property: "max-block-size", specified_value: "-moz-available", computed_value: "30px", },
{ orientation: "vertical", prerequisites: "max-block-size: 30px; ", property: "max-block-size", specified_value: "-moz-min-content", computed_value: "30px", },
{ orientation: "vertical", prerequisites: "max-block-size: 30px; ", property: "max-block-size", specified_value: "-moz-max-content", computed_value: "30px", },
{ orientation: "vertical", prerequisites: "max-block-size: 30px; ", property: "max-block-size", specified_value: "-moz-fit-content", computed_value: "30px", },
{ orientation: "horizontal", prerequisites: "height: 30px; ", property: "height", specified_value: "-moz-available", computed_value: "20px", },
{ orientation: "horizontal", prerequisites: "height: 30px; ", property: "height", specified_value: "-moz-min-content", computed_value: "20px", },
{ orientation: "horizontal", prerequisites: "height: 30px; ", property: "height", specified_value: "-moz-max-content", computed_value: "20px", },
{ orientation: "horizontal", prerequisites: "height: 30px; ", property: "height", specified_value: "-moz-fit-content", computed_value: "20px", },
{ orientation: "horizontal", prerequisites: "block-size: 30px; ", property: "block-size", specified_value: "-moz-available", computed_value: "30px", },
{ orientation: "horizontal", prerequisites: "block-size: 30px; ", property: "block-size", specified_value: "-moz-min-content", computed_value: "30px", },
{ orientation: "horizontal", prerequisites: "block-size: 30px; ", property: "block-size", specified_value: "-moz-max-content", computed_value: "30px", },
{ orientation: "horizontal", prerequisites: "block-size: 30px; ", property: "block-size", specified_value: "-moz-fit-content", computed_value: "30px", },
{ orientation: "horizontal", prerequisites: "min-height: 30px; ", property: "min-height", specified_value: "-moz-available", computed_value: "0px", },
{ orientation: "horizontal", prerequisites: "min-height: 30px; ", property: "min-height", specified_value: "-moz-min-content", computed_value: "0px", },
{ orientation: "horizontal", prerequisites: "min-height: 30px; ", property: "min-height", specified_value: "-moz-max-content", computed_value: "0px", },
{ orientation: "horizontal", prerequisites: "min-height: 30px; ", property: "min-height", specified_value: "-moz-fit-content", computed_value: "0px", },
{ orientation: "horizontal", prerequisites: "min-block-size: 30px; ", property: "min-block-size", specified_value: "-moz-available", computed_value: "30px", },
{ orientation: "horizontal", prerequisites: "min-block-size: 30px; ", property: "min-block-size", specified_value: "-moz-min-content", computed_value: "30px", },
{ orientation: "horizontal", prerequisites: "min-block-size: 30px; ", property: "min-block-size", specified_value: "-moz-max-content", computed_value: "30px", },
{ orientation: "horizontal", prerequisites: "min-block-size: 30px; ", property: "min-block-size", specified_value: "-moz-fit-content", computed_value: "30px", },
{ orientation: "horizontal", prerequisites: "max-height: 30px; ", property: "max-height", specified_value: "-moz-available", computed_value: "none", },
{ orientation: "horizontal", prerequisites: "max-height: 30px; ", property: "max-height", specified_value: "-moz-min-content", computed_value: "none", },
{ orientation: "horizontal", prerequisites: "max-height: 30px; ", property: "max-height", specified_value: "-moz-max-content", computed_value: "none", },
{ orientation: "horizontal", prerequisites: "max-height: 30px; ", property: "max-height", specified_value: "-moz-fit-content", computed_value: "none", },
{ orientation: "horizontal", prerequisites: "max-block-size: 30px; ", property: "max-block-size", specified_value: "-moz-available", computed_value: "30px", },
{ orientation: "horizontal", prerequisites: "max-block-size: 30px; ", property: "max-block-size", specified_value: "-moz-min-content", computed_value: "30px", },
{ orientation: "horizontal", prerequisites: "max-block-size: 30px; ", property: "max-block-size", specified_value: "-moz-max-content", computed_value: "30px", },
{ orientation: "horizontal", prerequisites: "max-block-size: 30px; ", property: "max-block-size", specified_value: "-moz-fit-content", computed_value: "30px", },
];
gTests.forEach(function(t) {
var e = document.getElementById(t.orientation);
e.style = (t.prerequisites || "") + t.property + ": " + t.specified_value;
is(get_computed_value(getComputedStyle(e), t.property), t.computed_value,
`${t.orientation} ${t.property}:${t.specified_value}`);
e.style = "";
});
</script>
</pre>
</body>
</html>