layout/reftests/flexbox/flexbox-minSize-horiz-1.xhtml

Thu, 15 Jan 2015 21:03:48 +0100

author
Michael Schloh von Bennewitz <michael@schloh.com>
date
Thu, 15 Jan 2015 21:03:48 +0100
branch
TOR_BUG_9701
changeset 11
deefc01c0e14
permissions
-rw-r--r--

Integrate friendly tips from Tor colleagues to make (or not) 4.5 alpha 3;
This includes removal of overloaded (but unused) methods, and addition of
a overlooked call to DataStruct::SetData(nsISupports, uint32_t, bool.)

michael@0 1 <?xml version="1.0" encoding="UTF-8"?>
michael@0 2 <!--
michael@0 3 Any copyright is dedicated to the Public Domain.
michael@0 4 http://creativecommons.org/publicdomain/zero/1.0/
michael@0 5 -->
michael@0 6 <!--
michael@0 7 This test checks that we correctly handle flex items with an explicit
michael@0 8 "min-width: -moz-min-content".
michael@0 9
michael@0 10 We check that such flex items can't shrink below their min-content width,
michael@0 11 unless we explicitly reduce their min-width with e.g. "min-width: 0".
michael@0 12 -->
michael@0 13 <html xmlns="http://www.w3.org/1999/xhtml">
michael@0 14 <head>
michael@0 15 <style>
michael@0 16 div.flexbox {
michael@0 17 width: 200px;
michael@0 18 display: flex;
michael@0 19 margin-bottom: 5px;
michael@0 20 font-size: 8px;
michael@0 21 border: 1px dotted black;
michael@0 22 }
michael@0 23 div.flexbox > * {
michael@0 24 margin-right: 20px;
michael@0 25 border: 1px dashed green;
michael@0 26 background: lightblue;
michael@0 27 height: 40px;
michael@0 28 min-width: -moz-min-content;
michael@0 29 }
michael@0 30 div.smallSize { width: 5px; }
michael@0 31 div.smallFlexBasis { flex-basis: 2px; }
michael@0 32 div.zeroMinWidth { min-width: 0; }
michael@0 33
michael@0 34 </style>
michael@0 35 </head>
michael@0 36 <body>
michael@0 37
michael@0 38 <!-- Check that we honor "min-width: min-content" as a lower-bound when
michael@0 39 sizing flex items. -->
michael@0 40 <div class="flexbox">
michael@0 41 <div>abc d e f</div>
michael@0 42 <div class="smallSize">abc d e f</div>
michael@0 43 <div class="smallFlexBasis">abc d e f</div>
michael@0 44 </div>
michael@0 45
michael@0 46 <!-- ... EVEN if our flex container is small and we're overflowing. -->
michael@0 47 <div class="flexbox smallSize">
michael@0 48 <div>abc d e f</div>
michael@0 49 <div class="smallSize">abc d e f</div>
michael@0 50 <div class="smallFlexBasis">abc d e f</div>
michael@0 51 </div>
michael@0 52
michael@0 53 <!-- Test that we don't clamp when we've got "min-width: 0" on our
michael@0 54 flex items, though. -->
michael@0 55 <div class="flexbox">
michael@0 56 <div class="zeroMinWidth">abc d e f</div>
michael@0 57 <div class="zeroMinWidth smallSize">abc d e f</div>
michael@0 58 <div class="zeroMinWidth smallFlexBasis">abc d e f</div>
michael@0 59 </div>
michael@0 60
michael@0 61 <!-- ... and similarly, when we have a small flex container and we trigger
michael@0 62 shrinking behavior, flex items with "min-width: 0" are allowed to
michael@0 63 shrink past their min-content width. -->
michael@0 64 <div class="flexbox smallSize">
michael@0 65 <div class="zeroMinWidth">abc d e f</div>
michael@0 66 <div class="zeroMinWidth smallSize">abc d e f</div>
michael@0 67 <div class="zeroMinWidth smallFlexBasis">abc d e f</div>
michael@0 68 </div>
michael@0 69
michael@0 70 </body>
michael@0 71 </html>

mercurial