Copilot · GitHub

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:

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.

Read the original on github.com ↗