mozilla
/
gecko-dev
зеркало из https://github.com/mozilla/gecko-dev.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

Bug 1457123 [wpt PR 10651] - [css-writing-modes] Fix percentages on orthogonal replaced children, a=testonly 

Automatic update from web-platform-tests[css-writing-modes] Fix percentages on orthogonal replaced children

This patch modifies LayoutBox::ComputeReplacedLogicalWidth|HeightUsing()
so it's aware of the orthogonal flow cases.

For example to compute the relative widths of replaced elements,
if the element direction is perpendicular to its containing block
it should use the containing block height instead of the width.

BUG=837146
TEST=external/wpt/css/css-writing-modes/sizing-percentages-replaced-orthogonal-001.html

Change-Id: I655c984703e2073be9a3a649ac79a63f8c136cc0
Reviewed-on: https://chromium-review.googlesource.com/1029852
Reviewed-by: Javier Fernandez <jfernandez@igalia.com>
Commit-Queue: Manuel Rego Casasnovas <rego@igalia.com>
Cr-Commit-Position: refs/heads/master@{#554731}

--

wpt-commits: 435b33acfe825349ac7c18262a8e0b11e2be38e5
wpt-pr: 10651
This commit is contained in:
Manuel Rego Casasnovas 2018-05-01 17:15:30 +00:00 коммит произвёл James Graham
Родитель b5654f9aef
Коммит ece605540c
3 изменённых файлов: 110 добавлений и 0 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

25
testing/web-platform/meta/MANIFEST.json
Просмотреть файл

@ -160439,6 +160439,18 @@
{}
]
],
"css/css-writing-modes/sizing-percentages-replaced-orthogonal-001.html": [
[
"/css/css-writing-modes/sizing-percentages-replaced-orthogonal-001.html",
[
[
"/css/css-writing-modes/sizing-percentages-replaced-orthogonal-001-ref.html",
"=="
]
],
{}
]
],
"css/css-writing-modes/svg-aliasing-001.html": [
[
"/css/css-writing-modes/svg-aliasing-001.html",
@ -262911,6 +262923,11 @@
{}
]
],
"css/css-writing-modes/sizing-percentages-replaced-orthogonal-001-ref.html": [
[
{}
]
],
"css/css-writing-modes/support/100x100-lime.png": [
[
{}
@ -538360,6 +538377,14 @@
"2543ef7b6e41b2b0614c32167f4e0a85319dae0c",
"reftest"
],
"css/css-writing-modes/sizing-percentages-replaced-orthogonal-001-ref.html": [
"59177963e949b6c60b3e919f87de243a5ca24522",
"support"
],
"css/css-writing-modes/sizing-percentages-replaced-orthogonal-001.html": [
"c558b746bdc80a28371146de9a54ba4822e91088",
"reftest"
],
"css/css-writing-modes/support/100x100-lime.png": [
"b02fc2d0ad1d95a2aeb6011022e63928841b183f",
"support"

39
testing/web-platform/tests/css/css-writing-modes/sizing-percentages-replaced-orthogonal-001-ref.html Normal file
Просмотреть файл

@ -0,0 +1,39 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Reftest Reference: Percentage size on orthogonal replaced elements</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<style>
.container {
display: inline-block;
border: solid 5px black;
margin: 10px;
vertical-align: top;
width: 200px;
height: 100px;
}
img {
display: block;
width: 200px;
height: 100px;
}
</style>
<p>The test passes if you see four filled lime rectangles with black border and <strong>no red</strong>.</p>
<div class="container">
<img src="support/100x100-lime.png" />
</div>
<div class="container">
<img src="support/100x100-lime.png" />
</div>
<div class="container">
<img src="support/100x100-lime.png" />
</div>
<div class="container">
<img src="support/100x100-lime.png" />
</div>

46
testing/web-platform/tests/css/css-writing-modes/sizing-percentages-replaced-orthogonal-001.html Normal file
Просмотреть файл

@ -0,0 +1,46 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Writing Modes Test: Percentage size on orthogonal replaced elements</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#orthogonal-auto">
<link rel="match" href="sizing-percentages-replaced-orthogonal-001-ref.html">
<meta name="assert" content="Checks that orthogonal replaced elements resolve properly their percentage sizes against the expected axis from their containing block.">
<style>
.container {
display: inline-block;
border: solid 5px black;
margin: 10px;
vertical-align: top;
width: 200px;
height: 100px;
background: red;
}
img {
display: block;
width: 100%;
height: 100%;
}
.horizontalTB { writing-mode: horizontal-tb; }
.verticalLR { writing-mode: vertical-lr; }
.verticalRL { writing-mode: vertical-rl; }
</style>
<p>The test passes if you see four filled lime rectangles with black border and <strong>no red</strong>.</p>
<div class="container horizontalTB">
<img class="verticalLR" src="support/100x100-lime.png" />
</div>
<div class="container horizontalTB">
<img class="verticalRL" src="support/100x100-lime.png" />
</div>
<div class="container verticalLR">
<img class="horizontalTB" src="support/100x100-lime.png" />
</div>
<div class="container verticalRL">
<img class="horizontalTB" src="support/100x100-lime.png" />
</div>