Skip to content

Commit

Permalink
Change custom state pseudo from :--foo to :state(foo)
Browse files Browse the repository at this point in the history 
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 patch is a revert of http://crrev.com/845429, which renamed from
:state(foo) to :--foo.

Since we are shipping the :--foo syntax to stable chrome, we will need
to keep the old behavior supported in stable for now and change it with
an intent to ship.

The UseCounter for the existing stable behavior is here:
https://chromestatus.com/metrics/feature/timeline/popularity/3796

Bug: 1012098
Change-Id: I0b43c83e12b36ebb3ae537e7ba7973715edbdedc
  • Loading branch information
@josepharhar @chromium-wpt-export-bot
josepharhar authored and chromium-wpt-export-bot committed Sep 26, 2023
1 parent ad393ed commit 64b0c3b
Show file tree
Hide file tree
Showing 2 changed files with 41 additions and 43 deletions.
4 changes: 2 additions & 2 deletions custom-elements/state/tentative/ElementInternals-states.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,8 @@
test(() => {
let i = (new TestElement()).internals;
assert_throws_js(TypeError, () => { i.states.supports('foo'); });
assert_throws_dom('SyntaxError', () => { i.states.add(''); });
assert_throws_dom('SyntaxError', () => { i.states.add('--a\tb'); });
i.states.add(''); // should not throw.
i.states.add('--a\tb'); // should not throw.
}, 'CustomStateSet behavior of ElementInternals.states: Exceptions');

test(() => {
Expand Down
80 changes: 39 additions & 41 deletions custom-elements/state/tentative/state-pseudo-class.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,13 @@
#state-and-part::part(inner) {
opacity: 0;
}
#state-and-part::part(inner):--innerFoo {
#state-and-part::part(inner):state(innerFoo) {
opacity: 0.5;
}
#state-and-part:--outerFoo::part(inner) {
#state-and-part:state(outerFoo)::part(inner) {
opacity: 0.25;
}
:--\(escaped\ state {}
:state( \(escaped\ state ) {}
</style>
<body>
<script>
Expand All @@ -37,7 +37,7 @@
:host {
border-style: solid;
}
:host(:--dotted) {
:host(:state(dotted)) {
border-style: dotted;
}
</style>
Expand All @@ -54,38 +54,36 @@
customElements.define('container-element', ContainerElement);

test(() => {
document.querySelector(':--');
document.querySelector(':--16px');
}, ':--foo parsing passes');

test(() => {
assert_throws_dom('SyntaxError', () => { document.querySelector(':--('); });
assert_throws_dom('SyntaxError', () => { document.querySelector(':--)'); });
assert_throws_dom('SyntaxError', () => { document.querySelector(':--='); });
assert_throws_dom('SyntaxError', () => { document.querySelector(':--name=value'); });
}, ':--foo parsing failures');
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_equals(document.styleSheets[0].cssRules[1].cssText,
'#state-and-part::part(inner):--innerFoo { opacity: 0.5; }');
'#state-and-part::part(inner):state(innerFoo) { opacity: 0.5; }');
assert_equals(document.styleSheets[0].cssRules[3].selectorText,
':--\\(escaped\\ state');
}, ':--foo serialization');
':state(\\(escaped\\ state)');
}, ':state() serialization');

test(() => {
let element = new TestElement();
let states = element.i.states;

assert_false(element.matches(':--foo'));
assert_true(element.matches(':not(:--foo)'));
states.add('--foo');
assert_true(element.matches(':--foo'));
assert_true(element.matches(':is(:--foo)'));
assert_false(element.matches(':state(foo)'));
assert_true(element.matches(':not(:state(foo))'));
states.add('foo');
assert_true(element.matches(':state(foo)'));
assert_true(element.matches(':is(:state(foo))'));
element.classList.add('c1', 'c2');
assert_true(element.matches('.c1:--foo'));
assert_true(element.matches(':--foo.c1'));
assert_true(element.matches('.c2:--foo.c1'));
}, ':--foo in simple cases');
assert_true(element.matches('.c1:state(foo)'));
assert_true(element.matches(':state(foo).c1'));
assert_true(element.matches('.c2:state(foo).c1'));
}, ':state() in simple cases');

test(() => {
let element = new TestElement();
Expand All @@ -94,10 +92,10 @@
element.focus();
let states = element.i.states;

states.add('--foo');
assert_true(element.matches(':focus:--foo'));
assert_true(element.matches(':--foo:focus'));
}, ':--foo and other pseudo classes');
states.add('foo');
assert_true(element.matches(':focus:state(foo)'));
assert_true(element.matches(':state(foo):focus'));
}, ':state() and other pseudo classes');

test(() => {
let outer = new ContainerElement();
Expand All @@ -106,27 +104,27 @@
let inner = outer.innerElement;
let innerStates = inner.i.states;

innerStates.add('--innerFoo');
innerStates.add('innerFoo');
assert_equals(getComputedStyle(inner).opacity, '0.5',
'::part() followed by :--foo');
innerStates.delete('--innerFoo');
innerStates.add('--innerfoo');
'::part() followed by :state()');
innerStates.delete('innerFoo');
innerStates.add('innerfoo');
assert_equals(getComputedStyle(inner).opacity, '0',
':--foo matching should be case-sensitive');
innerStates.delete('--innerfoo');
':state() matching should be case-sensitive');
innerStates.delete('innerfoo');

outer.i.states.add('--outerFoo');
outer.i.states.add('outerFoo');
assert_equals(getComputedStyle(inner).opacity, '0.25',
':--foo followed by ::part()');
}, ':--foo and ::part()');
':state() followed by ::part()');
}, ':state() and ::part()');

test(() => {
let outer = new ContainerElement();
document.body.appendChild(outer);

assert_equals(getComputedStyle(outer).borderStyle, 'solid');
outer.i.states.add('--dotted');
outer.i.states.add('dotted');
assert_equals(getComputedStyle(outer).borderStyle, 'dotted');
}, ':--foo and :host()');
}, ':state() and :host()');
</script>
</body>

0 comments on commit 64b0c3b

Please sign in to comment.