зеркало из https://github.com/mozilla/gecko-dev.git
Bug 661113 - Progress bars with -moz-orient: vertical should have vertical dimensions by default. r=roc
This commit is contained in:
Родитель
5816bc1751
Коммит
5190eb69d2
|
@ -266,7 +266,12 @@ nsProgressFrame::ComputeAutoSize(nsRenderingContext *aRenderingContext,
|
|||
|
||||
nsSize autoSize;
|
||||
autoSize.height = autoSize.width = fontMet->Font().size; // 1em
|
||||
autoSize.width *= 10; // 10em
|
||||
|
||||
if (GetStyleDisplay()->mOrient == NS_STYLE_ORIENT_VERTICAL) {
|
||||
autoSize.height *= 10; // 10em
|
||||
} else {
|
||||
autoSize.width *= 10; // 10em
|
||||
}
|
||||
|
||||
return autoSize;
|
||||
}
|
||||
|
|
|
@ -18,70 +18,71 @@
|
|||
body > div:nth-child(11) > .progress-bar { }
|
||||
/* 12 - 15 should have 100% width, no need to specify. */
|
||||
body > div:nth-child(16) > .progress-bar { position: relative; top: 64px; left: 64px;
|
||||
height: -moz-calc(100% + 128px - 1em); }
|
||||
height: -moz-calc(100% - 32px);
|
||||
width: -moz-calc(100% + 128px - 1em); }
|
||||
</style>
|
||||
<body>
|
||||
<div class="progress-element">
|
||||
<div class="progress-element vertical">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-element vertical">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-element vertical">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-element vertical">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-element vertical">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-element vertical">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-element vertical">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-element vertical">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-element vertical">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-element vertical">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-element vertical">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-element vertical">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-element vertical">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-element vertical">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-element vertical">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-element vertical">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -17,71 +17,73 @@
|
|||
body > div:nth-child(10) > .progress-bar { }
|
||||
body > div:nth-child(11) > .progress-bar { }
|
||||
/* 12 - 15 should have 100% width, no need to specify. */
|
||||
body > div:nth-child(16) > .progress-bar { position: relative; top: 64px; left: 64px;
|
||||
height: -moz-calc(100% + 128px - 1em); }
|
||||
body > div:nth-child(16) > .progress-bar { position: relative; top: 64px;
|
||||
left: -moz-calc(100% + 128px + 32px );
|
||||
height: -moz-calc(100% - 32px);
|
||||
width: -moz-calc(100% + 128px - 1em); }
|
||||
</style>
|
||||
<body dir='rtl'>
|
||||
<div class="progress-element">
|
||||
<div class="progress-element vertical">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-element vertical">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-element vertical">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-element vertical">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-element vertical">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-element vertical">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-element vertical">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-element vertical">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-element vertical">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-element vertical">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-element vertical">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-element vertical">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-element vertical">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-element vertical">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-element vertical">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-element vertical">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -20,67 +20,67 @@
|
|||
body > div:nth-child(16) { margin: 2px 4px 6px 8px; padding: 0px; }
|
||||
</style>
|
||||
<body>
|
||||
<div class="progress-element">
|
||||
<div class="progress-element vertical">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-element vertical">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-element vertical">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-element vertical">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-element vertical">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-element vertical">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-element vertical">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-element vertical">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-element vertical">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-element vertical">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-element vertical">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-element vertical">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-element vertical">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-element vertical">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-element vertical">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-element vertical">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -20,67 +20,67 @@
|
|||
body > div:nth-child(16) { margin: 2px 4px 6px 8px; padding: 0px; }
|
||||
</style>
|
||||
<body dir='rtl'>
|
||||
<div class="progress-element">
|
||||
<div class="progress-element vertical">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-element vertical">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-element vertical">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-element vertical">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-element vertical">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-element vertical">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-element vertical">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-element vertical">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-element vertical">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-element vertical">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-element vertical">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-element vertical">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-element vertical">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-element vertical">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-element vertical">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-element vertical">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -14,6 +14,11 @@ div.progress-element {
|
|||
background-color: #e6e6e6;
|
||||
}
|
||||
|
||||
div.progress-element.vertical {
|
||||
height: 10em;
|
||||
width: 1em;
|
||||
}
|
||||
|
||||
div.progress-bar {
|
||||
-moz-appearance: progresschunk;
|
||||
height: 100%;
|
||||
|
|
|
@ -14,43 +14,43 @@
|
|||
div:nth-child(10) > .progress-bar { position: relative; top: 90%; height: 10%; }
|
||||
</style>
|
||||
<body>
|
||||
<div class="progress-element">
|
||||
<div class="progress-element vertical">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-element vertical">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-element vertical">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-element vertical">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-element vertical">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-element vertical">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-element vertical">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-element vertical">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-element vertical">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-element vertical">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -14,43 +14,43 @@
|
|||
div:nth-child(10) > .progress-bar { position: relative; top: 90%; height: 10%; }
|
||||
</style>
|
||||
<body dir='rtl'>
|
||||
<div class="progress-element">
|
||||
<div class="progress-element vertical">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-element vertical">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-element vertical">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-element vertical">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-element vertical">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-element vertical">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-element vertical">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-element vertical">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-element vertical">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-element">
|
||||
<div class="progress-element vertical">
|
||||
<div class="progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
|
|
Загрузка…
Ссылка в новой задаче