CSS Motion Path: offset-shorthand requires path before distance rotation

We require offset-path to appear first, then offset-distance and offset-rotation. Standards discussion is continuing, this is intentionally conservative. Spec (not yet updated): https://drafts.fxtf.org/motion-1/#offset-shorthand BUG=638055 Review-Url: https://codereview.chromium.org/2375343002 Cr-Commit-Position: refs/heads/master@{#423059}

CSS Motion Path: offset-shorthand requires path before distance rotation
We require offset-path to appear first, then offset-distance and offset-rotation. Standards discussion is continuing, this is intentionally conservative. Spec (not yet updated): https://drafts.fxtf.org/motion-1/#offset-shorthand BUG=638055 Review-Url: https://codereview.chromium.org/2375343002 Cr-Commit-Position: refs/heads/master@{#423059}
96a59f82 · ericwilligers · Commit bot · a52fe60f · 96a59f82 · 96a59f82
Commit 96a59f82 authored Oct 04, 2016 by ericwilligers Committed by Commit bot Oct 05, 2016
7 changed files
--- a/third_party/WebKit/LayoutTests/css-parser/offset-parsing.html
+++ b/third_party/WebKit/LayoutTests/css-parser/offset-parsing.html
+<!DOCTYPE html>
+<script src="../resources/testharness.js"></script>
+<script src="../resources/testharnessreport.js"></script>
+<script src="resources/property-parsing-test.js"></script>
+<script>
+// Verifies that offset shorthand values are properly parsed
+
+assert_valid_value("offset", "path('M 0 0 H 1') -200% auto");
+assert_valid_value("offset", "none 50px reverse 30deg");
+assert_invalid_value("offset", "path('M 0 0 H 1') reverse 30deg 50px");
+assert_invalid_value("offset", "path('M 0 0 H 1') auto");
+assert_invalid_value("offset", "none 30deg reverse");
+assert_invalid_value("offset", "path('M 0 0 H 1') -200%");
+assert_invalid_value("offset", "path('M 0 0 H 1') 50px");
+assert_invalid_value("offset", "path('M 0 0 H 1')", "path('M 0 0 H 1') 0px auto");
+assert_invalid_value("offset", "center center path('M 0 0 L 100 100 M 100 200 L 200 200 Z L 300 300 Z') 100% 90deg/left bottom");
+assert_invalid_value("offset", "100px");
+assert_invalid_value("offset", "100px none auto 90deg");
+assert_invalid_value("offset", "auto");
+assert_invalid_value("offset", "30deg");
+assert_invalid_value("offset", "30deg path('M 20 30 A 60 70 80')");
+assert_invalid_value("offset", "auto 30deg 90px");
+assert_invalid_value("offset", "none /");
+assert_invalid_value("offset", "none / 10px 20px 30deg");
+assert_invalid_value("offset", "path('M 20 30 A 60 70 80') bottom");
+</script>
--- a/third_party/WebKit/LayoutTests/css3/motion-path/combine-offset-translation-and-rotation.html
+++ b/third_party/WebKit/LayoutTests/css3/motion-path/combine-offset-translation-and-rotation.html
@@ -7,7 +7,7 @@
    left: 100;
    top: 200;
    transform-origin: 60% 20%;
-    offset: path('M 20 30 l 100 100') auto -15deg 50%;
+    offset: path('M 20 30 l 100 100') 50% auto -15deg;
    transform: translate(80px, 60px) rotate(-90deg);
    transform-origin: 0% 0%;
 }

--- a/third_party/WebKit/LayoutTests/css3/motion-path/combine-rotation.html
+++ b/third_party/WebKit/LayoutTests/css3/motion-path/combine-rotation.html
@@ -6,7 +6,7 @@
    position: absolute;
    left: 100;
    top: 200;
-    offset: path('M 0 0 v 100') 150deg 0px;
+    offset: path('M 0 0 v 100') 0px 150deg;
    transform: rotate(30deg);
 }
 </style>

--- a/third_party/WebKit/LayoutTests/css3/motion-path/combine-translation.html
+++ b/third_party/WebKit/LayoutTests/css3/motion-path/combine-translation.html
@@ -4,7 +4,7 @@
 <style>
 #div1 {
    position: absolute;
-    offset: path('M 10 20 h 40 v 50') 0rad 100%;
+    offset: path('M 10 20 h 40 v 50') 100% 0rad;
    transform: translate(70px, 80px);
    transform-origin: 0% 0%;
 }

--- a/third_party/WebKit/LayoutTests/css3/motion-path/zero-length.html
+++ b/third_party/WebKit/LayoutTests/css3/motion-path/zero-length.html
@@ -4,7 +4,7 @@
 <style>
 #div1 {
    position: absolute;
-    offset: path('M100,100L100,100') 0deg 0%;
+    offset: path('M100,100L100,100') 0% 0deg;
    transform-origin: 0 0;
 }
 </style>

--- a/third_party/WebKit/Source/core/css/parser/CSSPropertyParser.cpp
+++ b/third_party/WebKit/Source/core/css/parser/CSSPropertyParser.cpp
@@ -1605,6 +1605,24 @@ CSSValue* consumeOffsetPosition(CSSParserTokenRange& range,
  return consumePosition(range, cssParserMode, UnitlessQuirk::Forbid);
 }

+// offset: <offset-path> <offset-distance> <offset-rotation>
+bool CSSPropertyParser::consumeOffsetShorthand(bool important) {
+  const CSSValue* offsetPath = consumePathOrNone(m_range);
+  const CSSValue* offsetDistance =
+      consumeLengthOrPercent(m_range, m_context.mode(), ValueRangeAll);
+  const CSSValue* offsetRotation = consumeOffsetRotation(m_range);
+  if (!offsetPath || !offsetDistance || !offsetRotation || !m_range.atEnd())
+    return false;
+
+  addProperty(CSSPropertyOffsetPath, CSSPropertyOffset, *offsetPath, important);
+  addProperty(CSSPropertyOffsetDistance, CSSPropertyOffset, *offsetDistance,
+              important);
+  addProperty(CSSPropertyOffsetRotation, CSSPropertyOffset, *offsetRotation,
+              important);
+
+  return true;
+}
+
 static CSSValue* consumeTextEmphasisStyle(CSSParserTokenRange& range) {
  CSSValueID id = range.peek().id();
  if (id == CSSValueNone)
@@ -5067,7 +5085,7 @@ bool CSSPropertyParser::parseShorthand(CSSPropertyID unresolvedProperty,
    case CSSPropertyMotion:
      return consumeShorthandGreedily(motionShorthand(), important);
    case CSSPropertyOffset:
-      return consumeShorthandGreedily(offsetShorthand(), important);
+      return consumeOffsetShorthand(important);
    case CSSPropertyWebkitTextEmphasis:
      return consumeShorthandGreedily(webkitTextEmphasisShorthand(), important);
    case CSSPropertyOutline:

--- a/third_party/WebKit/Source/core/css/parser/CSSPropertyParser.h
+++ b/third_party/WebKit/Source/core/css/parser/CSSPropertyParser.h
@@ -88,6 +88,7 @@ class CSSPropertyParser {
                                 bool important);
  bool consumeBackgroundShorthand(const StylePropertyShorthand&,
                                  bool important);
+  bool consumeOffsetShorthand(bool important);

  bool consumeColumns(bool important);