Commit 14204acd authored by David Grogan's avatar David Grogan Committed by Commit Bot

[css-flex] Update test to wait for image load before checking sizes

This test flaked on me locally with:
height expected 100 but got 0

Which is consistent with calling checkLayout before the image has
loaded, but not a guarantee that's what's happening. I haven't been able
to reproduce it.

In any case, this change can't hurt.

Change-Id: I1bf8ccb935845c6e5e4529694c2d77e3f4a529a3
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2340735Reviewed-by: default avatarMorten Stenshorne <mstensho@chromium.org>
Commit-Queue: David Grogan <dgrogan@chromium.org>
Cr-Commit-Position: refs/heads/master@{#795652}
parent eecf5735
...@@ -2,6 +2,14 @@ ...@@ -2,6 +2,14 @@
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://www.w3.org/TR/CSS22/visudet.html#the-height-property"> <link rel="help" href="https://www.w3.org/TR/CSS22/visudet.html#the-height-property">
<meta name="assert" content="The percentage height resolution quirk isn't applied to flexboxes."> <meta name="assert" content="The percentage height resolution quirk isn't applied to flexboxes.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<!-- Have to wait for onload to fire to ensure the image is loaded. -->
<body onload="checkLayout('#container')">
<p>There should be a green square to the left of a blue square, and no red.</p> <p>There should be a green square to the left of a blue square, and no red.</p>
<div id="container" style="width:200px; height:456px;"> <div id="container" style="width:200px; height:456px;">
<div style="display:flex; background:blue;" data-expected-height="100"> <div style="display:flex; background:blue;" data-expected-height="100">
...@@ -9,9 +17,3 @@ ...@@ -9,9 +17,3 @@
<div style="width: 50px; height: 100%; background: red;" data-expected-height="0"></div> <div style="width: 50px; height: 100%; background: red;" data-expected-height="0"></div>
</div> </div>
</div> </div>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<script>
checkLayout("#container");
</script>
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment