Add support for new CSS viewport units (dvw, dvh, lvw, lvh, svw, svh, and *min/*max variants)

[Copilot]

Implements support for the 12 new CSS viewport units introduced in htmlunit-cssparser 4.21.0: dynamic viewport (dvw, dvh, dvmin, dvmax), large viewport (lvw, lvh, lvmin, lvmax), and small viewport (svw, svh, svmin, svmax).

Changes

• CssStyleSheet.java: Added switch cases for all 12 new viewport unit types in pixelValue(), using the same 0.16f conversion factor as existing viewport units. Updated warning messages to include new units.

• CSSStyleDeclaration.java: Extended setStyleLengthAttribute() to parse new viewport units:

  • 3-letter units: dvw, dvh, lvw, lvh, svw, svh
  • 5-letter units: dvmin, dvmax, lvmin, lvmax, svmin, svmax

• ComputedCSSStyleDeclarationTest.java: Added test coverage for all new viewport units plus previously untested vmin/vmax units (14 tests total).

Example usage:

.container {
  width: 100dvw;      /* dynamic viewport width */
  height: 50lvh;      /* large viewport height */
  min-width: 20svmin; /* small viewport minimum */
}

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• central.sonatype.com
  • Triggering command: /usr/lib/jvm/temurin-17-jdk-amd64/bin/java /usr/lib/jvm/temurin-17-jdk-amd64/bin/java --enable-native-access=ALL-UNNAMED -classpath /usr/share/apache-maven-3.9.11/boot/plexus-classworlds-2.9.0.jar -Dclassworlds.conf=/usr/share/apache-maven-3.9.11/bin/m2.conf -Dmaven.home=/usr/share/apache-maven-3.9.11 -Dlibrary.jansi.path=/usr/share/apache-maven-3.9.11/lib/jansi-native -Dmaven.multiModuleProjectDirectory=/home/REDACTED/work/htmlunit/htmlunit org.codehaus.plexus.classworlds.launcher.Launcher clean compile -DskipTests (dns block)
  • Triggering command: /usr/lib/jvm/temurin-17-jdk-amd64/bin/java /usr/lib/jvm/temurin-17-jdk-amd64/bin/java --enable-native-access=ALL-UNNAMED -classpath /usr/share/apache-maven-3.9.11/boot/plexus-classworlds-2.9.0.jar -Dclassworlds.conf=/usr/share/apache-maven-3.9.11/bin/m2.conf -Dmaven.home=/usr/share/apache-maven-3.9.11 -Dlibrary.jansi.path=/usr/share/apache-maven-3.9.11/lib/jansi-native -Dmaven.multiModuleProjectDirectory=/home/REDACTED/work/htmlunit/htmlunit org.codehaus.plexus.classworlds.launcher.Launcher test -Dtest=ComputedCSSStyleDeclarationTest#fontSizeVW -q (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Original prompt

Summary

The latest htmlunit-cssparser now supports the new CSS viewport units: dvw, dvh, dvmin, dvmax, lvw, lvh, lvmin, lvmax, svw, svh, svmin, svmax. These units need to be implemented in HtmlUnit alongside the existing viewport units (vw, vh, vmin, vmax).

Tasks

1. Add Implementation for New Viewport Units

File: src/main/java/org/htmlunit/css/CssStyleSheet.java

In the pixelValue() method (around line 1464-1535), add switch cases for the new viewport units after the existing VMIN and VMAX cases:

• DVW, DVH, DVMIN, DVMAX (dynamic viewport)
• LVW, LVH, LVMIN, LVMAX (large viewport)
• SVW, SVH, SVMIN, SVMAX (small viewport)

Each should follow the same pattern as the existing VW, VH, VMIN, VMAX units (returning 0.16f * cssValue.getDoubleValue()).

Also update the warning messages in this method to include all the new units.

File: src/main/java/org/htmlunit/javascript/host/css/CSSStyleDeclaration.java

