CSS Flexbox: percentages in flex items

Summary

Harness status: OK

Found 10 tests

10 Fail

Details

Result

Test Name

Message

Fail

.flexbox 1

assert_equals: <div class="flexbox horizontal"> <div data-expected-height="50" class="flex-one"> <div data-expected-height="35" style="height: 70%; background-color: lime"></div> </div> </div> height expected 50 but got 0

    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-height is a valid data attribute")
    at checkDataKeys ( /resources/check-layout-th.js:61:13)

Fail

assert_equals(0, 50, "\n<div class=\"flexbox horizontal\">\n  <div data-expected-height=\"50\" class=\"flex-one\">\n    <div data-expected-height=\"35\" style=\"height: 70%; background-color: lime\"></div>\n  </div>\n</div>\nheight")
    at assert_tolerance ( /resources/check-layout-th.js:24:9)

Fail

.flexbox 2

assert_equals: <div class="flexbox horizontal"> <div data-expected-height="50" class="flex-one"> <div id="dynamicHorizontalChild" data-expected-height="45" style="height: 90%; background-color: lime;"></div> </div> </div> height expected 50 but got 0

    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-height is a valid data attribute")
    at checkDataKeys ( /resources/check-layout-th.js:61:13)

Fail

assert_equals(0, 50, "\n<div class=\"flexbox horizontal\">\n  <div data-expected-height=\"50\" class=\"flex-one\">\n    <div id=\"dynamicHorizontalChild\" data-expected-height=\"45\" style=\"height: 90%; background-color: lime;\"></div>\n  </div>\n</div>\nheight")
    at assert_tolerance ( /resources/check-layout-th.js:24:9)

Fail

.flexbox 3

assert_equals: <div class="flexbox horizontal"> <div data-expected-height="50" class="flex-one" style="padding: 10px; border: 2px solid black"> <div data-expected-height="18" style="height: 70%; background-color: lime"></div> </div> </div> height expected 50 but got 24

    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-height is a valid data attribute")
    at checkDataKeys ( /resources/check-layout-th.js:61:13)

Fail

assert_equals(24, 50, "\n<div class=\"flexbox horizontal\">\n  <div data-expected-height=\"50\" class=\"flex-one\" style=\"padding: 10px; border: 2px solid black\">\n    <div data-expected-height=\"18\" style=\"height: 70%; background-color: lime\"></div>\n  </div>\n</div>\nheight")
    at assert_tolerance ( /resources/check-layout-th.js:24:9)

Fail

.flexbox 4

assert_equals: <div class="flexbox horizontal"> <img data-expected-height="25" style="max-height: 50%" src="support/10x10-green.png"> </div> height expected 25 but got 16

    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-height is a valid data attribute")
    at checkDataKeys ( /resources/check-layout-th.js:61:13)

Fail

assert_equals(16, 25, "\n<div class=\"flexbox horizontal\">\n  <img data-expected-height=\"25\" style=\"max-height: 50%\" src=\"support/10x10-green.png\">\n</div>\nheight")
    at assert_tolerance ( /resources/check-layout-th.js:24:9)

Fail

.flexbox 5

assert_equals: <div class="flexbox horizontal"> <div data-expected-height="25" class="flex-one" style="max-height:50%"> <div data-expected-height="13" style="height: 50%; background-color: lime"></div> </div> </div> height expected 25 but got 0

    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-height is a valid data attribute")
    at checkDataKeys ( /resources/check-layout-th.js:61:13)

Fail

assert_equals(0, 25, "\n<div class=\"flexbox horizontal\">\n  <div data-expected-height=\"25\" class=\"flex-one\" style=\"max-height:50%\">\n    <div data-expected-height=\"13\" style=\"height: 50%; background-color: lime\"></div>\n  </div>\n</div>\nheight")
    at assert_tolerance ( /resources/check-layout-th.js:24:9)

Fail

.flexbox 6

assert_equals: <div class="flexbox vertical"> <div data-expected-width="50" class="flex-one"> <div data-expected-width="25" style="width: 50%; background-color: lime"></div> </div> </div> width expected 50 but got 0

    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-width is a valid data attribute")
    at checkDataKeys ( /resources/check-layout-th.js:61:13)

Fail

assert_equals(0, 50, "\n<div class=\"flexbox vertical\">\n  <div data-expected-width=\"50\" class=\"flex-one\">\n    <div data-expected-width=\"25\" style=\"width: 50%; background-color: lime\"></div>\n  </div>\n</div>\nwidth")
    at assert_tolerance ( /resources/check-layout-th.js:24:9)

Fail

.flexbox 7

assert_equals: <div class="flexbox vertical"> <div data-expected-width="50" class="flex-one"> <div id="dynamicVerticalChild" data-expected-width="15" style="width: 30%; background-color: lime;"></div> </div> </div> width expected 50 but got 0

    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-width is a valid data attribute")
    at checkDataKeys ( /resources/check-layout-th.js:61:13)

Fail

assert_equals(0, 50, "\n<div class=\"flexbox vertical\">\n  <div data-expected-width=\"50\" class=\"flex-one\">\n    <div id=\"dynamicVerticalChild\" data-expected-width=\"15\" style=\"width: 30%; background-color: lime;\"></div>\n  </div>\n</div>\nwidth")
    at assert_tolerance ( /resources/check-layout-th.js:24:9)

Fail

.flexbox 8

assert_equals: <div class="flexbox vertical"> <div data-expected-width="50" class="flex-one" style="padding: 10px; border: 2px solid black"> <div data-expected-width="13" style="width: 50%; background-color: lime"></div> </div> </div> width expected 50 but got 24

    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-width is a valid data attribute")
    at checkDataKeys ( /resources/check-layout-th.js:61:13)

Fail

assert_equals(24, 50, "\n<div class=\"flexbox vertical\">\n  <div data-expected-width=\"50\" class=\"flex-one\" style=\"padding: 10px; border: 2px solid black\">\n    <div data-expected-width=\"13\" style=\"width: 50%; background-color: lime\"></div>\n  </div>\n</div>\nwidth")
    at assert_tolerance ( /resources/check-layout-th.js:24:9)

Fail

.flexbox 9

assert_equals: <div class="flexbox vertical"> <img data-expected-width="25" style="max-width: 50%" src="support/10x10-green.png"> </div> width expected 25 but got 16

    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-width is a valid data attribute")
    at checkDataKeys ( /resources/check-layout-th.js:61:13)

Fail

assert_equals(16, 25, "\n<div class=\"flexbox vertical\">\n  <img data-expected-width=\"25\" style=\"max-width: 50%\" src=\"support/10x10-green.png\">\n</div>\nwidth")
    at assert_tolerance ( /resources/check-layout-th.js:24:9)

Fail

.flexbox 10

assert_equals: <div class="flexbox vertical"> <div data-expected-width="25" class="flex-one" style="max-width: 50%"> <div data-expected-width="13" style="width: 50%; background-color: lime"></div> </div> </div> width expected 25 but got 0

    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-width is a valid data attribute")
    at checkDataKeys ( /resources/check-layout-th.js:61:13)

Fail

assert_equals(0, 25, "\n<div class=\"flexbox vertical\">\n  <div data-expected-width=\"25\" class=\"flex-one\" style=\"max-width: 50%\">\n    <div data-expected-width=\"13\" style=\"width: 50%; background-color: lime\"></div>\n  </div>\n</div>\nwidth")
    at assert_tolerance ( /resources/check-layout-th.js:24:9)