|
@@ -59,6 +59,52 @@ test('It should evaluate with ":leave" only when the component is not intersecte
|
|
|
},
|
|
|
)
|
|
|
|
|
|
+test.only('.half thing',
|
|
|
+ [html`
|
|
|
+ <div x-data="{ count: 0 }">
|
|
|
+ <span x-text="count"></span>
|
|
|
+
|
|
|
+ <div id="container" style="height: 400px; overflow-y: scroll;">
|
|
|
+ <div style="height: 401px;">spacer</div>
|
|
|
+
|
|
|
+ <div style="height: 400px" x-intersect.half="count++">
|
|
|
+ <div style="text-align: center;">content</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ `],
|
|
|
+ ({ get }) => {
|
|
|
+ get('span').should(haveText('0'))
|
|
|
+ get('#container').scrollTo(0, 100, {duration: 100})
|
|
|
+ get('span').should(haveText('0'))
|
|
|
+ get('#container').scrollTo(0, 210, {duration: 100})
|
|
|
+ get('span').should(haveText('1'))
|
|
|
+ },
|
|
|
+)
|
|
|
+
|
|
|
+test.only('.full thing',
|
|
|
+ [html`
|
|
|
+ <div x-data="{ count: 0 }">
|
|
|
+ <span x-text="count"></span>
|
|
|
+
|
|
|
+ <div id="container" style="height: 400px; overflow-y: scroll;">
|
|
|
+ <div style="height: 401px;">spacer</div>
|
|
|
+
|
|
|
+ <div style="height: 400px" x-intersect.full="count++">
|
|
|
+ <div style="text-align: center;">content</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ `],
|
|
|
+ ({ get }) => {
|
|
|
+ get('span').should(haveText('0'))
|
|
|
+ get('#container').scrollTo(0, 200, {duration: 100})
|
|
|
+ get('span').should(haveText('0'))
|
|
|
+ get('#container').scrollTo(0, 400, {duration: 100})
|
|
|
+ get('span').should(haveText('1'))
|
|
|
+ },
|
|
|
+)
|
|
|
+
|
|
|
test('.once',
|
|
|
[html`
|
|
|
<div x-data="{ count: 0 }" x-init="setTimeout(() => count++, 300)">
|