src/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-display.html

   1 <!DOCTYPE html>
   2 <html>
   3 <script>
   4 if (window.testRunner)
   5     testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
   6 </script>
   7 <link href="resources/grid.css" rel="stylesheet">
   8 <style>
   9 .grid {
  10     grid-template-columns: 50px 100px 200px;
  11     grid-template-rows: 50px 100px 200px;
  12     background-color: #aaa;
  13 }
  14 .grid > * {
  15     margin: 0; /* Disable any margins as they change the top / left offsets. */
  16     grid-column: 2;
  17     grid-row: 3;
  18 }
  19 </style>
  20 <script src="../../resources/check-layout.js"></script>
  21 <body onload="checkLayout('.grid > *')">
  22
  23 <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>
  24
  25 <div style="position: relative;">
  26     <div class="grid">
  27         <!-- These values are taken from the table in CSS 2.1 Chapter 9.7. -->
  28         <div data-expected-display="table" data-offset-x="50" data-offset-y="150" style="display: inline-table"></div>
  29         <div data-expected-display="block" data-offset-x="50" data-offset-y="150" style="display: inline"></div>
  30         <div data-expected-display="block" data-offset-x="50" data-offset-y="150" style="display: table-row-group"></div>
  31         <div data-expected-display="block" data-offset-x="50" data-offset-y="150" style="display: table-column"></div>
  32         <div data-expected-display="block" data-offset-x="50" data-offset-y="150" style="display: table-column-group"></div>
  33         <div data-expected-display="block" data-offset-x="50" data-offset-y="150" style="display: table-header-group"></div>
  34         <div data-expected-display="block" data-offset-x="50" data-offset-y="150" style="display: table-footer-group"></div>
  35         <div data-expected-display="block" data-offset-x="50" data-offset-y="150" style="display: table-row"></div>
  36         <div data-expected-display="block" data-offset-x="50" data-offset-y="150" style="display: table-cell"></div>
  37         <div data-expected-display="block" data-offset-x="50" data-offset-y="150" style="display: table-caption"></div>
  38         <div data-expected-display="block" data-offset-x="50" data-offset-y="150" style="display: inline-block"></div>
  39
  40         <!-- Some extra values we support. -->
  41         <div data-expected-display="flex" data-offset-x="50" data-offset-y="150" style="display: flex"></div>
  42         <div data-expected-display="flex" data-offset-x="50" data-offset-y="150" style="display: flex"></div>
  43         <div data-expected-display="block" data-offset-x="50" data-offset-y="150" style="display: -webkit-inline-block"></div>
  44         <div data-expected-display="block" data-offset-x="50" data-offset-y="150" style="display: compact"></div>
  45         <div data-expected-display="block" data-offset-x="50" data-offset-y="150" style="display: run-in"></div>
  46
  47         <!-- Elements with custom renderers. -->
  48         <button data-expected-display="block" data-offset-x="50" data-offset-y="150"></button>
  49         <canvas data-expected-display="block" data-offset-x="50" data-offset-y="150">canvas</canvas>
  50         <iframe data-expected-display="block" data-offset-x="50" data-offset-y="150" src="data:text/html,<body bgcolor=#fff>iframe</body>"></iframe>
  51         <iframe seamless data-expected-display="block" data-offset-x="50" data-offset-y="150" src="data:text/html,<body bgcolor=#fff>iframe</body>"></iframe>
  52         <object data-expected-display="block" data-offset-x="50" data-offset-y="150">object</object>
  53         <select data-expected-display="block" data-offset-x="50" data-offset-y="150">
  54             <option>select</option>
  55         </select>
  56         <textarea data-expected-display="block" data-offset-x="50" data-offset-y="150">textarea</textarea>
  57         <input data-expected-display="block" data-offset-x="50" data-offset-y="150" type="checkbox" value="radio"></input>
  58         <input data-expected-display="block" data-offset-x="50" data-offset-y="150" type="file" value="file"></input>
  59         <input data-expected-display="block" data-offset-x="50" data-offset-y="150" type="image" value="image"></input>
  60         <input data-expected-display="block" data-offset-x="50" data-offset-y="150" type="password" value="image"></input>
  61         <input data-expected-display="block" data-offset-x="50" data-offset-y="150" type="text" value="text"></input>
  62
  63         <img data-expected-display="block" data-offset-x="50" data-offset-y="150" src="../images/resources/green-256x256.png"></img>
  64         <img data-expected-display="block" data-offset-x="50" data-offset-y="150" src="nonexistent.png"></img>
  65
  66         <svg data-expected-display="block" data-offset-x="50" data-offset-y="150">
  67             <circle cx="50" cy="50" r="50" fill="blue">
  68             </circle>
  69         </svg>
  70
  71         <!-- Spans are common so they should be tested. -->
  72         <span data-expected-display="block" data-offset-x="50" data-offset-y="150"></span>
  73     </div>
  74 </div>
  75
  76 </html>