mirror of
https://github.com/servo/servo.git
synced 2025-08-07 14:35:33 +01:00
Properly transfer min/max constraints on auto-sized replaced elements (#34026)
We were following CSS2, which didn't handle `aspect-ratio`. This patch simplifies the logic and handles it correctly. Unfortunately this makes 2 tests fail, but I'm pretty sure they aren't spec-compliant. I'm leaving them as-is for now since they are part of interop-2021, and Gecko, Blink and WebKit pass them (because of some non-interoperable incorrect behaviors). I'm adding a new test that is fully passed by Servo and WebKit. Signed-off-by: Oriol Brufau <obrufau@igalia.com>
This commit is contained in:
Oriol Brufau
GitHub
parent
f12071f77e
commit
1891c5cfaf
5 changed files with 506 additions and 114 deletions
|
|
@ -5,7 +5,7 @@
|
||||||
use std::fmt;
|
use std::fmt;
|
||||||
use std::sync::{Arc, Mutex};
|
use std::sync::{Arc, Mutex};
|
||||||
|
|
||||||
use app_units::Au;
|
use app_units::{Au, MAX_AU};
|
||||||
use base::id::{BrowsingContextId, PipelineId};
|
use base::id::{BrowsingContextId, PipelineId};
|
||||||
use canvas_traits::canvas::{CanvasId, CanvasMsg, FromLayoutMsg};
|
use canvas_traits::canvas::{CanvasId, CanvasMsg, FromLayoutMsg};
|
||||||
use data_url::DataUrl;
|
use data_url::DataUrl;
|
||||||
|
|
@ -564,119 +564,36 @@ impl ReplacedContent {
|
||||||
if let (AuOrAuto::Auto, AuOrAuto::Auto, Some(ratio)) =
|
if let (AuOrAuto::Auto, AuOrAuto::Auto, Some(ratio)) =
|
||||||
(box_size.inline, box_size.block, intrinsic_ratio)
|
(box_size.inline, box_size.block, intrinsic_ratio)
|
||||||
{
|
{
|
||||||
let LogicalVec2 {
|
let tentative_size = get_tentative_size(box_size);
|
||||||
inline: inline_size,
|
let max_box_size = max_box_size.map(|max_size| max_size.unwrap_or(MAX_AU));
|
||||||
block: block_size,
|
// This is a simplification of the CSS2 algorithm in a way that properly handles `aspect-ratio`.
|
||||||
} = get_tentative_size(box_size);
|
// We transfer min and max constraints from the other axis, and apply them in addition to
|
||||||
enum Violation {
|
// non-transferred min and max constraints. In case of conflict,
|
||||||
None,
|
// - Non-transferred constraints take precedence over transferred ones.
|
||||||
Below(Au),
|
// - Min constraints take precedence over max ones from the same axis.
|
||||||
Above(Au),
|
// <https://drafts.csswg.org/css-sizing-4/#aspect-ratio-size-transfers>
|
||||||
}
|
// <https://github.com/w3c/csswg-drafts/issues/6071#issuecomment-2243986313>
|
||||||
let violation = |size: Au, min_size: Au, mut max_size: Option<Au>| {
|
let inline = tentative_size.inline.clamp_between_extremums(
|
||||||
if let Some(max) = max_size.as_mut() {
|
ratio
|
||||||
max.max_assign(min_size);
|
.compute_dependent_size(Direction::Inline, min_box_size.block)
|
||||||
}
|
.clamp_between_extremums(min_box_size.inline, Some(max_box_size.inline)),
|
||||||
if size < min_size {
|
Some(
|
||||||
return Violation::Below(min_size);
|
ratio
|
||||||
}
|
.compute_dependent_size(Direction::Inline, max_box_size.block)
|
||||||
match max_size {
|
.min(max_box_size.inline),
|
||||||
Some(max_size) if size > max_size => Violation::Above(max_size),
|
),
|
||||||
_ => Violation::None,
|
);
|
||||||
}
|
let block = tentative_size.block.clamp_between_extremums(
|
||||||
};
|
ratio
|
||||||
return match (
|
.compute_dependent_size(Direction::Block, min_box_size.inline)
|
||||||
violation(inline_size, min_box_size.inline, max_box_size.inline),
|
.clamp_between_extremums(min_box_size.block, Some(max_box_size.block)),
|
||||||
violation(block_size, min_box_size.block, max_box_size.block),
|
Some(
|
||||||
) {
|
ratio
|
||||||
// Row 1.
|
.compute_dependent_size(Direction::Block, max_box_size.inline)
|
||||||
(Violation::None, Violation::None) => LogicalVec2 {
|
.min(max_box_size.block),
|
||||||
inline: inline_size,
|
),
|
||||||
block: block_size,
|
);
|
||||||
},
|
return LogicalVec2 { inline, block };
|
||||||
// Row 2.
|
|
||||||
(Violation::Above(max_inline_size), Violation::None) => LogicalVec2 {
|
|
||||||
inline: max_inline_size,
|
|
||||||
block: ratio
|
|
||||||
.compute_dependent_size(Direction::Block, max_inline_size)
|
|
||||||
.max(min_box_size.block),
|
|
||||||
},
|
|
||||||
// Row 3.
|
|
||||||
(Violation::Below(min_inline_size), Violation::None) => LogicalVec2 {
|
|
||||||
inline: min_inline_size,
|
|
||||||
block: ratio
|
|
||||||
.compute_dependent_size(Direction::Block, min_inline_size)
|
|
||||||
.clamp_below_max(max_box_size.block),
|
|
||||||
},
|
|
||||||
// Row 4.
|
|
||||||
(Violation::None, Violation::Above(max_block_size)) => LogicalVec2 {
|
|
||||||
inline: ratio
|
|
||||||
.compute_dependent_size(Direction::Inline, max_block_size)
|
|
||||||
.max(min_box_size.inline),
|
|
||||||
block: max_block_size,
|
|
||||||
},
|
|
||||||
// Row 5.
|
|
||||||
(Violation::None, Violation::Below(min_block_size)) => LogicalVec2 {
|
|
||||||
inline: ratio
|
|
||||||
.compute_dependent_size(Direction::Inline, min_block_size)
|
|
||||||
.clamp_below_max(max_box_size.inline),
|
|
||||||
block: min_block_size,
|
|
||||||
},
|
|
||||||
// Rows 6-7.
|
|
||||||
(Violation::Above(max_inline_size), Violation::Above(max_block_size)) => {
|
|
||||||
let transferred_block_size =
|
|
||||||
ratio.compute_dependent_size(Direction::Block, max_inline_size);
|
|
||||||
if transferred_block_size <= max_block_size {
|
|
||||||
// Row 6.
|
|
||||||
LogicalVec2 {
|
|
||||||
inline: max_inline_size,
|
|
||||||
block: transferred_block_size.max(min_box_size.block),
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
// Row 7.
|
|
||||||
LogicalVec2 {
|
|
||||||
inline: ratio
|
|
||||||
.compute_dependent_size(Direction::Inline, max_block_size)
|
|
||||||
.max(min_box_size.inline),
|
|
||||||
block: max_block_size,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// Rows 8-9.
|
|
||||||
(Violation::Below(min_inline_size), Violation::Below(min_block_size)) => {
|
|
||||||
let transferred_inline_size =
|
|
||||||
ratio.compute_dependent_size(Direction::Inline, min_block_size);
|
|
||||||
if min_inline_size <= transferred_inline_size {
|
|
||||||
// Row 8.
|
|
||||||
LogicalVec2 {
|
|
||||||
inline: transferred_inline_size.clamp_below_max(max_box_size.inline),
|
|
||||||
block: min_block_size,
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
// Row 9.
|
|
||||||
LogicalVec2 {
|
|
||||||
inline: min_inline_size,
|
|
||||||
block: ratio
|
|
||||||
.compute_dependent_size(Direction::Block, min_inline_size)
|
|
||||||
.clamp_below_max(max_box_size.block),
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// Row 10.
|
|
||||||
(Violation::Below(min_inline_size), Violation::Above(max_block_size)) => {
|
|
||||||
LogicalVec2 {
|
|
||||||
inline: min_inline_size,
|
|
||||||
block: max_block_size,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// Row 11.
|
|
||||||
(Violation::Above(max_inline_size), Violation::Below(min_block_size)) => {
|
|
||||||
LogicalVec2 {
|
|
||||||
inline: max_inline_size,
|
|
||||||
block: min_block_size,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
};
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// https://drafts.csswg.org/css2/#min-max-widths "The following algorithm describes how the two properties
|
// https://drafts.csswg.org/css2/#min-max-widths "The following algorithm describes how the two properties
|
||||||
|
|
|
||||||
7
tests/wpt/meta/MANIFEST.json
vendored
7
tests/wpt/meta/MANIFEST.json
vendored
|
|
@ -570268,6 +570268,13 @@
|
||||||
{}
|
{}
|
||||||
]
|
]
|
||||||
],
|
],
|
||||||
|
"replaced-element-043.html": [
|
||||||
|
"9ad35c1a316dfdd5163e63f671f58f3c85892100",
|
||||||
|
[
|
||||||
|
null,
|
||||||
|
{}
|
||||||
|
]
|
||||||
|
],
|
||||||
"sign-function-aspect-ratio.html": [
|
"sign-function-aspect-ratio.html": [
|
||||||
"e5ba1a8321a42918cccee4ee164527fa25078e4f",
|
"e5ba1a8321a42918cccee4ee164527fa25078e4f",
|
||||||
[
|
[
|
||||||
|
|
|
||||||
2
tests/wpt/meta/css/css-sizing/aspect-ratio/replaced-element-013.html.ini
vendored
Normal file
2
tests/wpt/meta/css/css-sizing/aspect-ratio/replaced-element-013.html.ini
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
||||||
|
[replaced-element-013.html]
|
||||||
|
expected: FAIL
|
||||||
2
tests/wpt/meta/css/css-sizing/aspect-ratio/replaced-element-014.html.ini
vendored
Normal file
2
tests/wpt/meta/css/css-sizing/aspect-ratio/replaced-element-014.html.ini
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
||||||
|
[replaced-element-014.html]
|
||||||
|
expected: FAIL
|
||||||
464
tests/wpt/tests/css/css-sizing/aspect-ratio/replaced-element-043.html
vendored
Normal file
464
tests/wpt/tests/css/css-sizing/aspect-ratio/replaced-element-043.html
vendored
Normal file
|
|
@ -0,0 +1,464 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>CSS aspect-ratio: replaced element with various sizing properties</title>
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio">
|
||||||
|
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio-size-transfers">
|
||||||
|
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/6071#issuecomment-2243986313">
|
||||||
|
<meta name="assert" content="
|
||||||
|
Min, max and preferred sizing constraints are transferred to the other axis via the preferred aspect ratio.
|
||||||
|
In case of conflict,
|
||||||
|
- Non-transferred constraints take precedence over transferred ones.
|
||||||
|
- Min constraints take precedence over max ones from the same axis.
|
||||||
|
">
|
||||||
|
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
|
||||||
|
|
||||||
|
<style>
|
||||||
|
canvas {
|
||||||
|
aspect-ratio: 2;
|
||||||
|
width: auto;
|
||||||
|
height: auto;
|
||||||
|
outline: 1px solid;
|
||||||
|
margin: 2px;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<table border="1" cellspacing="0">
|
||||||
|
<tr>
|
||||||
|
<td><code>width</code></td>
|
||||||
|
<td>
|
||||||
|
<canvas width="15" height="15" style="width: 0"
|
||||||
|
data-expected-width="0" data-expected-height="0"></canvas>
|
||||||
|
<canvas width="15" height="15" style="width: 10px"
|
||||||
|
data-expected-width="10" data-expected-height="5"></canvas>
|
||||||
|
<canvas width="15" height="15" style="width: 20px"
|
||||||
|
data-expected-width="20" data-expected-height="10"></canvas>
|
||||||
|
<canvas width="15" height="15" style="width: 30px"
|
||||||
|
data-expected-width="30" data-expected-height="15"></canvas>
|
||||||
|
<canvas width="15" height="15" style="width: 40px"
|
||||||
|
data-expected-width="40" data-expected-height="20"></canvas>
|
||||||
|
<canvas width="15" height="15" style="width: 50px"
|
||||||
|
data-expected-width="50" data-expected-height="25"></canvas>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>height</code></td>
|
||||||
|
<td>
|
||||||
|
<canvas width="15" height="15" style="height: 0px"
|
||||||
|
data-expected-width="0" data-expected-height="0"></canvas>
|
||||||
|
<canvas width="15" height="15" style="height: 5px"
|
||||||
|
data-expected-width="10" data-expected-height="5"></canvas>
|
||||||
|
<canvas width="15" height="15" style="height: 10px"
|
||||||
|
data-expected-width="20" data-expected-height="10"></canvas>
|
||||||
|
<canvas width="15" height="15" style="height: 15px"
|
||||||
|
data-expected-width="30" data-expected-height="15"></canvas>
|
||||||
|
<canvas width="15" height="15" style="height: 20px"
|
||||||
|
data-expected-width="40" data-expected-height="20"></canvas>
|
||||||
|
<canvas width="15" height="15" style="height: 25px"
|
||||||
|
data-expected-width="50" data-expected-height="25"></canvas>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>min-width</code></td>
|
||||||
|
<td>
|
||||||
|
<canvas width="15" height="15" style="min-width: 0px"
|
||||||
|
data-expected-width="15" data-expected-height="15"></canvas>
|
||||||
|
<canvas width="15" height="15" style="min-width: 10px"
|
||||||
|
data-expected-width="15" data-expected-height="15"></canvas>
|
||||||
|
<canvas width="15" height="15" style="min-width: 20px"
|
||||||
|
data-expected-width="20" data-expected-height="15"></canvas>
|
||||||
|
<canvas width="15" height="15" style="min-width: 30px"
|
||||||
|
data-expected-width="30" data-expected-height="15"></canvas>
|
||||||
|
<canvas width="15" height="15" style="min-width: 40px"
|
||||||
|
data-expected-width="40" data-expected-height="20"></canvas>
|
||||||
|
<canvas width="15" height="15" style="min-width: 50px"
|
||||||
|
data-expected-width="50" data-expected-height="25"></canvas>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>min-height</code></td>
|
||||||
|
<td>
|
||||||
|
<canvas width="15" height="15" style="min-height: 0px"
|
||||||
|
data-expected-width="15" data-expected-height="15"></canvas>
|
||||||
|
<canvas width="15" height="15" style="min-height: 5px"
|
||||||
|
data-expected-width="15" data-expected-height="15"></canvas>
|
||||||
|
<canvas width="15" height="15" style="min-height: 10px"
|
||||||
|
data-expected-width="20" data-expected-height="15"></canvas>
|
||||||
|
<canvas width="15" height="15" style="min-height: 15px"
|
||||||
|
data-expected-width="30" data-expected-height="15"></canvas>
|
||||||
|
<canvas width="15" height="15" style="min-height: 20px"
|
||||||
|
data-expected-width="40" data-expected-height="20"></canvas>
|
||||||
|
<canvas width="15" height="15" style="min-height: 25px"
|
||||||
|
data-expected-width="50" data-expected-height="25"></canvas>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>max-width</code></td>
|
||||||
|
<td>
|
||||||
|
<canvas width="15" height="15" style="max-width: 0px"
|
||||||
|
data-expected-width="0" data-expected-height="0"></canvas>
|
||||||
|
<canvas width="15" height="15" style="max-width: 10px"
|
||||||
|
data-expected-width="10" data-expected-height="5"></canvas>
|
||||||
|
<canvas width="15" height="15" style="max-width: 20px"
|
||||||
|
data-expected-width="15" data-expected-height="10"></canvas>
|
||||||
|
<canvas width="15" height="15" style="max-width: 30px"
|
||||||
|
data-expected-width="15" data-expected-height="15"></canvas>
|
||||||
|
<canvas width="15" height="15" style="max-width: 40px"
|
||||||
|
data-expected-width="15" data-expected-height="15"></canvas>
|
||||||
|
<canvas width="15" height="15" style="max-width: 50px"
|
||||||
|
data-expected-width="15" data-expected-height="15"></canvas>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>max-height</code></td>
|
||||||
|
<td>
|
||||||
|
<canvas width="15" height="15" style="max-height: 0px"
|
||||||
|
data-expected-width="0" data-expected-height="0"></canvas>
|
||||||
|
<canvas width="15" height="15" style="max-height: 5px"
|
||||||
|
data-expected-width="10" data-expected-height="5"></canvas>
|
||||||
|
<canvas width="15" height="15" style="max-height: 10px"
|
||||||
|
data-expected-width="15" data-expected-height="10"></canvas>
|
||||||
|
<canvas width="15" height="15" style="max-height: 15px"
|
||||||
|
data-expected-width="15" data-expected-height="15"></canvas>
|
||||||
|
<canvas width="15" height="15" style="max-height: 20px"
|
||||||
|
data-expected-width="15" data-expected-height="15"></canvas>
|
||||||
|
<canvas width="15" height="15" style="max-height: 25px"
|
||||||
|
data-expected-width="15" data-expected-height="15"></canvas>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>min-width</code>, <code>min-height</code></td>
|
||||||
|
<td>
|
||||||
|
<canvas width="15" height="15" style="min-width: 0px; min-height: 0px"
|
||||||
|
data-expected-width="15" data-expected-height="15"></canvas>
|
||||||
|
<canvas width="15" height="15" style="min-width: 0px; min-height: 5px"
|
||||||
|
data-expected-width="15" data-expected-height="15"></canvas>
|
||||||
|
<canvas width="15" height="15" style="min-width: 0px; min-height: 10px"
|
||||||
|
data-expected-width="20" data-expected-height="15"></canvas>
|
||||||
|
<canvas width="15" height="15" style="min-width: 0px; min-height: 15px"
|
||||||
|
data-expected-width="30" data-expected-height="15"></canvas>
|
||||||
|
<canvas width="15" height="15" style="min-width: 0px; min-height: 20px"
|
||||||
|
data-expected-width="40" data-expected-height="20"></canvas>
|
||||||
|
<canvas width="15" height="15" style="min-width: 0px; min-height: 25px"
|
||||||
|
data-expected-width="50" data-expected-height="25"></canvas>
|
||||||
|
<br>
|
||||||
|
<canvas width="15" height="15" style="min-width: 10px; min-height: 0px"
|
||||||
|
data-expected-width="15" data-expected-height="15"></canvas>
|
||||||
|
<canvas width="15" height="15" style="min-width: 10px; min-height: 5px"
|
||||||
|
data-expected-width="15" data-expected-height="15"></canvas>
|
||||||
|
<canvas width="15" height="15" style="min-width: 10px; min-height: 10px"
|
||||||
|
data-expected-width="20" data-expected-height="15"></canvas>
|
||||||
|
<canvas width="15" height="15" style="min-width: 10px; min-height: 15px"
|
||||||
|
data-expected-width="30" data-expected-height="15"></canvas>
|
||||||
|
<canvas width="15" height="15" style="min-width: 10px; min-height: 20px"
|
||||||
|
data-expected-width="40" data-expected-height="20"></canvas>
|
||||||
|
<canvas width="15" height="15" style="min-width: 10px; min-height: 25px"
|
||||||
|
data-expected-width="50" data-expected-height="25"></canvas>
|
||||||
|
<br>
|
||||||
|
<canvas width="15" height="15" style="min-width: 20px; min-height: 0px"
|
||||||
|
data-expected-width="20" data-expected-height="15"></canvas>
|
||||||
|
<canvas width="15" height="15" style="min-width: 20px; min-height: 5px"
|
||||||
|
data-expected-width="20" data-expected-height="15"></canvas>
|
||||||
|
<canvas width="15" height="15" style="min-width: 20px; min-height: 10px"
|
||||||
|
data-expected-width="20" data-expected-height="15"></canvas>
|
||||||
|
<canvas width="15" height="15" style="min-width: 20px; min-height: 15px"
|
||||||
|
data-expected-width="30" data-expected-height="15"></canvas>
|
||||||
|
<canvas width="15" height="15" style="min-width: 20px; min-height: 20px"
|
||||||
|
data-expected-width="40" data-expected-height="20"></canvas>
|
||||||
|
<canvas width="15" height="15" style="min-width: 20px; min-height: 25px"
|
||||||
|
data-expected-width="50" data-expected-height="25"></canvas>
|
||||||
|
<br>
|
||||||
|
<canvas width="15" height="15" style="min-width: 30px; min-height: 0px"
|
||||||
|
data-expected-width="30" data-expected-height="15"></canvas>
|
||||||
|
<canvas width="15" height="15" style="min-width: 30px; min-height: 5px"
|
||||||
|
data-expected-width="30" data-expected-height="15"></canvas>
|
||||||
|
<canvas width="15" height="15" style="min-width: 30px; min-height: 10px"
|
||||||
|
data-expected-width="30" data-expected-height="15"></canvas>
|
||||||
|
<canvas width="15" height="15" style="min-width: 30px; min-height: 15px"
|
||||||
|
data-expected-width="30" data-expected-height="15"></canvas>
|
||||||
|
<canvas width="15" height="15" style="min-width: 30px; min-height: 20px"
|
||||||
|
data-expected-width="40" data-expected-height="20"></canvas>
|
||||||
|
<canvas width="15" height="15" style="min-width: 30px; min-height: 25px"
|
||||||
|
data-expected-width="50" data-expected-height="25"></canvas>
|
||||||
|
<br>
|
||||||
|
<canvas width="15" height="15" style="min-width: 40px; min-height: 0px"
|
||||||
|
data-expected-width="40" data-expected-height="20"></canvas>
|
||||||
|
<canvas width="15" height="15" style="min-width: 40px; min-height: 5px"
|
||||||
|
data-expected-width="40" data-expected-height="20"></canvas>
|
||||||
|
<canvas width="15" height="15" style="min-width: 40px; min-height: 10px"
|
||||||
|
data-expected-width="40" data-expected-height="20"></canvas>
|
||||||
|
<canvas width="15" height="15" style="min-width: 40px; min-height: 15px"
|
||||||
|
data-expected-width="40" data-expected-height="20"></canvas>
|
||||||
|
<canvas width="15" height="15" style="min-width: 40px; min-height: 20px"
|
||||||
|
data-expected-width="40" data-expected-height="20"></canvas>
|
||||||
|
<canvas width="15" height="15" style="min-width: 40px; min-height: 25px"
|
||||||
|
data-expected-width="50" data-expected-height="25"></canvas>
|
||||||
|
<br>
|
||||||
|
<canvas width="15" height="15" style="min-width: 50px; min-height: 0px"
|
||||||
|
data-expected-width="50" data-expected-height="25"></canvas>
|
||||||
|
<canvas width="15" height="15" style="min-width: 50px; min-height: 5px"
|
||||||
|
data-expected-width="50" data-expected-height="25"></canvas>
|
||||||
|
<canvas width="15" height="15" style="min-width: 50px; min-height: 10px"
|
||||||
|
data-expected-width="50" data-expected-height="25"></canvas>
|
||||||
|
<canvas width="15" height="15" style="min-width: 50px; min-height: 15px"
|
||||||
|
data-expected-width="50" data-expected-height="25"></canvas>
|
||||||
|
<canvas width="15" height="15" style="min-width: 50px; min-height: 20px"
|
||||||
|
data-expected-width="50" data-expected-height="25"></canvas>
|
||||||
|
<canvas width="15" height="15" style="min-width: 50px; min-height: 25px"
|
||||||
|
data-expected-width="50" data-expected-height="25"></canvas>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>min-width</code>, <code>max-height</code></td>
|
||||||
|
<td>
|
||||||
|
<canvas width="15" height="15" style="min-width: 0px; max-height: 0px"
|
||||||
|
data-expected-width="0" data-expected-height="0"></canvas>
|
||||||
|
<canvas width="15" height="15" style="min-width: 0px; max-height: 5px"
|
||||||
|
data-expected-width="10" data-expected-height="5"></canvas>
|
||||||
|
<canvas width="15" height="15" style="min-width: 0px; max-height: 10px"
|
||||||
|
data-expected-width="15" data-expected-height="10"></canvas>
|
||||||
|
<canvas width="15" height="15" style="min-width: 0px; max-height: 15px"
|
||||||
|
data-expected-width="15" data-expected-height="15"></canvas>
|
||||||
|
<canvas width="15" height="15" style="min-width: 0px; max-height: 20px"
|
||||||
|
data-expected-width="15" data-expected-height="15"></canvas>
|
||||||
|
<canvas width="15" height="15" style="min-width: 0px; max-height: 25px"
|
||||||
|
data-expected-width="15" data-expected-height="15"></canvas>
|
||||||
|
<br>
|
||||||
|
<canvas width="15" height="15" style="min-width: 10px; max-height: 0px"
|
||||||
|
data-expected-width="10" data-expected-height="0"></canvas>
|
||||||
|
<canvas width="15" height="15" style="min-width: 10px; max-height: 5px"
|
||||||
|
data-expected-width="10" data-expected-height="5"></canvas>
|
||||||
|
<canvas width="15" height="15" style="min-width: 10px; max-height: 10px"
|
||||||
|
data-expected-width="15" data-expected-height="10"></canvas>
|
||||||
|
<canvas width="15" height="15" style="min-width: 10px; max-height: 15px"
|
||||||
|
data-expected-width="15" data-expected-height="15"></canvas>
|
||||||
|
<canvas width="15" height="15" style="min-width: 10px; max-height: 20px"
|
||||||
|
data-expected-width="15" data-expected-height="15"></canvas>
|
||||||
|
<canvas width="15" height="15" style="min-width: 10px; max-height: 25px"
|
||||||
|
data-expected-width="15" data-expected-height="15"></canvas>
|
||||||
|
<br>
|
||||||
|
<canvas width="15" height="15" style="min-width: 20px; max-height: 0px"
|
||||||
|
data-expected-width="20" data-expected-height="0"></canvas>
|
||||||
|
<canvas width="15" height="15" style="min-width: 20px; max-height: 5px"
|
||||||
|
data-expected-width="20" data-expected-height="5"></canvas>
|
||||||
|
<canvas width="15" height="15" style="min-width: 20px; max-height: 10px"
|
||||||
|
data-expected-width="20" data-expected-height="10"></canvas>
|
||||||
|
<canvas width="15" height="15" style="min-width: 20px; max-height: 15px"
|
||||||
|
data-expected-width="20" data-expected-height="15"></canvas>
|
||||||
|
<canvas width="15" height="15" style="min-width: 20px; max-height: 20px"
|
||||||
|
data-expected-width="20" data-expected-height="15"></canvas>
|
||||||
|
<canvas width="15" height="15" style="min-width: 20px; max-height: 25px"
|
||||||
|
data-expected-width="20" data-expected-height="15"></canvas>
|
||||||
|
<br>
|
||||||
|
<canvas width="15" height="15" style="min-width: 30px; max-height: 0px"
|
||||||
|
data-expected-width="30" data-expected-height="0"></canvas>
|
||||||
|
<canvas width="15" height="15" style="min-width: 30px; max-height: 5px"
|
||||||
|
data-expected-width="30" data-expected-height="5"></canvas>
|
||||||
|
<canvas width="15" height="15" style="min-width: 30px; max-height: 10px"
|
||||||
|
data-expected-width="30" data-expected-height="10"></canvas>
|
||||||
|
<canvas width="15" height="15" style="min-width: 30px; max-height: 15px"
|
||||||
|
data-expected-width="30" data-expected-height="15"></canvas>
|
||||||
|
<canvas width="15" height="15" style="min-width: 30px; max-height: 20px"
|
||||||
|
data-expected-width="30" data-expected-height="15"></canvas>
|
||||||
|
<canvas width="15" height="15" style="min-width: 30px; max-height: 25px"
|
||||||
|
data-expected-width="30" data-expected-height="15"></canvas>
|
||||||
|
<br>
|
||||||
|
<canvas width="15" height="15" style="min-width: 40px; max-height: 0px"
|
||||||
|
data-expected-width="40" data-expected-height="0"></canvas>
|
||||||
|
<canvas width="15" height="15" style="min-width: 40px; max-height: 5px"
|
||||||
|
data-expected-width="40" data-expected-height="5"></canvas>
|
||||||
|
<canvas width="15" height="15" style="min-width: 40px; max-height: 10px"
|
||||||
|
data-expected-width="40" data-expected-height="10"></canvas>
|
||||||
|
<canvas width="15" height="15" style="min-width: 40px; max-height: 15px"
|
||||||
|
data-expected-width="40" data-expected-height="15"></canvas>
|
||||||
|
<canvas width="15" height="15" style="min-width: 40px; max-height: 20px"
|
||||||
|
data-expected-width="40" data-expected-height="20"></canvas>
|
||||||
|
<canvas width="15" height="15" style="min-width: 40px; max-height: 25px"
|
||||||
|
data-expected-width="40" data-expected-height="20"></canvas>
|
||||||
|
<br>
|
||||||
|
<canvas width="15" height="15" style="min-width: 50px; max-height: 0px"
|
||||||
|
data-expected-width="50" data-expected-height="0"></canvas>
|
||||||
|
<canvas width="15" height="15" style="min-width: 50px; max-height: 5px"
|
||||||
|
data-expected-width="50" data-expected-height="5"></canvas>
|
||||||
|
<canvas width="15" height="15" style="min-width: 50px; max-height: 10px"
|
||||||
|
data-expected-width="50" data-expected-height="10"></canvas>
|
||||||
|
<canvas width="15" height="15" style="min-width: 50px; max-height: 15px"
|
||||||
|
data-expected-width="50" data-expected-height="15"></canvas>
|
||||||
|
<canvas width="15" height="15" style="min-width: 50px; max-height: 20px"
|
||||||
|
data-expected-width="50" data-expected-height="20"></canvas>
|
||||||
|
<canvas width="15" height="15" style="min-width: 50px; max-height: 25px"
|
||||||
|
data-expected-width="50" data-expected-height="25"></canvas>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>max-width</code>, <code>min-height</code></td>
|
||||||
|
<td>
|
||||||
|
<canvas width="15" height="15" style="max-width: 0px; min-height: 0px"
|
||||||
|
data-expected-width="0" data-expected-height="0"></canvas>
|
||||||
|
<canvas width="15" height="15" style="max-width: 0px; min-height: 5px"
|
||||||
|
data-expected-width="0" data-expected-height="5"></canvas>
|
||||||
|
<canvas width="15" height="15" style="max-width: 0px; min-height: 10px"
|
||||||
|
data-expected-width="0" data-expected-height="10"></canvas>
|
||||||
|
<canvas width="15" height="15" style="max-width: 0px; min-height: 15px"
|
||||||
|
data-expected-width="0" data-expected-height="15"></canvas>
|
||||||
|
<canvas width="15" height="15" style="max-width: 0px; min-height: 20px"
|
||||||
|
data-expected-width="0" data-expected-height="20"></canvas>
|
||||||
|
<canvas width="15" height="15" style="max-width: 0px; min-height: 25px"
|
||||||
|
data-expected-width="0" data-expected-height="25"></canvas>
|
||||||
|
<br>
|
||||||
|
<canvas width="15" height="15" style="max-width: 10px; min-height: 0px"
|
||||||
|
data-expected-width="10" data-expected-height="5"></canvas>
|
||||||
|
<canvas width="15" height="15" style="max-width: 10px; min-height: 5px"
|
||||||
|
data-expected-width="10" data-expected-height="5"></canvas>
|
||||||
|
<canvas width="15" height="15" style="max-width: 10px; min-height: 10px"
|
||||||
|
data-expected-width="10" data-expected-height="10"></canvas>
|
||||||
|
<canvas width="15" height="15" style="max-width: 10px; min-height: 15px"
|
||||||
|
data-expected-width="10" data-expected-height="15"></canvas>
|
||||||
|
<canvas width="15" height="15" style="max-width: 10px; min-height: 20px"
|
||||||
|
data-expected-width="10" data-expected-height="20"></canvas>
|
||||||
|
<canvas width="15" height="15" style="max-width: 10px; min-height: 25px"
|
||||||
|
data-expected-width="10" data-expected-height="25"></canvas>
|
||||||
|
<br>
|
||||||
|
<canvas width="15" height="15" style="max-width: 20px; min-height: 0px"
|
||||||
|
data-expected-width="15" data-expected-height="10"></canvas>
|
||||||
|
<canvas width="15" height="15" style="max-width: 20px; min-height: 5px"
|
||||||
|
data-expected-width="15" data-expected-height="10"></canvas>
|
||||||
|
<canvas width="15" height="15" style="max-width: 20px; min-height: 10px"
|
||||||
|
data-expected-width="20" data-expected-height="10"></canvas>
|
||||||
|
<canvas width="15" height="15" style="max-width: 20px; min-height: 15px"
|
||||||
|
data-expected-width="20" data-expected-height="15"></canvas>
|
||||||
|
<canvas width="15" height="15" style="max-width: 20px; min-height: 20px"
|
||||||
|
data-expected-width="20" data-expected-height="20"></canvas>
|
||||||
|
<canvas width="15" height="15" style="max-width: 20px; min-height: 25px"
|
||||||
|
data-expected-width="20" data-expected-height="25"></canvas>
|
||||||
|
<br>
|
||||||
|
<canvas width="15" height="15" style="max-width: 30px; min-height: 0px"
|
||||||
|
data-expected-width="15" data-expected-height="15"></canvas>
|
||||||
|
<canvas width="15" height="15" style="max-width: 30px; min-height: 5px"
|
||||||
|
data-expected-width="15" data-expected-height="15"></canvas>
|
||||||
|
<canvas width="15" height="15" style="max-width: 30px; min-height: 10px"
|
||||||
|
data-expected-width="20" data-expected-height="15"></canvas>
|
||||||
|
<canvas width="15" height="15" style="max-width: 30px; min-height: 15px"
|
||||||
|
data-expected-width="30" data-expected-height="15"></canvas>
|
||||||
|
<canvas width="15" height="15" style="max-width: 30px; min-height: 20px"
|
||||||
|
data-expected-width="30" data-expected-height="20"></canvas>
|
||||||
|
<canvas width="15" height="15" style="max-width: 30px; min-height: 25px"
|
||||||
|
data-expected-width="30" data-expected-height="25"></canvas>
|
||||||
|
<br>
|
||||||
|
<canvas width="15" height="15" style="max-width: 40px; min-height: 0px"
|
||||||
|
data-expected-width="15" data-expected-height="15"></canvas>
|
||||||
|
<canvas width="15" height="15" style="max-width: 40px; min-height: 5px"
|
||||||
|
data-expected-width="15" data-expected-height="15"></canvas>
|
||||||
|
<canvas width="15" height="15" style="max-width: 40px; min-height: 10px"
|
||||||
|
data-expected-width="20" data-expected-height="15"></canvas>
|
||||||
|
<canvas width="15" height="15" style="max-width: 40px; min-height: 15px"
|
||||||
|
data-expected-width="30" data-expected-height="15"></canvas>
|
||||||
|
<canvas width="15" height="15" style="max-width: 40px; min-height: 20px"
|
||||||
|
data-expected-width="40" data-expected-height="20"></canvas>
|
||||||
|
<canvas width="15" height="15" style="max-width: 40px; min-height: 25px"
|
||||||
|
data-expected-width="40" data-expected-height="25"></canvas>
|
||||||
|
<br>
|
||||||
|
<canvas width="15" height="15" style="max-width: 50px; min-height: 0px"
|
||||||
|
data-expected-width="15" data-expected-height="15"></canvas>
|
||||||
|
<canvas width="15" height="15" style="max-width: 50px; min-height: 5px"
|
||||||
|
data-expected-width="15" data-expected-height="15"></canvas>
|
||||||
|
<canvas width="15" height="15" style="max-width: 50px; min-height: 10px"
|
||||||
|
data-expected-width="20" data-expected-height="15"></canvas>
|
||||||
|
<canvas width="15" height="15" style="max-width: 50px; min-height: 15px"
|
||||||
|
data-expected-width="30" data-expected-height="15"></canvas>
|
||||||
|
<canvas width="15" height="15" style="max-width: 50px; min-height: 20px"
|
||||||
|
data-expected-width="40" data-expected-height="20"></canvas>
|
||||||
|
<canvas width="15" height="15" style="max-width: 50px; min-height: 25px"
|
||||||
|
data-expected-width="50" data-expected-height="25"></canvas>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>max-width</code>, <code>max-height</code></td>
|
||||||
|
<td>
|
||||||
|
<canvas width="15" height="15" style="max-width: 0px; max-height: 0px"
|
||||||
|
data-expected-width="0" data-expected-height="0"></canvas>
|
||||||
|
<canvas width="15" height="15" style="max-width: 0px; max-height: 5px"
|
||||||
|
data-expected-width="0" data-expected-height="0"></canvas>
|
||||||
|
<canvas width="15" height="15" style="max-width: 0px; max-height: 10px"
|
||||||
|
data-expected-width="0" data-expected-height="0"></canvas>
|
||||||
|
<canvas width="15" height="15" style="max-width: 0px; max-height: 15px"
|
||||||
|
data-expected-width="0" data-expected-height="0"></canvas>
|
||||||
|
<canvas width="15" height="15" style="max-width: 0px; max-height: 20px"
|
||||||
|
data-expected-width="0" data-expected-height="0"></canvas>
|
||||||
|
<canvas width="15" height="15" style="max-width: 0px; max-height: 25px"
|
||||||
|
data-expected-width="0" data-expected-height="0"></canvas>
|
||||||
|
<br>
|
||||||
|
<canvas width="15" height="15" style="max-width: 10px; max-height: 0px"
|
||||||
|
data-expected-width="0" data-expected-height="0"></canvas>
|
||||||
|
<canvas width="15" height="15" style="max-width: 10px; max-height: 5px"
|
||||||
|
data-expected-width="10" data-expected-height="5"></canvas>
|
||||||
|
<canvas width="15" height="15" style="max-width: 10px; max-height: 10px"
|
||||||
|
data-expected-width="10" data-expected-height="5"></canvas>
|
||||||
|
<canvas width="15" height="15" style="max-width: 10px; max-height: 15px"
|
||||||
|
data-expected-width="10" data-expected-height="5"></canvas>
|
||||||
|
<canvas width="15" height="15" style="max-width: 10px; max-height: 20px"
|
||||||
|
data-expected-width="10" data-expected-height="5"></canvas>
|
||||||
|
<canvas width="15" height="15" style="max-width: 10px; max-height: 25px"
|
||||||
|
data-expected-width="10" data-expected-height="5"></canvas>
|
||||||
|
<br>
|
||||||
|
<canvas width="15" height="15" style="max-width: 20px; max-height: 0px"
|
||||||
|
data-expected-width="0" data-expected-height="0"></canvas>
|
||||||
|
<canvas width="15" height="15" style="max-width: 20px; max-height: 5px"
|
||||||
|
data-expected-width="10" data-expected-height="5"></canvas>
|
||||||
|
<canvas width="15" height="15" style="max-width: 20px; max-height: 10px"
|
||||||
|
data-expected-width="15" data-expected-height="10"></canvas>
|
||||||
|
<canvas width="15" height="15" style="max-width: 20px; max-height: 15px"
|
||||||
|
data-expected-width="15" data-expected-height="10"></canvas>
|
||||||
|
<canvas width="15" height="15" style="max-width: 20px; max-height: 20px"
|
||||||
|
data-expected-width="15" data-expected-height="10"></canvas>
|
||||||
|
<canvas width="15" height="15" style="max-width: 20px; max-height: 25px"
|
||||||
|
data-expected-width="15" data-expected-height="10"></canvas>
|
||||||
|
<br>
|
||||||
|
<canvas width="15" height="15" style="max-width: 30px; max-height: 0px"
|
||||||
|
data-expected-width="0" data-expected-height="0"></canvas>
|
||||||
|
<canvas width="15" height="15" style="max-width: 30px; max-height: 5px"
|
||||||
|
data-expected-width="10" data-expected-height="5"></canvas>
|
||||||
|
<canvas width="15" height="15" style="max-width: 30px; max-height: 10px"
|
||||||
|
data-expected-width="15" data-expected-height="10"></canvas>
|
||||||
|
<canvas width="15" height="15" style="max-width: 30px; max-height: 15px"
|
||||||
|
data-expected-width="15" data-expected-height="15"></canvas>
|
||||||
|
<canvas width="15" height="15" style="max-width: 30px; max-height: 20px"
|
||||||
|
data-expected-width="15" data-expected-height="15"></canvas>
|
||||||
|
<canvas width="15" height="15" style="max-width: 30px; max-height: 25px"
|
||||||
|
data-expected-width="15" data-expected-height="15"></canvas>
|
||||||
|
<br>
|
||||||
|
<canvas width="15" height="15" style="max-width: 40px; max-height: 0px"
|
||||||
|
data-expected-width="0" data-expected-height="0"></canvas>
|
||||||
|
<canvas width="15" height="15" style="max-width: 40px; max-height: 5px"
|
||||||
|
data-expected-width="10" data-expected-height="5"></canvas>
|
||||||
|
<canvas width="15" height="15" style="max-width: 40px; max-height: 10px"
|
||||||
|
data-expected-width="15" data-expected-height="10"></canvas>
|
||||||
|
<canvas width="15" height="15" style="max-width: 40px; max-height: 15px"
|
||||||
|
data-expected-width="15" data-expected-height="15"></canvas>
|
||||||
|
<canvas width="15" height="15" style="max-width: 40px; max-height: 20px"
|
||||||
|
data-expected-width="15" data-expected-height="15"></canvas>
|
||||||
|
<canvas width="15" height="15" style="max-width: 40px; max-height: 25px"
|
||||||
|
data-expected-width="15" data-expected-height="15"></canvas>
|
||||||
|
<br>
|
||||||
|
<canvas width="15" height="15" style="max-width: 50px; max-height: 0px"
|
||||||
|
data-expected-width="0" data-expected-height="0"></canvas>
|
||||||
|
<canvas width="15" height="15" style="max-width: 50px; max-height: 5px"
|
||||||
|
data-expected-width="10" data-expected-height="5"></canvas>
|
||||||
|
<canvas width="15" height="15" style="max-width: 50px; max-height: 10px"
|
||||||
|
data-expected-width="15" data-expected-height="10"></canvas>
|
||||||
|
<canvas width="15" height="15" style="max-width: 50px; max-height: 15px"
|
||||||
|
data-expected-width="15" data-expected-height="15"></canvas>
|
||||||
|
<canvas width="15" height="15" style="max-width: 50px; max-height: 20px"
|
||||||
|
data-expected-width="15" data-expected-height="15"></canvas>
|
||||||
|
<canvas width="15" height="15" style="max-width: 50px; max-height: 25px"
|
||||||
|
data-expected-width="15" data-expected-height="15"></canvas>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
<script src="/resources/testharness.js"></script>
|
||||||
|
<script src="/resources/testharnessreport.js"></script>
|
||||||
|
<script src="/resources/check-layout-th.js"></script>
|
||||||
|
<script>
|
||||||
|
checkLayout("canvas");
|
||||||
|
</script>
|
||||||
Loading…
Add table
Add a link
Reference in a new issue