Chromium Code Reviews Chromium Code Reviews
Issue 2555543002:
CSS Motion Path: Support offset-rotate in addition to offset-rotation (Closed)
| Index: third_party/WebKit/LayoutTests/css3/motion-path/offset-rotate.html |
| diff --git a/third_party/WebKit/LayoutTests/css3/motion-path/offset-rotate.html b/third_party/WebKit/LayoutTests/css3/motion-path/offset-rotate.html |
| new file mode 100644 |
| index 0000000000000000000000000000000000000000..dedd71ac4310bd06315a200ae93a6f54dc1fce93 |
| --- /dev/null |
| +++ b/third_party/WebKit/LayoutTests/css3/motion-path/offset-rotate.html |
| @@ -0,0 +1,96 @@ |
| +<!DOCTYPE html> |
| +<html> |
| +<head> |
| +<script src="../../resources/testharness.js"></script> |
| +<script src="../../resources/testharnessreport.js"></script> |
| +<style> |
| +#div2 { |
|
sashab
2016/12/06 04:16:34
Is there a reason you don't want to use inline sty
Eric Willigers
2016/12/06 05:30:04
Done.
|
| + offset-rotate: auto; |
| +} |
| +#div3 { |
| + offset-rotate: reverse; |
| +} |
| +#div4 { |
| + offset-rotate: 180deg; |
| +} |
| +#div5 { |
| + offset-rotate: 0rad; |
| +} |
| +#div6 { |
| + offset-rotate: -400grad auto; |
| +} |
| +#div7 { |
| + offset-rotate: 2turn reverse; |
| +} |
| +#div8 { |
| + offset-rotate: reverse 30deg; |
| +} |
| +#div9 { |
| + offset-rotate: inherit; |
| +} |
| +</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 id="div9"></div> |
| + <div id="div10"></div> |
| +</div> |
| +<span id="span1" style="offset-rotate: auto -45deg"></span> |
| + |
| +<script> |
| +"use strict"; |
| + |
| +test(function() { |
| + assert_equals(getComputedStyle(div1, null).offsetRotate, 'auto 0deg'); |
| +}, 'offset-rotate default is auto'); |
| + |
| +test(function() { |
| + assert_equals(getComputedStyle(div2, null).offsetRotate, 'auto 0deg'); |
| +}, 'offset-rotate auto expands to auto 0deg'); |
| + |
| +test(function() { |
| + assert_equals(getComputedStyle(div3, null).offsetRotate, 'auto 180deg'); |
| +}, 'offset-rotate reverse expands to auto 180deg'); |
| + |
| +test(function() { |
| + assert_equals(getComputedStyle(div4, null).offsetRotate, '180deg'); |
| +}, 'offset-rotate can be a fixed angle'); |
| + |
| +test(function() { |
| + assert_equals(getComputedStyle(div5, null).offsetRotate, '0deg'); |
| +}, 'offset-rotate angles are converted to degrees'); |
| + |
| +test(function() { |
| + assert_equals(getComputedStyle(div6, null).offsetRotate, 'auto -360deg'); |
| +}, 'offset-rotate can be supplied with angle before auto'); |
| + |
| +test(function() { |
| + assert_equals(getComputedStyle(div7, null).offsetRotate, 'auto 900deg'); |
| +}, 'offset-rotate can be supplied with angle before reverse'); |
| + |
| +test(function() { |
| + assert_equals(getComputedStyle(div8, null).offsetRotate, 'auto 210deg'); |
| +}, 'offset-rotate is unaffected by child elements'); |
| + |
| +test(function() { |
| + assert_equals(getComputedStyle(div9, null).offsetRotate, 'auto 210deg'); |
| +}, 'offset-rotate can be explicitly inherited'); |
| + |
| +test(function() { |
| + assert_equals(getComputedStyle(div10, null).offsetRotate, 'auto 0deg'); |
| +}, 'offset-rotate is not inherited by default'); |
| + |
| +test(function() { |
| + assert_equals(span1.style.offsetRotate, 'auto -45deg'); |
| +}, 'offset-rotate style can be set inline'); |
| + |
| +</script> |
| +</body> |
| +</html> |
