Add 'characters' and 'children' features

Author: tomhodgins

index.js

@@ -1,13 +1,15 @@
-export default function (selector, conditions, stylesheet) {
+export default (selector, conditions, stylesheet) => {
 
   const features = {
     minWidth: (el, number) => number <= el.offsetWidth,
     maxWidth: (el, number) => number >= el.offsetWidth,
     minHeight: (el, number) => number <= el.offsetHeight,
     maxHeight: (el, number) => number >= el.offsetHeight,
     minChildren: (el, number) => number <= el.children.length,
+    children: (el, number) => number === el.children.length,
     maxChildren: (el, number) => number >= el.children.length,
     minCharacters: (el, number) => number <= ((el.value && el.value.length) || el.textContent.length),
+    characters: (el, number) => number === ((el.value && el.value.length) || el.textContent.length),
     maxCharacters: (el, number) => number >= ((el.value && el.value.length) || el.textContent.length),
     minScrollX: (el, number) => number <= el.scrollLeft,
     maxScrollX: (el, number) => number >= el.scrollLeft,

test/element-query-scroll.js

@@ -1,4 +1,4 @@
-import element from '//unpkg.com/jsincss-element-query/index.js'
+import element from '../index.js'
 
 export default () => { return `
 

test/element-query.js

@@ -1,4 +1,4 @@
-import element from '//unpkg.com/jsincss-element-query/index.js'
+import element from '../index.js'
 
 export default () => { return `
 
@@ -50,8 +50,24 @@ export default () => { return `
     }
   `)}
 
-  /* Min-characters on textarea */
-  ${element('.mincharacters-textarea', {minCharacters: 35}, `
+  /* Characters on block elements */
+  ${element('.characters', {characters: 5}, `
+    :self {
+      background: greenyellow;
+      border-color: limegreen;
+    }
+  `)}
+
+  /* Characters on input */
+  ${element('.characters-input', {characters: 5}, `
+    :self {
+      background: greenyellow;
+      border-color: limegreen;
+    }
+  `)}
+
+  /* Characters on textarea */
+  ${element('.characters-textarea', {characters: 5}, `
     :self {
       background: greenyellow;
       border-color: limegreen;
@@ -90,6 +106,14 @@ export default () => { return `
     }
   `)}
 
+  /* Children */
+  ${element('.children', {children: 5}, `
+    :self {
+      background: greenyellow;
+      border-color: limegreen;
+    }
+  `)}
+
   /* Max-children */
   ${element('.maxchildren', {maxChildren: 5}, `
     :self {

test/index.html

@@ -127,6 +127,15 @@ <h3>min-characters on form inputs</h3>
 <input type=text class=mincharacters-input value='class="mincharacters-input"'>
 <textarea class=mincharacters-textarea>class="mincharacters-textarea"</textarea>
 
+<h3>characters on block elements</h3>
+<p>(Use keyboard)</p>
+<div class=characters contenteditable>class="characters"</div>
+
+<h3>characters on form inputs</h3>
+<p>(Use keyboard)</p>
+<input type=text class=characters-input value='class="characters-input"'>
+<textarea class=characters-textarea>class="characters-textarea"</textarea>
+
 <h3>max-characters on block elements</h3>
 <p>(Use keyboard)</p>
 <div class=maxcharacters contenteditable>class="maxcharacters"</div>
@@ -142,6 +151,12 @@ <h3>min-children</h3>
 <img src=https://staticresource.s3.amazonaws.com/user.png style=width:50px>
 </div>
 
+<h3>children</h3>
+<button data-button=semiflat onclick="var img=document.createElement('img');img.src='https://staticresource.s3.amazonaws.com/user.png';document.querySelector('.children').appendChild(img)">Add Child</button>
+<div class=children>
+<img src=https://staticresource.s3.amazonaws.com/user.png style=width:50px>
+</div>
+
 <h3>max-children</h3>
 <button data-button=semiflat onclick="var img=document.createElement('img');img.src='https://staticresource.s3.amazonaws.com/user.png';document.querySelector('.maxchildren').appendChild(img)">Add Child</button>
 <div class=maxchildren>
@@ -186,7 +201,7 @@ <h3>max-aspect-ratio</h3>
 <div class=maxaspectratio data-drag=both>class="maxaspectratio"</div>
 
 <script type=module>
-  import jsincss from '//unpkg.com/jsincss/index.js'
+  import jsincss from 'https://unpkg.com/jsincss/index.js'
   import stylesheet from './element-query.js'
   import scrollStyles from './element-query-scroll.js'