New demo, functional but needs some serious love and a solution for l…

…ine breaks.
slightlyoff · Jun 10, 2012 · b985c31 · b985c31
1 parent 251a726
commit b985c31
Show file tree

Hide file tree

Showing 13 changed files with 1,245 additions and 2 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/demos/css/canvas-renderer.html b/demos/css/canvas-renderer.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html>
+  <!--
+    Copyright (C) 2012, Alex Russell (slightlyoff@chromium.org)
+    Use of this source code is governed by the LGPL, which can be found in the
+    COPYING.LGPL file.
+  -->
+  <head>
+    <title>CSS Layout and Rendering -- JS Edition</title>
+    <!--
+      Notes:
+        This demo does not do its own CSS parsing and/or style resolution.
+        Instead, it takes an existing DOM and inspects it on a per-box basis,
+        generates constratraints for each, and invokes a <canvas>-based
+        renderer when layout is calculated.
+
+        The basic idea is that all box elements in the iframe are 
+
+      Open issues:
+        * How to demonstrate that we're doing what we say?
+        * Is there an HTML/CSS parser written in JS that does style resolution
+          already? Could I go full-stack that way?
+        * Would be slick to have a JSON serialization format for the render
+          boxes
+    -->
+
+    <meta http-equiv="X-UA-Compatible" content="chrome=1">
+
+    <style>
+      body, html {
+        width: 100%;
+        height: 100%;
+      }
+
+      #c {
+        border: 1px solid black;
+      }
+
+      #f {
+        border: 1px solid black;
+      }
+    </style>
+
+
+    <script defer="defer" src="../../src/c.js"></script>
+    <script defer="defer" src="../../src/HashTable.js"></script>
+    <script defer="defer" src="../../src/HashSet.js"></script>
+    <script defer="defer" src="../../src/Error.js"></script>
+    <script defer="defer" src="../../src/SymbolicWeight.js"></script>
+    <script defer="defer" src="../../src/Strength.js"></script>
+    <script defer="defer" src="../../src/Variable.js"></script>
+    <script defer="defer" src="../../src/Point.js"></script>
+    <script defer="defer" src="../../src/LinearExpression.js"></script>
+    <script defer="defer" src="../../src/Constraint.js"></script>
+    <script defer="defer" src="../../src/LinearConstraint.js"></script>
+    <script defer="defer" src="../../src/EditInfo.js"></script>
+    <script defer="defer" src="../../src/Tableau.js"></script>
+    <script defer="defer" src="../../src/SimplexSolver.js"></script>
+
+    <script defer="defer" src="../../util/mutation-summary/mutation_summary.js"></script>
+
+    <!--
+      Emits CSS box rules to a solver and returns an array of variables which contain "box objects" which can be used to render their contents
+    -->
+    <script src="util.js"></script>
+    <script defer="defer" src="generator.js"></script>
+    <script defer="defer" src="renderer.js"></script>
+
+    <script>
+      "use strict";
+
+      this.renderDebug = true;
+
+      ready(function() {
+        generateFor("f", function(boxes) {
+          renderTo("c", boxes);
+        });
+      });
+    </script>
+
+  </head>
+  <body>
+    <h2>Browser rendering</h2>
+    <iframe id="f" width="800" height="200" src="content.html"></iframe>
+
+    <h2>Constraint rendering to a <code>&lt;canvas&gt;</code></h2>
+    <canvas id="c" width="800" height="200" style="background-color: lightgray"></canvas>
+  </body>
+</html>
diff --git a/demos/css/content.html b/demos/css/content.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html>
+  <!--
+    Copyright (C) 2012, Alex Russell (slightlyoff@chromium.org)
+    Use of this source code is governed by the LGPL, which can be found in the
+    COPYING.LGPL file.
+  -->
+  <head>
+    <title>Bork bork bork</title>
+
+    <meta http-equiv="X-UA-Compatible" content="chrome=1">
+
+    <style>
+      /* We're an app, so lay ourselves out like one. Just the basics, ma'am. */
+      html, body {
+        margin: 0;
+        padding: 0;
+        font: normal 95%/1 "Helvetica Neue", "Arial", sans-serif;
+        color: #222;
+        background-color: #D9E7FF;
+      }
+
+      body {
+        font: normal 95%/1 "Helvetica Neue", "Arial", sans-serif;
+        margin: 10px;
+      }
+
+      #button {
+        color: white;
+        width: 100px;
+        position: absolute;
+        left: 45%;
+        top: 45%;
+        background-color: #527DFF;
+        border-radius: 4px;
+        font-size: 13px;
+        line-height: 30px;
+        text-align: center;
+        vertical-align: center;
+        font-family: "Helvetica Neue";
+        border: 5px solid blue;
+        /*
+        padding: 10px;
+        */
+      }
+
+      /* FIXME(slightlyoff) */
+      .menu {
+        background-color: #527DFF;
+        border-radius: 4px;
+        font-size: 13px;
+        line-height: 30px;
+        font-family: "Helvetica Neue";
+        letter-spacing: 1px;
+        box-shadow: 0px 6px 20px rgba(54,54,54,0.7);
+      }
+
+      .menu > * {
+        line-height: 30px;
+        color: white;
+        border-bottom: 1px solid white;
+        padding-left: 1em;
+        padding-right: 1em;
+      }
+
+      .menu > :last-child {
+        border-bottom: none;
+      }
+
+      .hidden {
+        display: none;
+      }
+    </style>
+  </head>
+  <body>
+    <p class="hidden">Bespoke you probably haven't heard of them odd future vinyl organic fanny pack post-ironic.
+    <p>High life mcsweeney's fixie seitan, williamsburg vinyl bicycle rights hella authentic hoodie 3 wolf moon squid beard occupy.
+    <p class="hidden">Brunch pork belly whatever, portland keytar kogi retro authentic mlkshk jean shorts PBR.
+    <p>Tofu retro put a bird on it brooklyn blog skateboard pop-up umami sartorial.
+    <p class="hidden">Keytar craft beer selvage, squid scenester pickled vegan terry richardson Austin tumblr butcher bushwick sartorial.
+    <div style="color: white; background: black;">
+      I'm a block!
+    </div>
+
+    </p>
+    <div id="button">
+      Howdy! &#9660;
+    </div>
+  </body>
+</html>
+