mirror of
https://github.com/servo/servo.git
synced 2025-08-06 14:10:11 +01:00
Update web-platform-tests and CSS tests.
- Update CSS tests to revision e05bfd5e30ed662c2f8a353577003f8eed230180. - Update web-platform-tests to revision a052787dd5c069a340031011196b73affbd68cd9.
This commit is contained in:
Ms2ger
parent
fb4f421c8b
commit
296fa2512b
21852 changed files with 2080936 additions and 892894 deletions
|
|
@ -4,7 +4,7 @@
|
|||
<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.htm" rel="match">
|
||||
<meta content="css3, rotate, svg" name="flags">
|
||||
<meta content="svg" name="flags">
|
||||
<meta content="asserting that you can rotate an element with CSS" name="assert">
|
||||
<style type="text/css">
|
||||
article, svg{
|
||||
|
|
@ -29,7 +29,7 @@
|
|||
<p>You should only see one block with color green, and you should not see any red</p>
|
||||
<section>
|
||||
<article></article>
|
||||
<svg width="300" version="1.1" xmlns:xmlns="http://www.w3.org/2000/svg" height="200">
|
||||
<svg height="200" width="300" version="1.1" xmlns:xmlns="http://www.w3.org/2000/svg">
|
||||
<style type="text/css">
|
||||
rect{
|
||||
stroke-width: 10;
|
||||
|
|
|
|||
|
|
@ -3,7 +3,9 @@
|
|||
<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">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<meta content="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{
|
||||
|
|
@ -19,27 +21,13 @@
|
|||
<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);
|
||||
})();
|
||||
test(function() {
|
||||
var box = document.getElementById("box");
|
||||
box.style.transform = "rotate(30deg)";
|
||||
assert_equals(window.getComputedStyle(box).getPropertyValue("transform"),
|
||||
"rotate(30deg)");
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Background: background-attachment: background-attachment:fixed inside a transform</title>
|
||||
<link href="mailto:botond@mozilla.com" rel="author" title="Botond Ballo">
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla">
|
||||
<link href="https://www.w3.org/TR/css-transforms-1/#transform-rendering" rel="help">
|
||||
<link href="reference/background-attachment-fixed-inside-transform-1-ref.htm" rel="match">
|
||||
<meta content="Test checks whether background-attachment: 'fixed' inside a transform behaves like background-attachment: 'scroll'." name="assert">
|
||||
<style>
|
||||
body {
|
||||
height: 4000px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#outer {
|
||||
margin: 200px;
|
||||
height: 700px;
|
||||
width: 300px;
|
||||
transform: rotate(45deg);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#inner {
|
||||
height: 700px;
|
||||
background-image: radial-gradient(farthest-corner at center, blue, black);
|
||||
background-size: 300px 300px;
|
||||
background-position: 200px 200px;
|
||||
background-color: lime;
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: fixed;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer">
|
||||
<div id="inner">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -13,7 +13,7 @@
|
|||
<body>
|
||||
|
||||
<h1>CSS Transforms Module Level 1 CR Test Suite</h1>
|
||||
<h2>The Transform Functions (691 tests)</h2>
|
||||
<h2>The Transform Functions (690 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column">
|
||||
<col id="refs-column">
|
||||
|
|
@ -31,7 +31,7 @@
|
|||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s15">+</a>
|
||||
<a href="https://www.w3.org/TR/css-transforms-1/#transform-functions">15 The Transform Functions</a></th></tr>
|
||||
<!-- 7 tests -->
|
||||
<!-- 6 tests -->
|
||||
<tr id="animations-001-15" class="ahem animated">
|
||||
<td>
|
||||
<a href="animations-001.htm">animations-001</a></td>
|
||||
|
|
@ -98,17 +98,6 @@
|
|||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="video-001-15" class="">
|
||||
<td>
|
||||
<a href="video-001.htm">video-001</a></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td>CSS Regions: flowing a video in a region
|
||||
<ul class="assert">
|
||||
<li>Test checks videos flowed in regions render smoothly and without artifacts.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="s15.#typedef-transform-function">
|
||||
<!-- 0 tests -->
|
||||
|
|
@ -11978,7 +11967,7 @@
|
|||
<tr id="css-transform-3d-rotate3d-y-negative-15.2" class="">
|
||||
<td>
|
||||
<a href="css-transform-3d-rotate3d-Y-negative.htm">css-transform-3d-rotate3d-y-negative</a></td>
|
||||
<td><a href="reference/css-transform-3d-rotateY-ref.htm">=</a> </td>
|
||||
<td><a href="reference/css-transform-3d-rotateX-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>rotate3d on div element
|
||||
<ul class="assert">
|
||||
|
|
@ -11989,7 +11978,7 @@
|
|||
<tr id="css-transform-3d-rotate3d-y-positive-15.2" class="">
|
||||
<td>
|
||||
<a href="css-transform-3d-rotate3d-Y-positive.htm">css-transform-3d-rotate3d-y-positive</a></td>
|
||||
<td><a href="reference/css-transform-3d-rotateY-ref.htm">=</a> </td>
|
||||
<td><a href="reference/css-transform-3d-rotateX-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>rotate3d on div element
|
||||
<ul class="assert">
|
||||
|
|
@ -12044,7 +12033,7 @@
|
|||
<tr id="css-transform-3d-rotatey-negative-15.2" class="">
|
||||
<td>
|
||||
<a href="css-transform-3d-rotateY-negative.htm">css-transform-3d-rotatey-negative</a></td>
|
||||
<td><a href="reference/css-transform-3d-rotateY-ref.htm">=</a> </td>
|
||||
<td><a href="reference/css-transform-3d-rotateX-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>rotateY on div element
|
||||
<ul class="assert">
|
||||
|
|
@ -12055,7 +12044,7 @@
|
|||
<tr id="css-transform-3d-rotatey-positive-15.2" class="">
|
||||
<td>
|
||||
<a href="css-transform-3d-rotateY-positive.htm">css-transform-3d-rotatey-positive</a></td>
|
||||
<td><a href="reference/css-transform-3d-rotateY-ref.htm">=</a> </td>
|
||||
<td><a href="reference/css-transform-3d-rotateX-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>rotateY on div element
|
||||
<ul class="assert">
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
<body>
|
||||
|
||||
<h1>CSS Transforms Module Level 1 CR Test Suite</h1>
|
||||
<h2>The Transform Rendering Model (50 tests)</h2>
|
||||
<h2>The Transform Rendering Model (51 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column">
|
||||
<col id="refs-column">
|
||||
|
|
@ -31,7 +31,18 @@
|
|||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s6">+</a>
|
||||
<a href="https://www.w3.org/TR/css-transforms-1/#transform-rendering">6 The Transform Rendering Model</a></th></tr>
|
||||
<!-- 34 tests -->
|
||||
<!-- 35 tests -->
|
||||
<tr id="background-attachment-fixed-inside-transform-1-6" class="primary">
|
||||
<td><strong>
|
||||
<a href="background-attachment-fixed-inside-transform-1.htm">background-attachment-fixed-inside-transform-1</a></strong></td>
|
||||
<td><a href="reference/background-attachment-fixed-inside-transform-1-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Background: background-attachment: background-attachment:fixed inside a transform
|
||||
<ul class="assert">
|
||||
<li>Test checks whether background-attachment: 'fixed' inside a transform behaves like background-attachment: 'scroll'.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="css-transforms-3d-on-anonymous-block-001-6" class="">
|
||||
<td>
|
||||
<a href="css-transforms-3d-on-anonymous-block-001.htm">css-transforms-3d-on-anonymous-block-001</a></td>
|
||||
|
|
|
|||
|
|
@ -32,22 +32,22 @@
|
|||
<a href="#s7">+</a>
|
||||
<a href="https://www.w3.org/TR/css-transforms-1/#transform-property">7 The transform Property</a></th></tr>
|
||||
<!-- 103 tests -->
|
||||
<tr id="2d-rotate-001-7" class="css3, rotate, svg">
|
||||
<tr id="2d-rotate-001-7" class="svg">
|
||||
<td>
|
||||
<a href="2d-rotate-001.htm">2d-rotate-001</a></td>
|
||||
<td><a href="reference/2d-rotate-ref.htm">=</a> <a href="reference/2d-rotate-notref.htm">≠</a> </td>
|
||||
<td><abbr class="css3," title=""></abbr><abbr class="rotate," title=""></abbr><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
||||
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
||||
<td>CSS Transform using 2d rotate()
|
||||
<ul class="assert">
|
||||
<li>asserting that you can rotate an element with CSS</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="2d-rotate-js-7" class="css3, rotate, svg">
|
||||
<tr id="2d-rotate-js-7" class="svg script">
|
||||
<td>
|
||||
<a href="2d-rotate-js.htm">2d-rotate-js</a></td>
|
||||
<td></td>
|
||||
<td><abbr class="css3," title=""></abbr><abbr class="rotate," title=""></abbr><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
||||
<td><abbr class="svg" title="Requires SVG support">SVG</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
||||
<td>Rotate via javascript must show the correct computed rotation
|
||||
<ul class="assert">
|
||||
<li>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</li>
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
<body>
|
||||
|
||||
<h1>CSS Transforms Module Level 1 CR Test Suite</h1>
|
||||
<h2>The transform-origin Property (117 tests)</h2>
|
||||
<h2>The transform-origin Property (118 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column">
|
||||
<col id="refs-column">
|
||||
|
|
@ -31,7 +31,7 @@
|
|||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s8">+</a>
|
||||
<a href="https://www.w3.org/TR/css-transforms-1/#transform-origin-property">8 The transform-origin Property</a></th></tr>
|
||||
<!-- 116 tests -->
|
||||
<!-- 117 tests -->
|
||||
<tr id="css-transform-scale-001-8" class="">
|
||||
<td>
|
||||
<a href="css-transform-scale-001.htm">css-transform-scale-001</a></td>
|
||||
|
|
@ -1198,6 +1198,14 @@
|
|||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="transform-origin-013-8" class="primary">
|
||||
<td><strong>
|
||||
<a href="transform-origin-013.htm">transform-origin-013</a></strong></td>
|
||||
<td><a href="reference/transform-origin-013-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Reftest Reference
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="transform-origin-name-001-8" class="">
|
||||
<td>
|
||||
<a href="transform-origin-name-001.htm">transform-origin-name-001</a></td>
|
||||
|
|
|
|||
|
|
@ -4,26 +4,25 @@
|
|||
<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.htm" 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;
|
||||
border: 20px solid black;
|
||||
height: 120px;
|
||||
left: 15px;
|
||||
top: 90px;
|
||||
left: 60px;
|
||||
top: 60px;
|
||||
width: 120px;
|
||||
}
|
||||
div.green {
|
||||
background-color: green;
|
||||
height: 240px;
|
||||
left: 80px;
|
||||
top: 20px;
|
||||
transform: rotate3d(1,0,0,-60deg);
|
||||
width: 120px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,26 +4,25 @@
|
|||
<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.htm" 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;
|
||||
border: 20px solid black;
|
||||
height: 120px;
|
||||
left: 15px;
|
||||
top: 90px;
|
||||
left: 60px;
|
||||
top: 60px;
|
||||
width: 120px;
|
||||
}
|
||||
div.green {
|
||||
background-color: green;
|
||||
height: 240px;
|
||||
left: 80px;
|
||||
top: 20px;
|
||||
transform: rotate3d(1,0,0,60deg);
|
||||
width: 120px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,26 +4,25 @@
|
|||
<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.htm" rel="match">
|
||||
<link href="reference/css-transform-3d-rotateX-ref.htm" 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;
|
||||
border: 20px solid black;
|
||||
height: 120px;
|
||||
left: 65px;
|
||||
top: 45px;
|
||||
left: 60px;
|
||||
top: 60px;
|
||||
width: 120px;
|
||||
}
|
||||
div.green {
|
||||
background-color: green;
|
||||
height: 120px;
|
||||
left: 20px;
|
||||
top: 80px;
|
||||
transform: rotate3d(0,1,0,-60deg);
|
||||
width: 240px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,26 +4,25 @@
|
|||
<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.htm" rel="match">
|
||||
<link href="reference/css-transform-3d-rotateX-ref.htm" 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;
|
||||
border: 20px solid black;
|
||||
height: 120px;
|
||||
left: 65px;
|
||||
top: 45px;
|
||||
left: 60px;
|
||||
top: 60px;
|
||||
width: 120px;
|
||||
}
|
||||
div.green {
|
||||
background-color: green;
|
||||
height: 120px;
|
||||
left: 20px;
|
||||
top: 80px;
|
||||
transform: rotate3d(0,1,0,60deg);
|
||||
width: 240px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,33 +4,32 @@
|
|||
<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.htm" 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;
|
||||
height: 100px;
|
||||
left: 80px;
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
width: 240px;
|
||||
top: 80px;
|
||||
width: 100px;
|
||||
}
|
||||
div.origin {
|
||||
background-color: green;
|
||||
}
|
||||
div.redsquare {
|
||||
background-color: red;
|
||||
height: 60px;
|
||||
left: 70px;
|
||||
top: 190px;
|
||||
width: 240px;
|
||||
height: 38px;
|
||||
left: 80px;
|
||||
top: 111px;
|
||||
width: 100px;
|
||||
}
|
||||
div.greensquare {
|
||||
background-color: green;
|
||||
height: 240px;
|
||||
left: 160px;
|
||||
top: 100px;
|
||||
width: 60px;
|
||||
height: 100px;
|
||||
left: 110px;
|
||||
top: 80px;
|
||||
width: 40px;
|
||||
transform: rotate3d(0,0,1,-90deg);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -4,33 +4,32 @@
|
|||
<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.htm" 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;
|
||||
height: 100px;
|
||||
left: 80px;
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
width: 240px;
|
||||
top: 80px;
|
||||
width: 100px;
|
||||
}
|
||||
div.origin {
|
||||
background-color: green;
|
||||
}
|
||||
div.redsquare {
|
||||
background-color: red;
|
||||
height: 60px;
|
||||
left: 70px;
|
||||
top: 190px;
|
||||
width: 240px;
|
||||
height: 38px;
|
||||
left: 80px;
|
||||
top: 111px;
|
||||
width: 100px;
|
||||
}
|
||||
div.greensquare {
|
||||
background-color: green;
|
||||
height: 240px;
|
||||
left: 160px;
|
||||
top: 100px;
|
||||
width: 60px;
|
||||
height: 100px;
|
||||
left: 110px;
|
||||
top: 80px;
|
||||
width: 40px;
|
||||
transform: rotate3d(0,0,1,90deg);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -5,25 +5,24 @@
|
|||
<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.htm" 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;
|
||||
border: 20px solid black;
|
||||
height: 120px;
|
||||
left: 15px;
|
||||
top: 90px;
|
||||
left: 60px;
|
||||
top: 60px;
|
||||
width: 120px;
|
||||
}
|
||||
div.green {
|
||||
background-color: green;
|
||||
height: 240px;
|
||||
left: 80px;
|
||||
top: 20px;
|
||||
transform: rotateX(-60deg);
|
||||
width: 120px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,25 +5,24 @@
|
|||
<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.htm" 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;
|
||||
border: 20px solid black;
|
||||
height: 120px;
|
||||
left: 15px;
|
||||
top: 90px;
|
||||
left: 60px;
|
||||
top: 60px;
|
||||
width: 120px;
|
||||
}
|
||||
div.green {
|
||||
background-color: green;
|
||||
height: 240px;
|
||||
left: 80px;
|
||||
top: 20px;
|
||||
transform: rotateX(60deg);
|
||||
width: 120px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,26 +4,25 @@
|
|||
<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.htm" rel="match">
|
||||
<meta content="" name="flags">
|
||||
<link href="reference/css-transform-3d-rotateX-ref.htm" 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;
|
||||
border: 20px solid black;
|
||||
height: 120px;
|
||||
left: 65px;
|
||||
top: 45px;
|
||||
left: 60px;
|
||||
top: 60px;
|
||||
width: 120px;
|
||||
}
|
||||
div.green {
|
||||
background-color: green;
|
||||
height: 120px;
|
||||
left: 20px;
|
||||
top: 80px;
|
||||
transform: rotateY(-60deg);
|
||||
width: 240px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,26 +4,25 @@
|
|||
<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.htm" rel="match">
|
||||
<meta content="" name="flags">
|
||||
<link href="reference/css-transform-3d-rotateX-ref.htm" 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;
|
||||
border: 20px solid black;
|
||||
height: 120px;
|
||||
left: 65px;
|
||||
top: 45px;
|
||||
left: 60px;
|
||||
top: 60px;
|
||||
width: 120px;
|
||||
}
|
||||
div.green {
|
||||
background-color: green;
|
||||
height: 120px;
|
||||
left: 20px;
|
||||
top: 80px;
|
||||
transform: rotateY(60deg);
|
||||
width: 240px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,33 +4,32 @@
|
|||
<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.htm" 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;
|
||||
height: 100px;
|
||||
left: 80px;
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
width: 240px;
|
||||
top: 80px;
|
||||
width: 100px;
|
||||
}
|
||||
div.origin {
|
||||
background-color: green;
|
||||
}
|
||||
div.redsquare {
|
||||
background-color: red;
|
||||
height: 60px;
|
||||
left: 70px;
|
||||
top: 190px;
|
||||
width: 240px;
|
||||
height: 38px;
|
||||
left: 80px;
|
||||
top: 111px;
|
||||
width: 100px;
|
||||
}
|
||||
div.greensquare {
|
||||
background-color: green;
|
||||
height: 240px;
|
||||
left: 160px;
|
||||
top: 100px;
|
||||
width: 60px;
|
||||
height: 100px;
|
||||
left: 110px;
|
||||
top: 80px;
|
||||
width: 40px;
|
||||
transform: rotateZ(-90deg);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -4,33 +4,32 @@
|
|||
<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.htm" 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;
|
||||
height: 100px;
|
||||
left: 80px;
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
width: 240px;
|
||||
top: 80px;
|
||||
width: 100px;
|
||||
}
|
||||
div.origin {
|
||||
background-color: green;
|
||||
}
|
||||
div.redsquare {
|
||||
background-color: red;
|
||||
height: 60px;
|
||||
left: 70px;
|
||||
top: 190px;
|
||||
width: 240px;
|
||||
height: 38px;
|
||||
left: 80px;
|
||||
top: 111px;
|
||||
width: 100px;
|
||||
}
|
||||
div.greensquare {
|
||||
background-color: green;
|
||||
height: 240px;
|
||||
left: 160px;
|
||||
top: 100px;
|
||||
width: 60px;
|
||||
height: 100px;
|
||||
left: 110px;
|
||||
top: 80px;
|
||||
width: 40px;
|
||||
transform: rotateZ(90deg);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -6,47 +6,39 @@
|
|||
<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.htm" rel="match">
|
||||
<meta content="" name="flags">
|
||||
<meta content="Test checks that rotate the nested div with transform-style preserve-3d, rotated parent div for -60 degree on Y-axis then and rotated child div for 120 degree, at this time the parent and child should have equal width, then child div could cover the red box." name="assert">
|
||||
<style>
|
||||
div {
|
||||
position: absolute;
|
||||
}
|
||||
div.container {
|
||||
background-color: gray;
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
left: 65px;
|
||||
top: 45px;
|
||||
height: 100px;
|
||||
top: 60px;
|
||||
width: 400px;
|
||||
}
|
||||
div.blue {
|
||||
background-color: blue;
|
||||
height: 180px;
|
||||
width: 180px;
|
||||
left: 10px;
|
||||
top: 10px;
|
||||
height: 100px;
|
||||
transform: rotateY(-60deg);
|
||||
transform-style: preserve-3d;
|
||||
width: 400px;
|
||||
}
|
||||
div.green {
|
||||
background-color: green;
|
||||
left: 40px;
|
||||
top: 0px;
|
||||
height: 180px;
|
||||
width: 180px;
|
||||
height: 100px;
|
||||
transform: rotateY(120deg);
|
||||
width: 400px;
|
||||
}
|
||||
div.red{
|
||||
background-color: red;
|
||||
left: 140px;
|
||||
top: 10px;
|
||||
height: 180px;
|
||||
width: 20px;
|
||||
height: 100px;
|
||||
left: 100px;
|
||||
width: 200px;
|
||||
}
|
||||
</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>
|
||||
<p>Test passes if there is a <b>green</b> square and a <b>blue</b> square, and no any <b>red</b>.</p>
|
||||
<div class="container">
|
||||
<div class="red"></div>
|
||||
<div class="blue">
|
||||
|
|
|
|||
|
|
@ -5,33 +5,30 @@
|
|||
<link href="http://www.w3.org/TR/css-transforms-1/#transform-property" rel="help">
|
||||
<link href="http://www.w3.org/TR/css-transforms-1/#funcdef-rotate" rel="help">
|
||||
<link href="reference/css3-transform-rotateY-ref.htm" rel="match">
|
||||
<meta content="box width should be equal to projection width if transform rotateY applied" name="assert">
|
||||
<meta content="box width should be equal to projection width if transform rotateY applied" name="assert">
|
||||
<style type="text/css">
|
||||
.red,
|
||||
.green{
|
||||
width:198px;
|
||||
height: 200px;
|
||||
background-color:green;
|
||||
div {
|
||||
height: 100px;
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left:51px;
|
||||
z-index:10;
|
||||
top: 80px;
|
||||
}
|
||||
.red{
|
||||
background-color:red;
|
||||
width: 140px;
|
||||
left:80px;
|
||||
z-index:9;
|
||||
.red {
|
||||
background-color: red;
|
||||
left: 80px;
|
||||
width: 100px;
|
||||
}
|
||||
.green{
|
||||
transform:rotateY(45deg);
|
||||
background-color: green;
|
||||
left: 30px;
|
||||
transform: rotateY(60deg);
|
||||
width: 200px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green rectangle and no red.</p>
|
||||
<div class="green"></div>
|
||||
<p>The test passes if there is a green square and no red.</p>
|
||||
<div class="red"></div>
|
||||
<div class="green"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head><meta charset="utf-8">
|
||||
<title>CSS transforms: Creating containing block for fixed positioned elements</title>
|
||||
<link href="http://dbaron.org/" rel="author" title="L. David Baron">
|
||||
<link href="https://dbaron.org/" rel="author" title="L. David Baron">
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla">
|
||||
<link href="https://drafts.csswg.org/css-transforms-1/#perspective-property" rel="help">
|
||||
<link href="reference/containing-block-dynamic-1-ref.htm" rel="match">
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head><meta charset="utf-8">
|
||||
<title>CSS transforms: Creating containing block for fixed positioned elements</title>
|
||||
<link href="http://dbaron.org/" rel="author" title="L. David Baron">
|
||||
<link href="https://dbaron.org/" rel="author" title="L. David Baron">
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla">
|
||||
<link href="https://drafts.csswg.org/css-transforms-1/#perspective-property" rel="help">
|
||||
<link href="reference/containing-block-dynamic-1-ref.htm" rel="match">
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@
|
|||
<p>You should only see one block with color green, and you should not see any red</p>
|
||||
<section>
|
||||
<article></article>
|
||||
<svg width="300" version="1.1" xmlns:xmlns="http://www.w3.org/2000/svg" height="200">
|
||||
<svg height="200" width="300" version="1.1" xmlns:xmlns="http://www.w3.org/2000/svg">
|
||||
<style type="text/css">
|
||||
rect{
|
||||
stroke-width: 10;
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
<body>
|
||||
<p>You should only see one block with color green, and you should not see any red</p>
|
||||
<section>
|
||||
<svg width="300" version="1.1" xmlns:xmlns="http://www.w3.org/2000/svg" height="200">
|
||||
<svg height="200" width="300" version="1.1" xmlns:xmlns="http://www.w3.org/2000/svg">
|
||||
<style type="text/css">
|
||||
rect{
|
||||
stroke-width: 10;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Background: background-attachment: background-attachment:fixed inside a transform</title>
|
||||
<link href="mailto:botond@mozilla.com" rel="author" title="Botond Ballo">
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla">
|
||||
<style type="text/css">
|
||||
body {
|
||||
height: 4000px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#outer {
|
||||
margin: 200px;
|
||||
height: 700px;
|
||||
width: 300px;
|
||||
transform: rotate(45deg);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#inner {
|
||||
height: 700px;
|
||||
background-image: radial-gradient(farthest-corner at center, blue, black);
|
||||
background-size: 300px 300px;
|
||||
background-position: 200px 200px;
|
||||
background-color: lime;
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: scroll;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer">
|
||||
<div id="inner">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head><meta charset="utf-8">
|
||||
<title>CSS transforms: Creating containing block for fixed positioned elements</title>
|
||||
<link href="http://dbaron.org/" rel="author" title="L. David Baron">
|
||||
<link href="https://dbaron.org/" rel="author" title="L. David Baron">
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla">
|
||||
<style>
|
||||
html, body { margin: 0; padding: 0 }
|
||||
|
|
|
|||
|
|
@ -5,23 +5,19 @@
|
|||
<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;
|
||||
border: 20px solid black;
|
||||
height: 120px;
|
||||
left: 15px;
|
||||
top: 90px;
|
||||
left: 60px;
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
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>
|
||||
<div></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><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>
|
||||
|
|
@ -5,37 +5,18 @@
|
|||
<link href="http://www.intel.com" rel="author" title="Intel">
|
||||
<style>
|
||||
div {
|
||||
height: 240px;
|
||||
left: 70px;
|
||||
background-color: green;
|
||||
height: 100px;
|
||||
left: 80px;
|
||||
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);
|
||||
top: 80px;
|
||||
width: 100px;
|
||||
}
|
||||
</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>
|
||||
<div></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -8,33 +8,30 @@
|
|||
position: absolute;
|
||||
}
|
||||
div.container {
|
||||
background-color: gray;
|
||||
height: 200px;
|
||||
left: 65px;
|
||||
top: 45px;
|
||||
width: 200px;
|
||||
height: 100px;
|
||||
top: 60px;
|
||||
width: 400px;
|
||||
}
|
||||
div.blue {
|
||||
background-color: blue;
|
||||
height: 180px;
|
||||
width: 90px;
|
||||
left: 120px;
|
||||
top: 55px;
|
||||
height: 100px;
|
||||
left: 200px;
|
||||
width: 100px;
|
||||
}
|
||||
div.greensquare {
|
||||
div.green {
|
||||
background-color: green;
|
||||
height: 180px;
|
||||
left: 140px;
|
||||
top: 55px;
|
||||
width: 90px;
|
||||
height: 100px;
|
||||
left: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
</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>
|
||||
<p>Test passes if there is a <b>green</b> square and a <b>blue</b> square, and no any <b>red</b>.</p>
|
||||
<div class="container">
|
||||
<div class="blue"></div>
|
||||
<div class="green"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -2,21 +2,21 @@
|
|||
<html><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;
|
||||
div {
|
||||
height: 100px;
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left:80px;
|
||||
top: 80px;
|
||||
}
|
||||
.green {
|
||||
background-color: green;
|
||||
left: 80px;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green rectangle and no red.</p>
|
||||
<p>The test passes if there is a green square and no red.</p>
|
||||
<div class="green"></div>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reference File</title>
|
||||
<link href="xiatian@ebay.com" rel="author" title="Ebay Inc.">
|
||||
<link href="mailto:xiatian@ebay.com" rel="author" title="Ebay Inc.">
|
||||
<style type="text/css">
|
||||
.container {
|
||||
height: 100px;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reference File</title>
|
||||
<link href="xiatian@ebay.com" rel="author" title="Ebay Inc.">
|
||||
<link href="mailto:xiatian@ebay.com" rel="author" title="Ebay Inc.">
|
||||
<style type="text/css">
|
||||
.container {
|
||||
height: 100px;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reference File</title>
|
||||
<link href="xiatian@ebay.com" rel="author" title="Ebay Inc.">
|
||||
<link href="mailto:xiatian@ebay.com" rel="author" title="Ebay Inc.">
|
||||
<style type="text/css">
|
||||
.container {
|
||||
height: 100px;
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@
|
|||
<h4>
|
||||
There should be a green block on the page.
|
||||
</h4>
|
||||
<svg version="1.1" xmlns:xmlns="http://www.w3.org/2000/svg">
|
||||
<svg xmlns:xmlns="http://www.w3.org/2000/svg" version="1.1">
|
||||
<polygon style="fill:lime" points="0,0 150,55 235,205 88,150"></polygon>
|
||||
</svg>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +0,0 @@
|
|||
The swatch-green.png file in this directory is really a RED swatch,
|
||||
and the swatch-red.png file is really a green swatch.
|
||||
|
||||
This directory is used to test relative URIs.
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head><title>CSS Reftest Reference</title>
|
||||
<link href="mailto:Ms2ger@gmail.com" rel="author" title="Ms2ger">
|
||||
<style>
|
||||
div {
|
||||
margin-top: -2px;
|
||||
width: 50px;
|
||||
height: 100px;
|
||||
float: left;
|
||||
}
|
||||
.fuchsia {
|
||||
background: fuchsia;
|
||||
}
|
||||
.orange {
|
||||
background: orange;
|
||||
}
|
||||
</style>
|
||||
</head><body><p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p>
|
||||
<div class="fuchsia"></div>
|
||||
<div class="orange"></div>
|
||||
</body></html>
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="http://dbaron.org/" rel="author" title="L. David Baron">
|
||||
<link href="https://dbaron.org/" rel="author" title="L. David Baron">
|
||||
<link href="mailto:ayg@aryeh.name" rel="author" title="Aryeh Gregor">
|
||||
<style>
|
||||
p {
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:mwoodrow@mozilla.com" rel="author" title="Matt Woodrow">
|
||||
<link href="mailto:ayg@aryeh.name" rel="author" title="Aryeh Gregor">
|
||||
<link href="reference/transform-lime-square-ref.htm" rel="mismatch">
|
||||
</head>
|
||||
<body>
|
||||
<div style="transform: rotatex(45deg); width: 100px; height: 100px;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reference File</title>
|
||||
<link href="xiatian@ebay.com" rel="author" title="Ebay Inc.">
|
||||
<link href="mailto:xiatian@ebay.com" rel="author" title="Ebay Inc.">
|
||||
<style type="text/css">
|
||||
.container {
|
||||
border: 1px solid gray;
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
<body>
|
||||
<p>The test passes if there is a green shape and no red.</p>
|
||||
<div class="greenSquare">
|
||||
<svg xmlns:xmlns="http://www.w3.org/2000/svg" xmlns:space="preserve" xmlns:xlink="http://www.w3.org/1999/xlink" height="100px" width="200px" version="1.1" y="0px" x="0px" viewBox="0 0 200 100">
|
||||
<svg xmlns:space="preserve" xmlns:xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="100px" width="200px" version="1.1" y="0px" x="0px" viewBox="0 0 200 100">
|
||||
<polygon points="200,100 100,100 0,0 100,0 " fill="green"></polygon>
|
||||
</svg>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
<body>
|
||||
<p>The test passes if there is a green shape and no red.</p>
|
||||
<div class="greenSquare">
|
||||
<svg xmlns:xmlns="http://www.w3.org/2000/svg" xmlns:space="preserve" xmlns:xlink="http://www.w3.org/1999/xlink" height="200px" width="100px" version="1.1" y="0px" x="0px" viewBox="0 0 100 200">
|
||||
<svg xmlns:space="preserve" xmlns:xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="200px" width="100px" version="1.1" y="0px" x="0px" viewBox="0 0 100 200">
|
||||
<polygon points="100,200 0,99.999 0,0 100,100 " fill="green"></polygon>
|
||||
</svg>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -24,12 +24,12 @@
|
|||
<th>Flags</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="2d-rotate-001" class="css3, rotate, svg">
|
||||
<tbody id="2d-rotate-001" class="svg">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Transform using 2d rotate()">
|
||||
<a href="2d-rotate-001.htm">2d-rotate-001</a></td>
|
||||
<td><a href="reference/2d-rotate-ref.htm">=</a> <a href="reference/2d-rotate-notref.htm">≠</a> </td>
|
||||
<td rowspan="1"><abbr class="css3," title=""></abbr><abbr class="rotate," title=""></abbr><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
||||
<td rowspan="1"><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="animations-001" class="ahem animated">
|
||||
|
|
@ -48,6 +48,14 @@
|
|||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="background-attachment-fixed-inside-transform-1" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Background: background-attachment: background-attachment:fixed inside a transform">
|
||||
<a href="background-attachment-fixed-inside-transform-1.htm">background-attachment-fixed-inside-transform-1</a></td>
|
||||
<td><a href="reference/background-attachment-fixed-inside-transform-1-ref.htm">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="canvas3d-001" class="dom">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Regions: rendering 3D canvas elements inside regions">
|
||||
|
|
@ -116,7 +124,7 @@
|
|||
<tr>
|
||||
<td rowspan="1" title="rotate3d on div element">
|
||||
<a href="css-transform-3d-rotate3d-Y-negative.htm">css-transform-3d-rotate3d-y-negative</a></td>
|
||||
<td><a href="reference/css-transform-3d-rotateY-ref.htm">=</a> </td>
|
||||
<td><a href="reference/css-transform-3d-rotateX-ref.htm">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
|
@ -124,7 +132,7 @@
|
|||
<tr>
|
||||
<td rowspan="1" title="rotate3d on div element">
|
||||
<a href="css-transform-3d-rotate3d-Y-positive.htm">css-transform-3d-rotate3d-y-positive</a></td>
|
||||
<td><a href="reference/css-transform-3d-rotateY-ref.htm">=</a> </td>
|
||||
<td><a href="reference/css-transform-3d-rotateX-ref.htm">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
|
@ -164,7 +172,7 @@
|
|||
<tr>
|
||||
<td rowspan="1" title="rotateY on div element">
|
||||
<a href="css-transform-3d-rotateY-negative.htm">css-transform-3d-rotatey-negative</a></td>
|
||||
<td><a href="reference/css-transform-3d-rotateY-ref.htm">=</a> </td>
|
||||
<td><a href="reference/css-transform-3d-rotateX-ref.htm">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
|
@ -172,7 +180,7 @@
|
|||
<tr>
|
||||
<td rowspan="1" title="rotateY on div element">
|
||||
<a href="css-transform-3d-rotateY-positive.htm">css-transform-3d-rotatey-positive</a></td>
|
||||
<td><a href="reference/css-transform-3d-rotateY-ref.htm">=</a> </td>
|
||||
<td><a href="reference/css-transform-3d-rotateX-ref.htm">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
|
@ -7067,6 +7075,14 @@
|
|||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="transform-origin-013" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="CSS Reftest Reference">
|
||||
<a href="transform-origin-013.htm">transform-origin-013</a></td>
|
||||
<td><a href="reference/transform-origin-013-ref.htm">=</a> </td>
|
||||
<td rowspan="1"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="transform-origin-name-001" class="">
|
||||
<tr>
|
||||
<td rowspan="1" title="transform-origin: top left">
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
2d-rotate-001.htm == reference/2d-rotate-ref.htm != reference/2d-rotate-notref.htm
|
||||
animations-001.htm == reference/animations-001-ref.htm
|
||||
backface-visibility-hidden-001.htm == reference/backface-visibility-hidden-ref.htm
|
||||
background-attachment-fixed-inside-transform-1.htm == reference/background-attachment-fixed-inside-transform-1-ref.htm
|
||||
canvas3d-001.htm == reference/canvas3d-001-ref.htm
|
||||
canvas3d-002.htm == reference/canvas3d-002-ref.htm
|
||||
css-rotate-2d-3d-001.htm == reference/css-rotate-2d-3d-001-ref.htm
|
||||
|
|
@ -10,14 +11,14 @@ css-skew-001.htm == reference/css-skew-001-ref.htm
|
|||
css-skew-002.htm == reference/css-skew-002-ref.htm
|
||||
css-transform-3d-rotate3d-X-negative.htm == reference/css-transform-3d-rotateX-ref.htm
|
||||
css-transform-3d-rotate3d-X-positive.htm == reference/css-transform-3d-rotateX-ref.htm
|
||||
css-transform-3d-rotate3d-Y-negative.htm == reference/css-transform-3d-rotateY-ref.htm
|
||||
css-transform-3d-rotate3d-Y-positive.htm == reference/css-transform-3d-rotateY-ref.htm
|
||||
css-transform-3d-rotate3d-Y-negative.htm == reference/css-transform-3d-rotateX-ref.htm
|
||||
css-transform-3d-rotate3d-Y-positive.htm == reference/css-transform-3d-rotateX-ref.htm
|
||||
css-transform-3d-rotate3d-Z-negative.htm == reference/css-transform-3d-rotateZ-ref.htm
|
||||
css-transform-3d-rotate3d-Z-positive.htm == reference/css-transform-3d-rotateZ-ref.htm
|
||||
css-transform-3d-rotateX-negative.htm == reference/css-transform-3d-rotateX-ref.htm
|
||||
css-transform-3d-rotateX-positive.htm == reference/css-transform-3d-rotateX-ref.htm
|
||||
css-transform-3d-rotateY-negative.htm == reference/css-transform-3d-rotateY-ref.htm
|
||||
css-transform-3d-rotateY-positive.htm == reference/css-transform-3d-rotateY-ref.htm
|
||||
css-transform-3d-rotateY-negative.htm == reference/css-transform-3d-rotateX-ref.htm
|
||||
css-transform-3d-rotateY-positive.htm == reference/css-transform-3d-rotateX-ref.htm
|
||||
css-transform-3d-rotateZ-negative.htm == reference/css-transform-3d-rotateZ-ref.htm
|
||||
css-transform-3d-rotateZ-positive.htm == reference/css-transform-3d-rotateZ-ref.htm
|
||||
css-transform-3d-transform-style.htm == reference/css-transform-3d-transform-style-ref.htm
|
||||
|
|
@ -880,6 +881,7 @@ transform-origin-01.htm == reference/transform-origin-01-ref.htm
|
|||
transform-origin-010.htm == reference/transform-origin-007-ref.htm
|
||||
transform-origin-011.htm == reference/transform-origin-007-ref.htm
|
||||
transform-origin-012.htm == reference/transform-origin-007-ref.htm
|
||||
transform-origin-013.htm == reference/transform-origin-013-ref.htm
|
||||
transform-origin-name-001.htm == reference/transform-origin-name-ref-1.htm != reference/transform-origin-name-notref.htm
|
||||
transform-origin-name-002.htm == reference/transform-origin-name-ref-1.htm != reference/transform-origin-name-notref.htm
|
||||
transform-origin-name-003.htm == reference/transform-origin-name-ref-2.htm != reference/transform-origin-name-notref.htm
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Test: rotateY with perspective produces a trapezoid</title>
|
||||
<link href="xiatian@ebay.com" rel="author" title="Ebay Inc.">
|
||||
<link href="mailto:xiatian@ebay.com" rel="author" title="Ebay Inc.">
|
||||
<link href="http://www.w3.org/TR/css-transforms-1/#3d-transform-rendering" rel="help">
|
||||
<link href="reference/rotate_45deg-ref.htm" rel="match">
|
||||
<meta content="" name="flags">
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Test: rotateX with perspective produces a trapezoid</title>
|
||||
<link href="xiatian@ebay.com" rel="author" title="Ebay Inc.">
|
||||
<link href="mailto:xiatian@ebay.com" rel="author" title="Ebay Inc.">
|
||||
<link href="http://www.w3.org/TR/css-transforms-1/#3d-transform-rendering" rel="help">
|
||||
<link href="reference/rotate_x_45deg-ref.htm" rel="match">
|
||||
<meta content="" name="flags">
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Test: rotateY with perspective produces a trapezoid</title>
|
||||
<link href="xiatian@ebay.com" rel="author" title="Ebay Inc.">
|
||||
<link href="mailto:xiatian@ebay.com" rel="author" title="Ebay Inc.">
|
||||
<link href="http://www.w3.org/TR/css-transforms-1/#3d-transform-rendering" rel="help">
|
||||
<link href="reference/rotate_y_45deg-ref.htm" rel="match">
|
||||
<meta content="" name="flags">
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Test: test scale x</title>
|
||||
<link href="xiatian@ebay.com" rel="author" title="Ebay Inc.">
|
||||
<link href="mailto:xiatian@ebay.com" rel="author" title="Ebay Inc.">
|
||||
<link href="http://www.w3.org/TR/css-transforms-1/#3d-transform-rendering" rel="help">
|
||||
<link href="reference/scalex-ref.htm" rel="match">
|
||||
<meta content="" name="flags">
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Test: test scale y</title>
|
||||
<link href="xiatian@ebay.com" rel="author" title="Ebay Inc.">
|
||||
<link href="mailto:xiatian@ebay.com" rel="author" title="Ebay Inc.">
|
||||
<link href="http://www.w3.org/TR/css-transforms-1/#3d-transform-rendering" rel="help">
|
||||
<link href="reference/scaley-ref.htm" rel="match">
|
||||
<meta content="" name="flags">
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@
|
|||
<h4>
|
||||
There should be a green block on the page
|
||||
</h4>
|
||||
<svg version="1.1" xmlns:xmlns="http://www.w3.org/2000/svg">
|
||||
<svg xmlns:xmlns="http://www.w3.org/2000/svg" version="1.1">
|
||||
<polygon style="fill:red" points="0,0 150,55 235,205 88,150"></polygon>
|
||||
</svg>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +0,0 @@
|
|||
The swatch-green.png file in this directory is really a RED swatch,
|
||||
and the swatch-red.png file is really a green swatch.
|
||||
|
||||
This directory is used to test relative URIs.
|
||||
|
|
@ -47,7 +47,7 @@
|
|||
<tbody id="s6">
|
||||
<tr><th><a href="chapter-6.htm">Chapter 6 -
|
||||
The Transform Rendering Model</a></th>
|
||||
<td>(50 Tests)</td></tr>
|
||||
<td>(51 Tests)</td></tr>
|
||||
</tbody>
|
||||
<tbody id="s7">
|
||||
<tr><th><a href="chapter-7.htm">Chapter 7 -
|
||||
|
|
@ -57,7 +57,7 @@
|
|||
<tbody id="s8">
|
||||
<tr><th><a href="chapter-8.htm">Chapter 8 -
|
||||
The transform-origin Property</a></th>
|
||||
<td>(117 Tests)</td></tr>
|
||||
<td>(118 Tests)</td></tr>
|
||||
</tbody>
|
||||
<tbody id="s9">
|
||||
<tr><th><a href="chapter-9.htm">Chapter 9 -
|
||||
|
|
@ -92,7 +92,7 @@
|
|||
<tbody id="s15">
|
||||
<tr><th><a href="chapter-15.htm">Chapter 15 -
|
||||
The Transform Functions</a></th>
|
||||
<td>(691 Tests)</td></tr>
|
||||
<td>(690 Tests)</td></tr>
|
||||
</tbody>
|
||||
<tbody id="s16">
|
||||
<tr><th><a href="chapter-16.htm">Chapter 16 -
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head><meta charset="utf-8">
|
||||
<title>CSS transforms: Creating containing block for fixed positioned elements</title>
|
||||
<link href="http://dbaron.org/" rel="author" title="L. David Baron">
|
||||
<link href="https://dbaron.org/" rel="author" title="L. David Baron">
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla">
|
||||
<link href="https://drafts.csswg.org/css-transforms-1/#transform-rendering" rel="help">
|
||||
<link href="https://drafts.csswg.org/css-transforms-1/#transform-property" rel="help">
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head><meta charset="utf-8">
|
||||
<title>CSS transforms: Creating containing block for fixed positioned elements</title>
|
||||
<link href="http://dbaron.org/" rel="author" title="L. David Baron">
|
||||
<link href="https://dbaron.org/" rel="author" title="L. David Baron">
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla">
|
||||
<link href="https://drafts.csswg.org/css-transforms-1/#transform-rendering" rel="help">
|
||||
<link href="https://drafts.csswg.org/css-transforms-1/#transform-property" rel="help">
|
||||
|
|
|
|||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link href="mailto:jaffe75@gmail.com" rel="author" title="Jaffe Worley">
|
||||
<link href="mailto:rhauck@adobe.com" rel="reviewer" title="Rebecca Hauck">
|
||||
<link href="https://drafts.csswg.org/css-transforms-1/#transform-origin-property" rel="help">
|
||||
<link href="reference/transform-origin-013-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
.gradient{
|
||||
background-image: linear-gradient(orange 50%, fuchsia 50%);
|
||||
transform: rotate(90deg);
|
||||
transform-origin: top right;
|
||||
}
|
||||
|
||||
.red {
|
||||
width: 98px;
|
||||
height: 98px;
|
||||
background: red;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p>
|
||||
<div class="red"></div>
|
||||
<div class="gradient"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Test (Transforms): em on Multiple Elements</title>
|
||||
<link href="http://dbaron.org/" rel="author" title="L. David Baron">
|
||||
<link href="https://dbaron.org/" rel="author" title="L. David Baron">
|
||||
<link href="mailto:ayg@aryeh.name" rel="author" title="Aryeh Gregor">
|
||||
<link href="http://www.w3.org/TR/css-transforms-1/#transform-property" rel="help">
|
||||
<meta content="This tests that when a 'transform' rule using
|
||||
|
|
|
|||
|
|
@ -10,7 +10,6 @@
|
|||
when combined with rotatex() (i.e., is not equivalent to simply omitting
|
||||
the perspective)." name="assert">
|
||||
<link href="reference/transform3d-rotatex-ref.htm" rel="mismatch">
|
||||
<link href="reference/transform-lime-square-ref.htm" rel="mismatch">
|
||||
</head>
|
||||
<body>
|
||||
<div style="transform: perspective(1000px) rotatex(45deg); width: 100px;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Test: test translate</title>
|
||||
<link href="xiatian@ebay.com" rel="author" title="Ebay Inc.">
|
||||
<link href="mailto:xiatian@ebay.com" rel="author" title="Ebay Inc.">
|
||||
<link href="http://www.w3.org/TR/css-transforms-1/#3d-transform-rendering" rel="help">
|
||||
<link href="reference/translate-ref.htm" rel="match">
|
||||
<meta content="" name="flags">
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@
|
|||
<p>The test passes if there is a green shape and no red.</p>
|
||||
<div>
|
||||
<div class="redSquare">
|
||||
<svg xmlns:xmlns="http://www.w3.org/2000/svg" xmlns:space="preserve" xmlns:xlink="http://www.w3.org/1999/xlink" height="100px" width="200px" version="1.1" y="0px" x="0px" viewBox="0 0 200 100">
|
||||
<svg xmlns:space="preserve" xmlns:xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="100px" width="200px" version="1.1" y="0px" x="0px" viewBox="0 0 200 100">
|
||||
<polygon points="200,100 100,100 0,0 100,0 " fill="red"></polygon>
|
||||
</svg>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@
|
|||
<p>The test passes if there is a green shape and no red.</p>
|
||||
<div>
|
||||
<div class="redSquare">
|
||||
<svg xmlns:xmlns="http://www.w3.org/2000/svg" xmlns:space="preserve" xmlns:xlink="http://www.w3.org/1999/xlink" height="200px" width="100px" version="1.1" y="0px" x="0px" viewBox="0 0 100 200">
|
||||
<svg xmlns:space="preserve" xmlns:xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="200px" width="100px" version="1.1" y="0px" x="0px" viewBox="0 0 100 200">
|
||||
<polygon points="100,200 0,99.999 0,0 100,100 " fill="red"></polygon>
|
||||
</svg>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,43 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Regions: flowing a video in 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/#flow-from" rel="help">
|
||||
<link href="http://www.w3.org/TR/css-transforms-1/#transform-functions" rel="help">
|
||||
<meta content="Test checks videos flowed in regions render smoothly and without artifacts." name="assert">
|
||||
<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 two identical videos playing smoothly.<br>
|
||||
Test fails if you see a red rectangle or if videos are out of sync.</p>
|
||||
|
||||
<video width="432" muted="" autoplay="" class="flow" controls="" height="240">
|
||||
<source src="support/big-buck-bunny-240p.mp4" type="video/mp4">
|
||||
<source src="support/big-buck-bunny-240p.webm" type="video/webm">
|
||||
<source src="support/big-buck-bunny-240p.ogv" type="video/ogg">
|
||||
</video>
|
||||
<video width="432" height="240" controls="" autoplay="">
|
||||
<source src="support/big-buck-bunny-240p.mp4" type="video/mp4">
|
||||
<source src="support/big-buck-bunny-240p.webm" type="video/webm">
|
||||
<source src="support/big-buck-bunny-240p.ogv" type="video/ogg">
|
||||
</video>
|
||||
<div class="region">
|
||||
<p> </p>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -3,14 +3,16 @@
|
|||
# http://test.csswg.org/suites/css-transforms-1_dev/DATESTAMP/
|
||||
# See http://wiki.csswg.org/test/implementation-report for instructions
|
||||
testname revision result comment
|
||||
html/2d-rotate-001.htm 076244fcaea4ccdb259cf0ae3ccf266710d2e402 ?
|
||||
xhtml1/2d-rotate-001.xht 076244fcaea4ccdb259cf0ae3ccf266710d2e402 ?
|
||||
html/2d-rotate-js.htm 8d5285fd124af1a71a0d72ed0388fbb11a7216e8 ?
|
||||
xhtml1/2d-rotate-js.xht 8d5285fd124af1a71a0d72ed0388fbb11a7216e8 ?
|
||||
html/2d-rotate-001.htm f987efe0663e9659362b0c6f2115349fd5bbf1da ?
|
||||
xhtml1/2d-rotate-001.xht f987efe0663e9659362b0c6f2115349fd5bbf1da ?
|
||||
html/2d-rotate-js.htm abcdcd51c5f40a6ff816bba1242cabd80f69c3d1 ?
|
||||
xhtml1/2d-rotate-js.xht abcdcd51c5f40a6ff816bba1242cabd80f69c3d1 ?
|
||||
html/animations-001.htm a4cee4791955488eed14303cedc0330b0531f6f5 ?
|
||||
xhtml1/animations-001.xht a4cee4791955488eed14303cedc0330b0531f6f5 ?
|
||||
html/backface-visibility-hidden-001.htm b4607716790b1493ef762e8ca5c7d0afe14cd375 ?
|
||||
xhtml1/backface-visibility-hidden-001.xht b4607716790b1493ef762e8ca5c7d0afe14cd375 ?
|
||||
html/background-attachment-fixed-inside-transform-1.htm 6a14ce76ee8ccf7c7db78cb7f7fbadb7374d0d7b ?
|
||||
xhtml1/background-attachment-fixed-inside-transform-1.xht 6a14ce76ee8ccf7c7db78cb7f7fbadb7374d0d7b ?
|
||||
html/canvas3d-001.htm d8e127aa34d8b486d61ab17a2b291b8ff77a07eb ?
|
||||
xhtml1/canvas3d-001.xht d8e127aa34d8b486d61ab17a2b291b8ff77a07eb ?
|
||||
html/canvas3d-002.htm e1069acbc55073a8d78623cb5ffa4d4121cb78ce ?
|
||||
|
|
@ -23,32 +25,32 @@ html/css-skew-001.htm 9a9304aa06034b72a795191af5da08a7294cfe1e ?
|
|||
xhtml1/css-skew-001.xht 9a9304aa06034b72a795191af5da08a7294cfe1e ?
|
||||
html/css-skew-002.htm 58eec567495beede7f0b4e50946f4a619470f2aa ?
|
||||
xhtml1/css-skew-002.xht 58eec567495beede7f0b4e50946f4a619470f2aa ?
|
||||
html/css-transform-3d-rotate3d-x-negative.htm aa431ab8c77bd0e50295109ad36990fe317847b3 ?
|
||||
xhtml1/css-transform-3d-rotate3d-x-negative.xht aa431ab8c77bd0e50295109ad36990fe317847b3 ?
|
||||
html/css-transform-3d-rotate3d-x-positive.htm 2095f9e882f0b10dc1b328c7dbfcdff0a415b564 ?
|
||||
xhtml1/css-transform-3d-rotate3d-x-positive.xht 2095f9e882f0b10dc1b328c7dbfcdff0a415b564 ?
|
||||
html/css-transform-3d-rotate3d-y-negative.htm 4f68e8cf3a75c57ee037962f0d6e211d1860820f ?
|
||||
xhtml1/css-transform-3d-rotate3d-y-negative.xht 4f68e8cf3a75c57ee037962f0d6e211d1860820f ?
|
||||
html/css-transform-3d-rotate3d-y-positive.htm 6343574f8a8d19aef1c7566d66ae419b0e603d1d ?
|
||||
xhtml1/css-transform-3d-rotate3d-y-positive.xht 6343574f8a8d19aef1c7566d66ae419b0e603d1d ?
|
||||
html/css-transform-3d-rotate3d-z-negative.htm 12a33874c0d342aec9e4907765e3a88b9b6e0893 ?
|
||||
xhtml1/css-transform-3d-rotate3d-z-negative.xht 12a33874c0d342aec9e4907765e3a88b9b6e0893 ?
|
||||
html/css-transform-3d-rotate3d-z-positive.htm 7fc75cb1ccd6cf641ff65b47f3f45288173eaca1 ?
|
||||
xhtml1/css-transform-3d-rotate3d-z-positive.xht 7fc75cb1ccd6cf641ff65b47f3f45288173eaca1 ?
|
||||
html/css-transform-3d-rotatex-negative.htm e72cad8900e39cf068d74c73c41673acc0ac721e ?
|
||||
xhtml1/css-transform-3d-rotatex-negative.xht e72cad8900e39cf068d74c73c41673acc0ac721e ?
|
||||
html/css-transform-3d-rotatex-positive.htm 23f18cff0c29d24a8c84c3580b3e93e8a98e28c2 ?
|
||||
xhtml1/css-transform-3d-rotatex-positive.xht 23f18cff0c29d24a8c84c3580b3e93e8a98e28c2 ?
|
||||
html/css-transform-3d-rotatey-negative.htm 319d0facc90e0ef304eb522441d397c4edcd8757 ?
|
||||
xhtml1/css-transform-3d-rotatey-negative.xht 319d0facc90e0ef304eb522441d397c4edcd8757 ?
|
||||
html/css-transform-3d-rotatey-positive.htm 5ead88a2d62775d749cc696e5835bc97d25ebed5 ?
|
||||
xhtml1/css-transform-3d-rotatey-positive.xht 5ead88a2d62775d749cc696e5835bc97d25ebed5 ?
|
||||
html/css-transform-3d-rotatez-negative.htm c6e72d65237be14323ecaeafb416b0522b3f0560 ?
|
||||
xhtml1/css-transform-3d-rotatez-negative.xht c6e72d65237be14323ecaeafb416b0522b3f0560 ?
|
||||
html/css-transform-3d-rotatez-positive.htm b8c8ea04728a7e1a3ea4b3e1c9226285f44e8bd6 ?
|
||||
xhtml1/css-transform-3d-rotatez-positive.xht b8c8ea04728a7e1a3ea4b3e1c9226285f44e8bd6 ?
|
||||
html/css-transform-3d-transform-style.htm 026b4089e482e0ad65ed4fe5155f2ac57cc176dd ?
|
||||
xhtml1/css-transform-3d-transform-style.xht 026b4089e482e0ad65ed4fe5155f2ac57cc176dd ?
|
||||
html/css-transform-3d-rotate3d-x-negative.htm ef345b81cd93e98603afb103f19ef6afcba8c1f7 ?
|
||||
xhtml1/css-transform-3d-rotate3d-x-negative.xht ef345b81cd93e98603afb103f19ef6afcba8c1f7 ?
|
||||
html/css-transform-3d-rotate3d-x-positive.htm 8e1a40601dd825ce18f931796058792fc73e82ae ?
|
||||
xhtml1/css-transform-3d-rotate3d-x-positive.xht 8e1a40601dd825ce18f931796058792fc73e82ae ?
|
||||
html/css-transform-3d-rotate3d-y-negative.htm e0e09cb0b2b7c9929ae9a22136ebcb93e80ea8b4 ?
|
||||
xhtml1/css-transform-3d-rotate3d-y-negative.xht e0e09cb0b2b7c9929ae9a22136ebcb93e80ea8b4 ?
|
||||
html/css-transform-3d-rotate3d-y-positive.htm 2b4f3158bed5d7b60b8c60147d12ab0fd219d8bd ?
|
||||
xhtml1/css-transform-3d-rotate3d-y-positive.xht 2b4f3158bed5d7b60b8c60147d12ab0fd219d8bd ?
|
||||
html/css-transform-3d-rotate3d-z-negative.htm cc189fdd79c8e2432153f5eff76eaa4dc59bf1b5 ?
|
||||
xhtml1/css-transform-3d-rotate3d-z-negative.xht cc189fdd79c8e2432153f5eff76eaa4dc59bf1b5 ?
|
||||
html/css-transform-3d-rotate3d-z-positive.htm f3553795307fe547955f5807e1d2bde914cc8733 ?
|
||||
xhtml1/css-transform-3d-rotate3d-z-positive.xht f3553795307fe547955f5807e1d2bde914cc8733 ?
|
||||
html/css-transform-3d-rotatex-negative.htm bcf4f1d50596a105547cbb2eb478a9b529582735 ?
|
||||
xhtml1/css-transform-3d-rotatex-negative.xht bcf4f1d50596a105547cbb2eb478a9b529582735 ?
|
||||
html/css-transform-3d-rotatex-positive.htm 46ab631457f68649a9cefd3d9e27fc9692d679cc ?
|
||||
xhtml1/css-transform-3d-rotatex-positive.xht 46ab631457f68649a9cefd3d9e27fc9692d679cc ?
|
||||
html/css-transform-3d-rotatey-negative.htm 9ac3b74fe4209e07aa956e57075acb1aa47e7d32 ?
|
||||
xhtml1/css-transform-3d-rotatey-negative.xht 9ac3b74fe4209e07aa956e57075acb1aa47e7d32 ?
|
||||
html/css-transform-3d-rotatey-positive.htm 869275e975f72026367141a5f0e93642aa0ab6b7 ?
|
||||
xhtml1/css-transform-3d-rotatey-positive.xht 869275e975f72026367141a5f0e93642aa0ab6b7 ?
|
||||
html/css-transform-3d-rotatez-negative.htm ba39fcf4e90153ff3d0eeab83954eb5e64900a7b ?
|
||||
xhtml1/css-transform-3d-rotatez-negative.xht ba39fcf4e90153ff3d0eeab83954eb5e64900a7b ?
|
||||
html/css-transform-3d-rotatez-positive.htm 41d60aa3b39448061cffcdb534bc864b7383d36d ?
|
||||
xhtml1/css-transform-3d-rotatez-positive.xht 41d60aa3b39448061cffcdb534bc864b7383d36d ?
|
||||
html/css-transform-3d-transform-style.htm ccb668a7c4f126218fbe36da2dc936a3a3cbeed9 ?
|
||||
xhtml1/css-transform-3d-transform-style.xht ccb668a7c4f126218fbe36da2dc936a3a3cbeed9 ?
|
||||
html/css-transform-inherit-rotate.htm d5728ed357c652d068fdcba412306f15e3ed0b2c ?
|
||||
xhtml1/css-transform-inherit-rotate.xht d5728ed357c652d068fdcba412306f15e3ed0b2c ?
|
||||
html/css-transform-inherit-scale.htm d0df617e634f9e928ac09544b195ca3fa9a83516 ?
|
||||
|
|
@ -67,18 +69,18 @@ html/css-transforms-transformlist.htm b1d960c5823342c302508c92a76a2a8951d0bb3e ?
|
|||
xhtml1/css-transforms-transformlist.xht b1d960c5823342c302508c92a76a2a8951d0bb3e ?
|
||||
html/css3-transform-perspective.htm afb573840318c4c2b4022eb6a7b22d224f0c3b00 ?
|
||||
xhtml1/css3-transform-perspective.xht afb573840318c4c2b4022eb6a7b22d224f0c3b00 ?
|
||||
html/css3-transform-rotatey.htm 5c95147e83eac77e18fa96629f05d2fa426de743 ?
|
||||
xhtml1/css3-transform-rotatey.xht 5c95147e83eac77e18fa96629f05d2fa426de743 ?
|
||||
html/css3-transform-rotatey.htm 4428360bb4ff916539f6357ff1b63cccd1dc7e1d ?
|
||||
xhtml1/css3-transform-rotatey.xht 4428360bb4ff916539f6357ff1b63cccd1dc7e1d ?
|
||||
html/css3-transform-scale-002.htm c386e0727d5032dbf72f07cd3c7b49d15442dde3 ?
|
||||
xhtml1/css3-transform-scale-002.xht c386e0727d5032dbf72f07cd3c7b49d15442dde3 ?
|
||||
html/css3-transform-scale.htm d0123070f9c1a2c5c76909db503799b4b8fba9ab ?
|
||||
xhtml1/css3-transform-scale.xht d0123070f9c1a2c5c76909db503799b4b8fba9ab ?
|
||||
html/iframe-001.htm 9034d6e28a2a29bea931cdbd700ac2722b156f1d ?
|
||||
xhtml1/iframe-001.xht 9034d6e28a2a29bea931cdbd700ac2722b156f1d ?
|
||||
html/perspective-containing-block-dynamic-1a.htm b1b1a3d920d821ded6c0fd30bd9f698066f580b4 ?
|
||||
xhtml1/perspective-containing-block-dynamic-1a.xht b1b1a3d920d821ded6c0fd30bd9f698066f580b4 ?
|
||||
html/perspective-containing-block-dynamic-1b.htm 856b0e0227f9e8447061dc0183dc3828abad9fdf ?
|
||||
xhtml1/perspective-containing-block-dynamic-1b.xht 856b0e0227f9e8447061dc0183dc3828abad9fdf ?
|
||||
html/perspective-containing-block-dynamic-1a.htm 513abae20326a861310c32b44d9715b7f4bac8cf ?
|
||||
xhtml1/perspective-containing-block-dynamic-1a.xht 513abae20326a861310c32b44d9715b7f4bac8cf ?
|
||||
html/perspective-containing-block-dynamic-1b.htm 6f6b5711dbffc6ef95ed84620f6ff8d21f43fcbb ?
|
||||
xhtml1/perspective-containing-block-dynamic-1b.xht 6f6b5711dbffc6ef95ed84620f6ff8d21f43fcbb ?
|
||||
html/perspective-origin-001.htm 27fac0a305b07a36ae04ff616aa6da455f6620e6 ?
|
||||
xhtml1/perspective-origin-001.xht 27fac0a305b07a36ae04ff616aa6da455f6620e6 ?
|
||||
html/perspective-origin-002.htm b232c7117664f3457f2ed95cd5126ba5dcaa9ab5 ?
|
||||
|
|
@ -151,24 +153,24 @@ html/rotate-270-degrees-001.htm d53c5c8bedc643d30b0a4174576ef802eb170ab0 ?
|
|||
xhtml1/rotate-270-degrees-001.xht d53c5c8bedc643d30b0a4174576ef802eb170ab0 ?
|
||||
html/rotate-90-degrees-001.htm fab337290189cc6dc7fcf4356e59164c5773d576 ?
|
||||
xhtml1/rotate-90-degrees-001.xht fab337290189cc6dc7fcf4356e59164c5773d576 ?
|
||||
html/rotate_45deg.htm 8317b48712865d6abc5954d16850bc1097abd24c ?
|
||||
xhtml1/rotate_45deg.xht 8317b48712865d6abc5954d16850bc1097abd24c ?
|
||||
html/rotate_x_45deg.htm 5528140d74dde885220a2af4608b51386fc98592 ?
|
||||
xhtml1/rotate_x_45deg.xht 5528140d74dde885220a2af4608b51386fc98592 ?
|
||||
html/rotate_y_45deg.htm c18b25678a72482de3e0e8499cafb510b4125e64 ?
|
||||
xhtml1/rotate_y_45deg.xht c18b25678a72482de3e0e8499cafb510b4125e64 ?
|
||||
html/rotate_45deg.htm f7f00b8a87e1c1c6d0d72190909988f202fbd216 ?
|
||||
xhtml1/rotate_45deg.xht f7f00b8a87e1c1c6d0d72190909988f202fbd216 ?
|
||||
html/rotate_x_45deg.htm 26083b64f79b3f001310f536ae6150387a0e08bd ?
|
||||
xhtml1/rotate_x_45deg.xht 26083b64f79b3f001310f536ae6150387a0e08bd ?
|
||||
html/rotate_y_45deg.htm 277dd3b261558361b73f5ef97906c7054d41761f ?
|
||||
xhtml1/rotate_y_45deg.xht 277dd3b261558361b73f5ef97906c7054d41761f ?
|
||||
html/rotatey.htm f4e3440dfbc15922fb037d7340c9eb4218c4254e ?
|
||||
xhtml1/rotatey.xht f4e3440dfbc15922fb037d7340c9eb4218c4254e ?
|
||||
html/scale-optional-second-001.htm 0f12acea7f825da7f6fd030587dd8330c44cd632 ?
|
||||
xhtml1/scale-optional-second-001.xht 0f12acea7f825da7f6fd030587dd8330c44cd632 ?
|
||||
html/scale-zero-001.htm c3581089662c8dc8c27b8f5a61f69d2fd87d24b6 ?
|
||||
xhtml1/scale-zero-001.xht c3581089662c8dc8c27b8f5a61f69d2fd87d24b6 ?
|
||||
html/scalex.htm 30de493943fd387d6a6fc71e34efb364e367595c ?
|
||||
xhtml1/scalex.xht 30de493943fd387d6a6fc71e34efb364e367595c ?
|
||||
html/scaley.htm ecfe8122a40e39e64f5dc14d1563acfcbfd8765c ?
|
||||
xhtml1/scaley.xht ecfe8122a40e39e64f5dc14d1563acfcbfd8765c ?
|
||||
html/skew-test1.htm ba5ef2455d095cccd94713c431a7d49a9e445ab7 ?
|
||||
xhtml1/skew-test1.xht ba5ef2455d095cccd94713c431a7d49a9e445ab7 ?
|
||||
html/scalex.htm f8a99da7b30c8186bc2e709c4781f661c0ca2755 ?
|
||||
xhtml1/scalex.xht f8a99da7b30c8186bc2e709c4781f661c0ca2755 ?
|
||||
html/scaley.htm 597d627f4c4ffbefb42c41b48ae314905a8bbbee ?
|
||||
xhtml1/scaley.xht 597d627f4c4ffbefb42c41b48ae314905a8bbbee ?
|
||||
html/skew-test1.htm d80da4a5728ac9243e9e129905d6024312905c91 ?
|
||||
xhtml1/skew-test1.xht d80da4a5728ac9243e9e129905d6024312905c91 ?
|
||||
html/svg-document-styles-001.htm e2c4fc089927fe0410c4db4522e637cd118b4a65 ?
|
||||
xhtml1/svg-document-styles-001.xht e2c4fc089927fe0410c4db4522e637cd118b4a65 ?
|
||||
html/svg-document-styles-002.htm c87b61f0992f8e8c3f1e6a09f0e5e1c5d9f9462a ?
|
||||
|
|
@ -1653,10 +1655,10 @@ html/transform-background-008.htm 91095bb7bf9c5f06f5117a9fb116845d1ba4364f ?
|
|||
xhtml1/transform-background-008.xht 91095bb7bf9c5f06f5117a9fb116845d1ba4364f ?
|
||||
html/transform-compound-001.htm 65423ad44cb45420ba7c53d298bf04bdf96e6a99 ?
|
||||
xhtml1/transform-compound-001.xht 65423ad44cb45420ba7c53d298bf04bdf96e6a99 ?
|
||||
html/transform-containing-block-dynamic-1a.htm c3f9d7a8c16cd9fd6cda5cddcbb0284dbcd7a63a ?
|
||||
xhtml1/transform-containing-block-dynamic-1a.xht c3f9d7a8c16cd9fd6cda5cddcbb0284dbcd7a63a ?
|
||||
html/transform-containing-block-dynamic-1b.htm 8a7d0c09ed99b59f712e0367a4ff755666647d33 ?
|
||||
xhtml1/transform-containing-block-dynamic-1b.xht 8a7d0c09ed99b59f712e0367a4ff755666647d33 ?
|
||||
html/transform-containing-block-dynamic-1a.htm 3bdf13f7072e02f52688925bab41a611ed37fa1d ?
|
||||
xhtml1/transform-containing-block-dynamic-1a.xht 3bdf13f7072e02f52688925bab41a611ed37fa1d ?
|
||||
html/transform-containing-block-dynamic-1b.htm b312def57595da97803ae61f53c2f0338255cf01 ?
|
||||
xhtml1/transform-containing-block-dynamic-1b.xht b312def57595da97803ae61f53c2f0338255cf01 ?
|
||||
html/transform-descendant-001.htm 9ecfd9ef564e63b51fc011d5015c82a8423a5391 ?
|
||||
xhtml1/transform-descendant-001.xht 9ecfd9ef564e63b51fc011d5015c82a8423a5391 ?
|
||||
html/transform-display-001.htm 736272b962f8bb2c4fc3b3562e8a9f0c52447bfa ?
|
||||
|
|
@ -1779,6 +1781,8 @@ html/transform-origin-011.htm 7b06dd1372944da05357015436d23b8d639c35bf ?
|
|||
xhtml1/transform-origin-011.xht 7b06dd1372944da05357015436d23b8d639c35bf ?
|
||||
html/transform-origin-012.htm e750026449d756bbaf3c4c1f8ce5f47de665571f ?
|
||||
xhtml1/transform-origin-012.xht e750026449d756bbaf3c4c1f8ce5f47de665571f ?
|
||||
html/transform-origin-013.htm f6331fa2bf6db158724a03184ef53954baef6fd9 ?
|
||||
xhtml1/transform-origin-013.xht f6331fa2bf6db158724a03184ef53954baef6fd9 ?
|
||||
html/transform-origin-name-001.htm 93928beef5bcfd3e194fc8f321c42c8936b52bad ?
|
||||
xhtml1/transform-origin-name-001.xht 93928beef5bcfd3e194fc8f321c42c8936b52bad ?
|
||||
html/transform-origin-name-002.htm dedad5837f1a2109e0cf519f58d8e66aa9ffd6f2 ?
|
||||
|
|
@ -1815,8 +1819,8 @@ html/transform-percent-007.htm 2e278de4e0e31e5f05fc057c3e550d45fa9c3b35 ?
|
|||
xhtml1/transform-percent-007.xht 2e278de4e0e31e5f05fc057c3e550d45fa9c3b35 ?
|
||||
html/transform-percent-008.htm ff7650c4332118230f6b89821daf6977f96615f4 ?
|
||||
xhtml1/transform-percent-008.xht ff7650c4332118230f6b89821daf6977f96615f4 ?
|
||||
html/transform-propagate-inherit-boolean-001.htm 16aadb739d9c3a9be1a44c2d920abfcc2972af7a ?
|
||||
xhtml1/transform-propagate-inherit-boolean-001.xht 16aadb739d9c3a9be1a44c2d920abfcc2972af7a ?
|
||||
html/transform-propagate-inherit-boolean-001.htm bd8c82714587042652d73f223ff3e278cfdbf252 ?
|
||||
xhtml1/transform-propagate-inherit-boolean-001.xht bd8c82714587042652d73f223ff3e278cfdbf252 ?
|
||||
html/transform-root-bg-001.htm ed0be014ac17d0655d9b512159d3a8f00907a37e ?
|
||||
xhtml1/transform-root-bg-001.xht ed0be014ac17d0655d9b512159d3a8f00907a37e ?
|
||||
html/transform-root-bg-002.htm a9cb2d4944f4e7665351e34611d15eb87f7a088d ?
|
||||
|
|
@ -1987,8 +1991,8 @@ html/transform3d-perspective-008.htm cd4ea7697baac18d568087345241e67119c7dda7 ?
|
|||
xhtml1/transform3d-perspective-008.xht cd4ea7697baac18d568087345241e67119c7dda7 ?
|
||||
html/transform3d-perspective-009.htm 8ca2dae9e5669812ce482837b38e52405125b2b6 ?
|
||||
xhtml1/transform3d-perspective-009.xht 8ca2dae9e5669812ce482837b38e52405125b2b6 ?
|
||||
html/transform3d-perspective-origin-001.htm 66a6ae2a0c13f0af788297f96c5e1b2a7b0f985a ?
|
||||
xhtml1/transform3d-perspective-origin-001.xht 66a6ae2a0c13f0af788297f96c5e1b2a7b0f985a ?
|
||||
html/transform3d-perspective-origin-001.htm d8306147315f76fd9d39e2cd668386c9c312a623 ?
|
||||
xhtml1/transform3d-perspective-origin-001.xht d8306147315f76fd9d39e2cd668386c9c312a623 ?
|
||||
html/transform3d-preserve3d-001.htm a73a5569cd284a03f3d25c8d55e7b97d64c66a44 ?
|
||||
xhtml1/transform3d-preserve3d-001.xht a73a5569cd284a03f3d25c8d55e7b97d64c66a44 ?
|
||||
html/transform3d-preserve3d-002.htm d253f8b9c814b3900b287d7b644825a64d64b204 ?
|
||||
|
|
@ -2015,16 +2019,16 @@ html/transform3d-preserve3d-012.htm 95eb99f931e5161b6426d9c37f8003322068a53a ?
|
|||
xhtml1/transform3d-preserve3d-012.xht 95eb99f931e5161b6426d9c37f8003322068a53a ?
|
||||
html/transform3d-preserve3d-013.htm 9e5d506badee49797754480f529e5d820290ddd8 ?
|
||||
xhtml1/transform3d-preserve3d-013.xht 9e5d506badee49797754480f529e5d820290ddd8 ?
|
||||
html/transform3d-rotate3d-001.htm 14840bf820f97976e71e9196ac1cc9567269d696 ?
|
||||
xhtml1/transform3d-rotate3d-001.xht 14840bf820f97976e71e9196ac1cc9567269d696 ?
|
||||
html/transform3d-rotate3d-001.htm 0a9ea7f7d104524a82073e4f96cd4081869c4fd4 ?
|
||||
xhtml1/transform3d-rotate3d-001.xht 0a9ea7f7d104524a82073e4f96cd4081869c4fd4 ?
|
||||
html/transform3d-rotate3d-002.htm 2c2251aaa0f2e1f18e21b78019f884c0c4ac9379 ?
|
||||
xhtml1/transform3d-rotate3d-002.xht 2c2251aaa0f2e1f18e21b78019f884c0c4ac9379 ?
|
||||
html/transform3d-rotatex-001.htm a93371a4e791a82dca7a9ee7b1e86390e983ca51 ?
|
||||
xhtml1/transform3d-rotatex-001.xht a93371a4e791a82dca7a9ee7b1e86390e983ca51 ?
|
||||
html/transform3d-rotatex-perspective-001.htm b9f9d03db15712a9b6d8a4d283f59fc9816ee55d ?
|
||||
xhtml1/transform3d-rotatex-perspective-001.xht b9f9d03db15712a9b6d8a4d283f59fc9816ee55d ?
|
||||
html/transform3d-rotatex-perspective-002.htm 881a63c0105009ba4055695d2b43cdc8ec88b3ac ?
|
||||
xhtml1/transform3d-rotatex-perspective-002.xht 881a63c0105009ba4055695d2b43cdc8ec88b3ac ?
|
||||
html/transform3d-rotatex-001.htm 9c6956ecbafe91f28173a3e58bb23946cbbb811d ?
|
||||
xhtml1/transform3d-rotatex-001.xht 9c6956ecbafe91f28173a3e58bb23946cbbb811d ?
|
||||
html/transform3d-rotatex-perspective-001.htm fa3600075e3ea784ead9696fac8bc05b87900acc ?
|
||||
xhtml1/transform3d-rotatex-perspective-001.xht fa3600075e3ea784ead9696fac8bc05b87900acc ?
|
||||
html/transform3d-rotatex-perspective-002.htm c9992e8aa845cf96c62fc1996ea91ea633858e4d ?
|
||||
xhtml1/transform3d-rotatex-perspective-002.xht c9992e8aa845cf96c62fc1996ea91ea633858e4d ?
|
||||
html/transform3d-rotatex-perspective-003.htm 544c40c9426a4a01192712ec158d1586f5664e0b ?
|
||||
xhtml1/transform3d-rotatex-perspective-003.xht 544c40c9426a4a01192712ec158d1586f5664e0b ?
|
||||
html/transform3d-rotatex-transformorigin-001.htm 9e8600130f0cd4512c2d477f2ca321c8ff814c79 ?
|
||||
|
|
@ -2087,8 +2091,8 @@ html/transforms-skewy.htm 5600d5b5fc10aeaa2d3c43e51ac36ac2c6793e70 ?
|
|||
xhtml1/transforms-skewy.xht 5600d5b5fc10aeaa2d3c43e51ac36ac2c6793e70 ?
|
||||
html/translate-optional-second-001.htm 8b89de122e13cc0eb8794e3dee25bd804c81436b ?
|
||||
xhtml1/translate-optional-second-001.xht 8b89de122e13cc0eb8794e3dee25bd804c81436b ?
|
||||
html/translate.htm df5cbdd25700b31adf321f8f3f689dc11fa20804 ?
|
||||
xhtml1/translate.xht df5cbdd25700b31adf321f8f3f689dc11fa20804 ?
|
||||
html/translate.htm e2462c9b3304dcfaa2b0052dcfb07d11fcf3b4cd ?
|
||||
xhtml1/translate.xht e2462c9b3304dcfaa2b0052dcfb07d11fcf3b4cd ?
|
||||
html/transofrmed-preserve-3d-1.htm 2dea466f5bd0eaaabc1aece7ad68db29009a4524 ?
|
||||
xhtml1/transofrmed-preserve-3d-1.xht 2dea466f5bd0eaaabc1aece7ad68db29009a4524 ?
|
||||
html/transofrmed-rotatex-3.htm 1045ee0727034be93674d88e23480934850a43f0 ?
|
||||
|
|
@ -2101,13 +2105,11 @@ html/ttwf-css-3d-polygon-cycle.htm e850913934fcfbd7254a50fb8c0e1f6a9f6957d5 ?
|
|||
xhtml1/ttwf-css-3d-polygon-cycle.xht e850913934fcfbd7254a50fb8c0e1f6a9f6957d5 ?
|
||||
html/ttwf-reftest-rotate.htm 0081259fc5f0de5d3ae4763f9d7ad3a9ed115adf ?
|
||||
xhtml1/ttwf-reftest-rotate.xht 0081259fc5f0de5d3ae4763f9d7ad3a9ed115adf ?
|
||||
html/ttwf-transform-skewx-001.htm 8e5d3687be86d2fbd5a5e70b4352deacad6e3e90 ?
|
||||
xhtml1/ttwf-transform-skewx-001.xht 8e5d3687be86d2fbd5a5e70b4352deacad6e3e90 ?
|
||||
html/ttwf-transform-skewy-001.htm de06e80663dcae50be2198ba04fa48d4ca9a5b21 ?
|
||||
xhtml1/ttwf-transform-skewy-001.xht de06e80663dcae50be2198ba04fa48d4ca9a5b21 ?
|
||||
html/ttwf-transform-skewx-001.htm 16f2663d689ccc18c16bf39013fe2a605684ffd8 ?
|
||||
xhtml1/ttwf-transform-skewx-001.xht 16f2663d689ccc18c16bf39013fe2a605684ffd8 ?
|
||||
html/ttwf-transform-skewy-001.htm 23d86e1b810989a6fb25f9868141c2f695a35a92 ?
|
||||
xhtml1/ttwf-transform-skewy-001.xht 23d86e1b810989a6fb25f9868141c2f695a35a92 ?
|
||||
html/ttwf-transform-translatex-001.htm 5bcd1e07576267b0faedd7f3fe84058fb6faa370 ?
|
||||
xhtml1/ttwf-transform-translatex-001.xht 5bcd1e07576267b0faedd7f3fe84058fb6faa370 ?
|
||||
html/ttwf-transform-translatey-001.htm a1f42153313e00c4133c79f1f77b41aa4e788e2b ?
|
||||
xhtml1/ttwf-transform-translatey-001.xht a1f42153313e00c4133c79f1f77b41aa4e788e2b ?
|
||||
html/video-001.htm 68cde74d5f7d336ecabbaaef08bcb491350cf40e ?
|
||||
xhtml1/video-001.xht 68cde74d5f7d336ecabbaaef08bcb491350cf40e ?
|
||||
|
|
|
|||
|
|
@ -137,6 +137,7 @@
|
|||
<li>Apple Inc.</li>
|
||||
<li>Aryeh Gregor</li>
|
||||
<li>Boris Zbarsky</li>
|
||||
<li>Botond Ballo</li>
|
||||
<li>caoqixing</li>
|
||||
<li>Chris Sanborn</li>
|
||||
<li>CJ Gammon</li>
|
||||
|
|
@ -148,6 +149,7 @@
|
|||
<li>Francisca Gil</li>
|
||||
<li>Intel</li>
|
||||
<li>Jacy-Bai</li>
|
||||
<li>Jaffe Worley</li>
|
||||
<li>Ji Kai</li>
|
||||
<li>Jian Zhang</li>
|
||||
<li>Jieqiong Cui</li>
|
||||
|
|
|
|||
|
|
@ -137,6 +137,7 @@
|
|||
<li>Apple Inc.</li>
|
||||
<li>Aryeh Gregor</li>
|
||||
<li>Boris Zbarsky</li>
|
||||
<li>Botond Ballo</li>
|
||||
<li>caoqixing</li>
|
||||
<li>Chris Sanborn</li>
|
||||
<li>CJ Gammon</li>
|
||||
|
|
@ -148,6 +149,7 @@
|
|||
<li>Francisca Gil</li>
|
||||
<li>Intel</li>
|
||||
<li>Jacy-Bai</li>
|
||||
<li>Jaffe Worley</li>
|
||||
<li>Ji Kai</li>
|
||||
<li>Jian Zhang</li>
|
||||
<li>Jieqiong Cui</li>
|
||||
|
|
|
|||
|
|
@ -1,27 +1,28 @@
|
|||
id references title flags links revision credits assertion
|
||||
2d-rotate-001 reference/2d-rotate-ref,!reference/2d-rotate-notref CSS Transform using 2d rotate() css3,,rotate,,svg http://www.w3.org/TR/css-transforms-1/#transform-property 076244fcaea4ccdb259cf0ae3ccf266710d2e402 `Rick Hurst`<http://mrkn.co/axegs> asserting that you can rotate an element with CSS
|
||||
2d-rotate-js Rotate via javascript must show the correct computed rotation css3,,rotate,,svg http://www.w3.org/TR/css-transforms-1/#transform-property 8d5285fd124af1a71a0d72ed0388fbb11a7216e8 `Rick Hurst`<http://mrkn.co/axegs> 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
|
||||
2d-rotate-001 reference/2d-rotate-ref,!reference/2d-rotate-notref CSS Transform using 2d rotate() svg http://www.w3.org/TR/css-transforms-1/#transform-property f987efe0663e9659362b0c6f2115349fd5bbf1da `Rick Hurst`<http://mrkn.co/axegs> asserting that you can rotate an element with CSS
|
||||
2d-rotate-js Rotate via javascript must show the correct computed rotation svg,script http://www.w3.org/TR/css-transforms-1/#transform-property abcdcd51c5f40a6ff816bba1242cabd80f69c3d1 `Rick Hurst`<http://mrkn.co/axegs> 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
|
||||
animations-001 reference/animations-001-ref CSS Regions: animating content flowed into a region ahem,animated http://www.w3.org/TR/css3-regions/#the-flow-into-property,http://www.w3.org/TR/css3-regions/#flow-from,http://www.w3.org/TR/css-transforms-1/#transform-functions,http://www.w3.org/TR/css3-animations/#animations a4cee4791955488eed14303cedc0330b0531f6f5 `Mihai Balan`<mailto:mibalan@adobe.com> Test checks that content that has an animated 3D transform renders and animates when flowed in a region.
|
||||
backface-visibility-hidden-001 reference/backface-visibility-hidden-ref transform property with backface visibility = hidden http://www.w3.org/TR/css-transforms-1/#transform-property,http://www.w3.org/TR/css-transforms-1/#propdef-backface-visibility b4607716790b1493ef762e8ca5c7d0afe14cd375 `Jian Zhang`<mailto:jian.andy.zhang@gmail.com> When the value of backface visibility property is 'hidden', the back side of a transformed element is invisible when facing the viewer.
|
||||
background-attachment-fixed-inside-transform-1 reference/background-attachment-fixed-inside-transform-1-ref CSS Background: background-attachment: background-attachment:fixed inside a transform https://www.w3.org/TR/css-transforms-1/#transform-rendering 6a14ce76ee8ccf7c7db78cb7f7fbadb7374d0d7b `Botond Ballo`<mailto:botond@mozilla.com>,`Mozilla`<https://www.mozilla.org> Test checks whether background-attachment: 'fixed' inside a transform behaves like background-attachment: 'scroll'.
|
||||
canvas3d-001 reference/canvas3d-001-ref CSS Regions: rendering 3D canvas elements inside regions dom http://www.w3.org/TR/css3-regions/#the-flow-into-property,http://www.w3.org/TR/css3-regions/#flow-from,http://www.w3.org/TR/css-transforms-1/#transform-functions d8e127aa34d8b486d61ab17a2b291b8ff77a07eb `Mihai Balan`<mailto:mibalan@adobe.com> 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.
|
||||
canvas3d-002 reference/canvas3d-002-ref CSS Regions: rendering text flowed in a region on top of 3D content dom http://www.w3.org/TR/css3-regions/#the-flow-into-property,http://www.w3.org/TR/css3-regions/#flow-from,http://www.w3.org/TR/css-transforms-1/#transform-functions e1069acbc55073a8d78623cb5ffa4d4121cb78ce `Mihai Balan`<mailto:mibalan@adobe.com> 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.
|
||||
css-rotate-2d-3d-001 reference/css-rotate-2d-3d-001-ref 2D rotation with 3D rotation http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions,http://www.w3.org/TR/css-transforms-1/#three-d-transform-functions 39368bbe1219d08c9ff039b88f74bec06c32749c `Philip Rogers`<mailto:pdr@google.com> This transform rotates a tall rectangle by 90 degrees then applies a 3D rotation in the X axis.
|
||||
css-scale-nested-001 reference/css-scale-nested-ref scale 0 on a parent with a child http://www.w3.org/TR/css-transforms-1/#transform-property,http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions b27eef20334db66b79c13ef54a136519c712a85a `Amol Shanbhag`<mailto:amolvshanbhag@yahoo.com> Child square element is transformed (scaled to zero) along with the parent element
|
||||
css-skew-001 reference/css-skew-001-ref skew function part 1 http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions 9a9304aa06034b72a795191af5da08a7294cfe1e `Adrien Pachkoff`<mailto:adrien@pachkoff.com>
|
||||
css-skew-002 reference/css-skew-002-ref skew function part 2 http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions 58eec567495beede7f0b4e50946f4a619470f2aa `Adrien Pachkoff`<mailto:adrien@pachkoff.com>
|
||||
css-transform-3d-rotate3d-X-negative reference/css-transform-3d-rotateX-ref rotate3d on div element http://www.w3.org/TR/css-transforms-1/#three-d-transform-functions aa431ab8c77bd0e50295109ad36990fe317847b3 `Intel`<http://www.intel.com> 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.
|
||||
css-transform-3d-rotate3d-X-positive reference/css-transform-3d-rotateX-ref rotate3d on div element http://www.w3.org/TR/css-transforms-1/#three-d-transform-functions 2095f9e882f0b10dc1b328c7dbfcdff0a415b564 `Intel`<http://www.intel.com> 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.
|
||||
css-transform-3d-rotate3d-Y-negative reference/css-transform-3d-rotateY-ref rotate3d on div element http://www.w3.org/TR/css-transforms-1/#three-d-transform-functions 4f68e8cf3a75c57ee037962f0d6e211d1860820f `Intel`<http://www.intel.com> 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.
|
||||
css-transform-3d-rotate3d-Y-positive reference/css-transform-3d-rotateY-ref rotate3d on div element http://www.w3.org/TR/css-transforms-1/#three-d-transform-functions 6343574f8a8d19aef1c7566d66ae419b0e603d1d `Intel`<http://www.intel.com> 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.
|
||||
css-transform-3d-rotate3d-Z-negative reference/css-transform-3d-rotateZ-ref rotate3d on div element http://www.w3.org/TR/css-transforms-1/#three-d-transform-functions 12a33874c0d342aec9e4907765e3a88b9b6e0893 `Intel`<http://www.intel.com> Test checks that rotate a vertical rectangle for -90 degree on Z-axis will cover the horizontal red rectangle.
|
||||
css-transform-3d-rotate3d-Z-positive reference/css-transform-3d-rotateZ-ref rotate3d on div element http://www.w3.org/TR/css-transforms-1/#three-d-transform-functions 7fc75cb1ccd6cf641ff65b47f3f45288173eaca1 `Intel`<http://www.intel.com> Test checks that rotate a vertical rectangle for 90 degree on Z-axis would cover the horizontal red rectangle.
|
||||
css-transform-3d-rotateX-negative reference/css-transform-3d-rotateX-ref rotateX on div element http://www.w3.org/TR/css-transforms-1/#three-d-transform-functions e72cad8900e39cf068d74c73c41673acc0ac721e `Intel`<http://www.intel.com> 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.
|
||||
css-transform-3d-rotateX-positive reference/css-transform-3d-rotateX-ref rotateX on div element http://www.w3.org/TR/css-transforms-1/#three-d-transform-functions 23f18cff0c29d24a8c84c3580b3e93e8a98e28c2 `Intel`<http://www.intel.com> 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.
|
||||
css-transform-3d-rotateY-negative reference/css-transform-3d-rotateY-ref rotateY on div element http://www.w3.org/TR/css-transforms-1/#three-d-transform-functions 319d0facc90e0ef304eb522441d397c4edcd8757 `Intel`<http://www.intel.com> 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.
|
||||
css-transform-3d-rotateY-positive reference/css-transform-3d-rotateY-ref rotateY on div element http://www.w3.org/TR/css-transforms-1/#three-d-transform-functions 5ead88a2d62775d749cc696e5835bc97d25ebed5 `Intel`<http://www.intel.com> 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.
|
||||
css-transform-3d-rotateZ-negative reference/css-transform-3d-rotateZ-ref rotate3d on div element http://www.w3.org/TR/css-transforms-1/#three-d-transform-functions c6e72d65237be14323ecaeafb416b0522b3f0560 `Intel`<http://www.intel.com> Test checks that rotate a vertical rectangle for -90 degree on Z-axis will cover the horizontal red rectangle.
|
||||
css-transform-3d-rotateZ-positive reference/css-transform-3d-rotateZ-ref rotate3d on div element http://www.w3.org/TR/css-transforms-1/#three-d-transform-functions b8c8ea04728a7e1a3ea4b3e1c9226285f44e8bd6 `Intel`<http://www.intel.com> Test checks that rotate a vertical rectangle for 90 degree on Z-axis will cover the horizontal red rectangle.
|
||||
css-transform-3d-transform-style reference/css-transform-3d-transform-style-ref rotateY with transform-style on nested elements http://www.w3.org/TR/css-transforms-1/#transform-style-property,http://www.w3.org/TR/css-transforms-1/#three-d-transform-functions 026b4089e482e0ad65ed4fe5155f2ac57cc176dd `Intel`<http://www.intel.com> 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.
|
||||
css-transform-3d-rotate3d-X-negative reference/css-transform-3d-rotateX-ref rotate3d on div element http://www.w3.org/TR/css-transforms-1/#three-d-transform-functions ef345b81cd93e98603afb103f19ef6afcba8c1f7 `Intel`<http://www.intel.com> 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.
|
||||
css-transform-3d-rotate3d-X-positive reference/css-transform-3d-rotateX-ref rotate3d on div element http://www.w3.org/TR/css-transforms-1/#three-d-transform-functions 8e1a40601dd825ce18f931796058792fc73e82ae `Intel`<http://www.intel.com> 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.
|
||||
css-transform-3d-rotate3d-Y-negative reference/css-transform-3d-rotateX-ref rotate3d on div element http://www.w3.org/TR/css-transforms-1/#three-d-transform-functions e0e09cb0b2b7c9929ae9a22136ebcb93e80ea8b4 `Intel`<http://www.intel.com> 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.
|
||||
css-transform-3d-rotate3d-Y-positive reference/css-transform-3d-rotateX-ref rotate3d on div element http://www.w3.org/TR/css-transforms-1/#three-d-transform-functions 2b4f3158bed5d7b60b8c60147d12ab0fd219d8bd `Intel`<http://www.intel.com> 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.
|
||||
css-transform-3d-rotate3d-Z-negative reference/css-transform-3d-rotateZ-ref rotate3d on div element http://www.w3.org/TR/css-transforms-1/#three-d-transform-functions cc189fdd79c8e2432153f5eff76eaa4dc59bf1b5 `Intel`<http://www.intel.com> Test checks that rotate a vertical rectangle for -90 degree on Z-axis will cover the horizontal red rectangle.
|
||||
css-transform-3d-rotate3d-Z-positive reference/css-transform-3d-rotateZ-ref rotate3d on div element http://www.w3.org/TR/css-transforms-1/#three-d-transform-functions f3553795307fe547955f5807e1d2bde914cc8733 `Intel`<http://www.intel.com> Test checks that rotate a vertical rectangle for 90 degree on Z-axis would cover the horizontal red rectangle.
|
||||
css-transform-3d-rotateX-negative reference/css-transform-3d-rotateX-ref rotateX on div element http://www.w3.org/TR/css-transforms-1/#three-d-transform-functions bcf4f1d50596a105547cbb2eb478a9b529582735 `Intel`<http://www.intel.com> 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.
|
||||
css-transform-3d-rotateX-positive reference/css-transform-3d-rotateX-ref rotateX on div element http://www.w3.org/TR/css-transforms-1/#three-d-transform-functions 46ab631457f68649a9cefd3d9e27fc9692d679cc `Intel`<http://www.intel.com> 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.
|
||||
css-transform-3d-rotateY-negative reference/css-transform-3d-rotateX-ref rotateY on div element http://www.w3.org/TR/css-transforms-1/#three-d-transform-functions 9ac3b74fe4209e07aa956e57075acb1aa47e7d32 `Intel`<http://www.intel.com> 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.
|
||||
css-transform-3d-rotateY-positive reference/css-transform-3d-rotateX-ref rotateY on div element http://www.w3.org/TR/css-transforms-1/#three-d-transform-functions 869275e975f72026367141a5f0e93642aa0ab6b7 `Intel`<http://www.intel.com> 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.
|
||||
css-transform-3d-rotateZ-negative reference/css-transform-3d-rotateZ-ref rotate3d on div element http://www.w3.org/TR/css-transforms-1/#three-d-transform-functions ba39fcf4e90153ff3d0eeab83954eb5e64900a7b `Intel`<http://www.intel.com> Test checks that rotate a vertical rectangle for -90 degree on Z-axis will cover the horizontal red rectangle.
|
||||
css-transform-3d-rotateZ-positive reference/css-transform-3d-rotateZ-ref rotate3d on div element http://www.w3.org/TR/css-transforms-1/#three-d-transform-functions 41d60aa3b39448061cffcdb534bc864b7383d36d `Intel`<http://www.intel.com> Test checks that rotate a vertical rectangle for 90 degree on Z-axis will cover the horizontal red rectangle.
|
||||
css-transform-3d-transform-style reference/css-transform-3d-transform-style-ref rotateY with transform-style on nested elements http://www.w3.org/TR/css-transforms-1/#transform-style-property,http://www.w3.org/TR/css-transforms-1/#three-d-transform-functions ccb668a7c4f126218fbe36da2dc936a3a3cbeed9 `Intel`<http://www.intel.com> 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.
|
||||
css-transform-inherit-rotate CSS transforms rotate inheritance on div element http://www.w3.org/TR/css-transforms-1/#transform-property,http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions d5728ed357c652d068fdcba412306f15e3ed0b2c `Delong Gao`<mailto:gaodl@uw.edu> 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.
|
||||
css-transform-inherit-scale CSS transforms scale 2 inheritance on div elements http://www.w3.org/TR/css-transforms-1/#transform-property,http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions d0df617e634f9e928ac09544b195ca3fa9a83516 `Delong Gao`<mailto:gaodl@uw.edu> 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.
|
||||
css-transform-property-existence property existence dom,script http://www.w3.org/TR/css-transforms-1/#propdef-transform e2e29b7a421004f2d2de28cd9c00865a8326dcc8 `Intel`<http://www.intel.com>
|
||||
|
|
@ -31,12 +32,12 @@ css-transform-style-evaluation-validation property dom,script http://www.w3.org
|
|||
css-transforms-3d-on-anonymous-block-001 reference/css-transforms-3d-anonymous-block-ref No 3D transforms on anonymous block boxes http://www.w3.org/TR/css-transforms-1/#transform-rendering,http://www.w3.org/TR/css-transforms-1/#3d-transform-rendering b6336b0f9700ab406855b37209b33e9b5d6959eb `Dirk Schulze`<mailto:dschulze@adobe.com> 3D transforms can not be applied to anonymous block boxes.
|
||||
css-transforms-transformlist reference/css-transforms-transformlist-ref SVG transform in baseVal list http://www.w3.org/TR/css-transforms-1/#transform-attribute-dom b1d960c5823342c302508c92a76a2a8951d0bb3e `Rik Cabanier`<mailto:cabanier@adobe.com> This test verifies that the CSS transform ends up in the list of SVG transforms
|
||||
css3-transform-perspective reference/css3-transform-perspective-ref rotateX 90 degrees with perspective make it invisible http://www.w3.org/TR/css-transforms-1/#propdef-perspective afb573840318c4c2b4022eb6a7b22d224f0c3b00 `caoqixing`<mailto:robin.webkit@gmail.com> Test passes if rotateX 90 degrees with perspective make it invisible
|
||||
css3-transform-rotateY reference/css3-transform-rotateY-ref transform property with rotateY function http://www.w3.org/TR/css-transforms-1/#transform-property,http://www.w3.org/TR/css-transforms-1/#funcdef-rotate 5c95147e83eac77e18fa96629f05d2fa426de743 `Noah Lu`<mailto:codedancerhua@gmail.com> box width should be equal to projection width if transform rotateY applied
|
||||
css3-transform-rotateY reference/css3-transform-rotateY-ref transform property with rotateY function http://www.w3.org/TR/css-transforms-1/#transform-property,http://www.w3.org/TR/css-transforms-1/#funcdef-rotate 4428360bb4ff916539f6357ff1b63cccd1dc7e1d `Noah Lu`<mailto:codedancerhua@gmail.com> box width should be equal to projection width if transform rotateY applied
|
||||
css3-transform-scale reference/css3-transform-scale-ref transform property with scale function http://www.w3.org/TR/css-transforms-1/#transform-property,http://www.w3.org/TR/css-transforms-1/#funcdef-scale d0123070f9c1a2c5c76909db503799b4b8fba9ab `Noah Lu`<mailto:codedancerhua@gmail.com> box width and height will be twice larger if transform scale(2) applied
|
||||
css3-transform-scale-002 reference/css3-transform-scale-ref-002 transform property with scale function http://www.w3.org/TR/css-transforms-1/#transform-property,http://www.w3.org/TR/css-transforms-1/#funcdef-scale c386e0727d5032dbf72f07cd3c7b49d15442dde3 `Noah Lu`<mailto:codedancerhua@gmail.com> box width and height will be twice larger if transform scale(2) applied
|
||||
iframe-001 reference/iframe-001-ref CSS Regions: flowing an iframe that loads content with 3D transform ahem http://www.w3.org/TR/css3-regions/#the-flow-into-property,http://www.w3.org/TR/css3-regions/#flow-from,http://www.w3.org/TR/css-transforms-1/#transform-functions 9034d6e28a2a29bea931cdbd700ac2722b156f1d `Mihai Balan`<mailto:mibalan@adobe.com> Test checks that flowing an iframe that loads content with 3D transforms in a region renders without artifacts.
|
||||
perspective-containing-block-dynamic-1a reference/containing-block-dynamic-1-ref CSS transforms: Creating containing block for fixed positioned elements dom https://drafts.csswg.org/css-transforms-1/#perspective-property b1b1a3d920d821ded6c0fd30bd9f698066f580b4 `L. David Baron`<http://dbaron.org/>,`Mozilla`<http://www.mozilla.org/> It also establishes a containing block (somewhat similar to position: relative), just like the transform property does.
|
||||
perspective-containing-block-dynamic-1b reference/containing-block-dynamic-1-ref CSS transforms: Creating containing block for fixed positioned elements dom https://drafts.csswg.org/css-transforms-1/#perspective-property 856b0e0227f9e8447061dc0183dc3828abad9fdf `L. David Baron`<http://dbaron.org/>,`Mozilla`<http://www.mozilla.org/> It also establishes a containing block (somewhat similar to position: relative), just like the transform property does.
|
||||
perspective-containing-block-dynamic-1a reference/containing-block-dynamic-1-ref CSS transforms: Creating containing block for fixed positioned elements dom https://drafts.csswg.org/css-transforms-1/#perspective-property 513abae20326a861310c32b44d9715b7f4bac8cf `L. David Baron`<https://dbaron.org/>,`Mozilla`<http://www.mozilla.org/> It also establishes a containing block (somewhat similar to position: relative), just like the transform property does.
|
||||
perspective-containing-block-dynamic-1b reference/containing-block-dynamic-1-ref CSS transforms: Creating containing block for fixed positioned elements dom https://drafts.csswg.org/css-transforms-1/#perspective-property 6f6b5711dbffc6ef95ed84620f6ff8d21f43fcbb `L. David Baron`<https://dbaron.org/>,`Mozilla`<http://www.mozilla.org/> It also establishes a containing block (somewhat similar to position: relative), just like the transform property does.
|
||||
perspective-origin-001 reference/ref-filled-green-100px-square perspective-origin - 0px center('center' computes to '50%' in vertical position) http://www.w3.org/TR/css-transforms-1/#propdef-perspective-origin 27fac0a305b07a36ae04ff616aa6da455f6620e6 `Intel`<http://www.intel.com>,`Jieqiong Cui`<mailto:jieqiongx.cui@intel.com> The 'perspective-origin' property set 'center' computes to 50% for the vertical position.
|
||||
perspective-origin-002 reference/ref-filled-green-100px-square perspective-origin - center 0px('center' computes to '50%' in horizontal position) http://www.w3.org/TR/css-transforms-1/#propdef-perspective-origin b232c7117664f3457f2ed95cd5126ba5dcaa9ab5 `Intel`<http://www.intel.com>,`Jieqiong Cui`<mailto:jieqiongx.cui@intel.com> The 'perspective-origin' property set 'center' computes to 50% for the horizontal position.
|
||||
perspective-origin-003 reference/ref-filled-green-100px-square perspective-origin - 50% bottom('bottom' computes to '100%' in vertical position) http://www.w3.org/TR/css-transforms-1/#propdef-perspective-origin 32d21455e12035e415bdacef7848074aa624c4f2 `Intel`<http://www.intel.com>,`Jieqiong Cui`<mailto:jieqiongx.cui@intel.com> The 'perspective-origin' property set 'bottom' computes to 100% for the vertical position.
|
||||
|
|
@ -73,15 +74,15 @@ regions-transforms-022 reference/regions-transforms-020-ref CSS Regions: Transfo
|
|||
rotate-180-degrees-001 transform - rotate 180 deg http://www.w3.org/TR/css-transforms-1/#transform-property,http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions 11b0c918ee643458dc3f7197ede0238b8b271505 `Larry McLister`<mailto:lmcliste@adobe.com>
|
||||
rotate-270-degrees-001 transform - rotate 270 deg http://www.w3.org/TR/css-transforms-1/#transform-property,http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions d53c5c8bedc643d30b0a4174576ef802eb170ab0 `Larry McLister`<mailto:lmcliste@adobe.com>
|
||||
rotate-90-degrees-001 transform - rotate 90 deg http://www.w3.org/TR/css-transforms-1/#transform-property,http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions fab337290189cc6dc7fcf4356e59164c5773d576 `Larry McLister`<mailto:lmcliste@adobe.com>
|
||||
rotate_45deg reference/rotate_45deg-ref rotateY with perspective produces a trapezoid http://www.w3.org/TR/css-transforms-1/#3d-transform-rendering 8317b48712865d6abc5954d16850bc1097abd24c `Ebay Inc.`<xiatian@ebay.com> Rotate 45 degree in y axis
|
||||
rotate_x_45deg reference/rotate_x_45deg-ref rotateX with perspective produces a trapezoid http://www.w3.org/TR/css-transforms-1/#3d-transform-rendering 5528140d74dde885220a2af4608b51386fc98592 `Ebay Inc.`<xiatian@ebay.com> Rotate 45 degree in y axis
|
||||
rotate_y_45deg reference/rotate_y_45deg-ref rotateY with perspective produces a trapezoid http://www.w3.org/TR/css-transforms-1/#3d-transform-rendering c18b25678a72482de3e0e8499cafb510b4125e64 `Ebay Inc.`<xiatian@ebay.com> Rotate 45 degree in y axis
|
||||
rotate_45deg reference/rotate_45deg-ref rotateY with perspective produces a trapezoid http://www.w3.org/TR/css-transforms-1/#3d-transform-rendering f7f00b8a87e1c1c6d0d72190909988f202fbd216 `Ebay Inc.`<mailto:xiatian@ebay.com> Rotate 45 degree in y axis
|
||||
rotate_x_45deg reference/rotate_x_45deg-ref rotateX with perspective produces a trapezoid http://www.w3.org/TR/css-transforms-1/#3d-transform-rendering 26083b64f79b3f001310f536ae6150387a0e08bd `Ebay Inc.`<mailto:xiatian@ebay.com> Rotate 45 degree in y axis
|
||||
rotate_y_45deg reference/rotate_y_45deg-ref rotateY with perspective produces a trapezoid http://www.w3.org/TR/css-transforms-1/#3d-transform-rendering 277dd3b261558361b73f5ef97906c7054d41761f `Ebay Inc.`<mailto:xiatian@ebay.com> Rotate 45 degree in y axis
|
||||
rotateY reference/rotateY-ref transform property with rotateY http://www.w3.org/TR/css-transforms-1/#funcdef-rotatey f4e3440dfbc15922fb037d7340c9eb4218c4254e `Zou Rui`<mailto:zrxldl@gmail.com> When the value of transform is 'rotateY(90deg)', the foward side of a transformed element disappears.
|
||||
scale-optional-second-001 reference/scale-optional-second-ref transform property with scale function and one parameter http://www.w3.org/TR/css-transforms-1/#transform-property,http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions 0f12acea7f825da7f6fd030587dd8330c44cd632 `Jian Zhang`<mailto:jian.andy.zhang@gmail.com> If the second parameter of scale function is not provided, it takes a value equal to the first. This transform causes the element to appear twice as long in both the X and Y axes.
|
||||
scale-zero-001 reference/scale-zero-ref transform property with scale function and zero values http://www.w3.org/TR/css-transforms-1/#transform-property,http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions c3581089662c8dc8c27b8f5a61f69d2fd87d24b6 `Jian Zhang`<mailto:jian.andy.zhang@gmail.com> If zero value is passed to scale function, it causes the element to disappear.
|
||||
scalex reference/scalex-ref test scale x http://www.w3.org/TR/css-transforms-1/#3d-transform-rendering 30de493943fd387d6a6fc71e34efb364e367595c `Ebay Inc.`<xiatian@ebay.com> scale x 2
|
||||
scaley reference/scaley-ref test scale y http://www.w3.org/TR/css-transforms-1/#3d-transform-rendering ecfe8122a40e39e64f5dc14d1563acfcbfd8765c `Ebay Inc.`<xiatian@ebay.com> scale y 2
|
||||
skew-test1 reference/skew-test1-ref Testing 1 - skew() svg http://www.w3.org/TR/css-transforms-1/#svg-transform,http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions ba5ef2455d095cccd94713c431a7d49a9e445ab7 `Myriam Goude`<mailto:mymygo@gmail.com> The lime square in this test has a skew method applied : 30deg on x and 20deg on y. The red polygon should be totally hidden by the lime skewed square. Both start at 0,0
|
||||
scalex reference/scalex-ref test scale x http://www.w3.org/TR/css-transforms-1/#3d-transform-rendering f8a99da7b30c8186bc2e709c4781f661c0ca2755 `Ebay Inc.`<mailto:xiatian@ebay.com> scale x 2
|
||||
scaley reference/scaley-ref test scale y http://www.w3.org/TR/css-transforms-1/#3d-transform-rendering 597d627f4c4ffbefb42c41b48ae314905a8bbbee `Ebay Inc.`<mailto:xiatian@ebay.com> scale y 2
|
||||
skew-test1 reference/skew-test1-ref Testing 1 - skew() svg http://www.w3.org/TR/css-transforms-1/#svg-transform,http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions d80da4a5728ac9243e9e129905d6024312905c91 `Myriam Goude`<mailto:mymygo@gmail.com> The lime square in this test has a skew method applied : 30deg on x and 20deg on y. The red polygon should be totally hidden by the lime skewed square. Both start at 0,0
|
||||
svg-document-styles-001 reference/svg-document-styles-ref Document transform style on SVG element with presentation attribute style on the same element svg http://www.w3.org/TR/css-transforms-1/#svg-transform,http://www.w3.org/TR/css-transforms-1/#transform-attribute-specificity e2c4fc089927fe0410c4db4522e637cd118b4a65 `Rebecca Hauck`<mailto:rhauck@adobe.com> Document transform styles on SVG elements should override presentation attribute styles on the same element. The rect in the test should be rotated by 90 degrees clockwise and not scaled.
|
||||
svg-document-styles-002 reference/svg-document-styles-ref Document transform style on SVG child element with presentation attribute styles on the parent and child elements svg http://www.w3.org/TR/css-transforms-1/#svg-transform,http://www.w3.org/TR/css-transforms-1/#transform-attribute-specificity c87b61f0992f8e8c3f1e6a09f0e5e1c5d9f9462a `Rebecca Hauck`<mailto:rhauck@adobe.com> Document transform styles on SVG elements should override presentation attribute styles on the same element. Presentation attribute styles on its parent should also be applied. The rect in the test should be rotated by 90 degrees clockwise, moved up 100 pixels, and not scaled.
|
||||
svg-document-styles-003 reference/svg-document-styles-ref Document transform style on SVG group element and presentation attribute style on child element svg http://www.w3.org/TR/css-transforms-1/#svg-transform,http://www.w3.org/TR/css-transforms-1/#transform-attribute-specificity 2c456edcb0718edb3170eda07fffacb1f756b0e0 `Rebecca Hauck`<mailto:rhauck@adobe.com> Document transform styles on SVG group elements should be pre-multipled on the child elements. The rect in the test should be rotated by 90 degrees clockwise and moved up 100 pixels.
|
||||
|
|
@ -824,8 +825,8 @@ transform-background-006 reference/transform-background-ref-2,!reference/transfo
|
|||
transform-background-007 reference/transform-background-ref-2 Transform of Background Image (propagated body with root element transform) svg http://www.w3.org/TR/css-transforms-1/#transform-rendering 21dcc00548587da28bb5b181fadc2cae2473e482 `Aryeh Gregor`<mailto:ayg@aryeh.name> "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." 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.
|
||||
transform-background-008 reference/transform-background-ref-2 Transform of Background Image (root element background and transform) svg http://www.w3.org/TR/css-transforms-1/#transform-rendering 91095bb7bf9c5f06f5117a9fb116845d1ba4364f `Aryeh Gregor`<mailto:ayg@aryeh.name> 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.
|
||||
transform-compound-001 reference/transform-compound-ref,!reference/transform-compound-notref-1,!reference/transform-compound-notref-2 Compound Transforms http://www.w3.org/TR/css-transforms-1/#transform-rendering 65423ad44cb45420ba7c53d298bf04bdf96e6a99 `Keith Schwarz`<mailto:keith@keithschwarz.com>,`Robert O'Callahan`<mailto:robert@ocallahan.org>,`Aryeh Gregor`<mailto:ayg@aryeh.name> Tests that applying multiple transforms to an element is the same as applying the transforms in the same order to nested elements.
|
||||
transform-containing-block-dynamic-1a reference/containing-block-dynamic-1-ref CSS transforms: Creating containing block for fixed positioned elements https://drafts.csswg.org/css-transforms-1/#transform-rendering,https://drafts.csswg.org/css-transforms-1/#transform-property c3f9d7a8c16cd9fd6cda5cddcbb0284dbcd7a63a `L. David Baron`<http://dbaron.org/>,`Mozilla`<http://www.mozilla.org/> For elements whose layout is governed by the CSS box model, any value other than none for the transform results in the creation of both a stacking context and a containing block. The object acts as a containing block for fixed positioned descendants. The object acts as a containing block for fixed positioned descendants.
|
||||
transform-containing-block-dynamic-1b reference/containing-block-dynamic-1-ref CSS transforms: Creating containing block for fixed positioned elements https://drafts.csswg.org/css-transforms-1/#transform-rendering,https://drafts.csswg.org/css-transforms-1/#transform-property 8a7d0c09ed99b59f712e0367a4ff755666647d33 `L. David Baron`<http://dbaron.org/>,`Mozilla`<http://www.mozilla.org/> For elements whose layout is governed by the CSS box model, any value other than none for the transform results in the creation of both a stacking context and a containing block. The object acts as a containing block for fixed positioned descendants. The object acts as a containing block for fixed positioned descendants.
|
||||
transform-containing-block-dynamic-1a reference/containing-block-dynamic-1-ref CSS transforms: Creating containing block for fixed positioned elements https://drafts.csswg.org/css-transforms-1/#transform-rendering,https://drafts.csswg.org/css-transforms-1/#transform-property 3bdf13f7072e02f52688925bab41a611ed37fa1d `L. David Baron`<https://dbaron.org/>,`Mozilla`<http://www.mozilla.org/> For elements whose layout is governed by the CSS box model, any value other than none for the transform results in the creation of both a stacking context and a containing block. The object acts as a containing block for fixed positioned descendants. The object acts as a containing block for fixed positioned descendants.
|
||||
transform-containing-block-dynamic-1b reference/containing-block-dynamic-1-ref CSS transforms: Creating containing block for fixed positioned elements https://drafts.csswg.org/css-transforms-1/#transform-rendering,https://drafts.csswg.org/css-transforms-1/#transform-property b312def57595da97803ae61f53c2f0338255cf01 `L. David Baron`<https://dbaron.org/>,`Mozilla`<http://www.mozilla.org/> For elements whose layout is governed by the CSS box model, any value other than none for the transform results in the creation of both a stacking context and a containing block. The object acts as a containing block for fixed positioned descendants. The object acts as a containing block for fixed positioned descendants.
|
||||
transform-descendant-001 reference/transform-descendant-ref Transform Affects Descendant http://www.w3.org/TR/css-transforms-1/#transform-rendering 9ecfd9ef564e63b51fc011d5015c82a8423a5391 `Clint Talbert`<mailto:ctalbert@mozilla.com>,`Aryeh Gregor`<mailto:ayg@aryeh.name> This just tests that a transform on a container div moves its contents, not just the div itself.
|
||||
transform-display-001 reference/transform-display-ref,!reference/transform-display-notref Inline-Block http://www.w3.org/TR/css-transforms-1/#transformable-element 736272b962f8bb2c4fc3b3562e8a9f0c52447bfa `Aryeh Gregor`<mailto:ayg@aryeh.name> Inline-blocks are atomic inline-level elements, so should transform the same as blocks.
|
||||
transform-display-002 reference/transform-display-ref,!reference/transform-display-notref Table http://www.w3.org/TR/css-transforms-1/#transformable-element 01f7314f81d629016a234be2c2c69498a4fe66a2 `Aryeh Gregor`<mailto:ayg@aryeh.name> Inline-blocks are block-level elements, so should transform the same as blocks.
|
||||
|
|
@ -888,6 +889,7 @@ transform-origin-01 reference/transform-origin-01-ref SVG Transform using transf
|
|||
transform-origin-010 reference/transform-origin-007-ref transform-origin - left 0%('left' computes to '0%' in horizontal position) http://www.w3.org/TR/css-transforms-1/#transform-origin-property b2442da33df650e1135410a58df6396c779179c2 `Intel`<http://www.intel.com>,`Jieqiong Cui`<mailto:jieqiongx.cui@intel.com> The 'transform-origin' property set 'left' computes to 0% for the horizontal position.
|
||||
transform-origin-011 reference/transform-origin-007-ref transform-origin - right 100%('right' computes to '100%' in horizontal position) http://www.w3.org/TR/css-transforms-1/#transform-origin-property 7b06dd1372944da05357015436d23b8d639c35bf `Intel`<http://www.intel.com>,`Jieqiong Cui`<mailto:jieqiongx.cui@intel.com> The 'transform-origin' property set 'right' computes to 100% for the horizontal position.
|
||||
transform-origin-012 reference/transform-origin-007-ref transform-origin - 0% top('top' computes to '0%' in vertical position) http://www.w3.org/TR/css-transforms-1/#transform-origin-property e750026449d756bbaf3c4c1f8ce5f47de665571f `Intel`<http://www.intel.com>,`Jieqiong Cui`<mailto:jieqiongx.cui@intel.com> The 'transform-origin' property set 'top' computes to 0% for the vertical position.
|
||||
transform-origin-013 reference/transform-origin-013-ref CSS Reftest Reference https://drafts.csswg.org/css-transforms-1/#transform-origin-property f6331fa2bf6db158724a03184ef53954baef6fd9 `Jaffe Worley`<mailto:jaffe75@gmail.com>
|
||||
transform-origin-name-001 reference/transform-origin-name-ref-1,!reference/transform-origin-name-notref transform-origin: top left http://www.w3.org/TR/css-transforms-1/#transform-origin-property 93928beef5bcfd3e194fc8f321c42c8936b52bad `Keith Schwarz`<mailto:keith@keithschwarz.com>,`Aryeh Gregor`<mailto:ayg@aryeh.name> This tests that 'transform-origin: top left' is the same as 'transform-origin: 0% 0%'.
|
||||
transform-origin-name-002 reference/transform-origin-name-ref-1,!reference/transform-origin-name-notref transform-origin: left top http://www.w3.org/TR/css-transforms-1/#transform-origin-property dedad5837f1a2109e0cf519f58d8e66aa9ffd6f2 `Keith Schwarz`<mailto:keith@keithschwarz.com>,`Aryeh Gregor`<mailto:ayg@aryeh.name> This tests that 'transform-origin: left top' is the same as 'transform-origin: 0% 0%'.
|
||||
transform-origin-name-003 reference/transform-origin-name-ref-2,!reference/transform-origin-name-notref transform-origin: top http://www.w3.org/TR/css-transforms-1/#transform-origin-property eebebab675389347eabb7fc97975f0b92920165c `Keith Schwarz`<mailto:keith@keithschwarz.com>,`Aryeh Gregor`<mailto:ayg@aryeh.name> This tests that 'transform-origin: top' is the same as 'transform-origin: 50% 0%'.
|
||||
|
|
@ -905,7 +907,7 @@ transform-percent-005 reference/transform-percent-ref,!reference/transform-perce
|
|||
transform-percent-006 reference/transform-percent-ref,!reference/transform-percent-notref Percentages (translateX and translate) http://www.w3.org/TR/css-transforms-1/#transform-property eb4674e14965c1c39a6b430699f7cc0926b87128 `Keith Schwarz`<mailto:keith@keithschwarz.com>,`Aryeh Gregor`<mailto:ayg@aryeh.name> This is part of a series of tests that check that percentages in 'transform' values are evaluated relative to the transformed element's border box.
|
||||
transform-percent-007 reference/transform-percent-ref,!reference/transform-percent-notref Percentages (translateY and translate) http://www.w3.org/TR/css-transforms-1/#transform-property 2e278de4e0e31e5f05fc057c3e550d45fa9c3b35 `Keith Schwarz`<mailto:keith@keithschwarz.com>,`Aryeh Gregor`<mailto:ayg@aryeh.name> This is part of a series of tests that check that percentages in 'transform' values are evaluated relative to the transformed element's border box.
|
||||
transform-percent-008 reference/transform-percent-ref,!reference/transform-percent-notref Percentages (border box) http://www.w3.org/TR/css-transforms-1/#transform-property ff7650c4332118230f6b89821daf6977f96615f4 `Aryeh Gregor`<mailto:ayg@aryeh.name> This is part of a series of tests that check that percentages in 'transform' values are evaluated relative to the transformed element's border box. This test adds a thicker border plus margin and padding to make any discrepancies more evident.
|
||||
transform-propagate-inherit-boolean-001 reference/transform-propagate-inherit-boolean-ref em on Multiple Elements http://www.w3.org/TR/css-transforms-1/#transform-property 16aadb739d9c3a9be1a44c2d920abfcc2972af7a `L. David Baron`<http://dbaron.org/>,`Aryeh Gregor`<mailto:ayg@aryeh.name> This tests that when a 'transform' rule using em affects two elements with different font-sizes, it affects each according to its respective font-size, rather than using the same length for both. See: https://bugzilla.mozilla.org/show_bug.cgi?id=460440
|
||||
transform-propagate-inherit-boolean-001 reference/transform-propagate-inherit-boolean-ref em on Multiple Elements http://www.w3.org/TR/css-transforms-1/#transform-property bd8c82714587042652d73f223ff3e278cfdbf252 `L. David Baron`<https://dbaron.org/>,`Aryeh Gregor`<mailto:ayg@aryeh.name> This tests that when a 'transform' rule using em affects two elements with different font-sizes, it affects each according to its respective font-size, rather than using the same length for both. See: https://bugzilla.mozilla.org/show_bug.cgi?id=460440
|
||||
transform-root-bg-001 reference/transform-root-bg-001-ref scale(-1) on Root Element With Background http://www.w3.org/TR/css-transforms-1/#transform-rendering ed0be014ac17d0655d9b512159d3a8f00907a37e `Aryeh Gregor`<mailto:ayg@aryeh.name> 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.
|
||||
transform-root-bg-002 reference/transform-root-bg-001-ref scale(-1) on Root Element With Background On Body http://www.w3.org/TR/css-transforms-1/#transform-rendering a9cb2d4944f4e7665351e34611d15eb87f7a088d `Aryeh Gregor`<mailto:ayg@aryeh.name> 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.
|
||||
transform-root-bg-003 reference/transform-root-bg-003-ref scale(0.5) on Root Element With Background http://www.w3.org/TR/css-transforms-1/#transform-rendering c83103d5071bbc9edaf9d66bd657f766904c9635 `Aryeh Gregor`<mailto:ayg@aryeh.name> 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.
|
||||
|
|
@ -991,7 +993,7 @@ transform3d-perspective-006 reference/transform-lime-square-ref Simple Perspecti
|
|||
transform3d-perspective-007 reference/transform3d-perspective-001-ref,!reference/transform-lime-square-ref Perspective on Table Parent http://www.w3.org/TR/css-transforms-1/#perspective-property d5b6f5eec3e0250df9254d10fac20d875814e8eb `Aryeh Gregor`<mailto:ayg@aryeh.name> This tests that tables are correctly affected by perspective on their parent. It's motivated by a real-world implementation bug: <https://bugzilla.mozilla.org/show_bug.cgi?id=726601>.
|
||||
transform3d-perspective-008 reference/transform-lime-square-ref Perspective on Table http://www.w3.org/TR/css-transforms-1/#perspective-property cd4ea7697baac18d568087345241e67119c7dda7 `Aryeh Gregor`<mailto:ayg@aryeh.name> This tests that perspective on a table only affects its children, not the table itself. It's motivated by a real-world implementation bug: <https://bugzilla.mozilla.org/show_bug.cgi?id=726601>.
|
||||
transform3d-perspective-009 reference/transform3d-perspective-009-ref,!reference/transform-lime-square-ref 'perspective-origin' and translate() http://www.w3.org/TR/css-transforms-1/#propdef-perspective-origin 8ca2dae9e5669812ce482837b38e52405125b2b6 `Aryeh Gregor`<mailto:ayg@aryeh.name> 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.
|
||||
transform3d-perspective-origin-001 reference/transform3d-perspective-origin-ref,!reference/transform-lime-square-ref,!transform3d-rotatex-perspective-001,!reference/transform3d-rotatex-ref perspective-origin http://www.w3.org/TR/css-transforms-1/#propdef-perspective-origin 66a6ae2a0c13f0af788297f96c5e1b2a7b0f985a `Matt Woodrow`<mailto:mwoodrow@mozilla.com>,`Aryeh Gregor`<mailto:ayg@aryeh.name> 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.
|
||||
transform3d-perspective-origin-001 reference/transform3d-perspective-origin-ref,!reference/transform-lime-square-ref,!transform3d-rotatex-perspective-001,!reference/transform3d-rotatex-ref perspective-origin http://www.w3.org/TR/css-transforms-1/#propdef-perspective-origin d8306147315f76fd9d39e2cd668386c9c312a623 `Matt Woodrow`<mailto:mwoodrow@mozilla.com>,`Aryeh Gregor`<mailto:ayg@aryeh.name> 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.
|
||||
transform3d-preserve3d-001 reference/transform3d-preserve3d-001-ref Simple Preserve-3D http://www.w3.org/TR/css-transforms-1/#transform-style-property a73a5569cd284a03f3d25c8d55e7b97d64c66a44 `Matt Woodrow`<mailto:mwoodrow@mozilla.com>,`Aryeh Gregor`<mailto:ayg@aryeh.name> This tests that if preserve-3d is specified, four 45deg rotations equal one 180deg rotation.
|
||||
transform3d-preserve3d-002 reference/transform-lime-square-ref Preserve-3D With Margins 1 http://www.w3.org/TR/css-transforms-1/#transform-style-property d253f8b9c814b3900b287d7b644825a64d64b204 `Matt Woodrow`<mailto:mwoodrow@mozilla.com>,`Aryeh Gregor`<mailto:ayg@aryeh.name> 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: <https://bugzilla.mozilla.org/show_bug.cgi?id=691864>.
|
||||
transform3d-preserve3d-003 reference/transform-lime-square-ref Preserve-3D With Margins 2 http://www.w3.org/TR/css-transforms-1/#transform-style-property f726c650506c8a29aeafaebf3ec30ceb82ea7c7b `Matt Woodrow`<mailto:mwoodrow@mozilla.com>,`Aryeh Gregor`<mailto:ayg@aryeh.name> 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: <https://bugzilla.mozilla.org/show_bug.cgi?id=691864>.
|
||||
|
|
@ -1005,11 +1007,11 @@ transform3d-preserve3d-010 reference/transform-lime-square-ref rotatex() With Pr
|
|||
transform3d-preserve3d-011 reference/transform-lime-square-ref Preserve-3D With 90-Degree Rotation http://www.w3.org/TR/css-transforms-1/#transform-style-property 184cca5cca95bce32affce9343963661784e9da1 `Matt Woodrow`<mailto:mwoodrow@mozilla.com>,`Aryeh Gregor`<mailto:ayg@aryeh.name> 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.
|
||||
transform3d-preserve3d-012 reference/transform-blank-ref 90-Degree Rotations Without Preserve-3D http://www.w3.org/TR/css-transforms-1/#transform-style-property 95eb99f931e5161b6426d9c37f8003322068a53a `Matt Woodrow`<mailto:mwoodrow@mozilla.com>,`Aryeh Gregor`<mailto:ayg@aryeh.name> 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.
|
||||
transform3d-preserve3d-013 reference/transform3d-preserve3d-013-ref Preserve-3D with 'overflow: scroll' http://www.w3.org/TR/css-transforms-1/#transform-style-property 9e5d506badee49797754480f529e5d820290ddd8 `Aryeh Gregor`<mailto:ayg@aryeh.name> 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.)
|
||||
transform3d-rotate3d-001 reference/transform3d-rotatex-ref,!reference/transform-lime-square-ref rotate3d(1, 0, 0, 45deg) http://www.w3.org/TR/css-transforms-1/#three-d-transform-functions,http://www.w3.org/TR/css-transforms-1/#funcdef-rotate3d 14840bf820f97976e71e9196ac1cc9567269d696 `Matt Woodrow`<mailto:mwoodrow@mozilla.com>,`Aryeh Gregor`<mailto:ayg@aryeh.name> This tests that rotate3d(1, 0, 0, 45deg) is the same as rotatex(45deg).
|
||||
transform3d-rotate3d-001 reference/transform3d-rotatex-ref,!reference/transform-lime-square-ref rotate3d(1, 0, 0, 45deg) http://www.w3.org/TR/css-transforms-1/#three-d-transform-functions,http://www.w3.org/TR/css-transforms-1/#funcdef-rotate3d 0a9ea7f7d104524a82073e4f96cd4081869c4fd4 `Matt Woodrow`<mailto:mwoodrow@mozilla.com>,`Aryeh Gregor`<mailto:ayg@aryeh.name> This tests that rotate3d(1, 0, 0, 45deg) is the same as rotatex(45deg).
|
||||
transform3d-rotate3d-002 reference/transform3d-rotatey-ref,!reference/transform-lime-square-ref rotate3d(0, 1, 0, 45deg) http://www.w3.org/TR/css-transforms-1/#three-d-transform-functions,http://www.w3.org/TR/css-transforms-1/#funcdef-rotate3d 2c2251aaa0f2e1f18e21b78019f884c0c4ac9379 `Matt Woodrow`<mailto:mwoodrow@mozilla.com>,`Aryeh Gregor`<mailto:ayg@aryeh.name> This tests that rotate3d(0, 1, 0, 45deg) is the same as rotatey(45deg).
|
||||
transform3d-rotatex-001 reference/transform3d-rotatex-ref,!reference/transform-lime-square-ref rotatex(45deg) rotatey(360deg) rotatex(360deg) http://www.w3.org/TR/css-transforms-1/#three-d-transform-functions,http://www.w3.org/TR/css-transforms-1/#funcdef-rotatex a93371a4e791a82dca7a9ee7b1e86390e983ca51 `Matt Woodrow`<mailto:mwoodrow@mozilla.com>,`Aryeh Gregor`<mailto:ayg@aryeh.name> This tests that rotatex(45deg) rotatey(360deg) rotatex(360deg) is the same as rotatex(45deg).
|
||||
transform3d-rotatex-perspective-001 !reference/transform-lime-square-ref,!reference/transform3d-rotatex-ref perspective(1000px) rotatex(45deg) http://www.w3.org/TR/css-transforms-1/#three-d-transform-functions,http://www.w3.org/TR/css-transforms-1/#funcdef-rotatex,http://www.w3.org/TR/css-transforms-1/#funcdef-perspective b9f9d03db15712a9b6d8a4d283f59fc9816ee55d `Matt Woodrow`<mailto:mwoodrow@mozilla.com>,`Aryeh Gregor`<mailto:ayg@aryeh.name> This tests that perspective() has some effect when combined with rotatex() (i.e., is not equivalent to simply omitting the perspective).
|
||||
transform3d-rotatex-perspective-002 !reference/transform-lime-square-ref,!reference/transform3d-rotatex-ref rotatex() and 'perspective' http://www.w3.org/TR/css-transforms-1/#three-d-transform-functions,http://www.w3.org/TR/css-transforms-1/#funcdef-rotatex,http://www.w3.org/TR/css-transforms-1/#perspective-property 881a63c0105009ba4055695d2b43cdc8ec88b3ac `Matt Woodrow`<mailto:mwoodrow@mozilla.com>,`Aryeh Gregor`<mailto:ayg@aryeh.name> This tests that 'perspective' has some effect when combined with rotatex() (i.e., is not equivalent to simply omitting the perspective).
|
||||
transform3d-rotatex-001 reference/transform3d-rotatex-ref,!reference/transform-lime-square-ref rotatex(45deg) rotatey(360deg) rotatex(360deg) http://www.w3.org/TR/css-transforms-1/#three-d-transform-functions,http://www.w3.org/TR/css-transforms-1/#funcdef-rotatex 9c6956ecbafe91f28173a3e58bb23946cbbb811d `Matt Woodrow`<mailto:mwoodrow@mozilla.com>,`Aryeh Gregor`<mailto:ayg@aryeh.name> This tests that rotatex(45deg) rotatey(360deg) rotatex(360deg) is the same as rotatex(45deg).
|
||||
transform3d-rotatex-perspective-001 !reference/transform-lime-square-ref,!reference/transform3d-rotatex-ref perspective(1000px) rotatex(45deg) http://www.w3.org/TR/css-transforms-1/#three-d-transform-functions,http://www.w3.org/TR/css-transforms-1/#funcdef-rotatex,http://www.w3.org/TR/css-transforms-1/#funcdef-perspective fa3600075e3ea784ead9696fac8bc05b87900acc `Matt Woodrow`<mailto:mwoodrow@mozilla.com>,`Aryeh Gregor`<mailto:ayg@aryeh.name> This tests that perspective() has some effect when combined with rotatex() (i.e., is not equivalent to simply omitting the perspective).
|
||||
transform3d-rotatex-perspective-002 !reference/transform-lime-square-ref,!reference/transform3d-rotatex-ref rotatex() and 'perspective' http://www.w3.org/TR/css-transforms-1/#three-d-transform-functions,http://www.w3.org/TR/css-transforms-1/#funcdef-rotatex,http://www.w3.org/TR/css-transforms-1/#perspective-property c9992e8aa845cf96c62fc1996ea91ea633858e4d `Matt Woodrow`<mailto:mwoodrow@mozilla.com>,`Aryeh Gregor`<mailto:ayg@aryeh.name> This tests that 'perspective' has some effect when combined with rotatex() (i.e., is not equivalent to simply omitting the perspective).
|
||||
transform3d-rotatex-perspective-003 reference/transform3d-rotatex-perspective-ref,!reference/transform3d-rotatex-perspective-notref 'perspective' and 'opacity' http://www.w3.org/TR/css-transforms-1/#perspective-property 544c40c9426a4a01192712ec158d1586f5664e0b `Matt Woodrow`<mailto:mwoodrow@mozilla.com>,`Aryeh Gregor`<mailto:ayg@aryeh.name> This tests for a real-world implementation bug: see <https://bugzilla.mozilla.org/show_bug.cgi?id=707563>. The only difference between the test and reference is 'opacity: 0.9999', which should not affect anything in the test.
|
||||
transform3d-rotatex-transformorigin-001 reference/transform3d-rotatex-transformorigin-ref,!reference/transform-lime-square-ref rotateX() with 'transform-origin' http://www.w3.org/TR/css-transforms-1/#transform-origin-property,http://www.w3.org/TR/css-transforms-1/#three-d-transform-functions,http://www.w3.org/TR/css-transforms-1/#funcdef-rotatex 9e8600130f0cd4512c2d477f2ca321c8ff814c79 `Matt Woodrow`<mailto:mwoodrow@mozilla.com>,`Aryeh Gregor`<mailto:ayg@aryeh.name> This tests that rotateX(45deg) has the same effect (with perspective) with a top left origin and a top right origin. It should make no difference, because it doesn't change the axis of rotation: it's still the top. (This doesn't actually test the perspective property, since a UA that doesn't support perspective at all could still pass.)
|
||||
transform3d-rotatey-001 reference/transform3d-rotatey-ref,!reference/transform-lime-square-ref rotateY(45deg) rotateY(360deg) http://www.w3.org/TR/css-transforms-1/#three-d-transform-functions,http://www.w3.org/TR/css-transforms-1/#funcdef-rotatey fec2183ac4472cba02c6d9170c7be56c9415537e `Matt Woodrow`<mailto:mwoodrow@mozilla.com>,`Aryeh Gregor`<mailto:ayg@aryeh.name> This tests that rotateY(45deg) rotateY(360deg) has the same effect as just rotateY(45deg).
|
||||
|
|
@ -1040,7 +1042,7 @@ transforms-rotate-translate-scale reference/transforms-rotate-translate-scale-re
|
|||
transforms-rotateY-degree-60 reference/transforms-rotateY-degree-60-ref transform property with rotate function and one parameter http://www.w3.org/TR/css-transforms-1/#transform-property,http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions 54c1e1cfe7f1109159253136b2239111d0c109c8 `Ji Kai`<mailto:7jikai@gmail.com>
|
||||
transforms-skewX reference/transforms-skewX-ref transform property with skew function for X axis. http://www.w3.org/TR/css-transforms-1/#transform-property,http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions dd76111e380e64f3e5cbef9ffbdb5a044d862f2e `Jacy-Bai`<mailto:jinxin.bai@gmail.com> If the skew for X axis not provided, greenSquare will not cover redSquare.
|
||||
transforms-skewY reference/transforms-skewY-ref transform property with skew function for Y axis. http://www.w3.org/TR/css-transforms-1/#transform-property,http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions 5600d5b5fc10aeaa2d3c43e51ac36ac2c6793e70 `Jacy-Bai`<mailto:jinxin.bai@gmail.com> If the skew for Y axis not provided, greenSquare will not cover redSquare.
|
||||
translate reference/translate-ref test translate http://www.w3.org/TR/css-transforms-1/#3d-transform-rendering df5cbdd25700b31adf321f8f3f689dc11fa20804 `Ebay Inc.`<xiatian@ebay.com> translate x, y
|
||||
translate reference/translate-ref test translate http://www.w3.org/TR/css-transforms-1/#3d-transform-rendering e2462c9b3304dcfaa2b0052dcfb07d11fcf3b4cd `Ebay Inc.`<mailto:xiatian@ebay.com> translate x, y
|
||||
translate-optional-second-001 reference/translate-optional-second-ref transform property with translate function and one parameter http://www.w3.org/TR/css-transforms-1/#transform-property,http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions 8b89de122e13cc0eb8794e3dee25bd804c81436b `Jian Zhang`<mailto:jian.andy.zhang@gmail.com> If the second parameter is not provided, it has zero as a value. This transform moves the element by 100 pixels in X direction.
|
||||
transofrmed-preserve-3d-1 reference/transofrmed-preserve-3d-1-ref transform preserve-3d http://www.w3.org/TR/css-transforms-1/#transform-property 2dea466f5bd0eaaabc1aece7ad68db29009a4524 `loveky`<mailto:ylzcylx@gmail.com> The transformed div should establishe a 3D rendering context
|
||||
transofrmed-rotateX-3 reference/transofrmed-rotateX-3-ref transform rotateX http://www.w3.org/TR/css-transforms-1/#transform-property 1045ee0727034be93674d88e23480934850a43f0 `loveky`<mailto:ylzcylx@gmail.com> The transformed div should rotateX by 180 degrees
|
||||
|
|
@ -1048,8 +1050,7 @@ transofrmed-rotateY-1 reference/transofrmed-rotateY-1-ref transform rotateY htt
|
|||
ttwf-css-3d-polygon-cycle reference/ttwf-css-3d-polygon-cycle-ref 3d transform polygon cycle svg http://www.w3.org/TR/css-transforms-1/#3d-transform-rendering e850913934fcfbd7254a50fb8c0e1f6a9f6957d5 `Leo Ziegler`<mailto:leo.ziegler@gmail.com> The red, green and blue rectangles are forming a cycle, which should be detected and rendered using Newell Algorithm's.
|
||||
ttwf-css-3d-polygon-cycle-mismatch reference/ttwf-css-3d-polygon-cycle-ref 3d transform polygon cycle svg http://www.w3.org/TR/css-transforms-1/#3d-transform-rendering 03eb2681a92d1ea76b1a82d47729d8109c0124e9 `Leo Ziegler`<mailto:leo.ziegler@gmail.com> The red, green and blue rectangles are forming a cycle, which should be detected and rendered using Newell Algorithm's.
|
||||
ttwf-reftest-rotate reference/ttwf-reftest-rotate-ref transform rotate http://www.w3.org/TR/css-transforms-1/#transform-property,http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions 0081259fc5f0de5d3ae4763f9d7ad3a9ed115adf `Michael Downey`<mailto:miked782000@yahoo.com> The transform should rotate 180 degrees
|
||||
ttwf-transform-skewx-001 reference/ttwf-reftest-transform-skewx-001 CSS Transform Using skewX() function http://www.w3.org/TR/css-transforms-1/#transform-property 8e5d3687be86d2fbd5a5e70b4352deacad6e3e90 `Mihai Corlan`<mailto:mcorlan@adobe.com> Test that the green shape is skew on X axis by 45 degrees
|
||||
ttwf-transform-skewy-001 reference/ttwf-reftest-transform-skewy-001 CSS Transform Using skewY() function http://www.w3.org/TR/css-transforms-1/#transform-property de06e80663dcae50be2198ba04fa48d4ca9a5b21 `Mihai Corlan`<mailto:mcorlan@adobe.com> Test that the green shape is skew on Y axis by 45 degrees
|
||||
ttwf-transform-skewx-001 reference/ttwf-reftest-transform-skewx-001 CSS Transform Using skewX() function http://www.w3.org/TR/css-transforms-1/#transform-property 16f2663d689ccc18c16bf39013fe2a605684ffd8 `Mihai Corlan`<mailto:mcorlan@adobe.com> Test that the green shape is skew on X axis by 45 degrees
|
||||
ttwf-transform-skewy-001 reference/ttwf-reftest-transform-skewy-001 CSS Transform Using skewY() function http://www.w3.org/TR/css-transforms-1/#transform-property 23d86e1b810989a6fb25f9868141c2f695a35a92 `Mihai Corlan`<mailto:mcorlan@adobe.com> Test that the green shape is skew on Y axis by 45 degrees
|
||||
ttwf-transform-translatex-001 reference/ttwf-reftest-transform-translatex-001 CSS Transform Using translateX() function http://www.w3.org/TR/css-transforms-1/#transform-property 5bcd1e07576267b0faedd7f3fe84058fb6faa370 `Mihai Corlan`<mailto:mcorlan@adobe.com> Test that the green square is moved on X axis 100px
|
||||
ttwf-transform-translatey-001 reference/ttwf-reftest-transform-translatey-001 CSS Transform Using translateY() function http://www.w3.org/TR/css-transforms-1/#transform-property a1f42153313e00c4133c79f1f77b41aa4e788e2b `Mihai Corlan`<mailto:mcorlan@adobe.com> Test that the green square is moved on Y axis 100px
|
||||
video-001 CSS Regions: flowing a video in a region http://www.w3.org/TR/css3-regions/#the-flow-into-property,http://www.w3.org/TR/css3-regions/#flow-from,http://www.w3.org/TR/css-transforms-1/#transform-functions 68cde74d5f7d336ecabbaaef08bcb491350cf40e `Mihai Balan`<mailto:mibalan@adobe.com> Test checks videos flowed in regions render smoothly and without artifacts.
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<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="svg" name="flags" />
|
||||
<meta content="asserting that you can rotate an element with CSS" name="assert" />
|
||||
<style type="text/css">
|
||||
article, svg{
|
||||
|
|
@ -29,7 +29,7 @@
|
|||
<p>You should only see one block with color green, and you should not see any red</p>
|
||||
<section>
|
||||
<article></article>
|
||||
<svg width="300" version="1.1" xmlns:xmlns="http://www.w3.org/2000/svg" height="200" xmlns="http://www.w3.org/2000/svg">
|
||||
<svg height="200" width="300" version="1.1" xmlns:xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg">
|
||||
<style type="text/css">
|
||||
rect{
|
||||
stroke-width: 10;
|
||||
|
|
|
|||
|
|
@ -3,7 +3,9 @@
|
|||
<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" />
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<meta content="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{
|
||||
|
|
@ -19,27 +21,13 @@
|
|||
<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);
|
||||
})();
|
||||
test(function() {
|
||||
var box = document.getElementById("box");
|
||||
box.style.transform = "rotate(30deg)";
|
||||
assert_equals(window.getComputedStyle(box).getPropertyValue("transform"),
|
||||
"rotate(30deg)");
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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 Background: background-attachment: background-attachment:fixed inside a transform</title>
|
||||
<link href="mailto:botond@mozilla.com" rel="author" title="Botond Ballo" />
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla" />
|
||||
<link href="https://www.w3.org/TR/css-transforms-1/#transform-rendering" rel="help" />
|
||||
<link href="reference/background-attachment-fixed-inside-transform-1-ref.xht" rel="match" />
|
||||
<meta content="Test checks whether background-attachment: 'fixed' inside a transform behaves like background-attachment: 'scroll'." name="assert" />
|
||||
<style>
|
||||
body {
|
||||
height: 4000px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#outer {
|
||||
margin: 200px;
|
||||
height: 700px;
|
||||
width: 300px;
|
||||
transform: rotate(45deg);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#inner {
|
||||
height: 700px;
|
||||
background-image: radial-gradient(farthest-corner at center, blue, black);
|
||||
background-size: 300px 300px;
|
||||
background-position: 200px 200px;
|
||||
background-color: lime;
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: fixed;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer">
|
||||
<div id="inner">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -13,7 +13,7 @@
|
|||
<body>
|
||||
|
||||
<h1>CSS Transforms Module Level 1 CR Test Suite</h1>
|
||||
<h2>The Transform Functions (691 tests)</h2>
|
||||
<h2>The Transform Functions (690 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column"></col>
|
||||
<col id="refs-column"></col>
|
||||
|
|
@ -31,7 +31,7 @@
|
|||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s15">+</a>
|
||||
<a href="https://www.w3.org/TR/css-transforms-1/#transform-functions">15 The Transform Functions</a></th></tr>
|
||||
<!-- 7 tests -->
|
||||
<!-- 6 tests -->
|
||||
<tr id="animations-001-15" class="ahem animated">
|
||||
<td>
|
||||
<a href="animations-001.xht">animations-001</a></td>
|
||||
|
|
@ -98,17 +98,6 @@
|
|||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="video-001-15" class="">
|
||||
<td>
|
||||
<a href="video-001.xht">video-001</a></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td>CSS Regions: flowing a video in a region
|
||||
<ul class="assert">
|
||||
<li>Test checks videos flowed in regions render smoothly and without artifacts.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="s15.#typedef-transform-function">
|
||||
<!-- 0 tests -->
|
||||
|
|
@ -11978,7 +11967,7 @@
|
|||
<tr id="css-transform-3d-rotate3d-y-negative-15.2" class="">
|
||||
<td>
|
||||
<a href="css-transform-3d-rotate3d-Y-negative.xht">css-transform-3d-rotate3d-y-negative</a></td>
|
||||
<td><a href="reference/css-transform-3d-rotateY-ref.xht">=</a> </td>
|
||||
<td><a href="reference/css-transform-3d-rotateX-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>rotate3d on div element
|
||||
<ul class="assert">
|
||||
|
|
@ -11989,7 +11978,7 @@
|
|||
<tr id="css-transform-3d-rotate3d-y-positive-15.2" class="">
|
||||
<td>
|
||||
<a href="css-transform-3d-rotate3d-Y-positive.xht">css-transform-3d-rotate3d-y-positive</a></td>
|
||||
<td><a href="reference/css-transform-3d-rotateY-ref.xht">=</a> </td>
|
||||
<td><a href="reference/css-transform-3d-rotateX-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>rotate3d on div element
|
||||
<ul class="assert">
|
||||
|
|
@ -12044,7 +12033,7 @@
|
|||
<tr id="css-transform-3d-rotatey-negative-15.2" class="">
|
||||
<td>
|
||||
<a href="css-transform-3d-rotateY-negative.xht">css-transform-3d-rotatey-negative</a></td>
|
||||
<td><a href="reference/css-transform-3d-rotateY-ref.xht">=</a> </td>
|
||||
<td><a href="reference/css-transform-3d-rotateX-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>rotateY on div element
|
||||
<ul class="assert">
|
||||
|
|
@ -12055,7 +12044,7 @@
|
|||
<tr id="css-transform-3d-rotatey-positive-15.2" class="">
|
||||
<td>
|
||||
<a href="css-transform-3d-rotateY-positive.xht">css-transform-3d-rotatey-positive</a></td>
|
||||
<td><a href="reference/css-transform-3d-rotateY-ref.xht">=</a> </td>
|
||||
<td><a href="reference/css-transform-3d-rotateX-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>rotateY on div element
|
||||
<ul class="assert">
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
<body>
|
||||
|
||||
<h1>CSS Transforms Module Level 1 CR Test Suite</h1>
|
||||
<h2>The Transform Rendering Model (50 tests)</h2>
|
||||
<h2>The Transform Rendering Model (51 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column"></col>
|
||||
<col id="refs-column"></col>
|
||||
|
|
@ -31,7 +31,18 @@
|
|||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s6">+</a>
|
||||
<a href="https://www.w3.org/TR/css-transforms-1/#transform-rendering">6 The Transform Rendering Model</a></th></tr>
|
||||
<!-- 34 tests -->
|
||||
<!-- 35 tests -->
|
||||
<tr id="background-attachment-fixed-inside-transform-1-6" class="primary">
|
||||
<td><strong>
|
||||
<a href="background-attachment-fixed-inside-transform-1.xht">background-attachment-fixed-inside-transform-1</a></strong></td>
|
||||
<td><a href="reference/background-attachment-fixed-inside-transform-1-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Background: background-attachment: background-attachment:fixed inside a transform
|
||||
<ul class="assert">
|
||||
<li>Test checks whether background-attachment: 'fixed' inside a transform behaves like background-attachment: 'scroll'.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="css-transforms-3d-on-anonymous-block-001-6" class="">
|
||||
<td>
|
||||
<a href="css-transforms-3d-on-anonymous-block-001.xht">css-transforms-3d-on-anonymous-block-001</a></td>
|
||||
|
|
|
|||
|
|
@ -32,22 +32,22 @@
|
|||
<a href="#s7">+</a>
|
||||
<a href="https://www.w3.org/TR/css-transforms-1/#transform-property">7 The transform Property</a></th></tr>
|
||||
<!-- 103 tests -->
|
||||
<tr id="2d-rotate-001-7" class="css3, rotate, svg">
|
||||
<tr id="2d-rotate-001-7" class="svg">
|
||||
<td>
|
||||
<a href="2d-rotate-001.xht">2d-rotate-001</a></td>
|
||||
<td><a href="reference/2d-rotate-ref.xht">=</a> <a href="reference/2d-rotate-notref.xht">≠</a> </td>
|
||||
<td><abbr class="css3," title=""></abbr><abbr class="rotate," title=""></abbr><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
||||
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
||||
<td>CSS Transform using 2d rotate()
|
||||
<ul class="assert">
|
||||
<li>asserting that you can rotate an element with CSS</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="2d-rotate-js-7" class="css3, rotate, svg">
|
||||
<tr id="2d-rotate-js-7" class="svg script">
|
||||
<td>
|
||||
<a href="2d-rotate-js.xht">2d-rotate-js</a></td>
|
||||
<td></td>
|
||||
<td><abbr class="css3," title=""></abbr><abbr class="rotate," title=""></abbr><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
||||
<td><abbr class="svg" title="Requires SVG support">SVG</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
||||
<td>Rotate via javascript must show the correct computed rotation
|
||||
<ul class="assert">
|
||||
<li>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</li>
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
<body>
|
||||
|
||||
<h1>CSS Transforms Module Level 1 CR Test Suite</h1>
|
||||
<h2>The transform-origin Property (117 tests)</h2>
|
||||
<h2>The transform-origin Property (118 tests)</h2>
|
||||
<table width="100%">
|
||||
<col id="test-column"></col>
|
||||
<col id="refs-column"></col>
|
||||
|
|
@ -31,7 +31,7 @@
|
|||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s8">+</a>
|
||||
<a href="https://www.w3.org/TR/css-transforms-1/#transform-origin-property">8 The transform-origin Property</a></th></tr>
|
||||
<!-- 116 tests -->
|
||||
<!-- 117 tests -->
|
||||
<tr id="css-transform-scale-001-8" class="">
|
||||
<td>
|
||||
<a href="css-transform-scale-001.xht">css-transform-scale-001</a></td>
|
||||
|
|
@ -1198,6 +1198,14 @@
|
|||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="transform-origin-013-8" class="primary">
|
||||
<td><strong>
|
||||
<a href="transform-origin-013.xht">transform-origin-013</a></strong></td>
|
||||
<td><a href="reference/transform-origin-013-ref.xht">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Reftest Reference
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="transform-origin-name-001-8" class="">
|
||||
<td>
|
||||
<a href="transform-origin-name-001.xht">transform-origin-name-001</a></td>
|
||||
|
|
|
|||
|
|
@ -4,26 +4,25 @@
|
|||
<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;
|
||||
border: 20px solid black;
|
||||
height: 120px;
|
||||
left: 15px;
|
||||
top: 90px;
|
||||
left: 60px;
|
||||
top: 60px;
|
||||
width: 120px;
|
||||
}
|
||||
div.green {
|
||||
background-color: green;
|
||||
height: 240px;
|
||||
left: 80px;
|
||||
top: 20px;
|
||||
transform: rotate3d(1,0,0,-60deg);
|
||||
width: 120px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,26 +4,25 @@
|
|||
<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;
|
||||
border: 20px solid black;
|
||||
height: 120px;
|
||||
left: 15px;
|
||||
top: 90px;
|
||||
left: 60px;
|
||||
top: 60px;
|
||||
width: 120px;
|
||||
}
|
||||
div.green {
|
||||
background-color: green;
|
||||
height: 240px;
|
||||
left: 80px;
|
||||
top: 20px;
|
||||
transform: rotate3d(1,0,0,60deg);
|
||||
width: 120px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,26 +4,25 @@
|
|||
<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" />
|
||||
<link href="reference/css-transform-3d-rotateX-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;
|
||||
border: 20px solid black;
|
||||
height: 120px;
|
||||
left: 65px;
|
||||
top: 45px;
|
||||
left: 60px;
|
||||
top: 60px;
|
||||
width: 120px;
|
||||
}
|
||||
div.green {
|
||||
background-color: green;
|
||||
height: 120px;
|
||||
left: 20px;
|
||||
top: 80px;
|
||||
transform: rotate3d(0,1,0,-60deg);
|
||||
width: 240px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,26 +4,25 @@
|
|||
<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" />
|
||||
<link href="reference/css-transform-3d-rotateX-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;
|
||||
border: 20px solid black;
|
||||
height: 120px;
|
||||
left: 65px;
|
||||
top: 45px;
|
||||
left: 60px;
|
||||
top: 60px;
|
||||
width: 120px;
|
||||
}
|
||||
div.green {
|
||||
background-color: green;
|
||||
height: 120px;
|
||||
left: 20px;
|
||||
top: 80px;
|
||||
transform: rotate3d(0,1,0,60deg);
|
||||
width: 240px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,33 +4,32 @@
|
|||
<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;
|
||||
height: 100px;
|
||||
left: 80px;
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
width: 240px;
|
||||
top: 80px;
|
||||
width: 100px;
|
||||
}
|
||||
div.origin {
|
||||
background-color: green;
|
||||
}
|
||||
div.redsquare {
|
||||
background-color: red;
|
||||
height: 60px;
|
||||
left: 70px;
|
||||
top: 190px;
|
||||
width: 240px;
|
||||
height: 38px;
|
||||
left: 80px;
|
||||
top: 111px;
|
||||
width: 100px;
|
||||
}
|
||||
div.greensquare {
|
||||
background-color: green;
|
||||
height: 240px;
|
||||
left: 160px;
|
||||
top: 100px;
|
||||
width: 60px;
|
||||
height: 100px;
|
||||
left: 110px;
|
||||
top: 80px;
|
||||
width: 40px;
|
||||
transform: rotate3d(0,0,1,-90deg);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -4,33 +4,32 @@
|
|||
<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;
|
||||
height: 100px;
|
||||
left: 80px;
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
width: 240px;
|
||||
top: 80px;
|
||||
width: 100px;
|
||||
}
|
||||
div.origin {
|
||||
background-color: green;
|
||||
}
|
||||
div.redsquare {
|
||||
background-color: red;
|
||||
height: 60px;
|
||||
left: 70px;
|
||||
top: 190px;
|
||||
width: 240px;
|
||||
height: 38px;
|
||||
left: 80px;
|
||||
top: 111px;
|
||||
width: 100px;
|
||||
}
|
||||
div.greensquare {
|
||||
background-color: green;
|
||||
height: 240px;
|
||||
left: 160px;
|
||||
top: 100px;
|
||||
width: 60px;
|
||||
height: 100px;
|
||||
left: 110px;
|
||||
top: 80px;
|
||||
width: 40px;
|
||||
transform: rotate3d(0,0,1,90deg);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -5,25 +5,24 @@
|
|||
<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;
|
||||
border: 20px solid black;
|
||||
height: 120px;
|
||||
left: 15px;
|
||||
top: 90px;
|
||||
left: 60px;
|
||||
top: 60px;
|
||||
width: 120px;
|
||||
}
|
||||
div.green {
|
||||
background-color: green;
|
||||
height: 240px;
|
||||
left: 80px;
|
||||
top: 20px;
|
||||
transform: rotateX(-60deg);
|
||||
width: 120px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,25 +5,24 @@
|
|||
<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;
|
||||
border: 20px solid black;
|
||||
height: 120px;
|
||||
left: 15px;
|
||||
top: 90px;
|
||||
left: 60px;
|
||||
top: 60px;
|
||||
width: 120px;
|
||||
}
|
||||
div.green {
|
||||
background-color: green;
|
||||
height: 240px;
|
||||
left: 80px;
|
||||
top: 20px;
|
||||
transform: rotateX(60deg);
|
||||
width: 120px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,26 +4,25 @@
|
|||
<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" />
|
||||
<link href="reference/css-transform-3d-rotateX-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;
|
||||
border: 20px solid black;
|
||||
height: 120px;
|
||||
left: 65px;
|
||||
top: 45px;
|
||||
left: 60px;
|
||||
top: 60px;
|
||||
width: 120px;
|
||||
}
|
||||
div.green {
|
||||
background-color: green;
|
||||
height: 120px;
|
||||
left: 20px;
|
||||
top: 80px;
|
||||
transform: rotateY(-60deg);
|
||||
width: 240px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,26 +4,25 @@
|
|||
<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" />
|
||||
<link href="reference/css-transform-3d-rotateX-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;
|
||||
border: 20px solid black;
|
||||
height: 120px;
|
||||
left: 65px;
|
||||
top: 45px;
|
||||
left: 60px;
|
||||
top: 60px;
|
||||
width: 120px;
|
||||
}
|
||||
div.green {
|
||||
background-color: green;
|
||||
height: 120px;
|
||||
left: 20px;
|
||||
top: 80px;
|
||||
transform: rotateY(60deg);
|
||||
width: 240px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,33 +4,32 @@
|
|||
<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;
|
||||
height: 100px;
|
||||
left: 80px;
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
width: 240px;
|
||||
top: 80px;
|
||||
width: 100px;
|
||||
}
|
||||
div.origin {
|
||||
background-color: green;
|
||||
}
|
||||
div.redsquare {
|
||||
background-color: red;
|
||||
height: 60px;
|
||||
left: 70px;
|
||||
top: 190px;
|
||||
width: 240px;
|
||||
height: 38px;
|
||||
left: 80px;
|
||||
top: 111px;
|
||||
width: 100px;
|
||||
}
|
||||
div.greensquare {
|
||||
background-color: green;
|
||||
height: 240px;
|
||||
left: 160px;
|
||||
top: 100px;
|
||||
width: 60px;
|
||||
height: 100px;
|
||||
left: 110px;
|
||||
top: 80px;
|
||||
width: 40px;
|
||||
transform: rotateZ(-90deg);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -4,33 +4,32 @@
|
|||
<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;
|
||||
height: 100px;
|
||||
left: 80px;
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
width: 240px;
|
||||
top: 80px;
|
||||
width: 100px;
|
||||
}
|
||||
div.origin {
|
||||
background-color: green;
|
||||
}
|
||||
div.redsquare {
|
||||
background-color: red;
|
||||
height: 60px;
|
||||
left: 70px;
|
||||
top: 190px;
|
||||
width: 240px;
|
||||
height: 38px;
|
||||
left: 80px;
|
||||
top: 111px;
|
||||
width: 100px;
|
||||
}
|
||||
div.greensquare {
|
||||
background-color: green;
|
||||
height: 240px;
|
||||
left: 160px;
|
||||
top: 100px;
|
||||
width: 60px;
|
||||
height: 100px;
|
||||
left: 110px;
|
||||
top: 80px;
|
||||
width: 40px;
|
||||
transform: rotateZ(90deg);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -6,47 +6,39 @@
|
|||
<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;
|
||||
height: 100px;
|
||||
top: 60px;
|
||||
width: 400px;
|
||||
}
|
||||
div.blue {
|
||||
background-color: blue;
|
||||
height: 180px;
|
||||
width: 180px;
|
||||
left: 10px;
|
||||
top: 10px;
|
||||
height: 100px;
|
||||
transform: rotateY(-60deg);
|
||||
transform-style: preserve-3d;
|
||||
width: 400px;
|
||||
}
|
||||
div.green {
|
||||
background-color: green;
|
||||
left: 40px;
|
||||
top: 0px;
|
||||
height: 180px;
|
||||
width: 180px;
|
||||
height: 100px;
|
||||
transform: rotateY(120deg);
|
||||
width: 400px;
|
||||
}
|
||||
div.red{
|
||||
background-color: red;
|
||||
left: 140px;
|
||||
top: 10px;
|
||||
height: 180px;
|
||||
width: 20px;
|
||||
height: 100px;
|
||||
left: 100px;
|
||||
width: 200px;
|
||||
}
|
||||
</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>
|
||||
<p>Test passes if there is a <b>green</b> square and a <b>blue</b> square, and no any <b>red</b>.</p>
|
||||
<div class="container">
|
||||
<div class="red"></div>
|
||||
<div class="blue">
|
||||
|
|
|
|||
|
|
@ -5,33 +5,30 @@
|
|||
<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" />
|
||||
<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;
|
||||
div {
|
||||
height: 100px;
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left:51px;
|
||||
z-index:10;
|
||||
top: 80px;
|
||||
}
|
||||
.red{
|
||||
background-color:red;
|
||||
width: 140px;
|
||||
left:80px;
|
||||
z-index:9;
|
||||
.red {
|
||||
background-color: red;
|
||||
left: 80px;
|
||||
width: 100px;
|
||||
}
|
||||
.green{
|
||||
transform:rotateY(45deg);
|
||||
background-color: green;
|
||||
left: 30px;
|
||||
transform: rotateY(60deg);
|
||||
width: 200px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green rectangle and no red.</p>
|
||||
<div class="green"></div>
|
||||
<p>The test passes if there is a green square and no red.</p>
|
||||
<div class="red"></div>
|
||||
<div class="green"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<!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: Creating containing block for fixed positioned elements</title>
|
||||
<link href="http://dbaron.org/" rel="author" title="L. David Baron" />
|
||||
<link href="https://dbaron.org/" rel="author" title="L. David Baron" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<link href="https://drafts.csswg.org/css-transforms-1/#perspective-property" rel="help" />
|
||||
<link href="reference/containing-block-dynamic-1-ref.xht" rel="match" />
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<!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: Creating containing block for fixed positioned elements</title>
|
||||
<link href="http://dbaron.org/" rel="author" title="L. David Baron" />
|
||||
<link href="https://dbaron.org/" rel="author" title="L. David Baron" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<link href="https://drafts.csswg.org/css-transforms-1/#perspective-property" rel="help" />
|
||||
<link href="reference/containing-block-dynamic-1-ref.xht" rel="match" />
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@
|
|||
<p>You should only see one block with color green, and you should not see any red</p>
|
||||
<section>
|
||||
<article></article>
|
||||
<svg width="300" version="1.1" xmlns:xmlns="http://www.w3.org/2000/svg" height="200" xmlns="http://www.w3.org/2000/svg">
|
||||
<svg height="200" width="300" version="1.1" xmlns:xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg">
|
||||
<style type="text/css">
|
||||
rect{
|
||||
stroke-width: 10;
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
<body>
|
||||
<p>You should only see one block with color green, and you should not see any red</p>
|
||||
<section>
|
||||
<svg width="300" version="1.1" xmlns:xmlns="http://www.w3.org/2000/svg" height="200" xmlns="http://www.w3.org/2000/svg">
|
||||
<svg height="200" width="300" version="1.1" xmlns:xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg">
|
||||
<style type="text/css">
|
||||
rect{
|
||||
stroke-width: 10;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,39 @@
|
|||
<!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 Background: background-attachment: background-attachment:fixed inside a transform</title>
|
||||
<link href="mailto:botond@mozilla.com" rel="author" title="Botond Ballo" />
|
||||
<link href="https://www.mozilla.org" rel="author" title="Mozilla" />
|
||||
<style type="text/css">
|
||||
body {
|
||||
height: 4000px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#outer {
|
||||
margin: 200px;
|
||||
height: 700px;
|
||||
width: 300px;
|
||||
transform: rotate(45deg);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#inner {
|
||||
height: 700px;
|
||||
background-image: radial-gradient(farthest-corner at center, blue, black);
|
||||
background-size: 300px 300px;
|
||||
background-position: 200px 200px;
|
||||
background-color: lime;
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: scroll;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer">
|
||||
<div id="inner">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<!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: Creating containing block for fixed positioned elements</title>
|
||||
<link href="http://dbaron.org/" rel="author" title="L. David Baron" />
|
||||
<link href="https://dbaron.org/" rel="author" title="L. David Baron" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
html, body { margin: 0; padding: 0 }
|
||||
|
|
|
|||
|
|
@ -5,23 +5,19 @@
|
|||
<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;
|
||||
border: 20px solid black;
|
||||
height: 120px;
|
||||
left: 15px;
|
||||
top: 90px;
|
||||
left: 60px;
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
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>
|
||||
<div></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -5,37 +5,18 @@
|
|||
<link href="http://www.intel.com" rel="author" title="Intel" />
|
||||
<style>
|
||||
div {
|
||||
height: 240px;
|
||||
left: 70px;
|
||||
background-color: green;
|
||||
height: 100px;
|
||||
left: 80px;
|
||||
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);
|
||||
top: 80px;
|
||||
width: 100px;
|
||||
}
|
||||
</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>
|
||||
<div></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -8,33 +8,30 @@
|
|||
position: absolute;
|
||||
}
|
||||
div.container {
|
||||
background-color: gray;
|
||||
height: 200px;
|
||||
left: 65px;
|
||||
top: 45px;
|
||||
width: 200px;
|
||||
height: 100px;
|
||||
top: 60px;
|
||||
width: 400px;
|
||||
}
|
||||
div.blue {
|
||||
background-color: blue;
|
||||
height: 180px;
|
||||
width: 90px;
|
||||
left: 120px;
|
||||
top: 55px;
|
||||
height: 100px;
|
||||
left: 200px;
|
||||
width: 100px;
|
||||
}
|
||||
div.greensquare {
|
||||
div.green {
|
||||
background-color: green;
|
||||
height: 180px;
|
||||
left: 140px;
|
||||
top: 55px;
|
||||
width: 90px;
|
||||
height: 100px;
|
||||
left: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
</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>
|
||||
<p>Test passes if there is a <b>green</b> square and a <b>blue</b> square, and no any <b>red</b>.</p>
|
||||
<div class="container">
|
||||
<div class="blue"></div>
|
||||
<div class="green"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -2,21 +2,21 @@
|
|||
<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;
|
||||
div {
|
||||
height: 100px;
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left:80px;
|
||||
top: 80px;
|
||||
}
|
||||
.green {
|
||||
background-color: green;
|
||||
left: 80px;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green rectangle and no red.</p>
|
||||
<p>The test passes if there is a green square and no red.</p>
|
||||
<div class="green"></div>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<!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 Reference File</title>
|
||||
<link href="xiatian@ebay.com" rel="author" title="Ebay Inc." />
|
||||
<link href="mailto:xiatian@ebay.com" rel="author" title="Ebay Inc." />
|
||||
<style type="text/css">
|
||||
.container {
|
||||
height: 100px;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<!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 Reference File</title>
|
||||
<link href="xiatian@ebay.com" rel="author" title="Ebay Inc." />
|
||||
<link href="mailto:xiatian@ebay.com" rel="author" title="Ebay Inc." />
|
||||
<style type="text/css">
|
||||
.container {
|
||||
height: 100px;
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue