зеркало из https://github.com/mozilla/gecko-dev.git
Backed out 2 changesets (bug 1526567, bug 1525775) for dt failures on browser_webconsole_sidebar_scroll.js . CLOSED TREE
Backed out changeset e919946fd913 (bug 1526567) Backed out changeset 133509097b7c (bug 1525775)
This commit is contained in:
Narcis Beleuzu
Родитель
3330fe7b0c
Коммит
d631a55079
|
|
@ -2931,9 +2931,6 @@ bool SizeComputationInput::ComputeMargin(WritingMode aWM,
|
|||
// We have to compute the value. Note that this calculation is
|
||||
// performed according to the writing mode of the containing block
|
||||
// (http://dev.w3.org/csswg/css-writing-modes-3/#orthogonal-flows)
|
||||
if (aPercentBasis == NS_UNCONSTRAINEDSIZE) {
|
||||
aPercentBasis = 0;
|
||||
}
|
||||
LogicalMargin m(aWM);
|
||||
m.IStart(aWM) = nsLayoutUtils::ComputeCBDependentValue(
|
||||
aPercentBasis, styleMargin->mMargin.GetIStart(aWM));
|
||||
|
|
@ -2979,9 +2976,6 @@ bool SizeComputationInput::ComputePadding(WritingMode aWM,
|
|||
// according to the writing mode of the containing block
|
||||
// (http://dev.w3.org/csswg/css-writing-modes-3/#orthogonal-flows)
|
||||
// clamp negative calc() results to 0
|
||||
if (aPercentBasis == NS_UNCONSTRAINEDSIZE) {
|
||||
aPercentBasis = 0;
|
||||
}
|
||||
LogicalMargin p(aWM);
|
||||
p.IStart(aWM) =
|
||||
std::max(0, nsLayoutUtils::ComputeCBDependentValue(
|
||||
|
|
|
|||
|
|
@ -3439,7 +3439,7 @@ static nscoord ContentContribution(
|
|||
// The next two variables are MinSizeClamp values in the child's axes.
|
||||
nscoord iMinSizeClamp = NS_MAXSIZE;
|
||||
nscoord bMinSizeClamp = NS_MAXSIZE;
|
||||
LogicalSize cbSize(childWM, 0, NS_UNCONSTRAINEDSIZE);
|
||||
LogicalSize cbSize(childWM, 0, 0);
|
||||
if (aState.mCols.mCanResolveLineRangeSize) {
|
||||
nscoord sz = aState.mCols.ResolveSize(aGridItem.mArea.mCols);
|
||||
if (isOrthogonal) {
|
||||
|
|
|
|||
|
|
@ -123,7 +123,7 @@ random-if(/^Windows\x20NT\x206\.1/.test(http.oscpu)) == grid-item-auto-min-size-
|
|||
== grid-item-canvas-001.html grid-item-canvas-001-ref.html
|
||||
skip-if(Android) == grid-item-button-001.html grid-item-button-001-ref.html
|
||||
== grid-item-table-stretch-001.html grid-item-table-stretch-001-ref.html
|
||||
fails-if(Android) == grid-item-table-stretch-002.html grid-item-table-stretch-002-ref.html # Bug 1527734
|
||||
== grid-item-table-stretch-002.html grid-item-table-stretch-002-ref.html
|
||||
== grid-item-table-stretch-003.html grid-item-table-stretch-003-ref.html
|
||||
== grid-item-table-stretch-004.html grid-item-table-stretch-004-ref.html
|
||||
== grid-item-fieldset-stretch-001.html grid-item-fieldset-stretch-001-ref.html
|
||||
|
|
|
|||
|
|
@ -75,9 +75,8 @@ input[orient="vertical"] {
|
|||
<input type="range" class="mb n" orient="vertical">
|
||||
</div></div>
|
||||
|
||||
<div class="grid" style="grid: min-content / auto">
|
||||
<input type="range" class="b" orient="vertical" style="height:50%; grid-area:1/1">
|
||||
<input type="range" class="b" orient="vertical" style="visibility:hidden; grid-area:1/1">
|
||||
<div class="grid" style="grid: 30px / auto">
|
||||
<input type="range" class="b" orient="vertical" style="height:15px">
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid: 30px / auto">
|
||||
|
|
|
|||
|
|
@ -0,0 +1,4 @@
|
|||
[range-percent-intrinsic-size-2.html]
|
||||
expected:
|
||||
if (os == "win"): FAIL
|
||||
if (os == "android"): "FAIL"
|
||||
|
|
@ -1,312 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Reference: item [min-|max-]*[width|height] percentages</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: inline-grid;
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
grid: 1px auto 2px / 3px auto 4px;
|
||||
border: solid 1px;
|
||||
margin: 0 20px 20px 0;
|
||||
place-items: start;
|
||||
}
|
||||
.item {
|
||||
background: cyan;
|
||||
grid-area: 2/2;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
}
|
||||
.content {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
}
|
||||
.min {
|
||||
height: 7px;
|
||||
width: 3px;
|
||||
}
|
||||
.min:not(.max):not(.size) {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
.hl .item { writing-mode: horizontal-tb; direction:ltr; }
|
||||
.hr .item { writing-mode: horizontal-tb; direction:rtl; }
|
||||
.vrl .item { writing-mode: vertical-rl; direction:ltr; }
|
||||
.vrr .item { writing-mode: vertical-rl; direction:rtl; }
|
||||
.vll .item { writing-mode: vertical-lr; direction:ltr; }
|
||||
.vlr .item { writing-mode: vertical-lr; direction:rtl; }
|
||||
.sll .item { writing-mode: sideways-lr; direction:ltr; }
|
||||
.slr .item { writing-mode: sideways-lr; direction:rtl; }
|
||||
|
||||
</style>
|
||||
<div class="hl">
|
||||
<div class="grid">
|
||||
<div class="item max">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item max size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min max">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min max size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="vrl">
|
||||
<div class="grid">
|
||||
<div class="item max">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item max size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min max">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min max size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="vrr">
|
||||
<div class="grid">
|
||||
<div class="item max">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item max size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min max">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min max size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="vll">
|
||||
<div class="grid">
|
||||
<div class="item max">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item max size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min max">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min max size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="vlr">
|
||||
<div class="grid">
|
||||
<div class="item max">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item max size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min max">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min max size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="slr">
|
||||
<div class="grid">
|
||||
<div class="item max">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item max size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min max">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min max size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="srl">
|
||||
<div class="grid">
|
||||
<div class="item max">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item max size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min max">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min max size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,318 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: item [min-|max-]*[width|height] percentages</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-grid-1">
|
||||
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1526567">
|
||||
<link rel="match" href="grid-item-percentage-sizes-001-ref.html">
|
||||
<meta name="assert" content="Checks that item [min-|max-]*[width|height] percentages are resolved correctly in span=1 auto tracks.">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: inline-grid;
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
grid: 1px auto 2px / 3px auto 4px;
|
||||
border: solid 1px;
|
||||
margin: 0 20px 20px 0;
|
||||
place-items: start;
|
||||
}
|
||||
.item {
|
||||
background: cyan;
|
||||
grid-area: 2/2;
|
||||
}
|
||||
.content {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
}
|
||||
.min {
|
||||
min-height: 100%;
|
||||
min-width: 100%;
|
||||
}
|
||||
.max {
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
.size {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.hl .item { writing-mode: horizontal-tb; direction:ltr; }
|
||||
.hr .item { writing-mode: horizontal-tb; direction:rtl; }
|
||||
.vrl .item { writing-mode: vertical-rl; direction:ltr; }
|
||||
.vrr .item { writing-mode: vertical-rl; direction:rtl; }
|
||||
.vll .item { writing-mode: vertical-lr; direction:ltr; }
|
||||
.vlr .item { writing-mode: vertical-lr; direction:rtl; }
|
||||
.sll .item { writing-mode: sideways-lr; direction:ltr; }
|
||||
.slr .item { writing-mode: sideways-lr; direction:rtl; }
|
||||
|
||||
</style>
|
||||
<div class="hl">
|
||||
<div class="grid">
|
||||
<div class="item max">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item max size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min max">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min max size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="vrl">
|
||||
<div class="grid">
|
||||
<div class="item max">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item max size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min max">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min max size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="vrr">
|
||||
<div class="grid">
|
||||
<div class="item max">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item max size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min max">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min max size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="vll">
|
||||
<div class="grid">
|
||||
<div class="item max">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item max size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min max">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min max size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="vlr">
|
||||
<div class="grid">
|
||||
<div class="item max">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item max size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min max">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min max size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="slr">
|
||||
<div class="grid">
|
||||
<div class="item max">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item max size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min max">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min max size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="srl">
|
||||
<div class="grid">
|
||||
<div class="item max">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item max size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min max">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min max size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,312 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Reference: item [min-|max-]*[width|height] percentages</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: inline-grid;
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
grid: 1px auto 2px 3px / 3px auto 4px 2px;
|
||||
border: solid 1px;
|
||||
margin: 0 20px 20px 0;
|
||||
place-items: start;
|
||||
}
|
||||
.item {
|
||||
background: cyan;
|
||||
grid-area: 2/2/span 2/span 2;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
}
|
||||
.content {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
}
|
||||
.min {
|
||||
height: 6px;
|
||||
width: 5px;
|
||||
}
|
||||
.min:not(.max):not(.size) {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
.hl .item { writing-mode: horizontal-tb; direction:ltr; }
|
||||
.hr .item { writing-mode: horizontal-tb; direction:rtl; }
|
||||
.vrl .item { writing-mode: vertical-rl; direction:ltr; }
|
||||
.vrr .item { writing-mode: vertical-rl; direction:rtl; }
|
||||
.vll .item { writing-mode: vertical-lr; direction:ltr; }
|
||||
.vlr .item { writing-mode: vertical-lr; direction:rtl; }
|
||||
.sll .item { writing-mode: sideways-lr; direction:ltr; }
|
||||
.slr .item { writing-mode: sideways-lr; direction:rtl; }
|
||||
|
||||
</style>
|
||||
<div class="hl">
|
||||
<div class="grid">
|
||||
<div class="item max">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item max size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min max">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min max size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="vrl">
|
||||
<div class="grid">
|
||||
<div class="item max">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item max size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min max">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min max size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="vrr">
|
||||
<div class="grid">
|
||||
<div class="item max">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item max size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min max">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min max size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="vll">
|
||||
<div class="grid">
|
||||
<div class="item max">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item max size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min max">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min max size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="vlr">
|
||||
<div class="grid">
|
||||
<div class="item max">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item max size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min max">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min max size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="slr">
|
||||
<div class="grid">
|
||||
<div class="item max">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item max size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min max">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min max size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="srl">
|
||||
<div class="grid">
|
||||
<div class="item max">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item max size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min max">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min max size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,318 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: item [min-|max-]*[width|height] percentages</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-grid-1">
|
||||
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1526567">
|
||||
<link rel="match" href="grid-item-percentage-sizes-002-ref.html">
|
||||
<meta name="assert" content="Checks that item [min-|max-]*[width|height] percentages are resolved correctly in span=2 auto tracks.">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: inline-grid;
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
grid: 1px auto 2px 3px / 3px auto 4px 2px;
|
||||
border: solid 1px;
|
||||
margin: 0 20px 20px 0;
|
||||
place-items: start;
|
||||
}
|
||||
.item {
|
||||
background: cyan;
|
||||
grid-area: 2/2/span 2/span 2;
|
||||
}
|
||||
.content {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
}
|
||||
.min {
|
||||
min-height: 100%;
|
||||
min-width: 100%;
|
||||
}
|
||||
.max {
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
.size {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.hl .item { writing-mode: horizontal-tb; direction:ltr; }
|
||||
.hr .item { writing-mode: horizontal-tb; direction:rtl; }
|
||||
.vrl .item { writing-mode: vertical-rl; direction:ltr; }
|
||||
.vrr .item { writing-mode: vertical-rl; direction:rtl; }
|
||||
.vll .item { writing-mode: vertical-lr; direction:ltr; }
|
||||
.vlr .item { writing-mode: vertical-lr; direction:rtl; }
|
||||
.sll .item { writing-mode: sideways-lr; direction:ltr; }
|
||||
.slr .item { writing-mode: sideways-lr; direction:rtl; }
|
||||
|
||||
</style>
|
||||
<div class="hl">
|
||||
<div class="grid">
|
||||
<div class="item max">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item max size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min max">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min max size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="vrl">
|
||||
<div class="grid">
|
||||
<div class="item max">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item max size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min max">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min max size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="vrr">
|
||||
<div class="grid">
|
||||
<div class="item max">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item max size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min max">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min max size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="vll">
|
||||
<div class="grid">
|
||||
<div class="item max">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item max size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min max">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min max size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="vlr">
|
||||
<div class="grid">
|
||||
<div class="item max">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item max size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min max">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min max size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="slr">
|
||||
<div class="grid">
|
||||
<div class="item max">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item max size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min max">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min max size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="srl">
|
||||
<div class="grid">
|
||||
<div class="item max">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item max size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min max">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min max size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,316 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Reference: item [min-|max-]*[width|height] calc() percentages</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: inline-grid;
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
grid: 1px auto 2px / 3px auto 4px;
|
||||
border: solid 1px;
|
||||
margin: 0 20px 20px 0;
|
||||
place-items: start;
|
||||
}
|
||||
.item {
|
||||
background: cyan;
|
||||
grid-area: 2/2;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
}
|
||||
.content {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
}
|
||||
.min {
|
||||
height: 9px;
|
||||
width: 5px;
|
||||
}
|
||||
.min:not(.max):not(.size) {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
}
|
||||
.size:not(.min) {
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
}
|
||||
|
||||
.hl .item { writing-mode: horizontal-tb; direction:ltr; }
|
||||
.hr .item { writing-mode: horizontal-tb; direction:rtl; }
|
||||
.vrl .item { writing-mode: vertical-rl; direction:ltr; }
|
||||
.vrr .item { writing-mode: vertical-rl; direction:rtl; }
|
||||
.vll .item { writing-mode: vertical-lr; direction:ltr; }
|
||||
.vlr .item { writing-mode: vertical-lr; direction:rtl; }
|
||||
.sll .item { writing-mode: sideways-lr; direction:ltr; }
|
||||
.slr .item { writing-mode: sideways-lr; direction:rtl; }
|
||||
|
||||
</style>
|
||||
<div class="hl">
|
||||
<div class="grid">
|
||||
<div class="item max">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item max size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min max">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min max size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="vrl">
|
||||
<div class="grid">
|
||||
<div class="item max">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item max size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min max">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min max size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="vrr">
|
||||
<div class="grid">
|
||||
<div class="item max">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item max size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min max">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min max size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="vll">
|
||||
<div class="grid">
|
||||
<div class="item max">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item max size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min max">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min max size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="vlr">
|
||||
<div class="grid">
|
||||
<div class="item max">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item max size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min max">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min max size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="slr">
|
||||
<div class="grid">
|
||||
<div class="item max">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item max size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min max">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min max size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="srl">
|
||||
<div class="grid">
|
||||
<div class="item max">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item max size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min max">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min max size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,318 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: item [min-|max-]*[width|height] calc() percentages</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-grid-1">
|
||||
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1526567">
|
||||
<link rel="match" href="grid-item-percentage-sizes-003-ref.html">
|
||||
<meta name="assert" content="Checks that item [min-|max-]*[width|height] percentages are resolved correctly in span=1 auto tracks.">
|
||||
<style>
|
||||
html,body {
|
||||
color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: inline-grid;
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
grid: 1px auto 2px / 3px auto 4px;
|
||||
border: solid 1px;
|
||||
margin: 0 20px 20px 0;
|
||||
place-items: start;
|
||||
}
|
||||
.item {
|
||||
background: cyan;
|
||||
grid-area: 2/2;
|
||||
}
|
||||
.content {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
}
|
||||
.min {
|
||||
min-height: calc(2px + 100%);
|
||||
min-width: calc(2px + 100%);
|
||||
}
|
||||
.max {
|
||||
max-height: calc(2px + 100%);
|
||||
max-width: calc(2px + 100%);
|
||||
}
|
||||
.size {
|
||||
height: calc(2px + 100%);
|
||||
width: calc(2px + 100%);
|
||||
}
|
||||
|
||||
.hl .item { writing-mode: horizontal-tb; direction:ltr; }
|
||||
.hr .item { writing-mode: horizontal-tb; direction:rtl; }
|
||||
.vrl .item { writing-mode: vertical-rl; direction:ltr; }
|
||||
.vrr .item { writing-mode: vertical-rl; direction:rtl; }
|
||||
.vll .item { writing-mode: vertical-lr; direction:ltr; }
|
||||
.vlr .item { writing-mode: vertical-lr; direction:rtl; }
|
||||
.sll .item { writing-mode: sideways-lr; direction:ltr; }
|
||||
.slr .item { writing-mode: sideways-lr; direction:rtl; }
|
||||
|
||||
</style>
|
||||
<div class="hl">
|
||||
<div class="grid">
|
||||
<div class="item max">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item max size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min max">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min max size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="vrl">
|
||||
<div class="grid">
|
||||
<div class="item max">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item max size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min max">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min max size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="vrr">
|
||||
<div class="grid">
|
||||
<div class="item max">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item max size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min max">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min max size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="vll">
|
||||
<div class="grid">
|
||||
<div class="item max">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item max size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min max">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min max size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="vlr">
|
||||
<div class="grid">
|
||||
<div class="item max">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item max size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min max">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min max size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="slr">
|
||||
<div class="grid">
|
||||
<div class="item max">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item max size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min max">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min max size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="srl">
|
||||
<div class="grid">
|
||||
<div class="item max">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item max size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min max">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item min max size">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -97,14 +97,12 @@ input[orient="vertical"] {
|
|||
<input type="range" class="mb" orient="vertical">
|
||||
</div></div>
|
||||
|
||||
<div class="grid" style="grid: min-content / auto">
|
||||
<input type="range" class="b" orient="vertical" style="height:50%; grid-area:1/1">
|
||||
<input type="range" class="b" orient="vertical" style="visibility:hidden; grid-area:1/1">
|
||||
<div class="grid" style="grid: 4px / auto">
|
||||
<input type="range" class="mb" orient="vertical" style="height:2px">
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid: min-content / auto">
|
||||
<input type="range" class="b" orient="vertical" style="height:50%; grid-area:1/1">
|
||||
<input type="range" class="b" orient="vertical" style="visibility:hidden; grid-area:1/1">
|
||||
<div class="grid" style="grid: 30px / auto">
|
||||
<input type="range" class="b" orient="vertical" style="height:15px">
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid: 30px / auto">
|
||||
|
|
@ -119,14 +117,12 @@ input[orient="vertical"] {
|
|||
<input type="range" class="mb n" orient="vertical">
|
||||
</div></div>
|
||||
|
||||
<div class="grid" style="grid: min-content / auto">
|
||||
<input type="range" class="b" orient="vertical" style="height:50%; grid-area:1/1">
|
||||
<input type="range" class="b" orient="vertical" style="visibility:hidden; grid-area:1/1">
|
||||
<div class="grid" style="grid: 4px / auto">
|
||||
<input type="range" class="mb n" orient="vertical" style="height:2px">
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid: min-content / auto">
|
||||
<input type="range" class="b" orient="vertical" style="height:50%; grid-area:1/1">
|
||||
<input type="range" class="b" orient="vertical" style="visibility:hidden; grid-area:1/1">
|
||||
<div class="grid" style="grid: 30px / auto">
|
||||
<input type="range" class="b" orient="vertical" style="height:15px">
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid: 30px / auto">
|
||||
|
|
|
|||
|
|
@ -71,9 +71,8 @@ input[orient="vertical"] {
|
|||
<input type="range" class="mb" orient="vertical">
|
||||
</div></div>
|
||||
|
||||
<div class="grid" style="grid: min-content / auto">
|
||||
<input type="range" class="b" orient="vertical" style="height:50%; grid-area:1/1">
|
||||
<input type="range" class="b" orient="vertical" style="visibility:hidden; grid-area:1/1">
|
||||
<div class="grid" style="grid: 30px / auto">
|
||||
<input type="range" class="b" orient="vertical" style="height:15px">
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid: 30px / auto">
|
||||
|
|
|
|||
|
|
@ -706,18 +706,6 @@ nsresult nsLookAndFeel::GetIntImpl(IntID aID, int32_t& aResult) {
|
|||
aResult = enableAnimations ? 0 : 1;
|
||||
break;
|
||||
}
|
||||
case eIntID_SystemUsesDarkTheme: {
|
||||
// It seems GTK doesn't have an API to query if the current theme is
|
||||
// "light" or "dark", so we synthesize it from the CSS2 Window/WindowText
|
||||
// colors instead, by comparing their luminosity.
|
||||
nscolor fg, bg;
|
||||
if (NS_SUCCEEDED(NativeGetColor(eColorID_windowtext, fg)) &&
|
||||
NS_SUCCEEDED(NativeGetColor(eColorID_window, bg))) {
|
||||
aResult = NS_GetLuminosity(bg) < NS_GetLuminosity(fg) ? 1 : 0;
|
||||
break;
|
||||
}
|
||||
MOZ_FALLTHROUGH;
|
||||
}
|
||||
default:
|
||||
aResult = 0;
|
||||
res = NS_ERROR_FAILURE;
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче