This repository has been archived by the owner on Apr 5, 2018. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 14
/
Copy pathtraversty_css_zest.html
92 lines (86 loc) · 3.21 KB
/
traversty_css_zest.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<!doctype html>
<html>
<head>
<title>Traversty with Zest and css() augmentation Integration Test</title>
<script src="../../traversty.js"></script>
<script src="../vendor/zest.js"></script>
<script src="../../examples/aug-css.js"></script>
</head>
<body>
<h1>Traversty with Zest and css() augmentation Integration Test</h1>
<p>This is vanilla Traversty with Zest plugged in as <code>setSelectorEngine()</code> and a <code>css()</code> method added by using <code>aug()</code>. See the <i>/examples/aug-css.js</i> file for how this achieved.</p>
<div id="fixtures">
<ul>
<li>ONE (red)</li>
<li class="c">TWO</li>
<li>THREE (green)</li>
<li class="c">FOUR
<ul class="second">
<li>i</li>
<li class="c">ii</li>
<li>iii (blue)</li>
<li class="c">iv
<span class="c">SPAN (yellow)</span>
</li>
</ul>
</li>
<li class="c">FIVE (purple)</li>
</ul>
<ul>
<li>one (red)</li>
<li class="c">two</li>
<li>three (green)</li>
<li class="c">four
<ul class="second">
<li>1</li>
<li class="c">2</li>
<li>3 (blue)</li>
<li class="c">4
<span class="c">span (yellow)</span>
</li>
</ul>
</li>
<li class="c">five (purple)</li>
</ul>
</div>
<div id="reference">
<h2>Reference screenshot</h2>
<p>The above block should look similar to this:</p>
<img src="integration_reference.png" style="border: 1px solid rgb(100,100,100); box-shadow: 2px 2px 15px rgb(100,100,100);">
</div>
<p>See also:</p>
<ul>
<li><a href="ender_qwery.html">Traversty Ender (with Qwery) Integration Test</a></li>
<li><a href="ender_sel.html">Traversty Ender (with Sel) Integration Test</a></li>
<li><a href="ender_sizzle.html">Traversty Ender (with Sizzle) Integration Test</a></li>
<li><a href="ender_nwmatcher.html">Traversty Ender (with NWMatcher) Integration Test</a></li>
<li><a href="ender_noselector.html">Traversty Ender (with no selector engine) Integration Test</a></li>
</ul>
<script>
var $ = traversty
$.setSelectorEngine(zest)
$('#fixtures > ul')
.down(0).css('color', 'red')
.next('li', 1).css('color', 'green')
.next().down('li', 2).css('color', 'blue')
.next().down().css('color', 'yellow')
.up(2).next().css('color', 'purple')
.siblings(3).css('fontWeight', 'bold')
.children().css('textDecoration', 'underline')
.children(1).css('borderLeft', 'solid 5px red')
.parents('*').filter('ul').css('borderTop', 'dashed 2px green')
.not('.second').css('borderBottom', 'solid 3px blue')
.down('.second li').has('span').css('marginTop', '10px')
.up('ul').eq(-1).css('borderLeft', 'solid 5px orange')
.closest('#fixtures').down('li').slice(-10,-9).css('fontSize', '25px')
$.aug({ prepend: function (element) {
return this.each(function (el, i) {
el.insertBefore(i > 0 ? element.cloneNode(true) : element, el.firstChild)
})
}})
var div = document.createElement('div')
div.innerHTML = 'INTEGRATION TEST ALL DONE!'
if ($('li').is('.c') === true) $('#fixtures').prepend(div)
</script>
</body>
</html>