diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-flexbox/intrinsic-size/row-compat-001.html')
-rw-r--r-- | testing/web-platform/tests/css/css-flexbox/intrinsic-size/row-compat-001.html | 132 |
1 files changed, 132 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-flexbox/intrinsic-size/row-compat-001.html b/testing/web-platform/tests/css/css-flexbox/intrinsic-size/row-compat-001.html new file mode 100644 index 0000000000..1fb248acb8 --- /dev/null +++ b/testing/web-platform/tests/css/css-flexbox/intrinsic-size/row-compat-001.html @@ -0,0 +1,132 @@ +<!DOCTYPE html> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#intrinsic-sizes"> +<link rel="help" href="https://crbug.com/1445937"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<meta name="assert" + content="Changing flex intrinsic sizing algorithm doesn't break any of these cases." /> + +<style> + section.bugreport { + outline: 1px solid grey; + margin-bottom: 25px; + padding: 3px; + } + + #wrapping-broke .flex { + display: flex; + width: min-content; + outline: 2px solid; + margin-bottom: 10px; + } + + #wrapping-broke span.orange100 { + float: left; + height: 25px; + width: 100px; + background: orange; + } + + #bug1454306 .fourUpList { + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-template-rows: 1fr; + width: 800px; + background: yellow; + } + + #bug1454306 .thumbnail-list--item { + display: flex; + width: 100%; + outline: 1px solid; + } + + #bug1454306 .thumbnail-list--item-photo { + height: 50px; + width: 50px; + } + + #bug1454306 .thumbnail-list--item-header { + flex: 1 0 calc(70% - 10.5px) + } +</style> + +<section id="wrapping-broke" class="bugreport"> + <p>https://crbug.com/1445937 We need to see a 100x100 orange square, not a + 400x25 orange rectangle.</p> + <div class="flex" data-expected-width="100"> + <!-- one item with very negative desired flex fraction --> + <div> + <span class="orange100"></span> + <span class="orange100"></span> + <span class="orange100"></span> + <span class="orange100"></span> + </div> + <!-- second item with desired flex fraction 0 --> + <div></div> + </div> +</section> + +<section id="bug1454306" class="bugreport"> + <p>https://crbug.com/1454306 The boxes each must be 1/4 the size of the yellow + containing block. No overflow.</p> + + <!-- This compat case needs the item in the example below to contribute its + min-content to container's min-content. In one of our earlier + implementations, the item contributed its flex-basis (aka max-content). + + <item style="flex: 1 0 calc(70% - 10.5px)"> + max-content larger than flex basis + </item> + --> + + <div class=fourUpList> + + <div class=thumbnail-list--item data-expected-width="200"> + <div class=thumbnail-list--item-header>Some News Headline</div> + <div class=thumbnail-list--item-photo></div> + </div> + + <div class=thumbnail-list--item data-expected-width="200"> + <div class=thumbnail-list--item-header>Some Other News Headline 2</div> + <div class=thumbnail-list--item-photo></div> + </div> + + <div class=thumbnail-list--item data-expected-width="200"> + <div class=thumbnail-list--item-header>Even another Headline 3</div> + <div class=thumbnail-list--item-photo></div> + </div> + + <div class=thumbnail-list--item data-expected-width="200"> + <div class=thumbnail-list--item-header> + Peets Coffee announces plans to move Oakland + </div> + <div class=thumbnail-list--item-photo></div> + </div> + + </div> +</section> + +<section id="gmail-tables" class="bugreport"> + <p>https://bugs.chromium.org/p/chromium/issues/detail?id=1457103 We need a + 100x100 green square here.</p> + <!-- This case requires that the %-width fixed table has a large flex basis, which means the table's intrinsic max width has to be large.--> + <div style="width: 100px;"> + <div style="display: table;"> + <div style="display: table-cell"> + <div class=flex style="display: flex; height: 100px; background: green;" + data-expected-width="100"> + <table style="width: 100%; table-layout: fixed;"></table> + </div> + </div> + </div> + </div> +</section> + +<script> + checkLayout('#wrapping-broke .flex'); + checkLayout('#bug1454306'); + checkLayout('#gmail-tables .flex'); +</script> |