@@ -612,6 +612,92 @@ describe('$mdThemeProvider with disabled themes', function() {
612
612
} ) ;
613
613
} ) ;
614
614
615
+ describe ( '$mdThemeProvider with custom styles that include nested rules' , function ( ) {
616
+ it ( 'appends the custom styles taking into account nesting' , function ( ) {
617
+ module ( 'material.core' , function ( $mdThemingProvider ) {
618
+ $mdThemingProvider . generateThemesOnDemand ( false ) ;
619
+ var styles =
620
+ "@media (min-width: 0) and (max-width: 700px) {\n\n"
621
+ + " .md-THEME_NAME-theme .layout-row {\n"
622
+ + " background-color: pink;\n"
623
+ + " }\n\n"
624
+ + " .md-THEME_NAME-theme .layout-column {\n"
625
+ + " color: blue;\n"
626
+ + " font-weight: bold;\n"
627
+ + " }\n"
628
+ + "}\n" ;
629
+
630
+ $mdThemingProvider . registerStyles ( styles ) ;
631
+ $mdThemingProvider . theme ( 'register-custom-nested-styles' ) ;
632
+ } ) ;
633
+
634
+ inject ( function ( $MD_THEME_CSS ) {
635
+ // Verify that $MD_THEME_CSS is still set to '/**/' in the test environment.
636
+ // Check angular-material-mocks.js for $MD_THEME_CSS latest value if this test starts to fail.
637
+ expect ( $MD_THEME_CSS ) . toBe ( '/**/' ) ;
638
+ } ) ;
639
+
640
+ var compiledStyles =
641
+ "@media (min-width: 0) and (max-width: 700px) {\n\n"
642
+ + " .md-register-custom-nested-styles-theme .layout-row {\n"
643
+ + " background-color: pink;\n"
644
+ + " }\n\n"
645
+ + " .md-register-custom-nested-styles-theme .layout-column {\n"
646
+ + " color: blue;\n"
647
+ + " font-weight: bold;\n"
648
+ + " }\n"
649
+ + "}" ;
650
+
651
+ // Find the string containing nested rules in the head tag.
652
+ expect ( document . head . innerHTML ) . toContain ( compiledStyles ) ;
653
+ } ) ;
654
+ } ) ;
655
+
656
+ describe ( '$mdThemeProvider with custom styles that include multiple nested rules' , function ( ) {
657
+ it ( 'appends the custom styles taking into account multiple nesting' , function ( ) {
658
+ module ( 'material.core' , function ( $mdThemingProvider ) {
659
+ $mdThemingProvider . generateThemesOnDemand ( false ) ;
660
+ var styles =
661
+ "@supports (display: bar) {\n\n"
662
+ + " @media (min-width: 0) and (max-width: 700px) {\n\n"
663
+ + " .md-THEME_NAME-theme .layout-row {\n"
664
+ + " background-color: pink;\n"
665
+ + " }\n\n"
666
+ + " .md-THEME_NAME-theme .layout-column {\n"
667
+ + " color: blue;\n"
668
+ + " font-weight: bold;\n"
669
+ + " }\n"
670
+ + " }\n"
671
+ + "}\n" ;
672
+
673
+ $mdThemingProvider . registerStyles ( styles ) ;
674
+ $mdThemingProvider . theme ( 'register-custom-multiple-nested-styles' ) ;
675
+ } ) ;
676
+
677
+ inject ( function ( $MD_THEME_CSS ) {
678
+ // Verify that $MD_THEME_CSS is still set to '/**/' in the test environment.
679
+ // Check angular-material-mocks.js for $MD_THEME_CSS latest value if this test starts to fail.
680
+ expect ( $MD_THEME_CSS ) . toBe ( '/**/' ) ;
681
+ } ) ;
682
+
683
+ var compiledStyles =
684
+ "@supports (display: bar) {\n\n"
685
+ + " @media (min-width: 0) and (max-width: 700px) {\n\n"
686
+ + " .md-register-custom-multiple-nested-styles-theme .layout-row {\n"
687
+ + " background-color: pink;\n"
688
+ + " }\n\n"
689
+ + " .md-register-custom-multiple-nested-styles-theme .layout-column {\n"
690
+ + " color: blue;\n"
691
+ + " font-weight: bold;\n"
692
+ + " }\n"
693
+ + " }\n"
694
+ + "}" ;
695
+
696
+ // Find the string containing nested rules in the head tag.
697
+ expect ( document . head . innerHTML ) . toContain ( compiledStyles ) ;
698
+ } ) ;
699
+ } ) ;
700
+
615
701
describe ( '$mdThemeProvider with nonce' , function ( ) {
616
702
beforeEach ( function ( ) {
617
703
0 commit comments