Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-03 12:40:06 +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

45
tests/wpt/css-tests/css-transforms-1_dev/xhtml1print/2d-rotate-001.xht Normal file
View file

@ -0,0 +1,45 @@
<!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 Test: CSS Transform using 2d rotate()</title>
<link href="http://mrkn.co/axegs" rel="author" title="Rick Hurst" />
<link href="http://www.w3.org/TR/css-transforms-1/#transform-property" rel="help" />
<link href="reference/2d-rotate-ref.xht" rel="match" />
<meta content="css3, rotate, svg" name="flags" />
<meta content="asserting that you can rotate an element with CSS" name="assert" />
<style type="text/css">
article, svg{
position: absolute;
top: 220px;
left: 60px;
}
article{
border: 10px solid green;
display: block;
height: 100px;
width: 100px;
z-index: 2;
}
section article{
transform: rotate(30deg);
transform-origin: 19% 197%;
}
</style>
</head>
<body>
<p>You should only see one block with color green, and you should not see any red</p>
<section>
<article></article>
<svg width="300" xmlns:xmlns="http://www.w3.org/2000/svg" version="1.1" height="200" xmlns="http://www.w3.org/2000/svg">
<style type="text/css">
rect{
stroke-width: 10;
stroke: red;
fill: none;
}
</style>
<rect y="-38" x="120" width="110" transform="rotate(30)" height="110"></rect>
</svg>
</section>
</body></html>

46
tests/wpt/css-tests/css-transforms-1_dev/xhtml1print/2d-rotate-js.xht Normal file
View file

@ -0,0 +1,46 @@
<!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>JS test: Rotate via javascript must show the correct computed rotation</title>
<link href="http://mrkn.co/axegs" rel="author" title="Rick Hurst" />
<link href="http://www.w3.org/TR/css-transforms-1/#transform-property" rel="help" />
<meta content="css3, rotate, svg" name="flags" />
<meta content="Asserting that you can rotate an element with JS and it show up in CSS computed values not as a matrix but as the rotation" name="assert" />
<style>
#box{
margin-top:30px;
display: block;
width: 50px;
height: 50px;
background-color: green;
}
</style>
</head>
<body>
<h1>Rotate via JS</h1>
<div id="log"></div>
<div id="box"></div>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script>
(function(){
var box = document.getElementById("box"),
assertion = "",
expectation = "rotate(30deg)",
should_string = "this should make a small green square rotated 30 degrees, and the browser should return the rotation as 30 degrees as the computed value NOT a matrix",
extra_properties = null,
computed_angle = 0,
a_1 = "";
a_2 = "",
my_value = "",
test_function = {};
box.style.Transform = "rotate(30deg)";
assertion = window.getComputedStyle(box).getPropertyValue("transform");
test_function = function(){
assert_equals(assertion, expectation);
}
test(test_function, should_string);
})();
</script>
</body></html>

53
tests/wpt/css-tests/css-transforms-1_dev/xhtml1print/animations-001.xht Normal file
View file

@ -0,0 +1,53 @@
<!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 Regions: animating content flowed into a region</title>
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan" />
<link href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" rel="help" />
<link href="http://www.w3.org/TR/css3-regions/#the-flow-from-property" rel="help" />
<link href="http://www.w3.org/TR/css-transforms-1/#transform-functions" rel="help" />
<link href="http://www.w3.org/TR/css3-animations/#animations" rel="help" />
<meta content="Test checks that content that has an animated 3D transform renders and animates when flowed in a region." name="assert" />
<meta content="ahem animated" name="flags" />
<!-- TODO Determine if it's OK for this test to be a ref-test or it should only be a manual one. -->
<link href="reference/animations-001-ref.xht" rel="match" />
<link href="support/animations.css" rel="stylesheet" />
<style>
.transformed {
transform: rotateZ(45deg);
}
.flow {
flow-into: f;
color: green;
font-family: Ahem;
font-size: 20px;
line-height: 1em;
}
.region {
flow-from: f;
width: 100px;
height: 100px;
background-color: lightblue;
}
.region p {
background-color: red;
height: 50%;
}
</style>
</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>&#xA0;</p>
</div>
<div class="transformed flow rotate once">
xxxxx<br />
xxxxx<br />
xxxxx<br />
xxxxx<br />
xxxxx<br />
</div>
</body></html>

57
tests/wpt/css-tests/css-transforms-1_dev/xhtml1print/backface-visibility-hidden-001.xht Normal file
View file

@ -0,0 +1,57 @@
<!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 Transforms Test: transform property with backface visibility = hidden</title>
<link href="mailto:jian.andy.zhang@gmail.com" rel="author" title="Jian Zhang" />
<link href="http://www.w3.org/TR/css-transforms-1/#transform-property" rel="help" />
<link href="http://www.w3.org/TR/css-transforms-1/#propdef-backface-visibility" rel="help" />
<link href="reference/backface-visibility-hidden-ref.xht" rel="match" />
<meta content="When the value of backface visibility property is 'hidden', the back side of a transformed element is invisible when facing the viewer." name="assert" />
<style type="text/css">
.greenSquare {
position: absolute;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
background: green;
z-index: 2;
}
.redSquare {
position: absolute;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
background: red;
z-index: 1;
transform: rotateY(180deg);
}
.face {
backface-visibility: hidden;
}
.card {
transform-style: preserve-3d;
}
.container {
width: 200px;
height: 200px;
perspective: 1000;
transform: rotateY(45deg);
}
</style>
</head>
<body>
<p>The test passes if there is a green retangle and no red.</p>
<div class="container">
<div class="card">
<div class="redSquare face"></div>
<div class="greenSquare face"></div>
</div>
</div>
</body></html>

42
tests/wpt/css-tests/css-transforms-1_dev/xhtml1print/canvas3d-001.xht Normal file
View file

@ -0,0 +1,42 @@
<!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 Regions: rendering 3D canvas elements inside regions</title>
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan" />
<link href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" rel="help" />
<link href="http://www.w3.org/TR/css3-regions/#the-flow-from-property" rel="help" />
<link href="http://www.w3.org/TR/css-transforms-1/#transform-functions" rel="help" />
<meta content="Test checks that when a 3D (webGL) canvas element is flowed in a region it renders as it would render if it wouldn't be flowed in the region." name="assert" />
<meta content="dom" name="flags" />
<link href="reference/canvas3d-001-ref.xht" rel="match" />
<script src="support/Three.js" type="text/javascript"></script>
<script src="support/static-cube.js" type="text/javascript"></script>
<style>
.flow {
flow-into: f;
width: 400px;
height: 300px;
}
.region {
flow-from: f;
width: 400px;
height: 300px;
border: 2px solid black;
}
.region p {
background-color: red;
height: 50%;
}
</style>
</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>
<div class="region">
<p>&#xA0;</p>
</div>
</body></html>

46
tests/wpt/css-tests/css-transforms-1_dev/xhtml1print/canvas3d-002.xht Normal file
View file

@ -0,0 +1,46 @@
<!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 Regions: rendering text flowed in a region on top of 3D content</title>
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan" />
<link href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" rel="help" />
<link href="http://www.w3.org/TR/css3-regions/#the-flow-from-property" rel="help" />
<link href="http://www.w3.org/TR/css-transforms-1/#transform-functions" rel="help" />
<meta content="Test checks that text flowed in a region renders without artifacts when the region overlaps a 3D (webGL) canvas element. This can be problematic in browsers that don't handle layers and/or 3D acceleration correctly." name="assert" />
<meta content="dom" name="flags" />
<link href="reference/canvas3d-002-ref.xht" rel="match" />
<script src="support/Three.js" type="text/javascript"></script>
<script src="support/static-cube.js" type="text/javascript"></script>
<style>
.flow {
flow-into: f;
}
#container {
width: 400px;
height: 300px;
}
.region {
flow-from: f;
width: 200px;
height: 300px;
margin: -250px 100px 0px 100px;
}
.region p {
background-color: red;
height: 50%;
}
</style>
</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) -->
</div>
<div class="region">
<p>&#xA0;</p>
</div>
</body></html>

39
tests/wpt/css-tests/css-transforms-1_dev/xhtml1print/chapter-1.xht Normal file
View file

@ -0,0 +1,39 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Introduction - CSS Transforms Module Level 1 CR Test Suite</title>
<style type="text/css">
@import "http://www.w3.org/StyleSheets/TR/base.css";
@import "../indices.css";
</style>
</head>
<body>
<h1>CSS Transforms Module Level 1 CR Test Suite</h1>
<h2>Introduction (0 tests)</h2>
<table width="100%">
<col id="test-column"></col>
<col id="refs-column"></col>
<col id="flags-column"></col>
<col id="info-column"></col>
<thead>
<tr>
<th>Test</th>
<th><abbr title="Rendering References">Refs</abbr></th>
<th>Flags</th>
<th>Info</th>
</tr>
</thead>
<tbody id="s1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s1">+</a>
<a href="http://www.w3.org/TR/css-transforms-1/#intro">1 Introduction</a></th></tr>
<!-- 0 tests -->
</tbody>
</table>
</body>
</html>

235
tests/wpt/css-tests/css-transforms-1_dev/xhtml1print/chapter-10.xht Normal file
View file

