Rules for :focus-within CSS selector doesn't apply if focus is applied with the Element state tool
Reported by
trondkje...@appear.in,
Sep 12 2017
|
|||||
Issue descriptionUserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3163.71 Safari/537.36 Steps to reproduce the problem: 1. Create an <input> element inside a wrapper <div> 2. Add a div:focus-within CSS-rule 3. Use Dev Tools to manually set focus to the input element What is the expected behavior? The :focus-within CSS rule should apply What went wrong? The :focus-within CSS rule doesn't apply. Did this work before? No Chrome version: 61.0.3163.71 Channel: n/a OS Version: OS X 10.12.6 Flash Version: I've created this to test out the bug: http://jsbin.com/yasitavabe/1/edit?html,css,output
,
Sep 14 2017
Thanks for the bug report. @einbinder - looks like Chrome just implemented ":focus-within" in M60: https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within
,
Sep 14 2017
,
Nov 15 2017
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/ef2908381c0811085b4d4c2f14321b2271a01302 commit ef2908381c0811085b4d4c2f14321b2271a01302 Author: Joel Einbinder <einbinder@chromium.org> Date: Wed Nov 15 22:44:01 2017 DevTools: Add support for :focus-within selector https://i.imgur.com/lTnUawV.png Bug: 764270 Change-Id: I998c9da104d7c249fc7198d28c5d1f7731ab3b64 Reviewed-on: https://chromium-review.googlesource.com/764397 Reviewed-by: Andrey Lushnikov <lushnikov@chromium.org> Reviewed-by: Erik Luo <luoe@chromium.org> Commit-Queue: Joel Einbinder <einbinder@chromium.org> Cr-Commit-Position: refs/heads/master@{#516871} [modify] https://crrev.com/ef2908381c0811085b4d4c2f14321b2271a01302/third_party/WebKit/Source/devtools/front_end/elements/ElementStatePaneWidget.js [modify] https://crrev.com/ef2908381c0811085b4d4c2f14321b2271a01302/third_party/WebKit/Source/devtools/front_end/elements/ElementsTreeElement.js [modify] https://crrev.com/ef2908381c0811085b4d4c2f14321b2271a01302/third_party/WebKit/Source/devtools/front_end/elements/elementStatePaneWidget.css
,
Nov 16 2017
Verified this issue on Windows 10, Ubuntu 14.04 & Mac 10.12.6 with chrome #64.0.3270.0 and observed the support for :focus-within css rule in dev tools. Hence adding TE-Verified labels Attaching the screen-cast for reference.
,
Oct 12
|
|||||
►
Sign in to add a comment |
|||||
Comment 1 by ligim...@chromium.org
, Sep 12 2017