| Index: LayoutTests/imported/csswg-test/css-writing-modes-3/orthogonal-parent-shrink-to-fit-001.html
|
| diff --git a/LayoutTests/imported/csswg-test/css-writing-modes-3/orthogonal-parent-shrink-to-fit-001.html b/LayoutTests/imported/csswg-test/css-writing-modes-3/orthogonal-parent-shrink-to-fit-001.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..3abfaac5870b37f90cc57204320e63adcc424a1c
|
| --- /dev/null
|
| +++ b/LayoutTests/imported/csswg-test/css-writing-modes-3/orthogonal-parent-shrink-to-fit-001.html
|
| @@ -0,0 +1,137 @@
|
| +<!DOCTYPE html>
|
| +<title>CSS Writing Modes Test: Orthogonal parent shrink-to-fit</title>
|
| +<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#orthogonal-flows">
|
| +<meta name="assert" content="Parent's min-content width in orthorgonal flows">
|
| +<meta name="flags" content="combo ahem">
|
| +<link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
|
| +<script src="../../../resources/testharness.js"></script>
|
| +<script src="../../../resources/testharnessreport.js"></script>
|
| +<link rel="stylesheet" href="../../../resources/testharness.css">
|
| +<style>
|
| +.test {
|
| + border:thin solid;
|
| + font:20px/1 Ahem;
|
| +}
|
| +.target {
|
| + color:blue;
|
| + -webkit-writing-mode:vertical-rl;
|
| +}
|
| +.border {
|
| + border-right:blue solid .5em;
|
| +}
|
| +.next {
|
| + color:orange;
|
| +}
|
| +.inline-block {
|
| + display:inline-block;
|
| +}
|
| +.float {
|
| + float:left;
|
| +}
|
| +h3 {
|
| + clear:both;
|
| +}
|
| +h3.fail {
|
| + color:red;
|
| +}
|
| +table {
|
| + border-spacing:0px;
|
| +}
|
| +td {
|
| + padding:0px;
|
| +}
|
| +</style>
|
| +<div id="container">
|
| +<p>Test passes if the <b>left</b> edge of the orange box <b>touches</b> the <b>right</b> edge of the blue box.
|
| + There should be no spaces nor overlaps.
|
| +<p>The blue box must be <b>tall</b>, the height should be as twice as the width.
|
| +<p>If script is enabled, there should be one or more PASS and no FAIL.
|
| +<h3>Orthogonal block in inline-block</h3>
|
| +<div class="test">
|
| + <div class="inline-block"><div class="target">XX</div></div><span class="next">YY</span>
|
| +</div>
|
| +<h3>Orthogonal inline in inline-block</h3>
|
| +<div class="test">
|
| + <div class="inline-block"><span class="target">XX</span></div><span class="next">YY</span>
|
| +</div>
|
| +<h3>Orthogonal inline in float</h3>
|
| +<div class="test">
|
| + <div class="float"><span class="target">XX</span></div><span class="next">YY</span>
|
| +</div>
|
| +<h3>Orthogonal block in float</h3>
|
| +<div class="test">
|
| + <div class="float"><div class="target">XX</div></div><span class="next">YY</span>
|
| +</div>
|
| +<h3>Orthogonal block in table-cell</h3>
|
| +<div class="test">
|
| + <table><tr><td><div class="target">XX</div></td><td class="next">YY</td></tr></table>
|
| +</div>
|
| +<h3>Orthogonal inline in table-cell</h3>
|
| +<div class="test">
|
| + <table><tr><td><span class="target">XX</span></td><td class="next">YY</td></tr></table>
|
| +</div>
|
| +<h3>Orthogonal block with borders in inline-block</h3>
|
| +<div class="test">
|
| + <div class="inline-block"><div class="target border">XXX</div></div><span class="next">YY</span>
|
| +</div>
|
| +<h3>Orthogonal inline with borders in inline-block</h3>
|
| +<div class="test">
|
| + <div class="inline-block"><span class="target border">XXX</span></div><span class="next">YY</span>
|
| +</div>
|
| +<h3>Orthogonal inline with borders in float</h3>
|
| +<div class="test">
|
| + <div class="float"><span class="target border">XXX</span></div><span class="next">YY</span>
|
| +</div>
|
| +<h3>Orthogonal block with borders in float</h3>
|
| +<div class="test">
|
| + <div class="float"><div class="target border">XXX</div></div><span class="next">YY</span>
|
| +</div>
|
| +<h3>Orthogonal block with borders in table-cell</h3>
|
| +<div class="test">
|
| + <table><tr><td><div class="target border">XXX</div></td><td class="next">YY</td></tr></table>
|
| +</div>
|
| +<h3>Orthogonal inline with borders in table-cell</h3>
|
| +<div class="test">
|
| + <table><tr><td><span class="target border">XXX</span></td><td class="next">YY</td></tr></table>
|
| +</div>
|
| +<h3>Orthogonal block in inline-block in inline-block</h3>
|
| +<div class="test">
|
| + <div class="inline-block"><div class="inline-block"><div class="target">XX</div></div></div><span class="next">YY</span>
|
| +</div>
|
| +<h3>Orthogonal inline in inline-block in inline-block</h3>
|
| +<div class="test">
|
| + <div class="inline-block"><div class="inline-block"><span class="target">XX</span></div></div><span class="next">YY</span>
|
| +</div>
|
| +
|
| +</div>
|
| +<script>
|
| +if (window.location.search == "?wait") {
|
| + console.log("Sleeping 5 secs for debug");
|
| + setup({explicit_done:true});
|
| + window.setTimeout(run, 5000);
|
| +} else {
|
| + run();
|
| +}
|
| +
|
| +function run() {
|
| + Array.prototype.forEach.call(document.querySelectorAll(".test"), function (node) {
|
| + var title = node.previousElementSibling.innerText;
|
| + test(function () {
|
| + try {
|
| + var targetNode = node.querySelector(".target");
|
| + var targetBounds = targetNode.getBoundingClientRect();
|
| + assert_approx_equals(targetBounds.height, targetBounds.width * 2, .01, "writing-mode is vertical")
|
| + var nextNode = node.querySelector(".next");
|
| + var nextBounds = nextNode.getBoundingClientRect();
|
| + assert_equals(nextBounds.left - targetBounds.right, 0, "the left edge of the orange box touches the right edge of the blue box");
|
| + } catch (e) {
|
| + node.previousElementSibling.classList.add("fail");
|
| + throw e;
|
| + }
|
| + }, title);
|
| + });
|
| + if (window.testRunner)
|
| + container.style.display = "none";
|
| + done();
|
| +}
|
| +</script>
|
|
|
Chromium Code Reviews
Issue 1161223002:
Import csswg-test/css-writing-modes-3/ (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@master