File: flexbox-align-self-baseline-compatability.html

package info (click to toggle)
thunderbird 1%3A143.0.1-1
  • links: PTS, VCS
  • area: main
  • in suites: experimental
  • size: 4,703,968 kB
  • sloc: cpp: 7,770,492; javascript: 5,943,842; ansic: 3,918,754; python: 1,418,263; xml: 653,354; asm: 474,045; java: 183,079; sh: 111,238; makefile: 20,410; perl: 14,359; objc: 13,059; yacc: 4,583; pascal: 3,405; lex: 1,720; ruby: 999; exp: 762; sql: 715; awk: 580; php: 436; lisp: 430; sed: 69; csh: 10
file content (36 lines) | stat: -rw-r--r-- 1,307 bytes parent folder | download | duplicates (7) 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
 
<!DOCTYPE html>
<html>
    <link rel="author" title="Martin Robinson" href="mailto:mrobinson@igalia.com">
    <link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
    <link rel="match" href="/css/reference/ref-filled-green-100px-square.xht"/>
    <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#flex-baselines"/>
    <meta name="assert" content="Test checks that item baselines orthogonal to the flex container's main axis do not affect baseline alignment.">

    <style>
        .flex  {
            display: flex;
            background: red;
            width: 100px;
            flex-direction: column;
            flex-wrap: wrap;
        }

        .flex > div {
            width: 100px;
            height: 50px;
            background: green;
            color: transparent;
            align-self: baseline;
        }
    </style>

    <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>

    <div class="flex">
        <div>A</div>
        <!--The baseline of this child is different from the first, but because it
            is orthogonal to the main axis of the flexbox, it does not affect the
            positioning of the item, even with `baseline` alignment -->
        <div style="font-size: 200%">A</div>
    </div>
</html>