floats-wrap-bfc-with-margin-001a.tentative.html (5581B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <meta charset="utf-8"> 4 <title>CSS Test: If a BFC's inline-axis margin is sufficiently negative such 5 that it inflates its border-box to be too large to fit alongside a float, 6 then it should be pushed below the float</title> 7 <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> 8 <link rel="help" href="https://www.w3.org/TR/CSS21/visuren.html#floats"> 9 <link rel="help" href="https://drafts.csswg.org/css-sizing-4/#stretch-fit-sizing"> 10 <meta name="assert" content="The border box of ... an element in the normal flow that establishes a new block formatting context ... must not overlap the margin box of any floats in the same block formatting context as the element itself. If necessary, implementations should clear the said element by placing it below any preceding floats"> 11 <link rel="help" href="https://www.w3.org/TR/CSS21/visudet.html#blockwidth"> 12 <!-- For a BFC with 'width:auto', negative total inline-axis margins will 13 effectively set a lower-bound for the used border-box width, to satisfy 14 the equation in CSS2.1 10.3.3. This test exercises scenarios where this 15 mechanism "props up" the BFC's border-box enough to make its border-box 16 collide width the float's margin-box, resulting in it needing to be moved 17 down below the float. --> 18 <!-- NOTE: This testcase-variant actually has "width:stretch" (and 19 vendor-prefixed equivalents) rather than "auto", but I think the effect 20 should be the same, since the "stretch" and "auto" sizing keywords are 21 equivalent in most cases. (Though: in practice, WebKit and Gecko are both 22 more-eager-to-wrap here, with their vendor-prefixed "stretch" values, as 23 compared to with "auto"... I'm not sure whether or not there's a good 24 reason for that, so this test is named with ".tentative" for now.) --> 25 <link rel="match" href="floats-wrap-bfc-with-margin-001-ref.html"> 26 <script> 27 const MARGIN_VALS = [-30, -20, -17, 28 // Values -16 through -1 are non-interoperable and are 29 // split off to a separate test. 30 0, 5, 10, 14 31 // Values over 15 are non-interoperable and are 32 // split off to a separate test. 33 ]; 34 const HORIZ_SIDES = ["left", "right"]; // Used for 'float:*' and 'margin-*'. 35 const DIRECTION_VALS = ["ltr", "rtl"]; 36 37 function newDivWithClassAndParent(className, parent) { 38 let elem = document.createElement("div"); 39 if (className) { 40 elem.classList.add(className); 41 } 42 parent.appendChild(elem); 43 return elem; 44 } 45 function generateGroup(directionVal, floatVal, marginPropSuffix) { 46 let group = newDivWithClassAndParent("group", document.body); 47 group.style.direction = directionVal; 48 const marginPropName = "margin-" + marginPropSuffix; 49 50 for (let v of MARGIN_VALS) { 51 let container = newDivWithClassAndParent("container", group); 52 let float = newDivWithClassAndParent("float", container); 53 float.style.cssFloat = floatVal; 54 55 let bfc = newDivWithClassAndParent("bfc", container); 56 bfc.style[marginPropName] = v + "px"; 57 } 58 } 59 function go() { 60 for (let directionVal of DIRECTION_VALS) { 61 for (let floatVal of HORIZ_SIDES) { 62 for (let marginPropSuffix of HORIZ_SIDES) { 63 generateGroup(directionVal, floatVal, marginPropSuffix); 64 } 65 } 66 } 67 // Note: the "reftest-wait" usage here isn't strictly necessary; it just 68 // helps ensure that we actually make it through all of the above JS and 69 // populate this document with the content that we want to render. 70 // (Specifically: if we e.g. throw a JS exception somewhere early in both 71 // the testcase and reference case, then the "reftest-wait" class will 72 // never be removed; and that will cause the test run to be classified 73 // as a failure, rather than a trivial "pass" with a visual comparison of 74 // two blank documents.) 75 document.documentElement.removeAttribute("class"); 76 } 77 </script> 78 <style> 79 .group { 80 width: 500px; 81 border: 1px solid black; 82 } 83 .container { 84 /* This is the container that holds our float+bfc. We make it an 85 inline-block so that we can test a bunch of these in a row. */ 86 display: inline-block; 87 vertical-align: top; 88 width: 30px; 89 height: 40px; 90 /* This border and margin are just cosmetic, to avoid overlap between 91 * adjacent containers within a row. */ 92 border: 1px solid gray; 93 margin-left: 30px; 94 } 95 96 .float { 97 /* We'll set the float property elsewhere (to 'right' or 'left'). */ 98 width: 7px; 99 height: 8px; 100 background: fuchsia; 101 border: 1px solid purple; 102 /* Each .float's margin-box (which the corresponding .bfc's border-box cannot 103 * overlap) is 14px wide: 104 * 7px content + 2px horizontal border + 5px horizontal margin 105 * Note that we're intentionally using a nonzero 'margin' here, to be sure 106 * the UA is using the float's margin-box (and not one of its other 107 * boxes) for this non-overlapping calculation. */ 108 margin: 1px 3px 1px 2px; 109 } 110 .bfc { 111 /* Each .bfc's border-box width is 2px (from the border) plus whatever we 112 * resolve 'width:auto' to, which is influenced by the particular choice of 113 * 'margin' values (and the available space). */ 114 display: flow-root; 115 background: aqua; 116 height: 15px; 117 border: 1px solid blue; 118 119 /* https://drafts.csswg.org/css-sizing-4/#stretch-fit-sizing */ 120 width: -moz-available; 121 width: -webkit-fill-available; 122 width: stretch; 123 } 124 </style> 125 <body onload="go()"> 126 </body> 127 </html>