| /* |
| * Copyright (c) 2014, 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. |
| */ |
| /** |
| * @description |
| */ |
| import "dart:html"; |
| import "../../testcommon.dart"; |
| import "../../../Utils/async_utils.dart"; |
| import "../../resources/check-layout.dart"; |
| import "pwd.dart"; |
| |
| main() { |
| var f = new DocumentFragment.html(''' |
| <link href="$root/resources/grid.css" rel="stylesheet"> |
| <style> |
| .grid { |
| grid-template-columns: 50px 100px 200px; |
| grid-template-rows: 50px 100px 200px; |
| background-color: #aaa; |
| } |
| .grid > * { |
| margin: 0; /* Disable any margins as they change the top / left offsets. */ |
| grid-column: 2; |
| grid-row: 3; |
| } |
| </style> |
| ''', treeSanitizer: new NullTreeSanitizer()); |
| document.head.append(f); |
| |
| document.body.setInnerHtml(''' |
| <p>This test checks that the grid items' 'display' computed value matches the specification. It also checks that the grid items are placed in the right grid area.</p> |
| |
| <div style="position: relative;"> |
| <div class="grid"> |
| <!-- These values are taken from the table in CSS 2.1 Chapter 9.7. --> |
| <div data-expected-display="table" data-offset-x="50" data-offset-y="150" style="display: inline-table"></div> |
| <div data-expected-display="block" data-offset-x="50" data-offset-y="150" style="display: inline"></div> |
| <div data-expected-display="block" data-offset-x="50" data-offset-y="150" style="display: table-row-group"></div> |
| <div data-expected-display="block" data-offset-x="50" data-offset-y="150" style="display: table-column"></div> |
| <div data-expected-display="block" data-offset-x="50" data-offset-y="150" style="display: table-column-group"></div> |
| <div data-expected-display="block" data-offset-x="50" data-offset-y="150" style="display: table-header-group"></div> |
| <div data-expected-display="block" data-offset-x="50" data-offset-y="150" style="display: table-footer-group"></div> |
| <div data-expected-display="block" data-offset-x="50" data-offset-y="150" style="display: table-row"></div> |
| <div data-expected-display="block" data-offset-x="50" data-offset-y="150" style="display: table-cell"></div> |
| <div data-expected-display="block" data-offset-x="50" data-offset-y="150" style="display: table-caption"></div> |
| <div data-expected-display="block" data-offset-x="50" data-offset-y="150" style="display: inline-block"></div> |
| |
| <!-- Some extra values we support. --> |
| <div data-expected-display="flex" data-offset-x="50" data-offset-y="150" style="display: flex"></div> |
| <div data-expected-display="flex" data-offset-x="50" data-offset-y="150" style="display: flex"></div> |
| <div data-expected-display="block" data-offset-x="50" data-offset-y="150" style="display: -webkit-inline-block"></div> |
| <div data-expected-display="block" data-offset-x="50" data-offset-y="150" style="display: compact"></div> |
| <div data-expected-display="block" data-offset-x="50" data-offset-y="150" style="display: run-in"></div> |
| |
| <!-- Elements with custom renderers. --> |
| <button data-expected-display="block" data-offset-x="50" data-offset-y="150"></button> |
| <canvas data-expected-display="block" data-offset-x="50" data-offset-y="150">canvas</canvas> |
| <iframe data-expected-display="block" data-offset-x="50" data-offset-y="150" src="data:text/html,<body bgcolor=#fff>iframe</body>"></iframe> |
| <iframe seamless data-expected-display="block" data-offset-x="50" data-offset-y="150" src="data:text/html,<body bgcolor=#fff>iframe</body>"></iframe> |
| <object data-expected-display="block" data-offset-x="50" data-offset-y="150">object</object> |
| <select data-expected-display="block" data-offset-x="50" data-offset-y="150"> |
| <option>select</option> |
| </select> |
| <textarea data-expected-display="block" data-offset-x="50" data-offset-y="150">textarea</textarea> |
| <input data-expected-display="block" data-offset-x="50" data-offset-y="150" type="checkbox" value="radio"></input> |
| <input data-expected-display="block" data-offset-x="50" data-offset-y="150" type="file" value="file"></input> |
| <input data-expected-display="block" data-offset-x="50" data-offset-y="150" type="image" value="image"></input> |
| <input data-expected-display="block" data-offset-x="50" data-offset-y="150" type="password" value="image"></input> |
| <input data-expected-display="block" data-offset-x="50" data-offset-y="150" type="text" value="text"></input> |
| |
| <img data-expected-display="block" data-offset-x="50" data-offset-y="150" src="$root/../images/resources/green-256x256.jpg"></img> |
| <img data-expected-display="block" data-offset-x="50" data-offset-y="150" src="IntentionallyMissingFile.png"></img> |
| |
| <svg data-expected-display="block" data-offset-x="50" data-offset-y="150"> |
| <circle cx="50" cy="50" r="50" fill="blue"> |
| </circle> |
| </svg> |
| |
| <!-- Spans are common so they should be tested. --> |
| <span data-expected-display="block" data-offset-x="50" data-offset-y="150"></span> |
| </div> |
| </div> |
| ''', treeSanitizer: new NullTreeSanitizer()); |
| |
| asyncStart(); |
| window.onLoad.listen((_) { |
| checkLayout('.grid > *'); |
| asyncEnd(); |
| }); |
| } |
