forked from facebook/react
/
index.js
67 lines (58 loc) · 1.55 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
import FixtureSet from '../../FixtureSet';
import TestCase from '../../TestCase';
const SUPPORTS_SHADOW_DOM = 'attachShadow' in HTMLElement.prototype;
const React = window.React;
const ReactDOM = window.ReactDOM;
class SelectFixture extends React.Component {
render() {
if (!SUPPORTS_SHADOW_DOM) {
return (
<div>Browser does not support Shadow DOM, no tests to execute.</div>
);
}
return (
<FixtureSet title="Shadow DOM" description="">
<TestCase title="Event listeners in shadow-dom" relatedIssues="4963">
<TestCase.Steps>
<li>Click on the orange box</li>
</TestCase.Steps>
<TestCase.ExpectedResult>
The box should turn green
</TestCase.ExpectedResult>
<Shadow>
<Box />
</Shadow>
</TestCase>
</FixtureSet>
);
}
}
class Shadow extends React.Component {
componentDidMount() {
this.ref.attachShadow({mode: 'open'});
const el = document.createElement('div');
this.ref.shadowRoot.appendChild(el);
ReactDOM.render(this.props.children, el);
}
render() {
return <div ref={ref => (this.ref = ref)} />;
}
}
class Box extends React.Component {
state = {active: false};
render() {
const style = {
height: 100,
background: this.state.active ? 'green' : 'orange',
color: 'white',
marginBottom: 20,
};
return (
<div
onClick={() => this.setState({active: !this.state.active})}
style={style}
/>
);
}
}
export default SelectFixture;