1111 * found in the LICENSE file at https://angular.io/license
1212 */
1313
14- import { convertScopedToShadow } from '../../runtime/styles' ;
1514import { scopeCss } from '../shadow-css' ;
1615
1716describe ( 'ShadowCss' , function ( ) {
18- function s ( cssText : string , scopeId : string , commentOriginalSelector = false ) {
19- const shim = scopeCss ( cssText , scopeId , commentOriginalSelector ) ;
17+ function s ( cssText : string , scopeId : string ) {
18+ const shim = scopeCss ( cssText , scopeId ) ;
2019
2120 const nlRegexp = / \n / g;
2221 return normalizeCSS ( shim . replace ( nlRegexp , '' ) ) ;
@@ -26,21 +25,6 @@ describe('ShadowCss', function () {
2625 expect ( s ( '' , 'a' ) ) . toEqual ( '' ) ;
2726 } ) ;
2827
29- it ( 'should handle empty string, commented org selector' , ( ) => {
30- expect ( s ( '' , 'a' , true ) ) . toEqual ( '' ) ;
31- } ) ;
32-
33- it ( 'div' , ( ) => {
34- const r = s ( 'div {}' , 'sc-ion-tag' , true ) ;
35- expect ( r ) . toEqual ( '/*!@div*/div.sc-ion-tag {}' ) ;
36- } ) ;
37-
38- it ( 'should add an attribute to every rule, commented org selector' , ( ) => {
39- const css = 'one {color: red;}two {color: red;}' ;
40- const expected = '/*!@one*/one.a {color:red;}/*!@two*/two.a {color:red;}' ;
41- expect ( s ( css , 'a' , true ) ) . toEqual ( expected ) ;
42- } ) ;
43-
4428 it ( 'should add an attribute to every rule' , ( ) => {
4529 const css = 'one {color: red;}two {color: red;}' ;
4630 const expected = 'one.a {color:red;}two.a {color:red;}' ;
@@ -71,24 +55,12 @@ describe('ShadowCss', function () {
7155 expect ( s ( css , 'a' ) ) . toEqual ( expected ) ;
7256 } ) ;
7357
74- it ( 'should handle media rules, commentOriginalSelector' , ( ) => {
75- const css = '@media screen and (max-width:800px, max-height:100%) {div {font-size:50px;}}' ;
76- const expected = '@media screen and (max-width:800px, max-height:100%) {/*!@div*/div.a {font-size:50px;}}' ;
77- expect ( s ( css , 'a' , true ) ) . toEqual ( expected ) ;
78- } ) ;
79-
8058 it ( 'should handle page rules' , ( ) => {
8159 const css = '@page {div {font-size:50px;}}' ;
8260 const expected = '@page {div.a {font-size:50px;}}' ;
8361 expect ( s ( css , 'a' ) ) . toEqual ( expected ) ;
8462 } ) ;
8563
86- it ( 'should handle page rules, commentOriginalSelector' , ( ) => {
87- const css = '@page {div {font-size:50px;}}' ;
88- const expected = '@page {/*!@div*/div.a {font-size:50px;}}' ;
89- expect ( s ( css , 'a' , true ) ) . toEqual ( expected ) ;
90- } ) ;
91-
9264 it ( 'should handle document rules' , ( ) => {
9365 const css = '@document url(http://www.w3.org/) {div {font-size:50px;}}' ;
9466 const expected = '@document url(http://www.w3.org/) {div.a {font-size:50px;}}' ;
@@ -113,11 +85,6 @@ describe('ShadowCss', function () {
11385 expect ( s ( css , 'a' ) ) . toEqual ( css ) ;
11486 } ) ;
11587
116- it ( 'should handle keyframes rules, commentOriginalSelector' , ( ) => {
117- const css = '@keyframes foo {0% {transform:translate(-50%) scaleX(0);}}' ;
118- expect ( s ( css , 'a' , true ) ) . toEqual ( css ) ;
119- } ) ;
120-
12188 it ( 'should handle -webkit-keyframes rules' , ( ) => {
12289 const css = '@-webkit-keyframes foo {0% {-webkit-transform:translate(-50%) scaleX(0);}}' ;
12390 expect ( s ( css , 'a' ) ) . toEqual ( css ) ;
@@ -153,10 +120,6 @@ describe('ShadowCss', function () {
153120 } ) ;
154121
155122 describe ( ':host' , ( ) => {
156- it ( 'should handle no context, commentOriginalSelector' , ( ) => {
157- expect ( s ( ':host {}' , 'a' , true ) ) . toEqual ( '/*!@:host*/.a-h {}' ) ;
158- } ) ;
159-
160123 it ( 'should handle no context' , ( ) => {
161124 expect ( s ( ':host {}' , 'a' ) ) . toEqual ( '.a-h {}' ) ;
162125 } ) ;
@@ -174,11 +137,6 @@ describe('ShadowCss', function () {
174137 expect ( s ( ':host([a=b]) {}' , 'a' ) ) . toEqual ( '[a="b"].a-h {}' ) ;
175138 } ) ;
176139
177- it ( 'should handle multiple tag selectors, commenting the original selector' , ( ) => {
178- expect ( s ( ':host(ul,li) {}' , 'a' , true ) ) . toEqual ( '/*!@:host(ul,li)*/ul.a-h, li.a-h {}' ) ;
179- expect ( s ( ':host(ul,li) > .z {}' , 'a' , true ) ) . toEqual ( '/*!@:host(ul,li) > .z*/ul.a-h > .z.a, li.a-h > .z.a {}' ) ;
180- } ) ;
181-
182140 it ( 'should handle multiple tag selectors' , ( ) => {
183141 expect ( s ( ':host(ul,li) {}' , 'a' ) ) . toEqual ( 'ul.a-h, li.a-h {}' ) ;
184142 expect ( s ( ':host(ul,li) > .z {}' , 'a' ) ) . toEqual ( 'ul.a-h > .z.a, li.a-h > .z.a {}' ) ;
@@ -193,10 +151,6 @@ describe('ShadowCss', function () {
193151 expect ( s ( ':host([a="b"],[c=d]) {}' , 'a' ) ) . toEqual ( '[a="b"].a-h, [c="d"].a-h {}' ) ;
194152 } ) ;
195153
196- it ( 'should handle multiple attribute selectors, commentOriginalSelector' , ( ) => {
197- expect ( s ( ':host([a="b"],[c=d]) {}' , 'a' , true ) ) . toEqual ( '/*!@:host([a="b"],[c=d])*/[a="b"].a-h, [c="d"].a-h {}' ) ;
198- } ) ;
199-
200154 it ( 'should handle pseudo selectors' , ( ) => {
201155 expect ( s ( ':host(:before) {}' , 'a' ) ) . toEqual ( '.a-h:before {}' ) ;
202156 expect ( s ( ':host:before {}' , 'a' ) ) . toEqual ( '.a-h:before {}' ) ;
@@ -215,13 +169,6 @@ describe('ShadowCss', function () {
215169 } ) ;
216170
217171 describe ( ':host-context' , ( ) => {
218- it ( 'should handle tag selector, commentOriginalSelector' , ( ) => {
219- expect ( s ( ':host-context(div) {}' , 'a' , true ) ) . toEqual ( '/*!@:host-context(div)*/div.a-h, div .a-h {}' ) ;
220- expect ( s ( ':host-context(ul) > .y {}' , 'a' , true ) ) . toEqual (
221- '/*!@:host-context(ul) > .y*/ul.a-h > .y.a, ul .a-h > .y.a {}' ,
222- ) ;
223- } ) ;
224-
225172 it ( 'should handle tag selector' , ( ) => {
226173 expect ( s ( ':host-context(div) {}' , 'a' ) ) . toEqual ( 'div.a-h, div .a-h {}' ) ;
227174 expect ( s ( ':host-context(ul) > .y {}' , 'a' ) ) . toEqual ( 'ul.a-h > .y.a, ul .a-h > .y.a {}' ) ;
@@ -247,11 +194,6 @@ describe('ShadowCss', function () {
247194 } ) ;
248195
249196 describe ( '::slotted' , ( ) => {
250- it ( 'should handle *, commentOriginalSelector' , ( ) => {
251- const r = s ( '::slotted(*) {}' , 'sc-ion-tag' , true ) ;
252- expect ( r ) . toEqual ( '/*!@::slotted(*)*/.sc-ion-tag-s > * {}' ) ;
253- } ) ;
254-
255197 it ( 'should handle *' , ( ) => {
256198 const r = s ( '::slotted(*) {}' , 'sc-ion-tag' ) ;
257199 expect ( r ) . toEqual ( '.sc-ion-tag-s > * {}' ) ;
@@ -306,62 +248,18 @@ describe('ShadowCss', function () {
306248 expect ( r ) . toEqual ( '.sc-ion-tag-s > * {}, .sc-ion-tag-s > * {}, .sc-ion-tag-s > * {}' ) ;
307249 } ) ;
308250
309- it ( 'same selectors, commentOriginalSelector' , ( ) => {
310- const r = s ( '::slotted(*) {}, ::slotted(*) {}, ::slotted(*) {}' , 'sc-ion-tag' , true ) ;
311- expect ( r ) . toEqual (
312- '/*!@::slotted(*)*/.sc-ion-tag-s > * {}/*!@, ::slotted(*)*/.sc-ion-tag, .sc-ion-tag-s > * {}/*!@, ::slotted(*)*/.sc-ion-tag, .sc-ion-tag-s > * {}' ,
313- ) ;
314- } ) ;
315-
316251 it ( 'should combine parent selector when comma' , ( ) => {
317252 const r = s ( '.a .b, .c ::slotted(*) {}' , 'sc-ion-tag' ) ;
318253 expect ( r ) . toEqual ( '.a.sc-ion-tag .b.sc-ion-tag, .c.sc-ion-tag-s > *, .c .sc-ion-tag-s > * {}' ) ;
319254 } ) ;
320255
321- it ( 'should handle multiple selector, commentOriginalSelector' , ( ) => {
322- const r = s ( '::slotted(ul), ::slotted(li) {}' , 'sc-ion-tag' , true ) ;
323- expect ( r ) . toEqual ( '/*!@::slotted(ul), ::slotted(li)*/.sc-ion-tag-s > ul, .sc-ion-tag-s > li {}' ) ;
324- } ) ;
325-
326256 it ( 'should not replace the selector in a `@supports` rule' , ( ) => {
327257 expect ( s ( '@supports selector(::slotted(*)) {::slotted(*) {color: red; }}' , 'sc-cmp' ) ) . toEqual (
328258 '@supports selector(::slotted(*)) {.sc-cmp-s > * {color:red;}}' ,
329259 ) ;
330260 } ) ;
331261 } ) ;
332262
333- describe ( 'convertScopedToShadow' , ( ) => {
334- it ( 'media query' , ( ) => {
335- const input = `@media screen and (max-width:800px, max-height:100%) {/*!@div*/div.a {font-size:50px;}}` ;
336- const expected = `@media screen and (max-width:800px, max-height:100%) {div{font-size:50px;}}` ;
337- expect ( convertScopedToShadow ( input ) ) . toBe ( expected ) ;
338- } ) ;
339-
340- it ( 'div' , ( ) => {
341- const input = `/*!@div*/div.sc-ion-tag {}` ;
342- const expected = `div{}` ;
343- expect ( convertScopedToShadow ( input ) ) . toBe ( expected ) ;
344- } ) ;
345-
346- it ( 'new lines' , ( ) => {
347- const input = `/*!@div*/div.sc-ion-tag \n\n\n \t{}` ;
348- const expected = `div{}` ;
349- expect ( convertScopedToShadow ( input ) ) . toBe ( expected ) ;
350- } ) ;
351-
352- it ( ':host' , ( ) => {
353- const input = `/*!@:host*/.a-h {}` ;
354- const expected = `:host{}` ;
355- expect ( convertScopedToShadow ( input ) ) . toBe ( expected ) ;
356- } ) ;
357-
358- it ( '::slotted' , ( ) => {
359- const input = `/*!@::slotted(ul), ::slotted(li)*/.sc-ion-tag-s > ul, .sc-ion-tag-s > li {}` ;
360- const expected = `::slotted(ul), ::slotted(li){}` ;
361- expect ( convertScopedToShadow ( input ) ) . toBe ( expected ) ;
362- } ) ;
363- } ) ;
364-
365263 it ( 'should handle ::shadow' , ( ) => {
366264 const css = s ( 'x::shadow > y {}' , 'a' ) ;
367265 expect ( css ) . toEqual ( 'x.a > y.a {}' ) ;
0 commit comments