index.html (22126B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Grid Layout Module Level 1 Test Plan</title> 5 <meta http-equiv='Content-Type' content='text/html;charset=utf-8'/> 6 <!-- 7 === NOTA BENE === 8 For the three scripts below, if your spec resides on dev.w3 you can check them 9 out in the same tree and use relative links so that they'll work offline, 10 --> 11 <script src='http://www.w3.org/Tools/respec/respec-w3c-common' class='remove' async></script> 12 <script class='remove'> 13 var respecConfig = { 14 publishDate: "2015-07-10", 15 shortName: "css-grid-1-test-plan", 16 specStatus: "unofficial", 17 editors: [ 18 { 19 name: "Manuel Rego Casasnovas", mailto: "rego@igalia.com", 20 company: "Igalia, S.L.", companyURL: "http://www.igalia.com/" 21 }, 22 ], 23 testSuiteURI: "http://test.csswg.org/suites/css-grid-1_dev/nightly-unstable/", 24 }; 25 </script> 26 <style> 27 a.bibref, 28 #references dt { 29 text-transform: uppercase; 30 } 31 </style> 32 </head> 33 <body> 34 <section id='abstract'> 35 <p> 36 This document is intended to be used as a guideline for the testing 37 activities related to the CSS Grid Layout Level 1 spec 38 [[!css3-grid-layout]]. Its main goal is to provide an overview of the 39 general testing areas, possible caveats and testing aspects not 40 immediately apparent from the spec. Also, it provides a means of 41 tracking the progress of the CSS Grid Layout spec testing. 42 </p> 43 <p> 44 This document is not meant to replace the spec in determining the 45 normative and non-normative assertions to be tested, but rather 46 complement it. 47 </p> 48 </section> 49 50 <section> 51 <h2>Introduction</h2> 52 <p> 53 As CSS moved away from the monolithic development of CSS 2.1 to the 54 modular development of CSS 3, the number of proposed new features and 55 the complexity of the layout landscape have increased dramatically. 56 While this directly translates to increased flexibility and agility in 57 adopting and implementing new CSS features, it also increases the 58 complexity of testing CSS features and the need for coordinating the 59 testing efforts. Also, the need for testing coordination increases as 60 crowd-sourcing efforts like 61 <a href="http://testthewebforward.org/" target="_blank">Test the Web 62 Forward</a> present people less familiar with the processes and 63 policies of the W3C with the opportunity to contribute new tests. 64 </p> 65 <p> 66 Except when defining new behaviors or redefining old behaviors, the 67 implicit assumption for new CSS modules is that they play nicely with 68 other modules or properties defined in CSS 2.1 [[!CSS21]]. As CSS Grid 69 Layout is a spec that touches many aspects of layout, styling and 70 CSSOM, it's not unreasonable to want to test the spec against these 71 implicit assumptions, too. 72 </p> 73 <p> 74 This testing strategy document is meant to complement the CSS Grid 75 Layout spec and the existing test suite by providing an overview of 76 the testing areas (especially the less apparent ones) and tracking 77 the progress of the testing activities against these test areas. 78 </p> 79 </section> 80 81 <section> 82 <h2>Goals</h2> 83 <p> 84 To ensure a comprehensive test suite with useful, high quality tests, 85 a number of goals are proposed. They range from process goals (how to 86 conduct testing) to implementation goals (how to write good tests). 87 </p> 88 <section> 89 <h3>Enabling easy test contribution</h3> 90 <p> 91 An important vector in successfully testing CSS Grid Layout is to 92 enable easy test contributions, both from W3C partners and from 93 non-W3C members that wish to contribute. This is achieved by clearly 94 marking and explaining the areas that need testing, linking to 95 existing tests, and general testing progress. 96 </p> 97 </section> 98 <section> 99 <h3>Providing guidance on testing</h3> 100 <p> 101 In order to increase the quality of the test contributions, this 102 document offers a set of guidelines for conducting testing (see 103 <a href="#approach" class="sectionRef"></a>) and a testing progress 104 tracker to increase the surface coverage of tests (see 105 <a href="#test-progress-tracking" class="sectionRef"></a>). 106 </p> 107 </section> 108 <section> 109 <h3>Creating automation-friendly tests</h3> 110 <p> 111 In terms of actual tests produced for the CSS Grid Layout 112 specification, the main goal is to ensure that most tests are 113 automatable (i.e. they're either reftests or use 114 <code>testharness.js</code>). Even where manual tests are absolutely 115 necessary they should be written so that they can be easily 116 automated – as there are ongoing efforts to make WebDriver 117 [[webdriver]] automated tests a first class citizen in W3C testing. 118 This means that even if a manual test requires user interaction, 119 the validation or PASS/FAIL conditions should still be clear enough 120 as to allow automatic validation if said interaction is later 121 automated. 122 </p> 123 </section> 124 </section> 125 <section> 126 <h2>Approach</h2> 127 <p> 128 As spec testing cannot be realistically separated from testing a 129 particular implementation (except for the very simple cases), the 130 approach proposed for testing is one that tries to first cover as 131 many areas as possible, instead of deep diving on a certain 132 feature or aspect of the spec first. A side benefit of this 133 approach is that the spec tests can be used at any time to gauge 134 the level of support of a certain implementation. 135 </p> 136 <p> 137 Having this <em>breadth-first</em> approach in mind, tests will be 138 created for the testing areas listed in <a href="#testing-areas" 139 class="sectionRef"></a>. Testing will be done in multiple passes, 140 each aimed at covering more specific edge-cases. 141 </p> 142 </section> 143 <section> 144 <h2>Testing areas</h2> 145 <section> 146 <h3>Explicit testing areas</h3> 147 <p> 148 These are testing areas normatively defined by the spec. They cover 149 things explicitly or implicitly defined in the CSS Grid Layout spec. 150 Please note that while detailed, this list is not necessarily 151 exhaustive and normative behaviors may not be contained in it. 152 When in doubt, consult the CSS Grid Layout spec or ask a question on 153 the <a href="http://lists.w3.org/Archives/Public/www-style/">mailing 154 list</a> adding <kbd>[css-grid]</kbd> to the subject. 155 </p> 156 <section> 157 <h4>Grid Containers (<kbd>grid-model</kbd>)</h4> 158 <ul> 159 <li> 160 <code>grid</code> and <code>inline-grid</code> values for 161 <code>display</code> property 162 [<a href="https://github.com/w3c/csswg-test/issues/627">#627</a>]. 163 </li> 164 <li> 165 Grid container’s margins do not collapse with the margins of its 166 contents 167 [<a href="https://github.com/w3c/csswg-test/issues/661">#661</a>]. 168 </li> 169 <li> 170 <code>column-*</code> properties have no effect on a grid 171 container 172 [<a href="https://github.com/w3c/csswg-test/issues/628">#628</a>]. 173 </li> 174 <li> 175 <code>float</code> and <code>clear</code> have no effect on a 176 grid item 177 [<a href="https://github.com/w3c/csswg-test/issues/629">#629</a>]. 178 </li> 179 <li> 180 <code>float</code> affects to the computed value of display on 181 grid items 182 [<a href="https://github.com/w3c/csswg-test/issues/630">#630</a>]. 183 </li> 184 <li> 185 <code>vertical-align</code> has no effect on a grid item 186 [<a href="https://github.com/w3c/csswg-test/issues/631">#631</a>]. 187 </li> 188 <li> 189 <code>first-line</code> and <code>first-letter</code> do not 190 apply to grid containers 191 [<a href="https://github.com/w3c/csswg-test/issues/632">#632</a>]. 192 </li> 193 <li> 194 Sizing grid containers 195 [<a href="https://github.com/w3c/csswg-test/issues/638">#638</a>]. 196 </li> 197 </ul> 198 </section> 199 <section> 200 <h4>Grid Items (<kbd>grid-items</kbd>)</h4> 201 <ul> 202 <li> 203 Each child of a grid container becomes a grid item 204 [<a href="https://github.com/w3c/csswg-test/issues/639">#639</a>]. 205 </li> 206 <li> 207 Each contiguous run of text that is directly contained inside 208 grid container is wrapped in an anonymous grid item 209 [<a href="https://github.com/w3c/csswg-test/issues/640">#640</a>]. 210 </li> 211 <li> 212 <code>visibility</code> property. 213 <div class="note">Still undefined in the spec.</div> 214 </li> 215 <li> 216 <code>order</code> property 217 [<a href="https://github.com/w3c/csswg-test/issues/641">#641</a>]. 218 </li> 219 <li> 220 Static position 221 [<a href="https://github.com/w3c/csswg-test/issues/642">#642</a> 222 & 223 <a href="https://github.com/w3c/csswg-test/issues/643">#643</a>]. 224 </li> 225 <li> 226 Z-axis ordering: 227 <ul> 228 <li> 229 <code>z-index</code> property 230 [<a href="https://github.com/w3c/csswg-test/issues/677">#677</a>]. 231 </li> 232 </ul> 233 </li> 234 <li> 235 Minimum size of grid items 236 [<a href="https://github.com/w3c/csswg-test/issues/799">#799</a>]. 237 </li> 238 </ul> 239 </section> 240 <section> 241 <h4>The Explicit Grid (<kbd>grid-definition</kbd>)</h4> 242 <ul> 243 <li> 244 Track sizing: 245 <ul> 246 <li> 247 <code>grid-template-columns</code> and 248 <code>grid-template-rows</code> properties 249 [<a href="https://github.com/w3c/csswg-test/issues/644">#644</a>]. 250 </li> 251 <li> 252 <kbd><track-size></kbd>: <code>length</code>, 253 <code>percentage</code>, <code>max-content</code>, 254 <code>min-content</code>, <code>minmax(min, max)</code>, 255 <code>auto</code>. 256 </li> 257 <li> 258 Named grid lines (<kbd><custom-ident></kbd>) 259 [<a href="https://github.com/w3c/csswg-test/issues/645">#645</a>]. 260 </li> 261 <li> 262 <code>repeat()</code> notation 263 [<a href="https://github.com/w3c/csswg-test/issues/646">#646</a>]. 264 </li> 265 <li> 266 Flexible lengths: <code>fr</code> unit 267 [<a href="https://github.com/w3c/csswg-test/issues/647">#647</a>]. 268 </li> 269 <li> 270 <code>subgrid</code> keyword. 271 <div class="note">Subgrid feature is currently at-risk.</div> 272 </li> 273 <li> 274 Resolved values 275 [<a href="https://github.com/w3c/csswg-test/issues/648">#648</a>]. 276 </li> 277 </ul> 278 </li> 279 <li> 280 Named areas: 281 <ul> 282 <li> 283 <code>grid-template-areas</code> property 284 [<a href="https://github.com/w3c/csswg-test/issues/649">#649</a>]. 285 </li> 286 <li> 287 Implicit named grid lines 288 [<a href="https://github.com/w3c/csswg-test/issues/650">#650</a>]. 289 </li> 290 <li> 291 Implicit named areas 292 [<a href="https://github.com/w3c/csswg-test/issues/651">#651</a>]. 293 </li> 294 </ul> 295 </li> 296 <li> 297 Explicit grid shorthand: 298 <ul> 299 <li> 300 <code>grid-template</code> property 301 [<a href="https://github.com/w3c/csswg-test/issues/652">#652</a>]. 302 </li> 303 </ul> 304 </li> 305 </ul> 306 </section> 307 <section> 308 <h4>The Implicit Grid (<kbd>implicit-grids</kbd>)</h4> 309 <ul> 310 <li> 311 <code>grid-auto-rows</code> and <code>grid-auto-columns</code> 312 properties 313 [<a href="https://github.com/w3c/csswg-test/issues/662">#662</a>]. 314 </li> 315 <li> 316 <code>grid-auto-flow</code> property 317 [<a href="https://github.com/w3c/csswg-test/issues/663">#663</a>]. 318 </li> 319 </ul> 320 </section> 321 <section> 322 <h4>Grid Definition Shorthand (<kbd>grid-shorthand</kbd>)</h4> 323 <ul> 324 <li> 325 <code>grid</code> property 326 [<a href="https://github.com/w3c/csswg-test/issues/664">#664</a>]. 327 </li> 328 </ul> 329 </section> 330 <section> 331 <h4>Placing Grid Items (<kbd>placement</kbd>)</h4> 332 <ul> 333 <li> 334 Common patterns: 335 <ul> 336 <li> 337 Named areas 338 [<a href="https://github.com/w3c/csswg-test/issues/665">#665</a>]. 339 </li> 340 <li> 341 Numeric indexes and spans 342 [<a href="https://github.com/w3c/csswg-test/issues/666">#666</a>]. 343 </li> 344 <li> 345 Named lines and spans 346 [<a href="https://github.com/w3c/csswg-test/issues/667">#667</a>]. 347 </li> 348 <li> 349 Auto placement 350 [<a href="https://github.com/w3c/csswg-test/issues/668">#668</a>]. 351 </li> 352 <li> 353 Auto sizing siblings. 354 <div class="note">Subgrid feature is currently at-risk.</div> 355 </li> 356 </ul> 357 </li> 358 <li> 359 Line-based placement: 360 <ul> 361 <li> 362 <code>grid-row-start</code>, <code>grid-column-start</code>, 363 <code>grid-row-end</code> and <code>grid-column-end</code> 364 properties 365 [<a href="https://github.com/w3c/csswg-test/issues/669">#669</a>]. 366 </li> 367 <li> 368 Grid placement conflict handling 369 [<a href="https://github.com/w3c/csswg-test/issues/670">#670</a>]. 370 </li> 371 </ul> 372 </li> 373 <li> 374 Placement shorthands: 375 <ul> 376 <li> 377 <code>grid-column</code>, <code>grid-row</code> and 378 <code>grid-area</code> properties 379 [<a href="https://github.com/w3c/csswg-test/issues/671">#671</a>]. 380 </li> 381 </ul> 382 </li> 383 <li> 384 Absolutely-positioned grid items 385 [<a href="https://github.com/w3c/csswg-test/issues/672">#672</a>]. 386 </li> 387 <li> 388 Grid item placement algorithm 389 [<a href="https://github.com/w3c/csswg-test/issues/683">#683</a>]. 390 </li> 391 </ul> 392 </section> 393 <section> 394 <h4>Alignment (<kbd>alignment</kbd>)</h4> 395 <ul> 396 <li> 397 Aligning with auto margins 398 [<a href="https://github.com/w3c/csswg-test/issues/673">#673</a>]. 399 </li> 400 <li> 401 Row-axis alignment: 402 <ul> 403 <li> 404 <code>justify-self</code> and <code>justify-items</code> 405 properties. 406 [<a href="https://github.com/w3c/csswg-test/issues/674">#674</a>]. 407 </li> 408 </ul> 409 </li> 410 <li> 411 Column-axis alignment: 412 <ul> 413 <li> 414 <code>align-self</code> and <code>align-items</code> 415 properties 416 [<a href="https://github.com/w3c/csswg-test/issues/675">#675</a>]. 417 </li> 418 </ul> 419 </li> 420 <li> 421 Aligning the grid: 422 <ul> 423 <li> 424 <code>justify-content</code> and <code>align-content</code> 425 properties 426 [<a href="https://github.com/w3c/csswg-test/issues/676">#676</a>]. 427 </li> 428 </ul> 429 </li> 430 <li> 431 Grid baselines 432 [<a href="https://github.com/w3c/csswg-test/issues/678">#678</a>]. 433 </li> 434 </ul> 435 </section> 436 <section> 437 <h4>Track Sizing Algorithm (<kbd>layout-algorithm</kbd>)</h4> 438 <ul> 439 <li> 440 Content-based track sizing 441 [<a href="https://github.com/w3c/csswg-test/issues/679">#679</a>]. 442 </li> 443 <li> 444 Grow tracks using free space 445 [<a href="https://github.com/w3c/csswg-test/issues/680">#680</a>]. 446 </li> 447 <li> 448 Flexible tracks 449 [<a href="https://github.com/w3c/csswg-test/issues/681">#681</a>]. 450 </li> 451 </ul> 452 </section> 453 <section> 454 <h4>Fragmenting Grid Layout (<kbd>pagination</kbd>)</h4> 455 <ul> 456 <li> 457 Fragmentation algorithm 458 [<a href="https://github.com/w3c/csswg-test/issues/682">#682</a>]. 459 </li> 460 </ul> 461 </section> 462 </section> 463 <section> 464 <h3>Specification examples</h3> 465 <p> 466 The spec examples should become tests (maybe some of them need to be 467 defined as manual tests). This will allow to increase the coverage 468 with more tests, but also to check the spec itself. 469 </p> 470 </section> 471 <section> 472 <h3>Implicit testing areas</h3> 473 <p> 474 These are testing areas either normatively defined in other specs 475 that explicitly refer to the CSS Grid Layout spec or simply not 476 explicitly defined, but implied by various aspects of the spec. 477 Please note that while detailed, this list is not necessarily 478 exhaustive and normative behaviors may not be contained in it. When 479 in doubt, consult the CSS Grid Layout spec or ask a question on the 480 <a href="http://lists.w3.org/Archives/Public/www-style/">mailing 481 list</a> adding <kbd>[css-grid]</kbd> to the subject. 482 </p> 483 <p> 484 Below is the list of implicit testing areas: 485 </p> 486 <ul> 487 <li> 488 CSS Grid Layout and other layout models: 489 <ul> 490 <li>Floats [[!CSS21]].</li> 491 <li>Positioned elements [[!css3-positioning]].</li> 492 <li>CSS Flexbox [[!css3-flexbox]].</li> 493 <li>CSS Multicolumn [[!css3-multicol]].</li> 494 <li>CSS Regions [[!css3-regions]].</li> 495 <li>CSS Shapes [[!css-shapes-1]].</li> 496 </ul> 497 </li> 498 <li> 499 CSS Grid Layout and different type of elements [[!html5]]: 500 <ul> 501 <li><code>img</code>.</li> 502 <li><code>video</code>.</li> 503 <li><code>iframe</code>.</li> 504 <li><code>canvas</code>.</li> 505 <li><code>table</code>.</li> 506 </ul> 507 </li> 508 <li> 509 Dynamic content: 510 <ul> 511 <li>Changing the content of the grid items at runtime.</li> 512 <li> 513 Interactive content <code>contentEditable</code>, 514 <code>designMode</code> and input elements [[!html5]]. 515 </li> 516 </ul> 517 </li> 518 <li>Writing modes [[!css3-writing-modes]].</li> 519 <li>Transforms [[!css3-transforms]].</li> 520 <li> 521 Transitions [[!css3-transitions]] and animations 522 [[!css3-animations]]. 523 </li> 524 <li>Pseudo-elements in grid items [[!CSS21]].</li> 525 </ul> 526 </section> 527 </section> 528 <section> 529 <h2>People and responsibilities</h2> 530 <p> 531 Below is a list of people you should reach out to if you have any 532 questions related to this document or testing CSS Grid Layout in 533 general: 534 </p> 535 <ul> 536 <li>Manuel Rego – Test Coordinator for CSS Grid Layout</li> 537 </ul> 538 </section> 539 <section> 540 <h2>Test progress tracking</h2> 541 <p> 542 Currently test progress tracking is done via GitHub 543 <a href="https://github.com/w3c/csswg-test/issues?labels=spec%3Agrid&milestone=&page=1&state=open"> 544 milestones and issues</a>. 545 <!-- 546 FIXME: This link doesn't work yet. 547 TODO: 548 * Label "spec:grid" has to be created 549 (https://github.com/w3c/csswg-test/labels) 550 * Milestone "css-grid-1_dev" has to be created 551 https://github.com/w3c/csswg-test/milestones 552 * Once issues are created, add references from the different 553 sections. 554 --> 555 </p> 556 </section> 557 </body> 558 </html>