Bug 661113 - Progress bars with -moz-orient: vertical should have vertical dimensions by default. r=roc

This commit is contained in:
Mounir Lamouri 2011-06-01 12:27:46 +02:00
Родитель 5816bc1751
Коммит 5190eb69d2
8 изменённых файлов: 101 добавлений и 88 удалений

Просмотреть файл

@ -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>