Bug 1442425 [wpt PR 9394] - [css-typed-om] Implement CSSSkewX, a=testonly

Automatic update from web-platform-tests
CSSSkewX and CSSSkewY was added in spec.
because result of "skew(X,Y)" is different from
"skewX(X) skewY(Y)".
first of all, CSSSkewX was added at this CL.
and CSSSkewY is going to add at next patch.

https://drafts.css-houdini.org/css-typed-om-1/#cssskewx

Bug: 808321
Change-Id: I9214b06047f100c88999cba796d6c803545092c0
Reviewed-on: https://chromium-review.googlesource.com/899883
Reviewed-by: Darren Shen <shend@chromium.org>
Reviewed-by: nainar <nainar@chromium.org>
Commit-Queue: Hwanseung Lee <hs1217.lee@samsung.com>
Cr-Commit-Position: refs/heads/master@{#534541}

<!-- Reviewable:start -->

<!-- Reviewable:end -->

wpt-commits: 41d8dca3d059f171c7be7776d65da364812bb32d
wpt-pr: 9394
reapplied-commits: 370e267e160568862f1fd9ec246ab5bb840f586e, fe4514c84e7ad28e46bad5da93381deb99b177f3, 7806af854343c043a2645a4034fdc7812f65daad, 9ddfd21554293dec5a4bf2e5375ae4f3c9f2ded0, 75f63c4d1ebc949647184fd60972fc7b9fd4affb, 1f3a5b496acd2288cc8cf0c32af86cb35157ea4e, 88b42bd5847abac58a62c4d6b33c1509bfce5f3d, 15c2e4c690700c6c115f8afe5e44ded10d943538, c8d461ef1437641ae7d4ea1d21e1e60cd62910b0, a6088a5f48ee299386a84d2f771902267d7355b1, 0634cd8f08ebe0905a9188fb1398c7b5f889c5dc, c8ee4a012dae506ae06bb5b2ad50942b04c1aaaa, c2c352456a4cf62dcc12f851138b04397675a445, b93a8879555d2fa7e7d4e00a275513a3a6338b35, b86e1331cb36634fd33677043b61fc0c1d8485bc, 44ddf14fd3346658c3223f13652073fafbfa48fa, a1a5840a6bb53e305ba02bcbeb215659342d0edb, 7465cb110ae5ec2e2ca73182caf5293f0efc8fd5, aad5349b3458bc3414e274b33fa86a1123901ff2, eca0907980d2769c449894a6277c60c1a306792f, 38626987c0cfd6e715cfcc6f4f1a1209191a03c5, e4a67f7ddcde6cd99348e9104bd7ed07074da44a, bb3c9990840a0fae2afc840b5952d7874785b112, 042d7adef0bdb9dc80e825c3997ace7519477c42, 99f1ea44fc7915b8b7b33bce4732fa8765fd3ac2

testing/web-platform/meta/MANIFEST.json

@@ -262224,6 +262224,11 @@
      {}
     ]
    ],
+   "css/tools/apiclient/.git": [
+    [
+     {}
+    ]
+   ],
    "css/tools/apiclient/.gitignore": [
     [
      {}
@@ -262329,6 +262334,11 @@
      {}
     ]
    ],
+   "css/tools/w3ctestlib/.git": [
+    [
+     {}
+    ]
+   ],
    "css/tools/w3ctestlib/.hgignore": [
     [
      {}
@@ -312578,6 +312588,12 @@
      {}
     ]
    ],
