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

Update web-platform-tests and CSS tests.

Browse source 
- Update CSS tests to revision e05bfd5e30ed662c2f8a353577003f8eed230180.
- Update web-platform-tests to revision a052787dd5c069a340031011196b73affbd68cd9.
This commit is contained in:
Ms2ger 2017-02-06 11:06:12 +01:00
parent fb4f421c8b
commit 296fa2512b
21852 changed files with 2080936 additions and 892894 deletions
Download patch file Download diff file Expand all files Collapse all files

4
tests/wpt/css-tests/css-transforms-1_dev/html/2d-rotate-001.htm
View file

@ -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;

30
tests/wpt/css-tests/css-transforms-1_dev/html/2d-rotate-js.htm
View file

@ -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>

42
tests/wpt/css-tests/css-transforms-1_dev/html/background-attachment-fixed-inside-transform-1.htm Normal file
View file

@ -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>

23
tests/wpt/css-tests/css-transforms-1_dev/html/chapter-15.htm
View file

@ -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">

15
tests/wpt/css-tests/css-transforms-1_dev/html/chapter-6.htm
View file

@ -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>

8
tests/wpt/css-tests/css-transforms-1_dev/html/chapter-7.htm
View file

@ -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">&#x2260;</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>

12
tests/wpt/css-tests/css-transforms-1_dev/html/chapter-8.htm
View file

@ -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>

11
tests/wpt/css-tests/css-transforms-1_dev/html/css-transform-3d-rotate3d-X-negative.htm
View file

@ -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;
}

11
tests/wpt/css-tests/css-transforms-1_dev/html/css-transform-3d-rotate3d-X-positive.htm
View file

@ -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;
}

13
tests/wpt/css-tests/css-transforms-1_dev/html/css-transform-3d-rotate3d-Y-negative.htm
View file

@ -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;
}

13
tests/wpt/css-tests/css-transforms-1_dev/html/css-transform-3d-rotate3d-Y-positive.htm
View file

@ -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;
}

25
tests/wpt/css-tests/css-transforms-1_dev/html/css-transform-3d-rotate3d-Z-negative.htm
View file

@ -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>

25
tests/wpt/css-tests/css-transforms-1_dev/html/css-transform-3d-rotate3d-Z-positive.htm
View file

@ -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>

11
tests/wpt/css-tests/css-transforms-1_dev/html/css-transform-3d-rotateX-negative.htm
View file

@ -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;
}

11
tests/wpt/css-tests/css-transforms-1_dev/html/css-transform-3d-rotateX-positive.htm
View file

@ -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;
}

13
tests/wpt/css-tests/css-transforms-1_dev/html/css-transform-3d-rotateY-negative.htm
View file

@ -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;
}

13
tests/wpt/css-tests/css-transforms-1_dev/html/css-transform-3d-rotateY-positive.htm
View file

@ -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;
}

25
tests/wpt/css-tests/css-transforms-1_dev/html/css-transform-3d-rotateZ-negative.htm
View file

@ -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>

25
tests/wpt/css-tests/css-transforms-1_dev/html/css-transform-3d-rotateZ-positive.htm
View file

@ -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>

30
tests/wpt/css-tests/css-transforms-1_dev/html/css-transform-3d-transform-style.htm
View file

@ -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">

31
tests/wpt/css-tests/css-transforms-1_dev/html/css3-transform-rotateY.htm
View file

@ -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>

2
tests/wpt/css-tests/css-transforms-1_dev/html/perspective-containing-block-dynamic-1a.htm
View file

@ -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">

2
tests/wpt/css-tests/css-transforms-1_dev/html/perspective-containing-block-dynamic-1b.htm
View file

@ -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">

2
tests/wpt/css-tests/css-transforms-1_dev/html/reference/2d-rotate-notref.htm
View file

@ -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;

2
tests/wpt/css-tests/css-transforms-1_dev/html/reference/2d-rotate-ref.htm
View file

@ -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;

39
tests/wpt/css-tests/css-transforms-1_dev/html/reference/background-attachment-fixed-inside-transform-1-ref.htm Normal file
View file

@ -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>

2
tests/wpt/css-tests/css-transforms-1_dev/html/reference/containing-block-dynamic-1-ref.htm
View file

@ -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 }

14
tests/wpt/css-tests/css-transforms-1_dev/html/reference/css-transform-3d-rotateX-ref.htm
View file

@ -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>

