spec/test.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Grid Spec test</title>
  <link rel="stylesheet" href="../demo/demo.css"/>
  <link rel="stylesheet" href="../dist/gridstack-extra.css"/>
  <script src="../dist/gridstack-all.js"></script>
</head>
<body>
  <h1>Grid Spec test</h1>
  <a class="btn btn-primary" onClick="step1()" href="#">step1</a>
  <a class="btn btn-primary" onClick="step2()" href="#">step2</a>
  <div class="grid-stack">
    <!-- <div class="grid-stack-item" gs-x="0" gs-y="0" gs-w="4" gs-h="2" gs-id="gsItem1" id="item1">
      <div class="grid-stack-item-content">item 1 text</div>
    </div>
    <div class="grid-stack-item" gs-x="4" gs-y="0" gs-w="4" gs-h="4" gs-id="gsItem2" id="item2">
      <div class="grid-stack-item-content">item 2 text</div>
    </div> -->
  </div>
  <script type="text/javascript">
    // test for spec file debugging
    let margin = 5;
    let cellHeight = 70;
    let children = [{},{},{}];
      let items = [
        {x: 0, y: 0, w:3, h:3, sizeToContent: true, 
          subGridOpts: {children, column: 'auto', margin, cellHeight}}
      ];
      let count = 0;
      [...items, ...children].forEach(n => { n.id = String(count++); if (count>1) n.content=n.id});
      grid = GridStack.init({cellHeight: cellHeight+20, margin, children: items});

    step1 = function() {
      grid.update(grid.engine.nodes[0].el, {w:2});
    }
    step2 = function() {
    }
  </script>
</body>
</html>