`.toHaveStyle()` doesn't know about aspect-ratio

• @testing-library/jest-dom version: 6.3.0
• node version: 20.9.0
• jest version: 27.5.1 (from create react app)
• npm version: 10.1.0

Relevant code or config:

function App() {
  return <div style={{ aspectRatio: "1 / 1" }}>Hello</div>;
}

  it("should have an aspect-ratio", () => {
    render(<App />);
    const app = screen.getByText("Hello");
    expect(app).toHaveStyle({ "aspect-ratio": "1 / 1" });
    expect(app).toHaveStyle({ aspectRatio: "1 / 1" });
  });

What you did:

npm test

What happened:

✕ should have an aspect-ratio (47 ms)

  ● <App> › should have an aspect-ratio

    expect(element).toHaveStyle()

    - Expected

    - aspect-ratio: 1 / 1;

      11 |     - Expected
      12 |     - aspect-ratio: 1 / 1; */
    > 13 |     expect(app).toHaveStyle({ "aspect-ratio": "1 / 1" });
         |                 ^
      14 |     expect(app).toHaveStyle({ aspectRatio: "1 / 1" });
      15 |   });
      16 |

      at Object.<anonymous> (src/App.test.js:13:17)

A worker process has failed to exit gracefully and has been force exited. This is likely caused by tests leaking due to improper teardown. Try running with --detectOpenHandles to find leaks. Active timers can also cause this, ensure that .unref() was called on them.
Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total

Reproduction:

https://github.com/Fullchee/jest-dom-to-have-style

Problem description:

It works for other CSS properties, like color: blue

Suggested solution:

It looks like the dependency@adobe/css-tools can handle aspect-ratio so I don't think it's that

I'm not sure what defaultView is here

const {getComputedStyle} = htmlElement.ownerDocument.defaultView