fix: compute orientation lock from various transformation functions

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

@@ -1,5 +1,6 @@
 /* global context */
 const { cssom = undefined } = context || {};
+const { degreeThreshold = 0 } = options || {};
 if (!cssom || !cssom.length) {
 	return undefined;
 }
@@ -10,7 +11,7 @@ const rulesGroupByDocumentFragment = groupCssomByDocument(cssom);
 
 for (const key of Object.keys(rulesGroupByDocumentFragment)) {
 	const { root, rules } = rulesGroupByDocumentFragment[key];
-	const orientationRules = getOrientaionCssMediaFeatureRules(rules);
+	const orientationRules = rules.filter(isMediaRuleWithOrientation);
 	if (!orientationRules.length) {
 		continue;
 	}
@@ -26,8 +27,7 @@ for (const key of Object.keys(rulesGroupByDocumentFragment)) {
 				relatedElements = relatedElements.concat(elms);
 			}
 
-			// set locked boolean
-			isLocked = locked;
+			isLocked = isLocked || locked;
 		});
 	});
 }
@@ -65,34 +65,27 @@ function groupCssomByDocument(cssObjectModel) {
 }
 
 /**
- * Get CSS Rules that target Orientation CSS Media Features
+ * Filter CSS Rules that target Orientation CSS Media Features
  * @param {Array<Object>} cssRules
  * @returns {Array<Object>}
  */
-function getOrientaionCssMediaFeatureRules(cssRules) {
+function isMediaRuleWithOrientation({ type, cssText }) {
+	/**
+	 * Filter:
+	 * CSSRule.MEDIA_Rule
+	 * -> https://developer.mozilla.org/en-US/docs/Web/API/CSSMediaRule
+	 */
+	if (type !== 4) {
+		return false;
+	}
+
+	/**
+	 * Filter:
+	 * CSSRule with conditionText of `orientation`
+	 */
 	return (
-		cssRules
-			/**
-			 * Filter:
-			 * CSSRule.MEDIA_Rule
-			 * -> https://developer.mozilla.org/en-US/docs/Web/API/CSSMediaRule
-			 */
-			.filter(({ type }) => type === 4)
-			/**
-			 * Filter:
-			 * CSSRule with conditionText of `orientation`
-			 */
-			.filter(({ cssText }) => {
-				return (
-					/orientation:\s*landscape/i.test(cssText) ||
-					/orientation:\s*portrait/i.test(cssText)
-				);
-			})
-			/**
-			 * Filter:
-			 * Ensure RULELIST is not empty
-			 */
-			.filter(({ cssRules }) => cssRules.length > 0)
+		/orientation:\s*landscape/i.test(cssText) ||
+		/orientation:\s*portrait/i.test(cssText)
 	);
 }
 
@@ -130,8 +123,14 @@ function getIsOrientationLocked({ selectorText, style }) {
 		return false;
 	}
 
-	const locked = degrees % 90 === 0 && degrees % 180 !== 0;
-	return !!locked;
+	/**
+	 * When degree is a multiple of 180, it is not considered an orientation lock
+	 */
+	if (Math.abs(degrees) % 180 <= degreeThreshold) {
+		return false;
+	}
+
+	return Math.abs(degrees) % 90 <= degreeThreshold;
 }
 
 /**
@@ -168,7 +167,7 @@ function getRotationInDegrees(transformFunction, transformFnValue) {
  * @returns{Number|undefined}
  */
 function getAngleInDegrees(angleWithUnit) {
-	const [unit] = angleWithUnit.match(/(deg|grad|rad|turn)/);
+	const [unit] = angleWithUnit.match(/(deg|grad|rad|turn)/) || [];
 	if (!unit) {
 		return;
 	}
@@ -223,7 +222,7 @@ function getAngleInDegreesFromMatrixTransform(transformFnValue) {
  * @return {Number}
  */
 function convertRadToDeg(radians) {
-	return parseInt(radians * (180 / Math.PI));
+	return Math.round(radians * (180 / Math.PI));
 }
 
 /**
@@ -237,7 +236,7 @@ function convertGradToDeg(grad) {
 	if (grad < 0) {
 		grad += 400;
 	}
-	return parseInt((grad / 400) * 360);
+	return Math.round((grad / 400) * 360);
 }
 
 /**
@@ -247,5 +246,5 @@ function convertGradToDeg(grad) {
  * @returns {Number}
  */
 function convertTurnToDeg(turn) {
-	return parseInt(360 / (1 / turn));
+	return Math.round(360 / (1 / turn));
 }

lib/checks/mobile/css-orientation-lock.json

@@ -1,6 +1,9 @@
 {
 	"id": "css-orientation-lock",
 	"evaluate": "css-orientation-lock.js",
+	"options": {
+		"degreeThreshold": 2
+	},
 	"metadata": {
 		"impact": "serious",
 		"messages": {