зеркало из https://github.com/mozilla/gecko-dev.git
Bug 662251 (2/2) - Tests. r=mounir
This commit is contained in:
Laurent Dulary
Родитель
5f76a7e1fe
Коммит
6d2bb3dfaa
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<link rel='stylesheet' type='text/css' href='style.css'>
|
||||
<style>
|
||||
div:nth-child(1) > .meter-sub-optimum { width: 10%; }
|
||||
div:nth-child(2) > .meter-sub-sub-optimum { width: 10%; }
|
||||
div:nth-child(3) > .meter-sub-optimum { width: 40%; }
|
||||
div:nth-child(4) > .meter-optimum { width: 10%; }
|
||||
div:nth-child(5) > .meter-optimum { width: 0%; }
|
||||
div:nth-child(6) > .meter-sub-optimum { width: 20%; }
|
||||
</style>
|
||||
<body>
|
||||
<div class="meter-element">
|
||||
<div class="meter-sub-optimum">
|
||||
</div>
|
||||
</div>
|
||||
<div class="meter-element">
|
||||
<div class="meter-sub-sub-optimum">
|
||||
</div>
|
||||
</div>
|
||||
<div class="meter-element">
|
||||
<div class="meter-sub-optimum">
|
||||
</div>
|
||||
</div>
|
||||
<div class="meter-element">
|
||||
<div class="meter-optimum">
|
||||
</div>
|
||||
</div>
|
||||
<div class="meter-element">
|
||||
<div class="meter-optimum">
|
||||
</div>
|
||||
</div>
|
||||
<div class="meter-element">
|
||||
<div class="meter-sub-optimum">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<link rel='stylesheet' type='text/css' href='style.css'>
|
||||
<body>
|
||||
<meter id='m1' value="0.1" low="0" optimum="0.5" high="1" min="0" max="1"></meter>
|
||||
<meter id='m2' value="0.1" low="0.3" optimum="0.7" high="1" min="0" max="1"></meter>
|
||||
<meter id='m3' value="0.1" low="0.3" optimum="0.7" high="0.5" min="0" max="1"></meter>
|
||||
<meter id='m4' value="0.1" low="0.3" optimum="0.7" high="0.5" min="0" max="1"></meter>
|
||||
<meter id='m5' value="0.1" low="0.3" optimum="0.7" high="0.5" min="0" max="1"></meter>
|
||||
<meter id='m6' value="0.1" low="0.3" optimum="0.7" high="0.5" min="0" max="1"></meter>
|
||||
|
||||
<script>
|
||||
|
||||
var m = document.getElementById('m1');
|
||||
m.setAttribute("low",0.3);
|
||||
|
||||
m = document.getElementById('m2');
|
||||
m.setAttribute("high",0.5);
|
||||
|
||||
m = document.getElementById('m3');
|
||||
m.setAttribute("value",0.4);
|
||||
|
||||
m = document.getElementById('m4');
|
||||
m.setAttribute("optimum",0.1);
|
||||
|
||||
m = document.getElementById('m5');
|
||||
m.setAttribute("min",0.9);
|
||||
|
||||
m = document.getElementById('m6');
|
||||
m.setAttribute("max",0.5);
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,279 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<link rel='stylesheet' type='text/css' href='style.css'>
|
||||
<style>
|
||||
/* optimum = 0.0 */
|
||||
div:nth-child(1) > .meter-optimum { width: 0%; }
|
||||
div:nth-child(2) > .meter-optimum { width: 10%; }
|
||||
div:nth-child(3) > .meter-sub-optimum { width: 30%; }
|
||||
div:nth-child(4) > .meter-sub-optimum { width: 50%; }
|
||||
div:nth-child(5) > .meter-sub-optimum { width: 70%; }
|
||||
div:nth-child(6) > .meter-sub-sub-optimum { width: 80%; }
|
||||
div:nth-child(7) > .meter-sub-sub-optimum { width: 100%; }
|
||||
|
||||
/* optimum = 0.1 */
|
||||
div:nth-child(8) > .meter-optimum { width: 0%; }
|
||||
div:nth-child(9) > .meter-optimum { width: 10%; }
|
||||
div:nth-child(10) > .meter-sub-optimum { width: 30%; }
|
||||
div:nth-child(11) > .meter-sub-optimum { width: 50%; }
|
||||
div:nth-child(12) > .meter-sub-optimum { width: 70%; }
|
||||
div:nth-child(13) > .meter-sub-sub-optimum { width: 80%; }
|
||||
div:nth-child(14) > .meter-sub-sub-optimum { width: 100%; }
|
||||
|
||||
/* optimum = 0.3 */
|
||||
div:nth-child(15) > .meter-sub-optimum { width: 0%; }
|
||||
div:nth-child(16) > .meter-sub-optimum { width: 10%; }
|
||||
div:nth-child(17) > .meter-optimum { width: 30%; }
|
||||
div:nth-child(18) > .meter-optimum { width: 50%; }
|
||||
div:nth-child(19) > .meter-optimum { width: 70%; }
|
||||
div:nth-child(20) > .meter-sub-optimum { width: 80%; }
|
||||
div:nth-child(21) > .meter-sub-optimum { width: 100%; }
|
||||
|
||||
/* optimum = 0.5 */
|
||||
div:nth-child(22) > .meter-sub-optimum { width: 0%; }
|
||||
div:nth-child(23) > .meter-sub-optimum { width: 10%; }
|
||||
div:nth-child(24) > .meter-optimum { width: 30%; }
|
||||
div:nth-child(25) > .meter-optimum { width: 50%; }
|
||||
div:nth-child(26) > .meter-optimum { width: 70%; }
|
||||
div:nth-child(27) > .meter-sub-optimum { width: 80%; }
|
||||
div:nth-child(28) > .meter-sub-optimum { width: 100%; }
|
||||
|
||||
/* optimum = 0.7 */
|
||||
div:nth-child(29) > .meter-sub-optimum { width: 0%; }
|
||||
div:nth-child(30) > .meter-sub-optimum { width: 10%; }
|
||||
div:nth-child(31) > .meter-optimum { width: 30%; }
|
||||
div:nth-child(32) > .meter-optimum { width: 50%; }
|
||||
div:nth-child(33) > .meter-optimum { width: 70%; }
|
||||
div:nth-child(34) > .meter-sub-optimum { width: 80%; }
|
||||
div:nth-child(35) > .meter-sub-optimum { width: 100%; }
|
||||
|
||||
/* optimum = 0.8 */
|
||||
div:nth-child(36) > .meter-sub-sub-optimum { width: 0%; }
|
||||
div:nth-child(37) > .meter-sub-sub-optimum { width: 10%; }
|
||||
div:nth-child(38) > .meter-sub-optimum { width: 30%; }
|
||||
div:nth-child(39) > .meter-sub-optimum { width: 50%; }
|
||||
div:nth-child(40) > .meter-sub-optimum { width: 70%; }
|
||||
div:nth-child(41) > .meter-optimum { width: 80%; }
|
||||
div:nth-child(42) > .meter-optimum { width: 100%; }
|
||||
|
||||
/* optimum = 1.0 */
|
||||
div:nth-child(43) > .meter-sub-sub-optimum { width: 0%; }
|
||||
div:nth-child(44) > .meter-sub-sub-optimum { width: 10%; }
|
||||
div:nth-child(45) > .meter-sub-optimum { width: 30%; }
|
||||
div:nth-child(46) > .meter-sub-optimum { width: 50%; }
|
||||
div:nth-child(47) > .meter-sub-optimum { width: 70%; }
|
||||
div:nth-child(48) > .meter-optimum { width: 80%; }
|
||||
div:nth-child(49) > .meter-optimum { width: 100%; }
|
||||
</style>
|
||||
<body>
|
||||
<!-- optimum = 0.0 -->
|
||||
<div class="meter-element">
|
||||
<div class="meter-optimum">
|
||||
</div>
|
||||
</div>
|
||||
<div class="meter-element">
|
||||
<div class="meter-optimum">
|
||||
</div>
|
||||
</div>
|
||||
<div class="meter-element">
|
||||
<div class="meter-sub-optimum">
|
||||
</div>
|
||||
</div>
|
||||
<div class="meter-element">
|
||||
<div class="meter-sub-optimum">
|
||||
</div>
|
||||
</div>
|
||||
<div class="meter-element">
|
||||
<div class="meter-sub-optimum">
|
||||
</div>
|
||||
</div>
|
||||
<div class="meter-element">
|
||||
<div class="meter-sub-sub-optimum">
|
||||
</div>
|
||||
</div>
|
||||
<div class="meter-element">
|
||||
<div class="meter-sub-sub-optimum">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- optimum = 0.1 -->
|
||||
<div class="meter-element">
|
||||
<div class="meter-optimum">
|
||||
</div>
|
||||
</div>
|
||||
<div class="meter-element">
|
||||
<div class="meter-optimum">
|
||||
</div>
|
||||
</div>
|
||||
<div class="meter-element">
|
||||
<div class="meter-sub-optimum">
|
||||
</div>
|
||||
</div>
|
||||
<div class="meter-element">
|
||||
<div class="meter-sub-optimum">
|
||||
</div>
|
||||
</div>
|
||||
<div class="meter-element">
|
||||
<div class="meter-sub-optimum">
|
||||
</div>
|
||||
</div>
|
||||
<div class="meter-element">
|
||||
<div class="meter-sub-sub-optimum">
|
||||
</div>
|
||||
</div>
|
||||
<div class="meter-element">
|
||||
<div class="meter-sub-sub-optimum">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- optimum = 0.3 -->
|
||||
<div class="meter-element">
|
||||
<div class="meter-sub-optimum">
|
||||
</div>
|
||||
</div>
|
||||
<div class="meter-element">
|
||||
<div class="meter-sub-optimum">
|
||||
</div>
|
||||
</div>
|
||||
<div class="meter-element">
|
||||
<div class="meter-optimum">
|
||||
</div>
|
||||
</div>
|
||||
<div class="meter-element">
|
||||
<div class="meter-optimum">
|
||||
</div>
|
||||
</div>
|
||||
<div class="meter-element">
|
||||
<div class="meter-optimum">
|
||||
</div>
|
||||
</div>
|
||||
<div class="meter-element">
|
||||
<div class="meter-sub-optimum">
|
||||
</div>
|
||||
</div>
|
||||
<div class="meter-element">
|
||||
<div class="meter-sub-optimum">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- optimum = 0.5 -->
|
||||
<div class="meter-element">
|
||||
<div class="meter-sub-optimum">
|
||||
</div>
|
||||
</div>
|
||||
<div class="meter-element">
|
||||
<div class="meter-sub-optimum">
|
||||
</div>
|
||||
</div>
|
||||
<div class="meter-element">
|
||||
<div class="meter-optimum">
|
||||
</div>
|
||||
</div>
|
||||
<div class="meter-element">
|
||||
<div class="meter-optimum">
|
||||
</div>
|
||||
</div>
|
||||
<div class="meter-element">
|
||||
<div class="meter-optimum">
|
||||
</div>
|
||||
</div>
|
||||
<div class="meter-element">
|
||||
<div class="meter-sub-optimum">
|
||||
</div>
|
||||
</div>
|
||||
<div class="meter-element">
|
||||
<div class="meter-sub-optimum">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- optimum = 0.7 -->
|
||||
<div class="meter-element">
|
||||
<div class="meter-sub-optimum">
|
||||
</div>
|
||||
</div>
|
||||
<div class="meter-element">
|
||||
<div class="meter-sub-optimum">
|
||||
</div>
|
||||
</div>
|
||||
<div class="meter-element">
|
||||
<div class="meter-optimum">
|
||||
</div>
|
||||
</div>
|
||||
<div class="meter-element">
|
||||
<div class="meter-optimum">
|
||||
</div>
|
||||
</div>
|
||||
<div class="meter-element">
|
||||
<div class="meter-optimum">
|
||||
</div>
|
||||
</div>
|
||||
<div class="meter-element">
|
||||
<div class="meter-sub-optimum">
|
||||
</div>
|
||||
</div>
|
||||
<div class="meter-element">
|
||||
<div class="meter-sub-optimum">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- optimum = 0.8 -->
|
||||
<div class="meter-element">
|
||||
<div class="meter-sub-sub-optimum">
|
||||
</div>
|
||||
</div>
|
||||
<div class="meter-element">
|
||||
<div class="meter-sub-sub-optimum">
|
||||
</div>
|
||||
</div>
|
||||
<div class="meter-element">
|
||||
<div class="meter-sub-optimum">
|
||||
</div>
|
||||
</div>
|
||||
<div class="meter-element">
|
||||
<div class="meter-sub-optimum">
|
||||
</div>
|
||||
</div>
|
||||
<div class="meter-element">
|
||||
<div class="meter-sub-optimum">
|
||||
</div>
|
||||
</div>
|
||||
<div class="meter-element">
|
||||
<div class="meter-optimum">
|
||||
</div>
|
||||
</div>
|
||||
<div class="meter-element">
|
||||
<div class="meter-optimum">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- optimum = 1.0 -->
|
||||
<div class="meter-element">
|
||||
<div class="meter-sub-sub-optimum">
|
||||
</div>
|
||||
</div>
|
||||
<div class="meter-element">
|
||||
<div class="meter-sub-sub-optimum">
|
||||
</div>
|
||||
</div>
|
||||
<div class="meter-element">
|
||||
<div class="meter-sub-optimum">
|
||||
</div>
|
||||
</div>
|
||||
<div class="meter-element">
|
||||
<div class="meter-sub-optimum">
|
||||
</div>
|
||||
</div>
|
||||
<div class="meter-element">
|
||||
<div class="meter-sub-optimum">
|
||||
</div>
|
||||
</div>
|
||||
<div class="meter-element">
|
||||
<div class="meter-optimum">
|
||||
</div>
|
||||
</div>
|
||||
<div class="meter-element">
|
||||
<div class="meter-optimum">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<link rel='stylesheet' type='text/css' href='style.css'>
|
||||
<body>
|
||||
<meter value="0.0" low="0.3" optimum="0.0" high="0.7"></meter>
|
||||
<meter value="0.1" low="0.3" optimum="0.0" high="0.7"></meter>
|
||||
<meter value="0.3" low="0.3" optimum="0.0" high="0.7"></meter>
|
||||
<meter value="0.5" low="0.3" optimum="0.0" high="0.7"></meter>
|
||||
<meter value="0.7" low="0.3" optimum="0.0" high="0.7"></meter>
|
||||
<meter value="0.8" low="0.3" optimum="0.0" high="0.7"></meter>
|
||||
<meter value="1.0" low="0.3" optimum="0.0" high="0.7"></meter>
|
||||
|
||||
<meter value="0.0" low="0.3" optimum="0.1" high="0.7"></meter>
|
||||
<meter value="0.1" low="0.3" optimum="0.1" high="0.7"></meter>
|
||||
<meter value="0.3" low="0.3" optimum="0.1" high="0.7"></meter>
|
||||
<meter value="0.5" low="0.3" optimum="0.1" high="0.7"></meter>
|
||||
<meter value="0.7" low="0.3" optimum="0.1" high="0.7"></meter>
|
||||
<meter value="0.8" low="0.3" optimum="0.1" high="0.7"></meter>
|
||||
<meter value="1.0" low="0.3" optimum="0.1" high="0.7"></meter>
|
||||
|
||||
<meter value="0.0" low="0.3" optimum="0.3" high="0.7"></meter>
|
||||
<meter value="0.1" low="0.3" optimum="0.3" high="0.7"></meter>
|
||||
<meter value="0.3" low="0.3" optimum="0.3" high="0.7"></meter>
|
||||
<meter value="0.5" low="0.3" optimum="0.3" high="0.7"></meter>
|
||||
<meter value="0.7" low="0.3" optimum="0.3" high="0.7"></meter>
|
||||
<meter value="0.8" low="0.3" optimum="0.3" high="0.7"></meter>
|
||||
<meter value="1.0" low="0.3" optimum="0.3" high="0.7"></meter>
|
||||
|
||||
<meter value="0.0" low="0.3" optimum="0.5" high="0.7"></meter>
|
||||
<meter value="0.1" low="0.3" optimum="0.5" high="0.7"></meter>
|
||||
<meter value="0.3" low="0.3" optimum="0.5" high="0.7"></meter>
|
||||
<meter value="0.5" low="0.3" optimum="0.5" high="0.7"></meter>
|
||||
<meter value="0.7" low="0.3" optimum="0.5" high="0.7"></meter>
|
||||
<meter value="0.8" low="0.3" optimum="0.5" high="0.7"></meter>
|
||||
<meter value="1.0" low="0.3" optimum="0.5" high="0.7"></meter>
|
||||
|
||||
<meter value="0.0" low="0.3" optimum="0.7" high="0.7"></meter>
|
||||
<meter value="0.1" low="0.3" optimum="0.7" high="0.7"></meter>
|
||||
<meter value="0.3" low="0.3" optimum="0.7" high="0.7"></meter>
|
||||
<meter value="0.5" low="0.3" optimum="0.7" high="0.7"></meter>
|
||||
<meter value="0.7" low="0.3" optimum="0.7" high="0.7"></meter>
|
||||
<meter value="0.8" low="0.3" optimum="0.7" high="0.7"></meter>
|
||||
<meter value="1.0" low="0.3" optimum="0.7" high="0.7"></meter>
|
||||
|
||||
<meter value="0.0" low="0.3" optimum="0.8" high="0.7"></meter>
|
||||
<meter value="0.1" low="0.3" optimum="0.8" high="0.7"></meter>
|
||||
<meter value="0.3" low="0.3" optimum="0.8" high="0.7"></meter>
|
||||
<meter value="0.5" low="0.3" optimum="0.8" high="0.7"></meter>
|
||||
<meter value="0.7" low="0.3" optimum="0.8" high="0.7"></meter>
|
||||
<meter value="0.8" low="0.3" optimum="0.8" high="0.7"></meter>
|
||||
<meter value="1.0" low="0.3" optimum="0.8" high="0.7"></meter>
|
||||
|
||||
<meter value="0.0" low="0.3" optimum="1.0" high="0.7"></meter>
|
||||
<meter value="0.1" low="0.3" optimum="1.0" high="0.7"></meter>
|
||||
<meter value="0.3" low="0.3" optimum="1.0" high="0.7"></meter>
|
||||
<meter value="0.5" low="0.3" optimum="1.0" high="0.7"></meter>
|
||||
<meter value="0.7" low="0.3" optimum="1.0" high="0.7"></meter>
|
||||
<meter value="0.8" low="0.3" optimum="1.0" high="0.7"></meter>
|
||||
<meter value="1.0" low="0.3" optimum="1.0" high="0.7"></meter>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
== default-style.html default-style-ref.html
|
||||
== default-style-dyn.html default-style-dyn-ref.html
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
div.meter-element {
|
||||
display: inline-block;
|
||||
height: 1em;
|
||||
width: 5em;
|
||||
vertical-align: -0.2em;
|
||||
|
||||
background: -moz-linear-gradient(top, #e6e6e6, #e6e6e6, #eeeeee 20%, #cccccc 45%, #cccccc 55%);
|
||||
}
|
||||
|
||||
div.meter-optimum {
|
||||
float: none ! important;
|
||||
|
||||
height: 100%;
|
||||
/*
|
||||
* We can't apply the following style to the reference because it will have
|
||||
* underisable effectes:
|
||||
* width: 100%;
|
||||
*/
|
||||
|
||||
/* green. */
|
||||
background: -moz-linear-gradient(top, #ad7, #ad7, #cea 20%, #7a3 45%, #7a3 55%);
|
||||
}
|
||||
|
||||
div.meter-sub-optimum {
|
||||
float: none ! important;
|
||||
|
||||
height: 100%;
|
||||
/*
|
||||
* We can't apply the following style to the reference because it will have
|
||||
* underisable effectes:
|
||||
* width: 100%;
|
||||
*/
|
||||
|
||||
/* orange. */
|
||||
background: -moz-linear-gradient(top, #fe7, #fe7, #ffc 20%, #db3 45%, #db3 55%);
|
||||
}
|
||||
|
||||
div.meter-sub-sub-optimum {
|
||||
float: none ! important;
|
||||
|
||||
height: 100%;
|
||||
/*
|
||||
* We can't apply the following style to the reference because it will have
|
||||
* underisable effectes:
|
||||
* width: 100%;
|
||||
*/
|
||||
|
||||
/* red. */
|
||||
background: -moz-linear-gradient(top, #f77, #f77, #fcc 20%, #d44 45%, #d44 55%);
|
||||
}
|
||||
|
||||
meter, meter::-moz-meter-bar, div.meter-element, div.meter-optimum, div.meter-sub-optimum, div.meter-sub-sub-optimum {
|
||||
-moz-appearance: none;
|
||||
}
|
||||
|
|
@ -17,3 +17,6 @@
|
|||
# transformations will not behave exactly the same for <meter> and two divs.
|
||||
# However, it would be possible to manually check those.
|
||||
# == transformations.html transformations-ref.html
|
||||
|
||||
# default style
|
||||
include default-style/reftest.list
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче