mozilla
/
gecko-dev
зеркало из https://github.com/mozilla/gecko-dev.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

Bug 642667 - Let authors set the progress bar's width when in indeterminate state. r=dbaron

This commit is contained in:
Mounir Lamouri 2011-05-06 11:56:47 +02:00
Родитель 0dd3683a08
Коммит 2131697e88
6 изменённых файлов: 77 добавлений и 5 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

19
layout/forms/nsProgressFrame.cpp
Просмотреть файл

@ -210,11 +210,20 @@ nsProgressFrame::ReflowBarFrame(nsIFrame* aBarFrame,
xoffset += aReflowState.ComputedWidth() - width;
}
// We want the frame to take all the available size.
width -= reflowState.mComputedMargin.LeftRight() +
reflowState.mComputedBorderPadding.LeftRight();
width = NS_MAX(width, 0);
reflowState.SetComputedWidth(width);
// The bar width is fixed in these cases:
// - the progress position is determined: the bar width is fixed according
// to it's value.
// - the progress position is indeterminate and the bar appearance is the
// native one ('progresschunk'): the bar width is forced to 100%.
// Otherwise (when the progress is indeterminate and the bar appearance isn't
// native), the bar width isn't fixed and can be set by the author.
if (position != -1 ||
aBarFrame->GetStyleDisplay()->mAppearance == NS_THEME_PROGRESSBAR_CHUNK) {
width -= reflowState.mComputedMargin.LeftRight() +
reflowState.mComputedBorderPadding.LeftRight();
width = NS_MAX(width, 0);
reflowState.SetComputedWidth(width);
}
xoffset += reflowState.mComputedMargin.left;
yoffset += reflowState.mComputedMargin.top;

37
layout/reftests/forms/progress/indeterminate-style-width-ref.html Normal file
Просмотреть файл

@ -0,0 +1,37 @@
<!DOCTYPE html>
<html>
<link rel='stylesheet' type='text/css' href='style.css'>
<style>
div.progress-bar {
width:100%;
}
body > div:nth-child(1) > .progress-bar { width: 20px; }
body > div:nth-child(2) > .progress-bar { width: 0px; }
body > div:nth-child(3) > .progress-bar { width: 50%; }
body > div:nth-child(4) > .progress-bar { width: 1em; }
body > div:nth-child(5) > .progress-bar { width: 100%; }
</style>
<body>
<div class="progress-element">
<div class="progress-bar">
</div>
</div>
<div class="progress-element">
<div class="progress-bar">
</div>
</div>
<div class="progress-element">
<div class="progress-bar">
</div>
</div>
<div class="progress-element">
<div class="progress-bar">
</div>
</div>
<div class="progress-element">
<div class="progress-bar">
</div>
</div>
</body>
</html>

19
layout/reftests/forms/progress/indeterminate-style-width.html Normal file
Просмотреть файл

@ -0,0 +1,19 @@
<!DOCTYPE html>
<html>
<link rel='stylesheet' type='text/css' href='style.css'>
<style>
body > progress:nth-child(1)::-moz-progress-bar { width: 20px; }
body > progress:nth-child(2)::-moz-progress-bar { width: 0px; }
body > progress:nth-child(3)::-moz-progress-bar { width: 50%; }
body > progress:nth-child(4)::-moz-progress-bar { width: 1em; }
/* last one is for the default value: width=100%. */
</style>
<body>
<!-- Those will be used to change padding/margin on ::-moz-progress-bar -->
<progress></progress>
<progress></progress>
<progress></progress>
<progress></progress>
<progress></progress>
</body>
</html>

1
layout/reftests/forms/progress/reftest.list
Просмотреть файл

@ -4,6 +4,7 @@
== margin-padding-rtl.html margin-padding-rtl-ref.html
== bar-pseudo-element.html bar-pseudo-element-ref.html
== bar-pseudo-element-rtl.html bar-pseudo-element-rtl-ref.html
== indeterminate-style-width.html indeterminate-style-width-ref.html
# The following test is disabled but kept in the repository because the
# transformations will not behave exactly the same for <progress> and two divs.

5
layout/reftests/forms/progress/style.css
Просмотреть файл

@ -17,6 +17,11 @@ div.progress-element {
div.progress-bar {
-moz-appearance: progresschunk;
height: 100%;
/*
* We can't apply the following style to the reference because it will have
* underisable effectes:
* width: 100%;
*/
/* Default style in case of there is -moz-appearance: none; */
background-color: ThreeDShadow;

1
layout/style/forms.css
Просмотреть файл

@ -691,6 +691,7 @@ progress {
-moz-appearance: progresschunk;
height: 100%;
width: 100%;
/* Default style in case of there is -moz-appearance: none; */
background-color: ThreeDShadow;