CSS Flexbox: box-sizing

Summary

Harness status: OK

Found 10 tests

6 Pass

4 Fail

Details

Result

Test Name

Message

Pass

.flexbox 1

Asserts run

Pass	assert_true(true, "data-expected-height is a valid data attribute") at checkDataKeys ( /resources/check-layout-th.js:61:13)
Pass	assert_true(true, "data-expected-width is a valid data attribute") at checkDataKeys ( /resources/check-layout-th.js:61:13)
Pass	assert_true(true, "data-expected-height is a valid data attribute") at checkDataKeys ( /resources/check-layout-th.js:61:13)
Pass	assert_true(true, "data-expected-width is a valid data attribute") at checkDataKeys ( /resources/check-layout-th.js:61:13)
Pass	assert_true(true, "data-expected-height is a valid data attribute") at checkDataKeys ( /resources/check-layout-th.js:61:13)
Pass	assert_true(true, "data-expected-width is a valid data attribute") at checkDataKeys ( /resources/check-layout-th.js:61:13)

Pass

.flexbox 2

Asserts run

Pass	assert_true(true, "data-expected-height is a valid data attribute") at checkDataKeys ( /resources/check-layout-th.js:61:13)
Pass	assert_true(true, "data-expected-width is a valid data attribute") at checkDataKeys ( /resources/check-layout-th.js:61:13)
Pass	assert_true(true, "data-expected-height is a valid data attribute") at checkDataKeys ( /resources/check-layout-th.js:61:13)
Pass	assert_true(true, "data-expected-width is a valid data attribute") at checkDataKeys ( /resources/check-layout-th.js:61:13)
Pass	assert_true(true, "data-expected-height is a valid data attribute") at checkDataKeys ( /resources/check-layout-th.js:61:13)
Pass	assert_true(true, "data-expected-width is a valid data attribute") at checkDataKeys ( /resources/check-layout-th.js:61:13)

Pass

.flexbox 3

Asserts run

Pass	assert_true(true, "data-expected-height is a valid data attribute") at checkDataKeys ( /resources/check-layout-th.js:61:13)
Pass	assert_true(true, "data-expected-width is a valid data attribute") at checkDataKeys ( /resources/check-layout-th.js:61:13)
Pass	assert_true(true, "data-expected-height is a valid data attribute") at checkDataKeys ( /resources/check-layout-th.js:61:13)
Pass	assert_true(true, "data-expected-width is a valid data attribute") at checkDataKeys ( /resources/check-layout-th.js:61:13)
Pass	assert_true(true, "data-expected-height is a valid data attribute") at checkDataKeys ( /resources/check-layout-th.js:61:13)
Pass	assert_true(true, "data-expected-width is a valid data attribute") at checkDataKeys ( /resources/check-layout-th.js:61:13)

Fail

.flexbox 4

assert_equals: <div class="flexbox border-box" data-expected-height="100" data-expected-width="100"> <div data-expected-width="30" data-expected-height="100"></div> <div data-expected-width="30" data-expected-height="100"></div> <div data-expected-width="30" data-expected-height="100"></div> </div> width expected 30 but got 100

    at assert_tolerance (https://xn--n8j6ds53lwwkrqhv28a.wpt.live/resources/check-layout-th.js:24:9)
    at checkExpectedValues (https://xn--n8j6ds53lwwkrqhv28a.wpt.live/resources/check-layout-th.js:72:9)
    at checkSubtreeExpectedValues (https://xn--n8j6ds53lwwkrqhv28a.wpt.live/resources/check-layout-th.js:7:25)
    at https://xn--n8j6ds53lwwkrqhv28a.wpt.live/resources/check-layout-th.js:9:26
    at NodeList.forEach (<anonymous>)

Asserts run

Pass	assert_true(true, "data-expected-height is a valid data attribute") at checkDataKeys ( /resources/check-layout-th.js:61:13)
Pass	assert_true(true, "data-expected-width is a valid data attribute") at checkDataKeys ( /resources/check-layout-th.js:61:13)
Pass	assert_true(true, "data-expected-width is a valid data attribute") at checkDataKeys ( /resources/check-layout-th.js:61:13)
Pass	assert_true(true, "data-expected-height is a valid data attribute") at checkDataKeys ( /resources/check-layout-th.js:61:13)
Fail	assert_equals(100, 30, "\n<div class=\"flexbox border-box\" data-expected-height=\"100\" data-expected-width=\"100\">\n <div data-expected-width=\"30\" data-expected-height=\"100\"></div>\n <div data-expected-width=\"30\" data-expected-height=\"100\"></div>\n <div data-expected-width=\"30\" data-expected-height=\"100\"></div>\n</div>\nwidth") at assert_tolerance ( /resources/check-layout-th.js:24:9)

Pass

.flexbox 5

Asserts run

Pass	assert_true(true, "data-expected-height is a valid data attribute") at checkDataKeys ( /resources/check-layout-th.js:61:13)
Pass	assert_true(true, "data-expected-width is a valid data attribute") at checkDataKeys ( /resources/check-layout-th.js:61:13)
Pass	assert_true(true, "data-expected-height is a valid data attribute") at checkDataKeys ( /resources/check-layout-th.js:61:13)
Pass	assert_true(true, "data-expected-width is a valid data attribute") at checkDataKeys ( /resources/check-layout-th.js:61:13)
Pass	assert_true(true, "data-expected-height is a valid data attribute") at checkDataKeys ( /resources/check-layout-th.js:61:13)
Pass	assert_true(true, "data-expected-width is a valid data attribute") at checkDataKeys ( /resources/check-layout-th.js:61:13)

Pass

.flexbox 6

Asserts run

Pass	assert_true(true, "data-expected-height is a valid data attribute") at checkDataKeys ( /resources/check-layout-th.js:61:13)
Pass	assert_true(true, "data-expected-width is a valid data attribute") at checkDataKeys ( /resources/check-layout-th.js:61:13)
Pass	assert_true(true, "data-expected-height is a valid data attribute") at checkDataKeys ( /resources/check-layout-th.js:61:13)
Pass	assert_true(true, "data-expected-width is a valid data attribute") at checkDataKeys ( /resources/check-layout-th.js:61:13)
Pass	assert_true(true, "data-expected-height is a valid data attribute") at checkDataKeys ( /resources/check-layout-th.js:61:13)
Pass	assert_true(true, "data-expected-width is a valid data attribute") at checkDataKeys ( /resources/check-layout-th.js:61:13)

Pass

.flexbox 7

Asserts run

Pass	assert_true(true, "data-expected-height is a valid data attribute") at checkDataKeys ( /resources/check-layout-th.js:61:13)
Pass	assert_true(true, "data-expected-width is a valid data attribute") at checkDataKeys ( /resources/check-layout-th.js:61:13)
Pass	assert_true(true, "data-expected-height is a valid data attribute") at checkDataKeys ( /resources/check-layout-th.js:61:13)
Pass	assert_true(true, "data-expected-width is a valid data attribute") at checkDataKeys ( /resources/check-layout-th.js:61:13)
Pass	assert_true(true, "data-expected-height is a valid data attribute") at checkDataKeys ( /resources/check-layout-th.js:61:13)
Pass	assert_true(true, "data-expected-width is a valid data attribute") at checkDataKeys ( /resources/check-layout-th.js:61:13)

Fail

.flexbox 8

assert_equals: <div class="flexbox column wrap" style="box-sizing: border-box; border: 2px solid lightblue; padding: 3px; height: 200px; width: 100px; position: relative" data-expected-width="100" data-expected-height="200"> <div data-offset-x="3" data-expected-height="100" data-expected-width="100"></div><div data-offset-x="103" data-expected-height="100" data-expected-width="100"></div><div data-offset-x="203" data-expected-height="100" data-expected-width="100"></div> </div> offsetLeft expected 103 but got 3

    at assert_tolerance (https://xn--n8j6ds53lwwkrqhv28a.wpt.live/resources/check-layout-th.js:24:9)
    at checkExpectedValues (https://xn--n8j6ds53lwwkrqhv28a.wpt.live/resources/check-layout-th.js:82:9)
    at checkSubtreeExpectedValues (https://xn--n8j6ds53lwwkrqhv28a.wpt.live/resources/check-layout-th.js:7:25)
    at https://xn--n8j6ds53lwwkrqhv28a.wpt.live/resources/check-layout-th.js:9:26
    at NodeList.forEach (<anonymous>)

Asserts run

Pass	assert_true(true, "data-expected-width is a valid data attribute") at checkDataKeys ( /resources/check-layout-th.js:61:13)
Pass	assert_true(true, "data-expected-height is a valid data attribute") at checkDataKeys ( /resources/check-layout-th.js:61:13)
Pass	assert_true(true, "data-offset-x is a valid data attribute") at checkDataKeys ( /resources/check-layout-th.js:61:13)
Pass	assert_true(true, "data-expected-height is a valid data attribute") at checkDataKeys ( /resources/check-layout-th.js:61:13)
Pass	assert_true(true, "data-expected-width is a valid data attribute") at checkDataKeys ( /resources/check-layout-th.js:61:13)
Pass	assert_true(true, "data-offset-x is a valid data attribute") at checkDataKeys ( /resources/check-layout-th.js:61:13)
Pass	assert_true(true, "data-expected-height is a valid data attribute") at checkDataKeys ( /resources/check-layout-th.js:61:13)
Pass	assert_true(true, "data-expected-width is a valid data attribute") at checkDataKeys ( /resources/check-layout-th.js:61:13)
Fail	assert_equals(3, 103, "\n<div class=\"flexbox column wrap\" style=\"box-sizing: border-box; border: 2px solid lightblue; padding: 3px; height: 200px; width: 100px; position: relative\" data-expected-width=\"100\" data-expected-height=\"200\">\n <div data-offset-x=\"3\" data-expected-height=\"100\" data-expected-width=\"100\"></div><div data-offset-x=\"103\" data-expected-height=\"100\" data-expected-width=\"100\"></div><div data-offset-x=\"203\" data-expected-height=\"100\" data-expected-width=\"100\"></div>\n</div>\noffsetLeft") at assert_tolerance ( /resources/check-layout-th.js:24:9)

Fail

.flexbox 9

assert_equals: <div class="flexbox column wrap" style="border: 2px solid lightblue; padding: 3px; height: 200px; width: 100px; position: relative" data-expected-width="110" data-expected-height="210"> <div data-offset-x="3" data-expected-height="100" data-expected-width="100"></div><div data-offset-x="3" data-expected-height="100" data-expected-width="100"></div><div data-offset-x="103" data-expected-height="100" data-expected-width="100"></div> </div> offsetLeft expected 103 but got 3

    at assert_tolerance (https://xn--n8j6ds53lwwkrqhv28a.wpt.live/resources/check-layout-th.js:24:9)
    at checkExpectedValues (https://xn--n8j6ds53lwwkrqhv28a.wpt.live/resources/check-layout-th.js:82:9)
    at checkSubtreeExpectedValues (https://xn--n8j6ds53lwwkrqhv28a.wpt.live/resources/check-layout-th.js:7:25)
    at https://xn--n8j6ds53lwwkrqhv28a.wpt.live/resources/check-layout-th.js:9:26
    at NodeList.forEach (<anonymous>)

Asserts run

Pass	assert_true(true, "data-expected-width is a valid data attribute") at checkDataKeys ( /resources/check-layout-th.js:61:13)
Pass	assert_true(true, "data-expected-height is a valid data attribute") at checkDataKeys ( /resources/check-layout-th.js:61:13)
Pass	assert_true(true, "data-offset-x is a valid data attribute") at checkDataKeys ( /resources/check-layout-th.js:61:13)
Pass	assert_true(true, "data-expected-height is a valid data attribute") at checkDataKeys ( /resources/check-layout-th.js:61:13)
Pass	assert_true(true, "data-expected-width is a valid data attribute") at checkDataKeys ( /resources/check-layout-th.js:61:13)
Pass	assert_true(true, "data-offset-x is a valid data attribute") at checkDataKeys ( /resources/check-layout-th.js:61:13)
Pass	assert_true(true, "data-expected-height is a valid data attribute") at checkDataKeys ( /resources/check-layout-th.js:61:13)
Pass	assert_true(true, "data-expected-width is a valid data attribute") at checkDataKeys ( /resources/check-layout-th.js:61:13)
Pass	assert_true(true, "data-offset-x is a valid data attribute") at checkDataKeys ( /resources/check-layout-th.js:61:13)
Pass	assert_true(true, "data-expected-height is a valid data attribute") at checkDataKeys ( /resources/check-layout-th.js:61:13)
Pass	assert_true(true, "data-expected-width is a valid data attribute") at checkDataKeys ( /resources/check-layout-th.js:61:13)
Fail	assert_equals(3, 103, "\n<div class=\"flexbox column wrap\" style=\"border: 2px solid lightblue; padding: 3px; height: 200px; width: 100px; position: relative\" data-expected-width=\"110\" data-expected-height=\"210\">\n <div data-offset-x=\"3\" data-expected-height=\"100\" data-expected-width=\"100\"></div><div data-offset-x=\"3\" data-expected-height=\"100\" data-expected-width=\"100\"></div><div data-offset-x=\"103\" data-expected-height=\"100\" data-expected-width=\"100\"></div>\n</div>\noffsetLeft") at assert_tolerance ( /resources/check-layout-th.js:24:9)

Fail

.flexbox 10

assert_equals: <div class="flexbox column" style="box-sizing: border-box; border: 2px solid lightblue; padding: 3px; height: 343px; width: 100px;" data-expected-width="100" data-expected-height="343"> <div style="flex: 1;" data-expected-height="111" data-expected-width="100"></div> <div style="flex: 1;" data-expected-height="111" data-expected-width="100"></div> <div style="flex: 1;" data-expected-height="111" data-expected-width="100"></div> </div> height expected 111 but got 100

    at assert_tolerance (https://xn--n8j6ds53lwwkrqhv28a.wpt.live/resources/check-layout-th.js:24:9)
    at checkExpectedValues (https://xn--n8j6ds53lwwkrqhv28a.wpt.live/resources/check-layout-th.js:77:9)
    at checkSubtreeExpectedValues (https://xn--n8j6ds53lwwkrqhv28a.wpt.live/resources/check-layout-th.js:7:25)
    at https://xn--n8j6ds53lwwkrqhv28a.wpt.live/resources/check-layout-th.js:9:26
    at NodeList.forEach (<anonymous>)

Asserts run

Pass	assert_true(true, "data-expected-width is a valid data attribute") at checkDataKeys ( /resources/check-layout-th.js:61:13)
Pass	assert_true(true, "data-expected-height is a valid data attribute") at checkDataKeys ( /resources/check-layout-th.js:61:13)
Pass	assert_true(true, "data-expected-height is a valid data attribute") at checkDataKeys ( /resources/check-layout-th.js:61:13)
Pass	assert_true(true, "data-expected-width is a valid data attribute") at checkDataKeys ( /resources/check-layout-th.js:61:13)
Fail	assert_equals(100, 111, "\n<div class=\"flexbox column\" style=\"box-sizing: border-box; border: 2px solid lightblue; padding: 3px; height: 343px; width: 100px;\" data-expected-width=\"100\" data-expected-height=\"343\">\n <div style=\"flex: 1;\" data-expected-height=\"111\" data-expected-width=\"100\"></div>\n <div style=\"flex: 1;\" data-expected-height=\"111\" data-expected-width=\"100\"></div>\n <div style=\"flex: 1;\" data-expected-height=\"111\" data-expected-width=\"100\"></div>\n</div>\nheight") at assert_tolerance ( /resources/check-layout-th.js:24:9)

Summary

Details

flex-flow: default, orange box has width: 300px

flex-flow: default, orange box has width: 400px

flex-flow: default, orange box has width: auto

flex-flow: default, orange box has width: auto, flex-box has box-sizing: border-box

flex-flow: column, red box has height: 300px

flex-flow: column, red box has height: 400px

flex-flow: column, red box has height: auto

flex-box has box-sizing: border-box and flex-wrap: wrap;

flex-box has box-sizing: default and flex-wrap: wrap;

flex-flow: column, flex-box has box-sizing: border-box, flex items have flex: 1