mirror of
https://github.com/servo/servo.git
synced 2025-06-23 16:44:33 +01:00
Update CSS tests to revision 0698c2aa9ead844b6d7d10eafb096cb1118e13ef
This commit is contained in:
Ms2ger
parent
9aa1b1e408
commit
35c74aecc2
11290 changed files with 92400 additions and 49214 deletions
|
|
@ -12,10 +12,10 @@
|
|||
top: 220px;
|
||||
left: 60px;
|
||||
}
|
||||
article{
|
||||
article{
|
||||
border: 10px solid green;
|
||||
display: block;
|
||||
height: 100px;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -37,9 +37,9 @@
|
|||
assertion = window.getComputedStyle(box).getPropertyValue("transform");
|
||||
test_function = function(){
|
||||
assert_equals(assertion, expectation);
|
||||
}
|
||||
test(test_function, should_string);
|
||||
})();
|
||||
}
|
||||
test(test_function, should_string);
|
||||
})();
|
||||
</script>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@
|
|||
</head>
|
||||
<body>
|
||||
<p>Test passes if you see a green square rotating once on top of a static blue square and no red.</p>
|
||||
|
||||
|
||||
<div class="region">
|
||||
<p> </p>
|
||||
</div>
|
||||
|
|
@ -50,4 +50,5 @@
|
|||
xxxxx<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -31,7 +31,7 @@
|
|||
</head>
|
||||
<body>
|
||||
<p>Test passes if you see a cube (with blue, teal and purple sides) inside a black-bordered rectangle and no red.</p>
|
||||
|
||||
|
||||
<div class="flow" id="container">
|
||||
<!-- A WebGL <canvas> will be created here, via script (see static-cube.js) -->
|
||||
</div>
|
||||
|
|
@ -39,4 +39,5 @@
|
|||
<p> </p>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -34,7 +34,7 @@
|
|||
</head>
|
||||
<body>
|
||||
<p>Test passes if you see a continuous run of text over a cube (with blue, teal and purple sides) and no red.</p>
|
||||
|
||||
|
||||
<div class="flow">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, veniam, dolorum earum molestias iusto corrupti quaerat unde. Nihil, ex, architecto enim doloremque amet ipsa distinctio quibusdam iste eveniet minima quisquam.</div>
|
||||
<div id="container">
|
||||
<!-- A WebGL <canvas> will be created here, via script (see static-cube.js) -->
|
||||
|
|
@ -43,4 +43,5 @@
|
|||
<p> </p>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -83,7 +83,7 @@
|
|||
<td></td>
|
||||
<td>perspective property
|
||||
<ul class="assert">
|
||||
<li>Asserts that the scaling is proportional to d/(d &acirc;&#710;&#8217; Z) for a negative Z</li>
|
||||
<li>Asserts that the scaling is proportional to d/(d - Z) for a negative Z</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
|
|
@ -94,7 +94,7 @@
|
|||
<td></td>
|
||||
<td>perspective property
|
||||
<ul class="assert">
|
||||
<li>Asserts that the scaling is proportional to d/(d &acirc;&#710;&#8217; Z) for a positive Z</li>
|
||||
<li>Asserts that the scaling is proportional to d/(d - Z) for a positive Z</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
|
|
|
|||
|
|
@ -201,7 +201,7 @@
|
|||
<td></td>
|
||||
<td>perspective property
|
||||
<ul class="assert">
|
||||
<li>Asserts that the scaling is proportional to d/(d &acirc;&#710;&#8217; Z) for a negative Z</li>
|
||||
<li>Asserts that the scaling is proportional to d/(d - Z) for a negative Z</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
|
|
@ -212,7 +212,7 @@
|
|||
<td></td>
|
||||
<td>perspective property
|
||||
<ul class="assert">
|
||||
<li>Asserts that the scaling is proportional to d/(d &acirc;&#710;&#8217; Z) for a positive Z</li>
|
||||
<li>Asserts that the scaling is proportional to d/(d - Z) for a positive Z</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
|
|
|
|||
|
|
@ -1161,7 +1161,7 @@
|
|||
<td></td>
|
||||
<td>SVG Transform using transform-origin
|
||||
<ul class="assert">
|
||||
<li>If only one value is specified, the second value is assumed to be &acirc;&#8364;&#732;center&acirc;&#8364;&#8482;</li>
|
||||
<li>If only one value is specified, the second value is assumed to be 'center'</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
<meta content="This transform rotates a tall rectangle by 90 degrees then applies a 3D rotation in the X axis." name="assert">
|
||||
<style type="text/css">
|
||||
.greenSquare {
|
||||
position: absolute;
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 100px;
|
||||
width: 100px;
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
<link href="reference/css-scale-nested-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
div{
|
||||
position: absolute;
|
||||
position: absolute;
|
||||
}
|
||||
.greenSquare {
|
||||
width: 100px;
|
||||
|
|
@ -39,4 +39,5 @@
|
|||
<div class="parentredSquare"><div class="childredSquare"></div></div>
|
||||
<p>The test passes if there is a green square and no red.</p>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -11,17 +11,17 @@
|
|||
div {
|
||||
left: 20px;
|
||||
position: absolute;
|
||||
top: 35px;
|
||||
top: 35px;
|
||||
}
|
||||
div.redsquare {
|
||||
background-color: red;
|
||||
border: 5px solid black;
|
||||
height: 120px;
|
||||
left: 15px;
|
||||
top: 90px;
|
||||
width: 120px;
|
||||
top: 90px;
|
||||
width: 120px;
|
||||
}
|
||||
div.green {
|
||||
div.green {
|
||||
background-color: green;
|
||||
height: 240px;
|
||||
transform: rotate3d(1,0,0,-60deg);
|
||||
|
|
|
|||
|
|
@ -11,17 +11,17 @@
|
|||
div {
|
||||
left: 20px;
|
||||
position: absolute;
|
||||
top: 35px;
|
||||
top: 35px;
|
||||
}
|
||||
div.redsquare {
|
||||
background-color: red;
|
||||
border: 5px solid black;
|
||||
height: 120px;
|
||||
left: 15px;
|
||||
top: 90px;
|
||||
width: 120px;
|
||||
top: 90px;
|
||||
width: 120px;
|
||||
}
|
||||
div.green {
|
||||
div.green {
|
||||
background-color: green;
|
||||
height: 240px;
|
||||
transform: rotate3d(1,0,0,60deg);
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@
|
|||
}
|
||||
div.green {
|
||||
background-color: green;
|
||||
height: 120px;
|
||||
height: 120px;
|
||||
transform: rotate3d(0,1,0,-60deg);
|
||||
width: 240px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@
|
|||
}
|
||||
div.green {
|
||||
background-color: green;
|
||||
height: 120px;
|
||||
height: 120px;
|
||||
transform: rotate3d(0,1,0,60deg);
|
||||
width: 240px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,11 +9,11 @@
|
|||
<meta content="Test checks that rotate a vertical rectangle for -90 degree on Z-axis will cover the horizontal red rectangle." name="assert">
|
||||
<style>
|
||||
div {
|
||||
height: 240px;
|
||||
height: 240px;
|
||||
left: 70px;
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
width: 240px;
|
||||
width: 240px;
|
||||
}
|
||||
div.origin {
|
||||
background-color: green;
|
||||
|
|
@ -23,14 +23,14 @@
|
|||
height: 60px;
|
||||
left: 70px;
|
||||
top: 190px;
|
||||
width: 240px;
|
||||
width: 240px;
|
||||
}
|
||||
div.greensquare {
|
||||
background-color: green;
|
||||
height: 240px;
|
||||
left: 160px;
|
||||
top: 100px;
|
||||
width: 60px;
|
||||
width: 60px;
|
||||
transform: rotate3d(0,0,1,-90deg);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -9,11 +9,11 @@
|
|||
<meta content="Test checks that rotate a vertical rectangle for 90 degree on Z-axis would cover the horizontal red rectangle." name="assert">
|
||||
<style>
|
||||
div {
|
||||
height: 240px;
|
||||
height: 240px;
|
||||
left: 70px;
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
width: 240px;
|
||||
width: 240px;
|
||||
}
|
||||
div.origin {
|
||||
background-color: green;
|
||||
|
|
@ -23,14 +23,14 @@
|
|||
height: 60px;
|
||||
left: 70px;
|
||||
top: 190px;
|
||||
width: 240px;
|
||||
width: 240px;
|
||||
}
|
||||
div.greensquare {
|
||||
background-color: green;
|
||||
height: 240px;
|
||||
left: 160px;
|
||||
top: 100px;
|
||||
width: 60px;
|
||||
width: 60px;
|
||||
transform: rotate3d(0,0,1,90deg);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -11,17 +11,17 @@
|
|||
div {
|
||||
left: 20px;
|
||||
position: absolute;
|
||||
top: 35px;
|
||||
top: 35px;
|
||||
}
|
||||
div.redsquare {
|
||||
background-color: red;
|
||||
border: 5px solid black;
|
||||
height: 120px;
|
||||
left: 15px;
|
||||
top: 90px;
|
||||
width: 120px;
|
||||
top: 90px;
|
||||
width: 120px;
|
||||
}
|
||||
div.green {
|
||||
div.green {
|
||||
background-color: green;
|
||||
height: 240px;
|
||||
transform: rotateX(-60deg);
|
||||
|
|
|
|||
|
|
@ -11,17 +11,17 @@
|
|||
div {
|
||||
left: 20px;
|
||||
position: absolute;
|
||||
top: 35px;
|
||||
top: 35px;
|
||||
}
|
||||
div.redsquare {
|
||||
background-color: red;
|
||||
border: 5px solid black;
|
||||
height: 120px;
|
||||
left: 15px;
|
||||
top: 90px;
|
||||
width: 120px;
|
||||
top: 90px;
|
||||
width: 120px;
|
||||
}
|
||||
div.green {
|
||||
div.green {
|
||||
background-color: green;
|
||||
height: 240px;
|
||||
transform: rotateX(60deg);
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@
|
|||
}
|
||||
div.green {
|
||||
background-color: green;
|
||||
height: 120px;
|
||||
height: 120px;
|
||||
transform: rotateY(-60deg);
|
||||
width: 240px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@
|
|||
}
|
||||
div.green {
|
||||
background-color: green;
|
||||
height: 120px;
|
||||
height: 120px;
|
||||
transform: rotateY(60deg);
|
||||
width: 240px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,11 +9,11 @@
|
|||
<meta content="Test checks that rotate a vertical rectangle for -90 degree on Z-axis will cover the horizontal red rectangle." name="assert">
|
||||
<style>
|
||||
div {
|
||||
height: 240px;
|
||||
height: 240px;
|
||||
left: 70px;
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
width: 240px;
|
||||
width: 240px;
|
||||
}
|
||||
div.origin {
|
||||
background-color: green;
|
||||
|
|
@ -23,14 +23,14 @@
|
|||
height: 60px;
|
||||
left: 70px;
|
||||
top: 190px;
|
||||
width: 240px;
|
||||
width: 240px;
|
||||
}
|
||||
div.greensquare {
|
||||
background-color: green;
|
||||
height: 240px;
|
||||
left: 160px;
|
||||
top: 100px;
|
||||
width: 60px;
|
||||
width: 60px;
|
||||
transform: rotateZ(-90deg);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -9,11 +9,11 @@
|
|||
<meta content="Test checks that rotate a vertical rectangle for 90 degree on Z-axis will cover the horizontal red rectangle." name="assert">
|
||||
<style>
|
||||
div {
|
||||
height: 240px;
|
||||
height: 240px;
|
||||
left: 70px;
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
width: 240px;
|
||||
width: 240px;
|
||||
}
|
||||
div.origin {
|
||||
background-color: green;
|
||||
|
|
@ -23,14 +23,14 @@
|
|||
height: 60px;
|
||||
left: 70px;
|
||||
top: 190px;
|
||||
width: 240px;
|
||||
width: 240px;
|
||||
}
|
||||
div.greensquare {
|
||||
background-color: green;
|
||||
height: 240px;
|
||||
left: 160px;
|
||||
top: 100px;
|
||||
width: 60px;
|
||||
width: 60px;
|
||||
transform: rotateZ(90deg);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<title>CSS Transforms Test: rotateY with transform-style on nested elements</title>
|
||||
<link href="http://www.intel.com" rel="author" title="Intel">
|
||||
<link href="http://www.w3.org/TR/css-transforms-1/#transform-style-property" rel="help">
|
||||
<link href="http://www.w3.org/TR/css-transforms-1/#three-d-transform-functions" rel="help">
|
||||
<link href="http://www.w3.org/TR/css-transforms-1/#three-d-transform-functions" rel="help">
|
||||
<link href="reference/css-transform-3d-transform-style-ref.htm" rel="match">
|
||||
<meta content="" name="flags">
|
||||
<meta content="Test checks that rotate the nested div with transform-style preserve-3d, rotated parent div for -60 degree on Y-axis then and rotated child div for 120 degree, at this time the parent and child should have equal width, then child div could cover the red box." name="assert">
|
||||
|
|
@ -17,7 +17,7 @@
|
|||
height: 200px;
|
||||
width: 200px;
|
||||
left: 65px;
|
||||
top: 45px;
|
||||
top: 45px;
|
||||
}
|
||||
div.blue {
|
||||
background-color: blue;
|
||||
|
|
@ -32,7 +32,7 @@
|
|||
background-color: green;
|
||||
left: 40px;
|
||||
top: 0px;
|
||||
height: 180px;
|
||||
height: 180px;
|
||||
width: 180px;
|
||||
transform: rotateY(120deg);
|
||||
}
|
||||
|
|
@ -40,7 +40,7 @@
|
|||
background-color: red;
|
||||
left: 140px;
|
||||
top: 10px;
|
||||
height: 180px;
|
||||
height: 180px;
|
||||
width: 20px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -52,7 +52,7 @@
|
|||
<div class="blue">
|
||||
<div class="green"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -27,7 +27,7 @@
|
|||
top: 75px;
|
||||
left: 75px;
|
||||
transform: scale(2);
|
||||
|
||||
|
||||
}
|
||||
.child {
|
||||
position: absolute;
|
||||
|
|
@ -46,4 +46,5 @@
|
|||
<div class="child"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -14,7 +14,7 @@
|
|||
position: absolute;
|
||||
}
|
||||
.greenSquare {
|
||||
position: absolute;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100px;
|
||||
|
|
@ -47,4 +47,5 @@
|
|||
<div class="greenSquare"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
position: absolute;
|
||||
}
|
||||
.greenSquare {
|
||||
position: absolute;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100px;
|
||||
|
|
@ -44,4 +44,5 @@
|
|||
<div class="greenSquare"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -36,7 +36,7 @@
|
|||
document.getElementById("test").style.transform = "rotate(30deg) rotateX(60deg)";
|
||||
assert_not_equals(document.getElementById("test").style.transform, "", "expect not NULL");
|
||||
}, "transform: Check valied multi-expr input.");
|
||||
|
||||
|
||||
test(function() {
|
||||
document.getElementById("test").style.transform = "rotate(0)";
|
||||
assert_not_equals(document.getElementById("test").style.transform, "", "expect not NULL");
|
||||
|
|
|
|||
|
|
@ -6,18 +6,18 @@
|
|||
<link href="reference/css-transforms-transformlist-ref.htm" rel="match">
|
||||
<meta content="This test verifies that the CSS transform ends up in the list of SVG transforms" name="assert">
|
||||
<style type="text/css">
|
||||
|
||||
|
||||
#rect {
|
||||
fill: green;
|
||||
transform: translate(10px, 10px);
|
||||
}
|
||||
|
||||
|
||||
#result {
|
||||
width:100px;
|
||||
height:100px;
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
<script>
|
||||
window.addEventListener('load', function(){
|
||||
|
|
@ -25,13 +25,13 @@
|
|||
var result = document.getElementById("result");
|
||||
if(r.transform.baseVal.length>0)
|
||||
result.style.backgroundColor = "rgb(0, 255, 0)";
|
||||
|
||||
|
||||
document.getElementById("svgelement").style.display="none";
|
||||
}, false);
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green square and no red.</p>
|
||||
<p>The test passes if there is a green square and no red.</p>
|
||||
<svg id="svgelement">
|
||||
<rect width="100" id="rect" height="100"></rect>
|
||||
</svg>
|
||||
|
|
|
|||
|
|
@ -5,13 +5,13 @@
|
|||
<link href="http://www.w3.org/TR/css-transforms-1/#transform-property" rel="help">
|
||||
<link href="http://www.w3.org/TR/css-transforms-1/#funcdef-rotate" rel="help">
|
||||
<link href="reference/css3-transform-rotateY-ref.htm" rel="match">
|
||||
<meta content="box width should be equal to projection width if transform rotateY applied" name="assert">
|
||||
<meta content="box width should be equal to projection width if transform rotateY applied" name="assert">
|
||||
<style type="text/css">
|
||||
.red,
|
||||
.green{
|
||||
width:198px;
|
||||
height: 200px;
|
||||
background-color:green;
|
||||
width:198px;
|
||||
height: 200px;
|
||||
background-color:green;
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left:51px;
|
||||
|
|
@ -33,4 +33,5 @@
|
|||
<div class="green"></div>
|
||||
<div class="red"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -5,13 +5,13 @@
|
|||
<link href="http://www.w3.org/TR/css-transforms-1/#transform-property" rel="help">
|
||||
<link href="http://www.w3.org/TR/css-transforms-1/#funcdef-scale" rel="help">
|
||||
<link href="reference/css3-transform-scale-ref-002.htm" rel="match">
|
||||
<meta content="box width and height will be twice larger if transform scale(2) applied" name="assert">
|
||||
<meta content="box width and height will be twice larger if transform scale(2) applied" name="assert">
|
||||
<style type="text/css">
|
||||
.red,
|
||||
.green{
|
||||
width:100px;
|
||||
height: 100px;
|
||||
background-color:green;
|
||||
width:100px;
|
||||
height: 100px;
|
||||
background-color:green;
|
||||
position: absolute;
|
||||
top: 150px;
|
||||
left:150px;
|
||||
|
|
@ -35,4 +35,5 @@
|
|||
<div class="red"></div>
|
||||
<div class="green"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -5,7 +5,7 @@
|
|||
<link href="http://www.w3.org/TR/css-transforms-1/#perspective-property" rel="help">
|
||||
<link href="http://www.w3.org/TR/css-transforms-1/#transform-property" rel="help">
|
||||
<link href="reference/perspective-reftest.htm" rel="match">
|
||||
<meta content="Asserts that the scaling is proportional to d/(d − Z) for a negative Z" name="assert">
|
||||
<meta content="Asserts that the scaling is proportional to d/(d - Z) for a negative Z" name="assert">
|
||||
<style type="text/css">
|
||||
.container {
|
||||
position: absolute;
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<link href="http://www.w3.org/TR/css-transforms-1/#perspective-property" rel="help">
|
||||
<link href="http://www.w3.org/TR/css-transforms-1/#transform-property" rel="help">
|
||||
<link href="reference/perspective-reftest.htm" rel="match">
|
||||
<meta content="Asserts that the scaling is proportional to d/(d − Z) for a positive Z" name="assert">
|
||||
<meta content="Asserts that the scaling is proportional to d/(d - Z) for a positive Z" name="assert">
|
||||
<style type="text/css">
|
||||
.redContainer {
|
||||
position: absolute;
|
||||
|
|
|
|||
|
|
@ -10,19 +10,19 @@
|
|||
top: 220px;
|
||||
left: 60px;
|
||||
}
|
||||
article{
|
||||
article{
|
||||
border: 10px solid green;
|
||||
display: block;
|
||||
height: 100px;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
z-index: 2;
|
||||
cursor:pointer;
|
||||
}
|
||||
}
|
||||
section article{
|
||||
transform: rotate(30deg);
|
||||
transform-origin: 19% 197%;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@
|
|||
</head>
|
||||
<body>
|
||||
<p>Test passes if you see a rotating green square on top of a static blue square and no red.</p>
|
||||
|
||||
|
||||
<div class="region">
|
||||
<div class="transformed flow rotate once">
|
||||
xxxxx<br>
|
||||
|
|
@ -34,4 +34,5 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -18,11 +18,12 @@
|
|||
</head>
|
||||
<body>
|
||||
<p>Test passes if you see a cube (with blue, teal and purple sides) inside a black-bordered rectangle and no red.</p>
|
||||
|
||||
|
||||
<div class="region">
|
||||
<div class="flow" id="container">
|
||||
<!-- A WebGL <canvas> will be created here, via script (see static-cube.js) -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -5,10 +5,10 @@
|
|||
<link href="mailto:rhauck@adobe.com" rel="reviewer" title="Rebecca Hauck">
|
||||
<style type="text/css">
|
||||
div{
|
||||
position: absolute;
|
||||
position: absolute;
|
||||
}
|
||||
.greenSquare {
|
||||
|
||||
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: green;
|
||||
|
|
|
|||
|
|
@ -7,15 +7,15 @@
|
|||
div {
|
||||
left: 20px;
|
||||
position: absolute;
|
||||
top: 35px;
|
||||
top: 35px;
|
||||
}
|
||||
div.greensquare {
|
||||
background-color: green;
|
||||
border: 5px solid black;
|
||||
height: 120px;
|
||||
left: 15px;
|
||||
top: 90px;
|
||||
width: 120px;
|
||||
top: 90px;
|
||||
width: 120px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -5,11 +5,11 @@
|
|||
<link href="http://www.intel.com" rel="author" title="Intel">
|
||||
<style>
|
||||
div {
|
||||
height: 240px;
|
||||
height: 240px;
|
||||
left: 70px;
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
width: 240px;
|
||||
width: 240px;
|
||||
}
|
||||
div.origin {
|
||||
background-color: green;
|
||||
|
|
@ -19,14 +19,14 @@
|
|||
height: 60px;
|
||||
left: 70px;
|
||||
top: 190px;
|
||||
width: 240px;
|
||||
width: 240px;
|
||||
}
|
||||
div.greensquare {
|
||||
background-color: green;
|
||||
height: 240px;
|
||||
left: 160px;
|
||||
top: 100px;
|
||||
width: 60px;
|
||||
width: 60px;
|
||||
transform: rotate3d(0,0,1,90deg);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
height: 200px;
|
||||
left: 65px;
|
||||
top: 45px;
|
||||
width: 200px;
|
||||
width: 200px;
|
||||
}
|
||||
div.blue {
|
||||
background-color: blue;
|
||||
|
|
@ -34,7 +34,7 @@
|
|||
<p>Test passes if there is a gray square with <b>one blue</b> and <b>one green</b> box inside, and no any red.</p>
|
||||
<div class="container"></div>
|
||||
<div class="blue"></div>
|
||||
<div class="greensquare"></div>
|
||||
<div class="greensquare"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -9,12 +9,12 @@
|
|||
height:100px;
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green square and no red.</p>
|
||||
<p>The test passes if there is a green square and no red.</p>
|
||||
<div id="result"></div>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -7,8 +7,8 @@
|
|||
<style type="text/css">
|
||||
.green{
|
||||
width: 140px;
|
||||
height: 200px;
|
||||
background-color:green;
|
||||
height: 200px;
|
||||
background-color:green;
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left:80px;
|
||||
|
|
|
|||
|
|
@ -15,12 +15,12 @@
|
|||
height: 100px;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if:</p>
|
||||
<ul>
|
||||
<ul>
|
||||
<li>The two squares each contain five green horizontal stripes</li>
|
||||
<li>There are two green horizontal stripes below the square on right</li>
|
||||
<li>There is no red</li>
|
||||
|
|
@ -32,4 +32,5 @@
|
|||
XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -23,8 +23,8 @@
|
|||
height: 100px;
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
#failure {
|
||||
position: absolute;
|
||||
left: 25px;
|
||||
|
|
@ -33,9 +33,9 @@
|
|||
background-color: red;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
|
@ -51,4 +51,5 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -18,7 +18,7 @@
|
|||
background-color:green;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
|
|
@ -26,4 +26,5 @@
|
|||
</div>
|
||||
<p>45 degree rotate on y axis</p>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -18,7 +18,7 @@
|
|||
background-color:green;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<p>There is one green area in the box</p>
|
||||
|
|
@ -26,4 +26,5 @@
|
|||
<div class="transformed"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -18,13 +18,14 @@
|
|||
background-color:green;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<p>There is one green area in the box</p>
|
||||
<div class="container">
|
||||
<div class="transformed"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -9,7 +9,7 @@
|
|||
margin-left: 450px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<p>You should see only 1 green area, no red area.</p>
|
||||
|
|
@ -17,4 +17,5 @@
|
|||
<div class="transformed"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -21,11 +21,12 @@
|
|||
margin-top: 150px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<p>You should see only 1 green box.</p>
|
||||
<div class="container">
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -5,11 +5,11 @@
|
|||
<link href="mailto:mymygo@gmail.com" rel="author" title="Myriam Goude">
|
||||
<meta content="svg" name="flags">
|
||||
<style>
|
||||
|
||||
|
||||
h4 {clear:both;}
|
||||
|
||||
|
||||
/* Test 1 - skew on block types */
|
||||
|
||||
|
||||
svg {
|
||||
position:absolute;
|
||||
}
|
||||
|
|
@ -17,7 +17,7 @@
|
|||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<h3>
|
||||
Test 1 - Tests with degrees on block elements.
|
||||
</h3>
|
||||
|
|
@ -27,7 +27,7 @@
|
|||
<svg version="1.1" xmlns:xmlns="http://www.w3.org/2000/svg">
|
||||
<polygon style="fill:lime" points="0,0 150,55 235,205 88,150"></polygon>
|
||||
</svg>
|
||||
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -13,7 +13,7 @@
|
|||
<body>
|
||||
<p>The test passes if there is a green square and no red.</p>
|
||||
<svg>
|
||||
<rect width="100%" fill="green" height="100%"></rect>
|
||||
<rect width="100%" fill="green" height="100%"></rect>
|
||||
</svg>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
<body>
|
||||
<p>The test passes if there is a green square and no red.</p>
|
||||
<svg>
|
||||
<rect width="100%" fill="green" height="100%"></rect>
|
||||
<rect width="100%" fill="green" height="100%"></rect>
|
||||
</svg>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<html><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:ayg@aryeh.name" rel="author" title="Aryeh Gregor">
|
||||
<link href="mailto:dschulze@adobe.com" rel="reviewer" title="Dirk Schulze"> <!-- 2012-04-17 -->
|
||||
<link href="mailto:dschulze@adobe.com" rel="reviewer" title="Dirk Schulze"> <!-- 2012-04-17 -->
|
||||
<style>
|
||||
div {
|
||||
width: 200px;
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<html><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:ayg@aryeh.name" rel="author" title="Aryeh Gregor">
|
||||
<link href="mailto:dschulze@adobe.com" rel="reviewer" title="Dirk Schulze"> <!-- 2012-04-17 -->
|
||||
<link href="mailto:dschulze@adobe.com" rel="reviewer" title="Dirk Schulze"> <!-- 2012-04-17 -->
|
||||
<style>
|
||||
html {
|
||||
background: url(support/transform-triangle-up.svg);
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
top:100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<p style="margin-top:70px;">You should see only one green area, no red area.</p>
|
||||
|
|
@ -27,6 +27,7 @@
|
|||
<div class="inner">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -9,7 +9,7 @@
|
|||
<link href="http://www.w3.org/TR/css3-regions/#flow-from" rel="help">
|
||||
<link href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions" rel="help">
|
||||
<link href="reference/regions-transforms-001-ref.htm" rel="match">
|
||||
<meta content="This test checks that the child is transformed along with the parent when the
|
||||
<meta content="This test checks that the child is transformed along with the parent when the
|
||||
transform is applied to a named flow content node" name="assert">
|
||||
<style>
|
||||
#named-flow-parent {
|
||||
|
|
@ -40,4 +40,5 @@
|
|||
</div>
|
||||
<div id="region"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -9,7 +9,7 @@
|
|||
<link href="http://www.w3.org/TR/css3-regions/#flow-from" rel="help">
|
||||
<link href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions" rel="help">
|
||||
<link href="reference/regions-transforms-001-ref.htm" rel="match">
|
||||
<meta content="This tests checks that when a transform is applied to a parent outside of the named
|
||||
<meta content="This tests checks that when a transform is applied to a parent outside of the named
|
||||
flow but has child in the named flow, the child is not transformed along with the parent." name="assert">
|
||||
<style>
|
||||
#parent {
|
||||
|
|
@ -40,4 +40,5 @@
|
|||
</div>
|
||||
<div id="region"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
<link href="reference/regions-transforms-001-ref.htm" rel="match">
|
||||
<meta content="This test checks that a 3D transform can be applied to a region" name="assert">
|
||||
<style>
|
||||
|
||||
|
||||
#named-flow {
|
||||
width: 75px;
|
||||
height: 75px;
|
||||
|
|
@ -52,11 +52,12 @@
|
|||
</head>
|
||||
<body>
|
||||
<p>The test passes if you see a green square and no red.</p>
|
||||
|
||||
|
||||
<div id="failure1"></div>
|
||||
<div id="failure2"></div>
|
||||
<div id="named-flow"></div>
|
||||
<div id="region"></div>
|
||||
<div id="square"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -7,9 +7,9 @@
|
|||
<link href="http://www.w3.org/TR/css3-regions/#flow-from" rel="help">
|
||||
<link href="http://www.w3.org/TR/css-transforms-1/#three-d-transform-functions" rel="help">
|
||||
<link href="http://www.w3.org/TR/css-transforms-1/#perspective-property" rel="help">
|
||||
<!-- TODO: Link to fragmentation spec section about perspective, fragments and fragmentainers -
|
||||
<!-- TODO: Link to fragmentation spec section about perspective, fragments and fragmentainers -
|
||||
once this gets in the spec. -->
|
||||
<meta content="Test checks that content that has a 3D transform does not respect the perspective
|
||||
<meta content="Test checks that content that has a 3D transform does not respect the perspective
|
||||
set on its parent when flowed into a region." name="assert">
|
||||
<meta content="ahem" name="flags">
|
||||
<link href="reference/regions-transforms-001-ref.htm" rel="match">
|
||||
|
|
@ -57,7 +57,8 @@
|
|||
XXXXX<br>
|
||||
</div>
|
||||
</div>
|
||||
<!-- If the red content is properly transformed, it will be hidden beneath this green div -->
|
||||
<!-- If the red content is properly transformed, it will be hidden beneath this green div -->
|
||||
<div id="green-rect"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -7,7 +7,7 @@
|
|||
<link href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-regions/#flow-from" rel="help">
|
||||
<link href="http://www.w3.org/TR/css-transforms-1/#three-d-transform-functions" rel="help">
|
||||
<meta content="Test checks that content flowed in a region and overflowing it is still rendered
|
||||
<meta content="Test checks that content flowed in a region and overflowing it is still rendered
|
||||
if the region has a 3D transform applied." name="assert">
|
||||
<meta content="ahem" name="flags">
|
||||
<link href="reference/regions-transforms-001-ref.htm" rel="match">
|
||||
|
|
@ -28,7 +28,7 @@
|
|||
flow-from: f;
|
||||
transform: rotateZ(90deg);
|
||||
transform-origin: bottom right;
|
||||
|
||||
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: green;
|
||||
|
|
@ -49,4 +49,5 @@
|
|||
<div class="ahem" id="named-flow">XXXXX</div>
|
||||
<div id="green-rect"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -7,15 +7,15 @@
|
|||
<link href="http://www.w3.org/TR/css3-regions/#flow-from" rel="help">
|
||||
<link href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions" rel="help">
|
||||
<meta content="ahem" name="flags">
|
||||
<meta content="Test checks that if both the content flowed in a region and the region have a
|
||||
transform applied, they are properly composed. More specifically, in this test
|
||||
<meta content="Test checks that if both the content flowed in a region and the region have a
|
||||
transform applied, they are properly composed. More specifically, in this test
|
||||
the content should appear as rotated 180 degrees." name="assert">
|
||||
<link href="reference/regions-transforms-001-ref.htm" rel="match">
|
||||
<style>
|
||||
.ahem {
|
||||
font-family: Ahem;
|
||||
font-size: 20px;
|
||||
line-height: 20px;
|
||||
line-height: 20px;
|
||||
}
|
||||
#named-flow {
|
||||
flow-into: f;
|
||||
|
|
@ -47,4 +47,5 @@
|
|||
<div id="region"></div>
|
||||
<div id="green-rect"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -11,13 +11,13 @@
|
|||
<link href="http://www.w3.org/TR/css3-break/#transforms" rel="help">
|
||||
<link href="reference/regions-transforms-008-ref.htm" rel="match">
|
||||
<meta content="ahem" name="flags">
|
||||
<meta content="This test checks that named flow text content is transformed when it breaks across
|
||||
<meta content="This test checks that named flow text content is transformed when it breaks across
|
||||
multiple regions and that the overflow remains visible." name="assert">
|
||||
<style>
|
||||
.ahem {
|
||||
font-family: Ahem;
|
||||
font-size: 10px;
|
||||
line-height: 20px;
|
||||
line-height: 20px;
|
||||
}
|
||||
#named-flow {
|
||||
color: green;
|
||||
|
|
@ -53,7 +53,7 @@
|
|||
</head>
|
||||
<body>
|
||||
<p>The test passes if:</p>
|
||||
<ul>
|
||||
<ul>
|
||||
<li>The two squares each contain five green horizontal stripes</li>
|
||||
<li>There are two green horizontal stripes below the square on right</li>
|
||||
<li>There is no red</li>
|
||||
|
|
@ -61,14 +61,15 @@
|
|||
<div class="ahem" id="named-flow">XXXXXXXXXXX XXXXXXXXXXX XXXXXXXXXXX XXXXXXXXXXX XXXXXXXXXXX XXXXXXXXXXX XXXXXXXXXXX XXXXXXXXXXX XXXXXXXXXXX XXXXXXXXXXX XXXXXXXXXXX XXXXXXXXXXX</div>
|
||||
<div class="region"></div>
|
||||
<div class="region"></div>
|
||||
|
||||
|
||||
<div class="ahem failure left">
|
||||
XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX
|
||||
</div>
|
||||
<div class="ahem failure right">
|
||||
XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -11,13 +11,13 @@
|
|||
<link href="http://www.w3.org/TR/css3-break/#transforms" rel="help">
|
||||
<link href="reference/regions-transforms-008-ref.htm" rel="match">
|
||||
<meta content="ahem" name="flags">
|
||||
<meta content="This test checks that the regions are transformed when named flow text content breaks
|
||||
<meta content="This test checks that the regions are transformed when named flow text content breaks
|
||||
across multiple regions and that the overflow remains visible." name="assert">
|
||||
<style>
|
||||
.ahem {
|
||||
font-family: Ahem;
|
||||
font-size: 10px;
|
||||
line-height: 20px;
|
||||
line-height: 20px;
|
||||
}
|
||||
#named-flow {
|
||||
color: green;
|
||||
|
|
@ -56,7 +56,7 @@
|
|||
</head>
|
||||
<body>
|
||||
<p>The test passes if:</p>
|
||||
<ul>
|
||||
<ul>
|
||||
<li>The two squares each contain five green horizontal stripes</li>
|
||||
<li>There are two green horizontal stripes below the square on right</li>
|
||||
<li>There is no red</li>
|
||||
|
|
@ -71,4 +71,5 @@
|
|||
XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -9,7 +9,7 @@
|
|||
<link href="http://www.w3.org/TR/css3-regions/#flow-from" rel="help">
|
||||
<link href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions" rel="help">
|
||||
<link href="reference/regions-transforms-010-ref.htm" rel="match">
|
||||
<meta content="This test checks that the region is transformed when a parent and its child are
|
||||
<meta content="This test checks that the region is transformed when a parent and its child are
|
||||
separate named flow content nodes flowing into it." name="assert">
|
||||
<style>
|
||||
#named-flow-parent {
|
||||
|
|
@ -50,4 +50,5 @@
|
|||
</div>
|
||||
<div id="region"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -15,7 +15,7 @@
|
|||
<link href="reference/regions-transforms-013-ref.htm" rel="match">
|
||||
<!-- This reference is for UAs that overflow monolithic content -->
|
||||
<link href="reference/regions-transforms-013-alt-ref.htm" rel="match">
|
||||
<meta content="This test checks that the named flow content that is monolithic is transformed when it
|
||||
<meta content="This test checks that the named flow content that is monolithic is transformed when it
|
||||
breaks across multiple regions whether it is sliced or overflowed at the fragmentainer edge." name="assert">
|
||||
<style>
|
||||
#named-flow {
|
||||
|
|
@ -44,4 +44,5 @@
|
|||
<div class="region" id="region1"></div>
|
||||
<div class="region"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -9,7 +9,7 @@
|
|||
<link href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions" rel="help">
|
||||
<link href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property" rel="help">
|
||||
<link href="reference/regions-transforms-014-ref.htm" rel="match">
|
||||
<meta content="This test checks that the transform and transform-origin are applied to a region
|
||||
<meta content="This test checks that the transform and transform-origin are applied to a region
|
||||
with absolute positioning." name="assert">
|
||||
<style>
|
||||
#named-flow {
|
||||
|
|
@ -36,4 +36,5 @@
|
|||
<div id="named-flow"></div>
|
||||
<div id="region"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -8,7 +8,7 @@
|
|||
<link href="http://www.w3.org/TR/css3-regions/#flow-from" rel="help">
|
||||
<link href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions" rel="help">
|
||||
<link href="reference/regions-transforms-014-ref.htm" rel="match">
|
||||
<meta content="This test checks that the transform and transform-origin are applied to named flow
|
||||
<meta content="This test checks that the transform and transform-origin are applied to named flow
|
||||
content that flows into a region with absolute positioning." name="assert"><style>
|
||||
#named-flow {
|
||||
width: 50px;
|
||||
|
|
@ -16,7 +16,7 @@
|
|||
background-color: green;
|
||||
transform: scale(2);
|
||||
flow-into: f;
|
||||
/* need to use transform-origin, otherwise scale will cause the green square to grow past the left & top
|
||||
/* need to use transform-origin, otherwise scale will cause the green square to grow past the left & top
|
||||
edges of the region box */
|
||||
transform-origin: left top;
|
||||
}
|
||||
|
|
@ -37,4 +37,5 @@
|
|||
<div id="named-flow"></div>
|
||||
<div id="region"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -7,9 +7,9 @@
|
|||
<link href="http://www.w3.org/TR/css-transforms-1/#three-d-transform-functions" rel="help">
|
||||
<link href="http://www.w3.org/TR/css-transforms-1/#perspective-property" rel="help">
|
||||
<link href="http://www.w3.org/TR/css-transforms-1/#perspective-origin-property" rel="help">
|
||||
<!-- TODO: Link to fragmentation spec section about perspective, fragments and fragmentainers -
|
||||
<!-- TODO: Link to fragmentation spec section about perspective, fragments and fragmentainers -
|
||||
once this gets in the spec. -->
|
||||
<meta content="Test checks that the 3D transform is applied named content flow, that the
|
||||
<meta content="Test checks that the 3D transform is applied named content flow, that the
|
||||
perspective set on the region is applied, and that the content is not clipped when
|
||||
the perspective is shifted" name="assert">
|
||||
<meta content="ahem" name="flags">
|
||||
|
|
@ -57,4 +57,5 @@
|
|||
</div>
|
||||
<div id="region"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -56,6 +56,7 @@
|
|||
</div>
|
||||
<div class="region"></div>
|
||||
<div class="region"></div>
|
||||
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
<link href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-break/#transforms" rel="help">
|
||||
<link href="reference/regions-transforms-020-ref.htm" rel="match">
|
||||
<meta content="This test checks that separate transforms can be applied to each named flow content
|
||||
<meta content="This test checks that separate transforms can be applied to each named flow content
|
||||
node that breaks across multiple regions and that each fragment has its own transform origin." name="assert">
|
||||
<style>
|
||||
.named-flow {
|
||||
|
|
@ -50,4 +50,5 @@
|
|||
<div class="region"></div>
|
||||
<div class="region"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -11,7 +11,7 @@
|
|||
<link href="http://www.w3.org/TR/css3-break/#transforms" rel="help">
|
||||
<link href="reference/regions-transforms-020-ref.htm" rel="match">
|
||||
<meta content="ahem" name="flags">
|
||||
<meta content="This test checks that separate transforms can be applied to each named flow content
|
||||
<meta content="This test checks that separate transforms can be applied to each named flow content
|
||||
text node that breaks across multiple regions" name="assert">
|
||||
<style>
|
||||
.ahem {
|
||||
|
|
@ -80,4 +80,5 @@
|
|||
<div class="vertical-bar"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -16,7 +16,7 @@
|
|||
height: 100px;
|
||||
position: absolute;
|
||||
transform:
|
||||
rotate(180deg);
|
||||
rotate(180deg);
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
height: 100px;
|
||||
position: absolute;
|
||||
transform:
|
||||
rotate(270deg);
|
||||
rotate(270deg);
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
height: 100px;
|
||||
position: absolute;
|
||||
transform:
|
||||
rotate(90deg);
|
||||
rotate(90deg);
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
|
|
@ -27,4 +27,5 @@
|
|||
</div>
|
||||
<p>45 degree rotate on y axis</p>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -19,13 +19,14 @@
|
|||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<p>There is one green area in the box</p>
|
||||
<div class="container">
|
||||
<div class="transformed"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -19,13 +19,14 @@
|
|||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<p>There is one green area in the box</p>
|
||||
<div class="container">
|
||||
<div class="transformed"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -8,7 +8,7 @@
|
|||
<meta content="If the second parameter of scale function is not provided, it takes a value equal to the first. This transform causes the element to appear twice as long in both the X and Y axes." name="assert">
|
||||
<style type="text/css">
|
||||
.greenSquare {
|
||||
position: absolute;
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
left: 100px;
|
||||
width: 100px;
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<meta content="If zero value is passed to scale function, it causes the element to disappear." name="assert">
|
||||
<style type="text/css">
|
||||
.greenSquare {
|
||||
position: absolute;
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 50px;
|
||||
width: 100px;
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@
|
|||
margin-left: 450px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<p>You should see only 1 green area, no red area.</p>
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@
|
|||
margin-top: 150px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<p style="margin-top:70px;">You should see only 1 green area</p>
|
||||
|
|
@ -37,4 +37,5 @@
|
|||
</div>
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -9,31 +9,31 @@
|
|||
<meta content="svg" name="flags">
|
||||
<meta content="The lime square in this test has a skew method applied : 30deg on x and 20deg on y. The red polygon should be totally hidden by the lime skewed square. Both start at 0,0" name="assert">
|
||||
<style>
|
||||
|
||||
|
||||
h4 {clear:both;}
|
||||
|
||||
|
||||
/* Test 1 - skew on block types */
|
||||
|
||||
|
||||
svg {
|
||||
position:absolute;
|
||||
}
|
||||
|
||||
|
||||
div {
|
||||
width:150px;
|
||||
height:150px;
|
||||
background-color:lime;
|
||||
}
|
||||
|
||||
|
||||
.skew_div {
|
||||
|
||||
transform: skew(30deg,20deg);
|
||||
transform-origin:0 0;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<h3>
|
||||
Test 1 - Tests with degrees on block elements.
|
||||
</h3>
|
||||
|
|
@ -43,7 +43,7 @@
|
|||
<svg version="1.1" xmlns:xmlns="http://www.w3.org/2000/svg">
|
||||
<polygon style="fill:red" points="0,0 150,55 235,205 88,150"></polygon>
|
||||
</svg>
|
||||
|
||||
|
||||
<div class="skew_div">
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
<p>The test passes if there is a green square and no red.</p>
|
||||
<svg>
|
||||
<path d="M 142,2 210,71 142,139 73,71 Z" fill="red"></path>
|
||||
<rect width="100" y="-100" x="100" fill="green" transform="rotate(45deg)" height="100"></rect>
|
||||
<rect width="100" y="-100" x="100" fill="green" transform="rotate(45deg)" height="100"></rect>
|
||||
</svg>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
<p>The test passes if there is a green square and no red.</p>
|
||||
<svg>
|
||||
<path d="M 2,1 100,1 198,99 101,99 Z" fill="red"></path>
|
||||
<rect width="100" fill="green" transform="skewX(45)" height="100"></rect>
|
||||
<rect width="100" fill="green" transform="skewX(45)" height="100"></rect>
|
||||
</svg>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
<p>The test passes if there is a green square and no red.</p>
|
||||
<svg>
|
||||
<path d="M 2,1 100,1 198,99 101,99 Z" fill="red"></path>
|
||||
<rect width="100" fill="green" transform="skewX(45deg)" height="100"></rect>
|
||||
<rect width="100" fill="green" transform="skewX(45deg)" height="100"></rect>
|
||||
</svg>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
<p>The test passes if there is a green square and no red.</p>
|
||||
<svg>
|
||||
<path d="M 2,1 100,1 198,99 101,99 Z" fill="red"></path>
|
||||
<rect width="100" fill="green" transform="skewX(50grad)" height="100"></rect>
|
||||
<rect width="100" fill="green" transform="skewX(50grad)" height="100"></rect>
|
||||
</svg>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
<p>The test passes if there is a green square and no red.</p>
|
||||
<svg>
|
||||
<path d="M 2,1 100,1 198,99 101,99 Z" fill="red"></path>
|
||||
<rect width="100" fill="green" transform="skewX(0.125turn)" height="100"></rect>
|
||||
<rect width="100" fill="green" transform="skewX(0.125turn)" height="100"></rect>
|
||||
</svg>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
<p>The test passes if there is a green square and no red.</p>
|
||||
<svg>
|
||||
<path d="M 2,1 100,1 198,99 101,99 Z" fill="red"></path>
|
||||
<rect width="100" fill="green" transform="skewX(0.785398163rad)" height="100"></rect>
|
||||
<rect width="100" fill="green" transform="skewX(0.785398163rad)" height="100"></rect>
|
||||
</svg>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
<p>The test passes if there is a green square and no red.</p>
|
||||
<svg>
|
||||
<path d="M 2,1 100,1 198,99 101,99 Z" fill="red"></path>
|
||||
<rect width="100" fill="green" transform="skewX(-315)" height="100"></rect>
|
||||
<rect width="100" fill="green" transform="skewX(-315)" height="100"></rect>
|
||||
</svg>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
<p>The test passes if there is a green square and no red.</p>
|
||||
<svg>
|
||||
<path d="M 2,1 100,1 198,99 101,99 Z" fill="red"></path>
|
||||
<rect width="100" fill="green" transform="skewX(-315deg)" height="100"></rect>
|
||||
<rect width="100" fill="green" transform="skewX(-315deg)" height="100"></rect>
|
||||
</svg>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
<p>The test passes if there is a green square and no red.</p>
|
||||
<svg>
|
||||
<path d="M 2,1 100,1 198,99 101,99 Z" fill="red"></path>
|
||||
<rect width="100" fill="green" transform="skewX(-350grad)" height="100"></rect>
|
||||
<rect width="100" fill="green" transform="skewX(-350grad)" height="100"></rect>
|
||||
</svg>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
<p>The test passes if there is a green square and no red.</p>
|
||||
<svg>
|
||||
<path d="M 2,1 100,1 198,99 101,99 Z" fill="red"></path>
|
||||
<rect width="100" fill="green" transform="skewX(-5.497787144rad)" height="100"></rect>
|
||||
<rect width="100" fill="green" transform="skewX(-5.497787144rad)" height="100"></rect>
|
||||
</svg>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
<p>The test passes if there is a green square and no red.</p>
|
||||
<svg>
|
||||
<path d="M 2,1 100,1 198,99 101,99 Z" fill="red"></path>
|
||||
<rect width="100" fill="green" transform="skewX(-0.875turn)" height="100"></rect>
|
||||
<rect width="100" fill="green" transform="skewX(-0.875turn)" height="100"></rect>
|
||||
</svg>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
<p>The test passes if there is a green square and no red.</p>
|
||||
<svg>
|
||||
<path d="M 2,1 100,1 198,99 101,99 Z" fill="red"></path>
|
||||
<rect width="100" fill="green" transform="skewX(405)" height="100"></rect>
|
||||
<rect width="100" fill="green" transform="skewX(405)" height="100"></rect>
|
||||
</svg>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
<p>The test passes if there is a green square and no red.</p>
|
||||
<svg>
|
||||
<path d="M 2,1 100,1 198,99 101,99 Z" fill="red"></path>
|
||||
<rect width="100" fill="green" transform="skewX(405deg)" height="100"></rect>
|
||||
<rect width="100" fill="green" transform="skewX(405deg)" height="100"></rect>
|
||||
</svg>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
<p>The test passes if there is a green square and no red.</p>
|
||||
<svg>
|
||||
<path d="M 2,1 100,1 198,99 101,99 Z" fill="red"></path>
|
||||
<rect width="100" fill="green" transform="skewX(450grad)" height="100"></rect>
|
||||
<rect width="100" fill="green" transform="skewX(450grad)" height="100"></rect>
|
||||
</svg>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
<p>The test passes if there is a green square and no red.</p>
|
||||
<svg>
|
||||
<path d="M 2,1 100,1 198,99 101,99 Z" fill="red"></path>
|
||||
<rect width="100" fill="green" transform="skewX(7.068583471rad)" height="100"></rect>
|
||||
<rect width="100" fill="green" transform="skewX(7.068583471rad)" height="100"></rect>
|
||||
</svg>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
<p>The test passes if there is a green square and no red.</p>
|
||||
<svg>
|
||||
<path d="M 2,1 100,1 198,99 101,99 Z" fill="red"></path>
|
||||
<rect width="100" fill="green" transform="skewX(1.125turn)" height="100"></rect>
|
||||
<rect width="100" fill="green" transform="skewX(1.125turn)" height="100"></rect>
|
||||
</svg>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
<p>The test passes if there is a green square and no red.</p>
|
||||
<svg>
|
||||
<path d="M 2,1 100,1 198,99 101,99 Z" fill="red"></path>
|
||||
<rect width="100" fill="green" transform="skewX(4.5e1)" height="100"></rect>
|
||||
<rect width="100" fill="green" transform="skewX(4.5e1)" height="100"></rect>
|
||||
</svg>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
<p>The test passes if there is a green square and no red.</p>
|
||||
<svg>
|
||||
<path d="M 2,1 100,1 198,99 101,99 Z" fill="red"></path>
|
||||
<rect width="100" fill="green" transform="skewX(4.5e1deg)" height="100"></rect>
|
||||
<rect width="100" fill="green" transform="skewX(4.5e1deg)" height="100"></rect>
|
||||
</svg>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
<p>The test passes if there is a green square and no red.</p>
|
||||
<svg>
|
||||
<path d="M 1,2 2,99 99,197 99,101 Z" fill="red"></path>
|
||||
<rect width="100" fill="green" transform="skewY(45)" height="100"></rect>
|
||||
<rect width="100" fill="green" transform="skewY(45)" height="100"></rect>
|
||||
</svg>
|
||||
|
||||
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue