Skip to content
This repository was archived by the owner on Jan 13, 2025. It is now read-only.

Commit 553438a

Browse files
acdvorakKenneth G. Franqueiro
acdvorak
authored and
Kenneth G. Franqueiro
committed
fix(radio): Add missing @import for theme mixins; add screenshot tests (#3285)
(cherry picked from commit 0d73d06)
1 parent fd31108 commit 553438a

File tree

5 files changed

+298
-0
lines changed

5 files changed

+298
-0
lines changed

‎packages/mdc-radio/_mixins.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
// limitations under the License.
1515
//
1616

17+
@import "@material/theme/mixins";
1718
@import "@material/theme/variables";
1819
@import "./variables";
1920

‎test/screenshot/golden.json

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -314,6 +314,24 @@
314314
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/07/17/22_50_36_536/spec/mdc-icon-button/mixins/ink-color.html.windows_ie_11.png"
315315
}
316316
},
317+
"spec/mdc-radio/classes/baseline.html": {
318+
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/08/02/15_12_11_524/spec/mdc-radio/classes/baseline.html",
319+
"screenshots": {
320+
"desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/08/02/15_12_11_524/spec/mdc-radio/classes/baseline.html.windows_chrome_67.png",
321+
"desktop_windows_edge@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/08/02/15_12_11_524/spec/mdc-radio/classes/baseline.html.windows_edge_17.png",
322+
"desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/08/02/15_12_11_524/spec/mdc-radio/classes/baseline.html.windows_firefox_61.png",
323+
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/08/02/15_12_11_524/spec/mdc-radio/classes/baseline.html.windows_ie_11.png"
324+
}
325+
},
326+
"spec/mdc-radio/mixins/mixins.html": {
327+
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/08/02/15_12_11_524/spec/mdc-radio/mixins/mixins.html",
328+
"screenshots": {
329+
"desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/08/02/15_12_11_524/spec/mdc-radio/mixins/mixins.html.windows_chrome_67.png",
330+
"desktop_windows_edge@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/08/02/15_12_11_524/spec/mdc-radio/mixins/mixins.html.windows_edge_17.png",
331+
"desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/08/02/15_12_11_524/spec/mdc-radio/mixins/mixins.html.windows_firefox_61.png",
332+
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/08/02/15_12_11_524/spec/mdc-radio/mixins/mixins.html.windows_ie_11.png"
333+
}
334+
},
317335
"spec/mdc-switch/classes/baseline.html": {
318336
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/rlfriedman/2018/07/21/00_22_42_705/spec/mdc-switch/classes/baseline.html",
319337
"screenshots": {

‎test/screenshot/spec/mdc-radio/classes/baseline.html

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
<!DOCTYPE html>
2+
<!--
3+
Copyright 2018 Google Inc. All rights reserved.
4+
5+
Licensed under the Apache License, Version 2.0 (the "License");
6+
you may not use this file except in compliance with the License.
7+
You may obtain a copy of the License at
8+
9+
https://www.apache.org/licenses/LICENSE-2.0
10+
11+
Unless required by applicable law or agreed to in writing, software
12+
distributed under the License is distributed on an "AS IS" BASIS,
13+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14+
See the License for the specific language governing permissions and
15+
limitations under the License
16+
-->
17+
<html lang="en">
18+
<head>
19+
<meta charset="utf-8">
20+
<title>Baseline Radio - MDC Web Screenshot Test</title>
21+
<meta name="viewport" content="width=device-width, initial-scale=1">
22+
<link rel="stylesheet" href="../../../out/mdc.radio.css">
23+
<link rel="stylesheet" href="../../../out/spec/fixture.css">
24+
<link rel="stylesheet" href="../../../out/spec/mdc-radio/fixture.css">
25+
</head>
26+
27+
<body class="test-container mdc-typography">
28+
<main class="test-viewport test-viewport--mobile">
29+
<div class="test-layout">
30+
<div class="test-cell test-cell--radio">
31+
<div class="mdc-radio">
32+
<input class="mdc-radio__native-control" type="radio" name="enabled-radio-group">
33+
<div class="mdc-radio__background">
34+
<div class="mdc-radio__outer-circle"></div>
35+
<div class="mdc-radio__inner-circle"></div>
36+
</div>
37+
</div>
38+
</div>
39+
40+
<div class="test-cell test-cell--radio">
41+
<div class="mdc-radio">
42+
<input class="mdc-radio__native-control" type="radio" name="enabled-radio-group" checked>
43+
<div class="mdc-radio__background">
44+
<div class="mdc-radio__outer-circle"></div>
45+
<div class="mdc-radio__inner-circle"></div>
46+
</div>
47+
</div>
48+
</div>
49+
50+
<div class="test-cell test-cell--radio">
51+
<div class="mdc-radio mdc-radio--disabled">
52+
<input class="mdc-radio__native-control" type="radio" name="disabled-radio-group" disabled>
53+
<div class="mdc-radio__background">
54+
<div class="mdc-radio__outer-circle"></div>
55+
<div class="mdc-radio__inner-circle"></div>
56+
</div>
57+
</div>
58+
</div>
59+
60+
<div class="test-cell test-cell--radio">
61+
<div class="mdc-radio mdc-radio--disabled">
62+
<input class="mdc-radio__native-control" type="radio" name="disabled-radio-group" disabled checked>
63+
<div class="mdc-radio__background">
64+
<div class="mdc-radio__outer-circle"></div>
65+
<div class="mdc-radio__inner-circle"></div>
66+
</div>
67+
</div>
68+
</div>
69+
</div>
70+
</main>
71+
72+
<!-- Automatically provides/replaces `Promise` if missing or broken. -->
73+
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.js"></script>
74+
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.js"></script>
75+
<script src="https://cdnjs.cloudflare.com/ajax/libs/fontfaceobserver/2.0.13/fontfaceobserver.standalone.js"></script>
76+
<script src="../../../out/spec/fixture.js"></script>
77+
</body>
78+
</html>

‎test/screenshot/spec/mdc-radio/fixture.scss

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
//
2+
// Copyright 2018 Google Inc. All Rights Reserved.
3+
//
4+
// Licensed under the Apache License, Version 2.0 (the "License");
5+
// you may not use this file except in compliance with the License.
6+
// You may obtain a copy of the License at
7+
//
8+
// http://www.apache.org/licenses/LICENSE-2.0
9+
//
10+
// Unless required by applicable law or agreed to in writing, software
11+
// distributed under the License is distributed on an "AS IS" BASIS,
12+
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
// See the License for the specific language governing permissions and
14+
// limitations under the License.
15+
//
16+
17+
@import "../../../../packages/mdc-radio/mixins";
18+
@import "../../../../packages/mdc-theme/color-palette";
19+
20+
$custom-radio-color: $material-color-red-300;
21+
22+
.test-cell--radio {
23+
width: 71px;
24+
height: 71px;
25+
}
26+
27+
.custom-radio--unchecked-stroke-color {
28+
@include mdc-radio-unchecked-stroke-color($custom-radio-color);
29+
}
30+
31+
.custom-radio--checked-stroke-color {
32+
@include mdc-radio-checked-stroke-color($custom-radio-color);
33+
}
34+
35+
.custom-radio--ink-color {
36+
@include mdc-radio-ink-color($custom-radio-color);
37+
}

‎test/screenshot/spec/mdc-radio/mixins/mixins.html

Lines changed: 164 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,164 @@
1+
<!DOCTYPE html>
2+
<!--
3+
Copyright 2018 Google Inc. All Rights Reserved.
4+
5+
Licensed under the Apache License, Version 2.0 (the "License");
6+
you may not use this file except in compliance with the License.
7+
You may obtain a copy of the License at
8+
9+
https://www.apache.org/licenses/LICENSE-2.0
10+
11+
Unless required by applicable law or agreed to in writing, software
12+
distributed under the License is distributed on an "AS IS" BASIS,
13+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14+
See the License for the specific language governing permissions and
15+
limitations under the License.
16+
-->
17+
<html lang="en">
18+
<head>
19+
<meta charset="utf-8">
20+
<title>Radio Mixins - MDC Web Screenshot Test</title>
21+
<meta name="viewport" content="width=device-width, initial-scale=1">
22+
<link rel="stylesheet" href="../../../out/mdc.radio.css">
23+
<link rel="stylesheet" href="../../../out/spec/fixture.css">
24+
<link rel="stylesheet" href="../../../out/spec/mdc-radio/fixture.css">
25+
</head>
26+
27+
<body class="test-container mdc-typography">
28+
<main class="test-viewport test-viewport--mobile">
29+
<div class="test-layout">
30+
<!-- unchecked-stroke-color -->
31+
32+
<div class="test-cell test-cell--radio">
33+
<div class="mdc-radio custom-radio--unchecked-stroke-color">
34+
<input class="mdc-radio__native-control" type="radio" name="unchecked-stroke-color__enabled-radio-group">
35+
<div class="mdc-radio__background">
36+
<div class="mdc-radio__outer-circle"></div>
37+
<div class="mdc-radio__inner-circle"></div>
38+
</div>
39+
</div>
40+
</div>
41+
42+
<div class="test-cell test-cell--radio">
43+
<div class="mdc-radio custom-radio--unchecked-stroke-color">
44+
<input class="mdc-radio__native-control" type="radio" name="unchecked-stroke-color__enabled-radio-group" checked>
45+
<div class="mdc-radio__background">
46+
<div class="mdc-radio__outer-circle"></div>
47+
<div class="mdc-radio__inner-circle"></div>
48+
</div>
49+
</div>
50+
</div>
51+
52+
<div class="test-cell test-cell--radio">
53+
<div class="mdc-radio mdc-radio--disabled custom-radio--unchecked-stroke-color">
54+
<input class="mdc-radio__native-control" type="radio" name="unchecked-stroke-color__disabled-radio-group" disabled>
55+
<div class="mdc-radio__background">
56+
<div class="mdc-radio__outer-circle"></div>
57+
<div class="mdc-radio__inner-circle"></div>
58+
</div>
59+
</div>
60+
</div>
61+
62+
<div class="test-cell test-cell--radio">
63+
<div class="mdc-radio mdc-radio--disabled custom-radio--unchecked-stroke-color">
64+
<input class="mdc-radio__native-control" type="radio" name="unchecked-stroke-color__disabled-radio-group" disabled checked>
65+
<div class="mdc-radio__background">
66+
<div class="mdc-radio__outer-circle"></div>
67+
<div class="mdc-radio__inner-circle"></div>
68+
</div>
69+
</div>
70+
</div>
71+
72+
<!-- checked-stroke-color -->
73+
74+
<div class="test-cell test-cell--radio">
75+
<div class="mdc-radio custom-radio--checked-stroke-color">
76+
<input class="mdc-radio__native-control" type="radio" name="checked-stroke-color__enabled-radio-group">
77+
<div class="mdc-radio__background">
78+
<div class="mdc-radio__outer-circle"></div>
79+
<div class="mdc-radio__inner-circle"></div>
80+
</div>
81+
</div>
82+
</div>
83+
84+
<div class="test-cell test-cell--radio">
85+
<div class="mdc-radio custom-radio--checked-stroke-color">
86+
<input class="mdc-radio__native-control" type="radio" name="checked-stroke-color__enabled-radio-group" checked>
87+
<div class="mdc-radio__background">
88+
<div class="mdc-radio__outer-circle"></div>
89+
<div class="mdc-radio__inner-circle"></div>
90+
</div>
91+
</div>
92+
</div>
93+
94+
<div class="test-cell test-cell--radio">
95+
<div class="mdc-radio mdc-radio--disabled custom-radio--checked-stroke-color">
96+
<input class="mdc-radio__native-control" type="radio" name="checked-stroke-color__disabled-radio-group" disabled>
97+
<div class="mdc-radio__background">
98+
<div class="mdc-radio__outer-circle"></div>
99+
<div class="mdc-radio__inner-circle"></div>
100+
</div>
101+
</div>
102+
</div>
103+
104+
<div class="test-cell test-cell--radio">
105+
<div class="mdc-radio mdc-radio--disabled custom-radio--checked-stroke-color">
106+
<input class="mdc-radio__native-control" type="radio" name="checked-stroke-color__disabled-radio-group" disabled checked>
107+
<div class="mdc-radio__background">
108+
<div class="mdc-radio__outer-circle"></div>
109+
<div class="mdc-radio__inner-circle"></div>
110+
</div>
111+
</div>
112+
</div>
113+
114+
<!-- ink-color -->
115+
116+
<div class="test-cell test-cell--radio">
117+
<div class="mdc-radio custom-radio--ink-color">
118+
<input class="mdc-radio__native-control" type="radio" name="ink-color__enabled-radio-group">
119+
<div class="mdc-radio__background">
120+
<div class="mdc-radio__outer-circle"></div>
121+
<div class="mdc-radio__inner-circle"></div>
122+
</div>
123+
</div>
124+
</div>
125+
126+
<div class="test-cell test-cell--radio">
127+
<div class="mdc-radio custom-radio--ink-color">
128+
<input class="mdc-radio__native-control" type="radio" name="ink-color__enabled-radio-group" checked>
129+
<div class="mdc-radio__background">
130+
<div class="mdc-radio__outer-circle"></div>
131+
<div class="mdc-radio__inner-circle"></div>
132+
</div>
133+
</div>
134+
</div>
135+
136+
<div class="test-cell test-cell--radio">
137+
<div class="mdc-radio mdc-radio--disabled custom-radio--ink-color">
138+
<input class="mdc-radio__native-control" type="radio" name="ink-color__disabled-radio-group" disabled>
139+
<div class="mdc-radio__background">
140+
<div class="mdc-radio__outer-circle"></div>
141+
<div class="mdc-radio__inner-circle"></div>
142+
</div>
143+
</div>
144+
</div>
145+
146+
<div class="test-cell test-cell--radio">
147+
<div class="mdc-radio mdc-radio--disabled custom-radio--ink-color">
148+
<input class="mdc-radio__native-control" type="radio" name="ink-color__disabled-radio-group" disabled checked>
149+
<div class="mdc-radio__background">
150+
<div class="mdc-radio__outer-circle"></div>
151+
<div class="mdc-radio__inner-circle"></div>
152+
</div>
153+
</div>
154+
</div>
155+
</div>
156+
</main>
157+
158+
<!-- Automatically provides/replaces `Promise` if missing or broken. -->
159+
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.js"></script>
160+
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.js"></script>
161+
<script src="https://cdnjs.cloudflare.com/ajax/libs/fontfaceobserver/2.0.13/fontfaceobserver.standalone.js"></script>
162+
<script src="../../../out/spec/fixture.js"></script>
163+
</body>
164+
</html>

0 commit comments

Comments
 (0)