<!--  
  Worklet code here. I can't put this under JS pane anymore since
  I can't do CSS.paintWorklet.addModule('/rrenula/pen/js-code.js'); due to
  cors issue
-->
<script language="worklet">
  if (typeof registerPaint !== 'undefined') {
    class Checkbox {
      paint(ctx, size, props) {
        const x = 0
        const y = 0
        const finalX = size.width
        const finalY = size.height
        
        ctx.beginPath()
        ctx.moveTo(x, y)
        ctx.lineTo(finalX, finalY)
        ctx.stroke()
        
        ctx.beginPath();
        ctx.moveTo(finalX, y);
        ctx.lineTo(x, finalY);
        ctx.stroke();
      }
    }
    
    registerPaint('checkbox', Checkbox)
  }
</script>

<script type="module">
  function ready(fn) {
    if (document.readyState != 'loading'){
      fn();
    } else {
      document.addEventListener('DOMContentLoaded', fn);
    }
  }
  
  ready(() => {
    function blobWorklet() {
        const qs = document.querySelector('script[language="worklet"]')
        const src = qs.innerHTML;
        const blob = new Blob([src], {type: 'text/javascript'});
        return URL.createObjectURL(blob);
    }
      
    CSS.paintWorklet.addModule(blobWorklet())
    
    if ('paintWorklet' in CSS)  {
       document.querySelector('.notice').classList.add('hidden')
    }
  })
</script>

<div class="wrapper">
  <div class="notice">
    This demo uses CSS Houdini. If you are seeing this, you need to enable CSS Houdini by navigating to <code>chrome://flags</code> and enable <code>Experimental Web Platform features</code>
  </div>
  <p class="q">Who would you take out on a date?</p>
  <div class="checkbox-wrapper">
       <input type="checkbox" class="checkbox">
       <label> <span class="checkbox-label">Lord Voldemort</span></label>
  </div>
  <div class="checkbox-wrapper">
       <input type="checkbox" class="checkbox">
       <label> <span class="checkbox-label">Harry Potter</span></label>
  </div>
  <div class="checkbox-wrapper">
       <input type="checkbox" class="checkbox">
       <label> <span class="checkbox-label">Margaery Tyrell</span></label>
  </div>
  <div class="checkbox-wrapper">
       <input type="checkbox" class="checkbox">
       <label> <span class="checkbox-label">Robb Stark</span></label>
  </div>
  <div class="checkbox-wrapper">
       <input type="checkbox" class="checkbox">
       <label> <span class="checkbox-label">Legolas</span></label>
  </div>
  <div class="checkbox-wrapper">
       <input type="checkbox" class="checkbox">
       <label> <span class="checkbox-label">Yennefer</span></label>
  </div>
  <div class="checkbox-wrapper">
       <input type="checkbox" class="checkbox">
       <label> <span class="checkbox-label">Geralt</span></label>
  </div>
</div>