Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(777)

Side by Side Diff: LayoutTests/css3/flexbox/multiline-justify-content.html

Issue 289903007: Inline flexbox width is wrongly calculated when wrapping vertically (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: Addressing comments of patch set 7 Created 6 years, 5 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <html> 2 <html>
3 <style> 3 <style>
4 .flexbox { 4 .flexbox {
5 position: relative; 5 position: relative;
6 display: -webkit-flex; 6 display: -webkit-flex;
7 background-color: grey; 7 background-color: grey;
8 max-width: 100px; 8 max-width: 100px;
9 -webkit-align-content: flex-start; 9 -webkit-align-content: flex-start;
10 } 10 }
(...skipping 1460 matching lines...) Expand 10 before | Expand all | Expand 10 after
1471 'child3': [10, 40, 10, 35], 1471 'child3': [10, 40, 10, 35],
1472 'child4': [10, 20, 10, 5], 1472 'child4': [10, 20, 10, 5],
1473 }, 1473 },
1474 }, 1474 },
1475 }, 1475 },
1476 }, 1476 },
1477 'column': { 1477 'column': {
1478 'ltr': { 1478 'ltr': {
1479 'wrap': { 1479 'wrap': {
1480 'flex-start': { 1480 'flex-start': {
1481 'flexbox': [80, 40], 1481 'flexbox': [80, 10],
1482 'child1': [40, 10, 40, 0], 1482 'child1': [40, 10, 40, 0],
1483 'child2': [20, 10, 20, 0], 1483 'child2': [20, 10, 20, 0],
1484 'child3': [40, 10, 40, 10], 1484 'child3': [40, 10, 40, 10],
1485 'child4': [20, 10, 20, 10], 1485 'child4': [20, 10, 20, 10],
1486 }, 1486 },
1487 'flex-end': { 1487 'flex-end': {
1488 'flexbox': [80, 40], 1488 'flexbox': [80, 10],
1489 'child1': [40, 10, 20, 0], 1489 'child1': [40, 10, 20, 0],
1490 'child2': [20, 10, 0, 0], 1490 'child2': [20, 10, 0, 0],
1491 'child3': [40, 10, 20, 10], 1491 'child3': [40, 10, 20, 10],
1492 'child4': [20, 10, 0, 10], 1492 'child4': [20, 10, 0, 10],
1493 }, 1493 },
1494 'center': { 1494 'center': {
1495 'flexbox': [80, 40], 1495 'flexbox': [80, 10],
1496 'child1': [40, 10, 30, 0], 1496 'child1': [40, 10, 30, 0],
1497 'child2': [20, 10, 10, 0], 1497 'child2': [20, 10, 10, 0],
1498 'child3': [40, 10, 30, 10], 1498 'child3': [40, 10, 30, 10],
1499 'child4': [20, 10, 10, 10], 1499 'child4': [20, 10, 10, 10],
1500 }, 1500 },
1501 'space-between': { 1501 'space-between': {
1502 'flexbox': [80, 40], 1502 'flexbox': [80, 10],
1503 'child1': [40, 10, 40, 0], 1503 'child1': [40, 10, 40, 0],
1504 'child2': [20, 10, 0, 0], 1504 'child2': [20, 10, 0, 0],
1505 'child3': [40, 10, 40, 10], 1505 'child3': [40, 10, 40, 10],
1506 'child4': [20, 10, 0, 10], 1506 'child4': [20, 10, 0, 10],
1507 }, 1507 },
1508 'space-around': { 1508 'space-around': {
1509 'flexbox': [80, 40], 1509 'flexbox': [80, 10],
1510 'child1': [40, 10, 35, 0], 1510 'child1': [40, 10, 35, 0],
1511 'child2': [20, 10, 5, 0], 1511 'child2': [20, 10, 5, 0],
1512 'child3': [40, 10, 35, 10], 1512 'child3': [40, 10, 35, 10],
1513 'child4': [20, 10, 5, 10], 1513 'child4': [20, 10, 5, 10],
1514 }, 1514 },
1515 }, 1515 },
1516 'wrap-reverse': { 1516 'wrap-reverse': {
1517 'flex-start': { 1517 'flex-start': {
1518 'flexbox': [80, 40], 1518 'flexbox': [80, 10],
1519 'child1': [40, 10, 40, 30], 1519 'child1': [40, 10, 40, 0],
1520 'child2': [20, 10, 20, 30], 1520 'child2': [20, 10, 20, 0],
1521 'child3': [40, 10, 40, 20], 1521 'child3': [40, 10, 40, -10],
1522 'child4': [20, 10, 20, 20], 1522 'child4': [20, 10, 20, -10],
1523 }, 1523 },
1524 'flex-end': { 1524 'flex-end': {
1525 'flexbox': [80, 40], 1525 'flexbox': [80, 10],
1526 'child1': [40, 10, 20, 30], 1526 'child1': [40, 10, 20, 0],
1527 'child2': [20, 10, 0, 30], 1527 'child2': [20, 10, 0, 0],
1528 'child3': [40, 10, 20, 20], 1528 'child3': [40, 10, 20, -10],
1529 'child4': [20, 10, 0, 20], 1529 'child4': [20, 10, 0, -10],
1530 }, 1530 },
1531 'center': { 1531 'center': {
1532 'flexbox': [80, 40], 1532 'flexbox': [80, 10],
1533 'child1': [40, 10, 30, 30], 1533 'child1': [40, 10, 30, 0],
1534 'child2': [20, 10, 10, 30], 1534 'child2': [20, 10, 10, 0],
1535 'child3': [40, 10, 30, 20], 1535 'child3': [40, 10, 30, -10],
1536 'child4': [20, 10, 10, 20], 1536 'child4': [20, 10, 10, -10],
1537 }, 1537 },
1538 'space-between': { 1538 'space-between': {
1539 'flexbox': [80, 40], 1539 'flexbox': [80, 10],
1540 'child1': [40, 10, 40, 30], 1540 'child1': [40, 10, 40, 0],
1541 'child2': [20, 10, 0, 30], 1541 'child2': [20, 10, 0, 0],
1542 'child3': [40, 10, 40, 20], 1542 'child3': [40, 10, 40, -10],
1543 'child4': [20, 10, 0, 20], 1543 'child4': [20, 10, 0, -10],
1544 }, 1544 },
1545 'space-around': { 1545 'space-around': {
1546 'flexbox': [80, 40], 1546 'flexbox': [80, 10],
1547 'child1': [40, 10, 35, 30], 1547 'child1': [40, 10, 35, 0],
1548 'child2': [20, 10, 5, 30], 1548 'child2': [20, 10, 5, 0],
1549 'child3': [40, 10, 35, 20], 1549 'child3': [40, 10, 35, -10],
1550 'child4': [20, 10, 5, 20], 1550 'child4': [20, 10, 5, -10],
1551 }, 1551 },
1552 }, 1552 },
1553 }, 1553 },
1554 'rtl': { 1554 'rtl': {
1555 'wrap': { 1555 'wrap': {
1556 'flex-start': { 1556 'flex-start': {
1557 'flexbox': [80, 40], 1557 'flexbox': [80, 10],
1558 'child1': [40, 10, 40, 30], 1558 'child1': [40, 10, 40, 0],
1559 'child2': [20, 10, 20, 30], 1559 'child2': [20, 10, 20, 0],
1560 'child3': [40, 10, 40, 20], 1560 'child3': [40, 10, 40, -10],
1561 'child4': [20, 10, 20, 20], 1561 'child4': [20, 10, 20, -10],
1562 }, 1562 },
1563 'flex-end': { 1563 'flex-end': {
1564 'flexbox': [80, 40], 1564 'flexbox': [80, 10],
1565 'child1': [40, 10, 20, 30], 1565 'child1': [40, 10, 20, 0],
1566 'child2': [20, 10, 0, 30], 1566 'child2': [20, 10, 0, 0],
1567 'child3': [40, 10, 20, 20], 1567 'child3': [40, 10, 20, -10],
1568 'child4': [20, 10, 0, 20], 1568 'child4': [20, 10, 0, -10],
1569 }, 1569 },
1570 'center': { 1570 'center': {
1571 'flexbox': [80, 40], 1571 'flexbox': [80, 10],
1572 'child1': [40, 10, 30, 30], 1572 'child1': [40, 10, 30, 0],
1573 'child2': [20, 10, 10, 30], 1573 'child2': [20, 10, 10, 0],
1574 'child3': [40, 10, 30, 20], 1574 'child3': [40, 10, 30, -10],
1575 'child4': [20, 10, 10, 20], 1575 'child4': [20, 10, 10, -10],
1576 }, 1576 },
1577 'space-between': { 1577 'space-between': {
1578 'flexbox': [80, 40], 1578 'flexbox': [80, 10],
1579 'child1': [40, 10, 40, 30], 1579 'child1': [40, 10, 40, 0],
1580 'child2': [20, 10, 0, 30], 1580 'child2': [20, 10, 0, 0],
1581 'child3': [40, 10, 40, 20], 1581 'child3': [40, 10, 40, -10],
1582 'child4': [20, 10, 0, 20], 1582 'child4': [20, 10, 0, -10],
1583 }, 1583 },
1584 'space-around': { 1584 'space-around': {
1585 'flexbox': [80, 40], 1585 'flexbox': [80, 10],
1586 'child1': [40, 10, 35, 30], 1586 'child1': [40, 10, 35, 0],
1587 'child2': [20, 10, 5, 30], 1587 'child2': [20, 10, 5, 0],
1588 'child3': [40, 10, 35, 20], 1588 'child3': [40, 10, 35, -10],
1589 'child4': [20, 10, 5, 20], 1589 'child4': [20, 10, 5, -10],
1590 }, 1590 },
1591 }, 1591 },
1592 'wrap-reverse': { 1592 'wrap-reverse': {
1593 'flex-start': { 1593 'flex-start': {
1594 'flexbox': [80, 40], 1594 'flexbox': [80, 10],
1595 'child1': [40, 10, 40, 0], 1595 'child1': [40, 10, 40, 0],
1596 'child2': [20, 10, 20, 0], 1596 'child2': [20, 10, 20, 0],
1597 'child3': [40, 10, 40, 10], 1597 'child3': [40, 10, 40, 10],
1598 'child4': [20, 10, 20, 10], 1598 'child4': [20, 10, 20, 10],
1599 }, 1599 },
1600 'flex-end': { 1600 'flex-end': {
1601 'flexbox': [80, 40], 1601 'flexbox': [80, 10],
1602 'child1': [40, 10, 20, 0], 1602 'child1': [40, 10, 20, 0],
1603 'child2': [20, 10, 0, 0], 1603 'child2': [20, 10, 0, 0],
1604 'child3': [40, 10, 20, 10], 1604 'child3': [40, 10, 20, 10],
1605 'child4': [20, 10, 0, 10], 1605 'child4': [20, 10, 0, 10],
1606 }, 1606 },
1607 'center': { 1607 'center': {
1608 'flexbox': [80, 40], 1608 'flexbox': [80, 10],
1609 'child1': [40, 10, 30, 0], 1609 'child1': [40, 10, 30, 0],
1610 'child2': [20, 10, 10, 0], 1610 'child2': [20, 10, 10, 0],
1611 'child3': [40, 10, 30, 10], 1611 'child3': [40, 10, 30, 10],
1612 'child4': [20, 10, 10, 10], 1612 'child4': [20, 10, 10, 10],
1613 }, 1613 },
1614 'space-between': { 1614 'space-between': {
1615 'flexbox': [80, 40], 1615 'flexbox': [80, 10],
1616 'child1': [40, 10, 40, 0], 1616 'child1': [40, 10, 40, 0],
1617 'child2': [20, 10, 0, 0], 1617 'child2': [20, 10, 0, 0],
1618 'child3': [40, 10, 40, 10], 1618 'child3': [40, 10, 40, 10],
1619 'child4': [20, 10, 0, 10], 1619 'child4': [20, 10, 0, 10],
1620 }, 1620 },
1621 'space-around': { 1621 'space-around': {
1622 'flexbox': [80, 40], 1622 'flexbox': [80, 10],
1623 'child1': [40, 10, 35, 0], 1623 'child1': [40, 10, 35, 0],
1624 'child2': [20, 10, 5, 0], 1624 'child2': [20, 10, 5, 0],
1625 'child3': [40, 10, 35, 10], 1625 'child3': [40, 10, 35, 10],
1626 'child4': [20, 10, 5, 10], 1626 'child4': [20, 10, 5, 10],
1627 }, 1627 },
1628 }, 1628 },
1629 }, 1629 },
1630 }, 1630 },
1631 'row-reverse': { 1631 'row-reverse': {
1632 'ltr': { 1632 'ltr': {
(...skipping 146 matching lines...) Expand 10 before | Expand all | Expand 10 after
1779 'child3': [10, 40, 10, 5], 1779 'child3': [10, 40, 10, 5],
1780 'child4': [10, 20, 10, 55], 1780 'child4': [10, 20, 10, 55],
1781 }, 1781 },
1782 }, 1782 },
1783 }, 1783 },
1784 }, 1784 },
1785 'column-reverse': { 1785 'column-reverse': {
1786 'ltr': { 1786 'ltr': {
1787 'wrap': { 1787 'wrap': {
1788 'flex-start': { 1788 'flex-start': {
1789 'flexbox': [80, 40], 1789 'flexbox': [80, 10],
1790 'child1': [40, 10, 0, 0], 1790 'child1': [40, 10, 0, 0],
1791 'child2': [20, 10, 40, 0], 1791 'child2': [20, 10, 40, 0],
1792 'child3': [40, 10, 0, 10], 1792 'child3': [40, 10, 0, 10],
1793 'child4': [20, 10, 40, 10], 1793 'child4': [20, 10, 40, 10],
1794 }, 1794 },
1795 'flex-end': { 1795 'flex-end': {
1796 'flexbox': [80, 40], 1796 'flexbox': [80, 10],
1797 'child1': [40, 10, 20, 0], 1797 'child1': [40, 10, 20, 0],
1798 'child2': [20, 10, 60, 0], 1798 'child2': [20, 10, 60, 0],
1799 'child3': [40, 10, 20, 10], 1799 'child3': [40, 10, 20, 10],
1800 'child4': [20, 10, 60, 10], 1800 'child4': [20, 10, 60, 10],
1801 }, 1801 },
1802 'center': { 1802 'center': {
1803 'flexbox': [80, 40], 1803 'flexbox': [80, 10],
1804 'child1': [40, 10, 10, 0], 1804 'child1': [40, 10, 10, 0],
1805 'child2': [20, 10, 50, 0], 1805 'child2': [20, 10, 50, 0],
1806 'child3': [40, 10, 10, 10], 1806 'child3': [40, 10, 10, 10],
1807 'child4': [20, 10, 50, 10], 1807 'child4': [20, 10, 50, 10],
1808 }, 1808 },
1809 'space-between': { 1809 'space-between': {
1810 'flexbox': [80, 40], 1810 'flexbox': [80, 10],
1811 'child1': [40, 10, 0, 0], 1811 'child1': [40, 10, 0, 0],
1812 'child2': [20, 10, 60, 0], 1812 'child2': [20, 10, 60, 0],
1813 'child3': [40, 10, 0, 10], 1813 'child3': [40, 10, 0, 10],
1814 'child4': [20, 10, 60, 10], 1814 'child4': [20, 10, 60, 10],
1815 }, 1815 },
1816 'space-around': { 1816 'space-around': {
1817 'flexbox': [80, 40], 1817 'flexbox': [80, 10],
1818 'child1': [40, 10, 5, 0], 1818 'child1': [40, 10, 5, 0],
1819 'child2': [20, 10, 55, 0], 1819 'child2': [20, 10, 55, 0],
1820 'child3': [40, 10, 5, 10], 1820 'child3': [40, 10, 5, 10],
1821 'child4': [20, 10, 55, 10], 1821 'child4': [20, 10, 55, 10],
1822 }, 1822 },
1823 }, 1823 },
1824 'wrap-reverse': { 1824 'wrap-reverse': {
1825 'flex-start': { 1825 'flex-start': {
1826 'flexbox': [80, 40], 1826 'flexbox': [80, 10],
1827 'child1': [40, 10, 0, 30], 1827 'child1': [40, 10, 0, 0],
1828 'child2': [20, 10, 40, 30], 1828 'child2': [20, 10, 40, 0],
1829 'child3': [40, 10, 0, 20], 1829 'child3': [40, 10, 0, -10],
1830 'child4': [20, 10, 40, 20], 1830 'child4': [20, 10, 40, -10],
1831 }, 1831 },
1832 'flex-end': { 1832 'flex-end': {
1833 'flexbox': [80, 40], 1833 'flexbox': [80, 10],
1834 'child1': [40, 10, 20, 30], 1834 'child1': [40, 10, 20, 0],
1835 'child2': [20, 10, 60, 30], 1835 'child2': [20, 10, 60, 0],
1836 'child3': [40, 10, 20, 20], 1836 'child3': [40, 10, 20, -10],
1837 'child4': [20, 10, 60, 20], 1837 'child4': [20, 10, 60, -10],
1838 }, 1838 },
1839 'center': { 1839 'center': {
1840 'flexbox': [80, 40], 1840 'flexbox': [80, 10],
1841 'child1': [40, 10, 10, 30], 1841 'child1': [40, 10, 10, 0],
1842 'child2': [20, 10, 50, 30], 1842 'child2': [20, 10, 50, 0],
1843 'child3': [40, 10, 10, 20], 1843 'child3': [40, 10, 10, -10],
1844 'child4': [20, 10, 50, 20], 1844 'child4': [20, 10, 50, -10],
1845 }, 1845 },
1846 'space-between': { 1846 'space-between': {
1847 'flexbox': [80, 40], 1847 'flexbox': [80, 10],
1848 'child1': [40, 10, 0, 30], 1848 'child1': [40, 10, 0, 0],
1849 'child2': [20, 10, 60, 30], 1849 'child2': [20, 10, 60, 0],
1850 'child3': [40, 10, 0, 20], 1850 'child3': [40, 10, 0, -10],
1851 'child4': [20, 10, 60, 20], 1851 'child4': [20, 10, 60, -10],
1852 }, 1852 },
1853 'space-around': { 1853 'space-around': {
1854 'flexbox': [80, 40], 1854 'flexbox': [80, 10],
1855 'child1': [40, 10, 5, 30], 1855 'child1': [40, 10, 5, 0],
1856 'child2': [20, 10, 55, 30], 1856 'child2': [20, 10, 55, 0],
1857 'child3': [40, 10, 5, 20], 1857 'child3': [40, 10, 5, -10],
1858 'child4': [20, 10, 55, 20], 1858 'child4': [20, 10, 55, -10],
1859 }, 1859 },
1860 }, 1860 },
1861 }, 1861 },
1862 'rtl': { 1862 'rtl': {
1863 'wrap': { 1863 'wrap': {
1864 'flex-start': { 1864 'flex-start': {
1865 'flexbox': [80, 40], 1865 'flexbox': [80, 10],
1866 'child1': [40, 10, 0, 30], 1866 'child1': [40, 10, 0, 0],
1867 'child2': [20, 10, 40, 30], 1867 'child2': [20, 10, 40, 0],
1868 'child3': [40, 10, 0, 20], 1868 'child3': [40, 10, 0, -10],
1869 'child4': [20, 10, 40, 20], 1869 'child4': [20, 10, 40, -10],
1870 }, 1870 },
1871 'flex-end': { 1871 'flex-end': {
1872 'flexbox': [80, 40], 1872 'flexbox': [80, 10],
1873 'child1': [40, 10, 20, 30], 1873 'child1': [40, 10, 20, 0],
1874 'child2': [20, 10, 60, 30], 1874 'child2': [20, 10, 60, 0],
1875 'child3': [40, 10, 20, 20], 1875 'child3': [40, 10, 20, -10],
1876 'child4': [20, 10, 60, 20], 1876 'child4': [20, 10, 60, -10],
1877 }, 1877 },
1878 'center': { 1878 'center': {
1879 'flexbox': [80, 40], 1879 'flexbox': [80, 10],
1880 'child1': [40, 10, 10, 30], 1880 'child1': [40, 10, 10, 0],
1881 'child2': [20, 10, 50, 30], 1881 'child2': [20, 10, 50, 0],
1882 'child3': [40, 10, 10, 20], 1882 'child3': [40, 10, 10, -10],
1883 'child4': [20, 10, 50, 20], 1883 'child4': [20, 10, 50, -10],
1884 }, 1884 },
1885 'space-between': { 1885 'space-between': {
1886 'flexbox': [80, 40], 1886 'flexbox': [80, 10],
1887 'child1': [40, 10, 0, 30], 1887 'child1': [40, 10, 0, 0],
1888 'child2': [20, 10, 60, 30], 1888 'child2': [20, 10, 60, 0],
1889 'child3': [40, 10, 0, 20], 1889 'child3': [40, 10, 0, -10],
1890 'child4': [20, 10, 60, 20], 1890 'child4': [20, 10, 60, -10],
1891 }, 1891 },
1892 'space-around': { 1892 'space-around': {
1893 'flexbox': [80, 40], 1893 'flexbox': [80, 10],
1894 'child1': [40, 10, 5, 30], 1894 'child1': [40, 10, 5, 0],
1895 'child2': [20, 10, 55, 30], 1895 'child2': [20, 10, 55, 0],
1896 'child3': [40, 10, 5, 20], 1896 'child3': [40, 10, 5, -10],
1897 'child4': [20, 10, 55, 20], 1897 'child4': [20, 10, 55, -10],
1898 }, 1898 },
1899 }, 1899 },
1900 'wrap-reverse': { 1900 'wrap-reverse': {
1901 'flex-start': { 1901 'flex-start': {
1902 'flexbox': [80, 40], 1902 'flexbox': [80, 10],
1903 'child1': [40, 10, 0, 0], 1903 'child1': [40, 10, 0, 0],
1904 'child2': [20, 10, 40, 0], 1904 'child2': [20, 10, 40, 0],
1905 'child3': [40, 10, 0, 10], 1905 'child3': [40, 10, 0, 10],
1906 'child4': [20, 10, 40, 10], 1906 'child4': [20, 10, 40, 10],
1907 }, 1907 },
1908 'flex-end': { 1908 'flex-end': {
1909 'flexbox': [80, 40], 1909 'flexbox': [80, 10],
1910 'child1': [40, 10, 20, 0], 1910 'child1': [40, 10, 20, 0],
1911 'child2': [20, 10, 60, 0], 1911 'child2': [20, 10, 60, 0],
1912 'child3': [40, 10, 20, 10], 1912 'child3': [40, 10, 20, 10],
1913 'child4': [20, 10, 60, 10], 1913 'child4': [20, 10, 60, 10],
1914 }, 1914 },
1915 'center': { 1915 'center': {
1916 'flexbox': [80, 40], 1916 'flexbox': [80, 10],
1917 'child1': [40, 10, 10, 0], 1917 'child1': [40, 10, 10, 0],
1918 'child2': [20, 10, 50, 0], 1918 'child2': [20, 10, 50, 0],
1919 'child3': [40, 10, 10, 10], 1919 'child3': [40, 10, 10, 10],
1920 'child4': [20, 10, 50, 10], 1920 'child4': [20, 10, 50, 10],
1921 }, 1921 },
1922 'space-between': { 1922 'space-between': {
1923 'flexbox': [80, 40], 1923 'flexbox': [80, 10],
1924 'child1': [40, 10, 0, 0], 1924 'child1': [40, 10, 0, 0],
1925 'child2': [20, 10, 60, 0], 1925 'child2': [20, 10, 60, 0],
1926 'child3': [40, 10, 0, 10], 1926 'child3': [40, 10, 0, 10],
1927 'child4': [20, 10, 60, 10], 1927 'child4': [20, 10, 60, 10],
1928 }, 1928 },
1929 'space-around': { 1929 'space-around': {
1930 'flexbox': [80, 40], 1930 'flexbox': [80, 10],
1931 'child1': [40, 10, 5, 0], 1931 'child1': [40, 10, 5, 0],
1932 'child2': [20, 10, 55, 0], 1932 'child2': [20, 10, 55, 0],
1933 'child3': [40, 10, 5, 10], 1933 'child3': [40, 10, 5, 10],
1934 'child4': [20, 10, 55, 10], 1934 'child4': [20, 10, 55, 10],
1935 }, 1935 },
1936 }, 1936 },
1937 }, 1937 },
1938 }, 1938 },
1939 }, 1939 },
1940 'vertical-lr': { 1940 'vertical-lr': {
(...skipping 148 matching lines...) Expand 10 before | Expand all | Expand 10 after
2089 'child3': [10, 40, 0, 35], 2089 'child3': [10, 40, 0, 35],
2090 'child4': [10, 20, 0, 5], 2090 'child4': [10, 20, 0, 5],
2091 }, 2091 },
2092 }, 2092 },
2093 }, 2093 },
2094 }, 2094 },
2095 'column': { 2095 'column': {
2096 'ltr': { 2096 'ltr': {
2097 'wrap': { 2097 'wrap': {
2098 'flex-start': { 2098 'flex-start': {
2099 'flexbox': [80, 40], 2099 'flexbox': [80, 10],
2100 'child1': [40, 10, 0, 0], 2100 'child1': [40, 10, 0, 0],
2101 'child2': [20, 10, 40, 0], 2101 'child2': [20, 10, 40, 0],
2102 'child3': [40, 10, 0, 10], 2102 'child3': [40, 10, 0, 10],
2103 'child4': [20, 10, 40, 10], 2103 'child4': [20, 10, 40, 10],
2104 }, 2104 },
2105 'flex-end': { 2105 'flex-end': {
2106 'flexbox': [80, 40], 2106 'flexbox': [80, 10],
2107 'child1': [40, 10, 20, 0], 2107 'child1': [40, 10, 20, 0],
2108 'child2': [20, 10, 60, 0], 2108 'child2': [20, 10, 60, 0],
2109 'child3': [40, 10, 20, 10], 2109 'child3': [40, 10, 20, 10],
2110 'child4': [20, 10, 60, 10], 2110 'child4': [20, 10, 60, 10],
2111 }, 2111 },
2112 'center': { 2112 'center': {
2113 'flexbox': [80, 40], 2113 'flexbox': [80, 10],
2114 'child1': [40, 10, 10, 0], 2114 'child1': [40, 10, 10, 0],
2115 'child2': [20, 10, 50, 0], 2115 'child2': [20, 10, 50, 0],
2116 'child3': [40, 10, 10, 10], 2116 'child3': [40, 10, 10, 10],
2117 'child4': [20, 10, 50, 10], 2117 'child4': [20, 10, 50, 10],
2118 }, 2118 },
2119 'space-between': { 2119 'space-between': {
2120 'flexbox': [80, 40], 2120 'flexbox': [80, 10],
2121 'child1': [40, 10, 0, 0], 2121 'child1': [40, 10, 0, 0],
2122 'child2': [20, 10, 60, 0], 2122 'child2': [20, 10, 60, 0],
2123 'child3': [40, 10, 0, 10], 2123 'child3': [40, 10, 0, 10],
2124 'child4': [20, 10, 60, 10], 2124 'child4': [20, 10, 60, 10],
2125 }, 2125 },
2126 'space-around': { 2126 'space-around': {
2127 'flexbox': [80, 40], 2127 'flexbox': [80, 10],
2128 'child1': [40, 10, 5, 0], 2128 'child1': [40, 10, 5, 0],
2129 'child2': [20, 10, 55, 0], 2129 'child2': [20, 10, 55, 0],
2130 'child3': [40, 10, 5, 10], 2130 'child3': [40, 10, 5, 10],
2131 'child4': [20, 10, 55, 10], 2131 'child4': [20, 10, 55, 10],
2132 }, 2132 },
2133 }, 2133 },
2134 'wrap-reverse': { 2134 'wrap-reverse': {
2135 'flex-start': { 2135 'flex-start': {
2136 'flexbox': [80, 40], 2136 'flexbox': [80, 10],
2137 'child1': [40, 10, 0, 30], 2137 'child1': [40, 10, 0, 0],
2138 'child2': [20, 10, 40, 30], 2138 'child2': [20, 10, 40, 0],
2139 'child3': [40, 10, 0, 20], 2139 'child3': [40, 10, 0, -10],
2140 'child4': [20, 10, 40, 20], 2140 'child4': [20, 10, 40, -10],
2141 }, 2141 },
2142 'flex-end': { 2142 'flex-end': {
2143 'flexbox': [80, 40], 2143 'flexbox': [80, 10],
2144 'child1': [40, 10, 20, 30], 2144 'child1': [40, 10, 20, 0],
2145 'child2': [20, 10, 60, 30], 2145 'child2': [20, 10, 60, 0],
2146 'child3': [40, 10, 20, 20], 2146 'child3': [40, 10, 20, -10],
2147 'child4': [20, 10, 60, 20], 2147 'child4': [20, 10, 60, -10],
2148 }, 2148 },
2149 'center': { 2149 'center': {
2150 'flexbox': [80, 40], 2150 'flexbox': [80, 10],
2151 'child1': [40, 10, 10, 30], 2151 'child1': [40, 10, 10, 0],
2152 'child2': [20, 10, 50, 30], 2152 'child2': [20, 10, 50, 0],
2153 'child3': [40, 10, 10, 20], 2153 'child3': [40, 10, 10, -10],
2154 'child4': [20, 10, 50, 20], 2154 'child4': [20, 10, 50, -10],
2155 }, 2155 },
2156 'space-between': { 2156 'space-between': {
2157 'flexbox': [80, 40], 2157 'flexbox': [80, 10],
2158 'child1': [40, 10, 0, 30], 2158 'child1': [40, 10, 0, 0],
2159 'child2': [20, 10, 60, 30], 2159 'child2': [20, 10, 60, 0],
2160 'child3': [40, 10, 0, 20], 2160 'child3': [40, 10, 0, -10],
2161 'child4': [20, 10, 60, 20], 2161 'child4': [20, 10, 60, -10],
2162 }, 2162 },
2163 'space-around': { 2163 'space-around': {
2164 'flexbox': [80, 40], 2164 'flexbox': [80, 10],
2165 'child1': [40, 10, 5, 30], 2165 'child1': [40, 10, 5, 0],
2166 'child2': [20, 10, 55, 30], 2166 'child2': [20, 10, 55, 0],
2167 'child3': [40, 10, 5, 20], 2167 'child3': [40, 10, 5, -10],
2168 'child4': [20, 10, 55, 20], 2168 'child4': [20, 10, 55, -10],
2169 }, 2169 },
2170 }, 2170 },
2171 }, 2171 },
2172 'rtl': { 2172 'rtl': {
2173 'wrap': { 2173 'wrap': {
2174 'flex-start': { 2174 'flex-start': {
2175 'flexbox': [80, 40], 2175 'flexbox': [80, 10],
2176 'child1': [40, 10, 0, 30], 2176 'child1': [40, 10, 0, 0],
2177 'child2': [20, 10, 40, 30], 2177 'child2': [20, 10, 40, 0],
2178 'child3': [40, 10, 0, 20], 2178 'child3': [40, 10, 0, -10],
2179 'child4': [20, 10, 40, 20], 2179 'child4': [20, 10, 40, -10],
2180 }, 2180 },
2181 'flex-end': { 2181 'flex-end': {
2182 'flexbox': [80, 40], 2182 'flexbox': [80, 10],
2183 'child1': [40, 10, 20, 30], 2183 'child1': [40, 10, 20, 0],
2184 'child2': [20, 10, 60, 30], 2184 'child2': [20, 10, 60, 0],
2185 'child3': [40, 10, 20, 20], 2185 'child3': [40, 10, 20, -10],
2186 'child4': [20, 10, 60, 20], 2186 'child4': [20, 10, 60, -10],
2187 }, 2187 },
2188 'center': { 2188 'center': {
2189 'flexbox': [80, 40], 2189 'flexbox': [80, 10],
2190 'child1': [40, 10, 10, 30], 2190 'child1': [40, 10, 10, 0],
2191 'child2': [20, 10, 50, 30], 2191 'child2': [20, 10, 50, 0],
2192 'child3': [40, 10, 10, 20], 2192 'child3': [40, 10, 10, -10],
2193 'child4': [20, 10, 50, 20], 2193 'child4': [20, 10, 50, -10],
2194 }, 2194 },
2195 'space-between': { 2195 'space-between': {
2196 'flexbox': [80, 40], 2196 'flexbox': [80, 10],
2197 'child1': [40, 10, 0, 30], 2197 'child1': [40, 10, 0, 0],
2198 'child2': [20, 10, 60, 30], 2198 'child2': [20, 10, 60, 0],
2199 'child3': [40, 10, 0, 20], 2199 'child3': [40, 10, 0, -10],
2200 'child4': [20, 10, 60, 20], 2200 'child4': [20, 10, 60, -10],
2201 }, 2201 },
2202 'space-around': { 2202 'space-around': {
2203 'flexbox': [80, 40], 2203 'flexbox': [80, 10],
2204 'child1': [40, 10, 5, 30], 2204 'child1': [40, 10, 5, 0],
2205 'child2': [20, 10, 55, 30], 2205 'child2': [20, 10, 55, 0],
2206 'child3': [40, 10, 5, 20], 2206 'child3': [40, 10, 5, -10],
2207 'child4': [20, 10, 55, 20], 2207 'child4': [20, 10, 55, -10],
2208 }, 2208 },
2209 }, 2209 },
2210 'wrap-reverse': { 2210 'wrap-reverse': {
2211 'flex-start': { 2211 'flex-start': {
2212 'flexbox': [80, 40], 2212 'flexbox': [80, 10],
2213 'child1': [40, 10, 0, 0], 2213 'child1': [40, 10, 0, 0],
2214 'child2': [20, 10, 40, 0], 2214 'child2': [20, 10, 40, 0],
2215 'child3': [40, 10, 0, 10], 2215 'child3': [40, 10, 0, 10],
2216 'child4': [20, 10, 40, 10], 2216 'child4': [20, 10, 40, 10],
2217 }, 2217 },
2218 'flex-end': { 2218 'flex-end': {
2219 'flexbox': [80, 40], 2219 'flexbox': [80, 10],
2220 'child1': [40, 10, 20, 0], 2220 'child1': [40, 10, 20, 0],
2221 'child2': [20, 10, 60, 0], 2221 'child2': [20, 10, 60, 0],
2222 'child3': [40, 10, 20, 10], 2222 'child3': [40, 10, 20, 10],
2223 'child4': [20, 10, 60, 10], 2223 'child4': [20, 10, 60, 10],
2224 }, 2224 },
2225 'center': { 2225 'center': {
2226 'flexbox': [80, 40], 2226 'flexbox': [80, 10],
2227 'child1': [40, 10, 10, 0], 2227 'child1': [40, 10, 10, 0],
2228 'child2': [20, 10, 50, 0], 2228 'child2': [20, 10, 50, 0],
2229 'child3': [40, 10, 10, 10], 2229 'child3': [40, 10, 10, 10],
2230 'child4': [20, 10, 50, 10], 2230 'child4': [20, 10, 50, 10],
2231 }, 2231 },
2232 'space-between': { 2232 'space-between': {
2233 'flexbox': [80, 40], 2233 'flexbox': [80, 10],
2234 'child1': [40, 10, 0, 0], 2234 'child1': [40, 10, 0, 0],
2235 'child2': [20, 10, 60, 0], 2235 'child2': [20, 10, 60, 0],
2236 'child3': [40, 10, 0, 10], 2236 'child3': [40, 10, 0, 10],
2237 'child4': [20, 10, 60, 10], 2237 'child4': [20, 10, 60, 10],
2238 }, 2238 },
2239 'space-around': { 2239 'space-around': {
2240 'flexbox': [80, 40], 2240 'flexbox': [80, 10],
2241 'child1': [40, 10, 5, 0], 2241 'child1': [40, 10, 5, 0],
2242 'child2': [20, 10, 55, 0], 2242 'child2': [20, 10, 55, 0],
2243 'child3': [40, 10, 5, 10], 2243 'child3': [40, 10, 5, 10],
2244 'child4': [20, 10, 55, 10], 2244 'child4': [20, 10, 55, 10],
2245 }, 2245 },
2246 }, 2246 },
2247 }, 2247 },
2248 }, 2248 },
2249 'row-reverse': { 2249 'row-reverse': {
2250 'ltr': { 2250 'ltr': {
(...skipping 146 matching lines...) Expand 10 before | Expand all | Expand 10 after
2397 'child3': [10, 40, 0, 5], 2397 'child3': [10, 40, 0, 5],
2398 'child4': [10, 20, 0, 55], 2398 'child4': [10, 20, 0, 55],
2399 }, 2399 },
2400 }, 2400 },
2401 }, 2401 },
2402 }, 2402 },
2403 'column-reverse': { 2403 'column-reverse': {
2404 'ltr': { 2404 'ltr': {
2405 'wrap': { 2405 'wrap': {
2406 'flex-start': { 2406 'flex-start': {
2407 'flexbox': [80, 40], 2407 'flexbox': [80, 10],
2408 'child1': [40, 10, 40, 0], 2408 'child1': [40, 10, 40, 0],
2409 'child2': [20, 10, 20, 0], 2409 'child2': [20, 10, 20, 0],
2410 'child3': [40, 10, 40, 10], 2410 'child3': [40, 10, 40, 10],
2411 'child4': [20, 10, 20, 10], 2411 'child4': [20, 10, 20, 10],
2412 }, 2412 },
2413 'flex-end': { 2413 'flex-end': {
2414 'flexbox': [80, 40], 2414 'flexbox': [80, 10],
2415 'child1': [40, 10, 20, 0], 2415 'child1': [40, 10, 20, 0],
2416 'child2': [20, 10, 0, 0], 2416 'child2': [20, 10, 0, 0],
2417 'child3': [40, 10, 20, 10], 2417 'child3': [40, 10, 20, 10],
2418 'child4': [20, 10, 0, 10], 2418 'child4': [20, 10, 0, 10],
2419 }, 2419 },
2420 'center': { 2420 'center': {
2421 'flexbox': [80, 40], 2421 'flexbox': [80, 10],
2422 'child1': [40, 10, 30, 0], 2422 'child1': [40, 10, 30, 0],
2423 'child2': [20, 10, 10, 0], 2423 'child2': [20, 10, 10, 0],
2424 'child3': [40, 10, 30, 10], 2424 'child3': [40, 10, 30, 10],
2425 'child4': [20, 10, 10, 10], 2425 'child4': [20, 10, 10, 10],
2426 }, 2426 },
2427 'space-between': { 2427 'space-between': {
2428 'flexbox': [80, 40], 2428 'flexbox': [80, 10],
2429 'child1': [40, 10, 40, 0], 2429 'child1': [40, 10, 40, 0],
2430 'child2': [20, 10, 0, 0], 2430 'child2': [20, 10, 0, 0],
2431 'child3': [40, 10, 40, 10], 2431 'child3': [40, 10, 40, 10],
2432 'child4': [20, 10, 0, 10], 2432 'child4': [20, 10, 0, 10],
2433 }, 2433 },
2434 'space-around': { 2434 'space-around': {
2435 'flexbox': [80, 40], 2435 'flexbox': [80, 10],
2436 'child1': [40, 10, 35, 0], 2436 'child1': [40, 10, 35, 0],
2437 'child2': [20, 10, 5, 0], 2437 'child2': [20, 10, 5, 0],
2438 'child3': [40, 10, 35, 10], 2438 'child3': [40, 10, 35, 10],
2439 'child4': [20, 10, 5, 10], 2439 'child4': [20, 10, 5, 10],
2440 }, 2440 },
2441 }, 2441 },
2442 'wrap-reverse': { 2442 'wrap-reverse': {
2443 'flex-start': { 2443 'flex-start': {
2444 'flexbox': [80, 40], 2444 'flexbox': [80, 10],
2445 'child1': [40, 10, 40, 30], 2445 'child1': [40, 10, 40, 0],
2446 'child2': [20, 10, 20, 30], 2446 'child2': [20, 10, 20, 0],
2447 'child3': [40, 10, 40, 20], 2447 'child3': [40, 10, 40, -10],
2448 'child4': [20, 10, 20, 20], 2448 'child4': [20, 10, 20, -10],
2449 }, 2449 },
2450 'flex-end': { 2450 'flex-end': {
2451 'flexbox': [80, 40], 2451 'flexbox': [80, 10],
2452 'child1': [40, 10, 20, 30], 2452 'child1': [40, 10, 20, 0],
2453 'child2': [20, 10, 0, 30], 2453 'child2': [20, 10, 0, 0],
2454 'child3': [40, 10, 20, 20], 2454 'child3': [40, 10, 20, -10],
2455 'child4': [20, 10, 0, 20], 2455 'child4': [20, 10, 0, -10],
2456 }, 2456 },
2457 'center': { 2457 'center': {
2458 'flexbox': [80, 40], 2458 'flexbox': [80, 10],
2459 'child1': [40, 10, 30, 30], 2459 'child1': [40, 10, 30, 0],
2460 'child2': [20, 10, 10, 30], 2460 'child2': [20, 10, 10, 0],
2461 'child3': [40, 10, 30, 20], 2461 'child3': [40, 10, 30, -10],
2462 'child4': [20, 10, 10, 20], 2462 'child4': [20, 10, 10, -10],
2463 }, 2463 },
2464 'space-between': { 2464 'space-between': {
2465 'flexbox': [80, 40], 2465 'flexbox': [80, 10],
2466 'child1': [40, 10, 40, 30], 2466 'child1': [40, 10, 40, 0],
2467 'child2': [20, 10, 0, 30], 2467 'child2': [20, 10, 0, 0],
2468 'child3': [40, 10, 40, 20], 2468 'child3': [40, 10, 40, -10],
2469 'child4': [20, 10, 0, 20], 2469 'child4': [20, 10, 0, -10],
2470 }, 2470 },
2471 'space-around': { 2471 'space-around': {
2472 'flexbox': [80, 40], 2472 'flexbox': [80, 10],
2473 'child1': [40, 10, 35, 30], 2473 'child1': [40, 10, 35, 0],
2474 'child2': [20, 10, 5, 30], 2474 'child2': [20, 10, 5, 0],
2475 'child3': [40, 10, 35, 20], 2475 'child3': [40, 10, 35, -10],
2476 'child4': [20, 10, 5, 20], 2476 'child4': [20, 10, 5, -10],
2477 }, 2477 },
2478 }, 2478 },
2479 }, 2479 },
2480 'rtl': { 2480 'rtl': {
2481 'wrap': { 2481 'wrap': {
2482 'flex-start': { 2482 'flex-start': {
2483 'flexbox': [80, 40], 2483 'flexbox': [80, 10],
2484 'child1': [40, 10, 40, 30], 2484 'child1': [40, 10, 40, 0],
2485 'child2': [20, 10, 20, 30], 2485 'child2': [20, 10, 20, 0],
2486 'child3': [40, 10, 40, 20], 2486 'child3': [40, 10, 40, -10],
2487 'child4': [20, 10, 20, 20], 2487 'child4': [20, 10, 20, -10],
2488 }, 2488 },
2489 'flex-end': { 2489 'flex-end': {
2490 'flexbox': [80, 40], 2490 'flexbox': [80, 10],
2491 'child1': [40, 10, 20, 30], 2491 'child1': [40, 10, 20, 0],
2492 'child2': [20, 10, 0, 30], 2492 'child2': [20, 10, 0, 0],
2493 'child3': [40, 10, 20, 20], 2493 'child3': [40, 10, 20, -10],
2494 'child4': [20, 10, 0, 20], 2494 'child4': [20, 10, 0, -10],
2495 }, 2495 },
2496 'center': { 2496 'center': {
2497 'flexbox': [80, 40], 2497 'flexbox': [80, 10],
2498 'child1': [40, 10, 30, 30], 2498 'child1': [40, 10, 30, 0],
2499 'child2': [20, 10, 10, 30], 2499 'child2': [20, 10, 10, 0],
2500 'child3': [40, 10, 30, 20], 2500 'child3': [40, 10, 30, -10],
2501 'child4': [20, 10, 10, 20], 2501 'child4': [20, 10, 10, -10],
2502 }, 2502 },
2503 'space-between': { 2503 'space-between': {
2504 'flexbox': [80, 40], 2504 'flexbox': [80, 10],
2505 'child1': [40, 10, 40, 30], 2505 'child1': [40, 10, 40, 0],
2506 'child2': [20, 10, 0, 30], 2506 'child2': [20, 10, 0, 0],
2507 'child3': [40, 10, 40, 20], 2507 'child3': [40, 10, 40, -10],
2508 'child4': [20, 10, 0, 20], 2508 'child4': [20, 10, 0, -10],
2509 }, 2509 },
2510 'space-around': { 2510 'space-around': {
2511 'flexbox': [80, 40], 2511 'flexbox': [80, 10],
2512 'child1': [40, 10, 35, 30], 2512 'child1': [40, 10, 35, 0],
2513 'child2': [20, 10, 5, 30], 2513 'child2': [20, 10, 5, 0],
2514 'child3': [40, 10, 35, 20], 2514 'child3': [40, 10, 35, -10],
2515 'child4': [20, 10, 5, 20], 2515 'child4': [20, 10, 5, -10],
2516 }, 2516 },
2517 }, 2517 },
2518 'wrap-reverse': { 2518 'wrap-reverse': {
2519 'flex-start': { 2519 'flex-start': {
2520 'flexbox': [80, 40], 2520 'flexbox': [80, 10],
2521 'child1': [40, 10, 40, 0], 2521 'child1': [40, 10, 40, 0],
2522 'child2': [20, 10, 20, 0], 2522 'child2': [20, 10, 20, 0],
2523 'child3': [40, 10, 40, 10], 2523 'child3': [40, 10, 40, 10],
2524 'child4': [20, 10, 20, 10], 2524 'child4': [20, 10, 20, 10],
2525 }, 2525 },
2526 'flex-end': { 2526 'flex-end': {
2527 'flexbox': [80, 40], 2527 'flexbox': [80, 10],
2528 'child1': [40, 10, 20, 0], 2528 'child1': [40, 10, 20, 0],
2529 'child2': [20, 10, 0, 0], 2529 'child2': [20, 10, 0, 0],
2530 'child3': [40, 10, 20, 10], 2530 'child3': [40, 10, 20, 10],
2531 'child4': [20, 10, 0, 10], 2531 'child4': [20, 10, 0, 10],
2532 }, 2532 },
2533 'center': { 2533 'center': {
2534 'flexbox': [80, 40], 2534 'flexbox': [80, 10],
2535 'child1': [40, 10, 30, 0], 2535 'child1': [40, 10, 30, 0],
2536 'child2': [20, 10, 10, 0], 2536 'child2': [20, 10, 10, 0],
2537 'child3': [40, 10, 30, 10], 2537 'child3': [40, 10, 30, 10],
2538 'child4': [20, 10, 10, 10], 2538 'child4': [20, 10, 10, 10],
2539 }, 2539 },
2540 'space-between': { 2540 'space-between': {
2541 'flexbox': [80, 40], 2541 'flexbox': [80, 10],
2542 'child1': [40, 10, 40, 0], 2542 'child1': [40, 10, 40, 0],
2543 'child2': [20, 10, 0, 0], 2543 'child2': [20, 10, 0, 0],
2544 'child3': [40, 10, 40, 10], 2544 'child3': [40, 10, 40, 10],
2545 'child4': [20, 10, 0, 10], 2545 'child4': [20, 10, 0, 10],
2546 }, 2546 },
2547 'space-around': { 2547 'space-around': {
2548 'flexbox': [80, 40], 2548 'flexbox': [80, 10],
2549 'child1': [40, 10, 35, 0], 2549 'child1': [40, 10, 35, 0],
2550 'child2': [20, 10, 5, 0], 2550 'child2': [20, 10, 5, 0],
2551 'child3': [40, 10, 35, 10], 2551 'child3': [40, 10, 35, 10],
2552 'child4': [20, 10, 5, 10], 2552 'child4': [20, 10, 5, 10],
2553 }, 2553 },
2554 }, 2554 },
2555 }, 2555 },
2556 }, 2556 },
2557 }, 2557 },
2558 }; 2558 };
(...skipping 57 matching lines...) Expand 10 before | Expand all | Expand 10 after
2616 2616
2617 document.body.appendChild(flexbox); 2617 document.body.appendChild(flexbox);
2618 }) 2618 })
2619 }) 2619 })
2620 }) 2620 })
2621 }) 2621 })
2622 }) 2622 })
2623 </script> 2623 </script>
2624 </body> 2624 </body>
2625 </html> 2625 </html>
OLDNEW
« no previous file with comments | « LayoutTests/css3/flexbox/multiline-align-self.html ('k') | LayoutTests/css3/flexbox/multiline-shrink-to-fit.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698