This test checks that grid items alignment works as expected with VERTICAL-RL vs HORIZONTAL-TB orthogonal flows.

Direction: LTR vs LTR

end
center
start
s-end
s-start
default

Direction: RTL vs LTR

end
center
start
s-end
s-start
default

Direction: LTR vs RTL

end
center
start
s-end
s-start
default

Direction: RTL vs RTL

end
center
start
s-end
s-start
default

Summary

Harness status: OK

Found 4 tests

Details

ResultTest NameMessage
Fail.grid 1assert_equals: <div class="container"> <div class="grid fit-content verticalRL directionLTR"> <div class="item firstRowFirstColumn horizontalTB selfEnd" data-offset-x="300" data-offset-y="80">end</div> <div class="item firstRowSecondColumn horizontalTB selfCenter" data-offset-x="350" data-offset-y="140">center</div> <div class="item secondRowFirstColumn horizontalTB selfStart" data-offset-x="250" data-offset-y="0">start</div> <div class="item secondRowSecondColumn horizontalTB selfSelfEnd" data-offset-x="250" data-offset-y="180">s-end</div> <div class="item thirdRowFirstColumn horizontalTB selfSelfStart" data-offset-x="0" data-offset-y="0">s-start</div> <div class="item thirdRowSecondColumn horizontalTB" data-offset-x="100" data-offset-y="100">default</div> </div> </div> offsetLeft expected 300 but got 0
    at assert_tolerance (https://www1.wpt.live/resources/check-layout-th.js:24:9)
    at checkExpectedValues (https://www1.wpt.live/resources/check-layout-th.js:82:9)
    at checkSubtreeExpectedValues (https://www1.wpt.live/resources/check-layout-th.js:7:25)
    at https://www1.wpt.live/resources/check-layout-th.js:9:26
    at NodeList.forEach (<anonymous>)
Asserts run
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)
Fail
assert_equals(0, 300, "\n<div class=\"container\">\n    <div class=\"grid fit-content verticalRL directionLTR\">\n        <div class=\"item firstRowFirstColumn   horizontalTB selfEnd\" data-offset-x=\"300\" data-offset-y=\"80\">end</div>\n        <div class=\"item firstRowSecondColumn  horizontalTB selfCenter\" data-offset-x=\"350\" data-offset-y=\"140\">center</div>\n        <div class=\"item secondRowFirstColumn  horizontalTB selfStart\" data-offset-x=\"250\" data-offset-y=\"0\">start</div>\n        <div class=\"item secondRowSecondColumn horizontalTB selfSelfEnd\" data-offset-x=\"250\" data-offset-y=\"180\">s-end</div>\n        <div class=\"item thirdRowFirstColumn horizontalTB selfSelfStart\" data-offset-x=\"0\" data-offset-y=\"0\">s-start</div>\n        <div class=\"item thirdRowSecondColumn  horizontalTB\" data-offset-x=\"100\" data-offset-y=\"100\">default</div>\n    </div>\n</div>\noffsetLeft")
    at assert_tolerance ( /resources/check-layout-th.js:24:9)
Fail.grid 2assert_equals: <div class="container"> <div class="grid fit-content verticalRL directionRTL"> <div class="item firstRowFirstColumn directionLTR horizontalTB selfEnd" data-offset-x="300" data-offset-y="100">end</div> <div class="item firstRowSecondColumn directionLTR horizontalTB selfCenter" data-offset-x="350" data-offset-y="40">center</div> <div class="item secondRowFirstColumn directionLTR horizontalTB selfStart" data-offset-x="250" data-offset-y="180">start</div> <div class="item secondRowSecondColumn directionLTR horizontalTB selfSelfEnd" data-offset-x="250" data-offset-y="80">s-end</div> <div class="item thirdRowFirstColumn directionLTR horizontalTB selfSelfStart" data-offset-x="0" data-offset-y="100">s-start</div> <div class="item thirdRowSecondColumn directionLTR horizontalTB" data-offset-x="100" data-offset-y="80">default</div> </div> </div> offsetLeft expected 300 but got 0
    at assert_tolerance (https://www1.wpt.live/resources/check-layout-th.js:24:9)
    at checkExpectedValues (https://www1.wpt.live/resources/check-layout-th.js:82:9)
    at checkSubtreeExpectedValues (https://www1.wpt.live/resources/check-layout-th.js:7:25)
    at https://www1.wpt.live/resources/check-layout-th.js:9:26
    at NodeList.forEach (<anonymous>)
Asserts run
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)
Fail
assert_equals(0, 300, "\n<div class=\"container\">\n    <div class=\"grid fit-content verticalRL directionRTL\">\n        <div class=\"item firstRowFirstColumn   directionLTR horizontalTB selfEnd\" data-offset-x=\"300\" data-offset-y=\"100\">end</div>\n        <div class=\"item firstRowSecondColumn  directionLTR horizontalTB selfCenter\" data-offset-x=\"350\" data-offset-y=\"40\">center</div>\n        <div class=\"item secondRowFirstColumn  directionLTR horizontalTB selfStart\" data-offset-x=\"250\" data-offset-y=\"180\">start</div>\n        <div class=\"item secondRowSecondColumn directionLTR horizontalTB selfSelfEnd\" data-offset-x=\"250\" data-offset-y=\"80\">s-end</div>\n        <div class=\"item thirdRowFirstColumn   directionLTR horizontalTB selfSelfStart\" data-offset-x=\"0\" data-offset-y=\"100\">s-start</div>\n        <div class=\"item thirdRowSecondColumn  directionLTR horizontalTB\" data-offset-x=\"100\" data-offset-y=\"80\">default</div>\n    </div>\n</div>\noffsetLeft")
    at assert_tolerance ( /resources/check-layout-th.js:24:9)
Fail.grid 3assert_equals: <div class="container"> <div class="grid fit-content verticalRL directionLTR"> <div class="item firstRowFirstColumn directionRTL horizontalTB selfEnd" data-offset-x="300" data-offset-y="80">end</div> <div class="item firstRowSecondColumn directionRTL horizontalTB selfCenter" data-offset-x="350" data-offset-y="140">center</div> <div class="item secondRowFirstColumn directionRTL horizontalTB selfStart" data-offset-x="250" data-offset-y="0">start</div> <div class="item secondRowSecondColumn directionRTL horizontalTB selfSelfEnd" data-offset-x="150" data-offset-y="180">s-end</div> <div class="item thirdRowFirstColumn directionRTL horizontalTB selfSelfStart" data-offset-x="100" data-offset-y="0">s-start</div> <div class="item thirdRowSecondColumn directionRTL horizontalTB" data-offset-x="100" data-offset-y="100">default</div> </div> </div> offsetLeft expected 300 but got 0
    at assert_tolerance (https://www1.wpt.live/resources/check-layout-th.js:24:9)
    at checkExpectedValues (https://www1.wpt.live/resources/check-layout-th.js:82:9)
    at checkSubtreeExpectedValues (https://www1.wpt.live/resources/check-layout-th.js:7:25)
    at https://www1.wpt.live/resources/check-layout-th.js:9:26
    at NodeList.forEach (<anonymous>)
Asserts run
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)
Fail
assert_equals(0, 300, "\n<div class=\"container\">\n    <div class=\"grid fit-content verticalRL directionLTR\">\n        <div class=\"item firstRowFirstColumn   directionRTL horizontalTB selfEnd\" data-offset-x=\"300\" data-offset-y=\"80\">end</div>\n        <div class=\"item firstRowSecondColumn  directionRTL horizontalTB selfCenter\" data-offset-x=\"350\" data-offset-y=\"140\">center</div>\n        <div class=\"item secondRowFirstColumn  directionRTL horizontalTB selfStart\" data-offset-x=\"250\" data-offset-y=\"0\">start</div>\n        <div class=\"item secondRowSecondColumn directionRTL horizontalTB selfSelfEnd\" data-offset-x=\"150\" data-offset-y=\"180\">s-end</div>\n        <div class=\"item thirdRowFirstColumn   directionRTL horizontalTB selfSelfStart\" data-offset-x=\"100\" data-offset-y=\"0\">s-start</div>\n        <div class=\"item thirdRowSecondColumn  directionRTL horizontalTB\" data-offset-x=\"100\" data-offset-y=\"100\">default</div>\n\n    </div>\n</div>\noffsetLeft")
    at assert_tolerance ( /resources/check-layout-th.js:24:9)
Fail.grid 4assert_equals: <div class="container"> <div class="grid fit-content verticalRL directionRTL"> <div class="item firstRowFirstColumn horizontalTB selfEnd" data-offset-x="300" data-offset-y="100">end</div> <div class="item firstRowSecondColumn horizontalTB selfCenter" data-offset-x="350" data-offset-y="40">center</div> <div class="item secondRowFirstColumn horizontalTB selfStart" data-offset-x="250" data-offset-y="180">start</div> <div class="item secondRowSecondColumn horizontalTB selfSelfEnd" data-offset-x="150" data-offset-y="80">s-end</div> <div class="item thirdRowFirstColumn horizontalTB selfSelfStart" data-offset-x="100" data-offset-y="100">s-start</div> <div class="item thirdRowSecondColumn horizontalTB" data-offset-x="100" data-offset-y="80">default</div> </div> </div> offsetLeft expected 300 but got 0
    at assert_tolerance (https://www1.wpt.live/resources/check-layout-th.js:24:9)
    at checkExpectedValues (https://www1.wpt.live/resources/check-layout-th.js:82:9)
    at checkSubtreeExpectedValues (https://www1.wpt.live/resources/check-layout-th.js:7:25)
    at https://www1.wpt.live/resources/check-layout-th.js:9:26
    at NodeList.forEach (<anonymous>)
Asserts run
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)
Fail
assert_equals(0, 300, "\n<div class=\"container\">\n    <div class=\"grid fit-content verticalRL directionRTL\">\n        <div class=\"item firstRowFirstColumn   horizontalTB selfEnd\" data-offset-x=\"300\" data-offset-y=\"100\">end</div>\n        <div class=\"item firstRowSecondColumn  horizontalTB selfCenter\" data-offset-x=\"350\" data-offset-y=\"40\">center</div>\n        <div class=\"item secondRowFirstColumn  horizontalTB selfStart\" data-offset-x=\"250\" data-offset-y=\"180\">start</div>\n        <div class=\"item secondRowSecondColumn horizontalTB selfSelfEnd\" data-offset-x=\"150\" data-offset-y=\"80\">s-end</div>\n        <div class=\"item thirdRowFirstColumn   horizontalTB selfSelfStart\" data-offset-x=\"100\" data-offset-y=\"100\">s-start</div>\n        <div class=\"item thirdRowSecondColumn  horizontalTB\" data-offset-x=\"100\" data-offset-y=\"80\">default</div>\n    </div>\n</div>\noffsetLeft")
    at assert_tolerance ( /resources/check-layout-th.js:24:9)