@ -0,0 +1,235 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>The perspective Property - CSS Transforms Module Level 1 CR Test Suite</title>
<style type="text/css">
@import "http://www.w3.org/StyleSheets/TR/base.css";
@import "../indices.css";
</style>
</head>
<body>
<h1>CSS Transforms Module Level 1 CR Test Suite</h1>
<h2>The perspective Property (17 tests)</h2>
<table width="100%">
<col id="test-column"></col>
<col id="refs-column"></col>
<col id="flags-column"></col>
<col id="info-column"></col>
<thead>
<tr>
<th>Test</th>
<th><abbr title="Rendering References">Refs</abbr></th>
<th>Flags</th>
<th>Info</th>
</tr>
</thead>
<tbody id="s10">
<tr><th colspan="4" scope="rowgroup">
<a href="#s10">+</a>
<a href="http://www.w3.org/TR/css-transforms-1/#perspective-property">10 The perspective Property</a></th></tr>
<!-- 16 tests -->
<tr id="perspective-origin-x-10" class="">
<td>
<a href="perspective-origin-x.xht">perspective-origin-x</a></td>
<td><a href="reference/perspective-origin-reftest.xht">=</a> </td>
<td></td>
<td>perspective property
<ul class="assert">
<li>Asserts that origin 'x1' visually moves the objects '-x1*d/(d-1)'</li>
</ul>
</td>
</tr>
<tr id="perspective-translatez-0-10" class="primary">
<td><strong>
<a href="perspective-translateZ-0.xht">perspective-translatez-0</a></strong></td>
<td><a href="reference/perspective-reftest.xht">=</a> </td>
<td></td>
<td>perspective property
<ul class="assert">
<li>Asserts that points on the z=0 plane are unchanged</li>
</ul>
</td>
</tr>
<tr id="perspective-translatez-negative-10" class="primary">
<td><strong>
<a href="perspective-translateZ-negative.xht">perspective-translatez-negative</a></strong></td>
<td><a href="reference/perspective-reftest.xht">=</a> </td>
<td></td>
<td>perspective property
<ul class="assert">
<li>Asserts that the scaling is proportional to d/(d &amp;acirc;&amp;#710;&amp;#8217; Z) for a negative Z</li>
</ul>
</td>
</tr>
<tr id="perspective-translatez-positive-10" class="primary">
<td><strong>
<a href="perspective-translateZ-positive.xht">perspective-translatez-positive</a></strong></td>
<td><a href="reference/perspective-reftest.xht">=</a> </td>
<td></td>
<td>perspective property
<ul class="assert">
<li>Asserts that the scaling is proportional to d/(d &amp;acirc;&amp;#710;&amp;#8217; Z) for a positive Z</li>
</ul>
</td>
</tr>
<tr id="regions-transforms-005-10" class="ahem">
<td>
<a href="regions-transforms-005.xht">regions-transforms-005</a></td>
<td><a href="reference/regions-transforms-001-ref.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>CSS Regions: perspective set on the named flow content's parent does not apply when content flows into region
<ul class="assert">
<li>Test checks that content that has a 3D transform does not respect the perspective set on its parent when flowed into a region.</li>
</ul>
</td>
</tr>
<tr id="regions-transforms-019-10" class="ahem">
<td>
<a href="regions-transforms-019.xht">regions-transforms-019</a></td>
<td><a href="reference/regions-transforms-019-ref.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>CSS Regions: 3D transform on named flow (text) content with perspective property set on region
<ul class="assert">
<li>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</li>
</ul>
</td>
</tr>
<tr id="transform3d-perspective-001-10" class="primary">
<td><strong>
<a href="transform3d-perspective-001.xht">transform3d-perspective-001</a></strong></td>
<td><a href="reference/transform3d-perspective-001-ref.xht">=</a> <a href="reference/transform-lime-square-ref.xht">&#x2260;</a> </td>
<td></td>
<td>perspective()
<ul class="assert">
<li>This tests that the perspective() transform works the same as an equivalent 'perspective' property.</li>
</ul>
</td>
</tr>
<tr id="transform3d-perspective-002-10" class="primary">
<td><strong>
<a href="transform3d-perspective-002.xht">transform3d-perspective-002</a></strong></td>
<td><a href="reference/transform3d-perspective-001-ref.xht">=</a> <a href="reference/transform-lime-square-ref.xht">&#x2260;</a> </td>
<td></td>
<td>Inherited Perspective
<ul class="assert">
<li>This tests that 'perspective: inherit' works the same as specifying that perspective to start with.</li>
</ul>
</td>
</tr>
<tr id="transform3d-perspective-003-10" class="primary">
<td><strong>
<a href="transform3d-perspective-003.xht">transform3d-perspective-003</a></strong></td>
<td><a href="reference/transform-lime-square-ref.xht">=</a> </td>
<td></td>
<td>Perspective on Grandparent
<ul class="assert">
<li>This tests that 'perspective' affects only the element's children, not its grandchildren.</li>
</ul>
</td>
</tr>
<tr id="transform3d-perspective-004-10" class="primary">
<td><strong>
<a href="transform3d-perspective-004.xht">transform3d-perspective-004</a></strong></td>
<td><a href="reference/transform-lime-square-ref.xht">=</a> </td>
<td></td>
<td>'perspective: 1000px' on Grandparent and 'perspective: none' on Parent
<ul class="assert">
<li>This tests that 'perspective: none' actually results in no perspective being applied to children, even if the grandparent has perspective.</li>
</ul>
</td>
</tr>
<tr id="transform3d-perspective-005-10" class="primary">
<td><strong>
<a href="transform3d-perspective-005.xht">transform3d-perspective-005</a></strong></td>
<td><a href="reference/transform-lime-square-ref.xht">=</a> </td>
<td></td>
<td>'perspective: 1000px' on Grandparent and 'perspective: 0px' on Parent
<ul class="assert">
<li>This tests that 'perspective: 0px' behaves the same as no perspective being specified at all (it's a parse error).</li>
</ul>
</td>
</tr>
<tr id="transform3d-perspective-006-10" class="primary">
<td><strong>
<a href="transform3d-perspective-006.xht">transform3d-perspective-006</a></strong></td>
<td><a href="reference/transform-lime-square-ref.xht">=</a> </td>
<td></td>
<td>Simple Perspective
<ul class="assert">
<li>This tests the 'perspective' property in a very simple case, such that the reference can be constructed without using CSS transforms.</li>
</ul>
</td>
</tr>
<tr id="transform3d-perspective-007-10" class="primary">
<td><strong>
<a href="transform3d-perspective-007.xht">transform3d-perspective-007</a></strong></td>
<td><a href="reference/transform3d-perspective-001-ref.xht">=</a> <a href="reference/transform-lime-square-ref.xht">&#x2260;</a> </td>
<td></td>
<td>Perspective on Table Parent
<ul class="assert">
<li>This tests that tables are correctly affected by perspective on their parent. It's motivated by a real-world implementation bug: &lt;https://bugzilla.mozilla.org/show_bug.cgi?id=726601&gt;.</li>
</ul>
</td>
</tr>
<tr id="transform3d-perspective-008-10" class="primary">
<td><strong>
<a href="transform3d-perspective-008.xht">transform3d-perspective-008</a></strong></td>
<td><a href="reference/transform-lime-square-ref.xht">=</a> </td>
<td></td>
<td>Perspective on Table
<ul class="assert">
<li>This tests that perspective on a table only affects its children, not the table itself. It's motivated by a real-world implementation bug: &lt;https://bugzilla.mozilla.org/show_bug.cgi?id=726601&gt;.</li>
</ul>
</td>
</tr>
<tr id="transform3d-rotatex-perspective-002-10" class="">
<td>
<a href="transform3d-rotatex-perspective-002.xht">transform3d-rotatex-perspective-002</a></td>
<td><a href="reference/transform-lime-square-ref.xht">&#x2260;</a> <a href="reference/transform3d-rotatex-ref.xht">&#x2260;</a> </td>
<td></td>
<td>rotatex() and 'perspective'
<ul class="assert">
<li>This tests that 'perspective' has some effect when combined with rotatex() (i.e., is not equivalent to simply omitting the perspective).</li>
</ul>
</td>
</tr>
<tr id="transform3d-rotatex-perspective-003-10" class="primary">
<td><strong>
<a href="transform3d-rotatex-perspective-003.xht">transform3d-rotatex-perspective-003</a></strong></td>
<td><a href="reference/transform3d-rotatex-perspective-ref.xht">=</a> <a href="reference/transform3d-rotatex-perspective-notref.xht">&#x2260;</a> </td>
<td></td>
<td>'perspective' and 'opacity'
<ul class="assert">
<li>This tests for a real-world implementation bug: see &lt;https://bugzilla.mozilla.org/show_bug.cgi?id=707563&gt;. The only difference between the test and reference is 'opacity: 0.9999', which should not affect anything in the test.</li>
</ul>
</td>
</tr>
</tbody>
<tbody id="s10.#issue-8678c096">
<!-- 0 tests -->
</tbody>
<tbody id="s10.#none">
<!-- 0 tests -->
</tbody>
<tbody id="s10.#propdef-perspective">
<!-- 1 tests -->
<tr id="css3-transform-perspective-10.#propdef-perspective" class="primary">
<td><strong>
<a href="css3-transform-perspective.xht">css3-transform-perspective</a></strong></td>
<td><a href="reference/css3-transform-perspective-ref.xht">=</a> </td>
<td></td>
<td>rotateX 90 degrees with perspective make it invisible
<ul class="assert">
<li>Test passes if rotateX 90 degrees with perspective make it invisible</li>
</ul>
</td>
</tr>
</tbody>
</table>
</body>
</html>

178
tests/wpt/css-tests/css-transforms-1_dev/xhtml1print/chapter-11.xht Normal file
View file

@ -0,0 +1,178 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>The perspective-origin Property - CSS Transforms Module Level 1 CR Test Suite</title>
<style type="text/css">
@import "http://www.w3.org/StyleSheets/TR/base.css";
@import "../indices.css";
</style>
</head>
<body>
<h1>CSS Transforms Module Level 1 CR Test Suite</h1>
<h2>The perspective-origin Property (11 tests)</h2>
<table width="100%">
<col id="test-column"></col>
<col id="refs-column"></col>
<col id="flags-column"></col>
<col id="info-column"></col>
<thead>
<tr>
<th>Test</th>
<th><abbr title="Rendering References">Refs</abbr></th>
<th>Flags</th>
<th>Info</th>
</tr>
</thead>
<tbody id="s11">
<tr><th colspan="4" scope="rowgroup">
<a href="#s11">+</a>
<a href="http://www.w3.org/TR/css-transforms-1/#perspective-origin-property">11 The perspective-origin Property</a></th></tr>
<!-- 1 tests -->
<tr id="regions-transforms-019-11" class="ahem">
<td>
<a href="regions-transforms-019.xht">regions-transforms-019</a></td>
<td><a href="reference/regions-transforms-019-ref.xht">=</a> </td>
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr></td>
<td>CSS Regions: 3D transform on named flow (text) content with perspective property set on region
<ul class="assert">
<li>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</li>
</ul>
</td>
</tr>
</tbody>
<tbody id="s11.#propdef-perspective-origin">
<!-- 10 tests -->
<tr id="perspective-origin-001-11.#propdef-perspective-origin" class="primary">
<td><strong>
<a href="perspective-origin-001.xht">perspective-origin-001</a></strong></td>
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
<td></td>
<td>perspective-origin - 0px center('center' computes to '50%' in vertical position)
<ul class="assert">
<li>The 'perspective-origin' property set 'center' computes to 50% for the vertical position.</li>
</ul>
</td>
</tr>
<tr id="perspective-origin-002-11.#propdef-perspective-origin" class="primary">
<td><strong>
<a href="perspective-origin-002.xht">perspective-origin-002</a></strong></td>
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
<td></td>
<td>perspective-origin - center 0px('center' computes to '50%' in horizontal position)
<ul class="assert">
<li>The 'perspective-origin' property set 'center' computes to 50% for the horizontal position.</li>
</ul>
</td>
</tr>
<tr id="perspective-origin-003-11.#propdef-perspective-origin" class="primary">
<td><strong>
<a href="perspective-origin-003.xht">perspective-origin-003</a></strong></td>
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
<td></td>
<td>perspective-origin - 50% bottom('bottom' computes to '100%' in vertical position)
<ul class="assert">
<li>The 'perspective-origin' property set 'bottom' computes to 100% for the vertical position.</li>
</ul>
</td>
</tr>
<tr id="perspective-origin-004-11.#propdef-perspective-origin" class="primary">
<td><strong>
<a href="perspective-origin-004.xht">perspective-origin-004</a></strong></td>
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
<td></td>
<td>perspective-origin - 50% top('top' computes to '0%' in vertical position)
<ul class="assert">
<li>The 'perspective-origin' property set 'top' computes to 0% for the vertical position.</li>
</ul>
</td>
</tr>
<tr id="perspective-origin-005-11.#propdef-perspective-origin" class="primary">
<td><strong>
<a href="perspective-origin-005.xht">perspective-origin-005</a></strong></td>
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
<td></td>
<td>perspective-origin - left 50%('left' computes to '0%' in horizontal position)
<ul class="assert">
<li>The 'perspective-origin' property set 'left' computes to 0% for the horizontal position.</li>
</ul>
</td>
</tr>
<tr id="perspective-origin-006-11.#propdef-perspective-origin" class="primary">
<td><strong>
<a href="perspective-origin-006.xht">perspective-origin-006</a></strong></td>
<td><a href="reference/ref-filled-green-100px-square.xht">=</a> </td>
<td></td>
<td>perspective-origin - right 50%('right' computes to '100%' in horizontal position)
<ul class="assert">
<li>The 'perspective-origin' property set 'right' computes to 100% for the horizontal position.</li>
</ul>
</td>
</tr>
<tr id="perspective-origin-x-11.#propdef-perspective-origin" class="primary">
<td><strong>
<a href="perspective-origin-x.xht">perspective-origin-x</a></strong></td>
<td><a href="reference/perspective-origin-reftest.xht">=</a> </td>
<td></td>
<td>perspective property
<ul class="assert">
<li>Asserts that origin 'x1' visually moves the objects '-x1*d/(d-1)'</li>
</ul>
</td>
</tr>
<tr id="perspective-origin-xy-11.#propdef-perspective-origin" class="primary">
<td><strong>
<a href="perspective-origin-xy.xht">perspective-origin-xy</a></strong></td>
<td><a href="reference/perspective-reftest.xht">=</a> </td>
<td></td>
<td>perspective property
<ul class="assert">
<li>Asserts that origin '&lt;x,y&gt;' visually moves the objects '&lt;-x,-y&gt;*d/(d-1)'</li>
</ul>
</td>
</tr>
<tr id="transform3d-perspective-009-11.#propdef-perspective-origin" class="primary">
<td><strong>
<a href="transform3d-perspective-009.xht">transform3d-perspective-009</a></strong></td>
<td><a href="reference/transform3d-perspective-009-ref.xht">=</a> <a href="reference/transform-lime-square-ref.xht">&#x2260;</a> </td>
<td></td>
<td>'perspective-origin' and translate()
<ul class="assert">
<li>This tests that 'perspective' and 'perspective-origin' have the same effect as an appropriately calculated sequence of translate() and perspective(). The reference file's body has a width of 400px and a height of 100px, so the perspective-origin should be (200, 50). The transform-origin is 'top', which works out to (50, 0). Thus we translate by (150, 50) to get the right origin.</li>
</ul>
</td>
</tr>
<tr id="transform3d-perspective-origin-001-11.#propdef-perspective-origin" class="primary">
<td><strong>
<a href="transform3d-perspective-origin-001.xht">transform3d-perspective-origin-001</a></strong></td>
<td><a href="reference/transform3d-perspective-origin-ref.xht">=</a> <a href="reference/transform-lime-square-ref.xht">&#x2260;</a> <a href="transform3d-rotatex-perspective-001.xht">&#x2260;</a> <a href="reference/transform3d-rotatex-ref.xht">&#x2260;</a> </td>
<td></td>
<td>perspective-origin
<ul class="assert">
<li>This tests that 'perspective-origin: 0 0' is the same as 'perspective-origin: top left', different from no 'perspective-origin', and different from no perspective or no transform.</li>
</ul>
</td>
</tr>
</tbody>
<tbody id="s11.#valuedef-bottom">
<!-- 0 tests -->
</tbody>
<tbody id="s11.#valuedef-center">
<!-- 0 tests -->
</tbody>
<tbody id="s11.#valuedef-left">
<!-- 0 tests -->
</tbody>
<tbody id="s11.#valuedef-right">
<!-- 0 tests -->
</tbody>
<tbody id="s11.#valuedef-top">
<!-- 0 tests -->
</tbody>
</table>
</body>
</html>

133
tests/wpt/css-tests/css-transforms-1_dev/xhtml1print/chapter-12.xht Normal file
View file

@ -0,0 +1,133 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>The backface-visibility Property - CSS Transforms Module Level 1 CR Test Suite</title>
<style type="text/css">
@import "http://www.w3.org/StyleSheets/TR/base.css";
@import "../indices.css";
</style>
</head>
<body>
<h1>CSS Transforms Module Level 1 CR Test Suite</h1>
<h2>The backface-visibility Property (8 tests)</h2>
<table width="100%">
<col id="test-column"></col>
<col id="refs-column"></col>
<col id="flags-column"></col>
<col id="info-column"></col>
<thead>
<tr>
<th>Test</th>
<th><abbr title="Rendering References">Refs</abbr></th>
<th>Flags</th>
<th>Info</th>
</tr>
</thead>
<tbody id="s12">
<tr><th colspan="4" scope="rowgroup">
<a href="#s12">+</a>
<a href="http://www.w3.org/TR/css-transforms-1/#backface-visibility-property">12 The backface-visibility Property</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s12.#issue-5f192247">
<!-- 0 tests -->
</tbody>
<tbody id="s12.#propdef-backface-visibility">
<!-- 8 tests -->
<tr id="backface-visibility-hidden-001-12.#propdef-backface-visibility" class="">
<td>
<a href="backface-visibility-hidden-001.xht">backface-visibility-hidden-001</a></td>
<td><a href="reference/backface-visibility-hidden-ref.xht">=</a> </td>
<td></td>
<td>transform property with backface visibility = hidden
<ul class="assert">
<li>When the value of backface visibility property is 'hidden', the back side of a transformed element is invisible when facing the viewer.</li>
</ul>
</td>
</tr>
<tr id="transform3d-backface-visibility-001-12.#propdef-backface-visibility" class="primary">
<td><strong>
<a href="transform3d-backface-visibility-001.xht">transform3d-backface-visibility-001</a></strong></td>
<td><a href="reference/transform-lime-square-ref.xht">=</a> </td>
<td></td>
<td>Simple Backface-Visibility, rotatex(180deg)
<ul class="assert">
<li>This tests that a very simple case of backface-visibility causes the element to disappear: rotateX(180deg) is specified on the same element that has backface-visibility: hidden.</li>
</ul>
</td>
</tr>
<tr id="transform3d-backface-visibility-002-12.#propdef-backface-visibility" class="primary">
<td><strong>
<a href="transform3d-backface-visibility-002.xht">transform3d-backface-visibility-002</a></strong></td>
<td><a href="reference/transform-lime-square-ref.xht">=</a> </td>
<td></td>
<td>Backface-Visibility With Transformed Parent and Child in Different Rendering Contexts
<ul class="assert">
<li>This tests that if an element has 'backface-visibility: hidden' and is rotated 180deg, so it would normally disappear, it doesn't reappear just because its parent also has a 180deg rotation. The rotations don't cancel, since the parent doesn't have 'transform-style: preserve-3d' and is in a different rendering context.</li>
</ul>
</td>
</tr>
<tr id="transform3d-backface-visibility-003-12.#propdef-backface-visibility" class="primary">
<td><strong>
<a href="transform3d-backface-visibility-003.xht">transform3d-backface-visibility-003</a></strong></td>
<td><a href="reference/transform-lime-square-ref.xht">=</a> </td>
<td></td>
<td>Simple Backface-Visibility, rotatex(180deg) on Table
<ul class="assert">
<li>This is identical to transform3d-backface-visibility-001.html, except that display: table is specified too. This is motivated by a real-world UA bug: &lt;https://bugzilla.mozilla.org/show_bug.cgi?id=724750&gt;.</li>
</ul>
</td>
</tr>
<tr id="transform3d-backface-visibility-004-12.#propdef-backface-visibility" class="primary">
<td><strong>
<a href="transform3d-backface-visibility-004.xht">transform3d-backface-visibility-004</a></strong></td>
<td><a href="reference/transform-lime-square-ref.xht">=</a> </td>
<td></td>
<td>Backface-Visibility With Transformed Parent in Same Rendering Context, Split Transform
<ul class="assert">
<li>This tests that if a parent and child are in the same 3D rendering context, and a 60deg rotation on the parent combines with a 60deg rotation on the child to make a 120deg rotation, the child will disappear if 'backface-visibility: hidden' is specified, just like if the 120deg rotation were specified on the child to start with.</li>
</ul>
</td>
</tr>
<tr id="transform3d-backface-visibility-005-12.#propdef-backface-visibility" class="primary">
<td><strong>
<a href="transform3d-backface-visibility-005.xht">transform3d-backface-visibility-005</a></strong></td>
<td><a href="reference/transform-lime-square-ref.xht">=</a> </td>
<td></td>
<td>Backface-Visibility With Transformed Parent in Different Rendering Context
<ul class="assert">
<li>This tests that if an element is not transformed, but its parent is rotated 180deg in a different rendering context, the child's 'backface-visibility: hidden' does not make it disappear. Only transforms that affect the child itself are relevant to 'backface-visibility'.</li>
</ul>
</td>
</tr>
<tr id="transform3d-backface-visibility-006-12.#propdef-backface-visibility" class="primary">
<td><strong>
<a href="transform3d-backface-visibility-006.xht">transform3d-backface-visibility-006</a></strong></td>
<td><a href="reference/transform-lime-square-ref.xht">=</a> </td>
<td></td>
<td>Backface-Visibility With Transformed Parent in Same Rendering Context
<ul class="assert">
<li>This is the same as transform3d-backface-visibility-005.html, except that the parent has 'transform-style: preserve-3d'. Thus the child is affected by the parent's transform and should not be visible.</li>
</ul>
</td>
</tr>
<tr id="transform3d-backface-visibility-007-12.#propdef-backface-visibility" class="primary">
<td><strong>
<a href="transform3d-backface-visibility-007.xht">transform3d-backface-visibility-007</a></strong></td>
<td><a href="reference/transform-lime-square-ref.xht">=</a> </td>
<td></td>
<td>Simple Backface-Visibility, scalez(-1)
<ul class="assert">
<li>This is the same as transform3d-backface-visibility-001.html, except it uses scalez(-1) instead of rotatex(180deg). scalez(-1) has no visible effect when applied by itself to a box, since the box's Z-coordinates are all 0, but it still causes it to be affected by 'backface-visibility'.</li>
</ul>
</td>
</tr>
</tbody>
</table>
</body>
</html>

14654
tests/wpt/css-tests/css-transforms-1_dev/xhtml1print/chapter-13.xht Normal file
View file

File diff suppressed because it is too large Load diff

57
tests/wpt/css-tests/css-transforms-1_dev/xhtml1print/chapter-14.xht Normal file
View file

@ -0,0 +1,57 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>SVG Animation - CSS Transforms Module Level 1 CR Test Suite</title>
<style type="text/css">
@import "http://www.w3.org/StyleSheets/TR/base.css";
@import "../indices.css";
</style>
</head>
<body>
<h1>CSS Transforms Module Level 1 CR Test Suite</h1>
<h2>SVG Animation (0 tests)</h2>
<table width="100%">
<col id="test-column"></col>
<col id="refs-column"></col>
<col id="flags-column"></col>
<col id="info-column"></col>
<thead>
<tr>
<th>Test</th>
<th><abbr title="Rendering References">Refs</abbr></th>
<th>Flags</th>
<th>Info</th>
</tr>
</thead>
<tbody id="s14">
<tr><th colspan="4" scope="rowgroup">
<a href="#s14">+</a>
<a href="http://www.w3.org/TR/css-transforms-1/#svg-animation">14 SVG Animation</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s14.1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s14.1">+</a>
<a href="http://www.w3.org/TR/css-transforms-1/#svg-animate-element">14.1 The <animate> and <set> element</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s14.2">
<tr><th colspan="4" scope="rowgroup">
<a href="#s14.2">+</a>
<a href="http://www.w3.org/TR/css-transforms-1/#neutral-element">14.2 Neutral element for addition</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s14.3">
<tr><th colspan="4" scope="rowgroup">
<a href="#s14.3">+</a>
<a href="http://www.w3.org/TR/css-transforms-1/#svg-attribute-name">14.3 The SVG attributeName attribute</a></th></tr>
<!-- 0 tests -->
</tbody>
</table>
</body>
</html>

12716
tests/wpt/css-tests/css-transforms-1_dev/xhtml1print/chapter-15.xht Normal file
View file

File diff suppressed because it is too large Load diff

182
tests/wpt/css-tests/css-transforms-1_dev/xhtml1print/chapter-16.xht Normal file
View file

@ -0,0 +1,182 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>The Transform Function Lists - CSS Transforms Module Level 1 CR Test Suite</title>
<style type="text/css">
@import "http://www.w3.org/StyleSheets/TR/base.css";
@import "../indices.css";
</style>
</head>
<body>
<h1>CSS Transforms Module Level 1 CR Test Suite</h1>
<h2>The Transform Function Lists (13 tests)</h2>
<table width="100%">
<col id="test-column"></col>
<col id="refs-column"></col>
<col id="flags-column"></col>
<col id="info-column"></col>
<thead>
<tr>
<th>Test</th>
<th><abbr title="Rendering References">Refs</abbr></th>
<th>Flags</th>
<th>Info</th>
</tr>
</thead>
<tbody id="s16">
<tr><th colspan="4" scope="rowgroup">
<a href="#s16">+</a>
<a href="http://www.w3.org/TR/css-transforms-1/#transform-function-lists">16 The Transform Function Lists</a></th></tr>
<!-- 13 tests -->
<tr id="svg-transform-list-separations-001-16" class="svg">
<td>
<a href="svg-transform-list-separations-001.xht">svg-transform-list-separations-001</a></td>
<td><a href="reference/svg-transform-list-separations-ref.xht">=</a> </td>
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
<td>No separations between transform functions on SVG presentation attribute
<ul class="assert">
<li>The rect in the test should have an x offset of 100, a y offset of 100, and should be rotated 90 degrees clockwise with no separation between the 3 transform functions in the list</li>
</ul>
</td>
</tr>
<tr id="svg-transform-list-separations-002-16" class="svg">
<td>
<a href="svg-transform-list-separations-002.xht">svg-transform-list-separations-002</a></td>
<td><a href="reference/svg-transform-list-separations-ref.xht">=</a> </td>
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
<td>Comma + no whitespace separations between transform functions on SVG presentation attribute
<ul class="assert">
<li>The rect in the test should have an x offset of 100, a y offset of 100, and should be rotated 90 degrees clockwise with 3 transform functions in the list delimited by commas with no whitespace.</li>
</ul>
</td>
</tr>
<tr id="svg-transform-list-separations-003-16" class="svg">
<td>
<a href="svg-transform-list-separations-003.xht">svg-transform-list-separations-003</a></td>
<td><a href="reference/svg-transform-list-separations-ref.xht">=</a> </td>
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
<td>Comma + whitespace separations between transform functions on SVG presentation attribute
<ul class="assert">
<li>The rect in the test should have an x offset of 100, a y offset of 100, and should be rotated 90 degrees clockwise with 3 transform functions in the list delimited by commas with whitespace.</li>
</ul>
</td>
</tr>
<tr id="svg-transform-list-separations-004-16" class="svg">
<td>
<a href="svg-transform-list-separations-004.xht">svg-transform-list-separations-004</a></td>
<td><a href="reference/svg-transform-list-separations-ref.xht">=</a> </td>
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
<td>Whitespace separations between transform functions on SVG presentation attribute
<ul class="assert">
<li>The rect in the test should have an x offset of 100, a y offset of 100, and should be rotated 90 degrees clockwise with 3 transform functions in the list delimited by whitespace.</li>
</ul>
</td>
</tr>
<tr id="svg-transform-list-separations-005-16" class="svg">
<td>
<a href="svg-transform-list-separations-005.xht">svg-transform-list-separations-005</a></td>
<td><a href="reference/svg-transform-list-separations-ref.xht">=</a> </td>
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
<td>Comma, whitespace, and no separations between transform functions on SVG presentation attribute
<ul class="assert">
<li>The rect in the test should have an x offset of 100, a y offset of 100, and should be rotated 90 degrees clockwise with 4 transform functions in the list delimited by a comma, whitespace, and nothing.</li>
</ul>
</td>
</tr>
<tr id="svg-transform-list-separations-006-16" class="svg">
<td>
<a href="svg-transform-list-separations-006.xht">svg-transform-list-separations-006</a></td>
<td><a href="reference/svg-transform-list-separations-ref.xht">=</a> </td>
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
<td>Multiple spaces between transform functions on SVG presentation attribute
<ul class="assert">
<li>The rect in the test should have an x offset of 100, a y offset of 100, and should be rotated 90 degrees clockwise with 4 transform functions in the list with multiple spaces between them</li>
</ul>
</td>
</tr>
<tr id="svg-transform-list-separations-007-16" class="svg">
<td>
<a href="svg-transform-list-separations-007.xht">svg-transform-list-separations-007</a></td>
<td><a href="reference/svg-transform-list-separations-ref.xht">=</a> </td>
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
<td>Multiple spaces before and after transform functions on SVG presentation attribute
<ul class="assert">
<li>The rect in the test should have an x offset of 100, a y offset of 100, and should be rotated 90 degrees clockwise with multiple spaces before and after the transform function list</li>
</ul>
</td>
</tr>
<tr id="svg-transform-list-separations-008-16" class="svg">
<td>
<a href="svg-transform-list-separations-008.xht">svg-transform-list-separations-008</a></td>
<td><a href="reference/svg-transform-list-separations-ref.xht">=</a> </td>
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
<td>Transform functions separated by commas separations with multiple spaces before the commas on SVG presentation attribute
<ul class="assert">
<li>The rect in the test should have an x offset of 100, a y offset of 100, and should be rotated 90 degrees clockwise with 3 transform functions in the list delimited by commas with whitespace before the commas.</li>
</ul>
</td>
</tr>
<tr id="svg-transform-list-separations-009-16" class="svg">
<td>
<a href="svg-transform-list-separations-009.xht">svg-transform-list-separations-009</a></td>
<td><a href="reference/svg-transform-list-separations-ref.xht">=</a> </td>
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
<td>Transform functions separated by commas separations with spaces before and after the commas on SVG presentation attribute
<ul class="assert">
<li>The rect in the test should have an x offset of 100, a y offset of 100, and should be rotated 90 degrees clockwise with 3 transform functions in the list delimited by commas with whitespace before the commas.</li>
</ul>
</td>
</tr>
<tr id="svg-transform-list-separations-010-16" class="svg">
<td>
<a href="svg-transform-list-separations-010.xht">svg-transform-list-separations-010</a></td>
<td><a href="reference/svg-transform-list-separations-ref.xht">=</a> </td>
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
<td>Transform functions separated by newlines on SVG presentation attribute
<ul class="assert">
<li>The rect in the test should have an x offset of 100, a y offset of 100, and should be rotated 90 degrees clockwise with 3 transform functions in the list delimited by newlines</li>
</ul>
</td>
</tr>
<tr id="svg-transform-list-separations-011-16" class="svg">
<td>
<a href="svg-transform-list-separations-011.xht">svg-transform-list-separations-011</a></td>
<td><a href="reference/svg-transform-list-separations-ref.xht">=</a> </td>
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
<td>Transform functions separated by commas and newlines on SVG presentation attribute
<ul class="assert">
<li>The rect in the test should have an x offset of 100, a y offset of 100, and should be rotated 90 degrees clockwise with 3 transform functions in the list delimited by commas and newlines</li>
</ul>
</td>
</tr>
<tr id="transform-singular-001-16" class="primary">
<td><strong>
<a href="transform-singular-001.xht">transform-singular-001</a></strong></td>
<td><a href="reference/transform-singular-ref.xht">=</a> </td>
<td></td>
<td>matrix(1, 1, 1, 1, 0, 0)
<ul class="assert">
<li>&quot;If a transform function causes the current transformation matrix (CTM) of an object to be non-invertible, the object and its content do not get displayed.&quot; The matrix (1, 1, 1, 1) has determinant 1*1 - 1*1 = 0 and therefore is not invertible, so nothing should display.</li>
</ul>
</td>
</tr>
<tr id="transform3d-scale-004-16" class="">
<td>
<a href="transform3d-scale-004.xht">transform3d-scale-004</a></td>
<td><a href="reference/transform-blank-ref.xht">=</a> </td>
<td></td>
<td>scale3d(2, 2, 0)
<ul class="assert">
<li>This tests that scale3d(2, 2, 0), being singular, causes the contents not to display.</li>
</ul>
</td>
</tr>
</tbody>
</table>
</body>
</html>

51
tests/wpt/css-tests/css-transforms-1_dev/xhtml1print/chapter-17.xht Normal file
View file

@ -0,0 +1,51 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Interpolation of Transforms - CSS Transforms Module Level 1 CR Test Suite</title>
<style type="text/css">
@import "http://www.w3.org/StyleSheets/TR/base.css";
@import "../indices.css";
</style>
</head>
<body>
<h1>CSS Transforms Module Level 1 CR Test Suite</h1>
<h2>Interpolation of Transforms (0 tests)</h2>
<table width="100%">
<col id="test-column"></col>
<col id="refs-column"></col>
<col id="flags-column"></col>
<col id="info-column"></col>
<thead>
<tr>
<th>Test</th>
<th><abbr title="Rendering References">Refs</abbr></th>
<th>Flags</th>
<th>Info</th>
</tr>
</thead>
<tbody id="s17">
<tr><th colspan="4" scope="rowgroup">
<a href="#s17">+</a>
<a href="http://www.w3.org/TR/css-transforms-1/#interpolation-of-transforms">17 Interpolation of Transforms</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s17.#none-none-animation">
<!-- 0 tests -->
</tbody>
<tbody id="s17.#none-transform-animation">
<!-- 0 tests -->
</tbody>
<tbody id="s17.#other-animation">
<!-- 0 tests -->
</tbody>
<tbody id="s17.#transform-transform-animation">
<!-- 0 tests -->
</tbody>
</table>
</body>
</html>

60
tests/wpt/css-tests/css-transforms-1_dev/xhtml1print/chapter-18.xht Normal file
View file

@ -0,0 +1,60 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Transform function primitives and derivatives - CSS Transforms Module Level 1 CR Test Suite</title>
<style type="text/css">
@import "http://www.w3.org/StyleSheets/TR/base.css";
@import "../indices.css";
</style>
</head>
<body>
<h1>CSS Transforms Module Level 1 CR Test Suite</h1>
<h2>Transform function primitives and derivatives (0 tests)</h2>
<table width="100%">
<col id="test-column"></col>
<col id="refs-column"></col>
<col id="flags-column"></col>
<col id="info-column"></col>
<thead>
<tr>
<th>Test</th>
<th><abbr title="Rendering References">Refs</abbr></th>
<th>Flags</th>
<th>Info</th>
</tr>
</thead>
<tbody id="s18">
<tr><th colspan="4" scope="rowgroup">
<a href="#s18">+</a>
<a href="http://www.w3.org/TR/css-transforms-1/#transform-primitives">18 Transform function primitives and derivatives</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s18.#interpolation-two-three-dimensional-function">
<!-- 0 tests -->
</tbody>
<tbody id="s18.#rotate-three-primitive">
<!-- 0 tests -->
</tbody>
<tbody id="s18.#rotate3d-primitive">
<!-- 0 tests -->
</tbody>
<tbody id="s18.#scale-primitive">
<!-- 0 tests -->
</tbody>
<tbody id="s18.#scale3d-primitive">
<!-- 0 tests -->
</tbody>
<tbody id="s18.#translate-primitive">
<!-- 0 tests -->
</tbody>
<tbody id="s18.#translate3d-primitive">
<!-- 0 tests -->
</tbody>
</table>
</body>
</html>

39
tests/wpt/css-tests/css-transforms-1_dev/xhtml1print/chapter-19.xht Normal file
View file

@ -0,0 +1,39 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Interpolation of primitives and derived transform functions - CSS Transforms Module Level 1 CR Test Suite</title>
<style type="text/css">
@import "http://www.w3.org/StyleSheets/TR/base.css";
@import "../indices.css";
</style>
</head>
<body>
<h1>CSS Transforms Module Level 1 CR Test Suite</h1>
<h2>Interpolation of primitives and derived transform functions (0 tests)</h2>
<table width="100%">
<col id="test-column"></col>
<col id="refs-column"></col>
<col id="flags-column"></col>
<col id="info-column"></col>
<thead>
<tr>
<th>Test</th>
<th><abbr title="Rendering References">Refs</abbr></th>
<th>Flags</th>
<th>Info</th>
</tr>
</thead>
<tbody id="s19">
<tr><th colspan="4" scope="rowgroup">
<a href="#s19">+</a>
<a href="http://www.w3.org/TR/css-transforms-1/#interpolation-of-transform-functions">19 Interpolation of primitives and derived transform functions</a></th></tr>
<!-- 0 tests -->
</tbody>
</table>
</body>
</html>

39
tests/wpt/css-tests/css-transforms-1_dev/xhtml1print/chapter-2.xht Normal file
View file

@ -0,0 +1,39 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Module Interactions - CSS Transforms Module Level 1 CR Test Suite</title>
<style type="text/css">
@import "http://www.w3.org/StyleSheets/TR/base.css";
@import "../indices.css";
</style>
</head>
<body>
<h1>CSS Transforms Module Level 1 CR Test Suite</h1>
<h2>Module Interactions (0 tests)</h2>
<table width="100%">
<col id="test-column"></col>
<col id="refs-column"></col>
<col id="flags-column"></col>
<col id="info-column"></col>
<thead>
<tr>
<th>Test</th>
<th><abbr title="Rendering References">Refs</abbr></th>
<th>Flags</th>
<th>Info</th>
</tr>
</thead>
<tbody id="s2">
<tr><th colspan="4" scope="rowgroup">
<a href="#s2">+</a>
<a href="http://www.w3.org/TR/css-transforms-1/#module-interactions">2 Module Interactions</a></th></tr>
<!-- 0 tests -->
</tbody>
</table>
</body>
</html>

93
tests/wpt/css-tests/css-transforms-1_dev/xhtml1print/chapter-20.xht Normal file
View file

@ -0,0 +1,93 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Interpolation of Matrices - CSS Transforms Module Level 1 CR Test Suite</title>
<style type="text/css">
@import "http://www.w3.org/StyleSheets/TR/base.css";
@import "../indices.css";
</style>
</head>
<body>
<h1>CSS Transforms Module Level 1 CR Test Suite</h1>
<h2>Interpolation of Matrices (0 tests)</h2>
<table width="100%">
<col id="test-column"></col>
<col id="refs-column"></col>
<col id="flags-column"></col>
<col id="info-column"></col>
<thead>
<tr>
<th>Test</th>
<th><abbr title="Rendering References">Refs</abbr></th>
<th>Flags</th>
<th>Info</th>
</tr>
</thead>
<tbody id="s20">
<tr><th colspan="4" scope="rowgroup">
<a href="#s20">+</a>
<a href="http://www.w3.org/TR/css-transforms-1/#matrix-interpolation">20 Interpolation of Matrices</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s20.1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s20.1">+</a>
<a href="http://www.w3.org/TR/css-transforms-1/#supporting-functions">20.1 Supporting functions</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s20.2">
<tr><th colspan="4" scope="rowgroup">
<a href="#s20.2">+</a>
<a href="http://www.w3.org/TR/css-transforms-1/#interpolation-of-2d-matrices">20.2 Interpolation of 2D matrices</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s20.2.1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s20.2.1">+</a>
<a href="http://www.w3.org/TR/css-transforms-1/#decomposing-a-2d-matrix">20.2.1 Decomposing a 2D matrix</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s20.2.2">
<tr><th colspan="4" scope="rowgroup">
<a href="#s20.2.2">+</a>
<a href="http://www.w3.org/TR/css-transforms-1/#interpolation-of-decomposed-2d-matrix-values">20.2.2 Interpolation of decomposed 2D matrix values</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s20.2.3">
<tr><th colspan="4" scope="rowgroup">
<a href="#s20.2.3">+</a>
<a href="http://www.w3.org/TR/css-transforms-1/#recomposing-to-a-2d-matrix">20.2.3 Recomposing to a 2D matrix</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s20.3">
<tr><th colspan="4" scope="rowgroup">
<a href="#s20.3">+</a>
<a href="http://www.w3.org/TR/css-transforms-1/#interpolation-of-3d-matrices">20.3 Interpolation of 3D matrices</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s20.3.1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s20.3.1">+</a>
<a href="http://www.w3.org/TR/css-transforms-1/#decomposing-a-3d-matrix">20.3.1 Decomposing a 3D matrix</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s20.3.2">
<tr><th colspan="4" scope="rowgroup">
<a href="#s20.3.2">+</a>
<a href="http://www.w3.org/TR/css-transforms-1/#interpolation-of-decomposed-3d-matrix-values">20.3.2 Interpolation of decomposed 3D matrix values</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s20.3.3">
<tr><th colspan="4" scope="rowgroup">
<a href="#s20.3.3">+</a>
<a href="http://www.w3.org/TR/css-transforms-1/#recomposing-to-a-3d-matrix">20.3.3 Recomposing to a 3D matrix</a></th></tr>
<!-- 0 tests -->
</tbody>
</table>
</body>
</html>

144
tests/wpt/css-tests/css-transforms-1_dev/xhtml1print/chapter-21.xht Normal file
View file

@ -0,0 +1,144 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Mathematical Description of Transform Functions - CSS Transforms Module Level 1 CR Test Suite</title>
<style type="text/css">
@import "http://www.w3.org/StyleSheets/TR/base.css";
@import "../indices.css";
</style>
</head>
<body>
<h1>CSS Transforms Module Level 1 CR Test Suite</h1>
<h2>Mathematical Description of Transform Functions (0 tests)</h2>
<table width="100%">
<col id="test-column"></col>
<col id="refs-column"></col>
<col id="flags-column"></col>
<col id="info-column"></col>
<thead>
<tr>
<th>Test</th>
<th><abbr title="Rendering References">Refs</abbr></th>
<th>Flags</th>
<th>Info</th>
</tr>
</thead>
<tbody id="s21">
<tr><th colspan="4" scope="rowgroup">
<a href="#s21">+</a>
<a href="http://www.w3.org/TR/css-transforms-1/#mathematical-description">21 Mathematical Description of Transform Functions</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s21.#MatrixDefined">
<!-- 0 tests -->
</tbody>
<tbody id="s21.#PerspectiveDefined">
<!-- 0 tests -->
</tbody>
<tbody id="s21.#Rotate3dDefined">
<!-- 0 tests -->
</tbody>
<tbody id="s21.#RotateDefined">
<!-- 0 tests -->
</tbody>
<tbody id="s21.#Scale3dDefined">
<!-- 0 tests -->
</tbody>
<tbody id="s21.#ScaleDefined">
<!-- 0 tests -->
</tbody>
<tbody id="s21.#SkewDefined">
<!-- 0 tests -->
</tbody>
<tbody id="s21.#SkewXDefined">
<!-- 0 tests -->
</tbody>
<tbody id="s21.#SkewYDefined">
<!-- 0 tests -->
</tbody>
<tbody id="s21.#Translate3dDefined">
<!-- 0 tests -->
</tbody>
<tbody id="s21.#TranslateDefined">
<!-- 0 tests -->
</tbody>
<tbody id="s.#abstract">
<!-- 0 tests -->
</tbody>
<tbody id="s.#conformance">
<!-- 0 tests -->
</tbody>
<tbody id="s.#conformance-classes">
<!-- 0 tests -->
</tbody>
<tbody id="s.#contents">
<!-- 0 tests -->
</tbody>
<tbody id="s.#conventions">
<!-- 0 tests -->
</tbody>
<tbody id="s.#css21">
<!-- 0 tests -->
</tbody>
<tbody id="s.#css3bg">
<!-- 0 tests -->
</tbody>
<tbody id="s.#css3val">
<!-- 0 tests -->
</tbody>
<tbody id="s.#cssom-view">
<!-- 0 tests -->
</tbody>
<tbody id="s.#experimental">
<!-- 0 tests -->
</tbody>
<tbody id="s.#index">
<!-- 0 tests -->
</tbody>
<tbody id="s.#informative">
<!-- 0 tests -->
</tbody>
<tbody id="s.#issues-index">
<!-- 0 tests -->
</tbody>
<tbody id="s.#normative">
<!-- 0 tests -->
</tbody>
<tbody id="s.#partial">
<!-- 0 tests -->
</tbody>
<tbody id="s.#property-index">
<!-- 0 tests -->
</tbody>
<tbody id="s.#references">
<!-- 0 tests -->
</tbody>
<tbody id="s.#rfc2119">
<!-- 0 tests -->
</tbody>
<tbody id="s.#smil3">
<!-- 0 tests -->
</tbody>
<tbody id="s.#status">
<!-- 0 tests -->
</tbody>
<tbody id="s.#subtitle">
<!-- 0 tests -->
</tbody>
<tbody id="s.#svg11">
<!-- 0 tests -->
</tbody>
<tbody id="s.#testing">
<!-- 0 tests -->
</tbody>
<tbody id="s.#title">
<!-- 0 tests -->
</tbody>
</table>
</body>
</html>

39
tests/wpt/css-tests/css-transforms-1_dev/xhtml1print/chapter-3.xht Normal file
View file

@ -0,0 +1,39 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Values - CSS Transforms Module Level 1 CR Test Suite</title>
<style type="text/css">
@import "http://www.w3.org/StyleSheets/TR/base.css";
@import "../indices.css";
</style>
</head>
<body>
<h1>CSS Transforms Module Level 1 CR Test Suite</h1>
<h2>CSS Values (0 tests)</h2>
<table width="100%">
<col id="test-column"></col>
<col id="refs-column"></col>
<col id="flags-column"></col>
<col id="info-column"></col>
<thead>
<tr>
<th>Test</th>
<th><abbr title="Rendering References">Refs</abbr></th>
<th>Flags</th>
<th>Info</th>
</tr>
</thead>
<tbody id="s3">
<tr><th colspan="4" scope="rowgroup">
<a href="#s3">+</a>
<a href="http://www.w3.org/TR/css-transforms-1/#css-values">3 CSS Values</a></th></tr>
<!-- 0 tests -->
</tbody>
</table>
</body>
</html>

130
tests/wpt/css-tests/css-transforms-1_dev/xhtml1print/chapter-4.xht Normal file
View file

@ -0,0 +1,130 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Terminology - CSS Transforms Module Level 1 CR Test Suite</title>
<style type="text/css">
@import "http://www.w3.org/StyleSheets/TR/base.css";
@import "../indices.css";
</style>
</head>
<body>
<h1>CSS Transforms Module Level 1 CR Test Suite</h1>
<h2>Terminology (5 tests)</h2>
<table width="100%">
<col id="test-column"></col>
<col id="refs-column"></col>
<col id="flags-column"></col>
<col id="info-column"></col>
<thead>
<tr>
<th>Test</th>
<th><abbr title="Rendering References">Refs</abbr></th>
<th>Flags</th>
<th>Info</th>
</tr>
</thead>
<tbody id="s4">
<tr><th colspan="4" scope="rowgroup">
<a href="#s4">+</a>
<a href="http://www.w3.org/TR/css-transforms-1/#terminology">4 Terminology</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s4.#2d-matrix">
<!-- 0 tests -->
</tbody>
<tbody id="s4.#3d-matrix">
<!-- 0 tests -->
</tbody>
<tbody id="s4.#3d-rendering-context">
<!-- 0 tests -->
</tbody>
<tbody id="s4.#accumulated-3d-transformation-matrix">
<!-- 0 tests -->
</tbody>
<tbody id="s4.#bounding-box">
<!-- 0 tests -->
</tbody>
<tbody id="s4.#current-transformation-matrix-ctm">
<!-- 0 tests -->
</tbody>
<tbody id="s4.#identity-transform-function">
<!-- 0 tests -->
</tbody>
<tbody id="s4.#local-coordinate-system">
<!-- 0 tests -->
</tbody>
<tbody id="s4.#perspective-matrix">
<!-- 0 tests -->
</tbody>
<tbody id="s4.#transformable-element">
<!-- 5 tests -->
<tr id="transform-display-001-4.#transformable-element" class="primary">
<td><strong>
<a href="transform-display-001.xht">transform-display-001</a></strong></td>
<td><a href="reference/transform-display-ref.xht">=</a> <a href="reference/transform-display-notref.xht">&#x2260;</a> </td>
<td></td>
<td>Inline-Block
<ul class="assert">
<li>Inline-blocks are atomic inline-level elements, so should transform the same as blocks.</li>
</ul>
</td>
</tr>
<tr id="transform-display-002-4.#transformable-element" class="primary">
<td><strong>
<a href="transform-display-002.xht">transform-display-002</a></strong></td>
<td><a href="reference/transform-display-ref.xht">=</a> <a href="reference/transform-display-notref.xht">&#x2260;</a> </td>
<td></td>
<td>Table
<ul class="assert">
<li>Inline-blocks are block-level elements, so should transform the same as blocks.</li>
</ul>
</td>
</tr>
<tr id="transform-display-003-4.#transformable-element" class="primary">
<td><strong>
<a href="transform-display-003.xht">transform-display-003</a></strong></td>
<td><a href="reference/transform-display-ref.xht">=</a> <a href="reference/transform-display-notref.xht">&#x2260;</a> </td>
<td></td>
<td>Inline-Table
<ul class="assert">
<li>Inline-tables are atomic inline-level elements, so should transform the same as blocks.</li>
</ul>
</td>
</tr>
<tr id="transform-display-004-4.#transformable-element" class="primary">
<td><strong>
<a href="transform-display-004.xht">transform-display-004</a></strong></td>
<td><a href="reference/transform-display-ref.xht">=</a> <a href="reference/transform-display-notref.xht">&#x2260;</a> </td>
<td></td>
<td>List-Item
<ul class="assert">
<li>List-items are block-level elements, so should transform the same as blocks.</li>
</ul>
</td>
</tr>
<tr id="transform-image-001-4.#transformable-element" class="primary">
<td><strong>
<a href="transform-image-001.xht">transform-image-001</a></strong></td>
<td><a href="reference/transform-image-ref.xht">=</a> </td>
<td></td>
<td>Transformed &lt;img&gt;
<ul class="assert">
<li>An &lt;img&gt; is a transformable element, so transforms should work on it the same as any image. This test compares an img element with a 90deg rotation transform applied to a different image that was pre-rotated by 90 degrees.</li>
</ul>
</td>
</tr>
</tbody>
<tbody id="s4.#transformation-matrix">
<!-- 0 tests -->
</tbody>
<tbody id="s4.#user-coordinate-system">
<!-- 0 tests -->
</tbody>
</table>
</body>
</html>

39
tests/wpt/css-tests/css-transforms-1_dev/xhtml1print/chapter-5.xht Normal file
View file

@ -0,0 +1,39 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Two Dimensional Subset - CSS Transforms Module Level 1 CR Test Suite</title>
<style type="text/css">
@import "http://www.w3.org/StyleSheets/TR/base.css";
@import "../indices.css";
</style>
</head>
<body>
<h1>CSS Transforms Module Level 1 CR Test Suite</h1>
<h2>Two Dimensional Subset (0 tests)</h2>
<table width="100%">
<col id="test-column"></col>
<col id="refs-column"></col>
<col id="flags-column"></col>
<col id="info-column"></col>
<thead>
<tr>
<th>Test</th>
<th><abbr title="Rendering References">Refs</abbr></th>
<th>Flags</th>
<th>Info</th>
</tr>
</thead>
<tbody id="s5">
<tr><th colspan="4" scope="rowgroup">
<a href="#s5">+</a>
<a href="http://www.w3.org/TR/css-transforms-1/#two-dimensional-subset">5 Two Dimensional Subset</a></th></tr>
<!-- 0 tests -->
</tbody>
</table>
</body>
</html>

614
tests/wpt/css-tests/css-transforms-1_dev/xhtml1print/chapter-6.xht Normal file
View file

@ -0,0 +1,614 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>The Transform Rendering Model - CSS Transforms Module Level 1 CR Test Suite</title>
<style type="text/css">
@import "http://www.w3.org/StyleSheets/TR/base.css";
@import "../indices.css";
</style>
</head>
<body>
<h1>CSS Transforms Module Level 1 CR Test Suite</h1>
<h2>The Transform Rendering Model (48 tests)</h2>
<table width="100%">
<col id="test-column"></col>
<col id="refs-column"></col>
<col id="flags-column"></col>
<col id="info-column"></col>
<thead>
<tr>
<th>Test</th>
<th><abbr title="Rendering References">Refs</abbr></th>
<th>Flags</th>
<th>Info</th>
</tr>
</thead>
<tbody id="s6">
<tr><th colspan="4" scope="rowgroup">
<a href="#s6">+</a>
<a href="http://www.w3.org/TR/css-transforms-1/#transform-rendering">6 The Transform Rendering Model</a></th></tr>
<!-- 32 tests -->
<tr id="css-transforms-3d-on-anonymous-block-001-6" class="primary">
<td><strong>
<a href="css-transforms-3d-on-anonymous-block-001.xht">css-transforms-3d-on-anonymous-block-001</a></strong></td>
<td><a href="reference/css-transforms-3d-anonymous-block-ref.xht">=</a> </td>
<td></td>
<td>No 3D transforms on anonymous block boxes
<ul class="assert">
<li>3D transforms can not be applied to anonymous block boxes.</li>
</ul>
</td>
</tr>
<tr id="transform-abspos-001-6" class="primary">
<td><strong>
<a href="transform-abspos-001.xht">transform-abspos-001</a></strong></td>
<td><a href="reference/transform-abspos-ref.xht">=</a> </td>
<td></td>
<td>Containing Block for Absolute Positioning (left/top)
<ul class="assert">
<li>&quot;In the HTML namespace, any value other than 'none' for the transform results in the creation of . . . a containing block.&quot; This means absolutely positioned elements need to be rooted at a transformed ancestor, just as though it had non-static position.</li>
</ul>
</td>
</tr>
<tr id="transform-abspos-002-6" class="primary">
<td><strong>
<a href="transform-abspos-002.xht">transform-abspos-002</a></strong></td>
<td><a href="reference/transform-abspos-ref.xht">=</a> </td>
<td></td>
<td>Containing Block for Fixed Positioning (left/top offsets)
<ul class="assert">
<li>&quot;In the HTML namespace, any value other than 'none' for the transform results in the creation of . . . a containing block. The object acts as a containing block for fixed positioned descendants.&quot; This means fixed-position elements need to be rooted at a transformed ancestor, rather than the viewport.</li>
</ul>
</td>
</tr>
<tr id="transform-abspos-003-6" class="primary">
<td><strong>
<a href="transform-abspos-003.xht">transform-abspos-003</a></strong></td>
<td><a href="reference/transform-abspos-ref.xht">=</a> </td>
<td></td>
<td>Containing Block for Fixed Positioning (right/bottom offsets)
<ul class="assert">
<li>&quot;In the HTML namespace, any value other than 'none' for the transform results in the creation of . . . a containing block. The object acts as a containing block for fixed positioned descendants.&quot; This means fixed-position elements need to be rooted at a transformed ancestor, rather than the viewport. (This test differs from the previous in that it uses right/bottom properties for positioning instead of left/top.)</li>
</ul>
</td>
</tr>
<tr id="transform-abspos-004-6" class="primary">
<td><strong>
<a href="transform-abspos-004.xht">transform-abspos-004</a></strong></td>
<td><a href="reference/transform-abspos-ref.xht">=</a> </td>
<td></td>
<td>Containing Block for Absolute Positioning (bottom/right)
<ul class="assert">
<li>&quot;In the HTML namespace, any value other than 'none' for the transform results in the creation of . . . a containing block.&quot; This means absolutely positioned elements need to be rooted at a transformed ancestor, just as though it had non-static position. This test differs from transform-abspos-001.html in that it uses the right/bottom properties for positioning instead of top/left.</li>
</ul>
</td>
</tr>
<tr id="transform-abspos-005-6" class="primary">
<td><strong>
<a href="transform-abspos-005.xht">transform-abspos-005</a></strong></td>
<td><a href="reference/transform-abspos-ref.xht">&#x2260;</a> </td>
<td></td>
<td>Containing Block for Absolute Positioning (bottom/right)
<ul class="assert">
<li>&quot;In the HTML namespace, any value other than 'none' for the transform results in the creation of . . . a containing block.&quot; This means absolutely positioned elements need to be rooted at a transformed ancestor, just as though it had non-static position. Therefore, this test should be offset by one pixel from the reference.</li>
</ul>
</td>
</tr>
<tr id="transform-abspos-006-6" class="primary">
<td><strong>
<a href="transform-abspos-006.xht">transform-abspos-006</a></strong></td>
<td><a href="reference/transform-abspos-ref.xht">=</a> </td>
<td></td>
<td>Containing Block for Absolute Positioning (table)
<ul class="assert">
<li>&quot;In the HTML namespace, any value other than 'none' for the transform results in the creation of . . . a containing block.&quot; This means absolutely positioned elements need to be rooted at a transformed ancestor, just as though it had non-static position. This test differs from transform-abspos-001.html in that the outer div is a table, which might cause buggy rendering engines to treat it differently.</li>
</ul>
</td>
</tr>
<tr id="transform-abspos-007-6" class="primary">
<td><strong>
<a href="transform-abspos-007.xht">transform-abspos-007</a></strong></td>
<td><a href="reference/transform-abspos-ref.xht">=</a> </td>
<td></td>
<td>Containing Block for Fixed Positioning (inline-table)
<ul class="assert">
<li>&quot;In the HTML namespace, any value other than 'none' for the transform results in the creation of . . . a containing block. The object acts as a containing block for fixed positioned descendants.&quot; This means fixed-position elements need to be rooted at a transformed ancestor, rather than the viewport. This test differs from transform-abspos-002.html in that the outer div has display: inline-table, which might cause it to render differently in buggy UAs.</li>
</ul>
</td>
</tr>
<tr id="transform-background-007-6" class="primary svg">
<td><strong>
<a href="transform-background-007.xht">transform-background-007</a></strong></td>
<td><a href="reference/transform-background-ref-2.xht">=</a> </td>
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
<td>Transform of Background Image (propagated body with root element transform)
<ul class="assert">
<li>&quot;If the root element is transformed, the transformation applies to the entire canvas, including any background specified for the root element. Since the background painting area for the root element is the entire canvas, which is infinite, the transformation might cause parts of the background that were originally off-screen to appear. For example, if the root element's background were repeating dots, and a transformation of 'scale(0.5)' were specified on the root element, the dots would shrink to half their size, but there will be twice as many, so they still cover the whole viewport.&quot; In this case, the background is specified on the body but propagates to the root element. The transform is on the root element, so it needs to affect the background. The rotation 90 degrees clockwise means that most of the screen will be filled with triangles that were originally above the top of the viewport; the original top row of triangles will now be on the left.</li>
</ul>
</td>
</tr>
<tr id="transform-background-008-6" class="primary svg">
<td><strong>
<a href="transform-background-008.xht">transform-background-008</a></strong></td>
<td><a href="reference/transform-background-ref-2.xht">=</a> </td>
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
<td>Transform of Background Image (root element background and transform)
<ul class="assert">
<li>This is exactly the same as transform-background-007.html, except that the background is specified directly on the root element instead of being specified on the body and propagating to the root.</li>
</ul>
</td>
</tr>
<tr id="transform-compound-001-6" class="primary">
<td><strong>
<a href="transform-compound-001.xht">transform-compound-001</a></strong></td>
<td><a href="reference/transform-compound-ref.xht">=</a> <a href="reference/transform-compound-notref-1.xht">&#x2260;</a> <a href="reference/transform-compound-notref-2.xht">&#x2260;</a> </td>
<td></td>
<td>Compound Transforms
<ul class="assert">
<li>Tests that applying multiple transforms to an element is the same as applying the transforms in the same order to nested elements.</li>
</ul>
</td>
</tr>
<tr id="transform-descendant-001-6" class="primary">
<td><strong>
<a href="transform-descendant-001.xht">transform-descendant-001</a></strong></td>
<td><a href="reference/transform-descendant-ref.xht">=</a> </td>
<td></td>
<td>Transform Affects Descendant
<ul class="assert">
<li>This just tests that a transform on a container div moves its contents, not just the div itself.</li>
</ul>
</td>
</tr>
<tr id="transform-fixed-bg-001-6" class="primary svg">
<td><strong>
<a href="transform-fixed-bg-001.xht">transform-fixed-bg-001</a></strong></td>
<td><a href="reference/transform-fixed-bg-ref.xht">=</a> </td>
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
<td>Fixed Background
<ul class="assert">
<li>&quot;Fixed backgrounds are affected by any transform specified for the root element, and not by any other transforms.&quot; Thus if we have a div that's 100px square aligned at the top left of the page, giving it a fixed background and translating it 50px down and right should be the same as giving it a non-fixed background that's translated 50px down and right.</li>
</ul>
</td>
</tr>
<tr id="transform-fixed-bg-002-6" class="primary dom svg">
<td><strong>
<a href="transform-fixed-bg-002.xht">transform-fixed-bg-002</a></strong></td>
<td><a href="reference/transform-fixed-bg-ref.xht">=</a> </td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
<td>Fixed Background (with scrolling)
<ul class="assert">
<li>&quot;Fixed backgrounds are affected by any transform specified for the root element, and not by any other transforms.&quot; Here we translate the div 150px down instead of 50px, and also scroll down 100px. This should be the same as the previous test because the background image is 100px square.</li>
</ul>
</td>
</tr>
<tr id="transform-fixed-bg-003-6" class="primary svg">
<td><strong>
<a href="transform-fixed-bg-003.xht">transform-fixed-bg-003</a></strong></td>
<td><a href="reference/transform-fixed-bg-ref.xht">=</a> </td>
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
<td>Fixed Background (with rotation)
<ul class="assert">
<li>This is the same as transform-fixed-bg-001, except that we also test that a rotation on a non-root element doesn't affect fixed backgrounds.</li>
</ul>
</td>
</tr>
<tr id="transform-fixed-bg-004-6" class="primary dom svg">
<td><strong>
<a href="transform-fixed-bg-004.xht">transform-fixed-bg-004</a></strong></td>
<td><a href="reference/transform-fixed-bg-ref.xht">=</a> </td>
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
<td>Fixed Background (with rotation and scrolling)
<ul class="assert">
<li>This is the same as transform-fixed-bg-002, except that we also test that a rotation on a non-root element doesn't affect fixed backgrounds.</li>
</ul>
</td>
</tr>
<tr id="transform-fixed-bg-005-6" class="primary svg">
<td><strong>
<a href="transform-fixed-bg-005.xht">transform-fixed-bg-005</a></strong></td>
<td><a href="reference/transform-fixed-bg-ref.xht">=</a> </td>
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
<td>Fixed Background (no-op transform)
<ul class="assert">
<li>This affects that adding a no-op transform to an element with a fixed background doesn't affect rendering.</li>
</ul>
</td>
</tr>
<tr id="transform-fixed-bg-006-6" class="primary svg">
<td><strong>
<a href="transform-fixed-bg-006.xht">transform-fixed-bg-006</a></strong></td>
<td><a href="reference/transform-fixed-bg-ref.xht">=</a> </td>
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
<td>Fixed Background (transform of intermediate)
<ul class="assert">
<li>This tests that adding a rotation to a non-root element doesn't affect rendering of fixed backgrounds on its descendants.</li>
</ul>
</td>
</tr>
<tr id="transform-fixed-bg-007-6" class="primary svg">
<td><strong>
<a href="transform-fixed-bg-007.xht">transform-fixed-bg-007</a></strong></td>
<td><a href="reference/transform-fixed-bg-ref.xht">=</a> </td>
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
<td>Fixed Background (transform on root)
<ul class="assert">
<li>This tests that a transform on the root element *does* affect the rendering of fixed backgrounds on its descendants.</li>
</ul>
</td>
</tr>
<tr id="transform-generated-001-6" class="primary">
<td><strong>
<a href="transform-generated-001.xht">transform-generated-001</a></strong></td>
<td><a href="reference/transform-generated-001-ref.xht">=</a> <a href="reference/transform-generated-001-notref.xht">&#x2260;</a> </td>
<td></td>
<td>Generated Content (block)
<ul class="assert">
<li>Transforms need to work on boxes of generated content just as on any other boxes. This file tests a generated block box.</li>
</ul>
</td>
</tr>
<tr id="transform-generated-002-6" class="primary">
<td><strong>
<a href="transform-generated-002.xht">transform-generated-002</a></strong></td>
<td><a href="reference/transform-generated-002-ref.xht">=</a> <a href="reference/transform-generated-002-notref.xht">&#x2260;</a> </td>
<td></td>
<td>Generated Content (inline)
<ul class="assert">
<li>Transforms need to work on boxes of generated content just as on any other boxes. This file tests a generated inline box.</li>
</ul>
</td>
</tr>
<tr id="transform-iframe-001-6" class="primary">
<td><strong>
<a href="transform-iframe-001.xht">transform-iframe-001</a></strong></td>
<td><a href="reference/transform-iframe-ref.xht">=</a> </td>
<td></td>
<td>Iframe
<ul class="assert">
<li>This test ensures that transforms cannot move the contents of an iframe onto the parent page. The iframe here contains a red box shifted 500px down and to the right, outside the iframe's visible area. overflow: hidden ensures that scrollbars are not tested.</li>
</ul>
</td>
</tr>
<tr id="transform-overflow-001-6" class="primary">
<td><strong>
<a href="transform-overflow-001.xht">transform-overflow-001</a></strong></td>
<td><a href="reference/transform-overflow-001-ref.xht">=</a> </td>
<td></td>
<td>overflow: auto
<ul class="assert">
<li>&quot;. . . if the value of the 'overflow' property is 'scroll' or 'auto', scrollbars will appear as needed to see content that is transformed outside the visible area.&quot; This tests that the effect of overflow: auto for a translation is the same as for an equivalent relative positioning.</li>
</ul>
</td>
</tr>
<tr id="transform-overflow-002-6" class="primary">
<td><strong>
<a href="transform-overflow-002.xht">transform-overflow-002</a></strong></td>
<td><a href="reference/transform-overflow-002-ref.xht">=</a> </td>
<td></td>
<td>overflow: scroll
<ul class="assert">
<li>&quot;. . . if the value of the 'overflow' property is 'scroll' or 'auto', scrollbars will appear as needed to see content that is transformed outside the visible area.&quot; This tests that the effect of overflow: scroll for a translation is the same as for an equivalent relative positioning.</li>
</ul>
</td>
</tr>
<tr id="transform-root-bg-001-6" class="primary">
<td><strong>
<a href="transform-root-bg-001.xht">transform-root-bg-001</a></strong></td>
<td><a href="reference/transform-root-bg-001-ref.xht">=</a> </td>
<td></td>
<td>scale(-1) on Root Element With Background
<ul class="assert">
<li>The background here extends to the whole canvas, and a transform on the root element must transform the whole canvas, background included. Thus the entire tiled background of left-pointing triangles needs to be rotated 180 degrees (same as scale(-1)) around the top center of the viewport, which is the default transform-origin of 50% 50% in this case. An implementation that doesn't draw the background on parts of the canvas outside the viewport might incorrectly display nothing, because the part of the background that's supposed to be rotated into view was initially above the visible part of the canvas.</li>
</ul>
</td>
</tr>
<tr id="transform-root-bg-002-6" class="primary">
<td><strong>
<a href="transform-root-bg-002.xht">transform-root-bg-002</a></strong></td>
<td><a href="reference/transform-root-bg-001-ref.xht">=</a> </td>
<td></td>
<td>scale(-1) on Root Element With Background On Body
<ul class="assert">
<li>Identical to transform-root-bg-001.html, except that the background property is put on the body rather than the root element. This should make no difference, because the body's background propagates up to the canvas if there's no root element background.</li>
</ul>
</td>
</tr>
<tr id="transform-root-bg-003-6" class="primary">
<td><strong>
<a href="transform-root-bg-003.xht">transform-root-bg-003</a></strong></td>
<td><a href="reference/transform-root-bg-003-ref.xht">=</a> </td>
<td></td>
<td>scale(0.5) on Root Element With Background
<ul class="assert">
<li>This is the same as transform-root-bg-001.html, except that it uses scale(0.5) instead of scale(-1). It also specifies a transform-origin, because the default of 50% 50% wouldn't work well with the way the reference image is constructed.</li>
</ul>
</td>
</tr>
<tr id="transform-root-bg-004-6" class="primary">
<td><strong>
<a href="transform-root-bg-004.xht">transform-root-bg-004</a></strong></td>
<td><a href="reference/transform-root-bg-004-ref.xht">=</a> </td>
<td></td>
<td>scale(-1) On Body With Background
<ul class="assert">
<li>This is like transform-root-bg-002.html, except that the transform is specified on the body element, not just the background. The background gets lifted to the root element, but the transform does not, so the transform has no effect.</li>
</ul>
</td>
</tr>
<tr id="transform-stacking-001-6" class="primary">
<td><strong>
<a href="transform-stacking-001.xht">transform-stacking-001</a></strong></td>
<td><a href="reference/transform-lime-square-ref.xht">=</a> </td>
<td></td>
<td>Stacking, transform: scale(1)
<ul class="assert">
<li>This tests that specifying the identity transform on an element still causes it to create a new stacking context (unlike transform: none).</li>
</ul>
</td>
</tr>
<tr id="transform-stacking-002-6" class="primary">
<td><strong>
<a href="transform-stacking-002.xht">transform-stacking-002</a></strong></td>
<td><a href="reference/transform-lime-square-ref.xht">=</a> </td>
<td></td>
<td>Stacking, transform: none
<ul class="assert">
<li>This tests that &quot;transform: none&quot; does not create a new stacking context -- it should have no effect at all.</li>
</ul>
</td>
</tr>
<tr id="transform-stacking-003-6" class="primary">
<td><strong>
<a href="transform-stacking-003.xht">transform-stacking-003</a></strong></td>
<td><a href="reference/transform-lime-square-ref.xht">=</a> </td>
<td></td>
<td>Stacking, invalid transform value
<ul class="assert">
<li>This tests that specifying the transform property with an invalid value does not create a new stacking context -- it should have no effect at all, same as &quot;transform: none&quot;.</li>
</ul>
</td>
</tr>
<tr id="transform-stacking-004-6" class="primary">
<td><strong>
<a href="transform-stacking-004.xht">transform-stacking-004</a></strong></td>
<td><a href="reference/transform-lime-square-ref.xht">=</a> </td>
<td></td>
<td>Stacking, inherited transform: none
<ul class="assert">
<li>This tests that specifying &quot;transform: inherit&quot; (when the parent has no transform) does not create a new stacking context -- it should have no effect at all, same as &quot;transform: none&quot;.</li>
</ul>
</td>
</tr>
</tbody>
<tbody id="s6.#issue-ca2c412c">
<!-- 0 tests -->
</tbody>
<tbody id="s6.#transformation-matrix-computation">
<!-- 0 tests -->
</tbody>
<tbody id="s6.1">
<tr><th colspan="4" scope="rowgroup">
<a href="#s6.1">+</a>
<a href="http://www.w3.org/TR/css-transforms-1/#3d-transform-rendering">6.1 3D Transform Rendering</a></th></tr>
<!-- 17 tests -->
<tr id="css-transforms-3d-on-anonymous-block-001-6.1" class="">
<td>
<a href="css-transforms-3d-on-anonymous-block-001.xht">css-transforms-3d-on-anonymous-block-001</a></td>
<td><a href="reference/css-transforms-3d-anonymous-block-ref.xht">=</a> </td>
<td></td>
<td>No 3D transforms on anonymous block boxes
<ul class="assert">
<li>3D transforms can not be applied to anonymous block boxes.</li>
</ul>
</td>
</tr>
<tr id="rotate_45deg-6.1" class="primary">
<td><strong>
<a href="rotate_45deg.xht">rotate_45deg</a></strong></td>
<td><a href="reference/rotate_45deg-ref.xht">=</a> </td>
<td></td>
<td>rotateY with perspective produces a trapezoid
<ul class="assert">
<li>Rotate 45 degree in y axis</li>
</ul>
</td>
</tr>
<tr id="rotate_x_45deg-6.1" class="primary">
<td><strong>
<a href="rotate_x_45deg.xht">rotate_x_45deg</a></strong></td>
<td><a href="reference/rotate_x_45deg-ref.xht">=</a> </td>
<td></td>
<td>rotateX with perspective produces a trapezoid
<ul class="assert">
<li>Rotate 45 degree in y axis</li>
</ul>
</td>
</tr>
<tr id="rotate_y_45deg-6.1" class="primary">
<td><strong>
<a href="rotate_y_45deg.xht">rotate_y_45deg</a></strong></td>
<td><a href="reference/rotate_y_45deg-ref.xht">=</a> </td>
<td></td>
<td>rotateY with perspective produces a trapezoid
<ul class="assert">
<li>Rotate 45 degree in y axis</li>
</ul>
</td>
</tr>
<tr id="scalex-6.1" class="primary">
<td><strong>
<a href="scalex.xht">scalex</a></strong></td>
<td><a href="reference/scalex-ref.xht">=</a> </td>
<td></td>
<td>test scale x
<ul class="assert">
<li>scale x 2</li>
</ul>
</td>
</tr>
<tr id="scaley-6.1" class="primary">
<td><strong>
<a href="scaley.xht">scaley</a></strong></td>
<td><a href="reference/scaley-ref.xht">=</a> </td>
<td></td>
<td>test scale y
<ul class="assert">
<li>scale y 2</li>
</ul>
</td>
</tr>
<tr id="transform-3d-rotatey-stair-above-001-6.1" class="primary">
<td><strong>
<a href="transform-3d-rotateY-stair-above-001.xht">transform-3d-rotatey-stair-above-001</a></strong></td>
<td><a href="reference/transform-3d-rotateY-stair-above-ref-001.xht">=</a> </td>
<td></td>
<td>rotateY with perspective produces a trapezoid
<ul class="assert">
<li>A rotateY transform with perspective should result in a trapezoid.</li>
</ul>
</td>
</tr>
<tr id="transform-3d-rotatey-stair-below-001-6.1" class="primary">
<td><strong>
<a href="transform-3d-rotateY-stair-below-001.xht">transform-3d-rotatey-stair-below-001</a></strong></td>
<td><a href="reference/transform-3d-rotateY-stair-above-ref-001.xht">=</a> </td>
<td></td>
<td>rotateY with perspective produces a trapezoid
<ul class="assert">
<li>A rotateY transform with perspective should result in a trapezoid.</li>
</ul>
</td>
</tr>
<tr id="transform3d-sorting-001-6.1" class="">
<td>
<a href="transform3d-sorting-001.xht">transform3d-sorting-001</a></td>
<td><a href="reference/transform-lime-square-ref.xht">=</a> </td>
<td></td>
<td>Simple Sorting
<ul class="assert">
<li>The red box here is translated in the negative Z-direction, so it should render beneath the lime box even though it comes later in DOM order.</li>
</ul>
</td>
</tr>
<tr id="transform3d-sorting-002-6.1" class="">
<td>
<a href="transform3d-sorting-002.xht">transform3d-sorting-002</a></td>
<td><a href="reference/transform-lime-square-ref.xht">=</a> </td>
<td></td>
<td>Simple Sorting With Rotation
<ul class="assert">
<li>The red box here is translated to the same extent as the lime box, so they should render in stacking context order: the lime box is on top, because it's later in the DOM. But then we apply rotatex(180deg) to the whole thing, so the lime box should wind up on top in the end.</li>
</ul>
</td>
</tr>
<tr id="transform3d-sorting-003-6.1" class="">
<td>
<a href="transform3d-sorting-003.xht">transform3d-sorting-003</a></td>
<td><a href="reference/transform-lime-square-ref.xht">=</a> </td>
<td></td>
<td>Simple Sorting With No Preserve-3D
<ul class="assert">
<li>The red box here is translated to above the lime box, but they aren't in the same 3D rendering context, so they should be drawn in DOM order regardless: lime box on top.</li>
</ul>
</td>
</tr>
<tr id="transform3d-sorting-004-6.1" class="">
<td>
<a href="transform3d-sorting-004.xht">transform3d-sorting-004</a></td>
<td><a href="reference/transform-lime-square-ref.xht">=</a> </td>
<td></td>
<td>Simple Sorting With Preserve-3D on Grandparent
<ul class="assert">
<li>This is the same as transform3d-sorting-003.html, except with two wrapper divs. 'transform-style: preserve-3d' only affects children, not grandchildren, so the two divs with backgrounds are still in different rendering contexts and the Z-position should still not affect stacking.</li>
</ul>
</td>
</tr>
<tr id="transform3d-sorting-005-6.1" class="">
<td>
<a href="transform3d-sorting-005.xht">transform3d-sorting-005</a></td>
<td><a href="reference/transform-lime-square-ref.xht">=</a> </td>
<td></td>
<td>Sorting With Background on Parent
<ul class="assert">
<li>This tests that if a parent has 'transform-style: preserve-3d', it's in the same rendering context as its children. Thus the translateZ(10px) puts the child above it, and the rotateX(180deg) puts it below, so the lime parent is rendered on top.</li>
</ul>
</td>
</tr>
<tr id="transform3d-sorting-006-6.1" class="">
<td>
<a href="transform3d-sorting-006.xht">transform3d-sorting-006</a></td>
<td><a href="reference/transform3d-sorting-006-ref.xht">=</a> </td>
<td></td>
<td>Sorting With Intersection
<ul class="assert">
<li>This tests that when two boxes intersect in a simple fashion, they're rendered according to Newell's algorithm.</li>
</ul>
</td>
</tr>
<tr id="translate-6.1" class="primary">
<td><strong>
<a href="translate.xht">translate</a></strong></td>
<td><a href="reference/translate-ref.xht">=</a> </td>
<td></td>
<td>test translate
<ul class="assert">
<li>translate x, y</li>
</ul>
</td>
</tr>
<tr id="ttwf-css-3d-polygon-cycle-6.1" class="primary svg">
<td><strong>
<a href="ttwf-css-3d-polygon-cycle.xht">ttwf-css-3d-polygon-cycle</a></strong></td>
<td><a href="reference/ttwf-css-3d-polygon-cycle-ref.xht">=</a> </td>
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
<td>3d transform polygon cycle
<ul class="assert">
<li>The red, green and blue rectangles are forming a cycle, which should be detected and rendered using Newell Algorithm's.</li>
</ul>
</td>
</tr>
<tr id="ttwf-css-3d-polygon-cycle-mismatch-6.1" class="primary svg">
<td><strong>
<a href="ttwf-css-3d-polygon-cycle-mismatch.xht">ttwf-css-3d-polygon-cycle-mismatch</a></strong></td>
<td><a href="reference/ttwf-css-3d-polygon-cycle-ref.xht">=</a> </td>
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
<td>3d transform polygon cycle
<ul class="assert">
<li>The red, green and blue rectangles are forming a cycle, which should be detected and rendered using Newell Algorithm's.</li>
</ul>
</td>
</tr>
</tbody>
<tbody id="s6.1.#accumulated-3d-transformation-matrix-computation">
<!-- 0 tests -->
</tbody>
<tbody id="s6.1.#issue-34d952cb">
<!-- 0 tests -->
</tbody>
<tbody id="s6.1.#issue-878a3175">
<!-- 0 tests -->
</tbody>
<tbody id="s6.1.#perspective-matrix-computation">
<!-- 0 tests -->
</tbody>
<tbody id="s6.2">
<tr><th colspan="4" scope="rowgroup">
<a href="#s6.2">+</a>
<a href="http://www.w3.org/TR/css-transforms-1/#processing-of-perspective-transformed-boxes">6.2 Processing of Perspective-Transformed Boxes</a></th></tr>
<!-- 0 tests -->
</tbody>
<tbody id="s6.2.#issue-44e00fb5">
<!-- 0 tests -->
</tbody>
<tbody id="s6.2.#issue-6b4d59fb">
<!-- 0 tests -->
</tbody>
</table>
</body>
</html>

1149
tests/wpt/css-tests/css-transforms-1_dev/xhtml1print/chapter-7.xht Normal file
View file

File diff suppressed because it is too large Load diff

1344
tests/wpt/css-tests/css-transforms-1_dev/xhtml1print/chapter-8.xht Normal file
View file

File diff suppressed because it is too large Load diff

331
tests/wpt/css-tests/css-transforms-1_dev/xhtml1print/chapter-9.xht Normal file
View file

@ -0,0 +1,331 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>The transform-style Property - CSS Transforms Module Level 1 CR Test Suite</title>
<style type="text/css">
@import "http://www.w3.org/StyleSheets/TR/base.css";
@import "../indices.css";
</style>
</head>
<body>
<h1>CSS Transforms Module Level 1 CR Test Suite</h1>
<h2>The transform-style Property (26 tests)</h2>
<table width="100%">
<col id="test-column"></col>
<col id="refs-column"></col>
<col id="flags-column"></col>
<col id="info-column"></col>
<thead>
<tr>
<th>Test</th>
<th><abbr title="Rendering References">Refs</abbr></th>
<th>Flags</th>
<th>Info</th>
</tr>
</thead>
<tbody id="s9">
<tr><th colspan="4" scope="rowgroup">
<a href="#s9">+</a>
<a href="http://www.w3.org/TR/css-transforms-1/#transform-style-property">9 The transform-style Property</a></th></tr>
<!-- 26 tests -->
<tr id="css-transform-3d-transform-style-9" class="primary">
<td><strong>
<a href="css-transform-3d-transform-style.xht">css-transform-3d-transform-style</a></strong></td>
<td><a href="reference/css-transform-3d-transform-style-ref.xht">=</a> </td>
<td></td>
<td>rotateY with transform-style on nested elements
<ul class="assert">
<li>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.</li>
</ul>
</td>
</tr>
<tr id="transform-table-006-9" class="primary">
<td><strong>
<a href="transform-table-006.xht">transform-table-006</a></strong></td>
<td><a href="reference/transform-blank-ref.xht">=</a> </td>
<td></td>
<td>Table Without Preserve-3D 1
<ul class="assert">
<li>This has preserve-3d applied to the outer wrapper of a table, but not the inner wrapper containing its contents. Therefore, the contents should be rotated 90 degrees and vanish, and the 90-degree rotation on the outer wrapper shouldn't restore them. An implementation that incorrectly propagated preserve-3d to table descendants might cause the text to appear, but mirrored.</li>
</ul>
</td>
</tr>
<tr id="transform-table-007-9" class="primary">
<td><strong>
<a href="transform-table-007.xht">transform-table-007</a></strong></td>
<td><a href="reference/transform-blank-ref.xht">=</a> </td>
<td></td>
<td>Table Without Preserve-3D 2
<ul class="assert">
<li>In this case, preserve-3d is applied to every element that's explicitly specified in the source code. However, the HTML parser will insert an extra &lt;tbody&gt; element around the &lt;tr&gt;, which will not have preserve-3d specified, so the contents should again vainsh. An implementation that incorrectly propagated preserve-3d to table descendants might cause the text to appear, but mirrored.</li>
</ul>
</td>
</tr>
<tr id="transform-table-008-9" class="primary">
<td><strong>
<a href="transform-table-008.xht">transform-table-008</a></strong></td>
<td><a href="reference/transform-blank-ref.xht">=</a> </td>
<td></td>
<td>Table Without Preserve-3D 3
<ul class="assert">
<li>This is essentially the same as transform-table-006.html, except using divs with 'display' specified instead of actual table elements.</li>
</ul>
</td>
</tr>
<tr id="transform-table-009-9" class="primary">
<td><strong>
<a href="transform-table-009.xht">transform-table-009</a></strong></td>
<td><a href="reference/transform-table-009-ref.xht">=</a> <a href="reference/transform-table-009-notref.xht">&#x2260;</a> </td>
<td></td>
<td>Table With Preserve-3D 1
<ul class="assert">
<li>This is the same as transform-table-007.html, except that transform-style is also explicitly applied to the intervening &lt;tbody&gt;, so nothing should vanish.</li>
</ul>
</td>
</tr>
<tr id="transform-table-010-9" class="primary">
<td><strong>
<a href="transform-table-010.xht">transform-table-010</a></strong></td>
<td><a href="reference/transform-table-009-ref.xht">=</a> <a href="reference/transform-table-010-notref.xht">&#x2260;</a> </td>
<td></td>
<td>Table With Preserve-3D 2
<ul class="assert">
<li>This is the same as transform-table-007.html, except that now divs are used instead of actual table elements. This means that the parser doesn't create an implicit intervening &lt;tbody&gt;, so preserve-3d is applied to all intervening elements, and the text should display (mirrored).</li>
</ul>
</td>
</tr>
<tr id="transform-table-011-9" class="primary">
<td><strong>
<a href="transform-table-011.xht">transform-table-011</a></strong></td>
<td><a href="reference/transform-table-009-ref.xht">=</a> <a href="reference/transform-table-011-notref.xht">&#x2260;</a> </td>
<td></td>
<td>Table With Preserve-3D 3
<ul class="assert">
<li>This is an even more extreme example of transform-table-010.html. CSS will create several anonymous table boxes wrapping the div with display: table-cell, but none of these have corresponding elements. Every actual element in the DOM still has preserve-3d specified, so the text should not vanish.</li>
</ul>
</td>
</tr>
<tr id="transform3d-preserve3d-001-9" class="primary">
<td><strong>
<a href="transform3d-preserve3d-001.xht">transform3d-preserve3d-001</a></strong></td>
<td><a href="reference/transform3d-preserve3d-001-ref.xht">=</a> </td>
<td></td>
<td>Simple Preserve-3D
<ul class="assert">
<li>This tests that if preserve-3d is specified, four 45deg rotations equal one 180deg rotation.</li>
</ul>
</td>
</tr>
<tr id="transform3d-preserve3d-002-9" class="primary">
<td><strong>
<a href="transform3d-preserve3d-002.xht">transform3d-preserve3d-002</a></strong></td>
<td><a href="reference/transform-lime-square-ref.xht">=</a> </td>
<td></td>
<td>Preserve-3D With Margins 1
<ul class="assert">
<li>This is the first in a series of four tests that test that translations work correctly when combined with margins or translations on various elements, when preserve-3d is enabled. They test for a real-world implementation bug: &lt;https://bugzilla.mozilla.org/show_bug.cgi?id=691864&gt;.</li>
</ul>
</td>
</tr>
<tr id="transform3d-preserve3d-003-9" class="primary">
<td><strong>
<a href="transform3d-preserve3d-003.xht">transform3d-preserve3d-003</a></strong></td>
<td><a href="reference/transform-lime-square-ref.xht">=</a> </td>
<td></td>
<td>Preserve-3D With Margins 2
<ul class="assert">
<li>This is the second in a series of four tests that test that translations work correctly when combined with margins or translations on various elements, when preserve-3d is enabled. They test for a real-world implementation bug: &lt;https://bugzilla.mozilla.org/show_bug.cgi?id=691864&gt;.</li>
</ul>
</td>
</tr>
<tr id="transform3d-preserve3d-004-9" class="primary">
<td><strong>
<a href="transform3d-preserve3d-004.xht">transform3d-preserve3d-004</a></strong></td>
<td><a href="reference/transform-lime-square-ref.xht">=</a> </td>
<td></td>
<td>Preserve-3D With Margins 3
<ul class="assert">
<li>This is the third in a series of four tests that test that translations work correctly when combined with margins or translations on various elements, when preserve-3d is enabled. They test for a real-world implementation bug: &lt;https://bugzilla.mozilla.org/show_bug.cgi?id=691864&gt;.</li>
</ul>
</td>
</tr>
<tr id="transform3d-preserve3d-005-9" class="primary">
<td><strong>
<a href="transform3d-preserve3d-005.xht">transform3d-preserve3d-005</a></strong></td>
<td><a href="reference/transform-lime-square-ref.xht">=</a> </td>
<td></td>
<td>Preserve-3D With Transformed Grandparent and Grandchild
<ul class="assert">
<li>This is the fourth in a series of four tests that test that translations work correctly when combined with margins or translations on various elements, when preserve-3d is enabled. They test for a real-world implementation bug: &lt;https://bugzilla.mozilla.org/show_bug.cgi?id=691864&gt;.</li>
</ul>
</td>
</tr>
<tr id="transform3d-preserve3d-006-9" class="primary">
<td><strong>
<a href="transform3d-preserve3d-006.xht">transform3d-preserve3d-006</a></strong></td>
<td><a href="reference/transform-lime-square-ref.xht">=</a> </td>
<td></td>
<td>Two rotatex(), No Preserve-3D
<ul class="assert">
<li>rotatex(45deg) or rotatex(-45deg), by itself, should both just scale down the element by a factor of sqrt(2) (and perhaps shift it, depending on 'transform-origin'). Without 'transform-style: preserve-3d', the rotations on parent and child shouldn't cancel, so its height should be halved with no other effect.</li>
</ul>
</td>
</tr>
<tr id="transform3d-preserve3d-007-9" class="primary">
<td><strong>
<a href="transform3d-preserve3d-007.xht">transform3d-preserve3d-007</a></strong></td>
<td><a href="reference/transform-lime-square-ref.xht">=</a> </td>
<td></td>
<td>Two rotatey(), No Preserve-3D
<ul class="assert">
<li>This is identical to transform3d-preserve3d-006.html, except with rotatey() instead of rotatex().</li>
</ul>
</td>
</tr>
<tr id="transform3d-preserve3d-008-9" class="primary">
<td><strong>
<a href="transform3d-preserve3d-008.xht">transform3d-preserve3d-008</a></strong></td>
<td><a href="reference/transform-lime-square-ref.xht">=</a> </td>
<td></td>
<td>Preserve-3D with 'overflow: hidden'
<ul class="assert">
<li>This is identical to transform3d-preserve3d-006.html, except that it has 'transform-style: preserve-3d; overflow: hidden' specified on the parent element. 'transform-style: preserve-3d' would normally make the result different, but 'overflow: hidden' overrides its effect and causes it to work the same as 'transform-style: flat'.</li>
</ul>
</td>
</tr>
<tr id="transform3d-preserve3d-009-9" class="primary">
<td><strong>
<a href="transform3d-preserve3d-009.xht">transform3d-preserve3d-009</a></strong></td>
<td><a href="reference/transform-lime-square-ref.xht">=</a> </td>
<td></td>
<td>Preserve-3D with 'overflow: auto'
<ul class="assert">
<li>This is identical to transform3d-preserve3d-008.html, except with 'overflow: auto' instead of 'hidden'.</li>
</ul>
</td>
</tr>
<tr id="transform3d-preserve3d-010-9" class="primary">
<td><strong>
<a href="transform3d-preserve3d-010.xht">transform3d-preserve3d-010</a></strong></td>
<td><a href="reference/transform-lime-square-ref.xht">=</a> </td>
<td></td>
<td>rotatex() With Preserve-3D
<ul class="assert">
<li>This tests that two rotations of 22.5deg properly add when preserve-3d is used. The result, a 45deg rotation around the X-axis, should be equivalent to shrinking the height by a factor of sqrt(2), i.e., 1.41421356....</li>
</ul>
</td>
</tr>
<tr id="transform3d-preserve3d-011-9" class="primary">
<td><strong>
<a href="transform3d-preserve3d-011.xht">transform3d-preserve3d-011</a></strong></td>
<td><a href="reference/transform-lime-square-ref.xht">=</a> </td>
<td></td>
<td>Preserve-3D With 90-Degree Rotation
<ul class="assert">
<li>This tests that when preserve-3d is specified, a 90-degree rotation on the parent plus a 90-degree rotation on the child cancel out, adding to a 180-degree rotation (which has no visible effect on a lime square). scale(2) is added to ensure that the test doesn't pass if the transforms are just ignored.</li>
</ul>
</td>
</tr>
<tr id="transform3d-preserve3d-012-9" class="primary">
<td><strong>
<a href="transform3d-preserve3d-012.xht">transform3d-preserve3d-012</a></strong></td>
<td><a href="reference/transform-blank-ref.xht">=</a> </td>
<td></td>
<td>90-Degree Rotations Without Preserve-3D
<ul class="assert">
<li>This tests that two 90-degree rotations with the default 'transform-style: flat' do not add together to form a 180-degree rotation. Instead, the first causes the contents to vanish and the second does not restore them.</li>
</ul>
</td>
</tr>
<tr id="transform3d-preserve3d-013-9" class="primary">
<td><strong>
<a href="transform3d-preserve3d-013.xht">transform3d-preserve3d-013</a></strong></td>
<td><a href="reference/transform3d-preserve3d-013-ref.xht">=</a> </td>
<td></td>
<td>Preserve-3D with 'overflow: scroll'
<ul class="assert">
<li>This is identical to transform3d-preserve3d-008.html, except with 'overflow: scroll' instead of 'hidden'. (Note that the ref is nontrivial, because the scrollbar has to be scaled appropriately.)</li>
</ul>
</td>
</tr>
<tr id="transform3d-sorting-001-9" class="primary">
<td><strong>
<a href="transform3d-sorting-001.xht">transform3d-sorting-001</a></strong></td>
<td><a href="reference/transform-lime-square-ref.xht">=</a> </td>
<td></td>
<td>Simple Sorting
<ul class="assert">
<li>The red box here is translated in the negative Z-direction, so it should render beneath the lime box even though it comes later in DOM order.</li>
</ul>
</td>
</tr>
<tr id="transform3d-sorting-002-9" class="primary">
<td><strong>
<a href="transform3d-sorting-002.xht">transform3d-sorting-002</a></strong></td>
<td><a href="reference/transform-lime-square-ref.xht">=</a> </td>
<td></td>
<td>Simple Sorting With Rotation
<ul class="assert">
<li>The red box here is translated to the same extent as the lime box, so they should render in stacking context order: the lime box is on top, because it's later in the DOM. But then we apply rotatex(180deg) to the whole thing, so the lime box should wind up on top in the end.</li>
</ul>
</td>
</tr>
<tr id="transform3d-sorting-003-9" class="primary">
<td><strong>
<a href="transform3d-sorting-003.xht">transform3d-sorting-003</a></strong></td>
<td><a href="reference/transform-lime-square-ref.xht">=</a> </td>
<td></td>
<td>Simple Sorting With No Preserve-3D
<ul class="assert">
<li>The red box here is translated to above the lime box, but they aren't in the same 3D rendering context, so they should be drawn in DOM order regardless: lime box on top.</li>
</ul>
</td>
</tr>
<tr id="transform3d-sorting-004-9" class="primary">
<td><strong>
<a href="transform3d-sorting-004.xht">transform3d-sorting-004</a></strong></td>
<td><a href="reference/transform-lime-square-ref.xht">=</a> </td>
<td></td>
<td>Simple Sorting With Preserve-3D on Grandparent
<ul class="assert">
<li>This is the same as transform3d-sorting-003.html, except with two wrapper divs. 'transform-style: preserve-3d' only affects children, not grandchildren, so the two divs with backgrounds are still in different rendering contexts and the Z-position should still not affect stacking.</li>
</ul>
</td>
</tr>
<tr id="transform3d-sorting-005-9" class="primary">
<td><strong>
<a href="transform3d-sorting-005.xht">transform3d-sorting-005</a></strong></td>
<td><a href="reference/transform-lime-square-ref.xht">=</a> </td>
<td></td>
<td>Sorting With Background on Parent
<ul class="assert">
<li>This tests that if a parent has 'transform-style: preserve-3d', it's in the same rendering context as its children. Thus the translateZ(10px) puts the child above it, and the rotateX(180deg) puts it below, so the lime parent is rendered on top.</li>
</ul>
</td>
</tr>
<tr id="transform3d-sorting-006-9" class="primary">
<td><strong>
<a href="transform3d-sorting-006.xht">transform3d-sorting-006</a></strong></td>
<td><a href="reference/transform3d-sorting-006-ref.xht">=</a> </td>
<td></td>
<td>Sorting With Intersection
<ul class="assert">
<li>This tests that when two boxes intersect in a simple fashion, they're rendered according to Newell's algorithm.</li>
</ul>
</td>
</tr>
</tbody>
<tbody id="s9.#issue-f175efd2">
<!-- 0 tests -->
</tbody>
<tbody id="s9.#propdef-transform-style">
<!-- 0 tests -->
</tbody>
</table>
</body>
</html>

36
tests/wpt/css-tests/css-transforms-1_dev/xhtml1print/css-rotate-2d-3d-001.xht Normal file
View file

@ -0,0 +1,36 @@
<!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 Transforms Test: 2D rotation with 3D rotation</title>
<link href="mailto:pdr@google.com" rel="author" title="Philip Rogers" />
<link href="mailto:dschulze@adobe.com" rel="reviewer" title="Dirk Schulze" /> <!-- 2012-06-16 -->
<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/#three-d-transform-functions" rel="help" />
<link href="reference/css-rotate-2d-3d-001-ref.xht" rel="match" />
<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;
top: 50px;
left: 100px;
width: 100px;
height: 200px;
background: green;
transform: rotate(90deg) rotate3d(1, 0, 0, 60deg);
}
.redSquare {
position: absolute;
top: 101px;
left: 101px;
width: 98px;
height: 98px;
background: red;
}
</style>
</head>
<body>
<p>The test passes if there is a green square and no red.</p>
<div class="redSquare"></div>
<div class="greenSquare"></div>
</body></html>

42
tests/wpt/css-tests/css-transforms-1_dev/xhtml1print/css-scale-nested-001.xht Normal file
View file

@ -0,0 +1,42 @@
<!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 Transforms Test: scale 0 on a parent with a child</title>
<link href="mailto:amolvshanbhag@yahoo.com" rel="author" title="Amol Shanbhag" />
<link href="mailto:rhauck@adobe.com" rel="reviewer" title="Rebecca Hauck" />
<link href="http://www.w3.org/TR/css-transforms-1/#transform-property" rel="help" />
<link href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions" rel="help" />
<meta content="Child square element is transformed (scaled to zero) along with the parent element" name="assert" />
<link href="reference/css-scale-nested-ref.xht" rel="match" />
<style type="text/css">
div{
position: absolute;
}
.greenSquare {
width: 100px;
height: 100px;
background: green;
}
.parentredSquare {
width: 100px;
height: 100px;
background: red;
transform: scale(0);
}
.childredSquare {
top: 25px;
left: 25px;
width: 50px;
height: 50px;
background: red;
}
p{
padding-top: 130px;
}
</style>
</head>
<body>
<div class="greenSquare"></div>
<div class="parentredSquare"><div class="childredSquare"></div></div>
<p>The test passes if there is a green square and no red.</p>
</body></html>

35
tests/wpt/css-tests/css-transforms-1_dev/xhtml1print/css-skew-001.xht Normal file
View file

@ -0,0 +1,35 @@
<!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"><!-- Submitted from TestTWF Paris --><head>
<title>CSS Test: skew function part 1</title>
<link href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions" rel="help" />
<link href="mailto:adrien@pachkoff.com" rel="author" title="Adrien Pachkoff" />
<link href="reference/css-skew-001-ref.xht" rel="match" />
<style type="text/css">
div {
top:5px;
left:5px;
position:absolute;
height: 150px;
width: 150px;
background-color:red;
transform-origin: 0 0;
transform: skew(25deg, 35deg);
}
svg {
top:0;
left:0;
position:absolute;
height: 268.778px;
width: 231.642px;
}
</style>
</head>
<body>
<p>The test passes if there is a green quadrilateral and no red.</p>
<div> </div>
<svg xmlns="http://www.w3.org/2000/svg">
<path d="M 231.64212,268.77841 73.167806,158.54816 0,0 158.58452,110.15942 z" fill="green"></path>
</svg>
</body></html>

35
tests/wpt/css-tests/css-transforms-1_dev/xhtml1print/css-skew-002.xht Normal file
View file

@ -0,0 +1,35 @@
<!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"><!-- Submitted from TestTWF Paris --><head>
<title>CSS Test: skew function part 2</title>
<link href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions" rel="help" />
<link href="mailto:adrien@pachkoff.com" rel="author" title="Adrien Pachkoff" />
<link href="reference/css-skew-002-ref.xht" rel="match" />
<style type="text/css">
div {
top:0px;
left:0px;
position:absolute;
height: 150px;
width: 150px;
background-color:green;
transform-origin: 0 0;
transform: skew(25deg, 35deg);
}
svg {
top:5px;
left:5px;
position:absolute;
height: 253.667px;
width: 218.333px;
}
</style>
</head>
<body>
<p>The test passes if there is a green quadrilateral and no red.</p>
<svg xmlns="http://www.w3.org/2000/svg">
<path d="M 211.84314,245.80529 66.913984,144.99668 0,0 145.02994,100.74384 z" fill="red"></path>
</svg>
<div> </div>
</body></html>

38
tests/wpt/css-tests/css-transforms-1_dev/xhtml1print/css-transform-3d-rotate3d-X-negative.xht Normal file
View file

@ -0,0 +1,38 @@
<!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>
<meta charset="utf-8" />
<title>CSS Transforms Test: rotate3d on div element</title>
<link href="http://www.intel.com" rel="author" title="Intel" />
<link href="http://www.w3.org/TR/css-transforms-1/#three-d-transform-functions" rel="help" />
<meta content="" name="flags" />
<link href="reference/css-transform-3d-rotateX-ref.xht" rel="match" />
<meta content="Test checks that rotate the 2:1 rectangle on X-axis for 60 degree we will get a square and completely cover the red square, and here we use border due to the rectangle not be rotated would cover the red square." name="assert" />
<style>
div {
left: 20px;
position: absolute;
top: 35px;
}
div.redsquare {
background-color: red;
border: 5px solid black;
height: 120px;
left: 15px;
top: 90px;
width: 120px;
}
div.green {
background-color: green;
height: 240px;
transform: rotate3d(1,0,0,-60deg);
width: 120px;
}
</style>
</head>
<body>
<p>Test passes if there is a green square with black border around, and no any red.</p>
<div class="redsquare"></div>
<div class="green"></div>
</body></html>

38
tests/wpt/css-tests/css-transforms-1_dev/xhtml1print/css-transform-3d-rotate3d-X-positive.xht Normal file
View file

@ -0,0 +1,38 @@
<!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>
<meta charset="utf-8" />
<title>CSS Transforms Test: rotate3d on div element</title>
<link href="http://www.intel.com" rel="author" title="Intel" />
<link href="http://www.w3.org/TR/css-transforms-1/#three-d-transform-functions" rel="help" />
<meta content="" name="flags" />
<link href="reference/css-transform-3d-rotateX-ref.xht" rel="match" />
<meta content="Test checks that rotate a 2:1 rectangle on X-axis for 60 degree we will get a square and completely cover the red square, and here we use border due to the rectangle not be rotated would cover the red square." name="assert" />
<style>
div {
left: 20px;
position: absolute;
top: 35px;
}
div.redsquare {
background-color: red;
border: 5px solid black;
height: 120px;
left: 15px;
top: 90px;
width: 120px;
}
div.green {
background-color: green;
height: 240px;
transform: rotate3d(1,0,0,60deg);
width: 120px;
}
</style>
</head>
<body>
<p>Test passes if there is a green square with black border around, and no any red.</p>
<div class="redsquare"></div>
<div class="green"></div>
</body></html>

38
tests/wpt/css-tests/css-transforms-1_dev/xhtml1print/css-transform-3d-rotate3d-Y-negative.xht Normal file
View file

@ -0,0 +1,38 @@
<!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>
<meta charset="utf-8" />
<title>CSS Transforms Test: rotate3d on div element</title>
<link href="http://www.intel.com" rel="author" title="Intel" />
<link href="http://www.w3.org/TR/css-transforms-1/#three-d-transform-functions" rel="help" />
<meta content="" name="flags" />
<link href="reference/css-transform-3d-rotateY-ref.xht" rel="match" />
<meta content="Test checks that rotate a 2:1 rectangle on Y-axis for 60 degree we will get a square and completely cover the red square, and here we use border due to the rectangle not be rotated would cover the red square." name="assert" />
<style>
div {
left: 10px;
position: absolute;
top: 50px;
}
div.redsquare {
background-color: red;
border: 5px solid black;
height: 120px;
left: 65px;
top: 45px;
width: 120px;
}
div.green {
background-color: green;
height: 120px;
transform: rotate3d(0,1,0,-60deg);
width: 240px;
}
</style>
</head>
<body>
<p>Test passes if there is a green square with black border around, and no any red.</p>
<div class="redsquare"></div>
<div class="green"></div>
</body></html>

38
tests/wpt/css-tests/css-transforms-1_dev/xhtml1print/css-transform-3d-rotate3d-Y-positive.xht Normal file
View file

@ -0,0 +1,38 @@
<!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>
<meta charset="utf-8" />
<title>CSS Transforms Test: rotate3d on div element</title>
<link href="http://www.intel.com" rel="author" title="Intel" />
<link href="http://www.w3.org/TR/css-transforms-1/#three-d-transform-functions" rel="help" />
<meta content="" name="flags" />
<link href="reference/css-transform-3d-rotateY-ref.xht" rel="match" />
<meta content="Test checks that rotate a 2:1 rectangle on Y-axis for 60 degree we will get a square and completely cover the red square, and here we use border due to the rectangle not be rotated would cover the red square." name="assert" />
<style>
div {
left: 10px;
position: absolute;
top: 50px;
}
div.redsquare {
background-color: red;
border: 5px solid black;
height: 120px;
left: 65px;
top: 45px;
width: 120px;
}
div.green {
background-color: green;
height: 120px;
transform: rotate3d(0,1,0,60deg);
width: 240px;
}
</style>
</head>
<body>
<p>Test passes if there is a green square with black border around, and no any red.</p>
<div class="redsquare"></div>
<div class="green"></div>
</body></html>

45
tests/wpt/css-tests/css-transforms-1_dev/xhtml1print/css-transform-3d-rotate3d-Z-negative.xht Normal file
View file

@ -0,0 +1,45 @@
<!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>
<meta charset="utf-8" />
<title>CSS Transforms Test: rotate3d on div element</title>
<link href="http://www.intel.com" rel="author" title="Intel" />
<link href="http://www.w3.org/TR/css-transforms-1/#three-d-transform-functions" rel="help" />
<meta content="" name="flags" />
<link href="reference/css-transform-3d-rotateZ-ref.xht" rel="match" />
<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;
left: 70px;
position: absolute;
top: 100px;
width: 240px;
}
div.origin {
background-color: green;
}
div.redsquare {
background-color: red;
height: 60px;
left: 70px;
top: 190px;
width: 240px;
}
div.greensquare {
background-color: green;
height: 240px;
left: 160px;
top: 100px;
width: 60px;
transform: rotate3d(0,0,1,-90deg);
}
</style>
</head>
<body>
<p>Test passes if there is a green square and no red.</p>
<div class="origin"></div>
<div class="redsquare"></div>
<div class="greensquare"></div>
</body></html>

45
tests/wpt/css-tests/css-transforms-1_dev/xhtml1print/css-transform-3d-rotate3d-Z-positive.xht Normal file
View file

@ -0,0 +1,45 @@
<!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>
<meta charset="utf-8" />
<title>CSS Transforms Test: rotate3d on div element</title>
<link href="http://www.intel.com" rel="author" title="Intel" />
<link href="http://www.w3.org/TR/css-transforms-1/#three-d-transform-functions" rel="help" />
<meta content="" name="flags" />
<link href="reference/css-transform-3d-rotateZ-ref.xht" rel="match" />
<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;
left: 70px;
position: absolute;
top: 100px;
width: 240px;
}
div.origin {
background-color: green;
}
div.redsquare {
background-color: red;
height: 60px;
left: 70px;
top: 190px;
width: 240px;
}
div.greensquare {
background-color: green;
height: 240px;
left: 160px;
top: 100px;
width: 60px;
transform: rotate3d(0,0,1,90deg);
}
</style>
</head>
<body>
<p>Test passes if there is a green square and no red.</p>
<div class="origin"></div>
<div class="redsquare"></div>
<div class="greensquare"></div>
</body></html>

