From 5fee7c8dda46698f14cce5f6af49fd577d31adef Mon Sep 17 00:00:00 2001
From: HelKyle <helkylefighting@gmail.com>
Date: Thu, 24 Jul 2025 20:18:46 +0800
Subject: [PATCH] fix(aspectratio): should use CSS.supports only when CSS is an
 object, isn't it? (#2776)

* fix(aspectratio): should only use CSS.supports when CSS is an object

* chore: keep the same code style

* Use feature test for css-supports detection

* Cleanup more css supports usages

* make sure to use window.CSS

---------

Co-authored-by: veeck <gitkraken@veeck.de>
---
 feature-detects/css/aspectratio.js            | 29 ++++++++++---------
 feature-detects/css/transforms3d.js           |  2 +-
 .../css/transformstylepreserve3d.js           |  4 +--
 3 files changed, 18 insertions(+), 17 deletions(-)

diff --git a/feature-detects/css/aspectratio.js b/feature-detects/css/aspectratio.js
index 5a8a6f10..2a7164f0 100644
--- a/feature-detects/css/aspectratio.js
+++ b/feature-detects/css/aspectratio.js
@@ -16,21 +16,22 @@
 Detect working status of all aspectratio css property
 https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio
 */
-define(['Modernizr', 'createElement'], function (Modernizr, createElement) {
+define(['Modernizr', 'createElement', 'test/css/supports'], function (Modernizr, createElement) {
   Modernizr.addTest("aspectratio", function () {
-    if (typeof CSS !== "object" && typeof CSS.supports === "function") {
-      return CSS.supports('aspect-ratio', '1 / 1')
+    var CSS = window.CSS;
+    if (Modernizr.supports && CSS.supports('aspect-ratio', '1 / 1')) {
+      return true;
+    }
+
+    var element = createElement('p'),
+          elStyle = element.style
+    if ('aspectRatio' in elStyle) {
+      elStyle.cssText = 'aspect-ratio:1 / 1'
+      element.remove()
+      return (elStyle['aspectRatio'] === '1 / 1');
     } else {
-      var element = createElement('p'),
-            elStyle = element.style
-      if ('aspectRatio' in elStyle) {
-        elStyle.cssText = 'aspect-ratio:1 / 1'
-        element.remove()
-        return (elStyle['aspectRatio'] === '1 / 1');
-      } else {
-        element.remove();
-        return false;
-      }
+      element.remove();
+      return false;
     }
   });
-});
\ No newline at end of file
+});
diff --git a/feature-detects/css/transforms3d.js b/feature-detects/css/transforms3d.js
index ef87237e..6f9198e0 100644
--- a/feature-detects/css/transforms3d.js
+++ b/feature-detects/css/transforms3d.js
@@ -9,7 +9,7 @@
   ]
 }
 !*/
-define(['Modernizr', 'testAllProps', 'test/css/supports'], function(Modernizr, testAllProps) {
+define(['Modernizr', 'testAllProps'], function(Modernizr, testAllProps) {
   Modernizr.addTest('csstransforms3d', function() {
     return !!testAllProps('perspective', '1px', true);
   });
diff --git a/feature-detects/css/transformstylepreserve3d.js b/feature-detects/css/transformstylepreserve3d.js
index 139cd151..dd867f33 100755
--- a/feature-detects/css/transformstylepreserve3d.js
+++ b/feature-detects/css/transformstylepreserve3d.js
@@ -16,13 +16,13 @@
 /* DOC
 Detects support for `transform-style: preserve-3d`, for getting a proper 3D perspective on elements.
 */
-define(['Modernizr', 'createElement', 'docElement'], function(Modernizr, createElement, docElement) {
+define(['Modernizr', 'createElement', 'docElement', 'test/css/supports'], function(Modernizr, createElement, docElement) {
   Modernizr.addTest('preserve3d', function() {
     var outerAnchor, innerAnchor;
     var CSS = window.CSS;
     var result = false;
 
-    if (CSS && CSS.supports && CSS.supports('(transform-style: preserve-3d)')) {
+    if (Modernizr.supports && CSS.supports('(transform-style: preserve-3d)')) {
       return true;
     }