From 931a12d9ee06f8050e32918316a4215c6a662a4f Mon Sep 17 00:00:00 2001
From: Sergey Vinogradov <mr.vursen@gmail.com>
Date: Thu, 6 Feb 2025 11:13:29 +0400
Subject: [PATCH 1/3] refactor: simplify isValidCSSLength by using CSS.supports

---
 .../src/vaadin-form-layout-mixin.js           | 47 +++++++------------
 1 file changed, 18 insertions(+), 29 deletions(-)

diff --git a/packages/form-layout/src/vaadin-form-layout-mixin.js b/packages/form-layout/src/vaadin-form-layout-mixin.js
index a556dfd3560..4b869a594be 100644
--- a/packages/form-layout/src/vaadin-form-layout-mixin.js
+++ b/packages/form-layout/src/vaadin-form-layout-mixin.js
@@ -6,6 +6,23 @@
 import { isElementHidden } from '@vaadin/a11y-base/src/focus-utils.js';
 import { ResizeMixin } from '@vaadin/component-base/src/resize-mixin.js';
 
+function isValidCSSLength(value) {
+  // Let us choose a CSS property for validating CSS <length> values:
+  // - `border-spacing` accepts `<length> | inherit`, it's the best! But
+  //   it does not disallow invalid values at all in MSIE :-(
+  // - `letter-spacing` and `word-spacing` accept
+  //   `<length> | normal | inherit`, and disallows everything else, like
+  //   `<percentage>`, `auto` and such, good enough.
+  // - `word-spacing` is used since its shorter.
+
+  // Disallow known keywords allowed as the `word-spacing` value
+  if (['inherit', 'normal'].includes(value)) {
+    return false;
+  }
+
+  return CSS.supports('word-spacing', value);
+}
+
 /**
  * @polymerMixin
  * @mixes ResizeMixin
@@ -158,34 +175,6 @@ export const FormLayoutMixin = (superClass) =>
       return 1;
     }
 
-    /** @private */
-    _isValidCSSLength(value) {
-      // Let us choose a CSS property for validating CSS <length> values:
-      // - `border-spacing` accepts `<length> | inherit`, it's the best! But
-      //   it does not disallow invalid values at all in MSIE :-(
-      // - `letter-spacing` and `word-spacing` accept
-      //   `<length> | normal | inherit`, and disallows everything else, like
-      //   `<percentage>`, `auto` and such, good enough.
-      // - `word-spacing` is used since its shorter.
-
-      // Disallow known keywords allowed as the `word-spacing` value
-      if (value === 'inherit' || value === 'normal') {
-        return false;
-      }
-
-      // Use the value in a stylesheet and check the parsed value. Invalid
-      // input value results in empty parsed value.
-      this._styleElement.firstChild.nodeValue = `#styleElement { word-spacing: ${value}; }`;
-
-      if (!this._styleElement.sheet) {
-        // Stylesheet is not ready, probably not attached to the document yet.
-        return true;
-      }
-
-      // Safari 9 sets invalid CSS rules' value to `null`
-      return ['', null].indexOf(this._styleElement.sheet.cssRules[0].style.getPropertyValue('word-spacing')) < 0;
-    }
-
     /** @private */
     _responsiveStepsChanged(responsiveSteps, oldResponsiveSteps) {
       try {
@@ -202,7 +191,7 @@ export const FormLayoutMixin = (superClass) =>
             throw new Error(`Invalid 'columns' value of ${step.columns}, a natural number is required.`);
           }
 
-          if (step.minWidth !== undefined && !this._isValidCSSLength(step.minWidth)) {
+          if (step.minWidth !== undefined && !isValidCSSLength(step.minWidth)) {
             throw new Error(`Invalid 'minWidth' value of ${step.minWidth}, a valid CSS length required.`);
           }
 

From 4d89fd87fb3ac82c8f4ed88a7c9bb7b5f4a946a5 Mon Sep 17 00:00:00 2001
From: Sergey Vinogradov <mr.vursen@gmail.com>
Date: Thu, 6 Feb 2025 11:17:59 +0400
Subject: [PATCH 2/3] remove styleElement

---
 .../src/vaadin-form-layout-mixin.js           | 20 -------------------
 1 file changed, 20 deletions(-)

diff --git a/packages/form-layout/src/vaadin-form-layout-mixin.js b/packages/form-layout/src/vaadin-form-layout-mixin.js
index 4b869a594be..76ea0f97429 100644
--- a/packages/form-layout/src/vaadin-form-layout-mixin.js
+++ b/packages/form-layout/src/vaadin-form-layout-mixin.js
@@ -115,26 +115,6 @@ export const FormLayoutMixin = (superClass) =>
       return ['_invokeUpdateLayout(_columnCount, _labelsOnTop)'];
     }
 
-    /** @protected */
-    ready() {
-      // Here we attach a style element that we use for validating
-      // CSS values in `responsiveSteps`. We can't add this to the `<template>`,
-      // because Polymer will throw it away. We need to create this before
-      // `super.ready()`, because `super.ready()` invokes property observers,
-      // and the observer for `responsiveSteps` does CSS value validation.
-      this.appendChild(this._styleElement);
-
-      super.ready();
-    }
-
-    constructor() {
-      super();
-
-      this._styleElement = document.createElement('style');
-      // Ensure there is a child text node in the style element
-      this._styleElement.textContent = ' ';
-    }
-
     /** @protected */
     connectedCallback() {
       super.connectedCallback();

From f0a71c687fc129cfc37a1aa8341037e05b3d7ef3 Mon Sep 17 00:00:00 2001
From: Sergey Vinogradov <mr.vursen@gmail.com>
Date: Thu, 6 Feb 2025 11:24:05 +0400
Subject: [PATCH 3/3] shorten code comment

---
 .../src/vaadin-form-layout-mixin.js            | 18 ++++--------------
 1 file changed, 4 insertions(+), 14 deletions(-)

diff --git a/packages/form-layout/src/vaadin-form-layout-mixin.js b/packages/form-layout/src/vaadin-form-layout-mixin.js
index 76ea0f97429..49858e831df 100644
--- a/packages/form-layout/src/vaadin-form-layout-mixin.js
+++ b/packages/form-layout/src/vaadin-form-layout-mixin.js
@@ -7,20 +7,10 @@ import { isElementHidden } from '@vaadin/a11y-base/src/focus-utils.js';
 import { ResizeMixin } from '@vaadin/component-base/src/resize-mixin.js';
 
 function isValidCSSLength(value) {
-  // Let us choose a CSS property for validating CSS <length> values:
-  // - `border-spacing` accepts `<length> | inherit`, it's the best! But
-  //   it does not disallow invalid values at all in MSIE :-(
-  // - `letter-spacing` and `word-spacing` accept
-  //   `<length> | normal | inherit`, and disallows everything else, like
-  //   `<percentage>`, `auto` and such, good enough.
-  // - `word-spacing` is used since its shorter.
-
-  // Disallow known keywords allowed as the `word-spacing` value
-  if (['inherit', 'normal'].includes(value)) {
-    return false;
-  }
-
-  return CSS.supports('word-spacing', value);
+  // Check if the value is a valid CSS length and not `inherit` or `normal`,
+  // which are also valid values for `word-spacing`, see:
+  // https://drafts.csswg.org/css-text-3/#word-spacing-property
+  return CSS.supports('word-spacing', value) && !['inherit', 'normal'].includes(value);
 }
 
 /**