TIL: SVGs have additional pointer-events properties

#css #svg

Today I came across this example about certain things you can do with pointer-events in CSS.

.foo {
  pointer-events: visiblePainted;
}

visiblePainted is something I haven't seen before and it turns out that SVGs several other values for the pointer-events property:

visiblePainted
visibleFill
visibleStroke
visible
painted
fill
stroke
all

You can control very granular how elements in an SVG should behave and it's not bound to the typical "web development boxes". If you want to read more MDN has you covered. :)

5 Playwright CLI Flags That Will Transform Your Testing Workflow

Watch Full Video 📹️

Top comments (0)

5 Playwright CLI Flags That Will Transform Your Testing Workflow

--last-failed: Zero in on just the tests that failed in your previous run

--only-changed: Test only the spec files you've modified in git

--repeat-each: Run tests multiple times to catch flaky behavior before it reaches production

--forbid-only: Prevent accidental test.only commits from breaking your CI pipeline

--ui --headed --workers 1: Debug visually with browser windows and sequential test execution

Learn how these powerful command-line options can save you time, strengthen your test suite, and streamline your Playwright testing experience. Practical examples included!

--last-failed: Zero in on just the tests that failed in your previous run
--only-changed: Test only the spec files you've modified in git
--repeat-each: Run tests multiple times to catch flaky behavior before it reaches production
--forbid-only: Prevent accidental test.only commits from breaking your CI pipeline
--ui --headed --workers 1: Debug visually with browser windows and sequential test execution

Watch Video 📹️

DEV Community

TIL: SVGs have additional pointer-events properties

5 Playwright CLI Flags That Will Transform Your Testing Workflow

Top comments (0)

5 Playwright CLI Flags That Will Transform Your Testing Workflow

Okay