Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-15 18:35:33 +01:00
Code Issues Projects Releases Packages Wiki Activity

Update CSS tests to revision 31d63cc79bd4c929ed582229e936d7b389f3e6ab

Browse source
This commit is contained in:
James Graham 2015-03-27 09:18:12 +00:00
parent 1a81b18b9f
commit 2c9faf5363
91915 changed files with 5979820 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

88
tests/wpt/css-tests/css-backgrounds-3_dev/xhtml1print/css-border-radius-002.xht Normal file
View file

@ -0,0 +1,88 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>CSS border-radius Test</title>
<link href="mailto:weisong4413@126.com" rel="author" title="tmd" />
<link href="http://www.w3.org/TR/css3-background/#the-border-radius" rel="help" />
<link href="reference/css-border-radius-ref-002.xht" rel="match" />
<meta content="if there is more then one graph and one color" name="assert" />
<meta content="border-radius" name="flag" />
<style type="text/css">
.redSquare {
position: absolute;
left:50px;
width: 100px;
height: 100px;
border-bottom-left-radius:100% 100%;
border-top-left-radius:100% 100%;
border-bottom-right-radius: 100% 100%;
border-top-right-radius: 100% 100%;
background-color:rgba(255, 0, 0, 0.5);
}
.greenSquare {
position: absolute;
left:50px;
width: 100px;
height: 100px;
background-image:url(support/yy.png);
}
.container {
position: absolute;
}
</style>
</head>
<body>
<p>The test passes if there is one graph with one color.</p>
<div class="container">
<!-- This is the graph that should not be visible if the test passes -->
<div class="greenSquare" id="green"></div>
<!-- This is the square being tested with the radius-->
<div class="redSquare" id="red">
</div><br /><br /><br /><br /><br />
<p>you can change the value of all radius to change the graph.</p>
Top--- Left- X<input onchange="setRadius('TL1')" type="range" id="rangeTL1" value="100" />% Y<input onchange="setRadius('TL2')" type="range" id="rangeTL2" value="100" />%
<br /> Top--- Right X<input onchange="setRadius('TR1')" type="range" id="rangeTR1" value="100" />% Y<input onchange="setRadius('TR2')" type="range" id="rangeTR2" value="100" />%
<br /> Bottom Left- X<input onchange="setRadius('BL1')" type="range" id="rangeBL1" value="100" />% Y<input onchange="setRadius('BL2')" type="range" id="rangeBL2" value="100" />%
<br /> Bottom Right X<input onchange="setRadius('BR1')" type="range" id="rangeBR1" value="100" />% Y<input onchange="setRadius('BR2')" type="range" id="rangeBR2" value="100" />%
<script>
var red = document.getElementById("red");
var rangeTL1 = document.getElementById("rangeTL1");
var rangeTR1 = document.getElementById("rangeTR1");
var rangeBL1 = document.getElementById("rangeBL1");
var rangeBR1 = document.getElementById("rangeBR1");
var rangeTL2 = document.getElementById("rangeTL2");
var rangeTR2 = document.getElementById("rangeTR2");
var rangeBL2 = document.getElementById("rangeBL2");
var rangeBR2 = document.getElementById("rangeBR2");
function setRadius(str){
rangeTL1.setAttribute("title",rangeTL1.value);
rangeTR1.setAttribute("title",rangeTR1.value);
rangeBL1.setAttribute("title",rangeBL1.value);
rangeBR1.setAttribute("title",rangeBR1.value);
rangeTL2.setAttribute("title",rangeTL2.value);
rangeTR2.setAttribute("title",rangeTR2.value);
rangeBL2.setAttribute("title",rangeBL2.value);
rangeBR2.setAttribute("title",rangeBR2.value);
switch(str){
case 'TL1':
case 'TL2':
red.style.borderTopLeftRadius = rangeTL1.value+'% '+rangeTL2.value+'%';
break;
case 'TR1':
case 'TR2':
red.style.borderTopRightRadius = rangeTR1.value+'% '+rangeTR2.value+'%';
break;
case 'BL1':
case 'BL2':
red.style.borderBottomLeftRadius = rangeBL1.value+'% '+rangeBL2.value+'%';
break;
case 'BR1':
case 'BR2':
red.style.borderBottomRightRadius = rangeBR1.value+'% '+rangeBR2.value+'%';
break;
}
}
</script>
</div>
</body></html>