jakemac@google.com
31c524cdca
BUG= http://dartbug.com/21583 R=sigmund@google.com Review URL: https://codereview.chromium.org//723393003 git-svn-id: https://dart.googlecode.com/svn/branches/bleeding_edge/dart@42114 260f80e4-7a28-3924-810f-c04153c831b5
178 lines
3.8 KiB
HTML
178 lines
3.8 KiB
HTML
<!--
|
|
Copyright (c) 2013, the Dart project authors. Please see the AUTHORS file
|
|
for details. All rights reserved. Use of this source code is governed by a
|
|
BSD-style license that can be found in the LICENSE file.
|
|
-->
|
|
<!doctype html>
|
|
<html>
|
|
<!--polymer-test: this comment is needed for test_suite.dart-->
|
|
<head>
|
|
<link rel="import" href="packages/polymer/polymer.html">
|
|
<script src="/root_dart/tools/testing/dart/test_controller.js"></script>
|
|
|
|
<style shim-shadowdom>
|
|
[layout] {
|
|
border: 1px solid orange;
|
|
}
|
|
|
|
[flex] {
|
|
background-color: orange;
|
|
}
|
|
|
|
[sized] {
|
|
background-color: green;
|
|
border: 1px solid black;
|
|
height: 200px;
|
|
width: 200px;
|
|
}
|
|
|
|
[sized-container] [layout] {
|
|
height: 500px;
|
|
width: 500px;
|
|
}
|
|
|
|
/* IE10: requires flex items to be display block */
|
|
span {
|
|
display: block;
|
|
}
|
|
|
|
</style>
|
|
|
|
</head>
|
|
<body unresolved>
|
|
<div id="test1">
|
|
<h2>layout flex</h2>
|
|
<span horizontal layout>
|
|
<span>I am not flex</span>
|
|
<span flex>
|
|
intrinsix
|
|
</span>
|
|
<span flex sized></span>
|
|
<span>I am not flex</span>
|
|
</span>
|
|
<br><br>
|
|
<span vertical layout>
|
|
<span>I am not flex</span>
|
|
<span flex>
|
|
intrinsix
|
|
</span>
|
|
<span flex sized></span>
|
|
<span>I am not flex</span>
|
|
</span>
|
|
</div>
|
|
<br><hr><br>
|
|
<div id="test2">
|
|
<h2>layout flex auto</h2>
|
|
<span horizontal layout>
|
|
<span>I am not flex</span>
|
|
<span flex auto>
|
|
intrinsix
|
|
</span>
|
|
<span flex auto sized></span>
|
|
<span>I am not flex</span>
|
|
</span>
|
|
<br><br>
|
|
<span vertical layout>
|
|
<span>I am not flex</span>
|
|
<span flex auto>
|
|
intrinsix
|
|
</span>
|
|
<span flex auto sized></span>
|
|
<span>I am not flex</span>
|
|
</span>
|
|
</div>
|
|
<br><hr><br>
|
|
<div id="test3">
|
|
<h2>layout flex auto-vertical</h2>
|
|
<span horizontal layout>
|
|
<span>I am not flex</span>
|
|
<span flex auto-vertical>
|
|
intrinsix
|
|
</span>
|
|
<span flex auto-vertical sized></span>
|
|
<span>I am not flex</span>
|
|
</span>
|
|
<br><br>
|
|
<span vertical layout>
|
|
<span>I am not flex</span>
|
|
<span flex auto-vertical>
|
|
intrinsix
|
|
</span>
|
|
<span flex auto-vertical sized></span>
|
|
<span>I am not flex</span>
|
|
</span>
|
|
</div>
|
|
<br><hr><hr><br>
|
|
<h1>Sized Container</h1>
|
|
<div sized-container>
|
|
<div id="test4">
|
|
<h2>layout flex</h2>
|
|
<span horizontal layout>
|
|
<span>I am not flex</span>
|
|
<span flex>
|
|
intrinsix
|
|
</span>
|
|
<span flex sized></span>
|
|
<span>I am not flex</span>
|
|
</span>
|
|
<br><br>
|
|
<span vertical layout>
|
|
<span>I am not flex</span>
|
|
<span flex>
|
|
intrinsix
|
|
</span>
|
|
<span flex sized></span>
|
|
<span>I am not flex</span>
|
|
</span>
|
|
</div>
|
|
<br><hr><br>
|
|
<div id="test5">
|
|
<h2>layout flex auto</h2>
|
|
<span horizontal layout>
|
|
<span>I am not flex</span>
|
|
<span flex auto>
|
|
intrinsix
|
|
</span>
|
|
<span flex auto sized></span>
|
|
<span>I am not flex</span>
|
|
</span>
|
|
<br><br>
|
|
<span vertical layout>
|
|
<span>I am not flex</span>
|
|
<span flex auto>
|
|
intrinsix
|
|
</span>
|
|
<span flex auto sized></span>
|
|
<span>I am not flex</span>
|
|
</span>
|
|
</div>
|
|
<br><hr><br>
|
|
<div id="test6">
|
|
<h2>layout flex auto-vertical</h2>
|
|
<span horizontal layout>
|
|
<span>I am not flex</span>
|
|
<span flex auto-vertical>
|
|
intrinsix
|
|
</span>
|
|
<span flex auto-vertical sized></span>
|
|
<span>I am not flex</span>
|
|
</span>
|
|
<br><br>
|
|
<span vertical layout>
|
|
<span>I am not flex</span>
|
|
<span flex auto-vertical>
|
|
intrinsix
|
|
</span>
|
|
<span flex auto-vertical sized></span>
|
|
<span>I am not flex</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<script type="application/dart" src="layout_test.dart">
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|