This test checks that Content Distribution alignment is applied correctly when items span more than one track.

direction: LTR | distribution: 'space-between'

direction: LTR | distribution: 'space-around'

direction: LTR | distribution: 'space-evenly'

direction: LTR | distribution: 'stretch'

direction: RTL | distribution: 'space-between'

direction: RTL | distribution: 'space-around'

direction: RTL | distribution: 'space-evenly'

direction: RTL | distribution: 'stretch'

Summary

Harness status: OK

Found 8 tests

Details

ResultTest NameMessage
Fail.grid 1assert_equals: <div class="grid contentSpaceBetween verticalRL" data-expected-width="200" data-expected-height="300"> <div class="a" data-offset-x="160" data-offset-y="0" data-expected-width="40" data-expected-height="160"></div> <div class="b" data-offset-x="0" data-offset-y="280" data-expected-width="200" data-expected-height="20"></div> <div class="c" data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div> <div class="d" data-offset-x="0" data-offset-y="140" data-expected-width="40" data-expected-height="20"></div> </div> width expected 40 but got 200
    at assert_tolerance (http://wpt.live/resources/check-layout-th.js:24:9)
    at checkExpectedValues (http://wpt.live/resources/check-layout-th.js:72:9)
    at checkSubtreeExpectedValues (http://wpt.live/resources/check-layout-th.js:7:25)
    at http://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-offset-y 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(200, 40, "\n<div class=\"grid contentSpaceBetween verticalRL\" data-expected-width=\"200\" data-expected-height=\"300\">\n    <div class=\"a\" data-offset-x=\"160\" data-offset-y=\"0\" data-expected-width=\"40\" data-expected-height=\"160\"></div>\n    <div class=\"b\" data-offset-x=\"0\" data-offset-y=\"280\" data-expected-width=\"200\" data-expected-height=\"20\"></div>\n    <div class=\"c\" data-offset-x=\"0\" data-offset-y=\"0\" data-expected-width=\"40\" data-expected-height=\"20\"></div>\n    <div class=\"d\" data-offset-x=\"0\" data-offset-y=\"140\" data-expected-width=\"40\" data-expected-height=\"20\"></div>\n  </div>\nwidth")
    at assert_tolerance ( /resources/check-layout-th.js:24:9)
Fail.grid 2assert_equals: <div class="grid contentSpaceAround verticalRL" data-expected-width="200" data-expected-height="300"> <div class="a" data-offset-x="130" data-offset-y="40" data-expected-width="40" data-expected-height="120"></div> <div class="b" data-offset-x="30" data-offset-y="240" data-expected-width="140" data-expected-height="20"></div> <div class="c" data-offset-x="30" data-offset-y="40" data-expected-width="40" data-expected-height="20"></div> <div class="d" data-offset-x="30" data-offset-y="140" data-expected-width="40" data-expected-height="20"></div> </div> width expected 40 but got 200
    at assert_tolerance (http://wpt.live/resources/check-layout-th.js:24:9)
    at checkExpectedValues (http://wpt.live/resources/check-layout-th.js:72:9)
    at checkSubtreeExpectedValues (http://wpt.live/resources/check-layout-th.js:7:25)
    at http://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-offset-y 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(200, 40, "\n<div class=\"grid contentSpaceAround verticalRL\" data-expected-width=\"200\" data-expected-height=\"300\">\n    <div class=\"a\" data-offset-x=\"130\" data-offset-y=\"40\" data-expected-width=\"40\" data-expected-height=\"120\"></div>\n    <div class=\"b\" data-offset-x=\"30\" data-offset-y=\"240\" data-expected-width=\"140\" data-expected-height=\"20\"></div>\n    <div class=\"c\" data-offset-x=\"30\" data-offset-y=\"40\" data-expected-width=\"40\" data-expected-height=\"20\"></div>\n    <div class=\"d\" data-offset-x=\"30\" data-offset-y=\"140\" data-expected-width=\"40\" data-expected-height=\"20\"></div>\n  </div>\nwidth")
    at assert_tolerance ( /resources/check-layout-th.js:24:9)
Fail.grid 3assert_equals: <div class="grid contentSpaceEvenly verticalRL" data-expected-width="200" data-expected-height="300"> <div class="a" data-offset-x="120" data-offset-y="60" data-expected-width="40" data-expected-height="100"></div> <div class="b" data-offset-x="40" data-offset-y="220" data-expected-width="120" data-expected-height="20"></div> <div class="c" data-offset-x="40" data-offset-y="60" data-expected-width="40" data-expected-height="20"></div> <div class="d" data-offset-x="40" data-offset-y="140" data-expected-width="40" data-expected-height="20"></div> </div> width expected 40 but got 200
    at assert_tolerance (http://wpt.live/resources/check-layout-th.js:24:9)
    at checkExpectedValues (http://wpt.live/resources/check-layout-th.js:72:9)
    at checkSubtreeExpectedValues (http://wpt.live/resources/check-layout-th.js:7:25)
    at http://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-offset-y 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(200, 40, "\n<div class=\"grid contentSpaceEvenly verticalRL\" data-expected-width=\"200\" data-expected-height=\"300\">\n    <div class=\"a\" data-offset-x=\"120\" data-offset-y=\"60\" data-expected-width=\"40\" data-expected-height=\"100\"></div>\n    <div class=\"b\" data-offset-x=\"40\" data-offset-y=\"220\" data-expected-width=\"120\" data-expected-height=\"20\"></div>\n    <div class=\"c\" data-offset-x=\"40\" data-offset-y=\"60\" data-expected-width=\"40\" data-expected-height=\"20\"></div>\n    <div class=\"d\" data-offset-x=\"40\" data-offset-y=\"140\" data-expected-width=\"40\" data-expected-height=\"20\"></div>\n  </div>\nwidth")
    at assert_tolerance ( /resources/check-layout-th.js:24:9)
Fail.grid 4assert_equals: <div class="grid stretchedGrid contentStretch verticalRL" data-expected-width="200" data-expected-height="300"> <div class="a" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div> <div class="b" data-offset-x="0" data-offset-y="200" data-expected-width="200" data-expected-height="100"></div> <div class="c" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="100"></div> <div class="d" data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div> </div> width expected 100 but got 200
    at assert_tolerance (http://wpt.live/resources/check-layout-th.js:24:9)
    at checkExpectedValues (http://wpt.live/resources/check-layout-th.js:72:9)
    at checkSubtreeExpectedValues (http://wpt.live/resources/check-layout-th.js:7:25)
    at http://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-offset-y 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(200, 100, "\n<div class=\"grid stretchedGrid contentStretch verticalRL\" data-expected-width=\"200\" data-expected-height=\"300\">\n    <div class=\"a\" data-offset-x=\"100\" data-offset-y=\"0\" data-expected-width=\"100\" data-expected-height=\"200\"></div>\n    <div class=\"b\" data-offset-x=\"0\" data-offset-y=\"200\" data-expected-width=\"200\" data-expected-height=\"100\"></div>\n    <div class=\"c\" data-offset-x=\"0\" data-offset-y=\"0\" data-expected-width=\"100\" data-expected-height=\"100\"></div>\n    <div class=\"d\" data-offset-x=\"0\" data-offset-y=\"100\" data-expected-width=\"100\" data-expected-height=\"100\"></div>\n  </div>\nwidth")
    at assert_tolerance ( /resources/check-layout-th.js:24:9)
Fail.grid 5assert_equals: <div class="grid contentSpaceBetween verticalRL directionRTL" data-expected-width="200" data-expected-height="300"> <div class="a" data-offset-x="160" data-offset-y="140" data-expected-width="40" data-expected-height="160"></div> <div class="b" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="20"></div> <div class="c" data-offset-x="0" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div> <div class="d" data-offset-x="0" data-offset-y="140" data-expected-width="40" data-expected-height="20"></div> </div> width expected 40 but got 200
    at assert_tolerance (http://wpt.live/resources/check-layout-th.js:24:9)
    at checkExpectedValues (http://wpt.live/resources/check-layout-th.js:72:9)
    at checkSubtreeExpectedValues (http://wpt.live/resources/check-layout-th.js:7:25)
    at http://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-offset-y 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(200, 40, "\n<div class=\"grid contentSpaceBetween verticalRL directionRTL\" data-expected-width=\"200\" data-expected-height=\"300\">\n    <div class=\"a\" data-offset-x=\"160\" data-offset-y=\"140\" data-expected-width=\"40\" data-expected-height=\"160\"></div>\n    <div class=\"b\" data-offset-x=\"0\" data-offset-y=\"0\" data-expected-width=\"200\" data-expected-height=\"20\"></div>\n    <div class=\"c\" data-offset-x=\"0\" data-offset-y=\"280\" data-expected-width=\"40\" data-expected-height=\"20\"></div>\n    <div class=\"d\" data-offset-x=\"0\" data-offset-y=\"140\" data-expected-width=\"40\" data-expected-height=\"20\"></div>\n  </div>\nwidth")
    at assert_tolerance ( /resources/check-layout-th.js:24:9)
Fail.grid 6assert_equals: <div class="grid contentSpaceAround verticalRL directionRTL" data-expected-width="200" data-expected-height="300"> <div class="a" data-offset-x="130" data-offset-y="140" data-expected-width="40" data-expected-height="120"></div> <div class="b" data-offset-x="30" data-offset-y="40" data-expected-width="140" data-expected-height="20"></div> <div class="c" data-offset-x="30" data-offset-y="240" data-expected-width="40" data-expected-height="20"></div> <div class="d" data-offset-x="30" data-offset-y="140" data-expected-width="40" data-expected-height="20"></div> </div> width expected 40 but got 200
    at assert_tolerance (http://wpt.live/resources/check-layout-th.js:24:9)
    at checkExpectedValues (http://wpt.live/resources/check-layout-th.js:72:9)
    at checkSubtreeExpectedValues (http://wpt.live/resources/check-layout-th.js:7:25)
    at http://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-offset-y 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(200, 40, "\n<div class=\"grid contentSpaceAround verticalRL directionRTL\" data-expected-width=\"200\" data-expected-height=\"300\">\n    <div class=\"a\" data-offset-x=\"130\" data-offset-y=\"140\" data-expected-width=\"40\" data-expected-height=\"120\"></div>\n    <div class=\"b\" data-offset-x=\"30\" data-offset-y=\"40\" data-expected-width=\"140\" data-expected-height=\"20\"></div>\n    <div class=\"c\" data-offset-x=\"30\" data-offset-y=\"240\" data-expected-width=\"40\" data-expected-height=\"20\"></div>\n    <div class=\"d\" data-offset-x=\"30\" data-offset-y=\"140\" data-expected-width=\"40\" data-expected-height=\"20\"></div>\n  </div>\nwidth")
    at assert_tolerance ( /resources/check-layout-th.js:24:9)
Fail.grid 7assert_equals: <div class="grid contentSpaceEvenly verticalRL directionRTL" data-expected-width="200" data-expected-height="300"> <div class="a" data-offset-x="120" data-offset-y="140" data-expected-width="40" data-expected-height="100"></div> <div class="b" data-offset-x="40" data-offset-y="60" data-expected-width="120" data-expected-height="20"></div> <div class="c" data-offset-x="40" data-offset-y="220" data-expected-width="40" data-expected-height="20"></div> <div class="d" data-offset-x="40" data-offset-y="140" data-expected-width="40" data-expected-height="20"></div> </div> width expected 40 but got 200
    at assert_tolerance (http://wpt.live/resources/check-layout-th.js:24:9)
    at checkExpectedValues (http://wpt.live/resources/check-layout-th.js:72:9)
    at checkSubtreeExpectedValues (http://wpt.live/resources/check-layout-th.js:7:25)
    at http://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-offset-y 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(200, 40, "\n<div class=\"grid contentSpaceEvenly verticalRL directionRTL\" data-expected-width=\"200\" data-expected-height=\"300\">\n    <div class=\"a\" data-offset-x=\"120\" data-offset-y=\"140\" data-expected-width=\"40\" data-expected-height=\"100\"></div>\n    <div class=\"b\" data-offset-x=\"40\" data-offset-y=\"60\" data-expected-width=\"120\" data-expected-height=\"20\"></div>\n    <div class=\"c\" data-offset-x=\"40\" data-offset-y=\"220\" data-expected-width=\"40\" data-expected-height=\"20\"></div>\n    <div class=\"d\" data-offset-x=\"40\" data-offset-y=\"140\" data-expected-width=\"40\" data-expected-height=\"20\"></div>\n  </div>\nwidth")
    at assert_tolerance ( /resources/check-layout-th.js:24:9)
Fail.grid 8assert_equals: <div class="grid stretchedGrid contentStretch verticalRL directionRTL" data-expected-width="200" data-expected-height="300"> <div class="a" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="200"></div> <div class="b" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100"></div> <div class="c" data-offset-x="0" data-offset-y="200" data-expected-width="100" data-expected-height="100"></div> <div class="d" data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div> </div> width expected 100 but got 200
    at assert_tolerance (http://wpt.live/resources/check-layout-th.js:24:9)
    at checkExpectedValues (http://wpt.live/resources/check-layout-th.js:72:9)
    at checkSubtreeExpectedValues (http://wpt.live/resources/check-layout-th.js:7:25)
    at http://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-offset-y 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(200, 100, "\n<div class=\"grid stretchedGrid contentStretch verticalRL directionRTL\" data-expected-width=\"200\" data-expected-height=\"300\">\n    <div class=\"a\" data-offset-x=\"100\" data-offset-y=\"100\" data-expected-width=\"100\" data-expected-height=\"200\"></div>\n    <div class=\"b\" data-offset-x=\"0\" data-offset-y=\"0\" data-expected-width=\"200\" data-expected-height=\"100\"></div>\n    <div class=\"c\" data-offset-x=\"0\" data-offset-y=\"200\" data-expected-width=\"100\" data-expected-height=\"100\"></div>\n    <div class=\"d\" data-offset-x=\"0\" data-offset-y=\"100\" data-expected-width=\"100\" data-expected-height=\"100\"></div>\n  </div>\nwidth")
    at assert_tolerance ( /resources/check-layout-th.js:24:9)