38
tests/wpt/css-tests/css-transforms-1_dev/xhtml1print/css-transform-3d-rotateX-negative.xht Normal file
View file

@ -0,0 +1,38 @@
<!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>
<meta charset="utf-8" />
<title>CSS Transforms Test: rotateX on div element</title>
<link href="http://www.intel.com" rel="author" title="Intel" />
<link href="http://www.w3.org/TR/css-transforms-1/#three-d-transform-functions" rel="help" />
<link href="reference/css-transform-3d-rotateX-ref.xht" rel="match" />
<meta content="" name="flags" />
<meta content="Test checks that rotate a 2:1 rectangle on X-axis for -60 degree we will get a square and completely cover the red square, and here we use border due to the rectangle not be rotated would cover the red square." name="assert" />
<style>
div {
left: 20px;
position: absolute;
top: 35px;
}
div.redsquare {
background-color: red;
border: 5px solid black;
height: 120px;
left: 15px;
top: 90px;
width: 120px;
}
div.green {
background-color: green;
height: 240px;
transform: rotateX(-60deg);
width: 120px;
}
</style>
</head>
<body>
<p>Test passes if there is a green square with black border around, and no any red.</p>
<div class="redsquare"></div>
<div class="green"></div>
</body></html>

38
tests/wpt/css-tests/css-transforms-1_dev/xhtml1print/css-transform-3d-rotateX-positive.xht Normal file
View file

