| Index: LayoutTests/fast/regions/webkit-named-flow-event-region-in-flexbox-overset-change.html
|
| diff --git a/LayoutTests/fast/regions/webkit-named-flow-event-region-in-flexbox-overset-change.html b/LayoutTests/fast/regions/webkit-named-flow-event-region-in-flexbox-overset-change.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..6933cabd5c7215e5f8f89675799b716bc78fcb08
|
| --- /dev/null
|
| +++ b/LayoutTests/fast/regions/webkit-named-flow-event-region-in-flexbox-overset-change.html
|
| @@ -0,0 +1,117 @@
|
| +<!DOCTYPE html>
|
| +<html>
|
| +<head>
|
| +<meta charset="utf-8">
|
| +<script src="../js/resources/js-test-pre.js"></script>
|
| +<script src="resources/helper.js"></script>
|
| +<style>
|
| + #article {
|
| + -webkit-flow-into: article;
|
| + border: 10px solid black;
|
| + }
|
| + #region_1, #region_2 {
|
| + -webkit-flow-from: no_article;
|
| + overflow: hidden;
|
| + display: inline-block;
|
| + vertical-align: top;
|
| + margin: 10px;
|
| + height: auto;
|
| + width: 200px;
|
| + border: 1px solid red;
|
| + padding: 5px;
|
| + -webkit-flex-grow: 1;
|
| + -webkit-flex-basis: 100%;
|
| + }
|
| + #region_2 {
|
| + -webkit-flex-basis: 70%;
|
| + }
|
| + .content {
|
| + background-color: green;
|
| + border: 3px dashed blue;
|
| + margin: 5px;
|
| + }
|
| + #part1 {
|
| + height: 70px;
|
| + }
|
| + #part2 {
|
| + height: 80px;
|
| + }
|
| + #flexbox {
|
| + border: 2px solid green;
|
| + margin: 5px;
|
| + width: 240px;
|
| + height: 300px;
|
| + -webkit-flex-direction: column;
|
| + }
|
| +</style>
|
| +</head>
|
| +<body>
|
| + <div id="article">
|
| + <div>
|
| + <div id="part1" class="content"></div>
|
| + <div id="part2" class="content"></div>
|
| + </div>
|
| + </div>
|
| +
|
| + <div id="flexbox">
|
| + <div id="region_1"></div>
|
| + <div id="region_2"></div>
|
| + </div>
|
| +
|
| + <script>
|
| + description("Tests the regionOversetChange event for regions inside flexboxes");
|
| +
|
| + if (window.testRunner) {
|
| + testRunner.dumpAsText();
|
| + testRunner.waitUntilDone();
|
| + }
|
| + window.jsTestIsAsync = true;
|
| + function flowContent(flowName) {
|
| + var region = document.getElementById("region_1");
|
| + region.style.webkitFlowFrom = flowName;
|
| + region = document.getElementById("region_2");
|
| + region.style.webkitFlowFrom = flowName;
|
| + }
|
| +
|
| + var eventFiredCount = 0;
|
| + function finishTest() {
|
| + shouldBe("eventFiredCount", "2");
|
| + finishJSTest();
|
| + }
|
| +
|
| + function enableFlexbox() {
|
| + debug("Engaging flexbox...")
|
| + document.getElementById("flexbox").style.display = "-webkit-flex";
|
| + }
|
| +
|
| + function regionOversetChanged(event) {
|
| + ++eventFiredCount;
|
| + shouldBeEqualToString("event.target.name", "article");
|
| +
|
| + // Activate the flexbox.
|
| + if (eventFiredCount == 1) {
|
| + if (window.testRunner)
|
| + enableFlexbox();
|
| + else
|
| + setTimeout("enableFlexbox()", 1000);
|
| +
|
| + return;
|
| + }
|
| +
|
| + else
|
| + setTimeout("finishTest()", 200);
|
| + }
|
| +
|
| + function startTest() {
|
| + var flowThread = getFlowByName("article");
|
| + flowThread.addEventListener("webkitregionoversetchange", regionOversetChanged);
|
| +
|
| + debug("Flowing content into regions...");
|
| + flowContent("article");
|
| + }
|
| +
|
| + window.addEventListener("load", startTest);
|
| + </script>
|
| + <script src="../js/resources/js-test-post.js"></script>
|
| +</body>
|
| +</html>
|
|
|
Chromium Code Reviews
Issue 17176018:
[CSS Regions] Add new regionOversetChange event (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@master