at-property-shadow.html

Enable keyboard shortcuts

This test has a WPT meta file that expects 1 subtest issues.
This WPT test may be referenced by the following Test IDs:
- /css/css-properties-values-api/at-property-shadow.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

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

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

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

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

<style>

  @property --x {

    syntax: "<length>";

    inherits: false;

    initial-value: 0px;

  #outside {

    --x: calc(1px + 1px);

    --y: calc(1px + 1px);

</style>

<template id=template>

  <style>

    /* This rule should be globally registered */

    @property --y {

      syntax: "<length>";

      inherits: false;

      initial-value: 0px;

    #inside {

      --x: calc(1px + 1px);

      --y: calc(1px + 1px);

  </style>

  <div id=inside></div>

</template>

<div id=host></div>

<div id=outside></div>

<script>

test(() => {

  let root = host.attachShadow({ mode: 'open' });

  root.append(template.content.cloneNode(true));

  let inside = root.querySelector('#inside');

  assert_equals(getComputedStyle(outside).getPropertyValue('--x'), '2px');

  assert_equals(getComputedStyle(outside).getPropertyValue('--y'), '2px');

  assert_equals(getComputedStyle(inside).getPropertyValue('--x'), '2px');

  assert_equals(getComputedStyle(inside).getPropertyValue('--y'), '2px');

}, '@property rules in shadow trees should be globally registered');

</script>