@ -0,0 +1,38 @@
<!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>
<meta charset="utf-8" />
<title>CSS Transforms Test: rotateX on div element</title>
<link href="http://www.intel.com" rel="author" title="Intel" />
<link href="http://www.w3.org/TR/css-transforms-1/#three-d-transform-functions" rel="help" />
<link href="reference/css-transform-3d-rotateX-ref.xht" rel="match" />
<meta content="" name="flags" />
<meta content="Test checks that rotate a 2:1 rectangle on X-axis for 60 degree we will get a square and completely cover the red square, and here we use border due to the rectangle not be rotated would cover the red square." name="assert" />
<style>
div {
left: 20px;
position: absolute;
top: 35px;
}
div.redsquare {
background-color: red;
border: 5px solid black;
height: 120px;
left: 15px;
top: 90px;
width: 120px;
}
div.green {
background-color: green;
height: 240px;
transform: rotateX(60deg);
width: 120px;
}
</style>
</head>
<body>
<p>Test passes if there is a green square with black border around, and no any red.</p>
<div class="redsquare"></div>
<div class="green"></div>
</body></html>

38
tests/wpt/css-tests/css-transforms-1_dev/xhtml1print/css-transform-3d-rotateY-negative.xht Normal file
View file

@ -0,0 +1,38 @@
<!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>
<meta charset="utf-8" />
<title>CSS Transforms Test: rotateY on div element</title>
<link href="http://www.intel.com" rel="author" title="Intel" />
<link href="http://www.w3.org/TR/css-transforms-1/#three-d-transform-functions" rel="help" />
<link href="reference/css-transform-3d-rotateY-ref.xht" rel="match" />
<meta content="" name="flags" />
<meta content="Test checks that rotate a 2:1 rectangle on Y-axis for -60 degree we will get a square and completely cover the red square, and here we use border due to the rectangle not be rotated would cover the red square." name="assert" />
<style>
div {
left: 10px;
position: absolute;
top: 50px;
}
div.redsquare {
background-color: red;
border: 5px solid black;
height: 120px;
left: 65px;
top: 45px;
width: 120px;
}
div.green {
background-color: green;
height: 120px;
transform: rotateY(-60deg);
width: 240px;
}
</style>
</head>
<body>
<p>Test passes if there is a green square with black border around, and no any red.</p>
<div class="redsquare"></div>
<div class="green"></div>
</body></html>

