lighthouse 12.3.0-dev.20250224 → 12.3.0-dev.20250225

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "lighthouse",
   "type": "module",
-  "version": "12.3.0-dev.20250224",
+  "version": "12.3.0-dev.20250225",
   "description": "Automated auditing, performance metrics, and best practices for the web.",
   "main": "./core/index.js",
   "bin": {
@@ -137,7 +137,7 @@
     "builtin-modules": "^3.3.0",
     "c8": "^7.11.3",
     "chalk": "^2.4.1",
-    "chrome-devtools-frontend": "1.0.1153166",
+    "chrome-devtools-frontend": "1.0.1418433",
     "concurrently": "^6.4.0",
     "conventional-changelog-cli": "^2.1.1",
     "cpy": "^8.1.2",
@@ -187,7 +187,7 @@
     "axe-core": "^4.10.2",
     "chrome-launcher": "^1.1.2",
     "configstore": "^5.0.1",
-    "csp_evaluator": "1.1.1",
+    "csp_evaluator": "1.1.5",
     "devtools-protocol": "^0.0.1421213",
     "enquirer": "^2.3.6",
     "http-link-header": "^1.1.1",

package/readme.md

@@ -414,6 +414,7 @@ Other awesome open source projects that use Lighthouse.
 * **[webpack-lighthouse-plugin](https://github.com/addyosmani/webpack-lighthouse-plugin)** - Run Lighthouse from a Webpack build.
 * **[cypress-audit](https://github.com/mfrachet/cypress-audit)** - Run Lighthouse and Pa11y audits directly in your E2E test suites.
 * **[laravel-lighthouse](https://github.com/adityadees/laravel-lighthouse)** - Google Lighthouse wrapper for laravel framework to run Google Lighthouse CLI with custom option and can automatically save result in your server directory.
+* **[Neodymium](https://github.com/Xceptance/neodymium/wiki/Accessibility)** - The Neodymium test automation framework integrates Lighthouse for accessibility and Web Vitals verification, allowing programmatic validation and assertion of all audit values.
 
 ## FAQ
 

package/report/assets/styles.css

@@ -199,6 +199,11 @@
   }
 }
 
+/**
+* This media query is a temporary fallback for browsers that do not support `@container query`.
+* TODO: remove this media query when `@container query` is fully supported by browsers
+* See https://github.com/GoogleChrome/lighthouse/pull/16332
+*/
 @media only screen and (max-width: 480px) {
   .lh-vars {
     --audit-group-margin-bottom: 20px;
@@ -225,6 +230,32 @@
   }
 }
 
+@container lh-container (max-width: 480px) {
+  .lh-vars {
+    --audit-group-margin-bottom: 20px;
+    --edge-gap-padding: var(--default-padding);
+    --env-name-min-width: 120px;
+    --gauge-circle-size-big: 96px;
+    --gauge-circle-size: 72px;
+    --gauge-label-font-size-big: 22px;
+    --gauge-label-font-size: 14px;
+    --gauge-label-line-height-big: 26px;
+    --gauge-label-line-height: 20px;
+    --gauge-percentage-font-size-big: 34px;
+    --gauge-percentage-font-size: 26px;
+    --gauge-wrapper-width: 112px;
+    --header-padding: 16px 0 16px 0;
+    --image-preview-size: 24px;
+    --plugin-icon-size: 75%;
+    --report-font-size: 14px;
+    --report-line-height: 20px;
+    --score-icon-margin-left: 2px;
+    --score-icon-size: 10px;
+    --topbar-height: 28px;
+    --topbar-logo-size: 20px;
+  }
+}
+
 .lh-vars.lh-devtools {
   --audit-explanation-line-height: 14px;
   --audit-group-margin-bottom: 20px;
@@ -369,6 +400,9 @@
       but they do not get any overflow:ellipsis treatment.
   */
   word-break: break-word;
+
+  container-name: lh-container;
+  container-type: inline-size;
 }
 
 .lh-audit-group a,
@@ -795,7 +829,11 @@
   grid-column-start: 2;
 }
 
-
+/**
+* This media query is a temporary fallback for browsers that do not support `@container query`.
+* TODO: remove this media query when `@container query` is fully supported by browsers
+* See https://github.com/GoogleChrome/lighthouse/pull/16332
+*/
 @media screen and (max-width: 535px) {
   .lh-metrics-container {
     display: block;
@@ -821,6 +859,31 @@
   }
 }
 
+@container lh-container (max-width: 535px) {
+  .lh-metrics-container {
+    display: block;
+  }
+
+  .lh-metric {
+    border-bottom: none !important;
+  }
+  .lh-category:not(.lh--hoisted-meta) .lh-metric:nth-last-child(1) {
+    border-bottom: 1px solid var(--report-border-color-secondary) !important;
+  }
+
+  /* Change the grid to 3 columns for narrow viewport. */
+  .lh-metric__innerwrap {
+  /**
+   * Icon -- Metric Name -- Metric Value
+   */
+    grid-template-columns: calc(var(--score-icon-size) + var(--score-icon-margin-left) + var(--score-icon-margin-right)) 2fr 1fr;
+  }
+  .lh-metric__value {
+    justify-self: end;
+    grid-column-start: unset;
+  }
+}
+
 /* No-JS toggle switch */
 /* Keep this selector sync'd w/ `magicSelector` in report-ui-features-test.js */
  .lh-metrics-toggle__input:checked ~ .lh-metrics-container .lh-metric__description {
@@ -1402,6 +1465,11 @@
   height: var(--gauge-circle-size-big);
 }
 
+/**
+* This media query is a temporary fallback for browsers that do not support `@container query`.
+* TODO: remove this media query when `@container query` is fully supported by browsers
+* See https://github.com/GoogleChrome/lighthouse/pull/16332
+*/
 @media screen and (max-width: 780px) {
   .lh-category-header__finalscreenshot {
     grid-template: 1fr 1fr / none
@@ -1411,8 +1479,20 @@
   }
 }
 
+@container lh-container (max-width: 780px) {
+  .lh-category-header__finalscreenshot {
+    grid-template: 1fr 1fr / none
+  }
+  .lh-category-headercol--separator {
+    display: none;
+  }
+}
 
-/* 964 fits the min-width of the filmstrip */
+/**
+* This media query is a temporary fallback for browsers that do not support `@container query`.
+* TODO: remove this media query when `@container query` is fully supported by browsers
+* See https://github.com/GoogleChrome/lighthouse/pull/16332
+*/
 @media screen and (max-width: 964px) {
   .lh-report {
     margin-left: 0;
@@ -1420,6 +1500,14 @@
   }
 }
 
+/* 964 fits the min-width of the filmstrip */
+@container lh-container (max-width: 964px) {
+  .lh-report {
+    margin-left: 0;
+    width: 100%;
+  }
+}
+
 @media print {
   body {
     -webkit-print-color-adjust: exact; /* print background colors */
@@ -1694,6 +1782,11 @@
   }
 }
 
+/**
+* This media query is a temporary fallback for browsers that do not support `@container query`.
+* TODO: remove this media query when `@container query` is fully supported by browsers
+* See https://github.com/GoogleChrome/lighthouse/pull/16332
+*/
 @media screen and (max-width: 780px) {
   /* no black outline if we're not confident the entire table can be displayed within bounds */
   .lh-expandable-details[open] {
@@ -1701,6 +1794,13 @@
   }
 }
 
+@container lh-container (max-width: 780px) {
+  /* no black outline if we're not confident the entire table can be displayed within bounds */
+  .lh-expandable-details[open] {
+    animation: none;
+  }
+}
+
 .lh-expandable-details[open] summary, details.lh-clump > summary {
   border-bottom: 1px solid var(--report-border-color-secondary);
 }
@@ -1733,8 +1833,11 @@ details[open] .lh-clump-toggletext--hide { display: block;}
   text-align: initial;
   line-height: 1.4;
 }
-/* shrink tooltips to not be cutoff on left edge of narrow viewports
-   45vw is chosen to be ~= width of the left column of metrics
+
+/**
+* This media query is a temporary fallback for browsers that do not support `@container query`.
+* TODO: remove this media query when `@container query` is fully supported by browsers
+* See https://github.com/GoogleChrome/lighthouse/pull/16332
 */
 @media screen and (max-width: 535px) {
   .lh-tooltip {
@@ -1743,6 +1846,16 @@ details[open] .lh-clump-toggletext--hide { display: block;}
   }
 }
 
+/* shrink tooltips to not be cutoff on left edge of narrow container
+   45vw is chosen to be ~= width of the left column of metrics
+*/
+@container lh-container (max-width: 535px) {
+  .lh-tooltip {
+    min-width: 45vw;
+    padding: 3vw;
+  }
+}
+
 .lh-tooltip-boundary:hover .lh-tooltip {
   display: block;
   animation: fadeInTooltip 250ms;
@@ -1875,18 +1988,41 @@ details[open] .lh-clump-toggletext--hide { display: block;}
   left: 6px;
 }
 
-/* Change the grid for narrow viewport. */
+/**
+* This media query is a temporary fallback for browsers that do not support `@container query`.
+* TODO: remove this media query when `@container query` is fully supported by browsers
+* See https://github.com/GoogleChrome/lighthouse/pull/16332
+*/
 @media screen and (max-width: 640px) {
   .lh-meta__items {
     grid-template-columns: 1fr 1fr;
   }
 }
+
+/* Change the grid for narrow container */
+@container lh-container (max-width: 640px) {
+  .lh-meta__items {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+/**
+* This media query is a temporary fallback for browsers that do not support `@container query`.
+* TODO: remove this media query when `@container query` is fully supported by browsers
+* See https://github.com/GoogleChrome/lighthouse/pull/16332
+*/
 @media screen and (max-width: 535px) {
   .lh-meta__items {
     display: block;
   }
 }
 
+@container lh-container (max-width: 535px) {
+  .lh-meta__items {
+    display: block;
+  }
+}
+
 /* Explodey gauge */
 
 .lh-exp-gauge-component {

package/report/assets/templates.html

@@ -298,12 +298,25 @@ SPDX-License-Identifier: Apache-2.0
       margin: 0 4px;
     }
 
+    /**
+    * This media query is a temporary fallback for browsers that do not support `@container query`.
+    * TODO: remove this media query when `@container query` is fully supported by browsers
+    * See https://github.com/GoogleChrome/lighthouse/pull/16332
+    */
     @media screen and (max-width: 964px) {
       .lh-tools__dropdown {
         right: 0;
         left: initial;
       }
     }
+
+    @container lh-container (max-width: 964px) {
+      .lh-tools__dropdown {
+        right: 0;
+        left: initial;
+      }
+    }
+
     @media print {
       .lh-topbar {
         position: static;