independent-formatting-context-fieldset.html (2133B)
1 <!DOCTYPE HTML> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <html><head> 7 <meta charset="utf-8"> 8 <title>Test: subgrid is allowed on fieldset and button</title> 9 <link rel="author" title="Daniel Holbert" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1999886"> 10 <link rel="help" href="https://drafts.csswg.org/css-grid-2/#subgrid-listing"> 11 <link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#the-fieldset-and-legend-elements"> 12 <link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#button-layout-2"> 13 <link rel="match" href="independent-formatting-context-fieldset-ref.html"> 14 <!-- TODO(dholbert): This file should ultimately be merged into 15 independent-formatting-context.html; see 16 https://bugzilla.mozilla.org/show_bug.cgi?id=2000014 --> 17 <style> 18 19 html,body { 20 font:16px/1 monospace; padding:0; margin:0; line-height: 0; 21 } 22 23 fieldset, button { 24 /* Reset the default margin/border/padding, so that we can use our 25 simple regular-div mockup in reference case. (Note, it's important 26 that this come before the .grid {...} rule, so that we don't reset its 27 cosmetic margin-right/margin-bottom decls.) */ 28 margin: 0; 29 border: 0; 30 padding: 0; 31 appearance: none; 32 } 33 .grid { 34 position: relative; 35 display: inline-grid; 36 grid-template-rows: 0px 100px; 37 width: 100px; 38 margin-right: 20px; 39 margin-bottom: 20px; 40 vertical-align: top; 41 } 42 43 .subgrid { 44 display: grid; 45 grid-template-rows: subgrid; 46 grid-row: 1 / 3; 47 width: 100px; 48 height: 100px; 49 background-color: red; 50 } 51 52 .second { 53 grid-row: 2; 54 background-color: green; 55 } 56 57 </style> 58 </head> 59 <body> 60 61 <!-- 'fieldset' and 'button' can both be styled as a grid/inline-grid, and 62 that doesn't necessarily create an independent formatting context. 63 So they are both eligible to be a subgrid.--> 64 <div class="grid"> 65 <fieldset class="subgrid"> 66 <div class="second"></div> 67 </fieldset> 68 </div> 69 70 <div class="grid"> 71 <button class="subgrid"> 72 <div class="second"></div> 73 </button> 74 </div> 75 76 </body> 77 </html>