conditional-rules.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /css/css-properties-values-api/conditional-rules.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

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

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

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

<script>

  CSS.registerProperty({

    name: '--length',

    syntax: '<length>',

    initialValue: '0px',

    inherits: false

});

</script>

<style>

  #target { color: red; }

  @supports(--length: green) {

    #target { color: rgb(1, 2, 3); }

</style>

<div id=target></div>

<script>

test(function() {

  let cs = getComputedStyle(target);

  assert_equals(cs.getPropertyValue('color'), 'rgb(1, 2, 3)');

}, '@supports should ignore registered syntax');

test(function() {

  assert_true(CSS.supports('--length: red'));

  assert_true(CSS.supports('--length: 10px'));

  assert_true(CSS.supports('--length: anything, really'));

}, 'CSS.supports(conditionText) should ignore registered syntax');

test(function() {

  assert_true(CSS.supports('--length', 'red'));

  assert_true(CSS.supports('--length', '10px'));

  assert_true(CSS.supports('--length', ' anything, really'));

}, 'CSS.supports(property, value) should ignore registered syntax');

</script>