зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1632282 [wpt PR 23184] - [wpt] enhanceents to check-layout-th.js, a=testonly
Automatic update from web-platform-tests [wpt] enhanceents to check-layout-th.js (#23184) There are 3 enhancements that I've found useful. 1. Warn if there are any unexpected data-* attributes A common error is to have a typo in data-* attribute name. When this happens, test will pass, because attribute is never read. This enhancement prints a warning if unexpected attribute is found. Running this over the entire test suite, I've found several errors: css/css-grid/grid-definition/grid-auto-repeat-intrinsic-001.html css/css-grid/grid-items/grid-items-percentage-margins-vertical-rl-001.html css/css-grid/grid-items/grid-items-percentage-margins-vertical-rl-002.html css/css-grid/grid-items/grid-items-relative-offsets-001.html css/css-grid/grid-items/grid-items-relative-offsets-002.html have data-expected-x, data-expected-y Tried replacing some of these with data-offset-x, and tests fail. css/css-grid/grid-definition/grid-percentage-rows-indefinite-height-002 has data-offset-top 2. highlight error on failure flag. Defaults to false. If set, this flag will draw an outline around failed Element. Useful when debugging pages with many elements. 3. toggle printing dom on error. Sometimes, it is useful not to print dom on error for clarity. Change-Id: I8424aa2dc002f63fde18d0fc54bdfe77666ce951 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2161379 Reviewed-by: Philip Jägenstedt <foolip@chromium.org> Reviewed-by: Manuel Rego <rego@igalia.com> Commit-Queue: Aleks Totic <atotic@chromium.org> Cr-Commit-Position: refs/heads/master@{#763069} Co-authored-by: Aleks Totic <atotic@chromium.org> -- wpt-commits: a5a3b7353c884ebcca0230818632a42ad2fbd9b2 wpt-pr: 23184
This commit is contained in:
Blink WPT Bot
moz-wptsync-bot
Родитель
a7bd677b64
Коммит
7080d036b9
|
|
@ -41,69 +41,69 @@
|
|||
<body onload="checkLayout('.grid')">
|
||||
|
||||
<div class="grid gridAutoFillFixed paddingTop max-content" data-expected-width="104" data-expected-height="34">
|
||||
<div class="item" style="grid-column: 1 / -1; width: 100px;" data-expected-width="100" data-expected-height="20" data-expected-x="0" data-expected-y="0"></div>
|
||||
<div class="abs" style="grid-column: 1 / 2; background: purple;" data-expected-width="20" data-expected-height="5" data-expected-x="0" data-expected-y="0"></div>
|
||||
<div class="abs" style="grid-column: 2 / 3; background: orange;" data-expected-width="20" data-expected-height="5" data-expected-x="20" data-expected-y="0"></div>
|
||||
<div class="abs" style="grid-column: 3 / 4; background: yellow;" data-expected-width="20" data-expected-height="5" data-expected-x="40" data-expected-y="0"></div>
|
||||
<div class="abs" style="grid-column: 4 / 5; background: green;" data-expected-width="40" data-expected-height="5" data-expected-x="60" data-expected-y="0"></div>
|
||||
<div class="item" style="grid-column: 1 / -1; width: 100px;" data-expected-width="100" data-expected-height="20" data-offset-x="0" data-offset-y="10"></div>
|
||||
<div class="abs" style="grid-column: 1 / 2; background: purple;" data-expected-width="20" data-expected-height="5" data-offset-x="0" data-offset-y="0"></div>
|
||||
<div class="abs" style="grid-column: 2 / 3; background: orange;" data-expected-width="20" data-expected-height="5" data-offset-x="20" data-offset-y="0"></div>
|
||||
<div class="abs" style="grid-column: 3 / 4; background: yellow;" data-expected-width="20" data-expected-height="5" data-offset-x="40" data-offset-y="0"></div>
|
||||
<div class="abs" style="grid-column: 4 / 5; background: green;" data-expected-width="40" data-expected-height="5" data-offset-x="60" data-offset-y="0"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridAutoFillFixed paddingTop min-content" data-expected-width="104" data-expected-height="34">
|
||||
<div class="item" style="grid-column: 1 / -1; width: 100px;" data-expected-width="100" data-expected-height="20" data-expected-x="0" data-expected-y="0"></div>
|
||||
<div class="abs" style="grid-column: 1 / 2; background: purple;" data-expected-width="20" data-expected-height="5" data-expected-x="0" data-expected-y="0"></div>
|
||||
<div class="abs" style="grid-column: 2 / 3; background: orange;" data-expected-width="20" data-expected-height="5" data-expected-x="20" data-expected-y="0"></div>
|
||||
<div class="abs" style="grid-column: 3 / 4; background: yellow;" data-expected-width="20" data-expected-height="5" data-expected-x="40" data-expected-y="0"></div>
|
||||
<div class="abs" style="grid-column: 4 / 5; background: green;" data-expected-width="40" data-expected-height="5" data-expected-x="60" data-expected-y="0"></div>
|
||||
<div class="item" style="grid-column: 1 / -1; width: 100px;" data-expected-width="100" data-expected-height="20" data-offset-x="0" data-offset-y="10"></div>
|
||||
<div class="abs" style="grid-column: 1 / 2; background: purple;" data-expected-width="20" data-expected-height="5" data-offset-x="0" data-offset-y="0"></div>
|
||||
<div class="abs" style="grid-column: 2 / 3; background: orange;" data-expected-width="20" data-expected-height="5" data-offset-x="20" data-offset-y="0"></div>
|
||||
<div class="abs" style="grid-column: 3 / 4; background: yellow;" data-expected-width="20" data-expected-height="5" data-offset-x="40" data-offset-y="0"></div>
|
||||
<div class="abs" style="grid-column: 4 / 5; background: green;" data-expected-width="40" data-expected-height="5" data-offset-x="60" data-offset-y="0"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridAutoFillAuto paddingTop max-content" data-expected-width="104" data-expected-height="34">
|
||||
<div class="item" style="grid-column: 1 / -1; width: 100px;" data-expected-width="100" data-expected-height="20" data-expected-x="0" data-expected-y="0"></div>
|
||||
<div class="abs" style="grid-column: 1 / 2; background: purple;" data-expected-width="10" data-expected-height="5" data-expected-x="0" data-expected-y="0"></div>
|
||||
<div class="abs" style="grid-column: 2 / 3; background: orange;" data-expected-width="10" data-expected-height="5" data-expected-x="20" data-expected-y="0"></div>
|
||||
<div class="abs" style="grid-column: 3 / 4; background: yellow;" data-expected-width="10" data-expected-height="5" data-expected-x="40" data-expected-y="0"></div>
|
||||
<div class="abs" style="grid-column: 4 / 5; background: green;" data-expected-width="10" data-expected-height="5" data-expected-x="60" data-expected-y="0"></div>
|
||||
<div class="item" style="grid-column: 1 / -1; width: 100px;" data-expected-width="100" data-expected-height="20" data-offset-x="0" data-offset-y="10"></div>
|
||||
<div class="abs" style="grid-column: 1 / 2; background: purple;" data-expected-width="10" data-expected-height="5" data-offset-x="0" data-offset-y="0"></div>
|
||||
<div class="abs" style="grid-column: 2 / 3; background: orange;" data-expected-width="10" data-expected-height="5" data-offset-x="10" data-offset-y="0"></div>
|
||||
<div class="abs" style="grid-column: 3 / 4; background: yellow;" data-expected-width="10" data-expected-height="5" data-offset-x="20" data-offset-y="0"></div>
|
||||
<div class="abs" style="grid-column: 4 / 5; background: green;" data-expected-width="10" data-expected-height="5" data-offset-x="30" data-offset-y="0"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridAutoFillAuto paddingTop min-content" data-expected-width="74" data-expected-height="34">
|
||||
<div class="item" style="grid-column: 1 / -1; width: 100px;" data-expected-width="100" data-expected-height="20" data-expected-x="0" data-expected-y="0"></div>
|
||||
<div class="abs" style="grid-column: 1 / 2; background: purple;" data-expected-width="10" data-expected-height="5" data-expected-x="0" data-expected-y="0"></div>
|
||||
<div class="abs" style="grid-column: 2 / 3; background: orange;" data-expected-width="60" data-expected-height="5" data-expected-x="20" data-expected-y="0"></div>
|
||||
<div class="abs" style="grid-column: 3 / 4; background: yellow;" data-expected-width="0" data-expected-height="5" data-expected-x="40" data-expected-y="0"></div>
|
||||
<div class="abs" style="grid-column: 4 / 5; background: green;" data-expected-width="70" data-expected-height="5" data-expected-x="60" data-expected-y="0"></div>
|
||||
<div class="item" style="grid-column: 1 / -1; width: 100px;" data-expected-width="100" data-expected-height="20" data-offset-x="0" data-offset-y="10"></div>
|
||||
<div class="abs" style="grid-column: 1 / 2; background: purple;" data-expected-width="10" data-expected-height="5" data-offset-x="0" data-offset-y="0"></div>
|
||||
<div class="abs" style="grid-column: 2 / 3; background: orange;" data-expected-width="60" data-expected-height="5" data-offset-x="10" data-offset-y="0"></div>
|
||||
<div class="abs" style="grid-column: 3 / 4; background: yellow;" data-expected-width="0" data-expected-height="5" data-offset-x="70" data-offset-y="0"></div>
|
||||
<div class="abs" style="grid-column: 4 / 5; background: green;" data-expected-width="70" data-expected-height="5" data-offset-x="0" data-offset-y="0"></div>
|
||||
</div>
|
||||
|
||||
<!-- auto-fill -->
|
||||
|
||||
<div class="grid gridAutoFitFixed paddingTop max-content" data-expected-width="104" data-expected-height="34">
|
||||
<div class="item" style="grid-column: 1 / -1; width: 100px;" data-expected-width="100" data-expected-height="20" data-expected-x="0" data-expected-y="0"></div>
|
||||
<div class="abs" style="grid-column: 1 / 2; background: purple;" data-expected-width="20" data-expected-height="5" data-expected-x="0" data-expected-y="0"></div>
|
||||
<div class="abs" style="grid-column: 2 / 3; background: orange;" data-expected-width="20" data-expected-height="5" data-expected-x="20" data-expected-y="0"></div>
|
||||
<div class="abs" style="grid-column: 3 / 4; background: yellow;" data-expected-width="20" data-expected-height="5" data-expected-x="40" data-expected-y="0"></div>
|
||||
<div class="abs" style="grid-column: 4 / 5; background: green;" data-expected-width="40" data-expected-height="5" data-expected-x="60" data-expected-y="0"></div>
|
||||
<div class="item" style="grid-column: 1 / -1; width: 100px;" data-expected-width="100" data-expected-height="20" data-offset-x="0" data-offset-y="10"></div>
|
||||
<div class="abs" style="grid-column: 1 / 2; background: purple;" data-expected-width="20" data-expected-height="5" data-offset-x="0" data-offset-y="0"></div>
|
||||
<div class="abs" style="grid-column: 2 / 3; background: orange;" data-expected-width="20" data-expected-height="5" data-offset-x="20" data-offset-y="0"></div>
|
||||
<div class="abs" style="grid-column: 3 / 4; background: yellow;" data-expected-width="20" data-expected-height="5" data-offset-x="40" data-offset-y="0"></div>
|
||||
<div class="abs" style="grid-column: 4 / 5; background: green;" data-expected-width="40" data-expected-height="5" data-offset-x="60" data-offset-y="0"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridAutoFitFixed paddingTop min-content" data-expected-width="104" data-expected-height="34">
|
||||
<div class="item" style="grid-column: 1 / -1; width: 100px;" data-expected-width="100" data-expected-height="20" data-expected-x="0" data-expected-y="0"></div>
|
||||
<div class="abs" style="grid-column: 1 / 2; background: purple;" data-expected-width="20" data-expected-height="5" data-expected-x="0" data-expected-y="0"></div>
|
||||
<div class="abs" style="grid-column: 2 / 3; background: orange;" data-expected-width="20" data-expected-height="5" data-expected-x="20" data-expected-y="0"></div>
|
||||
<div class="abs" style="grid-column: 3 / 4; background: yellow;" data-expected-width="20" data-expected-height="5" data-expected-x="40" data-expected-y="0"></div>
|
||||
<div class="abs" style="grid-column: 4 / 5; background: green;" data-expected-width="40" data-expected-height="5" data-expected-x="60" data-expected-y="0"></div>
|
||||
<div class="item" style="grid-column: 1 / -1; width: 100px;" data-expected-width="100" data-expected-height="20" data-offset-x="0" data-offset-y="10"></div>
|
||||
<div class="abs" style="grid-column: 1 / 2; background: purple;" data-expected-width="20" data-expected-height="5" data-offset-x="0" data-offset-y="0"></div>
|
||||
<div class="abs" style="grid-column: 2 / 3; background: orange;" data-expected-width="20" data-expected-height="5" data-offset-x="20" data-offset-y="0"></div>
|
||||
<div class="abs" style="grid-column: 3 / 4; background: yellow;" data-expected-width="20" data-expected-height="5" data-offset-x="40" data-offset-y="0"></div>
|
||||
<div class="abs" style="grid-column: 4 / 5; background: green;" data-expected-width="40" data-expected-height="5" data-offset-x="60" data-offset-y="0"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridAutoFitAuto paddingTop max-content" data-expected-width="104" data-expected-height="34">
|
||||
<div class="item" style="grid-column: 1 / -1; width: 100px;" data-expected-width="100" data-expected-height="20" data-expected-x="0" data-expected-y="0"></div>
|
||||
<div class="abs" style="grid-column: 1 / 2; background: purple;" data-expected-width="10" data-expected-height="5" data-expected-x="0" data-expected-y="0"></div>
|
||||
<div class="abs" style="grid-column: 2 / 3; background: orange;" data-expected-width="10" data-expected-height="5" data-expected-x="20" data-expected-y="0"></div>
|
||||
<div class="abs" style="grid-column: 3 / 4; background: yellow;" data-expected-width="10" data-expected-height="5" data-expected-x="40" data-expected-y="0"></div>
|
||||
<div class="abs" style="grid-column: 4 / 5; background: green;" data-expected-width="10" data-expected-height="5" data-expected-x="60" data-expected-y="0"></div>
|
||||
<div class="item" style="grid-column: 1 / -1; width: 100px;" data-expected-width="100" data-expected-height="20" data-offset-x="0" data-offset-y="10"></div>
|
||||
<div class="abs" style="grid-column: 1 / 2; background: purple;" data-expected-width="10" data-expected-height="5" data-offset-x="0" data-offset-y="0"></div>
|
||||
<div class="abs" style="grid-column: 2 / 3; background: orange;" data-expected-width="10" data-expected-height="5" data-offset-x="10" data-offset-y="0"></div>
|
||||
<div class="abs" style="grid-column: 3 / 4; background: yellow;" data-expected-width="10" data-expected-height="5" data-offset-x="20" data-offset-y="0"></div>
|
||||
<div class="abs" style="grid-column: 4 / 5; background: green;" data-expected-width="10" data-expected-height="5" data-offset-x="30" data-offset-y="0"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid gridAutoFitAuto paddingTop min-content" data-expected-width="74" data-expected-height="34">
|
||||
<div class="item" style="grid-column: 1 / -1; width: 100px;" data-expected-width="100" data-expected-height="20" data-expected-x="0" data-expected-y="0"></div>
|
||||
<div class="abs" style="grid-column: 1 / 2; background: purple;" data-expected-width="10" data-expected-height="5" data-expected-x="0" data-expected-y="0"></div>
|
||||
<div class="abs" style="grid-column: 2 / 3; background: orange;" data-expected-width="60" data-expected-height="5" data-expected-x="20" data-expected-y="0"></div>
|
||||
<div class="abs" style="grid-column: 3 / 4; background: yellow;" data-expected-width="0" data-expected-height="5" data-expected-x="40" data-expected-y="0"></div>
|
||||
<div class="abs" style="grid-column: 4 / 5; background: green;" data-expected-width="70" data-expected-height="5" data-expected-x="60" data-expected-y="0"></div>
|
||||
<div class="item" style="grid-column: 1 / -1; width: 100px;" data-expected-width="100" data-expected-height="20" data-offset-x="0" data-offset-y="10"></div>
|
||||
<div class="abs" style="grid-column: 1 / 2; background: purple;" data-expected-width="10" data-expected-height="5" data-offset-x="0" data-offset-y="0"></div>
|
||||
<div class="abs" style="grid-column: 2 / 3; background: orange;" data-expected-width="60" data-expected-height="5" data-offset-x="10" data-offset-y="0"></div>
|
||||
<div class="abs" style="grid-column: 3 / 4; background: yellow;" data-expected-width="0" data-expected-height="5" data-offset-x="70" data-offset-y="0"></div>
|
||||
<div class="abs" style="grid-column: 4 / 5; background: green;" data-expected-width="70" data-expected-height="5" data-offset-x="0" data-offset-y="0"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -27,15 +27,15 @@
|
|||
<div id="log"></div>
|
||||
|
||||
<div class="grid" style="grid-template-rows: auto 60% auto;" data-expected-height="35">
|
||||
<div style="grid-row: 1; grid-column: 1; background: cyan;" data-expected-height="5" data-offset-top="0"></div>
|
||||
<div style="grid-row: 1 / 4; grid-column: 2; background: magenta;" data-expected-height="25" data-offset-top="0">X</div>
|
||||
<div style="grid-row: 3; grid-column: 3; background: lime;" data-expected-height="5" data-offset-top="20"></div>
|
||||
<div style="grid-row: 1; grid-column: 1; background: cyan;" data-expected-height="5" data-offset-y="0"></div>
|
||||
<div style="grid-row: 1 / 4; grid-column: 2; background: magenta;" data-expected-height="25" data-offset-y="0">X</div>
|
||||
<div style="grid-row: 3; grid-column: 3; background: lime;" data-expected-height="5" data-offset-y="20"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid-template-rows: auto 20% auto;" data-expected-height="60">
|
||||
<div style="grid-row: 1; grid-column: 1; background: cyan;" data-expected-height="25" data-offset-top="0">X</div>
|
||||
<div style="grid-row: 1 / 4; grid-column: 2; background: magenta;" data-expected-height="60" data-offset-top="0">X</div>
|
||||
<div style="grid-row: 3; grid-column: 3; background: lime;" data-expected-height="25" data-offset-top="35">X</div>
|
||||
<div style="grid-row: 1; grid-column: 1; background: cyan;" data-expected-height="25" data-offset-y="0">X</div>
|
||||
<div style="grid-row: 1 / 4; grid-column: 2; background: magenta;" data-expected-height="60" data-offset-y="0">X</div>
|
||||
<div style="grid-row: 3; grid-column: 3; background: lime;" data-expected-height="25" data-offset-y="35">X</div>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="grid-template-rows: auto 10% auto; grid-template-columns: repeat(3, 50px);" data-expected-height="110">
|
||||
|
|
|
|||
|
|
@ -74,27 +74,27 @@
|
|||
<pre>Item margin-left: 50%;</pre>
|
||||
|
||||
<div class="grid directionRTL">
|
||||
<div class="marginLeft50Percent" data-expected-margin-left="50" data-expected-x="60" data-expected-width="10" data-expected-height="10">X</div>
|
||||
<div class="marginLeft50Percent" data-expected-margin-left="50" data-offset-x="60" data-expected-width="10" data-expected-height="10">X</div>
|
||||
<div data-offset-x="0" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item margin-right: 50%;</pre>
|
||||
|
||||
<div class="grid directionRTL">
|
||||
<div class="marginRight50Percent" data-expected-margin-right="50" data-expected-x="10" data-expected-width="10" data-expected-height="10">X</div>
|
||||
<div class="marginRight50Percent" data-expected-margin-right="50" data-offset-x="10" data-expected-width="10" data-expected-height="10">X</div>
|
||||
<div data-offset-x="0" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item margin-top: 50%;</pre>
|
||||
|
||||
<div class="grid directionRTL">
|
||||
<div class="marginTop50Percent" data-expected-margin-top="50" data-expected-y="490" data-expected-width="10" data-expected-height="10">X</div>
|
||||
<div class="marginTop50Percent" data-expected-margin-top="50" data-offset-y="490" data-expected-width="10" data-expected-height="10">X</div>
|
||||
<div data-offset-x="0" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item margin-bottom: 50%;</pre>
|
||||
|
||||
<div class="grid directionRTL">
|
||||
<div class="marginBottom50Percent" data-expected-margin-bottom="50" data-expected-y="440" data-expected-width="10" data-expected-height="10">X</div>
|
||||
<div class="marginBottom50Percent" data-expected-margin-bottom="50" data-offset-y="440" data-expected-width="10" data-expected-height="10">X</div>
|
||||
<div data-offset-x="0" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -74,27 +74,27 @@
|
|||
<pre>Item margin-left: 50%;</pre>
|
||||
|
||||
<div class="grid directionRTL">
|
||||
<div class="marginLeft50Percent" data-expected-margin-left="50" data-expected-x="60" data-expected-width="10" data-expected-height="10">X</div>
|
||||
<div class="marginLeft50Percent" data-expected-margin-left="50" data-offset-x="60" data-expected-width="10" data-expected-height="10">X</div>
|
||||
<div data-offset-x="0" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item margin-right: 50%;</pre>
|
||||
|
||||
<div class="grid directionRTL">
|
||||
<div class="marginRight50Percent" data-expected-margin-right="50" data-expected-x="10" data-expected-width="10" data-expected-height="10">X</div>
|
||||
<div class="marginRight50Percent" data-expected-margin-right="50" data-offset-x="10" data-expected-width="10" data-expected-height="10">X</div>
|
||||
<div data-offset-x="0" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item margin-top: 50%;</pre>
|
||||
|
||||
<div class="grid directionRTL">
|
||||
<div class="marginTop50Percent" data-expected-margin-top="50" data-expected-y="490" data-expected-width="10" data-expected-height="10">X</div>
|
||||
<div class="marginTop50Percent" data-expected-margin-top="50" data-offset-y="490" data-expected-width="10" data-expected-height="10">X</div>
|
||||
<div data-offset-x="0" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
|
||||
</div>
|
||||
|
||||
<pre>Item margin-bottom: 50%;</pre>
|
||||
|
||||
<div class="grid directionRTL">
|
||||
<div class="marginBottom50Percent" data-expected-margin-bottom="50" data-expected-y="440" data-expected-width="10" data-expected-height="10">X</div>
|
||||
<div class="marginBottom50Percent" data-expected-margin-bottom="50" data-offset-y="440" data-expected-width="10" data-expected-height="10">X</div>
|
||||
<div data-offset-x="0" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -27,22 +27,22 @@
|
|||
|
||||
<div class="grid">
|
||||
<div class="firstRowFirstColumn" style="left: 10px; top: 9px;"
|
||||
data-offset-x="10" data-offest-y="9" data-expected-width="200" data-expected-height="90"></div>
|
||||
data-offset-x="10" data-offset-y="9" data-expected-width="200" data-expected-height="90"></div>
|
||||
<div class="secondRowSecondColumn" style="left: -15px; top: -12px;"
|
||||
data-offset-x="185" data-offest-y="78" data-expected-width="150" data-expected-height="60"></div>
|
||||
data-offset-x="185" data-offset-y="78" data-expected-width="150" data-expected-height="60"></div>
|
||||
<div class="thirdRowThirdColumn" style="right: 30px; bottom: 21px;"
|
||||
data-offset-x="320" data-offest-y="129" data-expected-width="100" data-expected-height="30"></div>
|
||||
data-offset-x="320" data-offset-y="129" data-expected-width="100" data-expected-height="30"></div>
|
||||
</div>
|
||||
|
||||
<h3>Direction RTL</h3>
|
||||
|
||||
<div class="grid directionRTL">
|
||||
<div class="firstRowFirstColumn" style="left: 10px; top: 9px;"
|
||||
data-offset-x="410" data-offest-y="9" data-expected-width="200" data-expected-height="90"></div>
|
||||
data-offset-x="410" data-offset-y="9" data-expected-width="200" data-expected-height="90"></div>
|
||||
<div class="secondRowSecondColumn" style="left: -15px; top: -12px;"
|
||||
data-offset-x="235" data-offest-y="78" data-expected-width="150" data-expected-height="60"></div>
|
||||
data-offset-x="235" data-offset-y="78" data-expected-width="150" data-expected-height="60"></div>
|
||||
<div class="thirdRowThirdColumn" style="right: 30px; bottom: 21px;"
|
||||
data-offset-x="120" data-offest-y="129" data-expected-width="100" data-expected-height="30"></div>
|
||||
data-offset-x="120" data-offset-y="129" data-expected-width="100" data-expected-height="30"></div>
|
||||
</div>
|
||||
|
||||
<h2>Writing Mode vertical-lr</h2>
|
||||
|
|
@ -51,22 +51,22 @@
|
|||
|
||||
<div class="grid verticalLR">
|
||||
<div class="firstRowFirstColumn" style="left: 9px; top: 10px;"
|
||||
data-offset-x="9" data-offest-y="10" data-expected-width="90" data-expected-height="200"></div>
|
||||
data-offset-x="9" data-offset-y="10" data-expected-width="90" data-expected-height="200"></div>
|
||||
<div class="secondRowSecondColumn" style="left: -12px; top: -15px;"
|
||||
data-offset-x="78" data-offest-y="75" data-expected-width="60" data-expected-height="150"></div>
|
||||
data-offset-x="78" data-offset-y="185" data-expected-width="60" data-expected-height="150"></div>
|
||||
<div class="thirdRowThirdColumn" style="right: 21px; bottom: 30px;"
|
||||
data-offset-x="129" data-offest-y="120" data-expected-width="30" data-expected-height="100"></div>
|
||||
data-offset-x="129" data-offset-y="320" data-expected-width="30" data-expected-height="100"></div>
|
||||
</div>
|
||||
|
||||
<h3>Direction RTL</h3>
|
||||
|
||||
<div class="grid verticalLR directionRTL">
|
||||
<div class="firstRowFirstColumn" style="left: 9px; top: 10px;"
|
||||
data-offset-x="9" data-offest-y="10" data-expected-width="90" data-expected-height="200"></div>
|
||||
data-offset-x="9" data-offset-y="410" data-expected-width="90" data-expected-height="200"></div>
|
||||
<div class="secondRowSecondColumn" style="left: -12px; top: -15px;"
|
||||
data-offset-x="78" data-offest-y="75" data-expected-width="60" data-expected-height="150"></div>
|
||||
data-offset-x="78" data-offset-y="235" data-expected-width="60" data-expected-height="150"></div>
|
||||
<div class="thirdRowThirdColumn" style="right: 21px; bottom: 30px;"
|
||||
data-offset-x="129" data-offest-y="120" data-expected-width="30" data-expected-height="100"></div>
|
||||
data-offset-x="129" data-offset-y="120" data-expected-width="30" data-expected-height="100"></div>
|
||||
</div>
|
||||
|
||||
<h2>Writing Mode vertical-rl</h2>
|
||||
|
|
@ -75,20 +75,20 @@
|
|||
|
||||
<div class="grid verticalRL">
|
||||
<div class="firstRowFirstColumn" style="left: 9px; top: 10px;"
|
||||
data-offset-x="219" data-offest-y="10" data-expected-width="90" data-expected-height="200"></div>
|
||||
data-offset-x="219" data-offset-y="10" data-expected-width="90" data-expected-height="200"></div>
|
||||
<div class="secondRowSecondColumn" style="left: -12px; top: -15px;"
|
||||
data-offset-x="138" data-offest-y="75" data-expected-width="60" data-expected-height="150"></div>
|
||||
data-offset-x="138" data-offset-y="185" data-expected-width="60" data-expected-height="150"></div>
|
||||
<div class="thirdRowThirdColumn" style="right: 21px; bottom: 30px;"
|
||||
data-offset-x="99" data-offest-y="120" data-expected-width="30" data-expected-height="100"></div>
|
||||
data-offset-x="99" data-offset-y="320" data-expected-width="30" data-expected-height="100"></div>
|
||||
</div>
|
||||
|
||||
<h3>Direction RTL</h3>
|
||||
|
||||
<div class="grid verticalRL directionRTL">
|
||||
<div class="firstRowFirstColumn" style="left: 9px; top: 10px;"
|
||||
data-offset-x="219" data-offest-y="10" data-expected-width="90" data-expected-height="200"></div>
|
||||
data-offset-x="219" data-offset-y="410" data-expected-width="90" data-expected-height="200"></div>
|
||||
<div class="secondRowSecondColumn" style="left: -12px; top: -15px;"
|
||||
data-offset-x="138" data-offest-y="75" data-expected-width="60" data-expected-height="150"></div>
|
||||
data-offset-x="138" data-offset-y="235" data-expected-width="60" data-expected-height="150"></div>
|
||||
<div class="thirdRowThirdColumn" style="right: 21px; bottom: 30px;"
|
||||
data-offset-x="99" data-offest-y="120" data-expected-width="30" data-expected-height="100"></div>
|
||||
data-offset-x="99" data-offset-y="120" data-expected-width="30" data-expected-height="100"></div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -27,22 +27,22 @@
|
|||
|
||||
<div class="grid">
|
||||
<div class="firstRowFirstColumn" style="left: 5%; top: 10%;"
|
||||
data-offset-x="10" data-offest-y="9" data-expected-width="200" data-expected-height="90"></div>
|
||||
data-offset-x="10" data-offset-y="9" data-expected-width="200" data-expected-height="90"></div>
|
||||
<div class="secondRowSecondColumn" style="left: -10%; top: -20%;"
|
||||
data-offset-x="185" data-offest-y="78" data-expected-width="150" data-expected-height="60"></div>
|
||||
data-offset-x="185" data-offset-y="78" data-expected-width="150" data-expected-height="60"></div>
|
||||
<div class="thirdRowThirdColumn" style="right: 30%; bottom: 70%;"
|
||||
data-offset-x="320" data-offest-y="129" data-expected-width="100" data-expected-height="30"></div>
|
||||
data-offset-x="320" data-offset-y="129" data-expected-width="100" data-expected-height="30"></div>
|
||||
</div>
|
||||
|
||||
<h3>Direction RTL</h3>
|
||||
|
||||
<div class="grid directionRTL">
|
||||
<div class="firstRowFirstColumn" style="left: 5%; top: 10%;"
|
||||
data-offset-x="410" data-offest-y="9" data-expected-width="200" data-expected-height="90"></div>
|
||||
data-offset-x="410" data-offset-y="9" data-expected-width="200" data-expected-height="90"></div>
|
||||
<div class="secondRowSecondColumn" style="left: -10%; top: -20%;"
|
||||
data-offset-x="235" data-offest-y="78" data-expected-width="150" data-expected-height="60"></div>
|
||||
data-offset-x="235" data-offset-y="78" data-expected-width="150" data-expected-height="60"></div>
|
||||
<div class="thirdRowThirdColumn" style="right: 30%; bottom: 70%;"
|
||||
data-offset-x="120" data-offest-y="129" data-expected-width="100" data-expected-height="30"></div>
|
||||
data-offset-x="120" data-offset-y="129" data-expected-width="100" data-expected-height="30"></div>
|
||||
</div>
|
||||
|
||||
<h2>Writing Mode vertical-lr</h2>
|
||||
|
|
@ -51,22 +51,22 @@
|
|||
|
||||
<div class="grid verticalLR">
|
||||
<div class="firstRowFirstColumn" style="left: 10%; top: 5%;"
|
||||
data-offset-x="9" data-offest-y="10" data-expected-width="90" data-expected-height="200"></div>
|
||||
data-offset-x="9" data-offset-y="10" data-expected-width="90" data-expected-height="200"></div>
|
||||
<div class="secondRowSecondColumn" style="left: -20%; top: -10%;"
|
||||
data-offset-x="78" data-offest-y="75" data-expected-width="60" data-expected-height="150"></div>
|
||||
data-offset-x="78" data-offset-y="185" data-expected-width="60" data-expected-height="150"></div>
|
||||
<div class="thirdRowThirdColumn" style="right: 70%; bottom: 30%;"
|
||||
data-offset-x="129" data-offest-y="120" data-expected-width="30" data-expected-height="100"></div>
|
||||
data-offset-x="129" data-offset-y="320" data-expected-width="30" data-expected-height="100"></div>
|
||||
</div>
|
||||
|
||||
<h3>Direction RTL</h3>
|
||||
|
||||
<div class="grid verticalLR directionRTL">
|
||||
<div class="firstRowFirstColumn" style="left: 10%; top: 5%;"
|
||||
data-offset-x="9" data-offest-y="10" data-expected-width="90" data-expected-height="200"></div>
|
||||
data-offset-x="9" data-offset-y="410" data-expected-width="90" data-expected-height="200"></div>
|
||||
<div class="secondRowSecondColumn" style="left: -20%; top: -10%;"
|
||||
data-offset-x="78" data-offest-y="75" data-expected-width="60" data-expected-height="150"></div>
|
||||
data-offset-x="78" data-offset-y="235" data-expected-width="60" data-expected-height="150"></div>
|
||||
<div class="thirdRowThirdColumn" style="right: 70%; bottom: 30%;"
|
||||
data-offset-x="129" data-offest-y="120" data-expected-width="30" data-expected-height="100"></div>
|
||||
data-offset-x="129" data-offset-y="120" data-expected-width="30" data-expected-height="100"></div>
|
||||
</div>
|
||||
|
||||
<h2>Writing Mode vertical-rl</h2>
|
||||
|
|
@ -75,20 +75,20 @@
|
|||
|
||||
<div class="grid verticalRL">
|
||||
<div class="firstRowFirstColumn" style="left: 10%; top: 5%;"
|
||||
data-offset-x="219" data-offest-y="10" data-expected-width="90" data-expected-height="200"></div>
|
||||
data-offset-x="219" data-offset-y="10" data-expected-width="90" data-expected-height="200"></div>
|
||||
<div class="secondRowSecondColumn" style="left: -20%; top: -10%;"
|
||||
data-offset-x="138" data-offest-y="75" data-expected-width="60" data-expected-height="150"></div>
|
||||
data-offset-x="138" data-offset-y="185" data-expected-width="60" data-expected-height="150"></div>
|
||||
<div class="thirdRowThirdColumn" style="right: 70%; bottom: 30%;"
|
||||
data-offset-x="99" data-offest-y="120" data-expected-width="30" data-expected-height="100"></div>
|
||||
data-offset-x="99" data-offset-y="320" data-expected-width="30" data-expected-height="100"></div>
|
||||
</div>
|
||||
|
||||
<h3>Direction RTL</h3>
|
||||
|
||||
<div class="grid verticalRL directionRTL">
|
||||
<div class="firstRowFirstColumn" style="left: 10%; top: 5%;"
|
||||
data-offset-x="219" data-offest-y="10" data-expected-width="90" data-expected-height="200"></div>
|
||||
data-offset-x="219" data-offset-y="410" data-expected-width="90" data-expected-height="200"></div>
|
||||
<div class="secondRowSecondColumn" style="left: -20%; top: -10%;"
|
||||
data-offset-x="138" data-offest-y="75" data-expected-width="60" data-expected-height="150"></div>
|
||||
data-offset-x="138" data-offset-y="235" data-expected-width="60" data-expected-height="150"></div>
|
||||
<div class="thirdRowThirdColumn" style="right: 70%; bottom: 30%;"
|
||||
data-offset-x="99" data-offest-y="120" data-expected-width="30" data-expected-height="100"></div>
|
||||
data-offset-x="99" data-offset-y="120" data-expected-width="30" data-expected-height="100"></div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -54,7 +54,7 @@
|
|||
<div class="item" data-expected-width="100" data-expected-height="100"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid min-content scroll" data-width-without-scrollbar="100" data-height-without-scrollbar="100">
|
||||
<div class="grid min-content scroll" data-test-width-without-scrollbar="100" data-test-height-without-scrollbar="100">
|
||||
<div class="item" data-expected-width="100" data-expected-height="100"></div>
|
||||
</div>
|
||||
|
||||
|
|
@ -66,7 +66,7 @@
|
|||
<div class="item" data-expected-width="100" data-expected-height="100"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid min-content margin scroll" data-width-without-scrollbar="100" data-height-without-scrollbar="100">
|
||||
<div class="grid min-content margin scroll" data-test-width-without-scrollbar="100" data-test-height-without-scrollbar="100">
|
||||
<div class="item" data-expected-width="100" data-expected-height="100"></div>
|
||||
</div>
|
||||
|
||||
|
|
@ -74,11 +74,11 @@
|
|||
<div class="item" data-expected-width="100" data-expected-height="100"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid min-content border scroll" data-width-without-scrollbar="110" data-height-without-scrollbar="110">
|
||||
<div class="grid min-content border scroll" data-test-width-without-scrollbar="110" data-test-height-without-scrollbar="110">
|
||||
<div class="item" data-expected-width="100" data-expected-height="100"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid min-content padding scroll" data-width-without-scrollbar="140" data-height-without-scrollbar="140">
|
||||
<div class="grid min-content padding scroll" data-test-width-without-scrollbar="140" data-test-height-without-scrollbar="140">
|
||||
<div class="item" data-expected-width="100" data-expected-height="100"></div>
|
||||
</div>
|
||||
|
||||
|
|
@ -86,19 +86,19 @@
|
|||
<div class="item" data-expected-width="100" data-expected-height="100"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid min-content margin border scroll" data-width-without-scrollbar="110" data-height-without-scrollbar="110">
|
||||
<div class="grid min-content margin border scroll" data-test-width-without-scrollbar="110" data-test-height-without-scrollbar="110">
|
||||
<div class="item" data-expected-width="100" data-expected-height="100"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid min-content margin padding scroll" data-width-without-scrollbar="140" data-height-without-scrollbar="140">
|
||||
<div class="grid min-content margin padding scroll" data-test-width-without-scrollbar="140" data-test-height-without-scrollbar="140">
|
||||
<div class="item" data-expected-width="100" data-expected-height="100"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid min-content border padding scroll" data-width-without-scrollbar="150" data-height-without-scrollbar="150">
|
||||
<div class="grid min-content border padding scroll" data-test-width-without-scrollbar="150" data-test-height-without-scrollbar="150">
|
||||
<div class="item" data-expected-width="100" data-expected-height="100"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid min-content margin border padding scroll" data-width-without-scrollbar="150" data-height-without-scrollbar="150">
|
||||
<div class="grid min-content margin border padding scroll" data-test-width-without-scrollbar="150" data-test-height-without-scrollbar="150">
|
||||
<div class="item" data-expected-width="100" data-expected-height="100"></div>
|
||||
</div>
|
||||
|
||||
|
|
@ -112,7 +112,7 @@
|
|||
var scrollbarWidth = measure.offsetWidth - measure.clientWidth;
|
||||
var scrollbarHeight = measure.offsetHeight - measure.clientHeight;
|
||||
|
||||
// Here are the data-width-without-scrollbar (and height) attributes of all
|
||||
// Here are the data-test-width-without-scrollbar (and height) attributes of all
|
||||
// elements that have the "scroll" class. Things that contribute to the expected
|
||||
// sizes are:
|
||||
//
|
||||
|
|
@ -126,8 +126,8 @@
|
|||
// so that we can ensure the scrollbar sizes are calculated in an engine-agnostic way.
|
||||
var elements = document.getElementsByClassName("scroll");
|
||||
for (var i = 0; i < elements.length; i++) {
|
||||
const expectedWidth = parseInt(elements[i].getAttribute("data-width-without-scrollbar"));
|
||||
const expectedHeight = parseInt(elements[i].getAttribute("data-height-without-scrollbar"));
|
||||
const expectedWidth = parseInt(elements[i].getAttribute("data-test-width-without-scrollbar"));
|
||||
const expectedHeight = parseInt(elements[i].getAttribute("data-test-height-without-scrollbar"));
|
||||
elements[i].setAttribute("data-expected-width", expectedWidth + scrollbarWidth);
|
||||
elements[i].setAttribute("data-expected-height", expectedHeight + scrollbarHeight);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -25,8 +25,41 @@ function assert_tolerance(actual, expected, message)
|
|||
}
|
||||
}
|
||||
|
||||
function checkDataKeys(node) {
|
||||
var validData = new Set([
|
||||
"data-expected-width",
|
||||
"data-expected-height",
|
||||
"data-offset-x",
|
||||
"data-offset-y",
|
||||
"data-expected-client-width",
|
||||
"data-expected-client-height",
|
||||
"data-expected-scroll-width",
|
||||
"data-expected-scroll-height",
|
||||
"data-expected-bounding-client-rect-width",
|
||||
"data-total-x",
|
||||
"data-total-y",
|
||||
"data-expected-display",
|
||||
"data-expected-padding-top",
|
||||
"data-expected-padding-bottom",
|
||||
"data-expected-padding-left",
|
||||
"data-expected-padding-right",
|
||||
"data-expected-margin-top",
|
||||
"data-expected-margin-bottom",
|
||||
"data-expected-margin-left",
|
||||
"data-expected-margin-right"
|
||||
]);
|
||||
if (!node || !node.getAttributeNames)
|
||||
return;
|
||||
// Use "data-test" prefix if you need custom-named data elements.
|
||||
for (let name of node.getAttributeNames()) {
|
||||
if (name.startsWith("data-") && !name.startsWith("data-test"))
|
||||
assert_true(validData.has(name), name + " is a valid data attribute");
|
||||
}
|
||||
}
|
||||
|
||||
function checkExpectedValues(t, node, prefix)
|
||||
{
|
||||
checkDataKeys(node);
|
||||
var output = { checked: false };
|
||||
|
||||
var expectedWidth = checkAttribute(output, node, "data-expected-width");
|
||||
|
|
@ -162,6 +195,8 @@ function checkExpectedValues(t, node, prefix)
|
|||
}
|
||||
|
||||
var testNumber = 0;
|
||||
var highlightError = false; // displays outline around failed test element.
|
||||
var printDomOnError = true; // prints dom when test fails.
|
||||
|
||||
window.checkLayout = function(selectorList, callDone = true)
|
||||
{
|
||||
|
|
@ -175,13 +210,24 @@ window.checkLayout = function(selectorList, callDone = true)
|
|||
Array.prototype.forEach.call(nodes, function(node) {
|
||||
test(function(t) {
|
||||
var container = node.parentNode.className == 'container' ? node.parentNode : node;
|
||||
var prefix = "\n" + container.outerHTML + "\n";
|
||||
var prefix =
|
||||
printDomOnError ? '\n' + container.outerHTML + '\n' : '';
|
||||
var passed = false;
|
||||
try {
|
||||
checkedLayout |= checkExpectedValues(t, node.parentNode, prefix);
|
||||
checkedLayout |= checkSubtreeExpectedValues(t, node, prefix);
|
||||
passed = true;
|
||||
} finally {
|
||||
if (!passed && highlightError) {
|
||||
if (!document.getElementById('testharness_error_css')) {
|
||||
var style = document.createElement('style');
|
||||
style.id = 'testharness_error_css';
|
||||
style.textContent = '.testharness_error { outline: red dotted 2px !important; }';
|
||||
document.body.appendChild(style);
|
||||
}
|
||||
if (node)
|
||||
node.classList.add('testharness_error');
|
||||
}
|
||||
checkedLayout |= !passed;
|
||||
}
|
||||
}, selectorList + ' ' + String(++testNumber));
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче