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

Issues Search
    My Issues | Starred     Open | Closed | All

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

Issue 2247773004: [WIP] CSS Motion Path: offset-anchor and offset-position Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: offsetAnchor Created 4 years, 4 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/css3/motion-path/motion-rotation-overflow-crash.html ('k') | third_party/WebKit/LayoutTests/css3/motion-path/offset-anchor.html » ('j') | no next file with comments »
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
new file mode 100644
index 0000000000000000000000000000000000000000..41f507dcaf73ba00f04c01861cae7c8e8f9f62b0
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/css3/motion-path/offset.html
@@ -0,0 +1,180 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<style>
+#div2 {
+ offset: none 50% auto auto auto 400grad;
+}
+#div3 {
+ offset: path('M 10 20 h 30 v 150') 70px 10px 20px 30px 40px 0rad;
+}
+#div4 {
+ offset: none 10px 90deg reverse;
+}
+#div5 {
+ offset: path('m 0 0 h 20') 10px center center auto;
+}
+#div6 {
+ offset: path('m 0 0 h 20') 10px center 30% center auto;
+}
+#div7 {
+ offset: path('m 0 0 h 20') 10px left 30% bottom right auto;
+}
+#div8 {
+ offset: path('m 0 0 h 20') 10px left top 30% bottom auto;
+}
+#div9 {
+ offset: path('m 0 0 h 20') 10px left center 30% bottom auto;
+}
+#div10 {
+ offset: path('m 0 0 h 20') 10px left left auto;
+}
+#div11 {
+ offset: path('m 0 0 h 20') 10px bottom bottom auto;
+}
+#div12 {
+ offset: top 10%;
+}
+</style>
+</head>
+<body>
+<div id="div1"></div>
+<div id="div2"></div>
+<div id="div3"></div>
+<div id="div4"></div>
+<div id="div5"></div>
+<div id="div6"></div>
+<div id="div7"></div>
+<div id="div8"></div>
+<div id="div9"></div>
+<div id="div10"></div>
+<div id="div11"></div>
+<div id="div12"></div>
+<span id="span1" style="offset: path('M 1 2 V 3') 4px 5deg"></span>
+<span id="span2" style="offset: path('M 1 2 V 3') 4px left bottom right top 5deg"></span>
+<span id="span3" style="offset: 30% bottom 20px"></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 auto auto 0deg');
+ assert_equals(getComputedStyle(div1, null).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 auto auto 360deg');
+ assert_equals(getComputedStyle(div2, null).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).offsetPosition, '10px 20px');
+ assert_equals(getComputedStyle(div3, null).offsetAnchor, '30px 40px');
+ assert_equals(getComputedStyle(div3, null).offsetRotation, '0deg');
+ assert_equals(getComputedStyle(div3, null).offset, "path('M 10 20 h 30 v 150') 70px 10px 20px 30px 40px 0deg");
+ assert_equals(getComputedStyle(div3, null).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 auto auto 270deg');
+ assert_equals(getComputedStyle(div4, null).transform, 'none');
+}, 'offset property data can be supplied in any order');
+
+test(function() {
+ assert_equals(getComputedStyle(div5, null).offsetPosition, '50% 50%');
+ assert_equals(getComputedStyle(div5, null).offsetAnchor, 'auto');
+ assert_equals(getComputedStyle(div5, null).offsetRotation, 'auto 0deg');
+ assert_equals(getComputedStyle(div5, null).offset, "path('m 0 0 h 20') 10px 50% 50% auto auto 0deg");
+}, 'offset position data can contain center');
+
+test(function() {
+ assert_equals(getComputedStyle(div6, null).offsetPosition, '50% 30%');
+ assert_equals(getComputedStyle(div6, null).offsetAnchor, '50% 50%');
+ assert_equals(getComputedStyle(div6, null).offsetRotation, 'auto 0deg');
+ assert_equals(getComputedStyle(div6, null).offset, "path('m 0 0 h 20') 10px 50% 30% 50% 50% auto 0deg");
+}, 'offset position data can contain center and length/percent');
+
+test(function() {
+ assert_equals(getComputedStyle(div7, null).offsetPosition, '30% 100%');
+ assert_equals(getComputedStyle(div7, null).offsetAnchor, '100% 50%');
+ assert_equals(getComputedStyle(div7, null).offsetRotation, 'auto 0deg');
+ assert_equals(getComputedStyle(div7, null).offset, "path('m 0 0 h 20') 10px 30% 100% 100% 50% auto 0deg");
+}, 'offset position data can contain edge and length/percent');
+
+test(function() {
+ assert_equals(getComputedStyle(div8, null).offsetPosition, '0% 30%');
+ assert_equals(getComputedStyle(div8, null).offsetAnchor, '50% 100%');
+ assert_equals(getComputedStyle(div8, null).offsetRotation, 'auto 0deg');
+ assert_equals(getComputedStyle(div8, null).offset, "path('m 0 0 h 20') 10px 0% 30% 50% 100% auto 0deg");
+}, 'offset position data can contain three values');
+
+test(function() {
+ assert_equals(getComputedStyle(div9, null).offsetPosition, '0% 50%');
+ assert_equals(getComputedStyle(div9, null).offsetAnchor, '30% 100%');
+ assert_equals(getComputedStyle(div9, null).offsetRotation, 'auto 0deg');
+ assert_equals(getComputedStyle(div9, null).offset, "path('m 0 0 h 20') 10px 0% 50% 30% 100% auto 0deg");
+}, 'offset anchor data can follow center');
+
+test(function() {
+ assert_equals(getComputedStyle(div10, null).offsetPosition, '0% 50%');
+ assert_equals(getComputedStyle(div10, null).offsetAnchor, '0% 50%');
+ assert_equals(getComputedStyle(div10, null).offsetRotation, 'auto 0deg');
+ assert_equals(getComputedStyle(div10, null).offset, "path('m 0 0 h 20') 10px 0% 50% 0% 50% auto 0deg");
+}, 'offset position and anchor data can be left');
+
+test(function() {
+ assert_equals(getComputedStyle(div11, null).offsetPosition, '50% 100%');
+ assert_equals(getComputedStyle(div11, null).offsetAnchor, '50% 100%');
+ assert_equals(getComputedStyle(div11, null).offsetRotation, 'auto 0deg');
+ assert_equals(getComputedStyle(div11, null).offset, "path('m 0 0 h 20') 10px 50% 100% 50% 100% auto 0deg");
+}, 'offset position and anchor data can be bottom');
+
+test(function() {
+ assert_equals(getComputedStyle(div12, null).offsetPath, 'none');
+ assert_equals(getComputedStyle(div12, null).offsetDistance, '10%');
+ assert_equals(getComputedStyle(div12, null).offsetPosition, '50% 0%');
+ assert_equals(getComputedStyle(div12, null).offsetAnchor, 'auto');
+ assert_equals(getComputedStyle(div12, null).offsetRotation, 'auto 0deg');
+ assert_equals(getComputedStyle(div12, null).offset, 'none 10% 50% 0% auto auto 0deg');
+}, 'offset position top can be followed by distance percentage');
+
+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, '');
+}, 'offset style can be set inline');
+
+test(function() {
+ assert_equals(span2.style.offsetPath, "path('M 1 2 V 3')");
+ assert_equals(span2.style.offsetDistance, '4px');
+ assert_equals(span2.style.offsetRotation, '5deg');
+ assert_equals(span2.style.offsetPosition, 'left bottom');
+ assert_equals(span2.style.offsetAnchor, 'right top');
+ assert_equals(span2.style.offset, "path('M 1 2 V 3') 4px left bottom right top 5deg");
+ assert_equals(span2.style.transform, '');
+}, 'offset style including position and anchor can be set inline');
+
+test(function() {
+ assert_equals(span3.style.offsetDistance, '30%');
+ assert_equals(span3.style.offsetPosition, 'center bottom');
+ assert_equals(span3.style.offsetAnchor, '20px center');
+ assert_equals(span3.style.offset, '30% center bottom 20px center');
+}, 'offset position bottom can be followed by anchor length');
+
+</script>
+</body>
+</html>
« no previous file with comments | « third_party/WebKit/LayoutTests/css3/motion-path/motion-rotation-overflow-crash.html ('k') | third_party/WebKit/LayoutTests/css3/motion-path/offset-anchor.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698