Implement :state(foo) alongside :--foo

This patch implements :state(foo) alongsite :--foo so that we can have both supported on stable at the same time and then deprecate/remove :--foo. This patch does not enable :state(foo) by default. I will do that after implementing deprecation for :--foo. Due to pushback from webkit, the syntax for this feature was discussed again in the CSSWG, and a resolution was made to go back from :--foo to :state(foo): w3c/csswg-drafts#4805 (comment) This was discussed in an I2S where we decided to only deprecate :--foo if WebKit ships :--foo, which has now happened. https://groups.google.com/a/chromium.org/g/blink-dev/c/JvpHoUfhJYE Fixed: 1508033 Bug: 1514397 Change-Id: I497fd5acc05ba033e8e72c429568099c89d5d639
web-platform-tests · Jan 3, 2024 · 16adefd · 16adefd
1 parent 3450d24
commit 16adefd
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 9 deletions.
diff --git a/custom-elements/state/tentative/ElementInternals-states.html b/custom-elements/state/tentative/ElementInternals-states.html
@@ -27,6 +27,8 @@
 test(() => {
   let i = (new TestElement()).internals;
   assert_throws_js(TypeError, () => { i.states.supports('foo'); });
+  i.states.add(''); // should not throw.
+  i.states.add('--a\tb'); // should not throw.
 }, 'CustomStateSet behavior of ElementInternals.states: Exceptions');
 
 test(() => {

diff --git a/custom-elements/state/tentative/state-pseudo-class.html b/custom-elements/state/tentative/state-pseudo-class.html
@@ -11,7 +11,7 @@
 #state-and-part:state(outerFoo)::part(inner) {
   opacity: 0.25;
 }
-:state(--\)escaped\ state) {}
+:state( \(escaped\ state  ) {}
 </style>
 <body>
 <script>
@@ -60,22 +60,29 @@
   document.querySelector(':state(--16px)');
 }, ':state() parsing passes');
 
+test(() => {
+  assert_throws_dom('SyntaxError', () => { document.querySelector(':state'); });
+  assert_throws_dom('SyntaxError', () => { document.querySelector(':state('); });
+  assert_throws_dom('SyntaxError', () => { document.querySelector(':state()'); });
+  assert_throws_dom('SyntaxError', () => { document.querySelector(':state(=)'); });
+  assert_throws_dom('SyntaxError', () => { document.querySelector(':state(name=value)'); });
+  assert_throws_dom('SyntaxError', () => { document.querySelector(':state( foo bar)'); });
+  assert_throws_dom('SyntaxError', () => { document.querySelector(':state(16px)'); });
+}, ':state() parsing failures');
+
 test(() => {
   assert_throws_dom('SyntaxError', () => { document.querySelector(':--('); });
   assert_throws_dom('SyntaxError', () => { document.querySelector(':--()'); });
-  assert_throws_dom('SyntaxError', () => { document.querySelector(':state()'); });
   assert_throws_dom('SyntaxError', () => { document.querySelector(':--)'); });
   assert_throws_dom('SyntaxError', () => { document.querySelector(':--='); });
   assert_throws_dom('SyntaxError', () => { document.querySelector(':--name=value'); });
-  assert_throws_dom('SyntaxError', () => { document.querySelector(':state(--name=value'); });
-  assert_throws_dom('SyntaxError', () => { document.querySelector(':state(--name=value)'); });
-}, ':state() parsing failures');
+}, 'deprecated :--state parsing failures');
 
 test(() => {
   assert_equals(document.styleSheets[0].cssRules[1].cssText,
       '#state-and-part::part(inner):state(innerFoo) { opacity: 0.5; }');
   assert_equals(document.styleSheets[0].cssRules[3].selectorText,
-      ':state(--\\)escaped\\ state)');
+      ':state(\\(escaped\\ state)');
 }, ':state(foo) serialization');
 
 test(() => {
@@ -112,13 +119,13 @@
   let inner = outer.innerElement;
   let innerStates = inner.i.states;
 
-  innerStates.add(':state(innerFoo)');
+  innerStates.add('innerFoo');
   assert_equals(getComputedStyle(inner).opacity, '0.5',
-      '::part() followed by :state(innerFoo)');
+      '::part() followed by :state()');
   innerStates.delete('innerFoo');
   innerStates.add('innerfoo');
   assert_equals(getComputedStyle(inner).opacity, '0',
-      ':state(foo) matching should be case-sensitive');
+      ':state() matching should be case-sensitive');
   innerStates.delete('innerfoo');
 
   outer.i.states.add('outerFoo');