at-property-viewport-units.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /css/css-properties-values-api/at-property-viewport-units.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<title>@property: viewport units in initial value</title>

<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1/#initial-value-descriptor" />

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<style>

  iframe {

    width: 400px;

    height: 200px;

</style>

<iframe id=iframe srcdoc="

  <style>

    @property --10vw { syntax: '<length>'; inherits: true; initial-value: 10vw}

    @property --10vh { syntax: '<length>'; inherits: true; initial-value: 10vh}

    @property --10vi { syntax: '<length>'; inherits: true; initial-value: 10vi}

    @property --10vb { syntax: '<length>'; inherits: true; initial-value: 10vb}

    @property --10vmin { syntax: '<length>'; inherits: true; initial-value: 10vmin}

    @property --10vmax { syntax: '<length>'; inherits: true; initial-value: 10vmax}

    @property --10svw { syntax: '<length>'; inherits: true; initial-value: 10svw}

    @property --10svh { syntax: '<length>'; inherits: true; initial-value: 10svh}

    @property --10svi { syntax: '<length>'; inherits: true; initial-value: 10svi}

    @property --10svb { syntax: '<length>'; inherits: true; initial-value: 10svb}

    @property --10svmin { syntax: '<length>'; inherits: true; initial-value: 10svmin}

    @property --10svmax { syntax: '<length>'; inherits: true; initial-value: 10svmax}

    @property --10lvw { syntax: '<length>'; inherits: true; initial-value: 10lvw}

    @property --10lvh { syntax: '<length>'; inherits: true; initial-value: 10lvh}

    @property --10lvi { syntax: '<length>'; inherits: true; initial-value: 10lvi}

    @property --10lvb { syntax: '<length>'; inherits: true; initial-value: 10lvb}

    @property --10lvmin { syntax: '<length>'; inherits: true; initial-value: 10lvmin}

    @property --10lvmax { syntax: '<length>'; inherits: true; initial-value: 10lvmax}

    @property --10dvw { syntax: '<length>'; inherits: true; initial-value: 10dvw}

    @property --10dvh { syntax: '<length>'; inherits: true; initial-value: 10dvh}

    @property --10dvi { syntax: '<length>'; inherits: true; initial-value: 10dvi}

    @property --10dvb { syntax: '<length>'; inherits: true; initial-value: 10dvb}

    @property --10dvmin { syntax: '<length>'; inherits: true; initial-value: 10dvmin}

    @property --10dvmax { syntax: '<length>'; inherits: true; initial-value: 10dvmax}

  </style>

  <div></div>

"></iframe>

<script>

  iframe.offsetTop;

  function waitForLoad(w) {

    return new Promise(resolve => {

      if (w.document.readyState == 'complete')

        resolve();

      else

        w.addEventListener('load', resolve)

});

  function test_unit(element, actual, expected) {

    promise_test(async (t) => {

      await waitForLoad(window);

      let element = iframe.contentDocument.querySelector('div');

      assert_equals(getComputedStyle(element).getPropertyValue(`--${actual}`), expected);

    },`${actual} is ${expected}`);

  test_unit(iframe, '10vw', '40px');

  test_unit(iframe, '10vh', '20px');

  test_unit(iframe, '10vi', '40px');

  test_unit(iframe, '10vb', '20px');

  test_unit(iframe, '10vmin', '20px');

  test_unit(iframe, '10vmax', '40px');

  test_unit(iframe, '10svw', '40px');

  test_unit(iframe, '10svh', '20px');

  test_unit(iframe, '10svi', '40px');

  test_unit(iframe, '10svb', '20px');

  test_unit(iframe, '10svmin', '20px');

  test_unit(iframe, '10svmax', '40px');

  test_unit(iframe, '10lvw', '40px');

  test_unit(iframe, '10lvh', '20px');

  test_unit(iframe, '10lvi', '40px');

  test_unit(iframe, '10lvb', '20px');

  test_unit(iframe, '10lvmin', '20px');

  test_unit(iframe, '10lvmax', '40px');

  test_unit(iframe, '10dvw', '40px');

  test_unit(iframe, '10dvh', '20px');

  test_unit(iframe, '10dvi', '40px');

  test_unit(iframe, '10dvb', '20px');

  test_unit(iframe, '10dvmin', '20px');

  test_unit(iframe, '10dvmax', '40px');

</script>