mirror of
https://github.com/LadybirdBrowser/ladybird
synced 2026-04-26 09:45:06 +02:00
8f21513902
This causes 36 new subtests to pass locally. :^) Unfortunately at least one of these is flaky when it's able to load the font file, apparently because we don't wait for the font and its stylesheet to actually load before the tests run.
150 lines
4.3 KiB
HTML
150 lines
4.3 KiB
HTML
<!DOCTYPE html>
|
|
<!--
|
|
Any copyright is dedicated to the Public Domain.
|
|
http://creativecommons.org/publicdomain/zero/1.0/
|
|
-->
|
|
<html>
|
|
<meta charset="utf-8">
|
|
<title>CSS Flexbox Test: Testing automatic minimun size of <input> flex items in a row flex container</title>
|
|
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
|
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
|
|
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#min-size-auto">
|
|
<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#replaced-percentage-min-contribution">
|
|
<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#min-content-zero">
|
|
<link rel="stylesheet" href="../../fonts/ahem.css">
|
|
<meta name="assert" content="This test verifies that an <input> flex item should resolve its percentage part of main size to zero when computing specified size suggestion.">
|
|
|
|
<script src="../../resources/testharness.js"></script>
|
|
<script src="../../resources/testharnessreport.js"></script>
|
|
<script src="../../resources/check-layout-th.js"></script>
|
|
|
|
<style>
|
|
.flexbox {
|
|
display: flex;
|
|
width: 300px;
|
|
height: 40px;
|
|
border: 1px solid black;
|
|
margin-bottom: 5px;
|
|
}
|
|
.spacer {
|
|
/* Just to occupy some space, so that the flex algorithm will try to shrink
|
|
the <input> element below its percentage specified width. */
|
|
flex: 0 0 200px;
|
|
background: lightgray;
|
|
}
|
|
input {
|
|
font: 20px/1 Ahem;
|
|
background: lightblue;
|
|
/* Get rid of native theming and UA default styles. */
|
|
appearance: none;
|
|
border: 0;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
.test1 {
|
|
width: 100%;
|
|
}
|
|
.test2 {
|
|
width: calc(100%);
|
|
}
|
|
.test3 {
|
|
width: calc(140px + 100%);
|
|
}
|
|
</style>
|
|
|
|
<body onload="checkLayout('.flexbox')">
|
|
<p>Test1: "width: 100%"</p>
|
|
<div class="flexbox">
|
|
<div class="spacer"></div>
|
|
<input type="text"
|
|
class="test1" data-expected-width="100">
|
|
</div>
|
|
|
|
<div class="flexbox">
|
|
<div class="spacer"></div>
|
|
<input type="range"
|
|
class="test1" data-expected-width="100">
|
|
</div>
|
|
|
|
<div class="flexbox">
|
|
<div class="spacer"></div>
|
|
<input type="button" value="XXXXXXX"
|
|
class="test1" data-expected-width="140">
|
|
</div>
|
|
|
|
<div class="flexbox">
|
|
<div class="spacer"></div>
|
|
<input type="submit" value="XXXXXXX"
|
|
class="test1" data-expected-width="140">
|
|
</div>
|
|
|
|
<div class="flexbox">
|
|
<div class="spacer"></div>
|
|
<input type="reset" value="XXXXXXX"
|
|
class="test1" data-expected-width="140">
|
|
</div>
|
|
|
|
<p>Test2: "width: calc(100%)"</p>
|
|
<div class="flexbox">
|
|
<div class="spacer"></div>
|
|
<input type="text"
|
|
class="test2" data-expected-width="100">
|
|
</div>
|
|
|
|
<div class="flexbox">
|
|
<div class="spacer"></div>
|
|
<input type="range"
|
|
class="test2" data-expected-width="100">
|
|
</div>
|
|
|
|
<div class="flexbox">
|
|
<div class="spacer"></div>
|
|
<input type="button" value="XXXXXXX"
|
|
class="test2" data-expected-width="140">
|
|
</div>
|
|
|
|
<div class="flexbox">
|
|
<div class="spacer"></div>
|
|
<input type="submit" value="XXXXXXX"
|
|
class="test2" data-expected-width="140">
|
|
</div>
|
|
|
|
<div class="flexbox">
|
|
<div class="spacer"></div>
|
|
<input type="reset" value="XXXXXXX"
|
|
class="test2" data-expected-width="140">
|
|
</div>
|
|
|
|
<p>Test3: "width: calc(140px + 100%)"</p>
|
|
<div class="flexbox">
|
|
<div class="spacer"></div>
|
|
<input type="text"
|
|
class="test3" data-expected-width="140">
|
|
</div>
|
|
|
|
<div class="flexbox">
|
|
<div class="spacer"></div>
|
|
<input type="range"
|
|
class="test3" data-expected-width="140">
|
|
</div>
|
|
|
|
<div class="flexbox">
|
|
<div class="spacer"></div>
|
|
<input type="button" value="XXXXXXX"
|
|
class="test3" data-expected-width="140">
|
|
</div>
|
|
|
|
<div class="flexbox">
|
|
<div class="spacer"></div>
|
|
<input type="submit" value="XXXXXXX"
|
|
class="test3" data-expected-width="140">
|
|
</div>
|
|
|
|
<div class="flexbox">
|
|
<div class="spacer"></div>
|
|
<input type="reset" value="XXXXXXX"
|
|
class="test3" data-expected-width="140">
|
|
</div>
|
|
</body>
|
|
</html>
|