feat(radio/checkbox): show background-color in print stylesheet (#22298…

…) (#22299)

* feat(material/radio): show background-color in print stylesheet (#22298)

* added color-adjust for radio background-color

* feat(material/checkbox): show background-color in print stylesheet (#22298)  

* added color-adjust for checkbox background-color

* feat(material-experimental/mdc-checkbox): show background-color in print stylesheet (#22298) 

* added color-adjust for checkbox background-color

src/material-experimental/mdc-checkbox/checkbox.scss

@@ -44,6 +44,13 @@
     }
   }
 
+
+  .mdc-checkbox__background {
+    // force browser to show background-color when using the print function
+    -webkit-print-color-adjust: exact;
+    color-adjust: exact;
+  }
+
   // Angular Material supports disabling all animations when NoopAnimationsModule is imported.
   // TODO(mmalerba): Look into using MDC's Sass queries to separate the animation styles and
   //  conditionally add them. Consider the size cost when deciding whether to switch.

src/material/checkbox/checkbox.scss

@@ -288,6 +288,10 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * checkbox-common.$size !default;
     variables.$linear-out-slow-in-timing-function, opacity checkbox-common.$transition-duration
     variables.$linear-out-slow-in-timing-function;
 
+  // force browser to show background-color when using the print function
+  -webkit-print-color-adjust: exact;
+  color-adjust: exact;
+
   ._mat-animation-noopable & {
     transition: none;
   }

src/material/radio/radio.scss

@@ -80,6 +80,10 @@ $ripple-radius: 20px;
   // IE to flash the entire circle for a couple of frames, throwing off the entire animation.
   transform: scale(0.001);
 
+  // force browser to show background-color when using the print function
+  -webkit-print-color-adjust: exact;
+  color-adjust: exact;
+
   ._mat-animation-noopable & {
     transition: none;
   }