mirror of
https://github.com/servo/servo.git
synced 2025-06-24 00:54:32 +01:00
296fa2512b
- Update CSS tests to revision e05bfd5e30ed662c2f8a353577003f8eed230180. - Update web-platform-tests to revision a052787dd5c069a340031011196b73affbd68cd9.
88 lines
No EOL
3 KiB
HTML
88 lines
No EOL
3 KiB
HTML
<!DOCTYPE html>
|
|
<html><head><meta charset="utf-8">
|
|
<title>CSS Writing Modes Test: Shrink-to-fit inline-block with a child of orthogonal block with borders</title>
|
|
<link href="http://www.w3.org/TR/css-writing-modes-3/#orthogonal-flows" rel="help" title="7.3. Orthogonal Flows">
|
|
<meta content="Shrink-to-fit inline-block with a child of orthogonal block with borders" name="assert">
|
|
<meta content="ahem dom" name="flags">
|
|
<link href="mailto:kojiishi@gmail.com" rel="author" title="Koji Ishii">
|
|
<link href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" rel="reviewer" title="Gérard Talbot"> <!-- 2015-12-23 -->
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<style>
|
|
.test {
|
|
border:thin solid;
|
|
font:20px/1 Ahem;
|
|
}
|
|
.target {
|
|
color:blue;
|
|
height:3em; /* height: 3em is not required. IE11 and Edge12 compute height to ICB height if
|
|
not set. We want the test to focus exclusively on shrink-to-fit algorithm. */
|
|
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>
|
|
</head><body><div id="log"></div>
|
|
<div id="container">
|
|
<p>Test passes if the X-position of the <b>left</b> edge of the orange box and the <b>right</b> edge of the blue box are the same.
|
|
</p><p>If script is enabled, there should be one or more PASS and no FAIL.
|
|
</p><h3>3: Shrink-to-fit inline-block with a child of orthogonal block with borders</h3>
|
|
<div class="test">
|
|
<div class="inline-block"><div class="target border">HHH</div></div><span class="next">ZZ</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.textContent;
|
|
test(function () {
|
|
try {
|
|
var targetNode = node.querySelector(".target");
|
|
var fontSize = parseFloat(getComputedStyle(targetNode).fontSize);
|
|
var targetBounds = targetNode.getBoundingClientRect();
|
|
assert_less_than_equal(targetBounds.width, fontSize * 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>
|
|
</body></html> |