Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #9378 from w3c/sync_0c2ec6b588179fc570e0d450ae34d2…
…af912aa771 c. Clone reftests from w3c-css to web-platform-test
- Loading branch information
Showing
8 changed files
with
378 additions
and
0 deletions.
There are no files selected for viewing
90 changes: 90 additions & 0 deletions
90
css/css-transforms/individual-transform/individual-transform-1-ref.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,90 @@ | ||
<!DOCTYPE html> | ||
<html> | ||
<head> | ||
<meta charset="utf-8"> | ||
<title>Individual transform: compare individual transform with transform functions</title> | ||
<link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com"> | ||
<link rel="author" title="Mozilla" href="https://www.mozilla.org"> | ||
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#individual-transforms"> | ||
<meta name="assert" content="Tests whether individaul transform works correctlyi by compare the rendering result with transfrom functions of the 'transform' property."/> | ||
<style> | ||
div { | ||
position: fixed; | ||
width: 100px; | ||
height: 100px; | ||
transform-origin: 0 0; | ||
border-style: solid; | ||
border-width: 10px 0px 10px 0px; | ||
border-color: lime; | ||
} | ||
.row_1 { | ||
top: 100px; | ||
} | ||
.scale_1{ | ||
left: 100px; | ||
width: 50px; | ||
height: 100px; | ||
transform: scaleX(2); | ||
} | ||
.translate_1 { | ||
left: 150px; | ||
transform: translateX(150px); | ||
} | ||
.rotate_1 { | ||
left: 450px; | ||
transform-origin: 50% 50%; | ||
transform: rotate(90deg); | ||
} | ||
|
||
.row_2 { | ||
top: 250px; | ||
} | ||
.scale_2{ | ||
left: 100px; | ||
width: 50px; | ||
height: 50px; | ||
transform: scale(2, 2); | ||
} | ||
.translate_2 { | ||
left: 150px; | ||
top: 200px; | ||
transform: translate(150px, 50px); | ||
} | ||
.rotate_2 { | ||
left: 450px; | ||
transform-origin: 50% 50%; | ||
transform: rotate3d(0, 0, 1, 90deg); | ||
} | ||
.row_3 { | ||
transform: perspective(500px); | ||
top: 400px; | ||
} | ||
.scale_3{ | ||
left: 100px; | ||
width: 50px; | ||
height: 50px; | ||
transform: scale3d(2, 2, 2); | ||
} | ||
.translate_3 { | ||
left: 150px; | ||
transform: translate3d(150px, 10px, 10px); | ||
} | ||
.rotate_3 { | ||
left: 450px; | ||
transform-origin: 50% 50%; | ||
transform: rotate3d(0, 1, 0, 45deg); | ||
} | ||
</style> | ||
</head> | ||
<body> | ||
<div class="scale_1 row_1"></div> | ||
<div class="translate_1 row_1"></div> | ||
<div class="rotate_1 row_1"></div> | ||
<div class="scale_2 row_2"></div> | ||
<div class="translate_2 row_2"></div> | ||
<div class="rotate_2 row_2"></div> | ||
<div class="scale_3 row_3"></div> | ||
<div class="translate_3 row_3"></div> | ||
<div class="rotate_3 row_3"></div> | ||
</body> | ||
</html> |
100 changes: 100 additions & 0 deletions
100
css/css-transforms/individual-transform/individual-transform-1.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,100 @@ | ||
<!DOCTYPE html> | ||
<html> | ||
<head> | ||
<meta charset="utf-8"> | ||
<title>Individual transform: compare individual transform with transform functions</title> | ||
<link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com"> | ||
<link rel="author" title="Mozilla" href="https://www.mozilla.org"> | ||
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#individual-transforms"> | ||
<meta name="assert" content="Tests whether individaul transform works correctlyi by compare the rendering result with transfrom functions of the 'transform' property."/> | ||
<link rel="match" href="individual-transform-1-ref.html"> | ||
<style> | ||
div { | ||
position: fixed; | ||
width: 100px; | ||
height: 100px; | ||
transform-origin: 0 0; | ||
border-style: solid; | ||
border-width: 10px 0px 10px 0px; | ||
border-color: lime; | ||
} | ||
.row_1 { | ||
top: 100px; | ||
} | ||
.scale_1{ | ||
left: 100px; | ||
width: 50px; | ||
height: 100px; | ||
/* test 'scale: <number>' */ | ||
scale: 2; | ||
} | ||
.translate_1 { | ||
left: 150px; | ||
/* test 'translate: <length-percentage>' */ | ||
translate: 150px; | ||
} | ||
.rotate_1 { | ||
left: 450px; | ||
transform-origin: 50% 50%; | ||
/* test 'rota: te<angle>' */ | ||
rotate: 90deg; | ||
} | ||
|
||
.row_2 { | ||
top: 250px; | ||
} | ||
.scale_2{ | ||
left: 100px; | ||
width: 50px; | ||
height: 50px; | ||
/* test 'scale: <number>{2}'' */ | ||
scale: 2 2; | ||
} | ||
.translate_2 { | ||
left: 150px; | ||
top: 200px; | ||
/* test 'translate: <length-percentage><length-percentage>' */ | ||
translate: 150px 50px; | ||
} | ||
.rotate_2 { | ||
left: 450px; | ||
transform-origin: 50% 50%; | ||
/* test 'rotate: <number>{3}<angle>'*/ | ||
rotate: 0 0 1 90deg; | ||
} | ||
.row_3 { | ||
transform: perspective(500px); | ||
top: 400px; | ||
} | ||
.scale_3{ | ||
left: 100px; | ||
width: 50px; | ||
height: 50px; | ||
/* test 'scale: <number>{3}'' */ | ||
scale: 2 2 2; | ||
} | ||
.translate_3 { | ||
left: 150px; | ||
/* test 'translate: <length-percentage><length>' */ | ||
translate: 150px 10px 10px; | ||
} | ||
.rotate_3 { | ||
left: 450px; | ||
transform-origin: 50% 50%; | ||
/* test 'rotate: <number>{3}<angle>'*/ | ||
rotate: 0 1 0 45deg; | ||
} | ||
</style> | ||
</head> | ||
<body> | ||
<div class="scale_1 row_1"></div> | ||
<div class="translate_1 row_1"></div> | ||
<div class="rotate_1 row_1"></div> | ||
<div class="scale_2 row_2"></div> | ||
<div class="translate_2 row_2"></div> | ||
<div class="rotate_2 row_2"></div> | ||
<div class="scale_3 row_3"></div> | ||
<div class="translate_3 row_3"></div> | ||
<div class="rotate_3 row_3"></div> | ||
</body> | ||
</html> |
30 changes: 30 additions & 0 deletions
30
css/css-transforms/individual-transform/individual-transform-2-ref.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,30 @@ | ||
<!DOCTYPE html> | ||
<html> | ||
<head> | ||
<meta charset="utf-8"> | ||
<title>Individual transform: combine individual transform properties</title> | ||
<link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com"> | ||
<link rel="author" title="Mozilla" href="https://www.mozilla.org"> | ||
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#individual-transforms"> | ||
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#ctm"> | ||
<meta name="assert" content="Tests that we combine transforms in the correct order."/> | ||
<style> | ||
div { | ||
position: fixed; | ||
width: 100px; | ||
height: 100px; | ||
top: 200px; | ||
left: 200px; | ||
transform-origin: 0 0; | ||
border-style: solid; | ||
border-width: 10px 0px 10px 0px; | ||
border-color: lime; | ||
transform: translate(50px, 50px) rotate(45deg) scale(2, 2); | ||
} | ||
|
||
</style> | ||
</head> | ||
<body> | ||
<div></div> | ||
</body> | ||
</html> |
32 changes: 32 additions & 0 deletions
32
css/css-transforms/individual-transform/individual-transform-2a.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,32 @@ | ||
<!DOCTYPE html> | ||
<html> | ||
<head> | ||
<meta charset="utf-8"> | ||
<title>Individual transform: combine individual transform properties</title> | ||
<link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com"> | ||
<link rel="author" title="Mozilla" href="https://www.mozilla.org"> | ||
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#individual-transforms"> | ||
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#ctm"> | ||
<meta name="assert" content="Tests that we combine transforms in the correct order."/> | ||
<link rel="match" href="individual-transform-2-ref.html"> | ||
<style> | ||
div { | ||
position: fixed; | ||
width: 100px; | ||
height: 100px; | ||
top: 200px; | ||
left: 200px; | ||
transform-origin: 0 0; | ||
border-style: solid; | ||
border-width: 10px 0px 10px 0px; | ||
border-color: lime; | ||
translate: 50px 50px; | ||
rotate: 45deg; | ||
scale: 2 2; | ||
} | ||
</style> | ||
</head> | ||
<body> | ||
<div></div> | ||
</body> | ||
</html> |
32 changes: 32 additions & 0 deletions
32
css/css-transforms/individual-transform/individual-transform-2b.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,32 @@ | ||
<!DOCTYPE html> | ||
<html> | ||
<head> | ||
<meta charset="utf-8"> | ||
<title>Individual transform: combine individual transform properties</title> | ||
<link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com"> | ||
<link rel="author" title="Mozilla" href="https://www.mozilla.org"> | ||
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#individual-transforms"> | ||
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#ctm"> | ||
<meta name="assert" content="Tests that we combine transforms in the correct order."/> | ||
<link rel="match" href="individual-transform-2-ref.html"> | ||
<style> | ||
div { | ||
position: fixed; | ||
width: 100px; | ||
height: 100px; | ||
top: 200px; | ||
left: 200px; | ||
transform-origin: 0 0; | ||
border-style: solid; | ||
border-width: 10px 0px 10px 0px; | ||
border-color: lime; | ||
rotate: 45deg; | ||
scale: 2 2; | ||
translate: 50px 50px; | ||
} | ||
</style> | ||
</head> | ||
<body> | ||
<div></div> | ||
</body> | ||
</html> |
32 changes: 32 additions & 0 deletions
32
css/css-transforms/individual-transform/individual-transform-2c.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,32 @@ | ||
<!DOCTYPE html> | ||
<html> | ||
<head> | ||
<meta charset="utf-8"> | ||
<title>Individual transform: combine individual transform properties</title> | ||
<link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com"> | ||
<link rel="author" title="Mozilla" href="https://www.mozilla.org"> | ||
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#individual-transforms"> | ||
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#ctm"> | ||
<meta name="assert" content="Tests that we combine transforms in the correct order."/> | ||
<link rel="match" href="individual-transform-2-ref.html"> | ||
<style> | ||
div { | ||
position: fixed; | ||
width: 100px; | ||
height: 100px; | ||
top: 200px; | ||
left: 200px; | ||
transform-origin: 0 0; | ||
border-style: solid; | ||
border-width: 10px 0px 10px 0px; | ||
border-color: lime; | ||
translate: 50px 50px; | ||
rotate: 45deg; | ||
transform: scale(2, 2); | ||
} | ||
</style> | ||
</head> | ||
<body> | ||
<div></div> | ||
</body> | ||
</html> |
31 changes: 31 additions & 0 deletions
31
css/css-transforms/individual-transform/individual-transform-2d.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,31 @@ | ||
<!DOCTYPE html> | ||
<html> | ||
<head> | ||
<meta charset="utf-8"> | ||
<title>Individual transform: combine individual transform properties</title> | ||
<link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com"> | ||
<link rel="author" title="Mozilla" href="https://www.mozilla.org"> | ||
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#individual-transforms"> | ||
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#ctm"> | ||
<meta name="assert" content="Tests that we combine transforms in the correct order."/> | ||
<link rel="match" href="individual-transform-2-ref.html"> | ||
<style> | ||
div { | ||
position: fixed; | ||
width: 100px; | ||
height: 100px; | ||
top: 200px; | ||
left: 200px; | ||
transform-origin: 0 0; | ||
border-style: solid; | ||
border-width: 10px 0px 10px 0px; | ||
border-color: lime; | ||
translate: 50px 50px; | ||
transform: rotate(45deg) scale(2, 2); | ||
} | ||
</style> | ||
</head> | ||
<body> | ||
<div></div> | ||
</body> | ||
</html> |
31 changes: 31 additions & 0 deletions
31
css/css-transforms/individual-transform/individual-transform-2e.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,31 @@ | ||
<!DOCTYPE html> | ||
<html> | ||
<head> | ||
<meta charset="utf-8"> | ||
<title>Individual transform: combine individual transform properties</title> | ||
<link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com"> | ||
<link rel="author" title="Mozilla" href="https://www.mozilla.org"> | ||
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#individual-transforms"> | ||
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#ctm"> | ||
<meta name="assert" content="Tests that we combine transforms in the correct order."/> | ||
<link rel="match" href="individual-transform-2-ref.html"> | ||
<style> | ||
div { | ||
position: fixed; | ||
width: 100px; | ||
height: 100px; | ||
top: 200px; | ||
left: 200px; | ||
transform-origin: 0 0; | ||
border-style: solid; | ||
border-width: 10px 0px 10px 0px; | ||
border-color: lime; | ||
translate: 0px 50px; | ||
transform: translateX(50px) rotate(45deg) scale(2, 2); | ||
} | ||
</style> | ||
</head> | ||
<body> | ||
<div></div> | ||
</body> | ||
</html> |