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

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: third_party/WebKit/LayoutTests/css3/motion-path/offset.html

Issue 2368013002: [WIP] CSS Motion Path: offset shorthand ready for position and anchor
Patch Set: offset-anchor default is not auto Created 4 years, 3 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 | « third_party/WebKit/LayoutTests/css-parser/offset-parsing.html ('k') | third_party/WebKit/Source/core/css/CSSProperties.in » ('j') | third_party/WebKit/Source/core/css/CSSProperties.in » ('J')
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: third_party/WebKit/LayoutTests/css3/motion-path/offset.html
diff --git a/third_party/WebKit/LayoutTests/css3/motion-path/offset.html b/third_party/WebKit/LayoutTests/css3/motion-path/offset.html
index 079bc44ac18bdd6adb88af2cdacdbad80dff31a0..04c5fbb7fad95f4b45296931d7d2e2be636db298 100644
--- a/third_party/WebKit/LayoutTests/css3/motion-path/offset.html
+++ b/third_party/WebKit/LayoutTests/css3/motion-path/offset.html
@@ -1,69 +1,146 @@
<!DOCTYPE html>
-<html>
-<head>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
-<style>
-#div2 {
- offset: none 50% auto 400grad;
+<div id="container"></div>
+<script>
+"use strict";
+
+var counter = 0;
+var container = document.getElementById('container');
+
+function computedStyleFromDefault() {
+ var div = document.createElement('div');
+ container.appendChild(div);
+
+ return getComputedStyle(div, null);
}
-#div3 {
- offset: path('M 10 20 h 30 v 150') 70px 0rad;
+
+function computedStyleFromRule(offset) {
+ var id = 't' + counter++;
+ var style = document.createElement('style');
+ style.innerHTML = '#' + id + ' { offset: ' + offset + '; }';
+ container.appendChild(style);
+
+ var div = document.createElement('div');
+ div.id = id;
+ container.appendChild(div);
+
+ return getComputedStyle(div, null);
}
-#div4 {
- offset: none 10px 90deg reverse;
+
+function styleFromInline(offset) {
+ var div = document.createElement('div');
+ div.style = 'offset: ' + offset + ';';
+ container.appendChild(div);
+
+ return div.style;
}
-</style>
-</head>
-<body>
-<div id="div1"></div>
-<div id="div2"></div>
-<div id="div3"></div>
-<div id="div4"></div>
-<span id="span1" style="offset: path('M 1 2 V 3') 4px 5deg"></span>
-<script>
-"use strict";
test(function() {
- assert_equals(getComputedStyle(div1, null).offsetPath, 'none');
- assert_equals(getComputedStyle(div1, null).offsetDistance, '0px');
- assert_equals(getComputedStyle(div1, null).offsetRotation, 'auto 0deg');
- assert_equals(getComputedStyle(div1, null).offset, 'none 0px auto 0deg');
- assert_equals(getComputedStyle(div1, null).transform, 'none');
+ var computedStyle = computedStyleFromDefault();
+ assert_equals(computedStyle.offsetPath, 'none');
+ assert_equals(computedStyle.offsetDistance, '0px');
+ assert_equals(computedStyle.offsetRotation, 'auto 0deg');
+ assert_equals(computedStyle.offset, 'none 0px auto 0deg');
+ assert_equals(computedStyle.transform, 'none');
}, 'offset default is none 0px auto 0deg');
test(function() {
- assert_equals(getComputedStyle(div2, null).offsetPath, 'none');
- assert_equals(getComputedStyle(div2, null).offsetDistance, '50%');
- assert_equals(getComputedStyle(div2, null).offsetRotation, 'auto 360deg');
- assert_equals(getComputedStyle(div2, null).offset, 'none 50% auto 360deg');
- assert_equals(getComputedStyle(div2, null).transform, 'none');
+ var computedStyle = computedStyleFromRule("none 50% auto 400grad");
+ assert_equals(computedStyle.offsetPath, 'none');
+ assert_equals(computedStyle.offsetDistance, '50%');
+ assert_equals(computedStyle.offsetRotation, 'auto 360deg');
+ assert_equals(computedStyle.offset, 'none 50% auto 360deg');
+ assert_equals(computedStyle.transform, 'none');
}, 'offset supports various angle units');
test(function() {
- assert_equals(getComputedStyle(div3, null).offsetPath, "path('M 10 20 h 30 v 150')");
- assert_equals(getComputedStyle(div3, null).offsetDistance, '70px');
- assert_equals(getComputedStyle(div3, null).offsetRotation, '0deg');
- assert_equals(getComputedStyle(div3, null).offset, "path('M 10 20 h 30 v 150') 70px 0deg");
- assert_equals(getComputedStyle(div3, null).transform, 'matrix(1, 0, 0, 1, 0, 0)');
+ var computedStyle = computedStyleFromRule("path('M 10 20 h 30 v 150') 70px 0rad");
+ assert_equals(computedStyle.offsetPath, "path('M 10 20 h 30 v 150')");
+ assert_equals(computedStyle.offsetDistance, '70px');
+ assert_equals(computedStyle.offsetRotation, '0deg');
+ assert_equals(computedStyle.offset, "path('M 10 20 h 30 v 150') 70px 0deg");
+ assert_equals(computedStyle.transform, 'matrix(1, 0, 0, 1, 0, 0)');
}, 'offset supports SVG path data');
test(function() {
- assert_equals(getComputedStyle(div4, null).offsetPath, 'none');
- assert_equals(getComputedStyle(div4, null).offsetDistance, '10px');
- assert_equals(getComputedStyle(div4, null).offsetRotation, 'auto 270deg');
- assert_equals(getComputedStyle(div4, null).offset, 'none 10px auto 270deg');
- assert_equals(getComputedStyle(div4, null).transform, 'none');
-}, 'offset property data can be supplied in any order');
+ var computedStyle = computedStyleFromRule("none 90deg reverse 10px");
+ assert_equals(computedStyle.offsetPath, 'none');
+ assert_equals(computedStyle.offsetDistance, '10px');
+ assert_equals(computedStyle.offsetRotation, 'auto 270deg');
+ assert_equals(computedStyle.offset, 'none 10px auto 270deg');
+ assert_equals(computedStyle.transform, 'none');
+}, 'offset rotation can be supplied before distance');
test(function() {
- assert_equals(span1.style.offsetPath, "path('M 1 2 V 3')");
- assert_equals(span1.style.offsetDistance, '4px');
- assert_equals(span1.style.offsetRotation, '5deg');
- assert_equals(span1.style.offset, "path('M 1 2 V 3') 4px 5deg");
- assert_equals(span1.style.transform, '');
+ var computedStyle = computedStyleFromRule("none");
+ assert_equals(computedStyle.offsetPath, 'none');
+ assert_equals(computedStyle.offsetDistance, '0px');
+ assert_equals(computedStyle.offsetRotation, 'auto 0deg');
+ assert_equals(computedStyle.offset, 'none 0px auto 0deg');
+ assert_equals(computedStyle.transform, 'none');
+}, 'offset property can be path only');
+
+test(function() {
+ var computedStyle = computedStyleFromRule("70px 80px");
+ assert_equals(computedStyle.offsetPosition, '70px 80px');
+ assert_equals(computedStyle.offsetPath, 'none');
+ assert_equals(computedStyle.offsetDistance, '0px');
+ assert_equals(computedStyle.offsetRotation, 'auto 0deg');
+ assert_equals(computedStyle.offsetAnchor, '50% 50%');
+ assert_equals(computedStyle.offset, '70px 80px none 0px auto 0deg');
+ assert_equals(computedStyle.transform, 'none');
+}, 'offset property can be position only');
+
+test(function() {
+ var computedStyle = computedStyleFromRule("top right / auto");
+ assert_equals(computedStyle.offsetPosition, '100% 0%');
+ assert_equals(computedStyle.offsetPath, 'none');
+ assert_equals(computedStyle.offsetDistance, '0px');
+ assert_equals(computedStyle.offsetRotation, 'auto 0deg');
+ assert_equals(computedStyle.offsetAnchor, 'auto');
+ assert_equals(computedStyle.offset, '100% 0% none 0px auto 0deg / auto');
+ assert_equals(computedStyle.transform, 'none');
+}, 'offset property can have position and anchor');
+
+test(function() {
+ var computedStyle = computedStyleFromRule("right 60deg");
+ assert_equals(computedStyle.offsetPosition, '100% 50%');
+ assert_equals(computedStyle.offsetPath, 'none');
+ assert_equals(computedStyle.offsetDistance, '0px');
+ assert_equals(computedStyle.offsetRotation, '60deg');
+ assert_equals(computedStyle.offsetAnchor, '50% 50%');
+ assert_equals(computedStyle.offset, '100% 50% none 0px 60deg');
+ assert_equals(computedStyle.transform, 'none');
+}, 'offset can be position and rotation');
+
+test(function() {
+ var style = styleFromInline("path('M 1 2 V 3') 4px 400grad auto");
+ assert_equals(style.offsetPath, "path('M 1 2 V 3')");
+ assert_equals(style.offsetDistance, '4px');
+ assert_equals(style.offsetRotation, 'auto 400grad');
+ assert_equals(style.offset, "path('M 1 2 V 3') 4px auto 400grad");
+ assert_equals(style.transform, '');
}, 'offset style can be set inline');
+test(function() {
+ var style = styleFromInline("path('M 1 2 V 3') 50%");
+ assert_equals(style.offsetPath, "path('M 1 2 V 3')");
+ assert_equals(style.offsetDistance, '50%');
+ assert_equals(style.offsetRotation, 'auto');
+ assert_equals(style.offsetAnchor, '50% 50%');
+ assert_equals(style.offset, "path('M 1 2 V 3') 50% auto");
+ assert_equals(style.transform, '');
+}, 'offset style set inline can have path and distance');
+
+test(function() {
+ var style = styleFromInline("bottom path('M 1 2 V 3') 10% 400grad / left");
+ assert_equals(style.offsetPosition, "center bottom");
+ assert_equals(style.offsetPath, "path('M 1 2 V 3')");
+ assert_equals(style.offsetDistance, '10%');
+ assert_equals(style.offsetRotation, '400grad');
+ assert_equals(style.offsetAnchor, 'left center');
+ assert_equals(style.offset, "center bottom path('M 1 2 V 3') 10% 400grad/left center");
+ assert_equals(style.transform, '');
+}, 'offset style set inline can have position and anchor');
</script>
-</body>
-</html>
« no previous file with comments | « third_party/WebKit/LayoutTests/css-parser/offset-parsing.html ('k') | third_party/WebKit/Source/core/css/CSSProperties.in » ('j') | third_party/WebKit/Source/core/css/CSSProperties.in » ('J')

Powered by Google App Engine
This is Rietveld 408576698