Skip to content

Commit

Permalink
fix(radio): Add missing @import for theme mixins; add screenshot te…
Browse files Browse the repository at this point in the history 
…sts (material-components#3285)

(cherry picked from commit 0d73d06)
  • Loading branch information
@acdvorak
acdvorak authored and Kenneth G. Franqueiro committed Aug 13, 2018
1 parent fd31108 commit 553438a
Show file tree
Hide file tree
Showing 5 changed files with 298 additions and 0 deletions.
1 change: 1 addition & 0 deletions packages/mdc-radio/_mixins.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
// limitations under the License.
//

@import "@material/theme/mixins";
@import "@material/theme/variables";
@import "./variables";

Expand Down
18 changes: 18 additions & 0 deletions test/screenshot/golden.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -314,6 +314,24 @@
"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"
}
},
"spec/mdc-radio/classes/baseline.html": {
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/08/02/15_12_11_524/spec/mdc-radio/classes/baseline.html",
"screenshots": {
"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",
"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",
"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",
"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"
}
},
"spec/mdc-radio/mixins/mixins.html": {
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/08/02/15_12_11_524/spec/mdc-radio/mixins/mixins.html",
"screenshots": {
"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",
"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",
"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",
"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"
}
},
"spec/mdc-switch/classes/baseline.html": {
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/rlfriedman/2018/07/21/00_22_42_705/spec/mdc-switch/classes/baseline.html",
"screenshots": {
Expand Down
78 changes: 78 additions & 0 deletions test/screenshot/spec/mdc-radio/classes/baseline.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
<!DOCTYPE html>
<!--
Copyright 2018 Google Inc. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
https://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License
-->
<html lang="en">
<head>
<meta charset="utf-8">
<title>Baseline Radio - MDC Web Screenshot Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../../../out/mdc.radio.css">
<link rel="stylesheet" href="../../../out/spec/fixture.css">
<link rel="stylesheet" href="../../../out/spec/mdc-radio/fixture.css">
</head>

<body class="test-container mdc-typography">
<main class="test-viewport test-viewport--mobile">
<div class="test-layout">
<div class="test-cell test-cell--radio">
<div class="mdc-radio">
<input class="mdc-radio__native-control" type="radio" name="enabled-radio-group">
<div class="mdc-radio__background">
<div class="mdc-radio__outer-circle"></div>
<div class="mdc-radio__inner-circle"></div>
</div>
</div>
</div>

<div class="test-cell test-cell--radio">
<div class="mdc-radio">
<input class="mdc-radio__native-control" type="radio" name="enabled-radio-group" checked>
<div class="mdc-radio__background">
<div class="mdc-radio__outer-circle"></div>
<div class="mdc-radio__inner-circle"></div>
</div>
</div>
</div>

<div class="test-cell test-cell--radio">
<div class="mdc-radio mdc-radio--disabled">
<input class="mdc-radio__native-control" type="radio" name="disabled-radio-group" disabled>
<div class="mdc-radio__background">
<div class="mdc-radio__outer-circle"></div>
<div class="mdc-radio__inner-circle"></div>
</div>
</div>
</div>

<div class="test-cell test-cell--radio">
<div class="mdc-radio mdc-radio--disabled">
<input class="mdc-radio__native-control" type="radio" name="disabled-radio-group" disabled checked>
<div class="mdc-radio__background">
<div class="mdc-radio__outer-circle"></div>
<div class="mdc-radio__inner-circle"></div>
</div>
</div>
</div>
</div>
</main>

<!-- Automatically provides/replaces `Promise` if missing or broken. -->
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.js"></script>
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fontfaceobserver/2.0.13/fontfaceobserver.standalone.js"></script>
<script src="../../../out/spec/fixture.js"></script>
</body>
</html>
37 changes: 37 additions & 0 deletions test/screenshot/spec/mdc-radio/fixture.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
//
// Copyright 2018 Google Inc. All Rights Reserved.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
//

@import "../../../../packages/mdc-radio/mixins";
@import "../../../../packages/mdc-theme/color-palette";

$custom-radio-color: $material-color-red-300;

.test-cell--radio {
width: 71px;
height: 71px;
}

.custom-radio--unchecked-stroke-color {
@include mdc-radio-unchecked-stroke-color($custom-radio-color);
}

.custom-radio--checked-stroke-color {
@include mdc-radio-checked-stroke-color($custom-radio-color);
}

.custom-radio--ink-color {
@include mdc-radio-ink-color($custom-radio-color);
}
164 changes: 164 additions & 0 deletions test/screenshot/spec/mdc-radio/mixins/mixins.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,164 @@
<!DOCTYPE html>
<!--
Copyright 2018 Google Inc. All Rights Reserved.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
https://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<html lang="en">
<head>
<meta charset="utf-8">
<title>Radio Mixins - MDC Web Screenshot Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../../../out/mdc.radio.css">
<link rel="stylesheet" href="../../../out/spec/fixture.css">
<link rel="stylesheet" href="../../../out/spec/mdc-radio/fixture.css">
</head>

<body class="test-container mdc-typography">
<main class="test-viewport test-viewport--mobile">
<div class="test-layout">
<!-- unchecked-stroke-color -->

<div class="test-cell test-cell--radio">
<div class="mdc-radio custom-radio--unchecked-stroke-color">
<input class="mdc-radio__native-control" type="radio" name="unchecked-stroke-color__enabled-radio-group">
<div class="mdc-radio__background">
<div class="mdc-radio__outer-circle"></div>
<div class="mdc-radio__inner-circle"></div>
</div>
</div>
</div>

<div class="test-cell test-cell--radio">
<div class="mdc-radio custom-radio--unchecked-stroke-color">
<input class="mdc-radio__native-control" type="radio" name="unchecked-stroke-color__enabled-radio-group" checked>
<div class="mdc-radio__background">
<div class="mdc-radio__outer-circle"></div>
<div class="mdc-radio__inner-circle"></div>
</div>
</div>
</div>

<div class="test-cell test-cell--radio">
<div class="mdc-radio mdc-radio--disabled custom-radio--unchecked-stroke-color">
<input class="mdc-radio__native-control" type="radio" name="unchecked-stroke-color__disabled-radio-group" disabled>
<div class="mdc-radio__background">
<div class="mdc-radio__outer-circle"></div>
<div class="mdc-radio__inner-circle"></div>
</div>
</div>
</div>

<div class="test-cell test-cell--radio">
<div class="mdc-radio mdc-radio--disabled custom-radio--unchecked-stroke-color">
<input class="mdc-radio__native-control" type="radio" name="unchecked-stroke-color__disabled-radio-group" disabled checked>
<div class="mdc-radio__background">
<div class="mdc-radio__outer-circle"></div>
<div class="mdc-radio__inner-circle"></div>
</div>
</div>
</div>

<!-- checked-stroke-color -->

<div class="test-cell test-cell--radio">
<div class="mdc-radio custom-radio--checked-stroke-color">
<input class="mdc-radio__native-control" type="radio" name="checked-stroke-color__enabled-radio-group">
<div class="mdc-radio__background">
<div class="mdc-radio__outer-circle"></div>
<div class="mdc-radio__inner-circle"></div>
</div>
</div>
</div>

<div class="test-cell test-cell--radio">
<div class="mdc-radio custom-radio--checked-stroke-color">
<input class="mdc-radio__native-control" type="radio" name="checked-stroke-color__enabled-radio-group" checked>
<div class="mdc-radio__background">
<div class="mdc-radio__outer-circle"></div>
<div class="mdc-radio__inner-circle"></div>
</div>
</div>
</div>

<div class="test-cell test-cell--radio">
<div class="mdc-radio mdc-radio--disabled custom-radio--checked-stroke-color">
<input class="mdc-radio__native-control" type="radio" name="checked-stroke-color__disabled-radio-group" disabled>
<div class="mdc-radio__background">
<div class="mdc-radio__outer-circle"></div>
<div class="mdc-radio__inner-circle"></div>
</div>
</div>
</div>

<div class="test-cell test-cell--radio">
<div class="mdc-radio mdc-radio--disabled custom-radio--checked-stroke-color">
<input class="mdc-radio__native-control" type="radio" name="checked-stroke-color__disabled-radio-group" disabled checked>
<div class="mdc-radio__background">
<div class="mdc-radio__outer-circle"></div>
<div class="mdc-radio__inner-circle"></div>
</div>
</div>
</div>

<!-- ink-color -->

<div class="test-cell test-cell--radio">
<div class="mdc-radio custom-radio--ink-color">
<input class="mdc-radio__native-control" type="radio" name="ink-color__enabled-radio-group">
<div class="mdc-radio__background">
<div class="mdc-radio__outer-circle"></div>
<div class="mdc-radio__inner-circle"></div>
</div>
</div>
</div>

<div class="test-cell test-cell--radio">
<div class="mdc-radio custom-radio--ink-color">
<input class="mdc-radio__native-control" type="radio" name="ink-color__enabled-radio-group" checked>
<div class="mdc-radio__background">
<div class="mdc-radio__outer-circle"></div>
<div class="mdc-radio__inner-circle"></div>
</div>
</div>
</div>

<div class="test-cell test-cell--radio">
<div class="mdc-radio mdc-radio--disabled custom-radio--ink-color">
<input class="mdc-radio__native-control" type="radio" name="ink-color__disabled-radio-group" disabled>
<div class="mdc-radio__background">
<div class="mdc-radio__outer-circle"></div>
<div class="mdc-radio__inner-circle"></div>
</div>
</div>
</div>

<div class="test-cell test-cell--radio">
<div class="mdc-radio mdc-radio--disabled custom-radio--ink-color">
<input class="mdc-radio__native-control" type="radio" name="ink-color__disabled-radio-group" disabled checked>
<div class="mdc-radio__background">
<div class="mdc-radio__outer-circle"></div>
<div class="mdc-radio__inner-circle"></div>
</div>
</div>
</div>
</div>
</main>

<!-- Automatically provides/replaces `Promise` if missing or broken. -->
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.js"></script>
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fontfaceobserver/2.0.13/fontfaceobserver.standalone.js"></script>
<script src="../../../out/spec/fixture.js"></script>
</body>
</html>

0 comments on commit 553438a

Please sign in to comment.