fix(css-orientation-lock): support the css rotate property

lib/checks/mobile/css-orientation-lock-evaluate.js

@@ -103,22 +103,15 @@ function cssOrientationLockEvaluate(node, options, virtualNode, context) {
 
     const transformStyle =
       style.transform || style.webkitTransform || style.msTransform || false;
-    if (!transformStyle) {
+    if (!transformStyle && !style.rotate) {
       return false;
     }
 
-    /**
-     * get last match/occurrence of a transformation function that can affect rotation along Z axis
-     */
-    const matches = transformStyle.match(
-      /(rotate|rotateZ|rotate3d|matrix|matrix3d)\(([^)]+)\)(?!.*(rotate|rotateZ|rotate3d|matrix|matrix3d))/
-    );
-    if (!matches) {
-      return false;
-    }
+    const transformDegrees = getTransformDegrees(transformStyle);
+    const rotateDegrees = getRotationInDegrees('rotate', style.rotate);
 
-    const [, transformFn, transformFnValue] = matches;
-    let degrees = getRotationInDegrees(transformFn, transformFnValue);
+    // `transform: rotate` and `rotate` are additive
+    let degrees = transformDegrees + rotateDegrees;
     if (!degrees) {
       return false;
     }
@@ -134,6 +127,30 @@ function cssOrientationLockEvaluate(node, options, virtualNode, context) {
     return Math.abs(degrees - 90) % 90 <= degreeThreshold;
   }
 
+  /**
+   * Get the degree value of a transform.
+   * @property {Object} cssRule.style style
+   * @return {Number}
+   */
+  function getTransformDegrees(transformStyle) {
+    if (!transformStyle) {
+      return 0;
+    }
+
+    /**
+     * get last match/occurrence of a transformation function that can affect rotation along Z axis
+     */
+    const matches = transformStyle.match(
+      /(rotate|rotateZ|rotate3d|matrix|matrix3d)\(([^)]+)\)(?!.*(rotate|rotateZ|rotate3d|matrix|matrix3d))/
+    );
+    if (!matches) {
+      return 0;
+    }
+
+    const [, transformFn, transformFnValue] = matches;
+    return getRotationInDegrees(transformFn, transformFnValue);
+  }
+
   /**
    * Interpolate rotation along the z axis from a given value to a transform function
    * @param {String} transformFunction CSS transformation function
@@ -158,7 +175,7 @@ function cssOrientationLockEvaluate(node, options, virtualNode, context) {
       case 'matrix3d':
         return getAngleInDegreesFromMatrixTransform(transformFnValue);
       default:
-        return;
+        return 0;
     }
   }
 
@@ -170,7 +187,7 @@ function cssOrientationLockEvaluate(node, options, virtualNode, context) {
   function getAngleInDegrees(angleWithUnit) {
     const [unit] = angleWithUnit.match(/(deg|grad|rad|turn)/) || [];
     if (!unit) {
-      return;
+      return 0;
     }
 
     const angle = parseFloat(angleWithUnit.replace(unit, ``));

package.json

@@ -174,7 +174,7 @@
     "typedarray": "^0.0.7",
     "typescript": "^4.9.4",
     "uglify-js": "^3.17.4",
-    "wcag-act-rules": "github:w3c/wcag-act-rules#9416ea6",
+    "wcag-act-rules": "github:w3c/wcag-act-rules#2341a1b",
     "weakmap-polyfill": "^2.0.4"
   },
   "lint-staged": {

test/checks/mobile/css-orientation-lock.js

@@ -302,6 +302,51 @@ describe('css-orientation-lock tests', function () {
     assert.isFalse(actual);
   });
 
+  it('returns false when CSSOM has Orientation CSS media features with rotate property', function () {
+    var actual = check.evaluate.call(checkContext, document, {}, undefined, {
+      cssom: [
+        {
+          shadowId: 'a',
+          root: document,
+          sheet: getSheet(
+            '@media screen and (min-width: 1px) and (max-width: 3000px) and (orientation: landscape) { body { rotate: 90deg; } }'
+          )
+        }
+      ]
+    });
+    assert.isFalse(actual);
+  });
+
+  it('returns false when CSSOM has Orientation CSS media features with rotate property matrix', function () {
+    var actual = check.evaluate.call(checkContext, document, {}, undefined, {
+      cssom: [
+        {
+          shadowId: 'a',
+          root: document,
+          sheet: getSheet(
+            '@media screen and (min-width: 1px) and (max-width: 3000px) and (orientation: landscape) { body { rotate: 0 0 1 1.5708rad; } }'
+          )
+        }
+      ]
+    });
+    assert.isFalse(actual);
+  });
+
+  it('returns false when CSSOM has Orientation CSS media features with transform: rotate and rotate property', function () {
+    var actual = check.evaluate.call(checkContext, document, {}, undefined, {
+      cssom: [
+        {
+          shadowId: 'a',
+          root: document,
+          sheet: getSheet(
+            '@media screen and (min-width: 1px) and (max-width: 3000px) and (orientation: landscape) { body { rotate: 45deg; transform: rotate(45deg); -webkit-transform: rotate(45deg); } }'
+          )
+        }
+      ]
+    });
+    assert.isFalse(actual);
+  });
+
   // Note:
   // external stylesheets is tested in integration tests
   // shadow DOM is tested in integration tests

test/integration/full/css-orientation-lock/violations.css

@@ -2,6 +2,9 @@
   .thatDiv {
     transform: rotate(90deg);
   }
+  .rotateDiv {
+    rotate: 90deg;
+  }
 }
 
 @media screen and (min-width: 10px) and (max-width: 3000px) and (orientation: landscape) {
@@ -11,4 +14,7 @@
   .someDiv {
     transform: matrix3d(0, -1, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
   }
+  .rotateMatrix {
+    rotate: 0 0 1 1.5708rad;
+  }
 }

test/integration/full/css-orientation-lock/violations.html

@@ -23,6 +23,8 @@
     <div id="mocha"></div>
     <div class="someDiv">some div content</div>
     <div class="thatDiv">that div content</div>
+    <div class="rotateDiv">that div content</div>
+    <div class="rotateMatrix">that div content</div>
     <div id="shadow-fixture"></div>
     <script src="/test/testutils.js"></script>
     <script src="violations.js"></script>

test/integration/full/css-orientation-lock/violations.js

@@ -41,26 +41,32 @@ describe('css-orientation-lock violations test', function () {
         }
       },
       function (err, res) {
-        assert.isNull(err);
-        assert.isDefined(res);
+        try {
+          assert.isNull(err);
+          assert.isDefined(res);
 
-        // check for violation
-        assert.property(res, 'violations');
-        assert.lengthOf(res.violations, 1);
+          // check for violation
+          assert.property(res, 'violations');
+          assert.lengthOf(res.violations, 1);
 
-        // assert the node
-        var checkedNode = res.violations[0].nodes[0];
-        assert.isTrue(/html/i.test(checkedNode.html));
+          // assert the node
+          var checkedNode = res.violations[0].nodes[0];
+          assert.isTrue(/html/i.test(checkedNode.html));
 
-        // assert the relatedNodes
-        var checkResult = checkedNode.all[0];
-        assert.lengthOf(checkResult.relatedNodes, 2);
-        assertViolatedSelectors(checkResult.relatedNodes, [
-          '.someDiv',
-          '.thatDiv'
-        ]);
+          // assert the relatedNodes
+          var checkResult = checkedNode.all[0];
+          assert.lengthOf(checkResult.relatedNodes, 4);
+          assertViolatedSelectors(checkResult.relatedNodes, [
+            '.someDiv',
+            '.thatDiv',
+            '.rotateDiv',
+            '.rotateMatrix'
+          ]);
 
-        done();
+          done();
+        } catch (err) {
+          done(err);
+        }
       }
     );
   });
@@ -83,27 +89,33 @@ describe('css-orientation-lock violations test', function () {
           }
         },
         function (err, res) {
-          assert.isNull(err);
-          assert.isDefined(res);
+          try {
+            assert.isNull(err);
+            assert.isDefined(res);
 
-          // check for violation
-          assert.property(res, 'violations');
-          assert.lengthOf(res.violations, 1);
+            // check for violation
+            assert.property(res, 'violations');
+            assert.lengthOf(res.violations, 1);
 
-          // assert the node
-          var checkedNode = res.violations[0].nodes[0];
-          assert.isTrue(/html/i.test(checkedNode.html));
+            // assert the node
+            var checkedNode = res.violations[0].nodes[0];
+            assert.isTrue(/html/i.test(checkedNode.html));
 
-          // assert the relatedNodes
-          var checkResult = checkedNode.all[0];
-          assert.lengthOf(checkResult.relatedNodes, 3);
-          assertViolatedSelectors(checkResult.relatedNodes, [
-            '.someDiv',
-            '.thatDiv',
-            '.shadowDiv'
-          ]);
+            // assert the relatedNodes
+            var checkResult = checkedNode.all[0];
+            assert.lengthOf(checkResult.relatedNodes, 5);
+            assertViolatedSelectors(checkResult.relatedNodes, [
+              '.someDiv',
+              '.thatDiv',
+              '.rotateDiv',
+              '.rotateMatrix',
+              '.shadowDiv'
+            ]);
 
-          done();
+            done();
+          } catch (err) {
+            done(err);
+          }
         }
       );
     }