Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

WebKit export of https://bugs.webkit.org/show_bug.cgi?id=264226 #43541

Merged
merged 1 commit into from
Dec 22, 2023
Merged

WebKit export of https://bugs.webkit.org/show_bug.cgi?id=264226 #43541

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 0 additions & 2 deletions custom-elements/state/tentative/ElementInternals-states.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,6 @@
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'); });
}, 'CustomStateSet behavior of ElementInternals.states: Exceptions');

test(() => {
Expand Down
76 changes: 41 additions & 35 deletions custom-elements/state/tentative/state-pseudo-class.html
View file
Open in desktop
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,44 @@
customElements.define('container-element', ContainerElement);

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

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'); });
}, ':--foo parsing failures');
assert_throws_dom('SyntaxError', () => { document.querySelector(':state(--name=value'); });
assert_throws_dom('SyntaxError', () => { document.querySelector(':state(--name=value)'); });
}, ':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(foo) 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(foo) in simple cases');

test(() => {
let element = new TestElement();
Expand All @@ -94,10 +100,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(foo) and other pseudo classes');

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

innerStates.add('--innerFoo');
innerStates.add(':state(innerFoo)');
assert_equals(getComputedStyle(inner).opacity, '0.5',
'::part() followed by :--foo');
innerStates.delete('--innerFoo');
innerStates.add('--innerfoo');
'::part() followed by :state(innerFoo)');
innerStates.delete('innerFoo');
innerStates.add('innerfoo');
assert_equals(getComputedStyle(inner).opacity, '0',
':--foo matching should be case-sensitive');
innerStates.delete('--innerfoo');
':state(foo) 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(foo) followed by ::part()');
}, ':state(foo) 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(foo) and :host()');
</script>
</body>
74 changes: 74 additions & 0 deletions custom-state-pseudo-class/state-css-selector-shadow-dom.tentative.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="timeout" content="long" />
<meta
name="author"
title="Keith Cirkel"
href="mailto:wpt@keithcirkel.co.uk"
/>
<link rel="help" href="https://wicg.github.io/custom-state-pseudo-class/" />
<title>:state() css selector applies in shadow roots</title>

<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
</head>
<body>
<custom-state id="myCE"> I should be green </custom-state>
<style></style>
<script>
customElements.define(
"custom-state",
class extends HTMLElement {
connectedCallback() {
this.elementInternals = this.attachInternals();
const css = new CSSStyleSheet();
css.replaceSync(`
:host {
color: #f00;
}
:host:state(green) {
color: #0f0;
}
`);
this.attachShadow({ mode: "open" }).adoptedStyleSheets.push(css);
}
},
);

test(function () {
assert_false(myCE.elementInternals.states.has("green"));
assert_equals(
getComputedStyle(myCE).getPropertyValue("color"),
"rgb(255, 0, 0)",
);
}, "state selector has no influence when state is not applied");

test(function (t) {
myCE.elementInternals.states.add("green");
t.add_cleanup(() => {
myCE.elementInternals.states.delete("green");
});
assert_true(myCE.elementInternals.states.has("green"));
assert_equals(
getComputedStyle(myCE).getPropertyValue("color"),
"rgb(0, 255, 0)",
);
}, "state selector has influence when state is applied");

test(function (t) {
myCE.elementInternals.states.add("foo");
t.add_cleanup(() => {
myCE.elementInternals.states.delete("foo");
});
assert_false(myCE.elementInternals.states.has("green"));
assert_true(myCE.elementInternals.states.has("foo"));
assert_equals(
getComputedStyle(myCE).getPropertyValue("color"),
"rgb(255, 0, 0)",
);
}, "state selector only applies on given ident");
</script>
</body>
</html>