Permalink
Browse files

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

…ine breaks.
  • Loading branch information...
1 parent 251a726 commit b985c31b02d903ba97bed792104796146fad6dc8 @slightlyoff committed Jun 10, 2012
View
BIN .DS_Store
Binary file not shown.
@@ -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>
View
@@ -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>
+
Oops, something went wrong.

0 comments on commit b985c31

Please sign in to comment.