Commit 05bcbb72 authored by David Grogan's avatar David Grogan Committed by Commit Bot

[css-flex] Fix a test that had bad expectations

Some hand calculations in the reference didn't age well. I replaced the
-ref.html with checkLayout.

The test failed in Firefox in an identical fashion. New test passes in
both browsers.

Just a test, no behavior change.

Fixed: 1111708
Change-Id: I7fc82e5d990c57db6c0d205e30aacaed88990418
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2490251
Commit-Queue: David Grogan <dgrogan@chromium.org>
Reviewed-by: default avatarChristian Biesinger <cbiesinger@chromium.org>
Cr-Commit-Position: refs/heads/master@{#820506}
parent ed16e9e5
<!DOCTYPE html>
<title>flexbox | justify-content: center / overflow</title>
<link rel="author" href="http://opera.com" title="Opera Software">
<style>
div {
font-family: monospace;
background: blue;
margin: 1em 0 0 10em;
border: 1px solid black;
height: 8em;
width: 4em;
position: relative;
}
span {
background: white;
margin: 1em;
width: 2em;
height: 6em;
display: block;
position: absolute;
}
span:nth-child(1) {
background: yellow;
left: -4em;
}
span:nth-child(2) {
background: pink;
}
span:nth-child(3) {
background: lightblue;
left: 4em;
}
</style>
<div>
<span>x</span><span>x</span><span>x</span>
</div>
<!DOCTYPE html> <!DOCTYPE html>
<title>flexbox | justify-content: center / overflow</title> <title>flexbox | justify-content: center / overflow</title>
<link rel="author" href="http://opera.com" title="Opera Software"> <link rel="author" href="http://opera.com" title="Opera Software">
<link rel="author" href="mailto:dgrogan@chromium.org" title="David Grogan">
<link rel="help" <link rel="help"
href="http://www.w3.org/TR/css-flexbox-1/#justify-content-property"> href="http://www.w3.org/TR/css-flexbox-1/#justify-content-property">
<link rel="match" href="flexbox_justifycontent-center-overflow-ref.html"> <meta name="assert" content="Items that overflow a singleline justify-content:center flexbox container are positioned correctly.">
<style>
div { <script src="/resources/testharness.js"></script>
font-family: monospace; <script src="/resources/testharnessreport.js"></script>
background: blue; <script src="/resources/check-layout-th.js"></script>
margin: 1em 0 0 10em;
border: 1px solid black; Blue is the flexbox. Orange are items that overflow it.
height: 8em;
width: 4em;
display: flex; <style>
justify-content: center; .flexbox {
background: blue;
margin-left: 50px;
height: 150px;
width: 50px;
display: flex;
justify-content: center;
position: relative;
} }
span { span {
background: white; background: orange;
margin: 1em; margin: 10px;
min-width: 2em; flex: 1 0 40px;
max-width: 2em;
display: inline-block;
flex: 1 0 0%;
} }
span:nth-child(1) {background: yellow;}
span:nth-child(2) {background: pink;}
span:nth-child(3) {background: lightblue;}
</style> </style>
<div> <div class=flexbox>
<span>x</span><span>x</span><span>x</span> <span data-expected-width=40 data-offset-x=-55></span>
<span data-expected-width=40 data-offset-x=5></span>
<span data-expected-width=40 data-offset-x=65></span>
</div> </div>
<script>
checkLayout('span');
</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