wuggy/Dactyloidae
wuggy/Dactyloidae
1
0
Fork 0
mirror of https://repo.dactyloidae.xyz/Dactyloidae/UXP.git synced 2026-09-07 16:28:38 +09:00
Code Issues Projects Releases Packages Wiki Activity

import FIREFOX_52_6_0esr_RELEASE from mozilla-esr52 hg repo

Browse source
This commit is contained in:
Roy Tam 2018-01-19 03:59:58 +08:00
commit dcd9973243
150858 changed files with 23884658 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

105
layout/reftests/forms/progress/bar-pseudo-element-ref.html Normal file
View file

@ -0,0 +1,105 @@
<!DOCTYPE html>
<html>
<link rel='stylesheet' type='text/css' href='style.css'>
<style>
body > div:nth-child(1) > .progress-bar { margin: 10px; padding: 0px; }
body > div:nth-child(2) > .progress-bar { margin: 0px; padding: 10px; }
body > div:nth-child(3) > .progress-bar { margin: 10px; padding: 10px; }
body > div:nth-child(4) > .progress-bar { margin: 5px; padding: 5px; }
body > div:nth-child(5) > .progress-bar { margin: 50px; padding: 50px; }
body > div:nth-child(6) > .progress-bar { margin: 100px; padding: 100px; }
body > div:nth-child(7) > .progress-bar { margin: 10px 0px 0px 0px; padding: 0px; }
body > div:nth-child(8) > .progress-bar { margin: 0px 10px 0px 0px; padding: 0px; }
body > div:nth-child(9) > .progress-bar { margin: 0px 0px 10px 0px; padding: 0px; }
body > div:nth-child(10) > .progress-bar { margin: 0px 0px 0px 10px; padding: 0px; }
body > div:nth-child(11) > .progress-bar { margin: 0px; padding: 10px 0px 0px 0px; }
body > div:nth-child(12) > .progress-bar { margin: 0px; padding: 0px 10px 0px 0px; }
body > div:nth-child(13) > .progress-bar { margin: 0px; padding: 0px 0px 10px 0px; }
body > div:nth-child(14) > .progress-bar { margin: 0px; padding: 0px 0px 0px 10px; }
body > div:nth-child(15) > .progress-bar { margin: 200px; padding: 0px; }
body > div:nth-child(16) > .progress-bar { margin: 0px; padding: 200px; }
/* 15 - 18 should have 100% width, no need to specify. */
</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>
<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>
<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>
<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>

45
layout/reftests/forms/progress/bar-pseudo-element-rtl-ref.html Normal file
View file

@ -0,0 +1,45 @@
<!DOCTYPE html>
<html>
<link rel='stylesheet' type='text/css' href='style.css'>
<style>
body > div:nth-child(1) > .progress-bar { margin: 0px 10px 0px 0px; padding: 0px; }
body > div:nth-child(2) > .progress-bar { margin: 0px 0px 0px 10px; padding: 0px; }
body > div:nth-child(3) > .progress-bar { margin: 0px; padding: 0px 10px 0px 0px; }
body > div:nth-child(4) > .progress-bar { margin: 0px; padding: 0px 0px 0px 10px; }
/* 15 - 18 should have 100% width, no need to specify. */
</style>
<body dir='rtl'>
<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>
<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>

26
layout/reftests/forms/progress/bar-pseudo-element-rtl.html Normal file
View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<html>
<link rel='stylesheet' type='text/css' href='style.css'>
<style>
body > progress:nth-child(1)::-moz-progress-bar { margin: 0px 10px 0px 0px; padding: 0px; }
body > progress:nth-child(2)::-moz-progress-bar { margin: 0px 0px 0px 10px; padding: 0px; }
body > progress:nth-child(3)::-moz-progress-bar { margin: 0px; padding: 0px 10px 0px 0px; }
body > progress:nth-child(4)::-moz-progress-bar { margin: 0px; padding: 0px 0px 0px 10px; }
body > progress:nth-child(5)::-moz-progress-bar { width: 1000px; }
body > progress:nth-child(6)::-moz-progress-bar { width: 10px; }
body > progress:nth-child(7)::-moz-progress-bar { width: 10%; }
body > progress:nth-child(8)::-moz-progress-bar { width: 200%; }
</style>
<body dir='rtl'>
<!-- Those will be used to change padding/margin on ::-moz-progress-bar -->
<progress value='1'></progress>
<progress value='1'></progress>
<progress value='1'></progress>
<progress value='1'></progress>
<!-- Those will be used to change width. -->
<progress value='1'></progress>
<progress value='1'></progress>
<progress value='1'></progress>
<progress value='1'></progress>
</body>
</html>

90
layout/reftests/forms/progress/bar-pseudo-element-vertical-ref.html Normal file
View file

@ -0,0 +1,90 @@
<!DOCTYPE html>
<html>
<link rel='stylesheet' type='text/css' href='style.css'>
<style>
.progress-element { margin: 10px; }
body > div:nth-child(1) > .progress-bar { position: relative; top: 4px; left: 4px;
height: -moz-calc(100% - 8px); }
body > div:nth-child(2) > .progress-bar { }
body > div:nth-child(3) > .progress-bar { position: relative; top: 4px; left: 4px;
height: -moz-calc(100% - 8px); }
body > div:nth-child(4) > .progress-bar { position: relative; top: 10px; height: -moz-calc(100% - 10px); }
body > div:nth-child(5) > .progress-bar { }
body > div:nth-child(6) > .progress-bar { height: -moz-calc(100% - 10px); }
body > div:nth-child(7) > .progress-bar { position: relative; left: 10px; }
body > div:nth-child(8) > .progress-bar { }
body > div:nth-child(9) > .progress-bar { }
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-of-type(16) > .progress-bar { position: relative; top: 64px; left: 64px;
height: -moz-calc(100% - 32px);
width: -moz-calc(100% + 128px - 1em); }
</style>
<body>
<div class="progress-element vertical">
<div class="progress-bar">
</div>
</div>
<div class="progress-element vertical">
<div class="progress-bar">
</div>
</div>
<div class="progress-element vertical">
<div class="progress-bar">
</div>
</div>
<div class="progress-element vertical">
<div class="progress-bar">
</div>
</div>
<div class="progress-element vertical">
<div class="progress-bar">
</div>
</div>
<div class="progress-element vertical">
<div class="progress-bar">
</div>
</div>
<div class="progress-element vertical">
<div class="progress-bar">
</div>
</div>
<div class="progress-element vertical">
<div class="progress-bar">
</div>
</div>
<div class="progress-element vertical">
<div class="progress-bar">
</div>
</div>
<div class="progress-element vertical">
<div class="progress-bar">
</div>
</div>
<div class="progress-element vertical">
<div class="progress-bar">
</div>
</div>
<div class="progress-element vertical">
<div class="progress-bar">
</div>
</div>
<div class="progress-element vertical">
<div class="progress-bar">
</div>
</div>
<div class="progress-element vertical">
<div class="progress-bar">
</div>
</div>
<div class="progress-element vertical">
<div class="progress-bar">
</div>
</div>
<br><div class="progress-element vertical">
<div class="progress-bar">
</div>
</div>
</body>
</html>

91
layout/reftests/forms/progress/bar-pseudo-element-vertical-rtl-ref.html Normal file
View file

@ -0,0 +1,91 @@
<!DOCTYPE html>
<html>
<link rel='stylesheet' type='text/css' href='style.css'>
<style>
.progress-element { margin: 10px; }
body > div:nth-child(1) > .progress-bar { position: relative; top: 4px; left: 4px;
height: -moz-calc(100% - 8px); }
body > div:nth-child(2) > .progress-bar { }
body > div:nth-child(3) > .progress-bar { position: relative; top: 4px; left: 4px;
height: -moz-calc(100% - 8px); }
body > div:nth-child(4) > .progress-bar { position: relative; top: 10px; height: -moz-calc(100% - 10px); }
body > div:nth-child(5) > .progress-bar { }
body > div:nth-child(6) > .progress-bar { height: -moz-calc(100% - 10px); }
body > div:nth-child(7) > .progress-bar { position: relative; left: 10px; }
body > div:nth-child(8) > .progress-bar { }
body > div:nth-child(9) > .progress-bar { }
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-of-type(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 vertical">
<div class="progress-bar">
</div>
</div>
<div class="progress-element vertical">
<div class="progress-bar">
</div>
</div>
<div class="progress-element vertical">
<div class="progress-bar">
</div>
</div>
<div class="progress-element vertical">
<div class="progress-bar">
</div>
</div>
<div class="progress-element vertical">
<div class="progress-bar">
</div>
</div>
<div class="progress-element vertical">
<div class="progress-bar">
</div>
</div>
<div class="progress-element vertical">
<div class="progress-bar">
</div>
</div>
<div class="progress-element vertical">
<div class="progress-bar">
</div>
</div>
<div class="progress-element vertical">
<div class="progress-bar">
</div>
</div>
<div class="progress-element vertical">
<div class="progress-bar">
</div>
</div>
<div class="progress-element vertical">
<div class="progress-bar">
</div>
</div>
<div class="progress-element vertical">
<div class="progress-bar">
</div>
</div>
<div class="progress-element vertical">
<div class="progress-bar">
</div>
</div>
<div class="progress-element vertical">
<div class="progress-bar">
</div>
</div>
<div class="progress-element vertical">
<div class="progress-bar">
</div>
</div>
<br><div class="progress-element vertical">
<div class="progress-bar">
</div>
</div>
</body>
</html>

46
layout/reftests/forms/progress/bar-pseudo-element-vertical-rtl.html Normal file
View file

@ -0,0 +1,46 @@
<!DOCTYPE html>
<html>
<link rel='stylesheet' type='text/css' href='style.css'>
<style>
progress {
margin: 10px;
-moz-orient: vertical;
}
body > progress:nth-child(1)::-moz-progress-bar { margin: 4px; padding: 0px; }
body > progress:nth-child(2)::-moz-progress-bar { margin: 0px; padding: 4px; }
body > progress:nth-child(3)::-moz-progress-bar { margin: 4px; padding: 4px; }
body > progress:nth-child(4)::-moz-progress-bar { margin: 10px 0px 0px 0px; padding: 0px; }
body > progress:nth-child(5)::-moz-progress-bar { margin: 0px 10px 0px 0px; padding: 0px; }
body > progress:nth-child(6)::-moz-progress-bar { margin: 0px 0px 10px 0px; padding: 0px; }
body > progress:nth-child(7)::-moz-progress-bar { margin: 0px 0px 0px 10px; padding: 0px; }
body > progress:nth-child(8)::-moz-progress-bar { margin: 0px; padding: 10px 0px 0px 0px; }
body > progress:nth-child(9)::-moz-progress-bar { margin: 0px; padding: 0px 10px 0px 0px; }
body > progress:nth-child(10)::-moz-progress-bar { margin: 0px; padding: 0px 0px 10px 0px; }
body > progress:nth-child(11)::-moz-progress-bar { margin: 0px; padding: 0px 0px 0px 10px; }
body > progress:nth-child(12)::-moz-progress-bar { height: 1000px; }
body > progress:nth-child(13)::-moz-progress-bar { height: 10px; }
body > progress:nth-child(14)::-moz-progress-bar { height: 10%; }
body > progress:nth-child(15)::-moz-progress-bar { height: 200%; }
body > progress:nth-of-type(16)::-moz-progress-bar { margin: 64px; padding: 64px; }
</style>
<body dir='rtl'>
<!-- Those will be used to change padding/margin on ::-moz-progress-bar -->
<progress value='1'></progress>
<progress value='1'></progress>
<progress value='1'></progress>
<progress value='1'></progress>
<progress value='1'></progress>
<progress value='1'></progress>
<progress value='1'></progress>
<progress value='1'></progress>
<progress value='1'></progress>
<progress value='1'></progress>
<progress value='1'></progress>
<progress value='1'></progress>
<!-- Those will be used to change width. -->
<progress value='1'></progress>
<progress value='1'></progress>
<progress value='1'></progress>
<br><progress value='1'></progress>
</body>
</html>

46
layout/reftests/forms/progress/bar-pseudo-element-vertical.html Normal file
View file

@ -0,0 +1,46 @@
<!DOCTYPE html>
<html>
<link rel='stylesheet' type='text/css' href='style.css'>
<style>
progress {
margin: 10px;
-moz-orient: vertical;
}
body > progress:nth-child(1)::-moz-progress-bar { margin: 4px; padding: 0px; }
body > progress:nth-child(2)::-moz-progress-bar { margin: 0px; padding: 4px; }
body > progress:nth-child(3)::-moz-progress-bar { margin: 4px; padding: 4px; }
body > progress:nth-child(4)::-moz-progress-bar { margin: 10px 0px 0px 0px; padding: 0px; }
body > progress:nth-child(5)::-moz-progress-bar { margin: 0px 10px 0px 0px; padding: 0px; }
body > progress:nth-child(6)::-moz-progress-bar { margin: 0px 0px 10px 0px; padding: 0px; }
body > progress:nth-child(7)::-moz-progress-bar { margin: 0px 0px 0px 10px; padding: 0px; }
body > progress:nth-child(8)::-moz-progress-bar { margin: 0px; padding: 10px 0px 0px 0px; }
body > progress:nth-child(9)::-moz-progress-bar { margin: 0px; padding: 0px 10px 0px 0px; }
body > progress:nth-child(10)::-moz-progress-bar { margin: 0px; padding: 0px 0px 10px 0px; }
body > progress:nth-child(11)::-moz-progress-bar { margin: 0px; padding: 0px 0px 0px 10px; }
body > progress:nth-child(12)::-moz-progress-bar { height: 1000px; }
body > progress:nth-child(13)::-moz-progress-bar { height: 10px; }
body > progress:nth-child(14)::-moz-progress-bar { height: 10%; }
body > progress:nth-child(15)::-moz-progress-bar { height: 200%; }
body > progress:nth-of-type(16)::-moz-progress-bar { margin: 64px; padding: 64px; }
</style>
<body>
<!-- Those will be used to change padding/margin on ::-moz-progress-bar -->
<progress value='1'></progress>
<progress value='1'></progress>
<progress value='1'></progress>
<progress value='1'></progress>
<progress value='1'></progress>
<progress value='1'></progress>
<progress value='1'></progress>
<progress value='1'></progress>
<progress value='1'></progress>
<progress value='1'></progress>
<progress value='1'></progress>
<progress value='1'></progress>
<!-- Those will be used to change width. -->
<progress value='1'></progress>
<progress value='1'></progress>
<progress value='1'></progress>
<br><progress value='1'></progress>
</body>
</html>

50
layout/reftests/forms/progress/bar-pseudo-element.html Normal file
View file

@ -0,0 +1,50 @@
<!DOCTYPE html>
<html>
<link rel='stylesheet' type='text/css' href='style.css'>
<style>
body > progress:nth-child(1)::-moz-progress-bar { margin: 10px; padding: 0px; }
body > progress:nth-child(2)::-moz-progress-bar { margin: 0px; padding: 10px; }
body > progress:nth-child(3)::-moz-progress-bar { margin: 10px; padding: 10px; }
body > progress:nth-child(4)::-moz-progress-bar { margin: 5px; padding: 5px; }
body > progress:nth-child(5)::-moz-progress-bar { margin: 50px; padding: 50px; }
body > progress:nth-child(6)::-moz-progress-bar { margin: 100px; padding: 100px; }
body > progress:nth-child(7)::-moz-progress-bar { margin: 10px 0px 0px 0px; padding: 0px; }
body > progress:nth-child(8)::-moz-progress-bar { margin: 0px 10px 0px 0px; padding: 0px; }
body > progress:nth-child(9)::-moz-progress-bar { margin: 0px 0px 10px 0px; padding: 0px; }
body > progress:nth-child(10)::-moz-progress-bar { margin: 0px 0px 0px 10px; padding: 0px; }
body > progress:nth-child(11)::-moz-progress-bar { margin: 0px; padding: 10px 0px 0px 0px; }
body > progress:nth-child(12)::-moz-progress-bar { margin: 0px; padding: 0px 10px 0px 0px; }
body > progress:nth-child(13)::-moz-progress-bar { margin: 0px; padding: 0px 0px 10px 0px; }
body > progress:nth-child(14)::-moz-progress-bar { margin: 0px; padding: 0px 0px 0px 10px; }
body > progress:nth-child(15)::-moz-progress-bar { margin: 200px; padding: 0px; }
body > progress:nth-child(16)::-moz-progress-bar { margin: 0px; padding: 200px; }
body > progress:nth-child(17)::-moz-progress-bar { width: 1000px; }
body > progress:nth-child(18)::-moz-progress-bar { width: 10px; }
body > progress:nth-child(19)::-moz-progress-bar { width: 10%; }
body > progress:nth-child(20)::-moz-progress-bar { width: 200%; }
</style>
<body>
<!-- Those will be used to change padding/margin on ::-moz-progress-bar -->
<progress value='1'></progress>
<progress value='1'></progress>
<progress value='1'></progress>
<progress value='1'></progress>
<progress value='1'></progress>
<progress value='1'></progress>
<progress value='1'></progress>
<progress value='1'></progress>
<progress value='1'></progress>
<progress value='1'></progress>
<progress value='1'></progress>
<progress value='1'></progress>
<progress value='1'></progress>
<progress value='1'></progress>
<progress value='1'></progress>
<progress value='1'></progress>
<!-- Those will be used to change width. -->
<progress value='1'></progress>
<progress value='1'></progress>
<progress value='1'></progress>
<progress value='1'></progress>
</body>
</html>

10
layout/reftests/forms/progress/block-invalidate-ref.html Normal file
View file

@ -0,0 +1,10 @@
<!DOCTYPE html>
<html>
<link rel='stylesheet' type='text/css' href='style.css'>
<style>
progress { display: block; }
</style>
<body>
<progress value='0.5'></progress>
</body>
</html>

19
layout/reftests/forms/progress/block-invalidate.html Normal file
View file

@ -0,0 +1,19 @@
<!DOCTYPE html>
<html class='reftest-wait'>
<link rel='stylesheet' type='text/css' href='style.css'>
<style>
progress { display: block; }
</style>
<script>
function loadHandler() {
setTimeout(function() {
var p = document.getElementsByTagName('progress')[0];
p.value = '0.5';
document.documentElement.className = '';
}, 0);
}
</script>
<body onload="loadHandler();">
<progress value='0'></progress>
</body>
</html>

22
layout/reftests/forms/progress/in-cells-ref.html Normal file
View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<link rel='stylesheet' type='text/css' href='style.css'>
<style>
progress { width: 10em; height: 1em; }
progress.vertical { -moz-orient: vertical; width: 1em; height: 10em; }
</style>
<body>
<table>
<tr>
<td>foo</td>
<td><progress value='0.5'></progress></td>
<td>bar</td>
</tr>
<tr>
<td>foo</td>
<td><progress class='vertical' value='0.5'></progress></td>
<td>bar</td>
</tr>
</table>
</body>
</html>

21
layout/reftests/forms/progress/in-cells.html Normal file
View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html>
<link rel='stylesheet' type='text/css' href='style.css'>
<style>
progress.vertical { -moz-orient: vertical; }
</style>
<body>
<table>
<tr>
<td>foo</td>
<td><progress value='0.5'></progress></td>
<td>bar</td>
</tr>
<tr>
<td>foo</td>
<td><progress class='vertical' value='0.5'></progress></td>
<td>bar</td>
</tr>
</table>
</body>
</html>

46
layout/reftests/forms/progress/indeterminate-style-height-ref.html Normal file
View file

@ -0,0 +1,46 @@
<!DOCTYPE html>
<html>
<link rel='stylesheet' type='text/css' href='style.css'>
<style>
div.progress-element {
height: 12em;
width: 2em;
}
div.progress-bar {
height: 100%;
}
body > div:nth-child(1) > .progress-bar { position: relative;
top: -moz-calc(12em - 20px); height: 20px; }
body > div:nth-child(2) > .progress-bar { position: relative;
top: -moz-calc(12em - 0px); height: 0px; }
body > div:nth-child(3) > .progress-bar { position: relative;
top: -moz-calc(12em - 50%); height: 50%; }
body > div:nth-child(4) > .progress-bar { position: relative;
top: -moz-calc(12em - 1em); height: 1em; }
body > div:nth-child(5) > .progress-bar { position: relative;
top: -moz-calc(12em - 100%); height: 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>

24
layout/reftests/forms/progress/indeterminate-style-height.html Normal file
View file

@ -0,0 +1,24 @@
<!DOCTYPE html>
<html>
<link rel='stylesheet' type='text/css' href='style.css'>
<style>
progress {
-moz-orient: vertical;
height: 12em;
width: 2em;
}
body > progress:nth-child(1)::-moz-progress-bar { height: 20px; }
body > progress:nth-child(2)::-moz-progress-bar { height: 0px; }
body > progress:nth-child(3)::-moz-progress-bar { height: 50%; }
body > progress:nth-child(4)::-moz-progress-bar { height: 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>

37
layout/reftests/forms/progress/indeterminate-style-width-ref.html Normal file
View 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
View 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>

88
layout/reftests/forms/progress/margin-padding-ref.html Normal file
View file

@ -0,0 +1,88 @@
<!DOCTYPE html>
<html>
<link rel='stylesheet' type='text/css' href='style.css'>
<style>
body > div:nth-child(1) { margin: 10px; padding: 0px; }
body > div:nth-child(2) { margin: 0px; padding: 10px; }
body > div:nth-child(3) { margin: 10px; padding: 10px; }
body > div:nth-child(4) { margin: 5px; padding: 5px; }
body > div:nth-child(5) { margin: 50px; padding: 50px; }
body > div:nth-child(6) { margin: 100px; padding: 100px; }
body > div:nth-child(7) { margin: 10px 0px 0px 0px; padding: 0px; }
body > div:nth-child(8) { margin: 0px 10px 0px 0px; padding: 0px; }
body > div:nth-child(9) { margin: 0px 0px 10px 0px; padding: 0px; }
body > div:nth-child(10) { margin: 0px 0px 0px 10px; padding: 0px; }
body > div:nth-child(11) { margin: 0px; padding: 10px 0px 0px 0px; }
body > div:nth-child(12) { margin: 0px; padding: 0px 10px 0px 0px; }
body > div:nth-child(13) { margin: 0px; padding: 0px 0px 10px 0px; }
body > div:nth-child(14) { margin: 0px; padding: 0px 0px 0px 10px; }
body > div:nth-child(15) { margin: 0px; padding: 2px 4px 6px 8px; }
body > div:nth-child(16) { margin: 2px 4px 6px 8px; padding: 0px; }
</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>
<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>
<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>
<div class="progress-element">
<div class="progress-bar">
</div>
</div>
</body>
</html>

88
layout/reftests/forms/progress/margin-padding-rtl-ref.html Normal file
View file

@ -0,0 +1,88 @@
<!DOCTYPE html>
<html>
<link rel='stylesheet' type='text/css' href='style.css'>
<style>
body > div:nth-child(1) { margin: 10px; padding: 0px; }
body > div:nth-child(2) { margin: 0px; padding: 10px; }
body > div:nth-child(3) { margin: 10px; padding: 10px; }
body > div:nth-child(4) { margin: 5px; padding: 5px; }
body > div:nth-child(5) { margin: 50px; padding: 50px; }
body > div:nth-child(6) { margin: 100px; padding: 100px; }
body > div:nth-child(7) { margin: 10px 0px 0px 0px; padding: 0px; }
body > div:nth-child(8) { margin: 0px 10px 0px 0px; padding: 0px; }
body > div:nth-child(9) { margin: 0px 0px 10px 0px; padding: 0px; }
body > div:nth-child(10) { margin: 0px 0px 0px 10px; padding: 0px; }
body > div:nth-child(11) { margin: 0px; padding: 10px 0px 0px 0px; }
body > div:nth-child(12) { margin: 0px; padding: 0px 10px 0px 0px; }
body > div:nth-child(13) { margin: 0px; padding: 0px 0px 10px 0px; }
body > div:nth-child(14) { margin: 0px; padding: 0px 0px 0px 10px; }
body > div:nth-child(15) { margin: 0px; padding: 2px 4px 6px 8px; }
body > div:nth-child(16) { margin: 2px 4px 6px 8px; padding: 0px; }
</style>
<body dir='rtl'>
<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>
<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>
<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>
<div class="progress-element">
<div class="progress-bar">
</div>
</div>
</body>
</html>

40
layout/reftests/forms/progress/margin-padding-rtl.html Normal file
View file

@ -0,0 +1,40 @@
<!DOCTYPE html>
<html>
<link rel='stylesheet' type='text/css' href='style.css'>
<style>
progress:nth-child(1) { margin: 10px; padding: 0px; }
progress:nth-child(2) { margin: 0px; padding: 10px; }
progress:nth-child(3) { margin: 10px; padding: 10px; }
progress:nth-child(4) { margin: 5px; padding: 5px; }
progress:nth-child(5) { margin: 50px; padding: 50px; }
progress:nth-child(6) { margin: 100px; padding: 100px; }
progress:nth-child(7) { margin: 10px 0px 0px 0px; padding: 0px; }
progress:nth-child(8) { margin: 0px 10px 0px 0px; padding: 0px; }
progress:nth-child(9) { margin: 0px 0px 10px 0px; padding: 0px; }
progress:nth-child(10) { margin: 0px 0px 0px 10px; padding: 0px; }
progress:nth-child(11) { margin: 0px; padding: 10px 0px 0px 0px; }
progress:nth-child(12) { margin: 0px; padding: 0px 10px 0px 0px; }
progress:nth-child(13) { margin: 0px; padding: 0px 0px 10px 0px; }
progress:nth-child(14) { margin: 0px; padding: 0px 0px 0px 10px; }
progress:nth-child(15) { margin: 0px; padding: 2px 4px 6px 8px; }
progress:nth-child(16) { margin: 2px 4px 6px 8px; padding: 0px; }
</style>
<body dir='rtl'>
<progress value='1'></progress>
<progress value='1'></progress>
<progress value='1'></progress>
<progress value='1'></progress>
<progress value='1'></progress>
<progress value='1'></progress>
<progress value='1'></progress>
<progress value='1'></progress>
<progress value='1'></progress>
<progress value='1'></progress>
<progress value='1'></progress>
<progress value='1'></progress>
<progress value='1'></progress>
<progress value='1'></progress>
<progress value='1'></progress>
<progress value='1'></progress>
</body>
</html>

88
layout/reftests/forms/progress/margin-padding-vertical-ref.html Normal file
View file

@ -0,0 +1,88 @@
<!DOCTYPE html>
<html>
<link rel='stylesheet' type='text/css' href='style.css'>
<style>
body > div:nth-child(1) { margin: 10px; padding: 0px; }
body > div:nth-child(2) { margin: 0px; padding: 10px; }
body > div:nth-child(3) { margin: 10px; padding: 10px; }
body > div:nth-child(4) { margin: 5px; padding: 5px; }
body > div:nth-child(5) { margin: 50px; padding: 50px; }
body > div:nth-child(6) { margin: 100px; padding: 100px; }
body > div:nth-child(7) { margin: 10px 0px 0px 0px; padding: 0px; }
body > div:nth-child(8) { margin: 0px 10px 0px 0px; padding: 0px; }
body > div:nth-child(9) { margin: 0px 0px 10px 0px; padding: 0px; }
body > div:nth-child(10) { margin: 0px 0px 0px 10px; padding: 0px; }
body > div:nth-child(11) { margin: 0px; padding: 10px 0px 0px 0px; }
body > div:nth-child(12) { margin: 0px; padding: 0px 10px 0px 0px; }
body > div:nth-child(13) { margin: 0px; padding: 0px 0px 10px 0px; }
body > div:nth-child(14) { margin: 0px; padding: 0px 0px 0px 10px; }
body > div:nth-child(15) { margin: 0px; padding: 2px 4px 6px 8px; }
body > div:nth-child(16) { margin: 2px 4px 6px 8px; padding: 0px; }
</style>
<body>
<div class="progress-element vertical">
<div class="progress-bar">
</div>
</div>
<div class="progress-element vertical">
<div class="progress-bar">
</div>
</div>
<div class="progress-element vertical">
<div class="progress-bar">
</div>
</div>
<div class="progress-element vertical">
<div class="progress-bar">
</div>
</div>
<div class="progress-element vertical">
<div class="progress-bar">
</div>
</div>
<div class="progress-element vertical">
<div class="progress-bar">
</div>
</div>
<div class="progress-element vertical">
<div class="progress-bar">
</div>
</div>
<div class="progress-element vertical">
<div class="progress-bar">
</div>
</div>
<div class="progress-element vertical">
<div class="progress-bar">
</div>
</div>
<div class="progress-element vertical">
<div class="progress-bar">
</div>
</div>
<div class="progress-element vertical">
<div class="progress-bar">
</div>
</div>
<div class="progress-element vertical">
<div class="progress-bar">
</div>
</div>
<div class="progress-element vertical">
<div class="progress-bar">
</div>
</div>
<div class="progress-element vertical">
<div class="progress-bar">
</div>
</div>
<div class="progress-element vertical">
<div class="progress-bar">
</div>
</div>
<div class="progress-element vertical">
<div class="progress-bar">
</div>
</div>
</body>
</html>

88
layout/reftests/forms/progress/margin-padding-vertical-rtl-ref.html Normal file
View file

@ -0,0 +1,88 @@
<!DOCTYPE html>
<html>
<link rel='stylesheet' type='text/css' href='style.css'>
<style>
body > div:nth-child(1) { margin: 10px; padding: 0px; }
body > div:nth-child(2) { margin: 0px; padding: 10px; }
body > div:nth-child(3) { margin: 10px; padding: 10px; }
body > div:nth-child(4) { margin: 5px; padding: 5px; }
body > div:nth-child(5) { margin: 50px; padding: 50px; }
body > div:nth-child(6) { margin: 100px; padding: 100px; }
body > div:nth-child(7) { margin: 10px 0px 0px 0px; padding: 0px; }
body > div:nth-child(8) { margin: 0px 10px 0px 0px; padding: 0px; }
body > div:nth-child(9) { margin: 0px 0px 10px 0px; padding: 0px; }
body > div:nth-child(10) { margin: 0px 0px 0px 10px; padding: 0px; }
body > div:nth-child(11) { margin: 0px; padding: 10px 0px 0px 0px; }
body > div:nth-child(12) { margin: 0px; padding: 0px 10px 0px 0px; }
body > div:nth-child(13) { margin: 0px; padding: 0px 0px 10px 0px; }
body > div:nth-child(14) { margin: 0px; padding: 0px 0px 0px 10px; }
body > div:nth-child(15) { margin: 0px; padding: 2px 4px 6px 8px; }
body > div:nth-child(16) { margin: 2px 4px 6px 8px; padding: 0px; }
</style>
<body dir='rtl'>
<div class="progress-element vertical">
<div class="progress-bar">
</div>
</div>
<div class="progress-element vertical">
<div class="progress-bar">
</div>
</div>
<div class="progress-element vertical">
<div class="progress-bar">
</div>
</div>
<div class="progress-element vertical">
<div class="progress-bar">
</div>
</div>
<div class="progress-element vertical">
<div class="progress-bar">
</div>
</div>
<div class="progress-element vertical">
<div class="progress-bar">
</div>
</div>
<div class="progress-element vertical">
<div class="progress-bar">
</div>
</div>
<div class="progress-element vertical">
<div class="progress-bar">
</div>
</div>
<div class="progress-element vertical">
<div class="progress-bar">
</div>
</div>
<div class="progress-element vertical">
<div class="progress-bar">
</div>
</div>
<div class="progress-element vertical">
<div class="progress-bar">
</div>
</div>
<div class="progress-element vertical">
<div class="progress-bar">
</div>
</div>
<div class="progress-element vertical">
<div class="progress-bar">
</div>
</div>
<div class="progress-element vertical">
<div class="progress-bar">
</div>
</div>
<div class="progress-element vertical">
<div class="progress-bar">
</div>
</div>
<div class="progress-element vertical">
<div class="progress-bar">
</div>
</div>
</body>
</html>

43
layout/reftests/forms/progress/margin-padding-vertical-rtl.html Normal file
View file

@ -0,0 +1,43 @@
<!DOCTYPE html>
<html>
<link rel='stylesheet' type='text/css' href='style.css'>
<style>
progress {
-moz-orient: vertical;
}
progress:nth-child(1) { margin: 10px; padding: 0px; }
progress:nth-child(2) { margin: 0px; padding: 10px; }
progress:nth-child(3) { margin: 10px; padding: 10px; }
progress:nth-child(4) { margin: 5px; padding: 5px; }
progress:nth-child(5) { margin: 50px; padding: 50px; }
progress:nth-child(6) { margin: 100px; padding: 100px; }
progress:nth-child(7) { margin: 10px 0px 0px 0px; padding: 0px; }
progress:nth-child(8) { margin: 0px 10px 0px 0px; padding: 0px; }
progress:nth-child(9) { margin: 0px 0px 10px 0px; padding: 0px; }
progress:nth-child(10) { margin: 0px 0px 0px 10px; padding: 0px; }
progress:nth-child(11) { margin: 0px; padding: 10px 0px 0px 0px; }
progress:nth-child(12) { margin: 0px; padding: 0px 10px 0px 0px; }
progress:nth-child(13) { margin: 0px; padding: 0px 0px 10px 0px; }
progress:nth-child(14) { margin: 0px; padding: 0px 0px 0px 10px; }
progress:nth-child(15) { margin: 0px; padding: 2px 4px 6px 8px; }
progress:nth-child(16) { margin: 2px 4px 6px 8px; padding: 0px; }
</style>
<body dir='rtl'>
<progress value='1'></progress>
<progress value='1'></progress>
<progress value='1'></progress>
<progress value='1'></progress>
<progress value='1'></progress>
<progress value='1'></progress>
<progress value='1'></progress>
<progress value='1'></progress>
<progress value='1'></progress>
<progress value='1'></progress>
<progress value='1'></progress>
<progress value='1'></progress>
<progress value='1'></progress>
<progress value='1'></progress>
<progress value='1'></progress>
<progress value='1'></progress>
</body>
</html>

43
layout/reftests/forms/progress/margin-padding-vertical.html Normal file
View file

@ -0,0 +1,43 @@
<!DOCTYPE html>
<html>
<link rel='stylesheet' type='text/css' href='style.css'>
<style>
progress {
-moz-orient: vertical;
}
progress:nth-child(1) { margin: 10px; padding: 0px; }
progress:nth-child(2) { margin: 0px; padding: 10px; }
progress:nth-child(3) { margin: 10px; padding: 10px; }
progress:nth-child(4) { margin: 5px; padding: 5px; }
progress:nth-child(5) { margin: 50px; padding: 50px; }
progress:nth-child(6) { margin: 100px; padding: 100px; }
progress:nth-child(7) { margin: 10px 0px 0px 0px; padding: 0px; }
progress:nth-child(8) { margin: 0px 10px 0px 0px; padding: 0px; }
progress:nth-child(9) { margin: 0px 0px 10px 0px; padding: 0px; }
progress:nth-child(10) { margin: 0px 0px 0px 10px; padding: 0px; }
progress:nth-child(11) { margin: 0px; padding: 10px 0px 0px 0px; }
progress:nth-child(12) { margin: 0px; padding: 0px 10px 0px 0px; }
progress:nth-child(13) { margin: 0px; padding: 0px 0px 10px 0px; }
progress:nth-child(14) { margin: 0px; padding: 0px 0px 0px 10px; }
progress:nth-child(15) { margin: 0px; padding: 2px 4px 6px 8px; }
progress:nth-child(16) { margin: 2px 4px 6px 8px; padding: 0px; }
</style>
<body>
<progress value='1'></progress>
<progress value='1'></progress>
<progress value='1'></progress>
<progress value='1'></progress>
<progress value='1'></progress>
<progress value='1'></progress>
<progress value='1'></progress>
<progress value='1'></progress>
<progress value='1'></progress>
<progress value='1'></progress>
<progress value='1'></progress>
<progress value='1'></progress>
<progress value='1'></progress>
<progress value='1'></progress>
<progress value='1'></progress>
<progress value='1'></progress>
</body>
</html>

40
layout/reftests/forms/progress/margin-padding.html Normal file
View file

@ -0,0 +1,40 @@
<!DOCTYPE html>
<html>
<link rel='stylesheet' type='text/css' href='style.css'>
<style>
progress:nth-child(1) { margin: 10px; padding: 0px; }
progress:nth-child(2) { margin: 0px; padding: 10px; }
progress:nth-child(3) { margin: 10px; padding: 10px; }
progress:nth-child(4) { margin: 5px; padding: 5px; }
progress:nth-child(5) { margin: 50px; padding: 50px; }
progress:nth-child(6) { margin: 100px; padding: 100px; }
progress:nth-child(7) { margin: 10px 0px 0px 0px; padding: 0px; }
progress:nth-child(8) { margin: 0px 10px 0px 0px; padding: 0px; }
progress:nth-child(9) { margin: 0px 0px 10px 0px; padding: 0px; }
progress:nth-child(10) { margin: 0px 0px 0px 10px; padding: 0px; }
progress:nth-child(11) { margin: 0px; padding: 10px 0px 0px 0px; }
progress:nth-child(12) { margin: 0px; padding: 0px 10px 0px 0px; }
progress:nth-child(13) { margin: 0px; padding: 0px 0px 10px 0px; }
progress:nth-child(14) { margin: 0px; padding: 0px 0px 0px 10px; }
progress:nth-child(15) { margin: 0px; padding: 2px 4px 6px 8px; }
progress:nth-child(16) { margin: 2px 4px 6px 8px; padding: 0px; }
</style>
<body>
<progress value='1'></progress>
<progress value='1'></progress>
<progress value='1'></progress>
<progress value='1'></progress>
<progress value='1'></progress>
<progress value='1'></progress>
<progress value='1'></progress>
<progress value='1'></progress>
<progress value='1'></progress>
<progress value='1'></progress>
<progress value='1'></progress>
<progress value='1'></progress>
<progress value='1'></progress>
<progress value='1'></progress>
<progress value='1'></progress>
<progress value='1'></progress>
</body>
</html>

11
layout/reftests/forms/progress/max-height-ref.html Normal file
View file

@ -0,0 +1,11 @@
<!DOCTYPE html>
<style>
progress {
height: 50px;
padding: 23px;
border: 1px solid black;
box-sizing: border-box;
overflow: hidden;
}
</style>
<progress>Some text</progress>

11
layout/reftests/forms/progress/max-height.html Normal file
View file

@ -0,0 +1,11 @@
<!DOCTYPE html>
<style>
progress {
max-height: 50px;
padding: 23px;
border: 1px solid black;
box-sizing: border-box;
overflow: hidden;
}
</style>
<progress>Some text</progress>

3
layout/reftests/forms/progress/progress-orient-block.html Normal file
View file

@ -0,0 +1,3 @@
<!DOCTYPE html>
<html>
<progress style="-moz-orient:block" max=100 value=0>

3
layout/reftests/forms/progress/progress-orient-horizontal-rtl.html Normal file
View file

@ -0,0 +1,3 @@
<!DOCTYPE html>
<html>
<progress style="-moz-orient:horizontal" max=100 value=0 dir=rtl>

3
layout/reftests/forms/progress/progress-orient-horizontal.html Normal file
View file

@ -0,0 +1,3 @@
<!DOCTYPE html>
<html>
<progress style="-moz-orient:horizontal" max=100 value=0>

3
layout/reftests/forms/progress/progress-orient-inline.html Normal file
View file

@ -0,0 +1,3 @@
<!DOCTYPE html>
<html>
<progress style="-moz-orient:inline" max=100 value=0>

3
layout/reftests/forms/progress/progress-orient-vertical-rtl.html Normal file
View file

@ -0,0 +1,3 @@
<!DOCTYPE html>
<html>
<progress style="-moz-orient:vertical" max=100 value=0 dir=rtl>

3
layout/reftests/forms/progress/progress-orient-vertical.html Normal file
View file

@ -0,0 +1,3 @@
<!DOCTYPE html>
<html>
<progress style="-moz-orient:vertical" max=100 value=0>

3
layout/reftests/forms/progress/progress-vlr-orient-block.html Normal file
View file

@ -0,0 +1,3 @@
<!DOCTYPE html>
<html>
<progress style="writing-mode:vertical-lr;-moz-orient:block" max=100 value=0>

3
layout/reftests/forms/progress/progress-vlr-orient-horizontal.html Normal file
View file

@ -0,0 +1,3 @@
<!DOCTYPE html>
<html>
<progress style="writing-mode:vertical-lr;-moz-orient:horizontal" max=100 value=0>

3
layout/reftests/forms/progress/progress-vlr-orient-inline.html Normal file
View file

@ -0,0 +1,3 @@
<!DOCTYPE html>
<html>
<progress style="writing-mode:vertical-lr;-moz-orient:inline" max=100 value=0>

3
layout/reftests/forms/progress/progress-vlr-orient-vertical.html Normal file
View file

@ -0,0 +1,3 @@
<!DOCTYPE html>
<html>
<progress style="writing-mode:vertical-lr;-moz-orient:vertical" max=100 value=0>

3
layout/reftests/forms/progress/progress-vlr.html Normal file
View file

@ -0,0 +1,3 @@
<!DOCTYPE html>
<html>
<progress style="writing-mode:vertical-lr" max=100 value=0>

3
layout/reftests/forms/progress/progress-vrl-orient-block.html Normal file
View file

@ -0,0 +1,3 @@
<!DOCTYPE html>
<html>
<progress style="writing-mode:vertical-rl;-moz-orient:block" max=100 value=0>

3
layout/reftests/forms/progress/progress-vrl-orient-horizontal.html Normal file
View file

@ -0,0 +1,3 @@
<!DOCTYPE html>
<html>
<progress style="writing-mode:vertical-rl;-moz-orient:horizontal" max=100 value=0>

3
layout/reftests/forms/progress/progress-vrl-orient-inline.html Normal file
View file

@ -0,0 +1,3 @@
<!DOCTYPE html>
<html>
<progress style="writing-mode:vertical-rl;-moz-orient:inline" max=100 value=0>

3
layout/reftests/forms/progress/progress-vrl-orient-vertical.html Normal file
View file

@ -0,0 +1,3 @@
<!DOCTYPE html>
<html>
<progress style="writing-mode:vertical-rl;-moz-orient:vertical" max=100 value=0>

3
layout/reftests/forms/progress/progress-vrl.html Normal file
View file

@ -0,0 +1,3 @@
<!DOCTYPE html>
<html>
<progress style="writing-mode:vertical-rl" max=100 value=0>

49
layout/reftests/forms/progress/reftest-stylo.list Normal file
View file

@ -0,0 +1,49 @@
# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
== values.html values.html
== values-rtl.html values-rtl.html
== margin-padding.html margin-padding.html
== margin-padding-rtl.html margin-padding-rtl.html
skip-if(B2G||Mulet) == bar-pseudo-element.html bar-pseudo-element.html
# Initial mulet triage: parity with B2G/B2G Desktop
== bar-pseudo-element-rtl.html bar-pseudo-element-rtl.html
== indeterminate-style-width.html indeterminate-style-width.html
# vertical tests
== values-vertical.html values-vertical.html
== values-vertical-rtl.html values-vertical-rtl.html
== margin-padding-vertical.html margin-padding-vertical.html
== margin-padding-vertical-rtl.html margin-padding-vertical-rtl.html
skip-if(B2G||Mulet) == bar-pseudo-element-vertical.html bar-pseudo-element-vertical.html
# Initial mulet triage: parity with B2G/B2G Desktop
== bar-pseudo-element-vertical-rtl.html bar-pseudo-element-vertical-rtl.html
== indeterminate-style-height.html indeterminate-style-height.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.
# However, it would be possible to manually check those.
# == transformations.html transformations.html
# Tests for bugs:
== block-invalidate.html block-invalidate.html
== in-cells.html in-cells.html
== max-height.html max-height.html
# Tests for block and inline orientation in combination with writing-mode
# XXX Remove default-preferences setting here after bug 1138384 makes
# it the default for all channels
== progress-orient-horizontal.html progress-orient-horizontal.html
skip == progress-orient-vertical.html progress-orient-vertical.html
# only OS X currently has direction-dependent rendering here
== progress-orient-block.html progress-orient-block.html
== progress-orient-inline.html progress-orient-inline.html
== progress-vlr.html progress-vlr.html
== progress-vlr-orient-block.html progress-vlr-orient-block.html
== progress-vlr-orient-inline.html progress-vlr-orient-inline.html
== progress-vlr-orient-horizontal.html progress-vlr-orient-horizontal.html
== progress-vlr-orient-vertical.html progress-vlr-orient-vertical.html
== progress-vrl.html progress-vrl.html
== progress-vrl-orient-block.html progress-vrl-orient-block.html
== progress-vrl-orient-inline.html progress-vrl-orient-inline.html
== progress-vrl-orient-horizontal.html progress-vrl-orient-horizontal.html
== progress-vrl-orient-vertical.html progress-vrl-orient-vertical.html

42
layout/reftests/forms/progress/reftest.list Normal file
View file

@ -0,0 +1,42 @@
== values.html values-ref.html
== values-rtl.html values-rtl-ref.html
== margin-padding.html margin-padding-ref.html
== 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
# vertical tests
== values-vertical.html values-vertical-ref.html
== values-vertical-rtl.html values-vertical-rtl-ref.html
== margin-padding-vertical.html margin-padding-vertical-ref.html
== margin-padding-vertical-rtl.html margin-padding-vertical-rtl-ref.html
== bar-pseudo-element-vertical.html bar-pseudo-element-vertical-ref.html
== bar-pseudo-element-vertical-rtl.html bar-pseudo-element-vertical-rtl-ref.html
== indeterminate-style-height.html indeterminate-style-height-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.
# However, it would be possible to manually check those.
# == transformations.html transformations-ref.html
# Tests for bugs:
== block-invalidate.html block-invalidate-ref.html
== in-cells.html in-cells-ref.html
== max-height.html max-height-ref.html
# Tests for block and inline orientation in combination with writing-mode
!= progress-orient-horizontal.html progress-orient-vertical.html
fails-if(!cocoaWidget||OSX==1010) != progress-orient-vertical.html progress-orient-vertical-rtl.html # only OS X currently has direction-dependent rendering here
== progress-orient-block.html progress-orient-vertical.html
== progress-orient-inline.html progress-orient-horizontal.html
== progress-vlr.html progress-orient-vertical.html
== progress-vlr-orient-block.html progress-orient-horizontal.html
== progress-vlr-orient-inline.html progress-orient-vertical.html
== progress-vlr-orient-horizontal.html progress-orient-horizontal.html
== progress-vlr-orient-vertical.html progress-orient-vertical.html
== progress-vrl.html progress-orient-vertical-rtl.html
== progress-vrl-orient-block.html progress-orient-horizontal-rtl.html
== progress-vrl-orient-inline.html progress-orient-vertical-rtl.html
== progress-vrl-orient-horizontal.html progress-orient-horizontal-rtl.html
== progress-vrl-orient-vertical.html progress-orient-vertical-rtl.html

39
layout/reftests/forms/progress/style.css Normal file
View file

@ -0,0 +1,39 @@
div.progress-element {
-moz-appearance: progressbar;
display: inline-block;
height: 1em;
width: 10em;
vertical-align: -0.2em;
/* Default style in case of there is -moz-appearance: none; */
border: 2px solid;
-moz-border-top-colors: ThreeDShadow #e6e6e6;
-moz-border-right-colors: ThreeDHighlight #e6e6e6;
-moz-border-bottom-colors: ThreeDHighlight #e6e6e6;
-moz-border-left-colors: ThreeDShadow #e6e6e6;
background-color: #e6e6e6;
}
div.progress-element.vertical {
height: 10em;
width: 1em;
}
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%;
*/
box-sizing: border-box;
/* Default style in case of there is -moz-appearance: none; */
background-color: #0064b4;
}
progress, progress::-moz-progress-bar, div.progress-element, div.progress-bar {
-moz-appearance: none;
}

78
layout/reftests/forms/progress/transformations-ref.html Normal file
View file

@ -0,0 +1,78 @@
<!DOCTYPE html>
<html>
<link rel='stylesheet' type='text/css' href='style.css'>
<style>
body > div:nth-child(1) { -moz-transform: matrix(1, -0.2, 0, 1, 0, 0); }
body > div:nth-child(2) { -moz-transform: translateX(15em) matrix(1, 0, 0.6, 1, 0, 0); }
body > div:nth-child(3) { -moz-transform: rotate(30deg); }
body > div:nth-child(4) { -moz-transform: scale(2, 4); }
body > div:nth-child(5) { -moz-transform: scale(0.1, 0.4); }
body > div:nth-child(6) { -moz-transform: scale(1, 0.4); }
body > div:nth-child(7) { -moz-transform: scale(0.1, 1); }
body > div:nth-child(8) { -moz-transform: skew(30deg, -10deg); }
body > div:nth-child(9) { -moz-transform: skew(-30deg, 10deg); }
body > div:nth-child(10) { -moz-transform: translate(10px, 30px); }
body > div:nth-child(11) { -moz-transform: translate(30px, 10px); }
body > div:nth-child(12) { -moz-transform: translate(-10px, 30px); }
body > div:nth-child(13) { -moz-transform: translate(30px, -10px); }
body > div:nth-child(14) { -moz-transform: scale(0, 0); }
</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>
<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>
<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>

36
layout/reftests/forms/progress/transformations.html Normal file
View file

@ -0,0 +1,36 @@
<!DOCTYPE html>
<html>
<link rel='stylesheet' type='text/css' href='style.css'>
<style>
progress:nth-child(1) { -moz-transform: matrix(1, -0.2, 0, 1, 0, 0); }
progress:nth-child(2) { -moz-transform: translateX(15em) matrix(1, 0, 0.6, 1, 0, 0); }
progress:nth-child(3) { -moz-transform: rotate(30deg); }
progress:nth-child(4) { -moz-transform: scale(2, 4); }
progress:nth-child(5) { -moz-transform: scale(0.1, 0.4); }
progress:nth-child(6) { -moz-transform: scale(1, 0.4); }
progress:nth-child(7) { -moz-transform: scale(0.1, 1); }
progress:nth-child(8) { -moz-transform: skew(30deg, -10deg); }
progress:nth-child(9) { -moz-transform: skew(-30deg, 10deg); }
progress:nth-child(10) { -moz-transform: translate(10px, 30px); }
progress:nth-child(11) { -moz-transform: translate(30px, 10px); }
progress:nth-child(12) { -moz-transform: translate(-10px, 30px); }
progress:nth-child(13) { -moz-transform: translate(30px, -10px); }
progress:nth-child(14) { -moz-transform: scale(0, 0); }
</style>
<body>
<progress value='1'></progress>
<progress value='1'></progress>
<progress value='1'></progress>
<progress value='1'></progress>
<progress value='1'></progress>
<progress value='1'></progress>
<progress value='1'></progress>
<progress value='1'></progress>
<progress value='1'></progress>
<progress value='1'></progress>
<progress value='1'></progress>
<progress value='1'></progress>
<progress value='1'></progress>
<progress value='1'></progress>
</body>
</html>

58
layout/reftests/forms/progress/values-ref.html Normal file
View file

@ -0,0 +1,58 @@
<!DOCTYPE html>
<html>
<link rel='stylesheet' type='text/css' href='style.css'>
<style>
div:nth-child(1) > .progress-bar { width: 100%; }
div:nth-child(2) > .progress-bar { width: 0%; }
div:nth-child(3) > .progress-bar { width: 10%; }
div:nth-child(4) > .progress-bar { width: 50%; }
div:nth-child(5) > .progress-bar { width: 0%; }
div:nth-child(6) > .progress-bar { width: 100%; }
div:nth-child(7) > .progress-bar { width: 42%; }
div:nth-child(8) > .progress-bar { width: 100%; }
div:nth-child(9) > .progress-bar { width: 100%; }
div:nth-child(10) > .progress-bar { width: 10%; }
</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>
<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>

58
layout/reftests/forms/progress/values-rtl-ref.html Normal file
View file

@ -0,0 +1,58 @@
<!DOCTYPE html>
<html>
<link rel='stylesheet' type='text/css' href='style.css'>
<style>
div:nth-child(1) > .progress-bar { width: 100%; }
div:nth-child(2) > .progress-bar { width: 0%; }
div:nth-child(3) > .progress-bar { width: 10%; }
div:nth-child(4) > .progress-bar { width: 50%; }
div:nth-child(5) > .progress-bar { width: 0%; }
div:nth-child(6) > .progress-bar { width: 100%; }
div:nth-child(7) > .progress-bar { width: 42%; }
div:nth-child(8) > .progress-bar { width: 100%; }
div:nth-child(9) > .progress-bar { width: 100%; }
div:nth-child(10) > .progress-bar { width: 10%; }
</style>
<body dir='rtl'>
<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>
<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>

16
layout/reftests/forms/progress/values-rtl.html Normal file
View file

@ -0,0 +1,16 @@
<!DOCTYPE html>
<html>
<link rel='stylesheet' type='text/css' href='style.css'>
<body dir='rtl'>
<progress value="1.0"></progress>
<progress value="0.0"></progress>
<progress value="0.1"></progress>
<progress value="0.5"></progress>
<progress value="-1"></progress>
<progress value="42"></progress>
<progress value="42" max="100"></progress>
<progress value="42" max="1"></progress>
<progress value="42" max="-1"></progress>
<progress value="0.1" max="-1"></progress>
</body>
</html>

58
layout/reftests/forms/progress/values-vertical-ref.html Normal file
View file

@ -0,0 +1,58 @@
<!DOCTYPE html>
<html>
<link rel='stylesheet' type='text/css' href='style.css'>
<style>
div:nth-child(1) > .progress-bar { position: relative; top: 0%; height: 100%; }
div:nth-child(2) > .progress-bar { position: relative; top: 100%; height: 0%; }
div:nth-child(3) > .progress-bar { position: relative; top: 90%; height: 10%; }
div:nth-child(4) > .progress-bar { position: relative; top: 50%; height: 50%; }
div:nth-child(5) > .progress-bar { position: relative; top: 100%; height: 0%; }
div:nth-child(6) > .progress-bar { position: relative; top: 0%; height: 100%; }
div:nth-child(7) > .progress-bar { position: relative; top: 58%; height: 42%; }
div:nth-child(8) > .progress-bar { position: relative; top: 0%; height: 100%; }
div:nth-child(9) > .progress-bar { position: relative; top: 0%; height: 100%; }
div:nth-child(10) > .progress-bar { position: relative; top: 90%; height: 10%; }
</style>
<body>
<div class="progress-element vertical">
<div class="progress-bar">
</div>
</div>
<div class="progress-element vertical">
<div class="progress-bar">
</div>
</div>
<div class="progress-element vertical">
<div class="progress-bar">
</div>
</div>
<div class="progress-element vertical">
<div class="progress-bar">
</div>
</div>
<div class="progress-element vertical">
<div class="progress-bar">
</div>
</div>
<div class="progress-element vertical">
<div class="progress-bar">
</div>
</div>
<div class="progress-element vertical">
<div class="progress-bar">
</div>
</div>
<div class="progress-element vertical">
<div class="progress-bar">
</div>
</div>
<div class="progress-element vertical">
<div class="progress-bar">
</div>
</div>
<div class="progress-element vertical">
<div class="progress-bar">
</div>
</div>
</body>
</html>

58
layout/reftests/forms/progress/values-vertical-rtl-ref.html Normal file
View file

@ -0,0 +1,58 @@
<!DOCTYPE html>
<html>
<link rel='stylesheet' type='text/css' href='style.css'>
<style>
div:nth-child(1) > .progress-bar { position: relative; top: 0%; height: 100%; }
div:nth-child(2) > .progress-bar { position: relative; top: 100%; height: 0%; }
div:nth-child(3) > .progress-bar { position: relative; top: 90%; height: 10%; }
div:nth-child(4) > .progress-bar { position: relative; top: 50%; height: 50%; }
div:nth-child(5) > .progress-bar { position: relative; top: 100%; height: 0%; }
div:nth-child(6) > .progress-bar { position: relative; top: 0%; height: 100%; }
div:nth-child(7) > .progress-bar { position: relative; top: 58%; height: 42%; }
div:nth-child(8) > .progress-bar { position: relative; top: 0%; height: 100%; }
div:nth-child(9) > .progress-bar { position: relative; top: 0%; height: 100%; }
div:nth-child(10) > .progress-bar { position: relative; top: 90%; height: 10%; }
</style>
<body dir='rtl'>
<div class="progress-element vertical">
<div class="progress-bar">
</div>
</div>
<div class="progress-element vertical">
<div class="progress-bar">
</div>
</div>
<div class="progress-element vertical">
<div class="progress-bar">
</div>
</div>
<div class="progress-element vertical">
<div class="progress-bar">
</div>
</div>
<div class="progress-element vertical">
<div class="progress-bar">
</div>
</div>
<div class="progress-element vertical">
<div class="progress-bar">
</div>
</div>
<div class="progress-element vertical">
<div class="progress-bar">
</div>
</div>
<div class="progress-element vertical">
<div class="progress-bar">
</div>
</div>
<div class="progress-element vertical">
<div class="progress-bar">
</div>
</div>
<div class="progress-element vertical">
<div class="progress-bar">
</div>
</div>
</body>
</html>

21
layout/reftests/forms/progress/values-vertical-rtl.html Normal file
View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html>
<link rel='stylesheet' type='text/css' href='style.css'>
<style>
progress {
-moz-orient: vertical;
}
</style>
<body dir='rtl'>
<progress value="1.0"></progress>
<progress value="0.0"></progress>
<progress value="0.1"></progress>
<progress value="0.5"></progress>
<progress value="-1"></progress>
<progress value="42"></progress>
<progress value="42" max="100"></progress>
<progress value="42" max="1"></progress>
<progress value="42" max="-1"></progress>
<progress value="0.1" max="-1"></progress>
</body>
</html>

21
layout/reftests/forms/progress/values-vertical.html Normal file
View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html>
<link rel='stylesheet' type='text/css' href='style.css'>
<style>
progress {
-moz-orient: vertical;
}
</style>
<body>
<progress value="1.0"></progress>
<progress value="0.0"></progress>
<progress value="0.1"></progress>
<progress value="0.5"></progress>
<progress value="-1"></progress>
<progress value="42"></progress>
<progress value="42" max="100"></progress>
<progress value="42" max="1"></progress>
<progress value="42" max="-1"></progress>
<progress value="0.1" max="-1"></progress>
</body>
</html>

16
layout/reftests/forms/progress/values.html Normal file
View file

@ -0,0 +1,16 @@
<!DOCTYPE html>
<html>
<link rel='stylesheet' type='text/css' href='style.css'>
<body>
<progress value="1.0"></progress>
<progress value="0.0"></progress>
<progress value="0.1"></progress>
<progress value="0.5"></progress>
<progress value="-1"></progress>
<progress value="42"></progress>
<progress value="42" max="100"></progress>
<progress value="42" max="1"></progress>
<progress value="42" max="-1"></progress>
<progress value="0.1" max="-1"></progress>
</body>
</html>