38
tests/wpt/css-tests/css-transforms-1_dev/xhtml1print/css-transform-3d-rotateY-positive.xht Normal file
View file

@ -0,0 +1,38 @@
<!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>
<meta charset="utf-8" />
<title>CSS Transforms Test: rotateY on div element</title>
<link href="http://www.intel.com" rel="author" title="Intel" />
<link href="http://www.w3.org/TR/css-transforms-1/#three-d-transform-functions" rel="help" />
<link href="reference/css-transform-3d-rotateY-ref.xht" rel="match" />
<meta content="" name="flags" />
<meta content="Test checks that rotate a 2:1 rectangle on Y-axis for 60 degree we will get a square and completely cover the red square, and here we use border due to the rectangle not be rotated would cover the red square." name="assert" />
<style>
div {
left: 10px;
position: absolute;
top: 50px;
}
div.redsquare {
background-color: red;
border: 5px solid black;
height: 120px;
left: 65px;
top: 45px;
width: 120px;
}
div.green {
background-color: green;
height: 120px;
transform: rotateY(60deg);
width: 240px;
}
</style>
</head>
<body>
<p>Test passes if there is a green square with black border around, and no any red.</p>
<div class="redsquare"></div>
<div class="green"></div>
</body></html>

45
tests/wpt/css-tests/css-transforms-1_dev/xhtml1print/css-transform-3d-rotateZ-negative.xht Normal file
View file

