@ -6,6 +6,7 @@ export default {
< div > foo < / d i v >
< div > foo < / d i v >
< / t e m p l a t e >
< / t e m p l a t e >
< template id = "t2" > 123 < / t e m p l a t e >
< template id = "t2" > 123 < / t e m p l a t e >
< template id = "t3" > 1 < b > B < / b > 1 < / t e m p l a t e >
` ,
` ,
test ( { assert , target } ) {
test ( { assert , target } ) {
@ -27,5 +28,16 @@ export default {
assert . equal ( template2 . content . firstChild . textContent , '123' ) ;
assert . equal ( template2 . content . firstChild . textContent , '123' ) ;
assert . htmlEqual ( template2 . innerHTML , '123' ) ;
assert . htmlEqual ( template2 . innerHTML , '123' ) ;
const template3 = target . querySelector ( '#t3' ) ;
assert . equal ( template3 . childNodes . length , 0 ) ;
assert . equal ( template3 . content . childNodes . length , 3 ) ;
// test: (with hydration from ssr rendered html)
// out of order render.
// <template>1{@html '2'}3</template> may render as <template>321</template> for ssr+hydration case.
// we bypass it by using symmetric siblings. hence <template> is not fully stable for this edge case.
assert . equal ( template3 . content . childNodes [ 0 ] . textContent , '1' ) ;
assert . equal ( template3 . content . childNodes [ 1 ] . outerHTML , '<b>B</b>' ) ;
assert . equal ( template3 . content . childNodes [ 2 ] . textContent , '1' ) ;
}
}
} ;
} ;