+   "css/css-typed-om/stylevalue-subclasses/cssSkewX.tentative.html": [
+    [
+     "/css/css-typed-om/stylevalue-subclasses/cssSkewX.tentative.html",
+     {}
+    ]
+   ],
    "css/css-typed-om/stylevalue-subclasses/cssTransformValue.tentative.html": [
     [
      "/css/css-typed-om/stylevalue-subclasses/cssTransformValue.tentative.html",
@@ -514746,7 +514762,7 @@
    "support"
   ],
   "css/css-typed-om/resources/testhelper.js": [
-   "62fc510703d52cd0894359c29d975920e26b594f",
+   "6bfe0c7b10e47c2f6acb95596ea11b8290b196ac",
    "support"
   ],
   "css/css-typed-om/styleMap-update-function.html": [
@@ -514774,7 +514790,7 @@
    "testharness"
   ],
   "css/css-typed-om/stylevalue-normalization/transformvalue-normalization.tentative.html": [
-   "1b1af8a14ed0a1751ef3899e574e263c842440fd",
+   "a4c39f9ea72acba74027e6ffb26e221606dcd9ac",
    "testharness"
   ],
   "css/css-typed-om/stylevalue-objects/interface.html": [
@@ -514810,7 +514826,7 @@
    "testharness"
   ],
   "css/css-typed-om/stylevalue-serialization/cssTransformValue.tentative.html": [
-   "71591a5fdc7f90841dcc204c70f1a3e611024edc",
+   "5bb6823ff35152e1a55f573d568e29b7edfcf2d7",
    "testharness"
   ],
   "css/css-typed-om/stylevalue-serialization/cssUnitValue.tentative.html": [
@@ -514861,6 +514877,10 @@
    "91ff825d12373156b3c3b23d23bf866220ef1386",
    "testharness"
   ],
+  "css/css-typed-om/stylevalue-subclasses/cssSkewX.tentative.html": [
+   "be786095d55df3e6d9d4b10d8ef7c9da95beb1f6",
+   "testharness"
+  ],
   "css/css-typed-om/stylevalue-subclasses/cssTransformValue.tentative.html": [
    "c1ee0153bd654f64b64f74bf00b6b0709c7cb9ed",
    "testharness"
@@ -528673,6 +528693,10 @@
    "7301f0ec4d66b71a92818aa3d532c5eca718f677",
    "support"
   ],
+  "css/tools/apiclient/.git": [
+   "a7f9e7776421b05a5140df30888c36f94d66e3a6",
+   "support"
+  ],
   "css/tools/apiclient/.gitignore": [
    "4f8c72d787595386529108512329027d424dad47",
    "support"
@@ -528757,6 +528781,10 @@
    "715959f81edaae4a2ac5ad6a16dbb045c199074f",
    "support"
   ],
+  "css/tools/w3ctestlib/.git": [
+   "5a9c7bb1ed11748c47559ccc3734a83fd0586f0c",
+   "support"
+  ],
   "css/tools/w3ctestlib/.hgignore": [
    "68a4744eda8cfd5d6313a91e1468cffacf37b61f",
    "support"

testing/web-platform/tests/css/css-typed-om/resources/testhelper.js

@@ -54,6 +54,9 @@ function assert_style_value_equals(a, b) {
       assert_style_value_equals(a.ax, b.ax);
       assert_style_value_equals(a.ay, b.ay);
       break;
+    case 'CSSSkewX':
+      assert_style_value_equals(a.ax, b.ax);
+      break;
     case 'CSSPerspective':
       assert_style_value_equals(a.length, b.length);
       break;

testing/web-platform/tests/css/css-typed-om/stylevalue-normalization/transformvalue-normalization.tentative.html

@@ -123,6 +123,11 @@ const gTestCases = [
     expected: new CSSSkew(CSS.deg(90), CSS.deg(0)),
     desc: 'skew() with only X'
   },
+  {
+    cssText: 'skew(90deg, 0deg)',
+    expected: new CSSSkew(CSS.deg(90), CSS.deg(0)),
+    desc: 'skew() with X and Y which is 0 value'
+  },
   {
     cssText: 'skew(90deg, 45deg)',
     expected: new CSSSkew(CSS.deg(90), CSS.deg(45)),
@@ -130,7 +135,7 @@ const gTestCases = [
   },
   {
     cssText: 'skewX(90deg)',
-    expected: new CSSSkew(CSS.deg(90), CSS.deg(0)),
+    expected: new CSSSkewX(CSS.deg(90)),
     desc: 'skewX()'
   },
   {
@@ -153,12 +158,13 @@ for (const {cssText, expected, desc} of gTestCases) {
 
 test(t => {
   test_transform_normalization(t,
-      'translate(1px) rotateX(90deg) perspective(1px) skew(90deg) scale3d(1, 2, 3)',
+      'translate(1px) rotateX(90deg) perspective(1px) skew(90deg) skewX(20deg) scale3d(1, 2, 3)',
       new CSSTransformValue([
         new CSSTranslate(CSS.px(1), CSS.px(0)),
         new CSSRotate(CSS.number(1), CSS.number(0), CSS.number(0), CSS.deg(90)),
         new CSSPerspective(CSS.px(1)),
         new CSSSkew(CSS.deg(90), CSS.deg(0)),
+        new CSSSkewX(CSS.deg(20)),
         new CSSScale(CSS.number(1), CSS.number(2), CSS.number(3)),
       ]));
 }, 'Normalizing a <transform-list> returns a CSSTransformValue containing all the transforms');

testing/web-platform/tests/css/css-typed-om/stylevalue-serialization/cssTransformValue.tentative.html

@@ -49,6 +49,11 @@ const gTestCases = [
     cssText: 'skew(90deg)',
     desc: 'CSSSkew with Y which is 0 value'
   },
+  {
+    value: new CSSSkewX(CSS.deg(90)),
+    cssText: 'skewX(90deg)',
+    desc: 'CSSSkewX'
+  },
   {
     value: new CSSPerspective(CSS.px(1)),
     cssText: 'perspective(1px)',

testing/web-platform/tests/css/css-typed-om/stylevalue-subclasses/cssSkewX.tentative.html

@@ -0,0 +1,62 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSSSkewX tests</title>
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#cssskewx">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../resources/testhelper.js"></script>
+<script>
+'use strict';
+
+const gInvalidTestCases = [
+  { value: 'auto', desc: 'a keyword'},
+  { value: 3.14, desc: 'a double'},
+  { value: 0, desc: 'a unitless zero'},
+  { value: '10deg', desc: 'a string angle'},
+  { value: CSS.number(10), desc: 'a number CSSUnitValue'},
+  { value: CSS.s(10), desc: 'a time dimension CSSUnitValue'},
+  { value: new CSSMathSum(CSS.px(1)), desc: 'a CSSMathValue of length type' },
+];
+
+for (const {value, desc} of gInvalidTestCases) {
+  test(() => {
+    assert_throws(new TypeError(), () => new CSSSkewX(value));
+  }, 'Constructing a CSSSkewX with ' + desc + ' throws a TypeError');
+}
+
+for (const {value, desc} of gInvalidTestCases) {
+  test(() => {
+    let skewX = new CSSSkewX(CSS.deg(0));
+    assert_throws(new TypeError(), () => skewX.ax = value);
+    assert_style_value_equals(skewX.ax, CSS.deg(0));
+  }, 'Updating CSSSkewX.ax with ' + desc + ' throws a TypeError');
+}
+
+const gValidTestCases = [
+  { value: CSS.deg(-3.14), desc: 'an angle CSSUnitValue' },
+  { value: new CSSMathSum(CSS.deg(1)), desc: 'a CSSMathValue of angle type' },
+];
+
+for (const {value: ax, desc: axDesc} of gValidTestCases) {
+  test(() => {
+    const skewX = new CSSSkewX(ax);
+    assert_equals(skewX.ax, ax);
+    assert_true(skewX.is2D);
+  }, 'CSSSkewX can be constructed from ' + axDesc);
+}
+
+for (const {value, desc} of gValidTestCases) {
+  test(() => {
+    let skewX = new CSSSkewX(CSS.deg(0));
+    skewX.ax = value;
+    assert_style_value_equals(skewX.ax, value);
+  }, 'CSSSkew.ax can be updated to ' + desc);
+}
+
+test(() => {
+  let skewX = new CSSSkewX(CSS.deg(0));
+  skewX.is2D = false;
+  assert_true(skewX.is2D);
+}, 'Modifying skewX.is2D is a no-op');
+
+</script>