In the setStyleLengthAttribute() method (around lines 1991-2010), extend the unit parsing logic:

1. Add a new else if block for 4-letter units after the existing 3-letter units check:

   else if (valueString.endsWith("dvw")
       || valueString.endsWith("dvh")
       || valueString.endsWith("lvw")
       || valueString.endsWith("lvh")
       || valueString.endsWith("svw")
       || valueString.endsWith("svh")) {
       unit = valueString.substring(valueString.length() - 3);
       valueString = valueString.substring(0, valueString.length() - 3);
   }

2. Extend the existing 4-letter block (or create new) for 5-letter units:

   else if (valueString.endsWith("dvmin")
       || valueString.endsWith("dvmax")
       || valueString.endsWith("lvmin")
       || valueString.endsWith("lvmax")
       || valueString.endsWith("svmin")
       || valueString.endsWith("svmax")) {
       unit = valueString.substring(valueString.length() - 5);
       valueString = valueString.substring(0, valueString.length() - 5);
   }

2. Add Tests for All Viewport Units

File: src/test/java/org/htmlunit/javascript/host/css/ComputedCSSStyleDeclarationTest.java

Add comprehensive tests similar to the existing fontSizeVH() and fontSizeVW() tests (around lines 1152-1235):

1. Add tests for existing units that are missing tests:

   • fontSizeVMin() - test with style='font-size: 0.6vmin;'
   • fontSizeVMax() - test with style='font-size: 0.6vmax;'

2. Add tests for all new viewport units:

   • fontSizeDVW() - dynamic viewport width
   • fontSizeDVH() - dynamic viewport height
   • fontSizeDVMin() - dynamic viewport minimum
   • fontSizeDVMax() - dynamic viewport maximum
   • fontSizeLVW() - large viewport width
   • fontSizeLVH() - large viewport height
   • fontSizeLVMin() - large viewport minimum
   • fontSizeLVMax() - large viewport maximum
   • fontSizeSVW() - small viewport width
   • fontSizeSVH() - small viewport height
   • fontSizeSVMin() - small viewport minimum
   • fontSizeSVMax() - small viewport maximum

Each test should follow this pattern:

@Test
@Alerts(CHROME = "7.536px",
        EDGE = "7.488px",
        FF = "7.53333px",
        FF_ESR = "7.53333px")
@HtmlUnitNYI(CHROME = "1px",
        EDGE =  "1px",
        FF = "1px",
        FF_ESR = "1px")
public void fontSizeUNIT() throws Exception {
    final String html = DOCTYPE_HTML
        + "<html><body>\n"
        + "<div id='d0' style='font-size: 0.6UNIT;'>\n"
        + "<div id='d1'>inside</div>\n"
        + "</div>\n"
        + "<script>\n"
        + LOG_TITLE_FUNCTION
        + "  function getStyle(x) {\n"
        + "    var d = document.getElementById(x);\n"
        + "    var cs = window.getComputedStyle(d, null);\n"
        + "    return cs;\n"
        + "  }\n"
        + "  var cs1 = getStyle('d1');\n"
        + "  log(cs1.fontSize);\n"
        + "</script>\n"
        + "</body></html>";
    loadPageVerifyTitle2(html);
}

Implementation Notes

• All new viewport units should use the same hardcoded default conversion as the existing viewport units (0.16f * cssValue.getDoubleValue())
• The order of parsing in setStyleLengthAttribute() is important - check longer unit strings before shorter ones to avoid incorrect matches
• Ensure all warning/log messages are updated to include the new units
• Follow the existing code style and patterns

References

• Existing implementation: src/main/java/org/htmlunit/css/CssStyleSheet.java lines 1464-1535
• Existing implementation: src/main/java/org/htmlunit/javascript/host/css/CSSStyleDeclaration.java lines 1991-2010
• Existing tests: src/test/java/org/htmlunit/javascript/host/css/ComputedCSSStyleDeclarationTest.java lines 1152-1235

This pull request was created from Copilot chat.

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.