Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(68)

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: LayoutTests/transforms/2d/transform-2d-properties.html

Issue 1158603003: CSS Independent Transform Properties (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: Created 5 years, 6 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « LayoutTests/animations/svg-attribute-interpolation/resources/interpolation-test.js ('k') | Source/core/animation/css/CSSAnimatableValueFactory.cpp » ('j') | Source/core/animation/css/CSSAnimatableValueFactory.cpp » ('J')
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: LayoutTests/transforms/2d/transform-2d-properties.html
diff --git a/LayoutTests/transforms/2d/transform-2d-properties.html b/LayoutTests/transforms/2d/transform-2d-properties.html
new file mode 100644
index 0000000000000000000000000000000000000000..dbb5cf9d4c5c1f2eee9b26f1cc7361decea60a0f
--- /dev/null
+++ b/LayoutTests/transforms/2d/transform-2d-properties.html
@@ -0,0 +1,156 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
+ "http://www.w3.org/TR/html4/loose.dtd">
+
+<html lang="en">
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+ <title>2D Transform Tests Separated</title>
+ <style type="text/css" media="screen">
+ .container {
+ height: 100px;
+ width: 200px;
+ margin: 30px;
+ outline: 1px solid black;
+ }
+ .box {
+ height: 100%;
+ width: 100%;
+ background-color: green;
+ transform: rotate(90deg);
+ }
+ #results {
+ margin-top: 100px;
+ }
+ </style>
+ <script type="text/javascript" charset="utf-8">
+ if (window.testRunner) {
+ testRunner.dumpAsText();
+ testRunner.waitUntilDone();
+ }
+
+ var gTests = [
+ // nothing
+ //{ 'transform' : 'none', 'result' : 'none' },
+ //{ 'transform' : 'inherit', 'result' : 'none' }, // parent element doesn't have transform
Eric Willigers 2015/06/05 01:58:22 Delete this commented out code. You might want a s
+
+ // translate
+ { 'translate' : '', 'result' : 'none' },
Eric Willigers 2015/06/05 01:58:22 0px
+ { 'translate' : '80px 90px', 'result' : '80px, 90px' },
+ { 'translate' : '100% 3em', 'result' : '200px, 90px' }, // depends on font size
Eric Willigers 2015/06/05 01:58:22 Your test should set the font-size property.
+ { 'translate' : '50px', 'result' : '50px 0px' },
+
+ // scale
+ { 'scale' : '', 'result' : 'none' },
Eric Willigers 2015/06/05 01:58:22 1
+ { 'scale' : '1.2', 'result' : '1.2' },
+ { 'scale' : '1.2 0.8', 'result' : '1.2, 0.8' },
+ { 'scale' : '-1.2 -0.8', 'result' : '-1.2, -0.8' },
+
+ // rotate
+ { 'rotate' : '', 'result' : 'none' },
Eric Willigers 2015/06/05 01:58:22 0deg
+ { 'rotate' : '45deg', 'result' : '45deg' },
+ { 'rotate' : '90deg', 'result' : '90deg' },
+ { 'rotate' : '-90deg', 'result' : '-90deg' },
+ { 'rotate' : '180deg', 'result' : '180deg' },
+ { 'rotate' : '200grad', 'result' : '180deg' },
+ { 'rotate' : '1.2rad', 'result' : '68.754935deg' }, // Precision level?
+
+ { 'rotate' : '0.25turn', 'result' : '90deg' },
+ { 'rotate' : '0.5turn', 'result' : '180deg' },
+ { 'rotate' : '1.5turn', 'result' : '540deg' },
+
+ // invalid translate
+ { 'translate' : ',12deg', 'result' : 'none' }, // has comma
+ { 'translate' : '12deg,', 'result' : 'none' }, // has comma
+ { 'translate' : '12deg +', 'result' : 'none' }, // has plus
+ { 'translate' : '((50, 20))', 'result' : 'none' }, // bad syntax
+ { 'translate' : 'salad(10)', 'result' : 'none' }, // invalid function
+
+ { 'translate' : '50, 20', 'result' : 'none' }, // missing units
+ { 'translate' : '10px 20px 30px', 'result' : 'none' }, // too many arguments
+ { 'translate' : '10px 20px 30px 40px', 'result' : 'none' }, // too many arguments
+ { 'translate' : '10smidgens', 'result' : 'none' }, // invalid units
+ { 'translate' : '10px 10smidgens', 'result' : 'none' }, // invalid units
+
+ // invalid scale
+ { 'scale' : ',12deg', 'result' : 'none' }, // has comma
+ { 'scale' : '12deg,', 'result' : 'none' }, // has comma
+ { 'scale' : '12deg +', 'result' : 'none' }, // has plus
+ { 'scale' : '((50, 20))', 'result' : 'none' }, // bad syntax
+ { 'scale' : 'salad(10)', 'result' : 'none' }, // invalid function
+ { 'scale' : '2px 2px', 'result' : 'none' }, // has units
+ { 'scale' : '2 2px', 'result' : 'none' }, // has units
+ { 'scale' : '1 2 3', 'result' : 'none' }, // too many arguments
+ { 'scale' : '2smidgens', 'result' : 'none' }, // invalid units
+ { 'scale' : '2 2smidgens', 'result' : 'none' }, // invalid units
+
+ // invalid rotate
+ { 'rotate' : ',12deg', 'result' : 'none' }, // has comma
+ { 'rotate' : '12deg,', 'result' : 'none' }, // has comma
+ { 'rotate' : '12deg +', 'result' : 'none' }, // has plus
+ { 'rotate' : '((50, 20))', 'result' : 'none' }, // bad syntax
+ { 'rotate' : 'salad(10)', 'result' : 'none' }, // invalid function
+ { 'rotate' : '10', 'result' : 'none' }, // no units
+ { 'rotate' : '10deg 20deg', 'result' : 'none' }, // too many arguments
+ { 'rotate' : '2turns', 'result' : 'none' }, // invalid units -- 'turn' not 'turns'
+ { 'rotate' : '2spins', 'result' : 'none' }, // invalid units
+ { 'rotate' : '2 2spins', 'result' : 'none' }, // invalid units
+ ];
+
+ function testTransforms()
+ {
+ var testBox = document.getElementById('test-box');
+ var resultsBox = document.getElementById('results');
+
+ gTests.forEach(function(curTest) {
+ testBox.style.translate = 'none';
+ testBox.style.rotate = 'none';
+ testBox.style.scale = 'none';
+
+ var computedTransform = 'none';
+ var transform = 'translate';
+
+ if ('translate' in curTest) {
+ testBox.translate = curTest.translate;
+ computedTransform = window.getComputedStyle(testbox).translate;
+
+ } else if ('scale' in curTest) {
+ testBox.scale = curTest.scale;
+ computedTransform = window.getComputedStyle(testbox).scale;
+ transform = 'scale';
+
+ } else if ('rotate' in curTest) {
+ testBox.rotate = curTest.rotate;
+ computedTransform = window.getComputedStyle(testbox).rotate;
+ transform = 'rotate';
+ }
+
+ var success = curTest.result === computedTransform;
+ var result = transform + ' "<code>' + curTest[transform] + '</code>" expected "<code>' + curTest.result + '</code>" : ';
+ if (success)
+ result += 'PASS';
+ else
+ result = 'FAIL';
+ resultsBox.innerHTML += result + '<br>';
+ });
+ }
+
+ function runTests()
+ {
+ testTransforms();
+
+ if (window.testRunner)
+ testRunner.notifyDone();
+ }
+
+ </script>
+</head>
+<body onload="runTests()">
+
+ <div class="container">
+ <div id="test-box" class="box"></div>
+ </div>
+
+ <div id="results">
+ </div>
+</body>
+</html>
« no previous file with comments | « LayoutTests/animations/svg-attribute-interpolation/resources/interpolation-test.js ('k') | Source/core/animation/css/CSSAnimatableValueFactory.cpp » ('j') | Source/core/animation/css/CSSAnimatableValueFactory.cpp » ('J')

Powered by Google App Engine
This is Rietveld 408576698