266455 2023-12-14 20:47:26 -0800 :user-invalid and :user-valid do not trigger for Form Associated Custom Elements 2023-12-21 20:48:14 -0800 1 1 1 Unclassified WebKit CSS Safari 17 All All NEW InRadar P2 Normal --- 1 nathan webkit-unassigned ntim webkit-bug-importer oldest_to_newest 1999805 0 469055 nathan 2023-12-14 20:47:26 -0800 Created attachment 469055 Demonstration of :user-invalid and :user-valid with a form associated custom element (works in Firefox) `:user-invalid` and `:user-valid` do not work for form associated custom elements in Safari (or Chrome). It does work correctly in Firefox. I am able to trigger those pseudo-classes for a form associated custom element in Firefox when I make the form value of the element dirty with `ElementInternals.setFormValue()`, then either by setting or clearing a constraint violation with `ElementInternals.setValidity()`. 1999809 1 nathan 2023-12-14 21:09:04 -0800 Chromium issue is here: https://bugs.chromium.org/p/chromium/issues/detail?id=1511887 1999812 2 ntim 2023-12-14 21:20:20 -0800 It's not supposed to trigger for form associated custom elements according to the spec: https://html.spec.whatwg.org/#selector-user-valid There is a spec issue to change that though: https://github.com/whatwg/html/issues/9639 Firefox's implementation pre-dates the official specification for :user-valid/invalid. 2001549 3 webkit-bug-importer 2023-12-21 20:48:14 -0800 <rdar://problem/120027003> 469055 2023-12-14 20:47:26 -0800 2023-12-14 20:47:26 -0800 Demonstration of :user-invalid and :user-valid with a form associated custom element (works in Firefox) user-invalid-user-valid-face.html text/html 2570 nathan PCFkb2N0eXBlPgo8aHRtbCBsYW5nPSJlbi1jYSI+CiAgPGhlYWQ+CiAgICA8bWV0YSBjaGFyc2V0 PSJ1dGYtOCI+CiAgICA8bWV0YSBuYW1lPSJ2aWV3cG9ydCIgY29udGVudD0id2lkdGg9ZGV2aWNl LXdpZHRoLCBpbml0aWFsLXNjYWxlPTEiPgogICAgPHRpdGxlPjp1c2VyLWludmFsaWQsIDp1c2Vy LXZhbGlkLCBhbmQgRm9ybSBBc3NvY2lhdGVkIEN1c3RvbSBFbGVtZW50czwvdGl0bGU+CiAgICA8 c3R5bGU+CiAgICAgIDpyb290IHsKICAgICAgICBmb250LWZhbWlseTogc3lzdGVtLXVpOwogICAg ICAgIGNvbG9yLXNjaGVtZTogZGFyayBsaWdodDsKICAgICAgICBsaW5lLWhlaWdodDogMS41Owog ICAgICB9IAogICAgPC9zdHlsZT4KICAgIDxzY3JpcHQgdHlwZT0ibW9kdWxlIj4KICAgICAgY2xh c3MgRm9ybUFzc29jaWF0ZWRFbGVtZW50IGV4dGVuZHMgSFRNTEVsZW1lbnQgewogICAgICAgIHN0 YXRpYyAjc3R5bGVTaGVldCA9IG5ldyBDU1NTdHlsZVNoZWV0KCk7CiAgICAgICAgc3RhdGljICN0 ZW1wbGF0ZSA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoInRlbXBsYXRlIik7CgogICAgICAgIHN0 YXRpYyB7CiAgICAgICAgICB0aGlzLiN0ZW1wbGF0ZS5pbm5lckhUTUwgPSAiPHNsb3Q+PC9zbG90 PiI7CiAgICAgICAgICB0aGlzLiNzdHlsZVNoZWV0LnJlcGxhY2VTeW5jKGAKICAgICAgICAgICAg Omhvc3QgewogICAgICAgICAgICAgIGRpc3BsYXk6IGJsb2NrOwogICAgICAgICAgICAgIGJsb2Nr LXNpemU6IDJyZW07CiAgICAgICAgICAgICAgYXNwZWN0LXJhdGlvOiAxOwogICAgICAgICAgICAg IGJhY2tncm91bmQtY29sb3I6IERvZGdlckJsdWU7CiAgICAgICAgICAgIH0KICAgICAgICAgICAg CiAgICAgICAgICAgIDpob3N0KDp1c2VyLWludmFsaWQpIHsKICAgICAgICAgICAgICBiYWNrZ3Jv dW5kLWNvbG9yOiBDcmltc29uOwogICAgICAgICAgICB9CiAgICAgICAgICAgIAogICAgICAgICAg ICA6aG9zdCg6dXNlci12YWxpZCkgewogICAgICAgICAgICAgIGJhY2tncm91bmQtY29sb3I6IEdy ZWVuOwogICAgICAgICAgICB9CiAgICAgICAgICBgKTsKICAgICAgICB9CgogICAgICAgIHN0YXRp YyBmb3JtQXNzb2NpYXRlZCA9IHRydWU7CgogICAgICAgICNpbnRlcm5hbHMgPSB0aGlzLmF0dGFj aEludGVybmFscygpOwogICAgICAgIHNoYWRvd1Jvb3QgPSB0aGlzLmF0dGFjaFNoYWRvdyh7IG1v ZGU6ICJvcGVuIiB9KTsKCiAgICAgICAgY29uc3RydWN0b3IoKSB7CiAgICAgICAgICBzdXBlcigp OwogICAgICAgICAgCiAgICAgICAgICB0aGlzLnNoYWRvd1Jvb3QuYWRvcHRlZFN0eWxlU2hlZXRz ID0gW3RoaXMuY29uc3RydWN0b3IuI3N0eWxlU2hlZXRdOwogICAgICAgICAgdGhpcy5zaGFkb3dS b290LmFwcGVuZENoaWxkKHRoaXMuY29uc3RydWN0b3IuI3RlbXBsYXRlLmNvbnRlbnQuY2xvbmVO b2RlKHRydWUpKTsKICAgICAgICAgIAogICAgICAgICAgdGhpcy5hZGRFdmVudExpc3RlbmVyKCJj bGljayIsIHRoaXMpOwogICAgICAgIH0KCiAgICAgICAgaW52YWxpZCA9IGZhbHNlOwogICAgICAg IGhhbmRsZUV2ZW50KGV2ZW50KSB7CiAgICAgICAgICB0aGlzLmludmFsaWQgPSAhdGhpcy5pbnZh bGlkOwogICAgICAgICAgCiAgICAgICAgICAvLyBNYWtlIHRoZSBmb3JtIHZhbHVlIGRpcnR5CiAg ICAgICAgICB0aGlzLiNpbnRlcm5hbHMuc2V0Rm9ybVZhbHVlKHRoaXMuaW52YWxpZCA/ICJpbnZh bGlkIiA6ICJ2YWxpZCIpOwogICAgICAgICAgCiAgICAgICAgICAvLyBTZXQgYSBjb25zdHJhaW50 IHZpb2xhdGlvbgogICAgICAgICAgaWYgKHRoaXMuaW52YWxpZCkgdGhpcy4jaW50ZXJuYWxzLnNl dFZhbGlkaXR5KHsgYmFkSW5wdXQ6IHRydWUgfSwgImJhZCIpOwogICAgICAgICAgLy8gQ2xlYXIg aXQKICAgICAgICAgIGVsc2UgdGhpcy4jaW50ZXJuYWxzLnNldFZhbGlkaXR5KHt9KTsKICAgICAg ICB9CiAgICAgIH0KCiAgICAgIGN1c3RvbUVsZW1lbnRzLmRlZmluZSgiZm9ybS1hc3NvY2lhdGVk IiwgRm9ybUFzc29jaWF0ZWRFbGVtZW50KTsKICAgIDwvc2NyaXB0PgogIDwvaGVhZD4KICA8Ym9k eT4KICAgIDxoMT48Y29kZT46dXNlci1pbnZhbGlkPC9jb2RlPiwgPGNvZGU+OnVzZXItdmFsaWQ8 L2NvZGU+LCBhbmQgRm9ybSBBc3NvY2lhdGVkIEN1c3RvbSBFbGVtZW50czwvaDE+CiAgICA8cD5D bGlja2luZyB0aGUgYm94IHNob3VsZCBtYWtlIGl0IGdvIDxzdHJvbmcgc3R5bGU9ImNvbG9yOiBD cmltc29uOyBiYWNrZ3JvdW5kLWNvbG9yOiB3aGl0ZTsgcGFkZGluZy1pbmxpbmU6IDJweDsiPmNy aW1zb248L3N0cm9uZz4gd2hlbiBpbnZhbGlkLCB0aGVuIGNsaWNraW5nIGFnYWluIHdpbGwgbWFr ZSBpdCA8c3Ryb25nIHN0eWxlPSJjb2xvcjogR3JlZW47IGJhY2tncm91bmQtY29sb3I6IHdoaXRl OyBwYWRkaW5nLWlubGluZTogMnB4OyI+Z3JlZW48L3N0cm9uZz4gd2hlbiB2YWxpZC4gQXMgb2Yg RGVjZW1iZXIgMTQsIDIwMjMsIHRoaXMgb25seSB3b3JrcyBjb3JyZWN0bHkgaW4gRmlyZWZveC48 L3A+CiAgICA8Zm9ybS1hc3NvY2lhdGVkPjwvZm9ybS1hc3NvY2lhdGVkPgogIDwvYm9keT4KPC9o dG1sPgo=