@ -0,0 +1,45 @@
<!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>
<meta charset="utf-8" />
<title>CSS Transforms Test: rotate3d on div element</title>
<link href="http://www.intel.com" rel="author" title="Intel" />
<link href="http://www.w3.org/TR/css-transforms-1/#three-d-transform-functions" rel="help" />
<meta content="" name="flags" />
<link href="reference/css-transform-3d-rotateZ-ref.xht" rel="match" />
<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;
left: 70px;
position: absolute;
top: 100px;
width: 240px;
}
div.origin {
background-color: green;
}
div.redsquare {
background-color: red;
height: 60px;
left: 70px;
top: 190px;
width: 240px;
}
div.greensquare {
background-color: green;
height: 240px;
left: 160px;
top: 100px;
width: 60px;
transform: rotateZ(-90deg);
}
</style>
</head>
<body>
<p>Test passes if there is a green square and no red.</p>
<div class="origin"></div>
<div class="redsquare"></div>
<div class="greensquare"></div>
</body></html>

45
tests/wpt/css-tests/css-transforms-1_dev/xhtml1print/css-transform-3d-rotateZ-positive.xht Normal file
View file

@ -0,0 +1,45 @@
<!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>
<meta charset="utf-8" />
<title>CSS Transforms Test: rotate3d on div element</title>
<link href="http://www.intel.com" rel="author" title="Intel" />
<link href="http://www.w3.org/TR/css-transforms-1/#three-d-transform-functions" rel="help" />
<meta content="" name="flags" />
<link href="reference/css-transform-3d-rotateZ-ref.xht" rel="match" />
<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;
left: 70px;
position: absolute;
top: 100px;
width: 240px;
}
div.origin {
background-color: green;
}
div.redsquare {
background-color: red;
height: 60px;
left: 70px;
top: 190px;
width: 240px;
}
div.greensquare {
background-color: green;
height: 240px;
left: 160px;
top: 100px;
width: 60px;
transform: rotateZ(90deg);
}
</style>
</head>
<body>
<p>Test passes if there is a green square and no red.</p>
<div class="origin"></div>
<div class="redsquare"></div>
<div class="greensquare"></div>
</body></html>

58
tests/wpt/css-tests/css-transforms-1_dev/xhtml1print/css-transform-3d-transform-style.xht Normal file
View file

@ -0,0 +1,58 @@
<!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>
<meta charset="utf-8" />
<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="reference/css-transform-3d-transform-style-ref.xht" 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" />
<style>
div {
position: absolute;
}
div.container {
background-color: gray;
height: 200px;
width: 200px;
left: 65px;
top: 45px;
}
div.blue {
background-color: blue;
height: 180px;
width: 180px;
left: 10px;
top: 10px;
transform: rotateY(-60deg);
transform-style: preserve-3d;
}
div.green {
background-color: green;
left: 40px;
top: 0px;
height: 180px;
width: 180px;
transform: rotateY(120deg);
}
div.red{
background-color: red;
left: 140px;
top: 10px;
height: 180px;
width: 20px;
}
</style>
</head>
<body>
<p>Test passes if there is a gray square with <b>one blue</b> and <b>one green</b> box <b>inside</b>, and no any red.</p>
<div class="container">
<div class="red"></div>
<div class="blue">
<div class="green"></div>
</div>
</div>
</body></html>

56
tests/wpt/css-tests/css-transforms-1_dev/xhtml1print/css-transform-inherit-rotate.xht Normal file
View file

@ -0,0 +1,56 @@
<!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 Transforms Test: CSS transforms rotate inheritance on div element</title>
<link href="mailto:gaodl@uw.edu" rel="author" title="Delong Gao" />
<link href="mailto:rhauck@adobe.com" rel="reviewer" title="Rebecca Hauck" />
<link href="http://www.w3.org/TR/css-transforms-1/#transform-property" rel="help" />
<link href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions" rel="help" />
<!--<link rel="match" href="reference/ttwf-reftest-tutorial-ref.html">
<meta name="flags" content="svg">-->
<meta content="Rotation on parent element will not be inherited by child element, unless declared. The test is passed if there is a green square and no red. And it is rotated 45 degree." name="assert" />
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.flag {
position: absolute;
top: 100px;
left: 100px;
width: 100px;
height: 100px;
background-color: green;
z-index: 2;
}/*This div is used to show the red square*/
.parentSquare {
position: absolute;
top: 50px;
left: 50px;
width: 200px;
height: 200px;
transform: rotate(45deg);
background-color: green;
}
.childSquare {
position: absolute;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
background-color: red;
transform: inherit;/*While inherited, the child div should rotate 90 degree instead of 45*/
}
p {
position: absolute;
top: 300px;
}
</style>
</head>
<body>
<p>The test passes if there is a green square and no red. And it is rotated 45 degree.</p>
<div class="flag"></div>
<div class="parentSquare">
<div class="childSquare"></div>
</div>
</body></html>

49
tests/wpt/css-tests/css-transforms-1_dev/xhtml1print/css-transform-inherit-scale.xht Normal file
View file

@ -0,0 +1,49 @@
<!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 Transforms Test: CSS transforms scale 2 inheritance on div elements</title>
<link href="mailto:gaodl@uw.edu" rel="author" title="Delong Gao" />
<link href="mailto:rhauck@adobe.com" rel="reviewer" title="Rebecca Hauck" />
<link href="http://www.w3.org/TR/css-transforms-1/#transform-property" rel="help" />
<link href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions" rel="help" />
<!--<link rel="match" href="reference/ttwf-reftest-tutorial-ref.html">
<meta name="flags" content="svg">-->
<meta content="While child div inherits property from its parent, scaling 2 on parent div will course the child to scale 4 and totally cover the red div. The test passes if there is a green square and no red. " name="assert" />
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.red {
position: absolute;
width: 200px;
height: 200px;
background-color: red;
}
.parent {
background: yellow;
width: 50px;
height: 50px;
position: absolute;
top: 75px;
left: 75px;
transform: scale(2);
}
.child {
position: absolute;
top: 10px;
transform: inherit;
width: 50px;
height: 50px;
background-color: green;
}
</style>
</head>
<body>
<p>The test passes if there is a green square and no red. </p>
<div class="red"></div>
<div class="parent">
<div class="child"></div>
</div>
</body></html>

41
tests/wpt/css-tests/css-transforms-1_dev/xhtml1print/css-transform-property-existence.xht Normal file
View file

@ -0,0 +1,41 @@
<!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>
<meta charset="utf-8" />
<title>CSS Transforms Test: property existence</title>
<link href="http://www.intel.com" rel="author" title="Intel" />
<link href="http://www.w3.org/TR/css-transforms-1/#propdef-transform" rel="help" />
<meta content="dom" name="flags" />
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
</head>
<body>
<div id="test"></div>
<div id="log"></div>
<script>
test(function() {
assert_not_equals(document.getElementById("test").style.transfor, undefined, "expect transform is not undefined");
}, "Check the existence of transform.");
test(function() {
assert_own_property(document.getElementById("test").style, "transform-origin", "expect transform-origin");
}, "Check the existence of transform-origin.");
test(function() {
assert_own_property(document.getElementById("test").style, "transform-style", "expect transform-style");
}, "Check the existence of transform-style.");
test(function() {
assert_own_property(document.getElementById("test").style, "perspective", "expect perspective");
}, "Check the existence of perspective.");
test(function() {
assert_own_property(document.getElementById("test").style, "perspective-origin", "expect perspective-origin");
}, "Check the existence of perspective-origin.");
test(function() {
assert_own_property(document.getElementById("test").style, "backface-visibility", "expect backface-visibility");
}, "Check the existence of backface-visibility.");
</script>
</body></html>

50
tests/wpt/css-tests/css-transforms-1_dev/xhtml1print/css-transform-scale-001.xht Normal file
View file

@ -0,0 +1,50 @@
<!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 Transforms Test: transform property with scale function on hover state</title>
<link href="mailto:granimalcracker@gmail.com" rel="author" title="Chris Sanborn" />
<link href="http://www.w3.org/TR/css-transforms-1/#transform-property" rel="help" />
<link href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property" rel="help" />
<link href="http://dev.w3.org/csswg/css-transforms-1/#transform-functions" rel="help" />
<!-- See also: http://www.w3.org/wiki/CSS/Selectors/pseudo-classes/:hover -->
<link href="reference/css-transform-scale-ref-001.xht" rel="match" />
<meta content="When the element is hovered over, the transform scales the element to twice its size in both the X and Y directions and moves its origin to the top left corner." name="assert" />
<meta content="interactive" name="flag" />
<style type="text/css">
.container {
position: absolute;
}
.greenSquare {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
background-color: green;
}
.greenSquare:hover {
transform-origin: 0 0;
transform: scale(2);
}
/* This div should only be visible if the test fails */
.redSquare {
position: absolute;
/* It is approximately the same size as the test div, but with a 1px margin */
width: 98px;
height: 98px;
background-color: red;
left: 100px;
top :100px;
}
</style>
</head>
<body>
<p>The test passes if you hover over the green square and it completely covers the red square.</p>
<div class="container">
<!-- This is the square that should not be visible if the test passes -->
<div class="redSquare"></div>
<!-- This is the square being tested with the transform -->
<div class="greenSquare"></div>
</div>
</body></html>

47
tests/wpt/css-tests/css-transforms-1_dev/xhtml1print/css-transform-scale-002.xht Normal file
View file

@ -0,0 +1,47 @@
<!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 Transforms Test: transform property with scale function and move its origin</title>
<link href="mailto:granimalcracker@gmail.com" rel="author" title="Chris Sanborn" />
<link href="http://www.w3.org/TR/css-transforms-1/#transform-property" rel="help" />
<link href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property" rel="help" />
<link href="http://dev.w3.org/csswg/css-transforms-1/#transform-functions" rel="help" />
<link href="reference/css-transform-scale-ref-002.xht" rel="match" />
<meta content="The transform scales the element to twice its size in both the X and Y directions and moves its origin to the top left corner." name="assert" />
<style type="text/css">
.container {
position: absolute;
}
.greenSquare {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
background-color: green;
transform-origin: 0 0;
transform: scale(2);
}
/* This div should only be visible if the test fails */
.redSquare {
position: absolute;
/* It is approximately the same size as the test div, but with a 1px margin */
width: 98px;
height: 98px;
background-color: red;
left: 100px;
top :100px;
}
</style>
</head>
<body>
<p>The test passes if the green square completely covers the red square.</p>
<div class="container">
<!-- This is the square that should not be visible if the test passes -->
<div class="redSquare"></div>
<!-- This is the square being tested with the transform -->
<div class="greenSquare"></div>
</div>
</body></html>

82
tests/wpt/css-tests/css-transforms-1_dev/xhtml1print/css-transform-style-evaluation-validation.xht Normal file
View file

@ -0,0 +1,82 @@
<!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>
<meta charset="utf-8" />
<title>CSS Transforms Test: property</title>
<link href="http://www.intel.com" rel="author" title="Intel" />
<link href="http://www.w3.org/TR/css-transforms-1/#transform-property" rel="help" />
<meta content="dom" name="flags" />
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
</head>
<body>
<div id="test"></div>
<div id="log"></div>
<script>
test(function() {
document.getElementById("test").style.transform = "rotate(30deg),rotateX(60deg)"
assert_equals(document.getElementById("test").style.transform, "", "expect NULL");
}, "transform: Check bad-format multi-expr input.");
test(function() {
document.getElementById("test").style.transform = "rotate(30deg)|rotateX(60deg)";
assert_equals(document.getElementById("test").style.transform, "", "expect not NULL");
}, "transform: Check multi-expr input with tab.");
test(function() {
document.getElementById("test").style.transform = " rotate(30deg) rotateX(60deg) ";
assert_not_equals(document.getElementById("test").style.transform, "", "expect not NULL");
}, "transform: Check multi-expr input with spaces start and end.");
test(function() {
document.getElementById("test").style.transform = "rotate(30deg) rotateX(60deg)";
assert_not_equals(document.getElementById("test").style.transform, "", "expect not NULL");
}, "transform: Check multi-expr input with two spaces.");
test(function() {
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");
}, "transform: Check rotate(0) input.");
test(function() {
document.getElementById("test").style.transform = "rotateX(0)";
assert_not_equals(document.getElementById("test").style.transform, "", "expect not NULL");
}, "transform: Check rotateX(0) input.");
test(function() {
document.getElementById("test").style.transform = "rotateY(0)";
assert_not_equals(document.getElementById("test").style.transform, "", "expect not NULL");
}, "transform: Check rotateY(0) input.");
test(function() {
document.getElementById("test").style.transform = "rotateZ(0)";
assert_not_equals(document.getElementById("test").style.transform, "", "expect not NULL");
}, "transform: Check rotateZ(0) input.");
test(function() {
document.getElementById("test").style.transform = "rotate(string)";
assert_not_equals(document.getElementById("test").style.transform, "", "expect not NULL");
}, "transform: Check rotate(string) input.");
test(function() {
document.getElementById("test").style.transform = "rotateX(string)";
assert_not_equals(document.getElementById("test").style.transform, "", "expect not NULL");
}, "transform: Check rotateX(string) input.");
test(function() {
document.getElementById("test").style.transform = "rotateY(string)";
assert_not_equals(document.getElementById("test").style.transform, "", "expect not NULL");
}, "transform: Check rotateY(string) input.");
test(function() {
document.getElementById("test").style.transform = "rotateZ(string)";
assert_not_equals(document.getElementById("test").style.transform, "", "expect not NULL");
}, "transform: Check rotateZ(string) input.");
</script>
</body></html>

19
tests/wpt/css-tests/css-transforms-1_dev/xhtml1print/css-transforms-3d-on-anonymous-block-001.xht Normal file
View file

@ -0,0 +1,19 @@
<!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"><!-- Submitted from TestTWF Paris --><head>
<title>CSS Transforms Test: No 3D transforms on anonymous block boxes</title>
<link href="mailto:dschulze@adobe.com" rel="author" title="Dirk Schulze" />
<link href="mailto:eoconnor@apple.com" rel="reviewer" title="Edward O'Connor" /> <!-- 2012-10-27 -->
<link href="http://www.w3.org/TR/css-transforms-1/#transform-rendering" rel="help" />
<link href="http://www.w3.org/TR/css-transforms-1/#3d-transform-rendering" rel="help" />
<link href="reference/css-transforms-3d-anonymous-block-ref.xht" rel="match" />
<meta content="3D transforms can not be applied to anonymous block boxes." name="assert" />
</head>
<body>
<p>You should see three lines of text written from left to right and unmirrored.</p><p>
</p><div style="transform-style: preserve-3d;">
<span style="transform-style: preserve-3d; transform: rotateX(90deg)">Test</span>
<p style="transform-style: preserve-3d;">Test</p>
</div>
</body></html>

41
tests/wpt/css-tests/css-transforms-1_dev/xhtml1print/css-transforms-transformlist.xht Normal file
View file

@ -0,0 +1,41 @@
<!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"><!-- Submitted from TestTWF Paris --><head>
<title>CSS Test: SVG transform in baseVal list</title>
<link href="mailto:cabanier@adobe.com" rel="author" title="Rik Cabanier" />
<link href="http://www.w3.org/TR/css-transforms-1/#transform-attribute-dom" rel="help" />
<link href="reference/css-transforms-transformlist-ref.xht" 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(){
var r = document.getElementById("rect");
var result = document.getElementById("result");
if(r.transform.baseVal.length&gt;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>
<svg id="svgelement" xmlns="http://www.w3.org/2000/svg">
<rect width="100" id="rect" height="100"></rect>
</svg>
<div id="result"></div>
</body></html>

32
tests/wpt/css-tests/css-transforms-1_dev/xhtml1print/css3-transform-perspective.xht Normal file
View file

@ -0,0 +1,32 @@
<!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 Test: rotateX 90 degrees with perspective make it invisible</title>
<link href="mailto:robin.webkit@gmail.com" rel="author" title="caoqixing" />
<link href="mailto:shendayang@baidu.com" rel="reviewer" title="Dayang Shen" /> <!-- 2013-09-03 -->
<link href="http://www.w3.org/TR/css-transforms-1/#propdef-perspective" rel="help" />
<link href="reference/css3-transform-perspective-ref.xht" rel="match" />
<meta content="Test passes if rotateX 90 degrees with perspective make it invisible" name="assert" />
<style type="text/css">
div {
width: 200px;
height: 200px;
}
#container {
position: relative;
background-color: green;
perspective: 1000px;
}
#rotated {
background-color: red;
transform: rotateX(90deg);
}
</style>
</head>
<body>
<p>The test passes if there is a green square and no red.</p>
<div id="container">
<div id="rotated"></div>
</div>
</body></html>

36
tests/wpt/css-tests/css-transforms-1_dev/xhtml1print/css3-transform-rotateY.xht Normal file
View file

@ -0,0 +1,36 @@
<!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 Transforms Test: transform property with rotateY function</title>
<link href="mailto:codedancerhua@gmail.com" rel="author" title="Noah Lu" />
<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.xht" rel="match" />
<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;
position: absolute;
top: 50px;
left:51px;
z-index:10;
}
.red{
background-color:red;
width: 140px;
left:80px;
z-index:9;
}
.green{
transform:rotateY(45deg);
}
</style>
</head>
<body>
<p>The test passes if there is a green rectangle and no red.</p>
<div class="green"></div>
<div class="red"></div>
</body></html>

38
tests/wpt/css-tests/css-transforms-1_dev/xhtml1print/css3-transform-scale-002.xht Normal file
View file

@ -0,0 +1,38 @@
<!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 Transforms Test: transform property with scale function</title>
<link href="mailto:codedancerhua@gmail.com" rel="author" title="Noah Lu" />
<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.xht" rel="match" />
<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;
position: absolute;
top: 150px;
left:150px;
z-index:10;
}
.red{
background-color:red;
width: 200px;
height: 200px;
left:100px;
top:100px;
z-index:9;
}
.green{
transform:scale(2);
}
</style>
</head>
<body>
<p>The test passes if there is a green square and no red.</p>
<div class="red"></div>
<div class="green"></div>
</body></html>

40
tests/wpt/css-tests/css-transforms-1_dev/xhtml1print/css3-transform-scale.xht Normal file
View file

@ -0,0 +1,40 @@
<!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 Transforms Test: transform property with scale function</title>
<link href="mailto:codedancerhua@gmail.com" rel="author" title="Noah Lu" />
<link href="mailto:shendayang@baidu.com" rel="reviewer" title="Dayang Shen" /> <!-- 2013-09-04 -->
<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.xht" rel="match" />
<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;
position: absolute;
top: 150px;
left: 150px;
z-index: 10;
}
.red{
background-color: red;
width: 200px;
height: 200px;
left: 100px;
top: 100px;
z-index:9;
}
.green{
transform:scale(2);
}
</style>
</head>
<body>
<p>The test passes if there is a green square and no red.</p>
<div class="red"></div>
<div class="green"></div>
</body></html>

35
tests/wpt/css-tests/css-transforms-1_dev/xhtml1print/iframe-001.xht Normal file
View file

@ -0,0 +1,35 @@
<!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 Regions: flowing an iframe that loads content with 3D transform</title>
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan" />
<link href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" rel="help" />
<link href="http://www.w3.org/TR/css3-regions/#the-flow-from-property" rel="help" />
<link href="http://www.w3.org/TR/css-transforms-1/#transform-functions" rel="help" />
<meta content="Test checks that flowing an iframe that loads content with 3D transforms in a region renders without artifacts." name="assert" />
<meta content="ahem" name="flags" />
<link href="reference/iframe-001-ref.xht" rel="match" />
<style>
.flow {
flow-into: f;
}
.region {
flow-from: f;
width: 400px;
height: 300px;
}
.region p {
background-color: red;
height: 50%;
}
</style>
</head>
<body>
<p>Test passes if you see horizontal green rectangle and no red.</p>
<iframe width="400" height="300" class="flow" frameborder="0" src="support/3d-filler.html"></iframe>
<div class="region">
<p>&#xA0;</p>
</div>
</body></html>

41
tests/wpt/css-tests/css-transforms-1_dev/xhtml1print/perspective-origin-001.xht Normal file
View file

@ -0,0 +1,41 @@
<!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><meta charset="utf-8" />
<title>CSS Transforms Test: perspective-origin - 0px center('center' computes to '50%' in vertical position)</title>
<link href="http://www.intel.com" rel="author" title="Intel" />
<link href="mailto:jieqiongx.cui@intel.com" rel="author" title="Jieqiong Cui" />
<link href="http://www.w3.org/TR/css-transforms-1/#propdef-perspective-origin" rel="help" title="11. The 'perspective-origin' Property" />
<link href="reference/ref-filled-green-100px-square.xht" rel="match" />
<meta content="" name="flags" />
<meta content="The 'perspective-origin' property set 'center' computes to 50% for the vertical position." name="assert" />
<style>
div {
height: 100px;
position: absolute;
width: 100px;
}
#test {
perspective: 2px;
perspective-origin: 0px center;
}
#redSquare {
background-color: red;
transform: translateZ(0px);
}
#ref {
perspective: 2px;
perspective-origin: 0px 50%;
}
#greenSquare {
background-color: green;
height: 50px;
top: 25px;
transform: translateZ(1px);
width: 50px;
}
</style>
</head><body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="test"><div id="redSquare"></div></div>
<div id="ref"><div id="greenSquare"></div></div>
</body></html>

41
tests/wpt/css-tests/css-transforms-1_dev/xhtml1print/perspective-origin-002.xht Normal file
View file

@ -0,0 +1,41 @@
<!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><meta charset="utf-8" />
<title>CSS Transforms Test: perspective-origin - center 0px('center' computes to '50%' in horizontal position)</title>
<link href="http://www.intel.com" rel="author" title="Intel" />
<link href="mailto:jieqiongx.cui@intel.com" rel="author" title="Jieqiong Cui" />
<link href="http://www.w3.org/TR/css-transforms-1/#propdef-perspective-origin" rel="help" title="11. The 'perspective-origin' Property" />
<link href="reference/ref-filled-green-100px-square.xht" rel="match" />
<meta content="" name="flags" />
<meta content="The 'perspective-origin' property set 'center' computes to 50% for the horizontal position." name="assert" />
<style>
div {
height: 100px;
position: absolute;
width: 100px;
}
#test {
perspective: 2px;
perspective-origin: center 0px;
}
#redSquare {
background-color: red;
transform: translateZ(0px);
}
#ref {
perspective: 2px;
perspective-origin: 50% 0px;
}
#greenSquare {
background-color: green;
height: 50px;
left: 25px;
transform: translateZ(1px);
width: 50px;
}
</style>
</head><body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="test"><div id="redSquare"></div></div>
<div id="ref"><div id="greenSquare"></div></div>
</body></html>

42
tests/wpt/css-tests/css-transforms-1_dev/xhtml1print/perspective-origin-003.xht Normal file
View file

@ -0,0 +1,42 @@
<!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><meta charset="utf-8" />
<title>CSS Transforms Test: perspective-origin - 50% bottom('bottom' computes to '100%' in vertical position)</title>
<link href="http://www.intel.com" rel="author" title="Intel" />
<link href="mailto:jieqiongx.cui@intel.com" rel="author" title="Jieqiong Cui" />
<link href="http://www.w3.org/TR/css-transforms-1/#propdef-perspective-origin" rel="help" title="11. The 'perspective-origin' Property" />
<link href="reference/ref-filled-green-100px-square.xht" rel="match" />
<meta content="" name="flags" />
<meta content="The 'perspective-origin' property set 'bottom' computes to 100% for the vertical position." name="assert" />
<style>
div {
height: 100px;
position: absolute;
width: 100px;
}
#test {
perspective: 2px;
perspective-origin: 50% bottom;
}
#redSquare {
background-color: red;
transform: translateZ(0px);
}
#ref {
perspective: 2px;
perspective-origin: 50% 100%;
}
#greenSquare {
background-color: green;
height: 50px;
left: 25px;
top: 50px;
transform: translateZ(1px);
width: 50px;
}
</style>
</head><body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="test"><div id="redSquare"></div></div>
<div id="ref"><div id="greenSquare"></div></div>
</body></html>

41
tests/wpt/css-tests/css-transforms-1_dev/xhtml1print/perspective-origin-004.xht Normal file
View file

@ -0,0 +1,41 @@
<!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><meta charset="utf-8" />
<title>CSS Transforms Test: perspective-origin - 50% top('top' computes to '0%' in vertical position)</title>
<link href="http://www.intel.com" rel="author" title="Intel" />
<link href="mailto:jieqiongx.cui@intel.com" rel="author" title="Jieqiong Cui" />
<link href="http://www.w3.org/TR/css-transforms-1/#propdef-perspective-origin" rel="help" title="11. The 'perspective-origin' Property" />
<link href="reference/ref-filled-green-100px-square.xht" rel="match" />
<meta content="" name="flags" />
<meta content="The 'perspective-origin' property set 'top' computes to 0% for the vertical position." name="assert" />
<style>
div {
height: 100px;
position: absolute;
width: 100px;
}
#test {
perspective: 2px;
perspective-origin: 50% top;
}
#redSquare {
background-color: red;
transform: translateZ(0px);
}
#ref {
perspective: 2px;
perspective-origin: 50% 0%;
}
#greenSquare {
background-color: green;
height: 50px;
left: 25px;
transform: translateZ(1px);
width: 50px;
}
</style>
</head><body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="test"><div id="redSquare"></div></div>
<div id="ref"><div id="greenSquare"></div></div>
</body></html>

41
tests/wpt/css-tests/css-transforms-1_dev/xhtml1print/perspective-origin-005.xht Normal file
View file

@ -0,0 +1,41 @@
<!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><meta charset="utf-8" />
<title>CSS Transforms Test: perspective-origin - left 50%('left' computes to '0%' in horizontal position)</title>
<link href="http://www.intel.com" rel="author" title="Intel" />
<link href="mailto:jieqiongx.cui@intel.com" rel="author" title="Jieqiong Cui" />
<link href="http://www.w3.org/TR/css-transforms-1/#propdef-perspective-origin" rel="help" title="11. The 'perspective-origin' Property" />
<link href="reference/ref-filled-green-100px-square.xht" rel="match" />
<meta content="" name="flags" />
<meta content="The 'perspective-origin' property set 'left' computes to 0% for the horizontal position." name="assert" />
<style>
div {
height: 100px;
position: absolute;
width: 100px;
}
#test {
perspective: 2px;
perspective-origin: left 50%;
}
#redSquare {
background-color: red;
transform: translateZ(0px);
}
#ref {
perspective: 2px;
perspective-origin: 0% 50%;
}
#greenSquare {
background-color: green;
height: 50px;
top: 25px;
transform: translateZ(1px);
width: 50px;
}
</style>
</head><body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="test"><div id="redSquare"></div></div>
<div id="ref"><div id="greenSquare"></div></div>
</body></html>

42
tests/wpt/css-tests/css-transforms-1_dev/xhtml1print/perspective-origin-006.xht Normal file
View file

@ -0,0 +1,42 @@
<!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><meta charset="utf-8" />
<title>CSS Transforms Test: perspective-origin - right 50%('right' computes to '100%' in horizontal position)</title>
<link href="http://www.intel.com" rel="author" title="Intel" />
<link href="mailto:jieqiongx.cui@intel.com" rel="author" title="Jieqiong Cui" />
<link href="http://www.w3.org/TR/css-transforms-1/#propdef-perspective-origin" rel="help" title="11. The 'perspective-origin' Property" />
<link href="reference/ref-filled-green-100px-square.xht" rel="match" />
<meta content="" name="flags" />
<meta content="The 'perspective-origin' property set 'right' computes to 100% for the horizontal position." name="assert" />
<style>
div {
height: 100px;
position: absolute;
width: 100px;
}
#test {
perspective: 2px;
perspective-origin: right 50%;
}
#redSquare {
background-color: red;
transform: translateZ(0px);
}
#ref {
perspective: 2px;
perspective-origin: 100% 50%;
}
#greenSquare {
background-color: green;
height: 50px;
left: 50px;
top: 25px;
transform: translateZ(1px);
width: 50px;
}
</style>
</head><body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="test"><div id="redSquare"></div></div>
<div id="ref"><div id="greenSquare"></div></div>
</body></html>

48
tests/wpt/css-tests/css-transforms-1_dev/xhtml1print/perspective-origin-x.xht Normal file
View file

@ -0,0 +1,48 @@
<!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 Transforms Test: perspective property</title>
<link href="mailto:pancha0.0@gmail.com" rel="author" title="Francisca Gil" />
<link href="http://www.apple.com" rel="reviewer" title="Apple Inc." />
<link href="http://www.w3.org/TR/css-transforms-1/#propdef-perspective-origin" 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/#transform-property" rel="help" />
<link href="reference/perspective-origin-reftest.xht" rel="match" />
<meta content="Asserts that origin 'x1' visually moves the objects '-x1*d/(d-1)' " name="assert" />
<style type="text/css">
.container {
position: absolute;
width: 150px;
height: 150px;
top: 100px;
left: 100px;
perspective: 3px;
perspective-origin: 0px 50%;
}
.redSquare {
position: absolute;
top: 0px;
left: 0px;
width: 150px;
height: 150px;
background: red;
transform: translateZ(0px);
}
.greenSquare {
position: absolute;
top: 25px;
left: 0px;
width: 100px;
height: 100px;
background: green;
transform: translateZ(1px);
}
</style>
</head>
<body>
<p>The test passes if there is a green square and no red.</p>
<div class="container">
<div class="redSquare"></div>
<div class="greenSquare"></div>
</div>
</body></html>

47
tests/wpt/css-tests/css-transforms-1_dev/xhtml1print/perspective-origin-xy.xht Normal file
View file

@ -0,0 +1,47 @@
<!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 Transforms Test: perspective property</title>
<link href="mailto:pancha0.0@gmail.com" rel="author" title="Francisca Gil" />
<link href="http://www.apple.com" rel="reviewer" title="Apple Inc." />
<link href="http://www.w3.org/TR/css-transforms-1/#propdef-perspective-origin" rel="help" />
<link href="http://www.w3.org/TR/css-transforms-1/#transform-property" rel="help" />
<link href="reference/perspective-reftest.xht" rel="match" />
<meta content="Asserts that origin '&lt;x,y>' visually moves the objects '&lt;-x,-y>*d/(d-1)' " name="assert" />
<style type="text/css">
.container {
position: absolute;
width: 150px;
height: 150px;
top: 100px;
left: 100px;
perspective: 3px;
perspective-origin: 0px 0px;
}
.redSquare {
position: absolute;
top: 0px;
left: 0px;
width: 150px;
height: 150px;
background: red;
transform: translateZ(0px);
}
.greenSquare {
position: absolute;
top: 0px;
left: 0px;
width: 100px;
height: 100px;
background: green;
transform: translateZ(1px);
}
</style>
</head>
<body>
<p>The test passes if there is a green square and no red.</p>
<div class="container">
<div class="redSquare"></div>
<div class="greenSquare"></div>
</div>
</body></html>

45
tests/wpt/css-tests/css-transforms-1_dev/xhtml1print/perspective-translateZ-0.xht Normal file
View file

@ -0,0 +1,45 @@
<!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 Transforms Test: perspective property</title>
<link href="mailto:anduga@gmail.com" rel="author" title="Andres Ugarte" />
<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.xht" rel="match" />
<meta content="Asserts that points on the z=0 plane are unchanged" name="assert" />
<style type="text/css">
.container {
position: absolute;
width: 150px;
height: 150px;
top: 100px;
left: 100px;
perspective: 3px;
}
.redSquare {
position: absolute;
top: 0px;
left: 0px;
width: 150px;
height: 150px;
background: red;
transform: translateZ(0px);
}
.greenSquare {
position: absolute;
top: 25px;
left: 25px;
width: 100px;
height: 100px;
background: green;
transform: translateZ(1px);
}
</style>
</head>
<body>
<p>The test passes if there is a green square and no red.</p>
<div class="container">
<div class="redSquare"></div>
<div class="greenSquare"></div>
</div>
</body></html>

45
tests/wpt/css-tests/css-transforms-1_dev/xhtml1print/perspective-translateZ-negative.xht Normal file
View file

@ -0,0 +1,45 @@
<!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 Transforms Test: perspective property</title>
<link href="mailto:anduga@gmail.com" rel="author" title="Andres Ugarte" />
<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.xht" rel="match" />
<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;
width: 150px;
height: 150px;
top: 100px;
left: 100px;
perspective: 3px;
}
.redSquare {
position: absolute;
top: -25px;
left: -25px;
width: 200px;
height: 200px;
background: red;
transform: translateZ(-1px);
}
.greenSquare {
position: absolute;
top: 0;
left: 0;
width: 150px;
height: 150px;
background: green;
transform: translateZ(0px);
}
</style>
</head>
<body>
<p>The test passes if there is a green square and no red.</p>
<div class="container">
<div class="redSquare"></div>
<div class="greenSquare"></div>
</div>
</body></html>

37
tests/wpt/css-tests/css-transforms-1_dev/xhtml1print/perspective-translateZ-positive.xht Normal file
View file

@ -0,0 +1,37 @@
<!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 Transforms Test: perspective property</title>
<link href="mailto:anduga@gmail.com" rel="author" title="Andres Ugarte" />
<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.xht" rel="match" />
<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;
width: 150px;
height: 150px;
top: 100px;
left: 100px;
perspective: 3px;
background: red;
}
.greenSquare {
position: absolute;
top: 25px;
left: 25px;
width: 100px;
height: 100px;
background: green;
transform: translateZ(1px);
}
</style>
</head>
<body>
<p>The test passes if there is a green square and no red.</p>
<div class="redContainer">
<div class="greenSquare"></div>
</div>
</body></html>

45
tests/wpt/css-tests/css-transforms-1_dev/xhtml1print/reference/2d-rotate-notref.xht Normal file
View file

@ -0,0 +1,45 @@
<!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 Test: CSS Transform using 2d rotate()</title>
<link href="http://mrkn.co/axegs" rel="author" title="Rick Hurst" />
<link href="reference/2d-rotate-ref.xht" rel="mismatch" />
<meta content="svg" name="flags" />
<style type="text/css">
article, svg{
position: absolute;
top: 220px;
left: 60px;
}
article{
border: 10px solid green;
display: block;
height: 100px;
width: 100px;
z-index: 2;
cursor:pointer;
}
section article{
transform: rotate(30deg);
transform-origin: 19% 197%;
}
</style>
</head>
<body>
<p>You should only see one block with color green, and you should not see any red</p>
<section>
<article></article>
<svg width="300" xmlns:xmlns="http://www.w3.org/2000/svg" version="1.1" height="200" xmlns="http://www.w3.org/2000/svg">
<style type="text/css">
rect{
stroke-width: 10;
stroke: red;
fill: none;
}
</style>
<rect y="-38" x="120" width="110" transform="FAIL_ME(30)" height="110"></rect>
</svg>
</section>
</body></html>

31
tests/wpt/css-tests/css-transforms-1_dev/xhtml1print/reference/2d-rotate-ref.xht Normal file
View file

@ -0,0 +1,31 @@
<!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 Test: CSS Transform using 2d rotate()</title>
<link href="http://mrkn.co/axegs" rel="author" title="Rick Hurst" />
<link href="reference/2d-rotate-notref.xht" rel="mismatch" />
<meta content="svg" name="flags" />
<style type="text/css">
svg{
position: absolute;
top: 220px;
left: 60px;
}
</style>
</head>
<body>
<p>You should only see one block with color green, and you should not see any red</p>
<section>
<svg width="300" xmlns:xmlns="http://www.w3.org/2000/svg" version="1.1" height="200" xmlns="http://www.w3.org/2000/svg">
<style type="text/css">
rect{
stroke-width: 10;
stroke: green;
fill: none;
}
</style>
<rect y="-38" x="120" width="110" transform="rotate(30)" height="110"></rect>
</svg>
</section>
</body></html>

37
tests/wpt/css-tests/css-transforms-1_dev/xhtml1print/reference/animations-001-ref.xht Normal file
View file

@ -0,0 +1,37 @@
<!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 Reftest Reference</title>
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan" />
<link href="../support/animations.css" rel="stylesheet" />
<style>
.transformed {
transform: rotateZ(45deg);
}
.flow {
color: green;
font-family: Ahem;
font-size: 20px;
line-height: 1em;
}
.region {
width: 100px;
height: 100px;
background-color: lightblue;
}
</style>
</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 />
xxxxx<br />
xxxxx<br />
xxxxx<br />
xxxxx<br />
</div>
</div>
</body></html>

38
tests/wpt/css-tests/css-transforms-1_dev/xhtml1print/reference/backface-visibility-hidden-ref.xht Normal file
View file

@ -0,0 +1,38 @@
<!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 Transforms Reference File</title>
<link href="mailto:jian.andy.zhang@gmail.com" rel="author" title="Jian Zhang" />
<style type="text/css">
.greenSquare {
position: absolute;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
background: green;
z-index: 2;
}
.card {
transform-style: preserve-3d;
}
.container {
width: 200px;
height: 200px;
perspective: 1000;
transform: rotateY(45deg);
}
</style>
</head>
<body>
<p>The test passes if there is a green retangle and no red.</p>
<div class="container">
<div class="card">
<div class="greenSquare face"></div>
</div>
</div>
</body></html>

28
tests/wpt/css-tests/css-transforms-1_dev/xhtml1print/reference/canvas3d-001-ref.xht Normal file
View file

@ -0,0 +1,28 @@
<!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 Reftest Reference</title>
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan" />
<script src="../support/Three.js" type="text/javascript"></script>
<script src="../support/static-cube.js" type="text/javascript"></script>
<style>
.flow,
.region {
width: 400px;
height: 300px;
}
.region {
border: 2px solid black;
}
</style>
</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>

30
tests/wpt/css-tests/css-transforms-1_dev/xhtml1print/reference/canvas3d-002-ref.xht Normal file
View file

@ -0,0 +1,30 @@
<!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 Reftest Reference</title>
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan" />
<script src="../support/Three.js" type="text/javascript"></script>
<script src="../support/static-cube.js" type="text/javascript"></script>
<style>
#container {
width: 400px;
height: 300px;
}
.region {
width: 200px;
height: 300px;
margin: -250px 100px 0px 100px;
}
</style>
</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 id="container">
<!-- A WebGL <canvas> will be created here, via script (see static-cube.js) -->
</div>
<div class="region">
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>
</body></html>

22
tests/wpt/css-tests/css-transforms-1_dev/xhtml1print/reference/css-rotate-2d-3d-001-ref.xht Normal file
View file

@ -0,0 +1,22 @@
<!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 Transforms Test: 2D rotation with 3D rotation</title>
<link href="mailto:pdr@google.com" rel="author" title="Philip Rogers" />
<link href="mailto:dschulze@adobe.com" rel="reviewer" title="Dirk Schulze" /> <!-- 2012-06-16 -->
<style type="text/css">
.greenSquareRef {
position: absolute;
top: 100px;
left: 100px;
width: 100px;
height: 100px;
background: green;
}
</style>
</head>
<body>
<p>The test passes if there is a green square and no red.</p>
<div class="greenSquareRef"></div>
</body></html>

27
tests/wpt/css-tests/css-transforms-1_dev/xhtml1print/reference/css-scale-nested-ref.xht Normal file
View file

@ -0,0 +1,27 @@
<!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 Transforms Reference File</title>
<link href="mailto:amolvshanbhag@yahoo.com" rel="author" title="Amol Shanbhag" />
<link href="mailto:rhauck@adobe.com" rel="reviewer" title="Rebecca Hauck" />
<style type="text/css">
div{
position: absolute;
}
.greenSquare {
width: 100px;
height: 100px;
background: green;
}
p{
padding-top: 130px;
}
</style>
</head>
<body>
<div class="greenSquare"></div>
<p>The test passes if there is a green square and no red.</p>
</body></html>

22
tests/wpt/css-tests/css-transforms-1_dev/xhtml1print/reference/css-skew-001-ref.xht Normal file
View file

@ -0,0 +1,22 @@
<!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"><!-- Submitted from TestTWF Paris --><head>
<title>CSS Test Reference: skew function part 1</title>
<link href="mailto:adrien@pachkoff.com" rel="author" title="Adrien Pachkoff" />
<style type="text/css">
svg {
top:0;
left:0;
position:absolute;
height: 268.778px;
width: 231.642px;
}
</style>
</head>
<body>
<p>The test passes if there is a green quadrilateral and no red.</p>
<svg xmlns="http://www.w3.org/2000/svg">
<path d="M 231.64212,268.77841 73.167806,158.54816 0,0 158.58452,110.15942 z" fill="green"></path>
</svg>
</body></html>

23
tests/wpt/css-tests/css-transforms-1_dev/xhtml1print/reference/css-skew-002-ref.xht Normal file
View file

@ -0,0 +1,23 @@
<!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"><!-- Submitted from TestTWF Paris --><head>
<title>CSS Test Reference: skew function part 2</title>
<link href="mailto:adrien@pachkoff.com" rel="author" title="Adrien Pachkoff" />
<style type="text/css">
div {
top:0px;
left:0px;
position:absolute;
height: 150px;
width: 150px;
background-color:green;
transform-origin: 0 0;
transform: skew(25deg, 35deg);
}
</style>
</head>
<body>
<p>The test passes if there is a green quadrilateral and no red.</p>
<div> </div>
</body></html>

27
tests/wpt/css-tests/css-transforms-1_dev/xhtml1print/reference/css-transform-3d-rotateX-ref.xht Normal file
View file

@ -0,0 +1,27 @@
<!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>
<meta charset="utf-8" />
<title>CSS Transforms rotateX Reference</title>
<link href="http://www.intel.com" rel="author" title="Intel" />
<style>
div {
left: 20px;
position: absolute;
top: 35px;
}
div.greensquare {
background-color: green;
border: 5px solid black;
height: 120px;
left: 15px;
top: 90px;
width: 120px;
}
</style>
</head>
<body>
<p>Test passes if there is a green square with black border around, and no any red.</p>
<div class="greensquare"></div>
</body></html>

27
tests/wpt/css-tests/css-transforms-1_dev/xhtml1print/reference/css-transform-3d-rotateY-ref.xht Normal file
View file

@ -0,0 +1,27 @@
<!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>
<meta charset="utf-8" />
<title>CSS Transforms rotateX Reference</title>
<link href="http://www.intel.com" rel="author" title="Intel" />
<style>
div {
left: 10px;
position: absolute;
top: 50px;
}
div.greensquare {
background-color: green;
border: 5px solid black;
height: 120px;
left: 65px;
top: 45px;
width: 120px;
}
</style>
</head>
<body>
<p>Test passes if there is a green square with black border around, and no any red.</p>
<div class="greensquare"></div>
</body></html>

41
tests/wpt/css-tests/css-transforms-1_dev/xhtml1print/reference/css-transform-3d-rotateZ-ref.xht Normal file
View file

@ -0,0 +1,41 @@
<!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>
<meta charset="utf-8" />
<title>CSS Transforms Test: rotate3d on div element</title>
<link href="http://www.intel.com" rel="author" title="Intel" />
<style>
div {
height: 240px;
left: 70px;
position: absolute;
top: 100px;
width: 240px;
}
div.origin {
background-color: green;
}
div.redsquare {
background-color: red;
height: 60px;
left: 70px;
top: 190px;
width: 240px;
}
div.greensquare {
background-color: green;
height: 240px;
left: 160px;
top: 100px;
width: 60px;
transform: rotate3d(0,0,1,90deg);
}
</style>
</head>
<body>
<p>Test passes if there is a green square and no red.</p>
<div class="origin"></div>
<div class="redsquare"></div>
<div class="greensquare"></div>
</body></html>

40
tests/wpt/css-tests/css-transforms-1_dev/xhtml1print/reference/css-transform-3d-transform-style-ref.xht Normal file
View file

@ -0,0 +1,40 @@
<!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>
<meta charset="utf-8" />
<title>CSS Transforms Test: rotateY with transform-style on nested elements</title>
<link href="http://www.intel.com" rel="author" title="Intel" />
<style>
div {
position: absolute;
}
div.container {
background-color: gray;
height: 200px;
left: 65px;
top: 45px;
width: 200px;
}
div.blue {
background-color: blue;
height: 180px;
width: 90px;
left: 120px;
top: 55px;
}
div.greensquare {
background-color: green;
height: 180px;
left: 140px;
top: 55px;
width: 90px;
}
</style>
</head>
<body>
<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>
</body></html>

24
tests/wpt/css-tests/css-transforms-1_dev/xhtml1print/reference/css-transform-scale-ref-001.xht Normal file
View file

@ -0,0 +1,24 @@
<!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>Reference File</title>
<link href="mailto:granimalcracker@gmail.com" rel="author" title="Chris Sanborn" />
<style type="text/css">
.container {
position: absolute;
}
.greenSquare {
position: absolute;
width: 200px;
height: 200px;
background-color:green;
}
</style>
</head>
<body>
<p>The test passes if you hover over the green square and it completely covers the red square.</p>
<div class="container">
<div class="greenSquare"></div>
</div>
</body></html>

24
tests/wpt/css-tests/css-transforms-1_dev/xhtml1print/reference/css-transform-scale-ref-002.xht Normal file
View file

@ -0,0 +1,24 @@
<!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>Reference - CSS Transforms Test: transform property with scale function and move its origin</title>
<link href="mailto:granimalcracker@gmail.com" rel="author" title="Chris Sanborn" />
<style type="text/css">
.container {
position: absolute;
}
.greenSquare {
position: absolute;
width: 200px;
height: 200px;
background-color:green;
}
</style>
</head>
<body>
<p>The test passes if the green square completely covers the red square.</p>
<div class="container">
<div class="greenSquare"></div>
</div>
</body></html>

15
tests/wpt/css-tests/css-transforms-1_dev/xhtml1print/reference/css-transforms-3d-anonymous-block-ref.xht Normal file
View file

@ -0,0 +1,15 @@
<!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"><!-- Submitted from TestTWF Paris --><head>
<title>CSS Transforms Test: Reference file</title>
<link href="mailto:dschulze@adobe.com" rel="author" title="Dirk Schulze" />
<link href="mailto:eoconnor@apple.com" rel="reviewer" title="Edward O'Connor" /> <!-- 2012-10-27 -->
</head>
<body>
<p>You should see three lines of text written from left to right and unmirrored.</p><p>
</p><div>
<span>Test</span>
<p>Test</p>
</div>
</body></html>

21
tests/wpt/css-tests/css-transforms-1_dev/xhtml1print/reference/css-transforms-transformlist-ref.xht Normal file
View file

@ -0,0 +1,21 @@
<!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"><!-- Submitted from TestTWF Paris --><head>
<title>CSS Transforms Test: UNIQUE TEST DESCRIPTION</title>
<link href="mailto:cabanier@adobe.com" rel="author" title="Rik Cabanier" />
<style type="text/css">
#result {
width:100px;
height:100px;
background-color: green;
}
</style>
</head>
<body>
<p>The test passes if there is a green square and no red.</p>
<div id="result"></div>
</body></html>

22
tests/wpt/css-tests/css-transforms-1_dev/xhtml1print/reference/css3-transform-perspective-ref.xht Normal file
View file

@ -0,0 +1,22 @@
<!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 Test: transform perspective Reference</title>
<link href="mailto:robin.webkit@gmail.com" rel="author" title="caoqixing" />
<link href="mailto:shendayang@baidu.com" rel="reviewer" title="Dayang Shen" /> <!-- 2013-09-03 -->
<style type="text/css">
div {
width: 200px;
height: 200px;
}
#container {
position: relative;
background-color: green;
}
</style>
</head>
<body>
<p>The test passes if there is a green square and no red.</p>
<div id="container"></div>
</body></html>

23
tests/wpt/css-tests/css-transforms-1_dev/xhtml1print/reference/css3-transform-rotateY-ref.xht Normal file
View file

@ -0,0 +1,23 @@
<!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 Transforms Test: transform property with rotateY function</title>
<link href="mailto:codedancerhua@gmail.com" rel="author" title="Noah Lu" />
<link href="http://www.w3.org/TR/css3-transform#transform-property" rel="help" />
<link href="http://www.w3.org/TR/css-transforms-1/#funcdef-rotate" rel="help" />
<style type="text/css">
.green{
width: 140px;
height: 200px;
background-color:green;
position: absolute;
top: 50px;
left:80px;
}
</style>
</head>
<body>
<p>The test passes if there is a green rectangle and no red.</p>
<div class="green"></div>
</body></html>

23
tests/wpt/css-tests/css-transforms-1_dev/xhtml1print/reference/css3-transform-scale-ref-002.xht Normal file
View file

@ -0,0 +1,23 @@
<!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 Transforms Test: transform property with scale function</title>
<link href="mailto:codedancerhua@gmail.com" rel="author" title="Noah Lu" />
<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" />
<style type="text/css">
.green{
width: 200px;
height: 200px;
background-color: green;
position: absolute;
left: 100px;
top: 100px;
}
</style>
</head>
<body>
<p>The test passes if there is a green square and no red.</p>
<div class="green"></div>
</body></html>

22
tests/wpt/css-tests/css-transforms-1_dev/xhtml1print/reference/css3-transform-scale-ref.xht Normal file
View file

@ -0,0 +1,22 @@
<!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 Transforms Reference File</title>
<link href="mailto:codedancerhua@gmail.com" rel="author" title="Noah Lu" />
<link href="mailto:shendayang@baidu.com" rel="reviewer" title="Dayang Shen" /> <!-- 2013-09-04 -->
<style type="text/css">
.green {
width: 200px;
height: 200px;
background-color: green;
position: absolute;
top: 100px;
left: 100px;
}
</style>
</head>
<body>
<p>The test passes if there is a green square and no red.</p>
<div class="green"></div>
</body></html>

19
tests/wpt/css-tests/css-transforms-1_dev/xhtml1print/reference/iframe-001-ref.xht Normal file
View file

@ -0,0 +1,19 @@
<!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 Reftest Reference</title>
<link href="mailto:mibalan@adobe.com" rel="author" title="Mihai Balan" />
<style>
.region {
width: 400px;
height: 300px;
}
</style>
</head>
<body>
<p>Test passes if you see horizontal green rectangle and no red.</p>
<div class="region">
<iframe width="400" height="300" class="flow" frameborder="0" src="../support/3d-filler.html"></iframe>
</div>
</body></html>

30
tests/wpt/css-tests/css-transforms-1_dev/xhtml1print/reference/perspective-origin-reftest.xht Normal file
View file

@ -0,0 +1,30 @@
<!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>Reference File</title>
<link href="mailto:anduga@gmail.com" rel="author" title="Andres Ugarte" />
<style type="text/css">
.container {
position: absolute;
width: 150px;
height: 150px;
top: 100px;
left: 100px;
}
.greenSquare {
position: absolute;
top: 0px;
left: 0px;
width: 150px;
height: 150px;
background: green;
}
</style>
</head>
<body>
<p>The test passes if there is a green square and no red.</p>
<div class="container">
<div class="greenSquare"></div>
</div>
</body></html>

30
tests/wpt/css-tests/css-transforms-1_dev/xhtml1print/reference/perspective-reftest.xht Normal file
View file

@ -0,0 +1,30 @@
<!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>Reference File</title>
<link href="mailto:anduga@gmail.com" rel="author" title="Andres Ugarte" />
<style type="text/css">
.container {
position: absolute;
width: 150px;
height: 150px;
top: 100px;
left: 100px;
}
.greenSquare {
position: absolute;
top: 0px;
left: 0px;
width: 150px;
height: 150px;
background: green;
}
</style>
</head>
<body>
<p>The test passes if there is a green square and no red.</p>
<div class="container">
<div class="greenSquare"></div>
</div>
</body></html>

28
tests/wpt/css-tests/css-transforms-1_dev/xhtml1print/reference/ref-filled-green-100px-square.xht Normal file
View file

@ -0,0 +1,28 @@
<!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><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Reftest Reference</title>
<style type="text/css">
@page { font: italic 8pt sans-serif; color: gray;
margin: 7%;
counter-increment: page;
@top-left { content: "CSS Transforms Module Level 1 CR Test Suite"; }
@top-right { content: "Test ref-filled-green-100px-square"; }
@bottom-right { content: counter(page); }
}
</style>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
<style type="text/css"><![CDATA[
div
{
background-color: green;
height: 100px;
width: 100px;
}
]]></style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div></div>
</body>
</html>

18
tests/wpt/css-tests/css-transforms-1_dev/xhtml1print/reference/regions-transforms-001-ref.xht Normal file
View file

@ -0,0 +1,18 @@
<!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 Reftest Reference</title>
<link href="mailto:dalcala@adobe.com" rel="author" title="David Alcala" />
<link href="mailto:rhauck@adobe.com" rel="reviewer" title="Rebecca Hauck" /> <!-- 07-15-2013 -->
<style type="text/css">
#green-square {
width: 100px;
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<p>The test passes if you see a green square and no red.</p>
<div id="green-square"></div>
</body></html>

35
tests/wpt/css-tests/css-transforms-1_dev/xhtml1print/reference/regions-transforms-008-ref.xht Normal file
View file

@ -0,0 +1,35 @@
<!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 Reftest Reference</title>
<link href="mailto:rhauck@adobe.com" rel="author" title="Rebecca Hauck" />
<link href="mailto:mibalan@adobe.com" rel="reviewer" title="Mihai Balan" /> <!-- 2013-07-24 -->
<style type="text/css">
.square {
float: left;
font-family: Ahem;
font-size: 10px;
line-height: 20px;
margin-left: 10px;
color: green;
width: 100px;
height: 100px;
border: 1px solid black;
}
</style>
</head>
<body>
<p>The test passes if:</p>
<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>
</ul>
<div class="square">
XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX
</div>
<div class="square">
XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX XXXXXXXXXX
</div>
</body></html>

20
tests/wpt/css-tests/css-transforms-1_dev/xhtml1print/reference/regions-transforms-010-ref.xht Normal file
View file

@ -0,0 +1,20 @@
<!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 Reftest Reference</title>
<link href="mailto:dalcala@adobe.com" rel="author" title="David Alcala" />
<link href="mailto:rhauck@adobe.com" rel="reviewer" title="Rebecca Hauck" /> <!-- 07-15-2013 -->
<style type="text/css">
#green-square {
position: absolute;
left: 58px;
width: 100px;
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<p>The test passes if you see a green square and no red.</p>
<div id="green-square"></div>
</body></html>

20
tests/wpt/css-tests/css-transforms-1_dev/xhtml1print/reference/regions-transforms-013-alt-ref.xht Normal file
View file

@ -0,0 +1,20 @@
<!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 Reftest Reference</title>
<link href="mailto:rhauck@adobe.com" rel="author" title="Rebecca Hauck" />
<link href="mailto:mibalan@adobe.com" rel="reviewer" title="Mihai Balan" /> <!-- 2013-07-24 -->
<style type="text/css">
.green-rect {
width: 100px;
height: 200px;
margin-left: 10px;
float: left;
background-color: green;
}
</style>
</head>
<body>
<p>The test passes if you see either two green squares or one vertical green rectangle. There should be no red.</p>
<div class="green-rect"></div>
</body></html>

21
tests/wpt/css-tests/css-transforms-1_dev/xhtml1print/reference/regions-transforms-013-ref.xht Normal file
View file

@ -0,0 +1,21 @@
<!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 Reftest Reference</title>
<link href="mailto:dalcala@adobe.com" rel="author" title="David Alcala" />
<link href="mailto:mibalan@adobe.com" rel="reviewer" title="Mihai Balan" /> <!-- 2013-07-24 -->
<style type="text/css">
.green-square {
width: 100px;
height: 100px;
margin-left: 10px;
float: left;
background-color: green;
}
</style>
</head>
<body>
<p>The test passes if you see either two green squares or one vertical green rectangle. There should be no red.</p>
<div class="green-square"></div>
<div class="green-square"></div>
</body></html>

21
tests/wpt/css-tests/css-transforms-1_dev/xhtml1print/reference/regions-transforms-014-ref.xht Normal file
View file

@ -0,0 +1,21 @@
<!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 Reftest Reference</title>
<link href="mailto:dalcala@adobe.com" rel="author" title="David Alcala" />
<link href="mailto:rhauck@adobe.com" rel="reviewer" title="Rebecca Hauck" /> <!-- 07-15-2013 -->
<style type="text/css">
#green-square {
width: 100px;
height: 100px;
background-color: green;
position: absolute;
left: 58px;
top: 100px;
}
</style>
</head>
<body>
<p>The test passes if you see a green square and no red.</p>
<div id="green-square"></div>
</body></html>

Some files were not shown because too many files have changed in this diff Show more