27
tests/wpt/css-tests/css-transforms-1_dev/html/reference/css-transform-3d-rotateY-ref.htm
View file

@ -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>

31
tests/wpt/css-tests/css-transforms-1_dev/html/reference/css-transform-3d-rotateZ-ref.htm
View file

@ -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>

33
tests/wpt/css-tests/css-transforms-1_dev/html/reference/css-transform-3d-transform-style-ref.htm
View file

@ -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>

18
tests/wpt/css-tests/css-transforms-1_dev/html/reference/css3-transform-rotateY-ref.htm
View file

@ -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>

2
tests/wpt/css-tests/css-transforms-1_dev/html/reference/rotate_45deg-ref.htm
View file

@ -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;

2
tests/wpt/css-tests/css-transforms-1_dev/html/reference/rotate_x_45deg-ref.htm
View file

@ -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;

2
tests/wpt/css-tests/css-transforms-1_dev/html/reference/rotate_y_45deg-ref.htm
View file

@ -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;

2
tests/wpt/css-tests/css-transforms-1_dev/html/reference/skew-test1-ref.htm
View file

@ -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>

4
tests/wpt/css-tests/css-transforms-1_dev/html/reference/support/support/README
View file

@ -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.

21
tests/wpt/css-tests/css-transforms-1_dev/html/reference/transform-origin-013-ref.htm Normal file
View file

@ -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>

2
tests/wpt/css-tests/css-transforms-1_dev/html/reference/transform-propagate-inherit-boolean-ref.htm
View file

@ -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 {

1
tests/wpt/css-tests/css-transforms-1_dev/html/reference/transform3d-rotatex-ref.htm
View file

@ -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;

2
tests/wpt/css-tests/css-transforms-1_dev/html/reference/translate-ref.htm
View file

@ -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;

2
tests/wpt/css-tests/css-transforms-1_dev/html/reference/ttwf-reftest-transform-skewx-001.htm
View file

@ -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>

2
tests/wpt/css-tests/css-transforms-1_dev/html/reference/ttwf-reftest-transform-skewy-001.htm
View file

@ -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>

28
tests/wpt/css-tests/css-transforms-1_dev/html/reftest-toc.htm
View file

@ -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">&#x2260;</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">

10
tests/wpt/css-tests/css-transforms-1_dev/html/reftest.list
View file

@ -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

2
tests/wpt/css-tests/css-transforms-1_dev/html/rotate_45deg.htm
View file

@ -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">

2
tests/wpt/css-tests/css-transforms-1_dev/html/rotate_x_45deg.htm
View file

@ -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">

2
tests/wpt/css-tests/css-transforms-1_dev/html/rotate_y_45deg.htm
View file

@ -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">

2
tests/wpt/css-tests/css-transforms-1_dev/html/scalex.htm
View file

@ -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">

2
tests/wpt/css-tests/css-transforms-1_dev/html/scaley.htm
View file

@ -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">

2
tests/wpt/css-tests/css-transforms-1_dev/html/skew-test1.htm
View file

@ -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>

4
tests/wpt/css-tests/css-transforms-1_dev/html/support/support/README
View file

@ -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.

6
tests/wpt/css-tests/css-transforms-1_dev/html/toc.htm
View file

@ -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 -

2
tests/wpt/css-tests/css-transforms-1_dev/html/transform-containing-block-dynamic-1a.htm
View file

@ -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">

2
tests/wpt/css-tests/css-transforms-1_dev/html/transform-containing-block-dynamic-1b.htm
View file

@ -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">

32
tests/wpt/css-tests/css-transforms-1_dev/html/transform-origin-013.htm Normal file
View file

@ -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>

2
tests/wpt/css-tests/css-transforms-1_dev/html/transform-propagate-inherit-boolean-001.htm
View file

@ -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

1
tests/wpt/css-tests/css-transforms-1_dev/html/transform3d-rotatex-perspective-001.htm
View file

@ -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;

2
tests/wpt/css-tests/css-transforms-1_dev/html/translate.htm
View file

@ -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">

2
tests/wpt/css-tests/css-transforms-1_dev/html/ttwf-transform-skewx-001.htm
View file

@ -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>

2
tests/wpt/css-tests/css-transforms-1_dev/html/ttwf-transform-skewy-001.htm
View file

@ -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>

43
tests/wpt/css-tests/css-transforms-1_dev/html/video-001.htm
View file

@ -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>&nbsp;</p>
</div>
</body></html>